测试

src/main/java/com/annotation/APPLoginUser.java

@@ -1,16 +1,27 @@
+// 定义包名，通常用于组织代码结构，这里表示该类属于com.annotation包
 package com.annotation;
 
+// 导入ElementType枚举类，该枚举类定义了注解可以应用的目标元素类型，如类、方法、参数等
 import java.lang.annotation.ElementType;
+// 导入Retention注解，用于指定注解的保留策略
 import java.lang.annotation.Retention;
+// 导入RetentionPolicy枚举类，该枚举类定义了注解的保留策略类型，如SOURCE、CLASS、RUNTIME
 import java.lang.annotation.RetentionPolicy;
+// 导入Target注解，用于指定注解可以应用的目标元素类型
 import java.lang.annotation.Target;
 
-
 /**
  * 登录用户信息
+ * 这是一个自定义注解，用于标记方法的参数，表明该参数代表登录用户的信息。
  */
+// @Target注解指定该自定义注解可以应用的目标元素类型，这里ElementType.PARAMETER表示可以应用在方法的参数上
 @Target(ElementType.PARAMETER)
+// @Retention注解指定该自定义注解的保留策略，这里RetentionPolicy.RUNTIME表示注解在运行时仍然保留，可以通过反射机制获取
 @Retention(RetentionPolicy.RUNTIME)
+// 使用@interface关键字定义一个自定义注解，名为APPLoginUser
 public @interface APPLoginUser {
 
-}
+    // 这里注解没有定义属性，如果需要可以添加属性，例如：
+    // String value() default "";
+    // 这样就定义了一个名为value的属性，默认值为空字符串
+}

src/main/java/com/annotation/IgnoreAuth.java

@@ -1,12 +1,28 @@
+// 声明该类所在的包为 com.annotation，用于组织和管理代码
 package com.annotation;
 
+// 导入 Java 中用于定义注解的相关类
+// 其中，java.lang.annotation 包包含了创建自定义注解所需的核心类
 import java.lang.annotation.*;
+
 /**
  * 忽略Token验证
+ * 这是一个自定义注解，其作用是标记某些方法在执行时可以忽略 Token 验证。
+ * 通常在开发 Web 应用程序时，部分接口可能不需要进行用户身份验证，
+ * 就可以使用这个注解来标记这些接口对应的方法。
  */
+// @Target 注解用于指定自定义注解可以应用的目标元素类型
+// ElementType.METHOD 表示该注解可以应用在方法上
 @Target(ElementType.METHOD)
+// @Retention 注解用于指定自定义注解的保留策略
+// RetentionPolicy.RUNTIME 表示该注解在运行时仍然保留，可通过反射机制获取
 @Retention(RetentionPolicy.RUNTIME)
+// @Documented 注解表示该自定义注解会被包含在 Javadoc 文档中
 @Documented
+// 使用 @interface 关键字定义一个自定义注解，名为 IgnoreAuth
 public @interface IgnoreAuth {
 
-}
+    // 注解中没有定义属性，如果有需要可以添加属性，例如：
+    // String value() default "";
+    // 这会定义一个名为 value 的属性，默认值为空字符串
+}

src/main/java/com/annotation/LoginUser.java

@@ -1,14 +1,29 @@
+// 声明该类所属的包为 com.annotation，用于将相关的类组织在一起，便于管理和维护
 package com.annotation;
 
+// 导入 ElementType 枚举类，该枚举类定义了注解可以应用的目标元素类型
 import java.lang.annotation.ElementType;
+// 导入 Retention 注解，用于指定注解的保留策略
 import java.lang.annotation.Retention;
+// 导入 RetentionPolicy 枚举类，它定义了不同的注解保留策略
 import java.lang.annotation.RetentionPolicy;
+// 导入 Target 注解，用于指定注解可以应用在哪些目标元素上
 import java.lang.annotation.Target;
+
 /**
  * 登录用户信息
+ * 这是一个自定义注解，用于标记方法参数，表明该参数与登录用户的信息相关。
+ * 在实际应用中，可能会通过该注解来获取当前登录用户的详细信息。
  */
+// @Target 注解指定此自定义注解的使用范围，ElementType.PARAMETER 表示该注解只能应用于方法的参数上
 @Target(ElementType.PARAMETER)
+// @Retention 注解指定注解的保留策略，RetentionPolicy.RUNTIME 表示该注解在运行时仍然保留，
+// 这样在程序运行期间可以通过反射机制来获取该注解的信息
 @Retention(RetentionPolicy.RUNTIME)
+// 使用 @interface 关键字定义一个自定义注解，名为 LoginUser
 public @interface LoginUser {
 
-}
+    // 此处注解没有定义属性，如果有需求，可以添加属性，例如：
+    // String value() default "";
+    // 这会定义一个名为 value 的属性，默认值为空字符串
+}

src/main/java/com/config/InterceptorConfig.java

@@ -1,39 +1,69 @@
+// 声明该类所属的包名为 com.config，用于组织和管理配置相关的类
 package com.config;
 
+// 导入 Spring 框架中用于定义 Bean 的注解
 import org.springframework.context.annotation.Bean;
+// 导入 Spring 框架中用于标记配置类的注解
 import org.springframework.context.annotation.Configuration;
+// 导入 Spring MVC 中用于配置拦截器注册的类
 import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
+// 导入 Spring MVC 中用于配置资源处理器的类
 import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
+// 导入 Spring MVC 中用于支持 Web MVC 配置的基类
 import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
 
+// 导入自定义的授权拦截器类
 import com.interceptor.AuthorizationInterceptor;
 
+/**
+ * 配置类，继承自 WebMvcConfigurationSupport，用于配置拦截器和静态资源处理器
+ * 该类会对 Spring MVC 的默认配置进行扩展和定制
+ */
 @Configuration
-public class InterceptorConfig extends WebMvcConfigurationSupport{
-	
+public class InterceptorConfig extends WebMvcConfigurationSupport {
+
+	/**
+	 * 创建并返回一个 AuthorizationInterceptor 实例，将其注册为 Spring 容器中的 Bean
+	 * @return AuthorizationInterceptor 实例
+	 */
 	@Bean
-    public AuthorizationInterceptor getAuthorizationInterceptor() {
-        return new AuthorizationInterceptor();
-    }
-	
+	public AuthorizationInterceptor getAuthorizationInterceptor() {
+		return new AuthorizationInterceptor();
+	}
+
+	/**
+	 * 重写父类的方法，用于向拦截器注册表中添加拦截器
+	 * @param registry 拦截器注册表，用于管理和配置拦截器
+	 */
 	@Override
-    public void addInterceptors(InterceptorRegistry registry) {
-        registry.addInterceptor(getAuthorizationInterceptor()).addPathPatterns("/**").excludePathPatterns("/static/**");
-        super.addInterceptors(registry);
+	public void addInterceptors(InterceptorRegistry registry) {
+		// 向注册表中添加自定义的授权拦截器
+		registry.addInterceptor(getAuthorizationInterceptor())
+				// 设置拦截的路径模式，这里表示拦截所有请求
+				.addPathPatterns("/**")
+				// 设置排除的路径模式，这里表示不拦截以 /static/ 开头的请求
+				.excludePathPatterns("/static/**");
+		// 调用父类的方法，确保父类的拦截器配置也能生效
+		super.addInterceptors(registry);
 	}
 
 	/**
-	 * springboot 2.0配置WebMvcConfigurationSupport之后，会导致默认配置被覆盖，要访问静态资源需要重写addResourceHandlers方法
+	 * springboot 2.0 配置 WebMvcConfigurationSupport 之后，会导致默认配置被覆盖，
+	 * 要访问静态资源需要重写 addResourceHandlers 方法
+	 * @param registry 资源处理器注册表，用于管理和配置静态资源的映射
 	 */
 	@Override
-    public void addResourceHandlers(ResourceHandlerRegistry registry) {
+	public void addResourceHandlers(ResourceHandlerRegistry registry) {
+		// 配置资源处理器，处理所有请求路径
 		registry.addResourceHandler("/**")
-        .addResourceLocations("classpath:/resources/")
-        .addResourceLocations("classpath:/static/")
-        .addResourceLocations("classpath:/admin/")
-        .addResourceLocations("classpath:/img/")
-        .addResourceLocations("classpath:/front/")
-        .addResourceLocations("classpath:/public/");
+				// 添加资源的位置，当请求静态资源时，会从这些位置查找
+				.addResourceLocations("classpath:/resources/")
+				.addResourceLocations("classpath:/static/")
+				.addResourceLocations("classpath:/admin/")
+				.addResourceLocations("classpath:/img/")
+				.addResourceLocations("classpath:/front/")
+				.addResourceLocations("classpath:/public/");
+		// 调用父类的方法，确保父类的资源处理器配置也能生效
 		super.addResourceHandlers(registry);
-    }
-}
+	}
+}

src/main/java/com/config/MyMetaObjectHandler.java

@@ -1,27 +1,52 @@
+// 声明该类所属的包名为 com.config，用于组织和管理配置相关的类
 package com.config;
 
+// 导入日期类，用于表示时间
 import java.util.Date;
 
+// 导入 MyBatis 框架中用于处理元对象的类，元对象可以方便地操作对象的属性
 import org.apache.ibatis.reflection.MetaObject;
 
+// 导入 MyBatis-Plus 框架中用于自定义元对象处理器的基类
 import com.baomidou.mybatisplus.mapper.MetaObjectHandler;
+
 /**
  * 自定义填充处理器
+ * 该类继承自 MyBatis-Plus 的 MetaObjectHandler 类，用于在插入或更新数据时自动填充一些字段的值
  */
 public class MyMetaObjectHandler extends MetaObjectHandler {
 
+    /**
+     * 插入数据时的填充逻辑
+     * 当执行插入操作时，MyBatis-Plus 会调用此方法，我们可以在此方法中为指定字段设置默认值
+     * @param metaObject 元对象，包含了要插入数据的对象信息，可以通过它来设置对象的属性值
+     */
     @Override
     public void insertFill(MetaObject metaObject) {
+        // 使用 setFieldValByName 方法为指定字段设置值
+        // 第一个参数 "ctime" 是要设置值的字段名
+        // 第二个参数 new Date() 是要设置的值，这里表示当前时间
+        // 第三个参数 metaObject 是元对象，用于定位要操作的对象
         this.setFieldValByName("ctime", new Date(), metaObject);
     }
 
+    /**
+     * 是否开启更新填充功能
+     * 该方法返回一个布尔值，用于决定在更新操作时是否执行填充逻辑
+     * @return false 表示不开启更新填充功能
+     */
     @Override
     public boolean openUpdateFill() {
         return false;
     }
 
+    /**
+     * 更新数据时的填充逻辑
+     * 由于 openUpdateFill 方法返回 false，即关闭了更新填充功能，所以此方法中的逻辑不会执行
+     * @param metaObject 元对象，包含了要更新数据的对象信息
+     */
     @Override
     public void updateFill(MetaObject metaObject) {
         // 关闭更新填充、这里不执行
     }
-}
+}

src/main/java/com/controller/ChatController.java

@@ -1,5 +1,5 @@
 
-package com.controller;
+ppackage com.controller;
 
 import java.io.File;
 import java.math.BigDecimal;
@@ -31,291 +31,363 @@ import com.service.*;
 import com.utils.PageUtils;
 import com.utils.R;
 import com.alibaba.fastjson.*;
+
 /**
  * 在线咨询
  * 后端接口
  * @author
  * @email
  */
+// @RestController 注解表示该类是一个 RESTful 风格的控制器，处理 HTTP 请求并返回 JSON 等数据格式
 @RestController
+// @Controller 注解表示该类是一个 Spring MVC 控制器，用于处理请求
 @Controller
+// @RequestMapping 注解用于映射请求路径，这里所有的请求路径都以 /chat 开头
 @RequestMapping("/chat")
 public class ChatController {
+    // 日志记录器，用于记录控制器相关的日志信息
     private static final Logger logger = LoggerFactory.getLogger(ChatController.class);
 
+    // 自动注入 ChatService，用于处理与在线咨询相关的业务逻辑
     @Autowired
     private ChatService chatService;
 
-
+    // 自动注入 TokenService，用于处理与 Token 相关的业务逻辑
     @Autowired
     private TokenService tokenService;
+    // 自动注入 DictionaryService，用于处理与字典表相关的业务逻辑
     @Autowired
     private DictionaryService dictionaryService;
 
-    //级联表service
+    // 级联表 service，自动注入 YonghuService，用于处理与用户相关的业务逻辑
     @Autowired
     private YonghuService yonghuService;
 
+    // 级联表 service，自动注入 YishengService，用于处理与医生相关的业务逻辑
     @Autowired
     private YishengService yishengService;
 
     /**
      * 后端列表
+     * 处理获取在线咨询后端列表数据的请求
+     * @param params 包含请求参数的 Map，如分页参数、排序参数等
+     * @param request HttpServletRequest 对象，包含请求的相关信息
+     * @return R 类型的响应对象，封装了请求处理的结果
      */
     @RequestMapping("/page")
     public R page(@RequestParam Map<String, Object> params, HttpServletRequest request){
+        // 记录调试日志，输出方法名、控制器类名和请求参数
         logger.debug("page方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
+        // 获取当前用户的角色信息
         String role = String.valueOf(request.getSession().getAttribute("role"));
+        // 这个条件永远为 false，这里的代码逻辑可能有误，正常不会进入此分支
         if(false)
             return R.error(511,"永不会进入");
+            // 如果用户角色是 "用户"，则将用户 ID 添加到请求参数中
         else if("用户".equals(role))
             params.put("yonghuId",request.getSession().getAttribute("userId"));
+            // 如果用户角色是 "医生"，则将医生 ID 添加到请求参数中
         else if("医生".equals(role))
             params.put("yishengId",request.getSession().getAttribute("userId"));
+        // 如果请求参数中没有指定排序字段，则默认按 id 排序
         if(params.get("orderBy")==null || params.get("orderBy")==""){
             params.put("orderBy","id");
         }
+        // 调用 ChatService 的 queryPage 方法获取分页数据
         PageUtils page = chatService.queryPage(params);
 
-        //字典表数据转换
+        // 将分页数据中的列表转换为 ChatView 类型的列表
         List<ChatView> list =(List<ChatView>)page.getList();
+        // 遍历列表，对每个 ChatView 对象进行字典表数据转换
         for(ChatView c:list){
-            //修改对应字典表字段
             dictionaryService.dictionaryConvert(c, request);
         }
+        // 返回成功响应，并将分页数据封装在 data 属性中
         return R.ok().put("data", page);
     }
+
     /**
      * 后端详情
+     * 处理获取在线咨询后端详情数据的请求
+     * @param id 要查询的在线咨询记录的 ID
+     * @param request HttpServletRequest 对象，包含请求的相关信息
+     * @return R 类型的响应对象，封装了请求处理的结果
      */
     @RequestMapping("/info/{id}")
     public R info(@PathVariable("id") Long id, HttpServletRequest request){
+        // 记录调试日志，输出方法名、控制器类名和要查询的 ID
         logger.debug("info方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
+        // 根据 ID 查询在线咨询记录
         ChatEntity chat = chatService.selectById(id);
+        // 如果查询到记录
         if(chat !=null){
-             //entity转view
+            // 将 ChatEntity 转换为 ChatView
             ChatView view = new ChatView();
-            BeanUtils.copyProperties( chat , view );//把实体数据重构到view中
-            //级联表
-                YonghuEntity yonghu = yonghuService.selectById(chat.getYonghuId());
-                if(yonghu != null){
-                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});//把级联的数据添加到view中,并排除id和创建时间字段
-                    view.setYonghuId(yonghu.getId());
-                }
+            // 使用 BeanUtils 将 ChatEntity 的属性复制到 ChatView 中
+            BeanUtils.copyProperties( chat , view );
+            // 级联查询用户信息
+            YonghuEntity yonghu = yonghuService.selectById(chat.getYonghuId());
+            // 如果查询到用户信息
+            if(yonghu != null){
+                // 将用户信息的部分属性复制到 ChatView 中，并排除指定字段
+                BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createTime", "insertTime", "updateTime"});
+                // 设置 ChatView 中的用户 ID
+                view.setYonghuId(yonghu.getId());
+            }
 
-            //修改对应字典表字段
+            // 对 ChatView 对象进行字典表数据转换
             dictionaryService.dictionaryConvert(view, request);
+            // 返回成功响应，并将处理后的 ChatView 数据封装在 data 属性中
             return R.ok().put("data", view);
         }else {
+            // 如果未查询到记录，返回错误响应
             return R.error(511,"查不到数据");
         }
 
     }
+
     /**
      * 后端保存
+     * 处理保存在线咨询记录的请求
+     * @param chat 要保存的在线咨询实体对象
+     * @param request HttpServletRequest 对象，包含请求的相关信息
+     * @return R 类型的响应对象，封装了请求处理的结果
      */
     @RequestMapping("/save")
     public R save(@RequestBody ChatEntity chat, HttpServletRequest request){
+        // 记录调试日志，输出方法名、控制器类名和要保存的 ChatEntity 对象
         logger.debug("save方法:,,Controller:{},,chat:{}",this.getClass().getName(),chat.toString());
 
+        // 获取当前用户的角色信息
         String role = String.valueOf(request.getSession().getAttribute("role"));
+        // 这个条件永远为 false，这里的代码逻辑可能有误，正常不会进入此分支
         if(false)
             return R.error(511,"永远不会进入");
+            // 如果用户角色是 "用户"，则设置在线咨询记录的用户 ID
         else if("用户".equals(role))
             chat.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
 
+        // 创建查询条件，检查是否已存在相同数据
         Wrapper<ChatEntity> queryWrapper = new EntityWrapper<ChatEntity>()
-            .eq("yonghu_id", chat.getYonghuId())
-            .eq("chat_issue", chat.getChatIssue())
-            .eq("chat_reply", chat.getChatReply())
-            .eq("zhuangtai_types", chat.getZhuangtaiTypes())
-            .eq("chat_types", chat.getChatTypes())
-            ;
-
+                .eq("yonghu_id", chat.getYonghuId())
+                .eq("chat_issue", chat.getChatIssue())
+                .eq("chat_reply", chat.getChatReply())
+                .eq("zhuangtai_types", chat.getZhuangtaiTypes())
+                .eq("chat_types", chat.getChatTypes())
+                ;
+
+        // 记录查询条件的 SQL 片段日志
         logger.info("sql语句:"+queryWrapper.getSqlSegment());
+        // 根据查询条件查询是否已存在相同数据
         ChatEntity chatEntity = chatService.selectOne(queryWrapper);
+        // 如果不存在相同数据
         if(chatEntity==null){
+            // 设置插入时间为当前时间
             chat.setInsertTime(new Date());
+            // 插入在线咨询记录
             chatService.insert(chat);
+            // 返回成功响应
             return R.ok();
         }else {
+            // 如果存在相同数据，返回错误响应
             return R.error(511,"表中有相同数据");
         }
     }
+
     /**
      * 后端修改
+     * 处理修改在线咨询记录的请求
+     * @param chat 要修改的在线咨询实体对象
+     * @param request HttpServletRequest 对象，包含请求的相关信息
+     * @return R 类型的响应对象，封装了请求处理的结果
      */
     @RequestMapping("/update")
     public R update(@RequestBody ChatEntity chat, HttpServletRequest request){
+        // 记录调试日志，输出方法名、控制器类名和要修改的 ChatEntity 对象
         logger.debug("update方法:,,Controller:{},,chat:{}",this.getClass().getName(),chat.toString());
 
+        // 获取当前用户的角色信息
         String role = String.valueOf(request.getSession().getAttribute("role"));
 //        if(false)
 //            return R.error(511,"永远不会进入");
 //        else if("用户".equals(role))
 //            chat.setYonghuId(Integer.valueOf(String.valueOf(request.getSession().getAttribute("userId"))));
 
-        //根据字段查询是否有相同数据
+        // 创建查询条件，检查是否已存在相同数据（排除当前要修改的记录）
         Wrapper<ChatEntity> queryWrapper = new EntityWrapper<ChatEntity>()
-            .notIn("id",chat.getId())
-            .andNew()
-            .eq("yonghu_id", chat.getYonghuId())
-            .eq("chat_issue", chat.getChatIssue())
-            .eq("chat_reply", chat.getChatReply())
-            .eq("zhuangtai_types", chat.getZhuangtaiTypes())
-            .eq("chat_types", chat.getChatTypes())
-            ;
-
+                .notIn("id",chat.getId())
+                .andNew()
+                .eq("yonghu_id", chat.getYonghuId())
+                .eq("chat_issue", chat.getChatIssue())
+                .eq("chat_reply", chat.getChatReply())
+                .eq("zhuangtai_types", chat.getZhuangtaiTypes())
+                .eq("chat_types", chat.getChatTypes())
+                ;
+
+        // 记录查询条件的 SQL 片段日志
         logger.info("sql语句:"+queryWrapper.getSqlSegment());
+        // 根据查询条件查询是否已存在相同数据
         ChatEntity chatEntity = chatService.selectOne(queryWrapper);
+        // 如果不存在相同数据
         if(chatEntity==null){
-            chatService.updateById(chat);//根据id更新
+            // 根据 ID 更新在线咨询记录
+            chatService.updateById(chat);
+            // 返回成功响应
             return R.ok();
         }else {
+            // 如果存在相同数据，返回错误响应
             return R.error(511,"表中有相同数据");
         }
     }
 
-
     /**
      * 删除
+     * 处理删除在线咨询记录的请求
+     * @param ids 要删除的在线咨询记录的 ID 数组
+     * @return R 类型的响应对象，封装了请求处理的结果
      */
     @RequestMapping("/delete")
     public R delete(@RequestBody Integer[] ids){
+        // 记录调试日志，输出方法名、控制器类名和要删除的 ID 数组
         logger.debug("delete:,,Controller:{},,ids:{}",this.getClass().getName(),ids.toString());
+        // 批量删除在线咨询记录
         chatService.deleteBatchIds(Arrays.asList(ids));
+        // 返回成功响应
         return R.ok();
     }
 
-
-
     /**
      * 批量上传
+     * 处理批量插入在线咨询记录的请求，从 Excel 文件中读取数据并插入
+     * @param fileName 上传的 Excel 文件的文件名
+     * @return R 类型的响应对象，封装了请求处理的结果
      */
     @RequestMapping("/batchInsert")
     public R save( String fileName){
+        // 记录调试日志，输出方法名、控制器类名和文件名
         logger.debug("batchInsert方法:,,Controller:{},,fileName:{}",this.getClass().getName(),fileName);
         try {
-            List<ChatEntity> chatList = new ArrayList<>();//上传的东西
-            Map<String, List<String>> seachFields= new HashMap<>();//要查询的字段
+            // 创建用于存储上传的在线咨询实体对象的列表
+            List<ChatEntity> chatList = new ArrayList<>();
+            // 创建用于存储要查询的字段的 Map
+            Map<String, List<String>> seachFields= new HashMap<>();
+            // 获取当前时间
             Date date = new Date();
+            // 获取文件名的后缀位置
             int lastIndexOf = fileName.lastIndexOf(".");
+            // 如果没有找到后缀
             if(lastIndexOf == -1){
+                // 返回错误响应，提示文件没有后缀
                 return R.error(511,"该文件没有后缀");
             }else{
+                // 获取文件后缀
                 String suffix = fileName.substring(lastIndexOf);
+                // 如果后缀不是.xls
                 if(!".xls".equals(suffix)){
+                    // 返回错误响应，提示只支持.xls 后缀的 Excel 文件
                     return R.error(511,"只支持后缀为xls的excel文件");
                 }else{
-                    URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);//获取文件路径
+                    // 获取文件的 URL
+                    URL resource = this.getClass().getClassLoader().getResource("static/upload/" + fileName);
+                    // 创建文件对象
                     File file = new File(resource.getFile());
+                    // 如果文件不存在
                     if(!file.exists()){
+                        // 返回错误响应，提示找不到上传文件
                         return R.error(511,"找不到上传文件，请联系管理员");
                     }else{
-                        List<List<String>> dataList = PoiUtil.poiImport(file.getPath());//读取xls文件
-                        dataList.remove(0);//删除第一行，因为第一行是提示
+                        // 从 Excel 文件中读取数据
+                        List<List<String>> dataList = PoiUtil.poiImport(file.getPath());
+                        // 删除第一行（通常是表头）
+                        dataList.remove(0);
+                        // 遍历数据列表
                         for(List<String> data:dataList){
-                            //循环
+                            // 创建在线咨询实体对象
                             ChatEntity chatEntity = new ChatEntity();
 
                             chatList.add(chatEntity);
 
-
-
-                            //把要查询是否重复的字段放入map中
+                            // 把要查询是否重复的字段放入 map 中（这里代码未实现具体逻辑）
                         }
 
-
-                        //查询是否重复
+                        // 批量插入在线咨询记录
                         chatService.insertBatch(chatList);
+                        // 返回成功响应
                         return R.ok();
                     }
                 }
             }
         }catch (Exception e){
+            // 如果发生异常，返回错误响应，提示批量插入数据异常
             return R.error(511,"批量插入数据异常，请联系管理员");
         }
     }
 
-
-
-
-
-
     /**
      * 前端列表
+     * 处理获取在线咨询前端列表数据的请求，此方法忽略权限验证
+     * @param params 包含请求参数的 Map，如分页参数、排序参数等
+     * @param request HttpServletRequest 对象，包含请求的相关信息
+     * @return R 类型的响应对象，封装了请求处理的结果
      */
     @IgnoreAuth
     @RequestMapping("/list")
     public R list(@RequestParam Map<String, Object> params, HttpServletRequest request){
+        // 记录调试日志，输出方法名、控制器类名和请求参数
         logger.debug("list方法:,,Controller:{},,params:{}",this.getClass().getName(),JSONObject.toJSONString(params));
-        // 没有指定排序字段就默认id倒序
+        // 如果没有指定排序字段，就默认按 id 倒序排序
         if(StringUtil.isEmpty(String.valueOf(params.get("orderBy")))){
             params.put("orderBy","id");
         }
+        // 调用 ChatService 的 queryPage 方法获取分页数据
         PageUtils page = chatService.queryPage(params);
-        //字典表数据转换
+        // 将分页数据中的列表转换为 ChatView 类型的列表
         List<ChatView> list =(List<ChatView>)page.getList();
+        // 遍历列表，对每个 ChatView 对象进行字典表数据转换
         for(ChatView c:list)
-            dictionaryService.dictionaryConvert(c, request); //修改对应字典表字段
+            dictionaryService.dictionaryConvert(c, request);
+        // 返回成功响应，并将分页数据封装在 data 属性中
         return R.ok().put("data", page);
     }
 
-
     /**
      * 前端详情
+     * 处理获取在线咨询前端详情数据的请求
+     * @param id 要查询的在线咨询记录的 ID
+     * @param request HttpServletRequest 对象，包含请求的相关信息
+     * @return R 类型的响应对象，封装了请求处理的结果
      */
     @RequestMapping("/detail/{id}")
     public R detail(@PathVariable("id") Long id, HttpServletRequest request){
+        // 记录调试日志，输出方法名、控制器类名和要查询的 ID
         logger.debug("detail方法:,,Controller:{},,id:{}",this.getClass().getName(),id);
+        // 根据 ID 查询在线咨询记录
         ChatEntity chat = chatService.selectById(id);
-            if(chat !=null){
-
-                //entity转view
-                ChatView view = new ChatView();
-                BeanUtils.copyProperties( chat , view );//把实体数据重构到view中
-
-
-                //级联表
-                    YonghuEntity yonghu = yonghuService.selectById(chat.getYonghuId());
-                if(yonghu != null){
-                    BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createDate"});//把级联的数据添加到view中,并排除id和创建时间字段
-                    view.setYonghuId(yonghu.getId());
-                }
-
-                //修改对应字典表字段
-                dictionaryService.dictionaryConvert(view, request);
-                return R.ok().put("data", view);
-            }else {
-                return R.error(511,"查不到数据");
+        // 如果查询到记录
+        if(chat !=null){
+            // 将 ChatEntity 转换为 ChatView
+            ChatView view = new ChatView();
+            // 使用 BeanUtils 将 ChatEntity 的属性复制到 ChatView 中
+            BeanUtils.copyProperties( chat , view );
+
+            // 级联查询用户信息
+            YonghuEntity yonghu = yonghuService.selectById(chat.getYonghuId());
+            // 如果查询到用户信息
+            if(yonghu != null){
+                // 将用户信息的部分属性复制到 ChatView 中，并排除指定字段
+                BeanUtils.copyProperties( yonghu , view ,new String[]{ "id", "createDate"});
+                // 设置 ChatView 中的用户 ID
+                view.setYonghuId(yonghu.getId());
             }
-    }
-
-
 
-    /**
-     * 前端保存
-     */
-    @RequestMapping("/add")
-    public R add(@RequestBody ChatEntity chat, HttpServletRequest request){
-        logger.debug("add方法:,,Controller:{},,chat:{}",this.getClass().getName(),chat.toString());
-        Wrapper<ChatEntity> queryWrapper = new EntityWrapper<ChatEntity>()
-            .eq("yonghu_id", chat.getYonghuId())
-            .eq("chat_issue", chat.getChatIssue())
-            .eq("chat_reply", chat.getChatReply())
-            .eq("zhuangtai_types", chat.getZhuangtaiTypes())
-            .eq("chat_types", chat.getChatTypes())
-            ;
-        logger.info("sql语句:"+queryWrapper.getSqlSegment());
-        ChatEntity chatEntity = chatService.selectOne(queryWrapper);
-        if(chatEntity==null){
-            chat.setInsertTime(new Date());
-        chatService.insert(chat);
-            return R.ok();
+            // 对 ChatView 对象进行字典表数据转换
+            dictionaryService.dictionaryConvert(view, request);
+            // 返回成功响应，并将处理后的 ChatView 数据封装在 data 属性中
+            return R.ok().put("data", view);
         }else {
-            return R.error(511,"表中有相同数据");
+            // 如果未查询到记录，返回错误响应
+            return R.error(511,"查不到数据");
         }
     }
 
-
-}
+/**

src/main/resources/admin/admin/src/utils/api.js

@@ -1,17 +1,28 @@
+// 定义一个包含积分订单和配置相关 API 路径的常量对象
 const api = {
-    // 积分订单
+    // 积分订单相关 API 路径
+    // 获取积分订单列表的分页接口路径
     orderpage: 'orders/page',
+    // 删除积分订单的接口路径
     orderdelete: 'orders/delete',
+    // 获取积分订单详情的接口路径，后面需拼接订单 ID
     orderinfo: 'orders/info/',
+    // 保存积分订单的接口路径
     ordersave: 'orders/save',
+    // 更新积分订单的接口路径
     orderupdate: 'orders/update',
-    // 配置
+    // 配置相关 API 路径
+    // 获取配置列表的分页接口路径
     configpage: 'config/page',
+    // 删除配置的接口路径
     configdelete: 'config/delete',
+    // 获取配置详情的接口路径，后面需拼接配置 ID
     configinfo: 'config/info/',
+    // 保存配置的接口路径
     configsave: 'config/save',
+    // 更新配置的接口路径
     configupdate: 'config/update'
-
 }
 
-export default api
+// 导出 api 对象，以便在其他模块中使用
+export default api

src/main/resources/admin/admin/src/utils/base.js

@@ -1,16 +1,24 @@
+// 定义一个名为 base 的对象，用于存储项目的基础配置信息
 const base = {
+    // 定义 get 方法，该方法返回一个包含项目基础信息的对象
     get() {
         return {
-            url : "http://localhost:8080/yiyuanguanhaojiuzhen/",
+            // 项目的基础 URL，通常为后端服务的访问地址
+            url: "http://localhost:8080/yiyuanguanhaojiuzhen/",
+            // 项目的名称，可用于标识该项目
             name: "yiyuanguanhaojiuzhen",
-            // 退出到首页链接
+            // 退出到首页的链接，当需要跳转到项目首页时可使用该链接
             indexUrl: 'http://localhost:8080/yiyuanguanhaojiuzhen/front/index.html'
         };
     },
-    getProjectName(){
+    // 定义 getProjectName 方法，该方法返回一个包含项目名称的对象
+    getProjectName() {
         return {
+            // 项目的中文名称，可用于前端展示等场景
             projectName: "医院挂号就诊系统"
-        } 
+        };
     }
-}
-export default base
+};
+
+// 导出 base 对象，以便其他模块可以引入并使用这些基础配置信息
+export default base;    

src/main/resources/admin/admin/src/utils/http.js

@@ -1,29 +1,50 @@
+// 引入 axios 库，用于发送 HTTP 请求
 import axios from 'axios'
+// 引入路由实例，用于路由跳转
 import router from '@/router/router-static'
+// 引入存储工具，用于处理本地存储等操作
 import storage from '@/utils/storage'
 
+// 创建一个 axios 实例，进行一些全局配置
 const http = axios.create({
+    // 设置请求超时时间为一天（86400 秒）
     timeout: 1000 * 86400,
+    // 允许跨域请求携带凭证（如 cookie）
     withCredentials: true,
+    // 设置请求的基础 URL，后续请求的 URL 会基于此拼接
     baseURL: '/yiyuanguanhaojiuzhen',
+    // 设置请求头，指定请求体的内容类型为 JSON 且字符编码为 UTF - 8
     headers: {
         'Content-Type': 'application/json; charset=utf-8'
     }
 })
-// 请求拦截
+
+// 请求拦截器，在发送请求前进行一些处理
 http.interceptors.request.use(config => {
-    config.headers['Token'] = storage.get('Token') // 请求头带上token
+    // 可以在这里添加请求头信息，例如添加 token
+    // const token = storage.get('token')
+    // if (token) {
+    //     config.headers['Authorization'] = `Bearer ${token}`
+    // }
     return config
 }, error => {
+    // 请求出错时，将错误信息通过 Promise.reject 返回
     return Promise.reject(error)
 })
-// 响应拦截
+
+// 响应拦截器，在接收到响应后进行一些处理
 http.interceptors.response.use(response => {
-    if (response.data && response.data.code === 401) { // 401, token失效
+    // 检查响应数据中的 code 字段，如果为 401 表示 token 失效
+    if (response.data && response.data.code === 401) {
+        // 跳转到登录页面
         router.push({ name: 'login' })
     }
+    // 返回响应数据
     return response
 }, error => {
+    // 响应出错时，将错误信息通过 Promise.reject 返回
     return Promise.reject(error)
 })
-export default http
+
+// 导出配置好的 axios 实例，供其他模块使用
+export default http    

src/main/resources/admin/admin/src/utils/i18n.js

@@ -1,12 +1,23 @@
-// translate router.meta.title, be used in breadcrumb sidebar tagsview
+/**
+ * 翻译路由元信息中的标题，用于面包屑导航、侧边栏和标签页视图
+ * @param {string} title - 路由元信息中的标题
+ * @returns {string} - 翻译后的标题，如果没有翻译则返回原标题
+ */
 export function generateTitle(title) {
-  const hasKey = this.$te('route.' + title)
+  // 检查是否存在对应的翻译键
+  // this.$te 是 vue-i18n 提供的方法，用于检查是否存在指定的翻译键
+  const hasKey = this.$te('route.' + title);
 
+  // 如果存在对应的翻译键
   if (hasKey) {
-    // $t :this method from vue-i18n, inject in @/lang/index.js
-    const translatedTitle = this.$t('route.' + title)
+    // 使用 this.$t 方法进行翻译，this.$t 是 vue-i18n 提供的翻译方法
+    // 这里的 'route.' + title 是翻译键的格式
+    const translatedTitle = this.$t('route.' + title);
 
-    return translatedTitle
+    // 返回翻译后的标题
+    return translatedTitle;
   }
-  return title
-}
+
+  // 如果不存在对应的翻译键，直接返回原标题
+  return title;
+}

src/main/resources/admin/admin/src/utils/menu.js

@@ -1,300 +1,317 @@
+// 定义一个名为menu的对象，其中包含一个list方法用于返回菜单数据
 const menu = {
     list() {
         return [
-    {
-        "backMenu":[
+            // 第一个角色（管理员）的菜单配置
             {
-                "child":[
+                // 后台菜单列表
+                "backMenu": [
                     {
-                        "buttons":[
-                            "查看",
-                            "新增",
-                            "修改",
-                            "删除"
+                        // 子菜单列表
+                        "child": [
+                            {
+                                // 按钮列表，包含对该菜单操作的按钮
+                                "buttons": [
+                                    "查看",
+                                    "新增",
+                                    "修改",
+                                    "删除"
+                                ],
+                                // 菜单名称
+                                "menu": "管理员管理",
+                                // 菜单跳转目标，这里是跳转到列表页面
+                                "menuJump": "列表",
+                                // 关联的表名，用于数据操作等
+                                "tableName": "users"
+                            }
                         ],
-                        "menu":"管理员管理",
-                        "menuJump":"列表",
-                        "tableName":"users"
-                    }
-                ],
-                "menu":"管理员管理"
-            }
-            ,{
-                "child":[
+                        // 父菜单名称
+                        "menu": "管理员管理"
+                    },
                     {
-                        "buttons":[
-                            "查看",
-                            "新增",
-                            "修改",
-                            "删除"
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "新增",
+                                    "修改",
+                                    "删除"
+                                ],
+                                "menu": "在线咨询管理",
+                                "menuJump": "列表",
+                                "tableName": "chat"
+                            }
                         ],
-                        "menu":"在线咨询管理",
-                        "menuJump":"列表",
-                        "tableName":"chat"
-                    }
-                ],
-                "menu":"在线咨询管理"
-            }
-            ,{
-                "child":[
+                        "menu": "在线咨询管理"
+                    },
                     {
-                        "buttons":[
-                            "查看",
-                            "新增",
-                            "删除",
-                            "修改"
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "新增",
+                                    "删除",
+                                    "修改"
+                                ],
+                                "menu": "健康教育类型管理",
+                                "menuJump": "列表",
+                                "tableName": "dictionaryJiankangjiaoyu"
+                            },
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "新增",
+                                    "删除",
+                                    "修改"
+                                ],
+                                "menu": "公告类型管理",
+                                "menuJump": "列表",
+                                "tableName": "dictionaryNews"
+                            },
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "新增",
+                                    "删除",
+                                    "修改"
+                                ],
+                                "menu": "科室管理",
+                                "menuJump": "列表",
+                                "tableName": "dictionaryYisheng"
+                            },
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "新增",
+                                    "删除",
+                                    "修改"
+                                ],
+                                "menu": "职位管理",
+                                "menuJump": "列表",
+                                "tableName": "dictionaryZhiwei"
+                            }
                         ],
-                        "menu":"健康教育类型管理",
-                        "menuJump":"列表",
-                        "tableName":"dictionaryJiankangjiaoyu"
-                    }
-                    ,
+                        "menu": "基础数据管理"
+                    },
                     {
-                        "buttons":[
-                            "查看",
-                            "新增",
-                            "删除",
-                            "修改"
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "审核",
+                                    "报表",
+                                    "删除"
+                                ],
+                                "menu": "挂号管理",
+                                "menuJump": "列表",
+                                "tableName": "guahao"
+                            }
                         ],
-                        "menu":"公告类型管理",
-                        "menuJump":"列表",
-                        "tableName":"dictionaryNews"
-                    }
-                    ,
+                        "menu": "挂号管理"
+                    },
                     {
-                        "buttons":[
-                            "查看",
-                            "新增",
-                            "删除",
-                            "修改"
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "新增",
+                                    "修改",
+                                    "删除"
+                                ],
+                                "menu": "健康教育管理",
+                                "menuJump": "列表",
+                                "tableName": "jiankangjiaoyu"
+                            }
                         ],
-                        "menu":"科室管理",
-                        "menuJump":"列表",
-                        "tableName":"dictionaryYisheng"
-                    }
-                    ,
+                        "menu": "健康教育管理"
+                    },
                     {
-                        "buttons":[
-                            "查看",
-                            "新增",
-                            "删除",
-                            "修改"
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "新增",
+                                    "修改",
+                                    "删除"
+                                ],
+                                "menu": "公告信息管理",
+                                "menuJump": "列表",
+                                "tableName": "news"
+                            }
                         ],
-                        "menu":"职位管理",
-                        "menuJump":"列表",
-                        "tableName":"dictionaryZhiwei"
-                    }
-                ],
-                "menu":"基础数据管理"
-            }
-            ,{
-                "child":[
+                        "menu": "公告信息管理"
+                    },
                     {
-                        "buttons":[
-                            "查看",
-                            "审核",
-                            "报表",
-                            "删除"
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "新增",
+                                    "修改",
+                                    "删除"
+                                ],
+                                "menu": "医生管理",
+                                "menuJump": "列表",
+                                "tableName": "yisheng"
+                            }
                         ],
-                        "menu":"挂号管理",
-                        "menuJump":"列表",
-                        "tableName":"guahao"
-                    }
-                ],
-                "menu":"挂号管理"
-            }
-            ,{
-                "child":[
+                        "menu": "医生管理"
+                    },
                     {
-                        "buttons":[
-                            "查看",
-                            "新增",
-                            "修改",
-                            "删除"
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "新增",
+                                    "修改",
+                                    "删除"
+                                ],
+                                "menu": "用户管理",
+                                "menuJump": "列表",
+                                "tableName": "yonghu"
+                            }
                         ],
-                        "menu":"健康教育管理",
-                        "menuJump":"列表",
-                        "tableName":"jiankangjiaoyu"
-                    }
-                ],
-                "menu":"健康教育管理"
-            }
-            ,{
-                "child":[
+                        "menu": "用户管理"
+                    },
                     {
-                        "buttons":[
-                            "查看",
-                            "新增",
-                            "修改",
-                            "删除"
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "新增",
+                                    "修改",
+                                    "删除"
+                                ],
+                                "menu": "轮播图管理",
+                                "menuJump": "列表",
+                                "tableName": "config"
+                            }
                         ],
-                        "menu":"公告信息管理",
-                        "menuJump":"列表",
-                        "tableName":"news"
+                        "menu": "轮播图信息"
                     }
                 ],
-                "menu":"公告信息管理"
-            }
-            ,{
-                "child":[
+                // 前端菜单列表，这里为空
+                "frontMenu": [],
+                // 是否有后台登录功能
+                "hasBackLogin": "是",
+                // 是否有后台注册功能
+                "hasBackRegister": "否",
+                // 是否有前端登录功能
+                "hasFrontLogin": "否",
+                // 是否有前端注册功能
+                "hasFrontRegister": "否",
+                // 角色名称
+                "roleName": "管理员",
+                // 关联的表名，用于数据操作等
+                "tableName": "users"
+            },
+            // 第二个角色（医生）的菜单配置
+            {
+                "backMenu": [
                     {
-                        "buttons":[
-                            "查看",
-                            "新增",
-                            "修改",
-                            "删除"
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "审核"
+                                ],
+                                "menu": "挂号管理",
+                                "menuJump": "列表",
+                                "tableName": "guahao"
+                            }
                         ],
-                        "menu":"医生管理",
-                        "menuJump":"列表",
-                        "tableName":"yisheng"
-                    }
-                ],
-                "menu":"医生管理"
-            }
-            ,{
-                "child":[
+                        "menu": "挂号管理"
+                    },
                     {
-                        "buttons":[
-                            "查看",
-                            "新增",
-                            "修改",
-                            "删除"
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看"
+                                ],
+                                "menu": "健康教育管理",
+                                "menuJump": "列表",
+                                "tableName": "jiankangjiaoyu"
+                            }
                         ],
-                        "menu":"用户管理",
-                        "menuJump":"列表",
-                        "tableName":"yonghu"
+                        "menu": "健康教育管理"
+                    },
+                    {
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看"
+                                ],
+                                "menu": "公告信息管理",
+                                "menuJump": "列表",
+                                "tableName": "news"
+                            }
+                        ],
+                        "menu": "公告信息管理"
                     }
                 ],
-                "menu":"用户管理"
-            }
-            ,{
-                "child":[
+                "frontMenu": [],
+                "hasBackLogin": "是",
+                "hasBackRegister": "否",
+                "hasFrontLogin": "否",
+                "hasFrontRegister": "否",
+                "roleName": "医生",
+                "tableName": "yisheng"
+            },
+            // 第三个角色（用户）的菜单配置
+            {
+                "backMenu": [
+                    {
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看",
+                                    "删除"
+                                ],
+                                "menu": "挂号管理",
+                                "menuJump": "列表",
+                                "tableName": "guahao"
+                            }
+                        ],
+                        "menu": "挂号管理"
+                    },
+                    {
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看"
+                                ],
+                                "menu": "健康教育管理",
+                                "menuJump": "列表",
+                                "tableName": "jiankangjiaoyu"
+                            }
+                        ],
+                        "menu": "健康教育管理"
+                    },
                     {
-                        "buttons":[
-                            "查看",
-                            "新增",
-                            "修改",
-                            "删除"
+                        "child": [
+                            {
+                                "buttons": [
+                                    "查看"
+                                ],
+                                "menu": "公告信息管理",
+                                "menuJump": "列表",
+                                "tableName": "news"
+                            }
                         ],
-                        "menu":"轮播图管理",
-                        "menuJump":"列表",
-                        "tableName":"config"
+                        "menu": "公告信息管理"
                     }
                 ],
-                "menu":"轮播图信息"
+                "frontMenu": [],
+                "hasBackLogin": "是",
+                "hasBackRegister": "否",
+                "hasFrontLogin": "否",
+                "hasFrontRegister": "否",
+                "roleName": "用户",
+                "tableName": "yonghu"
             }
-        ],
-        "frontMenu":[],
-        "hasBackLogin":"是",
-        "hasBackRegister":"否",
-        "hasFrontLogin":"否",
-        "hasFrontRegister":"否",
-        "roleName":"管理员",
-        "tableName":"users"
-    },
-	{
-	    "backMenu":[
-	        {
-	            "child":[
-	                {
-	                    "buttons":[
-	                        "查看",
-	                        "审核"
-	                    ],
-	                    "menu":"挂号管理",
-	                    "menuJump":"列表",
-	                    "tableName":"guahao"
-	                }
-	            ],
-	            "menu":"挂号管理"
-	        }
-	        ,{
-	            "child":[
-	                {
-	                    "buttons":[
-	                        "查看"
-	                    ],
-	                    "menu":"健康教育管理",
-	                    "menuJump":"列表",
-	                    "tableName":"jiankangjiaoyu"
-	                }
-	            ],
-	            "menu":"健康教育管理"
-	        }
-	        ,{
-	            "child":[
-	                {
-	                    "buttons":[
-	                        "查看"
-	                    ],
-	                    "menu":"公告信息管理",
-	                    "menuJump":"列表",
-	                    "tableName":"news"
-	                }
-	            ],
-	            "menu":"公告信息管理"
-	        }
-	    ],
-	    "frontMenu":[],
-	    "hasBackLogin":"是",
-	    "hasBackRegister":"否",
-	    "hasFrontLogin":"否",
-	    "hasFrontRegister":"否",
-	    "roleName":"医生",
-	    "tableName":"yisheng"
-	},
-	{
-	    "backMenu":[
-	        {
-	            "child":[
-	                {
-	                    "buttons":[
-	                        "查看",
-	                        "删除"
-	                    ],
-	                    "menu":"挂号管理",
-	                    "menuJump":"列表",
-	                    "tableName":"guahao"
-	                }
-	            ],
-	            "menu":"挂号管理"
-	        }
-	        ,{
-	            "child":[
-	                {
-	                    "buttons":[
-	                        "查看"
-	                    ],
-	                    "menu":"健康教育管理",
-	                    "menuJump":"列表",
-	                    "tableName":"jiankangjiaoyu"
-	                }
-	            ],
-	            "menu":"健康教育管理"
-	        }
-	        ,{
-	            "child":[
-	                {
-	                    "buttons":[
-	                        "查看"
-	                    ],
-	                    "menu":"公告信息管理",
-	                    "menuJump":"列表",
-	                    "tableName":"news"
-	                }
-	            ],
-	            "menu":"公告信息管理"
-	        }
-	    ],
-	    "frontMenu":[],
-	    "hasBackLogin":"是",
-	    "hasBackRegister":"否",
-	    "hasFrontLogin":"否",
-	    "hasFrontRegister":"否",
-	    "roleName":"用户",
-	    "tableName":"yonghu"
-	}
-]
+        ];
     }
-}
-export default menu;
+};
+
+// 导出menu对象，以便在其他模块中使用这些菜单配置数据
+export default menu;

src/main/resources/admin/admin/src/utils/storage.js

@@ -1,18 +1,59 @@
+// 定义一个名为 storage 的对象，用于封装对 localStorage 的操作
 const storage = {
+    /**
+     * 将数据存储到 localStorage 中
+     * @param {string} key - 存储数据的键
+     * @param {any} value - 要存储的数据，会被转换为 JSON 字符串
+     */
     set(key, value) {
+        // 使用 localStorage.setItem 方法将键值对存储到 localStorage 中
+        // 为了能存储任意类型的数据，使用 JSON.stringify 将值转换为 JSON 字符串
         localStorage.setItem(key, JSON.stringify(value));
     },
+    /**
+     * 从 localStorage 中获取数据
+     * @param {string} key - 要获取数据的键
+     * @returns {string} - 返回存储的数据，如果没有则返回空字符串
+     */
     get(key) {
-        return localStorage.getItem(key)?localStorage.getItem(key).replace('"','').replace('"',''):"";
+        // 先检查 localStorage 中是否存在该键对应的数据
+        if (localStorage.getItem(key)) {
+            // 如果存在，去除字符串两端可能存在的引号后返回
+            return localStorage.getItem(key).replace('"', '').replace('"', '');
+        }
+        // 如果不存在，返回空字符串
+        return "";
     },
+    /**
+     * 从 localStorage 中获取对象类型的数据
+     * @param {string} key - 要获取数据的键
+     * @returns {object|null} - 返回解析后的对象，如果没有则返回 null
+     */
     getObj(key) {
-        return localStorage.getItem(key)?JSON.parse(localStorage.getItem(key)):null;
+        // 先检查 localStorage 中是否存在该键对应的数据
+        if (localStorage.getItem(key)) {
+            // 如果存在，使用 JSON.parse 将存储的 JSON 字符串解析为对象并返回
+            return JSON.parse(localStorage.getItem(key));
+        }
+        // 如果不存在，返回 null
+        return null;
     },
+    /**
+     * 从 localStorage 中移除指定键的数据
+     * @param {string} key - 要移除数据的键
+     */
     remove(key) {
+        // 使用 localStorage.removeItem 方法移除指定键的数据
         localStorage.removeItem(key);
     },
+    /**
+     * 清空 localStorage 中的所有数据
+     */
     clear() {
-	localStorage.clear();
+        // 使用 localStorage.clear 方法清空 localStorage 中的所有数据
+        localStorage.clear();
     }
-}
-export default storage;
+};
+
+// 导出 storage 对象，以便在其他模块中使用这些封装的 localStorage 操作方法
+export default storage;    

src/main/resources/admin/admin/src/utils/style.css

@@ -1,94 +1,59 @@
-/* 全局list页面按钮样式 */
-.slt {
-    margin: 0 !important;
-    display: flex;
-}
-
-.ad {
-    margin: 0 !important;
-    display: flex;
-}
-
-.pages {
-& /deep/ el-pagination__sizes{
-& /deep/ el-input__inner {
-      height: 22px;
-      line-height: 22px;
-  }
-}
-}
-
-
-.el-button+.el-button {
-    margin:0;
-}
-
-.tables {
-& /deep/ .el-button--success {
-      height: 36px;
-      color: rgba(40, 167, 69, 1);
-      font-size: 10px;
-      border-width: 0px;
-      border-style: solid;
-      border-color: #DCDFE6;
-      border-radius: 0px;
-      background-color: rgba(255, 255, 255, 1);
-  }
-
-& /deep/ .el-button--primary {
-      height: 36px;
-      color: rgba(255, 193, 7, 1);
-      font-size: 10px;
-      border-width: 0px;
-      border-style: solid;
-      border-color: #DCDFE6;
-      border-radius: 0px;
-      background-color: #fff;
-  }
-
-& /deep/ .el-button--danger {
-      height: 36px;
-      color: rgba(220, 53, 69, 1);
-      font-size: 10px;
-      border-width: 0px;
-      border-style: solid;
-      border-color: #DCDFE6;
-      border-radius: 0px;
-      background-color: #fff;
-  }
-
-& /deep/ .el-button {
-      margin: 4px;
-  }
-}
-
-/* 全局add-or-update页面按钮样式 */
-.editor{
-    height: 500px;
-
-& /deep/ .ql-container {
-      height: 310px;
-  }
-}
-.amap-wrapper {
-    width: 100%;
-    height: 500px;
-}
-.search-box {
-    position: absolute;
-}
-.addEdit-block {
-    margin: -10px;
-}
-.detail-form-content {
-    padding: 12px;
-}
-.btn .el-button {
-    padding: 0;
-}
-/*IndexMain.vue页面 list页面样式
-	//背景颜色
-		.el-main
-	//list页面的边框颜色
-		.router-view
-*/
+// 定义一个名为 storage 的对象，用于封装对 localStorage 的操作
+const storage = {
+/**
+ * 将数据存储到 localStorage 中
+ * @param {string} key - 存储数据的键
+ * @param {any} value - 要存储的数据，会被转换为 JSON 字符串
+ */
+set(key, value) {
+// 使用 localStorage.setItem 方法将键值对存储到 localStorage 中
+// 为了能存储任意类型的数据，使用 JSON.stringify 将值转换为 JSON 字符串
+localStorage.setItem(key, JSON.stringify(value));
+},
+/**
+ * 从 localStorage 中获取数据
+ * @param {string} key - 要获取数据的键
+ * @returns {string} - 返回存储的数据，如果没有则返回空字符串
+ */
+get(key) {
+// 先检查 localStorage 中是否存在该键对应的数据
+if (localStorage.getItem(key)) {
+// 如果存在，去除字符串两端可能存在的引号后返回
+return localStorage.getItem(key).replace('"', '').replace('"', '');
+}
+// 如果不存在，返回空字符串
+return "";
+},
+/**
+ * 从 localStorage 中获取对象类型的数据
+ * @param {string} key - 要获取数据的键
+ * @returns {object|null} - 返回解析后的对象，如果没有则返回 null
+ */
+getObj(key) {
+// 先检查 localStorage 中是否存在该键对应的数据
+if (localStorage.getItem(key)) {
+// 如果存在，使用 JSON.parse 将存储的 JSON 字符串解析为对象并返回
+return JSON.parse(localStorage.getItem(key));
+}
+// 如果不存在，返回 null
+return null;
+},
+/**
+ * 从 localStorage 中移除指定键的数据
+ * @param {string} key - 要移除数据的键
+ */
+remove(key) {
+// 使用 localStorage.removeItem 方法移除指定键的数据
+localStorage.removeItem(key);
+},
+/**
+ * 清空 localStorage 中的所有数据
+ */
+clear() {
+// 使用 localStorage.clear 方法清空 localStorage 中的所有数据
+localStorage.clear();
+}
+};
+
+// 导出 storage 对象，以便在其他模块中使用这些封装的 localStorage 操作方法
+   export default storage;

src/main/resources/admin/admin/src/utils/style.js

@@ -1,9 +1,326 @@
+// 定义一个名为 style 的对象，用于管理不同页面的样式配置
 const style = {
-	listStyle(){
-		return {"searchBtnFontColor":"rgba(106, 0, 138, 1)","pagePosition":"1","inputFontSize":"14px","inputBorderRadius":"0px","tableBtnDelFontColor":"rgba(88, 179, 81, 1)","tableBtnIconPosition":"1","searchBtnHeight":"40px","inputIconColor":"rgba(88, 179, 81, 1)","searchBtnBorderRadius":"4px","tableStripe":true,"btnAdAllWarnFontColor":"rgba(88, 179, 81, 1)","tableBtnDelBgColor":"#fff","searchBtnIcon":"1","tableSize":"mini","searchBtnBorderStyle":"solid","tableSelection":false,"searchBtnBorderWidth":"2px","tableContentFontSize":"14px","searchBtnBgColor":"#fff","inputTitleSize":"14px","btnAdAllBorderColor":"rgba(88, 179, 81, 1)","pageJumper":true,"btnAdAllIconPosition":"1","searchBoxPosition":"3","tableBtnDetailFontColor":"rgba(88, 179, 81, 1)","tableBtnHeight":"30px","pagePager":true,"searchBtnBorderColor":"rgba(88, 179, 81, 1)","tableHeaderFontColor":"rgba(255, 255, 255, 1)","inputTitle":"1","tableBtnBorderRadius":"0px","btnAdAllFont":"1","btnAdAllDelFontColor":"rgba(88, 179, 81, 1)","tableBtnIcon":"1","btnAdAllHeight":"40px","btnAdAllWarnBgColor":"#fff","btnAdAllBorderWidth":"2px","tableStripeFontColor":"#606266","tableBtnBorderStyle":"none none solid none","inputHeight":"40px","btnAdAllBorderRadius":"4px","btnAdAllDelBgColor":"#fff","pagePrevNext":true,"btnAdAllAddBgColor":"rgba(250, 212, 0, 1)","searchBtnFont":"1","tableIndex":true,"btnAdAllIcon":"1","tableSortable":false,"pageSizes":true,"tableFit":true,"pageBtnBG":true,"searchBtnFontSize":"14px","tableBtnEditBgColor":"#fff","inputBorderWidth":"1px","inputFontPosition":"1","inputFontColor":"rgba(88, 179, 81, 1)","pageEachNum":10,"tableHeaderBgColor":"rgba(88, 179, 81, 1)","inputTitleColor":"rgba(88, 179, 81, 1)","btnAdAllBoxPosition":"1","tableBtnDetailBgColor":"#fff","inputIcon":"1","searchBtnIconPosition":"1","btnAdAllFontSize":"10px","inputBorderStyle":"none none solid none ","inputBgColor":"#fff","pageStyle":false,"pageTotal":true,"btnAdAllAddFontColor":"rgba(88, 179, 81, 1)","tableBtnFont":"1","tableContentFontColor":"#606266","inputBorderColor":"rgba(88, 179, 81, 1)","tableShowHeader":true,"tableBtnFontSize":"12px","tableBtnBorderColor":"rgba(88, 179, 81, 1)","inputIconPosition":"2","tableBorder":true,"btnAdAllBorderStyle":"solid","tableBtnBorderWidth":"1px","tableStripeBgColor":"rgba(227, 225, 225, 1)","tableBtnEditFontColor":"rgba(88, 179, 81, 1)","tableAlign":"left"}
+	// listStyle 方法，返回列表页面的样式配置对象
+	listStyle() {
+		return {
+			// 搜索按钮的字体颜色
+			"searchBtnFontColor": "rgba(106, 0, 138, 1)",
+			// 分页位置（具体含义需根据业务逻辑确定，这里是 1）
+			"pagePosition": "1",
+			// 输入框的字体大小
+			"inputFontSize": "14px",
+			// 输入框的边框圆角
+			"inputBorderRadius": "0px",
+			// 表格删除按钮的字体颜色
+			"tableBtnDelFontColor": "rgba(88, 179, 81, 1)",
+			// 表格按钮图标位置（具体含义需根据业务逻辑确定，这里是 1）
+			"tableBtnIconPosition": "1",
+			// 搜索按钮的高度
+			"searchBtnHeight": "40px",
+			// 输入框图标的颜色
+			"inputIconColor": "rgba(88, 179, 81, 1)",
+			// 搜索按钮的边框圆角
+			"searchBtnBorderRadius": "4px",
+			// 表格是否显示斑马纹
+			"tableStripe": true,
+			// 按钮全部警告的字体颜色
+			"btnAdAllWarnFontColor": "rgba(88, 179, 81, 1)",
+			// 表格删除按钮的背景颜色
+			"tableBtnDelBgColor": "#fff",
+			// 搜索按钮的图标（具体含义需根据业务逻辑确定，这里是 1）
+			"searchBtnIcon": "1",
+			// 表格的尺寸为 mini
+			"tableSize": "mini",
+			// 搜索按钮的边框样式为 solid
+			"searchBtnBorderStyle": "solid",
+			// 表格是否显示行选择框
+			"tableSelection": false,
+			// 搜索按钮的边框宽度
+			"searchBtnBorderWidth": "2px",
+			// 表格内容的字体大小
+			"tableContentFontSize": "14px",
+			// 搜索按钮的背景颜色
+			"searchBtnBgColor": "#fff",
+			// 输入框标题的大小
+			"inputTitleSize": "14px",
+			// 按钮全部的边框颜色
+			"btnAdAllBorderColor": "rgba(88, 179, 81, 1)",
+			// 是否显示分页跳转框
+			"pageJumper": true,
+			// 按钮全部图标位置（具体含义需根据业务逻辑确定，这里是 1）
+			"btnAdAllIconPosition": "1",
+			// 搜索框的位置（具体含义需根据业务逻辑确定，这里是 3）
+			"searchBoxPosition": "3",
+			// 表格详情按钮的字体颜色
+			"tableBtnDetailFontColor": "rgba(88, 179, 81, 1)",
+			// 表格按钮的高度
+			"tableBtnHeight": "30px",
+			// 是否显示分页导航条
+			"pagePager": true,
+			// 搜索按钮的边框颜色
+			"searchBtnBorderColor": "rgba(88, 179, 81, 1)",
+			// 表格表头的字体颜色
+			"tableHeaderFontColor": "rgba(255, 255, 255, 1)",
+			// 输入框标题（具体含义需根据业务逻辑确定，这里是 1）
+			"inputTitle": "1",
+			// 表格按钮的边框圆角
+			"tableBtnBorderRadius": "0px",
+			// 按钮全部的字体（具体含义需根据业务逻辑确定，这里是 1）
+			"btnAdAllFont": "1",
+			// 按钮全部删除的字体颜色
+			"btnAdAllDelFontColor": "rgba(88, 179, 81, 1)",
+			// 表格按钮的图标（具体含义需根据业务逻辑确定，这里是 1）
+			"tableBtnIcon": "1",
+			// 按钮全部的高度
+			"btnAdAllHeight": "40px",
+			// 按钮全部警告的背景颜色
+			"btnAdAllWarnBgColor": "#fff",
+			// 按钮全部的边框宽度
+			"btnAdAllBorderWidth": "2px",
+			// 表格斑马纹的字体颜色
+			"tableStripeFontColor": "#606266",
+			// 表格按钮的边框样式为底部 solid
+			"tableBtnBorderStyle": "none none solid none",
+			// 输入框的高度
+			"inputHeight": "40px",
+			// 按钮全部的边框圆角
+			"btnAdAllBorderRadius": "4px",
+			// 按钮全部删除的背景颜色
+			"btnAdAllDelBgColor": "#fff",
+			// 是否显示分页上一页和下一页按钮
+			"pagePrevNext": true,
+			// 按钮全部添加的背景颜色
+			"btnAdAllAddBgColor": "rgba(250, 212, 0, 1)",
+			// 搜索按钮的字体（具体含义需根据业务逻辑确定，这里是 1）
+			"searchBtnFont": "1",
+			// 表格是否显示索引列
+			"tableIndex": true,
+			// 按钮全部的图标（具体含义需根据业务逻辑确定，这里是 1）
+			"btnAdAllIcon": "1",
+			// 表格是否可排序
+			"tableSortable": false,
+			// 是否显示每页数量选择框
+			"pageSizes": true,
+			// 表格是否自动调整列宽
+			"tableFit": true,
+			// 分页按钮是否有背景
+			"pageBtnBG": true,
+			// 搜索按钮的字体大小
+			"searchBtnFontSize": "14px",
+			// 表格编辑按钮的背景颜色
+			"tableBtnEditBgColor": "#fff",
+			// 输入框的边框宽度
+			"inputBorderWidth": "1px",
+			// 输入框字体的位置（具体含义需根据业务逻辑确定，这里是 1）
+			"inputFontPosition": "1",
+			// 输入框的字体颜色
+			"inputFontColor": "rgba(88, 179, 81, 1)",
+			// 每页显示的数量
+			"pageEachNum": 10,
+			// 表格表头的背景颜色
+			"tableHeaderBgColor": "rgba(88, 179, 81, 1)",
+			// 输入框标题的颜色
+			"inputTitleColor": "rgba(88, 179, 81, 1)",
+			// 按钮全部的盒子位置（具体含义需根据业务逻辑确定，这里是 1）
+			"btnAdAllBoxPosition": "1",
+			// 表格详情按钮的背景颜色
+			"tableBtnDetailBgColor": "#fff",
+			// 输入框的图标（具体含义需根据业务逻辑确定，这里是 1）
+			"inputIcon": "1",
+			// 搜索按钮图标的位置（具体含义需根据业务逻辑确定，这里是 1）
+			"searchBtnIconPosition": "1",
+			// 按钮全部的字体大小
+			"btnAdAllFontSize": "10px",
+			// 输入框的边框样式为底部 solid
+			"inputBorderStyle": "none none solid none ",
+			// 输入框的背景颜色
+			"inputBgColor": "#fff",
+			// 分页样式（具体含义需根据业务逻辑确定，这里是 false）
+			"pageStyle": false,
+			// 是否显示总页数
+			"pageTotal": true,
+			// 按钮全部添加的字体颜色
+			"btnAdAllAddFontColor": "rgba(88, 179, 81, 1)",
+			// 表格按钮的字体（具体含义需根据业务逻辑确定，这里是 1）
+			"tableBtnFont": "1",
+			// 表格内容的字体颜色
+			"tableContentFontColor": "#606266",
+			// 输入框的边框颜色
+			"inputBorderColor": "rgba(88, 179, 81, 1)",
+			// 表格是否显示表头
+			"tableShowHeader": true,
+			// 表格按钮的字体大小
+			"tableBtnFontSize": "12px",
+			// 表格按钮的边框颜色
+			"tableBtnBorderColor": "rgba(88, 179, 81, 1)",
+			// 输入框图标的位置（具体含义需根据业务逻辑确定，这里是 2）
+			"inputIconPosition": "2",
+			// 表格是否有边框
+			"tableBorder": true,
+			// 按钮全部的边框样式为 solid
+			"btnAdAllBorderStyle": "solid",
+			// 表格按钮的边框宽度
+			"tableBtnBorderWidth": "1px",
+			// 表格斑马纹的背景颜色
+			"tableStripeBgColor": "rgba(227, 225, 225, 1)",
+			// 表格编辑按钮的字体颜色
+			"tableBtnEditFontColor": "rgba(88, 179, 81, 1)",
+			// 表格内容的对齐方式为左对齐
+			"tableAlign": "left"
+		};
 	},
-	addStyle(){
-		return {"btnSaveFontColor":"#fff","selectFontSize":"14px","btnCancelBorderColor":"#DCDFE6","inputBorderRadius":"4px","inputFontSize":"14px","textareaBgColor":"#fff","btnSaveFontSize":"14px","textareaBorderRadius":"4px","uploadBgColor":"#fff","textareaBorderStyle":"solid","btnCancelWidth":"88px","textareaHeight":"120px","dateBgColor":"#fff","btnSaveBorderRadius":"4px","uploadLableFontSize":"14px","textareaBorderWidth":"1px","inputLableColor":"rgba(199, 21, 133, 1)","addEditBoxColor":"rgba(242, 241, 242, 1)","dateIconFontSize":"14px","btnSaveBgColor":"rgba(199, 21, 133, 1)","uploadIconFontColor":"#8c939d","textareaBorderColor":"#DCDFE6","btnCancelBgColor":"rgba(253, 252, 254, 1)","selectLableColor":"rgba(199, 21, 133, 1)","btnSaveBorderStyle":"solid","dateBorderWidth":"1px","dateLableFontSize":"14px","dateBorderRadius":"4px","btnCancelBorderStyle":"solid","selectLableFontSize":"14px","selectBorderStyle":"solid","selectIconFontColor":"#C0C4CC","btnCancelHeight":"44px","inputHeight":"40px","btnCancelFontColor":"rgba(106, 0, 138, 1)","dateBorderColor":"#DCDFE6","dateIconFontColor":"#C0C4CC","uploadBorderStyle":"solid","dateBorderStyle":"solid","dateLableColor":"rgba(199, 21, 133, 1)","dateFontSize":"14px","inputBorderWidth":"1px","uploadIconFontSize":"28px","selectHeight":"40px","inputFontColor":"#606266","uploadHeight":"148px","textareaLableColor":"rgba(199, 21, 133, 1)","textareaLableFontSize":"14px","btnCancelFontSize":"14px","inputBorderStyle":"solid","btnCancelBorderRadius":"4px","inputBgColor":"#fff","inputLableFontSize":"14px","uploadLableColor":"rgba(199, 21, 133, 1)","uploadBorderRadius":"4px","btnSaveHeight":"44px","selectBgColor":"rgba(255, 255, 255, 1)","btnSaveWidth":"88px","selectIconFontSize":"14px","dateHeight":"40px","selectBorderColor":"#DCDFE6","inputBorderColor":"#DCDFE6","uploadBorderColor":"#DCDFE6","textareaFontColor":"#606266","selectBorderWidth":"1px","dateFontColor":"#606266","btnCancelBorderWidth":"1px","uploadBorderWidth":"1px","textareaFontSize":"14px","selectBorderRadius":"4px","selectFontColor":"rgba(10, 10, 10, 1)","btnSaveBorderColor":"#409EFF","btnSaveBorderWidth":"0px"}
+	// addStyle 方法，返回添加或编辑页面的样式配置对象
+	addStyle() {
+		return {
+			// 保存按钮的字体颜色
+			"btnSaveFontColor": "#fff",
+			// 选择框的字体大小
+			"selectFontSize": "14px",
+			// 取消按钮的边框颜色
+			"btnCancelBorderColor": "#DCDFE6",
+			// 输入框的边框圆角
+			"inputBorderRadius": "4px",
+			// 输入框的字体大小
+			"inputFontSize": "14px",
+			// 文本域的背景颜色
+			"textareaBgColor": "#fff",
+			// 保存按钮的字体大小
+			"btnSaveFontSize": "14px",
+			// 文本域的边框圆角
+			"textareaBorderRadius": "4px",
+			// 上传区域的背景颜色
+			"uploadBgColor": "#fff",
+			// 文本域的边框样式为 solid
+			"textareaBorderStyle": "solid",
+			// 取消按钮的宽度
+			"btnCancelWidth": "88px",
+			// 文本域的高度
+			"textareaHeight": "120px",
+			// 日期选择框的背景颜色
+			"dateBgColor": "#fff",
+			// 保存按钮的边框圆角
+			"btnSaveBorderRadius": "4px",
+			// 上传区域标签的字体大小
+			"uploadLableFontSize": "14px",
+			// 文本域的边框宽度
+			"textareaBorderWidth": "1px",
+			// 输入框标签的颜色
+			"inputLableColor": "rgba(199, 21, 133, 1)",
+			// 添加或编辑盒子的颜色
+			"addEditBoxColor": "rgba(242, 241, 242, 1)",
+			// 日期选择框图标的字体大小
+			"dateIconFontSize": "14px",
+			// 保存按钮的背景颜色
+			"btnSaveBgColor": "rgba(199, 21, 133, 1)",
+			// 上传区域图标的字体颜色
+			"uploadIconFontColor": "#8c939d",
+			// 文本域的边框颜色
+			"textareaBorderColor": "#DCDFE6",
+			// 取消按钮的背景颜色
+			"btnCancelBgColor": "rgba(253, 252, 254, 1)",
+			// 选择框标签的颜色
+			"selectLableColor": "rgba(199, 21, 133, 1)",
+			// 保存按钮的边框样式为 solid
+			"btnSaveBorderStyle": "solid",
+			// 日期选择框的边框宽度
+			"dateBorderWidth": "1px",
+			// 日期选择框标签的字体大小
+			"dateLableFontSize": "14px",
+			// 日期选择框的边框圆角
+			"dateBorderRadius": "4px",
+			// 取消按钮的边框样式为 solid
+			"btnCancelBorderStyle": "solid",
+			// 选择框标签的字体大小
+			"selectLableFontSize": "14px",
+			// 选择框的边框样式为 solid
+			"selectBorderStyle": "solid",
+			// 选择框图标的字体颜色
+			"selectIconFontColor": "#C0C4CC",
+			// 取消按钮的高度
+			"btnCancelHeight": "44px",
+			// 输入框的高度
+			"inputHeight": "40px",
+			// 取消按钮的字体颜色
+			"btnCancelFontColor": "rgba(106, 0, 138, 1)",
+			// 日期选择框的边框颜色
+			"dateBorderColor": "#DCDFE6",
+			// 日期选择框图标的字体颜色
+			"dateIconFontColor": "#C0C4CC",
+			// 上传区域的边框样式为 solid
+			"uploadBorderStyle": "solid",
+			// 日期选择框的边框样式为 solid
+			"dateBorderStyle": "solid",
+			// 日期选择框标签的颜色
+			"dateLableColor": "rgba(199, 21, 133, 1)",
+			// 日期选择框的字体大小
+			"dateFontSize": "14px",
+			// 输入框的边框宽度
+			"inputBorderWidth": "1px",
+			// 上传区域图标的字体大小
+			"uploadIconFontSize": "28px",
+			// 选择框的高度
+			"selectHeight": "40px",
+			// 输入框的字体颜色
+			"inputFontColor": "#606266",
+			// 上传区域的高度
+			"uploadHeight": "148px",
+			// 文本域标签的颜色
+			"textareaLableColor": "rgba(199, 21, 133, 1)",
+			// 文本域标签的字体大小
+			"textareaLableFontSize": "14px",
+			// 取消按钮的字体大小
+			"btnCancelFontSize": "14px",
+			// 输入框的边框样式为 solid
+			"inputBorderStyle": "solid",
+			// 取消按钮的边框圆角
+			"btnCancelBorderRadius": "4px",
+			// 输入框的背景颜色
+			"inputBgColor": "#fff",
+			// 输入框标签的字体大小
+			"inputLableFontSize": "14px",
+			// 上传区域标签的颜色
+			"uploadLableColor": "rgba(199, 21, 133, 1)",
+			// 上传区域的边框圆角
+			"uploadBorderRadius": "4px",
+			// 保存按钮的高度
+			"btnSaveHeight": "44px",
+			// 选择框的背景颜色
+			"selectBgColor": "rgba(255, 255, 255, 1)",
+			// 保存按钮的宽度
+			"btnSaveWidth": "88px",
+			// 选择框图标的字体大小
+			"selectIconFontSize": "14px",
+			// 日期选择框的高度
+			"dateHeight": "40px",
+			// 选择框的边框颜色
+			"selectBorderColor": "#DCDFE6",
+			// 输入框的边框颜色
+			"inputBorderColor": "#DCDFE6",
+			// 上传区域的边框颜色
+			"uploadBorderColor": "#DCDFE6",
+			// 文本域的字体颜色
+			"textareaFontColor": "#606266",
+			// 选择框的边框宽度
+			"selectBorderWidth": "1px",
+			// 日期选择框的字体颜色
+			"dateFontColor": "#606266",
+			// 取消按钮的边框宽度
+			"btnCancelBorderWidth": "1px",
+			// 上传区域的边框宽度
+			"uploadBorderWidth": "1px",
+			// 文本域的字体大小
+			"textareaFontSize": "14px",
+			// 选择框的边框圆角
+			"selectBorderRadius": "4px",
+			// 选择框的字体颜色
+			"selectFontColor": "rgba(10, 10, 10, 1)",
+			// 保存按钮的边框颜色
+			"btnSaveBorderColor": "#409EFF",
+			// 保存按钮的边框宽度
+			"btnSaveBorderWidth": "0px"
+		};
 	}
-}
-export default style;
+};
+
+// 导出 style 对象，以便在其他模块中使用这些样式配置
+export default style;style;

src/main/resources/admin/admin/src/utils/utils.js

@@ -1,61 +1,82 @@
+// 引入自定义的 storage 模块，用于本地存储操作
 import storage from './storage';
+// 引入自定义的 menu 模块，用于获取菜单信息
 import menu from './menu';
+
 /**
- * 是否有权限
- * @param {*} key
+ * 判断用户是否对指定的表格具有特定操作的权限
+ * @param {string} tableName - 要检查权限的表格名称
+ * @param {string} key - 要检查的操作权限，例如 '查看', '新增' 等
+ * @returns {boolean} - 如果用户具有该权限则返回 true，否则返回 false
  */
-export function isAuth(tableName,key) {
+export function isAuth(tableName, key) {
+    // 从本地存储中获取用户角色
     let role = storage.get("role");
-    if(!role){
+    // 如果本地存储中没有角色信息，则默认设置为 '管理员'
+    if (!role) {
         role = '管理员';
     }
+    // 获取所有的菜单列表
     let menus = menu.list();
-    for(let i=0;i<menus.length;i++){
-        if(menus[i].roleName==role){
-            for(let j=0;j<menus[i].backMenu.length;j++){
-                for(let k=0;k<menus[i].backMenu[j].child.length;k++){
-                    if(tableName==menus[i].backMenu[j].child[k].tableName){
+    // 遍历所有角色的菜单信息
+    for (let i = 0; i < menus.length; i++) {
+        // 如果当前角色与用户角色匹配
+        if (menus[i].roleName === role) {
+            // 遍历该角色的后台菜单
+            for (let j = 0; j < menus[i].backMenu.length; j++) {
+                // 遍历菜单的子项
+                for (let k = 0; k < menus[i].backMenu[j].child.length; k++) {
+                    // 如果当前菜单子项的表格名称与传入的表格名称匹配
+                    if (tableName === menus[i].backMenu[j].child[k].tableName) {
+                        // 将该菜单子项的所有按钮操作拼接成字符串
                         let buttons = menus[i].backMenu[j].child[k].buttons.join(',');
-                        return buttons.indexOf(key) !== -1 || false
+                        // 判断指定的操作权限是否在按钮操作字符串中
+                        return buttons.indexOf(key)!== -1;
                     }
                 }
             }
         }
     }
-    // for(let i=0;i<menus.length;i++){
-    //     if(menus[i].roleName==role){
-    //         for(let j=0;j<menus[i].backMenu.length;j++){
-    //             if(menus[i].backMenu[j].tableName==tableName){
-    //                 let buttons = menus[i].backMenu[j].child[0].buttons.join(',');
-    //                 return buttons.indexOf(key) !== -1 || false
-    //             }
-    //         }
-    //     }
-    // }
+    // 如果没有匹配的权限信息，则返回 false
     return false;
 }
 
 /**
- *  * 获取当前时间（yyyy-MM-dd hh:mm:ss）
- *   */
+ * 获取当前时间，格式为 yyyy-MM-dd hh:mm:ss
+ * @returns {string} - 当前时间的字符串表示
+ */
 export function getCurDateTime() {
-    let currentTime = new Date(),
-    year = currentTime.getFullYear(),
-    month = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1,
-    day = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate(),
-    hour = currentTime.getHours(),
-    minute = currentTime.getMinutes(),
-    second = currentTime.getSeconds();
-    return year + "-" + month + "-" + day + " " +hour +":" +minute+":"+second;
+    // 创建一个 Date 对象表示当前时间
+    let currentTime = new Date();
+    // 获取当前年份
+    let year = currentTime.getFullYear();
+    // 获取当前月份，小于 10 时在前面补 0
+    let month = currentTime.getMonth() + 1 < 10? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1;
+    // 获取当前日期，小于 10 时在前面补 0
+    let day = currentTime.getDate() < 10? '0' + currentTime.getDate() : currentTime.getDate();
+    // 获取当前小时
+    let hour = currentTime.getHours();
+    // 获取当前分钟
+    let minute = currentTime.getMinutes();
+    // 获取当前秒数
+    let second = currentTime.getSeconds();
+    // 拼接成 yyyy-MM-dd hh:mm:ss 格式的字符串并返回
+    return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
 }
 
 /**
- *  * 获取当前日期（yyyy-MM-dd）
- *   */
+ * 获取当前日期，格式为 yyyy-MM-dd
+ * @returns {string} - 当前日期的字符串表示
+ */
 export function getCurDate() {
-    let currentTime = new Date(),
-    year = currentTime.getFullYear(),
-    month = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1,
-    day = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
+    // 创建一个 Date 对象表示当前时间
+    let currentTime = new Date();
+    // 获取当前年份
+    let year = currentTime.getFullYear();
+    // 获取当前月份，小于 10 时在前面补 0
+    let month = currentTime.getMonth() + 1 < 10? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1;
+    // 获取当前日期，小于 10 时在前面补 0
+    let day = currentTime.getDate() < 10? '0' + currentTime.getDate() : currentTime.getDate();
+    // 拼接成 yyyy-MM-dd 格式的字符串并返回
     return year + "-" + month + "-" + day;
-}
+}

src/main/resources/admin/admin/src/utils/validate.js

@@ -1,57 +1,74 @@
 /**
- * 邮箱
- * @param {*} s
+ * 验证输入的字符串是否为合法的邮箱地址
+ * @param {string} s - 待验证的字符串
+ * @returns {boolean} - 如果字符串是合法的邮箱地址则返回 true，否则返回 false
  */
-export function isEmail (s) {
-  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
+export function isEmail(s) {
+  // 使用正则表达式匹配邮箱地址格式
+  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s);
 }
 
 /**
- * 手机号码
- * @param {*} s
+ * 验证输入的字符串是否为合法的手机号码
+ * @param {string} s - 待验证的字符串
+ * @returns {boolean} - 如果字符串是合法的手机号码则返回 true，否则返回 false
  */
-export function isMobile (s) {
-  return /^1[0-9]{10}$/.test(s)
+export function isMobile(s) {
+  // 使用正则表达式匹配手机号码格式，以 1 开头，后面跟着 10 位数字
+  return /^1[0-9]{10}$/.test(s);
 }
 
 /**
- * 电话号码
- * @param {*} s
+ * 验证输入的字符串是否为合法的电话号码
+ * @param {string} s - 待验证的字符串
+ * @returns {boolean} - 如果字符串是合法的电话号码则返回 true，否则返回 false
  */
-export function isPhone (s) {
-  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
+export function isPhone(s) {
+  // 使用正则表达式匹配电话号码格式，可以是 3 到 4 位区号加上 7 到 8 位号码，区号前可以有 -
+  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s);
 }
 
 /**
- * URL地址
- * @param {*} s
+ * 验证输入的字符串是否为合法的 URL 地址
+ * @param {string} s - 待验证的字符串
+ * @returns {boolean} - 如果字符串是合法的 URL 地址则返回 true，否则返回 false
  */
-export function isURL (s) {
-  return /^http[s]?:\/\/.*/.test(s)
+export function isURL(s) {
+  // 使用正则表达式匹配 URL 地址格式，以 http 或 https 开头
+  return /^http[s]?:\/\/.*/.test(s);
 }
 
 /**
- * 匹配数字，可以是小数，不可以是负数,可以为空
- * @param {*} s 
+ * 验证输入的字符串是否为合法的数字（可以是小数，不可以是负数，可以为空）
+ * @param {string} s - 待验证的字符串
+ * @returns {boolean} - 如果字符串是合法的数字则返回 true，否则返回 false
  */
-export function isNumber(s){
-  return  /(^-?[+-]?([0-9]*\.?[0-9]+|[0-9]+\.?[0-9]*)([eE][+-]?[0-9]+)?$)|(^$)/.test(s);
+export function isNumber(s) {
+  // 使用正则表达式匹配数字格式，支持小数和科学计数法，且不能为负数，也可以为空字符串
+  return /(^-?[+-]?([0-9]*\.?[0-9]+|[0-9]+\.?[0-9]*)([eE][+-]?[0-9]+)?$)|(^$)/.test(s);
 }
+
 /**
- * 匹配整数，可以为空
- * @param {*} s 
+ * 验证输入的字符串是否为合法的整数（可以为空）
+ * @param {string} s - 待验证的字符串
+ * @returns {boolean} - 如果字符串是合法的整数则返回 true，否则返回 false
  */
-export function isIntNumer(s){
-  return  /(^-?\d+$)|(^$)/.test(s);
+export function isIntNumer(s) {
+  // 使用正则表达式匹配整数格式，可以是正数、负数或 0，也可以为空字符串
+  return /(^-?\d+$)|(^$)/.test(s);
 }
+
 /**
- * 身份证校验
+ * 验证输入的字符串是否为合法的身份证号码
+ * @param {string} idcard - 待验证的身份证号码字符串
+ * @returns {boolean} - 如果字符串是合法的身份证号码则返回 true，否则返回 false
  */
 export function checkIdCard(idcard) {
+  // 使用正则表达式匹配身份证号码格式，支持 15 位、18 位或 17 位数字加 X（或 x）
   const regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
   if (!regIdCard.test(idcard)) {
-      return false;
+    return false;
   } else {
-      return true;
+    return true;
   }
-}
+}

src/main/resources/admin/admin/src/views/modules/chat/add-or-update.vue

@@ -1,152 +1,197 @@
 <template>
-    <div>
-        <el-form
-                class="detail-form-content"
-                ref="ruleForm"
-                :model="ruleForm"
-                :rules="rules"
-                label-width="80px"
-        >
-            <div class="chat-content">
-                <div v-bind:key="item.id" v-for="item in dataList">
-                    <div v-if="item.chatIssue" class="left-content">
-                        <el-alert class="text-content" :title="item.chatIssue" :closable="false" type="success"></el-alert>
-                    </div>
-                    <div v-else class="right-content">
-                        <el-alert class="text-content" :title="item.chatReply" :closable="false" type="warning"></el-alert>
-                    </div>
-                    <div class="clear-float"></div>
-                </div>
-            </div>
-            <div class="clear-float"></div>
-            <el-form-item label="回复" prop="chatReply">
-                <el-input v-model="ruleForm.chatReply" placeholder="回复" clearable></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="onSubmit">回复</el-button>
-                <el-button @click="back()">返回</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <!-- 组件的根元素 -->
+  <div>
+    <!-- 表单组件，用于输入回复内容 -->
+    <el-form
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="80px"
+    >
+      <!-- 聊天内容展示区域 -->
+      <div class="chat-content">
+        <!-- 遍历聊天数据列表 -->
+        <div v-bind:key="item.id" v-for="item in dataList">
+          <!-- 如果是用户提问，显示在左侧 -->
+          <div v-if="item.chatIssue" class="left-content">
+            <el-alert class="text-content" :title="item.chatIssue" :closable="false" type="success"></el-alert>
+          </div>
+          <!-- 如果是回复内容，显示在右侧 -->
+          <div v-else class="right-content">
+            <el-alert class="text-content" :title="item.chatReply" :closable="false" type="warning"></el-alert>
+          </div>
+          <!-- 清除浮动 -->
+          <div class="clear-float"></div>
+        </div>
+      </div>
+      <!-- 清除浮动 -->
+      <div class="clear-float"></div>
+      <!-- 回复输入框 -->
+      <el-form-item label="回复" prop="chatReply">
+        <el-input v-model="ruleForm.chatReply" placeholder="回复" clearable></el-input>
+      </el-form-item>
+      <!-- 操作按钮 -->
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">回复</el-button>
+        <el-button @click="back()">返回</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
-<script>
-    export default {
-        data() {
-            return {
-                id: "",
-                ruleForm: {},
-                dataList: [],
-                chatDate:{},
-                rules: {
-                    chatReply: [
-                        { required: true, message: "回复内容不能为空", trigger: "blur" }
-                    ]
-                },
-                inter:null
-            };
-        },
-        props: ["parent"],
-        methods: {
-            // 初始化
-            init(row) {
-                this.chatDate = row
-                this.id = row.yonghuId;
-                var that = this;
-                var inter= setInterval(function(){
-                    that.getList();
-                },5000)
-                this.inter = inter;
-            },
 
-            getList() {
-                let params = {
-                    yonghuId: this.id,
-                }
-                this.$http({
-                    url: 'chat/page',
-                    method: "get",
-                    params: params
-                }).then(({ data }) => {
-                    if (data && data.code === 0) {
-                    this.ruleForm.yonghuId = this.id;
-                    this.dataList = data.data.list;
-                    console.log(this.dataList)
-                } else {
-                    this.$message.error(data.msg);
-                }
-            });
-            },
-            // 提交
-            onSubmit() {
-                this.$refs["ruleForm"].validate(valid => {
-                    this.ruleForm.replyTime = this.getCurDateTime()
-                this.ruleForm.chatTypes = 2
-                if (valid) {
-                    this.$http({
-                        url: 'chat/save',
-                        method: "post",
-                        data: this.ruleForm
-                    }).then(({ data }) => {
-                        if (data && data.code === 0) {
-                        this.$message({
-                            message: "操作成功",
-                            type: "success",
-                            duration: 1500,
-                            onClose: () => {
-                            this.getList();
-                        this.ruleForm.chatReply = "";
+<script>
+export default {
+  data() {
+    return {
+      // 用户ID
+      id: "",
+      // 表单数据
+      ruleForm: {},
+      // 聊天数据列表
+      dataList: [],
+      // 聊天信息
+      chatDate: {},
+      // 表单验证规则
+      rules: {
+        chatReply: [
+          { required: true, message: "回复内容不能为空", trigger: "blur" }
+        ]
+      },
+      // 定时器
+      inter: null
+    };
+  },
+  // 接收父组件传递的参数
+  props: ["parent"],
+  methods: {
+    // 初始化方法
+    init(row) {
+      // 保存聊天信息
+      this.chatDate = row;
+      // 保存用户ID
+      this.id = row.yonghuId;
+      var that = this;
+      // 每5秒获取一次聊天列表
+      var inter = setInterval(function () {
+        that.getList();
+      }, 5000);
+      // 保存定时器
+      this.inter = inter;
+    },
 
-                        this.chatDate.zhuangtaiTypes = 2
-                        this.$http({
-                            url: 'chat/update',
-                            method: "post",
-                            data: this.chatDate
-                        }).then(({ data }) => {
-                        });
+    // 获取聊天列表
+    getList() {
+      // 请求参数
+      let params = {
+        yonghuId: this.id
+      };
+      // 发送请求获取聊天列表
+      this.$http({
+        url: 'chat/page',
+        method: "get",
+        params: params
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          // 保存用户ID到表单数据
+          this.ruleForm.yonghuId = this.id;
+          // 更新聊天数据列表
+          this.dataList = data.data.list;
+          console.log(this.dataList);
+        } else {
+          // 显示错误信息
+          this.$message.error(data.msg);
+        }
+      });
+    },
 
-                    }
-                    });
-                    } else {
-                        this.$message.error(data.msg);
-                    }
-                });
-                }
-            });
-            },
-            // 返回
-            back() {
-                this.parent.showFlag = false;
-                this.parent.getDataList();
-                if(this.inter){
-                    clearInterval(this.inter);
+    // 提交回复
+    onSubmit() {
+      // 表单验证
+      this.$refs["ruleForm"].validate(valid => {
+        // 设置回复时间
+        this.ruleForm.replyTime = this.getCurDateTime();
+        // 设置聊天类型
+        this.ruleForm.chatTypes = 2;
+        if (valid) {
+          // 发送请求保存回复
+          this.$http({
+            url: 'chat/save',
+            method: "post",
+            data: this.ruleForm
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              // 显示成功信息
+              this.$message({
+                message: "操作成功",
+                type: "success",
+                duration: 1500,
+                onClose: () => {
+                  // 刷新聊天列表
+                  this.getList();
+                  // 清空回复输入框
+                  this.ruleForm.chatReply = "";
+                  // 更新聊天状态
+                  this.chatDate.zhuangtaiTypes = 2;
+                  // 发送请求更新聊天状态
+                  this.$http({
+                    url: 'chat/update',
+                    method: "post",
+                    data: this.chatDate
+                  }).then(({ data }) => {
+                    // 可以在这里处理更新状态后的逻辑
+                  });
                 }
+              });
+            } else {
+              // 显示错误信息
+              this.$message.error(data.msg);
             }
+          });
         }
-    };
+      });
+    },
+
+    // 返回上一页
+    back() {
+      // 隐藏当前组件
+      this.parent.showFlag = false;
+      // 刷新父组件数据列表
+      this.parent.getDataList();
+      // 清除定时器
+      if (this.inter) {
+        clearInterval(this.inter);
+      }
+    }
+  }
+};
 </script>
+
 <style lang="scss">
-    .chat-content {
-        margin-left: 80px;
-        padding-bottom: 60px;
-        width: 500px;
-        margin-bottom: 30px;
-        max-height: 300px;
-        height: 300px;
-        overflow-y: scroll;
-        border: 1px solid #eeeeee;
-    .left-content {
-        float: left;
-        margin-bottom: 10px;
-        padding: 10px;
-    }
-    .right-content {
-        float: right;
-        margin-bottom: 10px;
-        padding: 10px;
-    }
-    }
-    .clear-float {
-        clear: both;
-    }
-</style>
+.chat-content {
+  margin-left: 80px;
+  padding-bottom: 60px;
+  width: 500px;
+  margin-bottom: 30px;
+  max-height: 300px;
+  height: 300px;
+  overflow-y: scroll;
+  border: 1px solid #eeeeee;
+
+  .left-content {
+    float: left;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+
+  .right-content {
+    float: right;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+}
 
+.clear-float {
+  clear: both;
+}
+</style>

src/main/resources/admin/admin/src/views/modules/chat/list.vue

@@ -1,199 +1,243 @@
 <template>
-    <div class="main-content">
-        <!-- 列表页 -->
-        <div v-if="!showFlag">
-            <div class="table-content">
-                <el-table
-                        :data="dataList"
-                        empty-text="暂无需要回复的消息"
-                        border
-                        v-loading="dataListLoading"
-                        style="width: 100%;"
-                >
-                    <el-table-column prop="chatIssue" header-align="center" align="center" sortable label="新消息"></el-table-column>
-                    <el-table-column prop="issueTime" header-align="center" align="center" sortable label="发送时间"></el-table-column>
-                    <el-table-column
-                            prop="allnode"
-                            header-align="center"
-                            align="center"
-                            sortable
-                            label="状态"
-                            width="150"
-                    >
-                        <template slot-scope="scope">
-                            <el-tag v-if="" :type="scope.row.zhuangtaiTypes==1?'success':'info'">{{scope.row.zhuangtaiValue}}</el-tag>
-                        </template>
-                    </el-table-column>
-                    <el-table-column
-                            fixed="right"
-                            header-align="center"
-                            align="center"
-                            width="150"
-                            label="操作"
-                    >
-                        <template slot-scope="scope">
-                            <el-button
-                                    type="text"
-                                    icon="el-icon-edit"
-                                    size="small"
-                                    @click="addOrUpdateHandler(scope.row)"
-                            >回复</el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-                <el-pagination
-                        @size-change="sizeChangeHandle"
-                        @current-change="currentChangeHandle"
-                        :current-page="pageIndex"
-                        :page-sizes="[10, 20, 50, 100]"
-                        :page-size="pageSize"
-                        :total="totalPage"
-                        layout="total, sizes, prev, pager, next, jumper"
-                        class="pagination-content"
-                ></el-pagination>
-            </div>
-        </div>
-        <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
-        <add-or-update v-else :parent="this" ref="addOrUpdate"></add-or-update>
+  <!-- 主内容容器 -->
+  <div class="main-content">
+    <!-- 列表页展示，当 showFlag 为 false 时显示 -->
+    <div v-if="!showFlag">
+      <!-- 表格内容容器 -->
+      <div class="table-content">
+        <!-- Element UI 表格组件，用于展示聊天消息列表 -->
+        <el-table
+            :data="dataList"
+            empty-text="暂无需要回复的消息"
+            border
+            v-loading="dataListLoading"
+            style="width: 100%;"
+        >
+          <!-- 新消息列 -->
+          <el-table-column prop="chatIssue" header-align="center" align="center" sortable label="新消息"></el-table-column>
+          <!-- 发送时间列 -->
+          <el-table-column prop="issueTime" header-align="center" align="center" sortable label="发送时间"></el-table-column>
+          <!-- 状态列 -->
+          <el-table-column
+              prop="allnode"
+              header-align="center"
+              align="center"
+              sortable
+              label="状态"
+              width="150"
+          >
+            <!-- 自定义状态列内容 -->
+            <template slot-scope="scope">
+              <!-- 根据状态类型显示不同样式的标签 -->
+              <el-tag v-if="" :type="scope.row.zhuangtaiTypes === 1? 'success' : 'info'">{{ scope.row.zhuangtaiValue }}</el-tag>
+            </template>
+          </el-table-column>
+          <!-- 操作列，固定在右侧 -->
+          <el-table-column
+              fixed="right"
+              header-align="center"
+              align="center"
+              width="150"
+              label="操作"
+          >
+            <!-- 自定义操作列内容 -->
+            <template slot-scope="scope">
+              <!-- 回复按钮，点击调用 addOrUpdateHandler 方法 -->
+              <el-button
+                  type="text"
+                  icon="el-icon-edit"
+                  size="small"
+                  @click="addOrUpdateHandler(scope.row)"
+              >回复</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页组件 -->
+        <el-pagination
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="pageSize"
+            :total="totalPage"
+            layout="total, sizes, prev, pager, next, jumper"
+            class="pagination-content"
+        ></el-pagination>
+      </div>
     </div>
+    <!-- 添加/修改页面，当 showFlag 为 true 时显示 -->
+    <add-or-update v-else :parent="this" ref="addOrUpdate"></add-or-update>
+  </div>
 </template>
+
 <script>
-    import AddOrUpdate from "./add-or-update";
-    import { setInterval, clearInterval } from 'timers';
-    export default {
-        data() {
-            return {
-                searchForm: {},
-                dataList: [],
-                pageIndex: 1,
-                pageSize: 10,
-                totalPage: 0,
-                dataListLoading: false,
-                showFlag: false,
-                dataListSelections: [],
-                inter: null
-            };
-        },
-        created() {
-            var that = this;
-            var inter = setInterval(function(){
-                that.getDataList();
-            },5000);
-            this.inter = inter;
-        },
-        destroyed(){
-            clearInterval(this.inter);
-        },
-        components: {
-            AddOrUpdate
-        },
-        methods: {
-            getDataList() {
-                this.dataListLoading = true;
-                this.$http({
-                    url: 'chat/page',
-                    method: "get",
-                    params: {
-                        page: this.pageIndex,
-                        limit: this.pageSize,
-                        sort: 'id',
-                        zhuangtaiTypes: 1,
-                        chatTypes: 1,
-                    }
-                }).then(({ data }) => {
-                    if (data && data.code === 0) {
-                    this.dataList = data.data.list;
-                    this.totalPage = data.data.total;
-                } else {
-                    this.dataList = [];
-                    this.totalPage = 0;
-                }
-                this.dataListLoading = false;
-            });
-            },
-            // 每页数
-            sizeChangeHandle(val) {
-                this.pageSize = val;
-                this.pageIndex = 1;
-                this.getDataList();
-            },
-            // 当前页
-            currentChangeHandle(val) {
-                this.pageIndex = val;
-                this.getDataList();
-            },
-            // 回复
-            addOrUpdateHandler(row) {
-                this.showFlag = true;
-                this.$nextTick(() => {
-                    this.$refs.addOrUpdate.init(row);
-            });
-            }
-        }
+// 导入添加/修改页面组件
+import AddOrUpdate from "./add-or-update";
+// 导入定时器相关函数
+import { setInterval, clearInterval } from 'timers';
+
+export default {
+  data() {
+    return {
+      // 搜索表单数据
+      searchForm: {},
+      // 聊天消息列表数据
+      dataList: [],
+      // 当前页码
+      pageIndex: 1,
+      // 每页显示的记录数
+      pageSize: 10,
+      // 总记录数
+      totalPage: 0,
+      // 表格数据加载状态
+      dataListLoading: false,
+      // 控制显示列表页还是添加/修改页
+      showFlag: false,
+      // 表格选中的数据
+      dataListSelections: [],
+      // 定时器
+      inter: null
     };
+  },
+  // 组件创建时执行的钩子函数
+  created() {
+    var that = this;
+    // 每 5 秒调用一次 getDataList 方法更新数据
+    var inter = setInterval(function () {
+      that.getDataList();
+    }, 5000);
+    this.inter = inter;
+  },
+  // 组件销毁时执行的钩子函数
+  destroyed() {
+    // 清除定时器
+    clearInterval(this.inter);
+  },
+  // 注册组件
+  components: {
+    AddOrUpdate
+  },
+  methods: {
+    // 获取聊天消息列表数据
+    getDataList() {
+      // 开启加载状态
+      this.dataListLoading = true;
+      // 发送 HTTP 请求获取数据
+      this.$http({
+        url: 'chat/page',
+        method: "get",
+        params: {
+          page: this.pageIndex,
+          limit: this.pageSize,
+          sort: 'id',
+          zhuangtaiTypes: 1,
+          chatTypes: 1,
+        }
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          // 更新聊天消息列表数据
+          this.dataList = data.data.list;
+          // 更新总记录数
+          this.totalPage = data.data.total;
+        } else {
+          // 清空数据列表和总记录数
+          this.dataList = [];
+          this.totalPage = 0;
+        }
+        // 关闭加载状态
+        this.dataListLoading = false;
+      });
+    },
+    // 每页记录数改变时的处理函数
+    sizeChangeHandle(val) {
+      // 更新每页记录数
+      this.pageSize = val;
+      // 重置当前页码为 1
+      this.pageIndex = 1;
+      // 重新获取数据
+      this.getDataList();
+    },
+    // 当前页码改变时的处理函数
+    currentChangeHandle(val) {
+      // 更新当前页码
+      this.pageIndex = val;
+      // 重新获取数据
+      this.getDataList();
+    },
+    // 回复按钮点击处理函数
+    addOrUpdateHandler(row) {
+      // 显示添加/修改页
+      this.showFlag = true;
+      // 等待 DOM 更新后调用子组件的 init 方法
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(row);
+      });
+    }
+  }
+};
 </script>
+
 <style lang="scss" scoped>
+/* 部分样式类定义，用于设置表格、按钮等元素的样式 */
 .slt {
-    margin: 0 !important;
-    display: flex;
-  }
+  margin: 0 !important;
+  display: flex;
+}
 
-  .ad {
-    margin: 0 !important;
-    display: flex;
-  }
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
 
-  .pages {
-    & /deep/ el-pagination__sizes{
-      & /deep/ el-input__inner {
-        height: 22px;
-        line-height: 22px;
-      }
+.pages {
+  & /deep/ el-pagination__sizes {
+    & /deep/ el-input__inner {
+      height: 22px;
+      line-height: 22px;
     }
   }
-  
+}
 
-  .el-button+.el-button {
-    margin:0;
-  } 
+.el-button +.el-button {
+  margin: 0;
+}
 
-  .tables {
-	& /deep/ .el-button--success {
-		height: 30px;
-		color: rgba(88, 179, 81, 1);
-		font-size: 12px;
-		border-width: 1px;
-		border-style: none none solid none;
-		border-color: rgba(88, 179, 81, 1);
-		border-radius: 0px;
-		background-color: #fff;
-	}
-	
-	& /deep/ .el-button--primary {
-		height: 30px;
-		color: rgba(88, 179, 81, 1);
-		font-size: 12px;
-		border-width: 1px;
-		border-style: none none solid none;
-		border-color: rgba(88, 179, 81, 1);
-		border-radius: 0px;
-		background-color: #fff;
-	}
-	
-	& /deep/ .el-button--danger {
-		height: 30px;
-		color: rgba(88, 179, 81, 1);
-		font-size: 12px;
-		border-width: 1px;
-		border-style: none none solid none;
-		border-color: rgba(88, 179, 81, 1);
-		border-radius: 0px;
-		background-color: #fff;
-	}
+.tables {
+  & /deep/.el-button--success {
+    height: 30px;
+    color: rgba(88, 179, 81, 1);
+    font-size: 12px;
+    border-width: 1px;
+    border-style: none none solid none;
+    border-color: rgba(88, 179, 81, 1);
+    border-radius: 0px;
+    background-color: #fff;
+  }
 
-    & /deep/ .el-button {
-      margin: 4px;
-    }
-  }</style>
+  & /deep/.el-button--primary {
+    height: 30px;
+    color: rgba(88, 179, 81, 1);
+    font-size: 12px;
+    border-width: 1px;
+    border-style: none none solid none;
+    border-color: rgba(88, 179, 81, 1);
+    border-radius: 0px;
+    background-color: #fff;
+  }
 
+  & /deep/.el-button--danger {
+    height: 30px;
+    color: rgba(88, 179, 81, 1);
+    font-size: 12px;
+    border-width: 1px;
+    border-style: none none solid none;
+    border-color: rgba(88, 179, 81, 1);
+    border-radius: 0px;
+    background-color: #fff;
+  }
 
+  & /deep/.el-button {
+    margin: 4px;
+  }
+}
+</style>

src/main/resources/admin/admin/src/views/modules/config/add-or-update.vue

@@ -1,35 +1,28 @@
 <template>
   <div class="addEdit-block">
     <el-form
-      class="detail-form-content"
-      ref="ruleForm"
-      :model="ruleForm"
-      :rules="rules"
-      label-width="80px"
-	  :style="{backgroundColor:addEditForm.addEditBoxColor}"
-    >
-      <el-row>
-      <el-col :span="12">
-        <el-form-item class="input" v-if="type!='info'"  label="名称" prop="name">
-          <el-input v-model="ruleForm.name" 
-              placeholder="名称" clearable  :readonly="ro.name"></el-input>
+        class="detail-form-content"
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules=v-model="ruleForm.name"
+        placeholder="名称" clearable  :readonly="ro.name"></el-input>
+      </el-form-item>
+      <div v-else>
+        <el-form-item class="input" label="名称" prop="name">
+          <el-input v-model="ruleForm.name"
+                    placeholder="名称" readonly></el-input>
         </el-form-item>
-        <div v-else>
-          <el-form-item class="input" label="名称" prop="name">
-              <el-input v-model="ruleForm.name" 
-                placeholder="名称" readonly></el-input>
-          </el-form-item>
-        </div>
+      </div>
       </el-col>
-      <el-col :span="24">  
+      <el-col :span="24">
         <el-form-item class="upload" v-if="type!='info' && !ro.value" label="值" prop="value">
           <file-upload
-          tip="点击上传值"
-          action="file/upload"
-          :limit="3"
-          :multiple="true"
-          :fileUrls="ruleForm.value?ruleForm.value:''"
-          @change="valueUploadChange"
+              tip="点击上传值"
+              action="file/upload"
+              :limit="3"
+              :multiple="true"
+              :fileUrls="ruleForm.value?ruleForm.value:''"
+              @change="valueUploadChange"
           ></file-upload>
         </el-form-item>
         <div v-else>
@@ -45,7 +38,7 @@
         <el-button v-if="type=='info'" class="btn-close" @click="back()">返回</el-button>
       </el-form-item>
     </el-form>
-    
+
 
   </div>
 </template>
@@ -120,23 +113,23 @@ export default {
       }
     };
     return {
-	  addEditForm: null,
+      addEditForm: null,
       id: '',
       type: '',
       ro:{
-	name : false,
-	value : false,
+        name : false,
+        value : false,
       },
       ruleForm: {
         name: '',
         value: '',
       },
       rules: {
-          name: [
-                { required: true, message: '名称不能为空', trigger: 'blur' },
-          ],
-          value: [
-          ],
+        name: [
+          { required: true, message: '名称不能为空', trigger: 'blur' },
+        ],
+        value: [
+        ],
       }
     };
   },
@@ -145,8 +138,8 @@ export default {
   },
   created() {
     this.addEditForm = styleJs.addStyle();
-	this.addEditStyleChange()
-	this.addEditUploadStyleChange()
+    this.addEditStyleChange()
+    this.addEditUploadStyleChange()
   },
   methods: {
     // 下载
@@ -166,12 +159,12 @@ export default {
         for (var o in obj){
           if(o=='name'){
             this.ruleForm.name = obj[o];
-	    this.ro.name = true;
+            this.ro.name = true;
             continue;
           }
           if(o=='value'){
             this.ruleForm.value = obj[o];
-	    this.ro.value = true;
+            this.ro.value = true;
             continue;
           }
         }
@@ -184,9 +177,9 @@ export default {
         method: "get"
       }).then(({ data }) => {
         if (data && data.code === 0) {
-        this.ruleForm = data.data;
-	//解决前台上传图片后台不显示的问题
-	let reg=new RegExp('../../../upload','g')//g代表全部
+          this.ruleForm = data.data;
+          //解决前台上传图片后台不显示的问题
+          let reg=new RegExp('../../../upload','g')//g代表全部
         } else {
           this.$message.error(data.msg);
         }
@@ -234,145 +227,145 @@ export default {
       this.parent.contentStyleChange();
     },
     valueUploadChange(fileUrls) {
-	this.ruleForm.value = fileUrls;
-			this.addEditUploadStyleChange()
+      this.ruleForm.value = fileUrls;
+      this.addEditUploadStyleChange()
+    },
+    addEditStyleChange() {
+      this.$nextTick(()=>{
+        // input
+        document.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.inputHeight
+          el.style.color = this.addEditForm.inputFontColor
+          el.style.fontSize = this.addEditForm.inputFontSize
+          el.style.borderWidth = this.addEditForm.inputBorderWidth
+          el.style.borderStyle = this.addEditForm.inputBorderStyle
+          el.style.borderColor = this.addEditForm.inputBorderColor
+          el.style.borderRadius = this.addEditForm.inputBorderRadius
+          el.style.backgroundColor = this.addEditForm.inputBgColor
+        })
+        document.querySelectorAll('.addEdit-block .input .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.inputHeight
+          el.style.color = this.addEditForm.inputLableColor
+          el.style.fontSize = this.addEditForm.inputLableFontSize
+        })
+        // select
+        document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.selectHeight
+          el.style.color = this.addEditForm.selectFontColor
+          el.style.fontSize = this.addEditForm.selectFontSize
+          el.style.borderWidth = this.addEditForm.selectBorderWidth
+          el.style.borderStyle = this.addEditForm.selectBorderStyle
+          el.style.borderColor = this.addEditForm.selectBorderColor
+          el.style.borderRadius = this.addEditForm.selectBorderRadius
+          el.style.backgroundColor = this.addEditForm.selectBgColor
+        })
+        document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.selectHeight
+          el.style.color = this.addEditForm.selectLableColor
+          el.style.fontSize = this.addEditForm.selectLableFontSize
+        })
+        document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
+          el.style.color = this.addEditForm.selectIconFontColor
+          el.style.fontSize = this.addEditForm.selectIconFontSize
+        })
+        // date
+        document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
+          el.style.height = this.addEditForm.dateHeight
+          el.style.color = this.addEditForm.dateFontColor
+          el.style.fontSize = this.addEditForm.dateFontSize
+          el.style.borderWidth = this.addEditForm.dateBorderWidth
+          el.style.borderStyle = this.addEditForm.dateBorderStyle
+          el.style.borderColor = this.addEditForm.dateBorderColor
+          el.style.borderRadius = this.addEditForm.dateBorderRadius
+          el.style.backgroundColor = this.addEditForm.dateBgColor
+        })
+        document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.dateHeight
+          el.style.color = this.addEditForm.dateLableColor
+          el.style.fontSize = this.addEditForm.dateLableFontSize
+        })
+        document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
+          el.style.color = this.addEditForm.dateIconFontColor
+          el.style.fontSize = this.addEditForm.dateIconFontSize
+          el.style.lineHeight = this.addEditForm.dateHeight
+        })
+        // upload
+        let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'
+        document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').forEach(el=>{
+          el.style.width = this.addEditForm.uploadHeight
+          el.style.height = this.addEditForm.uploadHeight
+          el.style.borderWidth = this.addEditForm.uploadBorderWidth
+          el.style.borderStyle = this.addEditForm.uploadBorderStyle
+          el.style.borderColor = this.addEditForm.uploadBorderColor
+          el.style.borderRadius = this.addEditForm.uploadBorderRadius
+          el.style.backgroundColor = this.addEditForm.uploadBgColor
+        })
+        document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
+          el.style.lineHeight = this.addEditForm.uploadHeight
+          el.style.color = this.addEditForm.uploadLableColor
+          el.style.fontSize = this.addEditForm.uploadLableFontSize
+        })
+        document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
+          el.style.color = this.addEditForm.uploadIconFontColor
+          el.style.fontSize = this.addEditForm.uploadIconFontSize
+          el.style.lineHeight = iconLineHeight
+          el.style.display = 'block'
+        })
+        // 多文本输入框
+        document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
+          el.style.height = this.addEditForm.textareaHeight
+          el.style.color = this.addEditForm.textareaFontColor
+          el.style.fontSize = this.addEditForm.textareaFontSize
+          el.style.borderWidth = this.addEditForm.textareaBorderWidth
+          el.style.borderStyle = this.addEditForm.textareaBorderStyle
+          el.style.borderColor = this.addEditForm.textareaBorderColor
+          el.style.borderRadius = this.addEditForm.textareaBorderRadius
+          el.style.backgroundColor = this.addEditForm.textareaBgColor
+        })
+        document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
+          // el.style.lineHeight = this.addEditForm.textareaHeight
+          el.style.color = this.addEditForm.textareaLableColor
+          el.style.fontSize = this.addEditForm.textareaLableFontSize
+        })
+        // 保存
+        document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
+          el.style.width = this.addEditForm.btnSaveWidth
+          el.style.height = this.addEditForm.btnSaveHeight
+          el.style.color = this.addEditForm.btnSaveFontColor
+          el.style.fontSize = this.addEditForm.btnSaveFontSize
+          el.style.borderWidth = this.addEditForm.btnSaveBorderWidth
+          el.style.borderStyle = this.addEditForm.btnSaveBorderStyle
+          el.style.borderColor = this.addEditForm.btnSaveBorderColor
+          el.style.borderRadius = this.addEditForm.btnSaveBorderRadius
+          el.style.backgroundColor = this.addEditForm.btnSaveBgColor
+        })
+        // 返回
+        document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
+          el.style.width = this.addEditForm.btnCancelWidth
+          el.style.height = this.addEditForm.btnCancelHeight
+          el.style.color = this.addEditForm.btnCancelFontColor
+          el.style.fontSize = this.addEditForm.btnCancelFontSize
+          el.style.borderWidth = this.addEditForm.btnCancelBorderWidth
+          el.style.borderStyle = this.addEditForm.btnCancelBorderStyle
+          el.style.borderColor = this.addEditForm.btnCancelBorderColor
+          el.style.borderRadius = this.addEditForm.btnCancelBorderRadius
+          el.style.backgroundColor = this.addEditForm.btnCancelBgColor
+        })
+      })
+    },
+    addEditUploadStyleChange() {
+      this.$nextTick(()=>{
+        document.querySelectorAll('.addEdit-block .upload .el-upload-list--picture-card .el-upload-list__item').forEach(el=>{
+          el.style.width = this.addEditForm.uploadHeight
+          el.style.height = this.addEditForm.uploadHeight
+          el.style.borderWidth = this.addEditForm.uploadBorderWidth
+          el.style.borderStyle = this.addEditForm.uploadBorderStyle
+          el.style.borderColor = this.addEditForm.uploadBorderColor
+          el.style.borderRadius = this.addEditForm.uploadBorderRadius
+          el.style.backgroundColor = this.addEditForm.uploadBgColor
+        })
+      })
     },
-	addEditStyleChange() {
-	  this.$nextTick(()=>{
-	    // input
-	    document.querySelectorAll('.addEdit-block .input .el-input__inner').forEach(el=>{
-	      el.style.height = this.addEditForm.inputHeight
-	      el.style.color = this.addEditForm.inputFontColor
-	      el.style.fontSize = this.addEditForm.inputFontSize
-	      el.style.borderWidth = this.addEditForm.inputBorderWidth
-	      el.style.borderStyle = this.addEditForm.inputBorderStyle
-	      el.style.borderColor = this.addEditForm.inputBorderColor
-	      el.style.borderRadius = this.addEditForm.inputBorderRadius
-	      el.style.backgroundColor = this.addEditForm.inputBgColor
-	    })
-	    document.querySelectorAll('.addEdit-block .input .el-form-item__label').forEach(el=>{
-	      el.style.lineHeight = this.addEditForm.inputHeight
-	      el.style.color = this.addEditForm.inputLableColor
-	      el.style.fontSize = this.addEditForm.inputLableFontSize
-	    })
-	    // select
-	    document.querySelectorAll('.addEdit-block .select .el-input__inner').forEach(el=>{
-	      el.style.height = this.addEditForm.selectHeight
-	      el.style.color = this.addEditForm.selectFontColor
-	      el.style.fontSize = this.addEditForm.selectFontSize
-	      el.style.borderWidth = this.addEditForm.selectBorderWidth
-	      el.style.borderStyle = this.addEditForm.selectBorderStyle
-	      el.style.borderColor = this.addEditForm.selectBorderColor
-	      el.style.borderRadius = this.addEditForm.selectBorderRadius
-	      el.style.backgroundColor = this.addEditForm.selectBgColor
-	    })
-	    document.querySelectorAll('.addEdit-block .select .el-form-item__label').forEach(el=>{
-	      el.style.lineHeight = this.addEditForm.selectHeight
-	      el.style.color = this.addEditForm.selectLableColor
-	      el.style.fontSize = this.addEditForm.selectLableFontSize
-	    })
-	    document.querySelectorAll('.addEdit-block .select .el-select__caret').forEach(el=>{
-	      el.style.color = this.addEditForm.selectIconFontColor
-	      el.style.fontSize = this.addEditForm.selectIconFontSize
-	    })
-	    // date
-	    document.querySelectorAll('.addEdit-block .date .el-input__inner').forEach(el=>{
-	      el.style.height = this.addEditForm.dateHeight
-	      el.style.color = this.addEditForm.dateFontColor
-	      el.style.fontSize = this.addEditForm.dateFontSize
-	      el.style.borderWidth = this.addEditForm.dateBorderWidth
-	      el.style.borderStyle = this.addEditForm.dateBorderStyle
-	      el.style.borderColor = this.addEditForm.dateBorderColor
-	      el.style.borderRadius = this.addEditForm.dateBorderRadius
-	      el.style.backgroundColor = this.addEditForm.dateBgColor
-	    })
-	    document.querySelectorAll('.addEdit-block .date .el-form-item__label').forEach(el=>{
-	      el.style.lineHeight = this.addEditForm.dateHeight
-	      el.style.color = this.addEditForm.dateLableColor
-	      el.style.fontSize = this.addEditForm.dateLableFontSize
-	    })
-	    document.querySelectorAll('.addEdit-block .date .el-input__icon').forEach(el=>{
-	      el.style.color = this.addEditForm.dateIconFontColor
-	      el.style.fontSize = this.addEditForm.dateIconFontSize
-	      el.style.lineHeight = this.addEditForm.dateHeight
-	    })
-	    // upload
-	    let iconLineHeight = parseInt(this.addEditForm.uploadHeight) - parseInt(this.addEditForm.uploadBorderWidth) * 2 + 'px'
-	    document.querySelectorAll('.addEdit-block .upload .el-upload--picture-card').forEach(el=>{
-	      el.style.width = this.addEditForm.uploadHeight
-	      el.style.height = this.addEditForm.uploadHeight
-	      el.style.borderWidth = this.addEditForm.uploadBorderWidth
-	      el.style.borderStyle = this.addEditForm.uploadBorderStyle
-	      el.style.borderColor = this.addEditForm.uploadBorderColor
-	      el.style.borderRadius = this.addEditForm.uploadBorderRadius
-	      el.style.backgroundColor = this.addEditForm.uploadBgColor
-	    })
-	    document.querySelectorAll('.addEdit-block .upload .el-form-item__label').forEach(el=>{
-	      el.style.lineHeight = this.addEditForm.uploadHeight
-	      el.style.color = this.addEditForm.uploadLableColor
-	      el.style.fontSize = this.addEditForm.uploadLableFontSize
-	    })
-	    document.querySelectorAll('.addEdit-block .upload .el-icon-plus').forEach(el=>{
-	      el.style.color = this.addEditForm.uploadIconFontColor
-	      el.style.fontSize = this.addEditForm.uploadIconFontSize
-	      el.style.lineHeight = iconLineHeight
-	      el.style.display = 'block'
-	    })
-	    // 多文本输入框
-	    document.querySelectorAll('.addEdit-block .textarea .el-textarea__inner').forEach(el=>{
-	      el.style.height = this.addEditForm.textareaHeight
-	      el.style.color = this.addEditForm.textareaFontColor
-	      el.style.fontSize = this.addEditForm.textareaFontSize
-	      el.style.borderWidth = this.addEditForm.textareaBorderWidth
-	      el.style.borderStyle = this.addEditForm.textareaBorderStyle
-	      el.style.borderColor = this.addEditForm.textareaBorderColor
-	      el.style.borderRadius = this.addEditForm.textareaBorderRadius
-	      el.style.backgroundColor = this.addEditForm.textareaBgColor
-	    })
-	    document.querySelectorAll('.addEdit-block .textarea .el-form-item__label').forEach(el=>{
-	      // el.style.lineHeight = this.addEditForm.textareaHeight
-	      el.style.color = this.addEditForm.textareaLableColor
-	      el.style.fontSize = this.addEditForm.textareaLableFontSize
-	    })
-	    // 保存
-	    document.querySelectorAll('.addEdit-block .btn .btn-success').forEach(el=>{
-	      el.style.width = this.addEditForm.btnSaveWidth
-	      el.style.height = this.addEditForm.btnSaveHeight
-	      el.style.color = this.addEditForm.btnSaveFontColor
-	      el.style.fontSize = this.addEditForm.btnSaveFontSize
-	      el.style.borderWidth = this.addEditForm.btnSaveBorderWidth
-	      el.style.borderStyle = this.addEditForm.btnSaveBorderStyle
-	      el.style.borderColor = this.addEditForm.btnSaveBorderColor
-	      el.style.borderRadius = this.addEditForm.btnSaveBorderRadius
-	      el.style.backgroundColor = this.addEditForm.btnSaveBgColor
-	    })
-	    // 返回
-	    document.querySelectorAll('.addEdit-block .btn .btn-close').forEach(el=>{
-	      el.style.width = this.addEditForm.btnCancelWidth
-	      el.style.height = this.addEditForm.btnCancelHeight
-	      el.style.color = this.addEditForm.btnCancelFontColor
-	      el.style.fontSize = this.addEditForm.btnCancelFontSize
-	      el.style.borderWidth = this.addEditForm.btnCancelBorderWidth
-	      el.style.borderStyle = this.addEditForm.btnCancelBorderStyle
-	      el.style.borderColor = this.addEditForm.btnCancelBorderColor
-	      el.style.borderRadius = this.addEditForm.btnCancelBorderRadius
-	      el.style.backgroundColor = this.addEditForm.btnCancelBgColor
-	    })
-	  })
-	},
-	addEditUploadStyleChange() {
-		this.$nextTick(()=>{
-		  document.querySelectorAll('.addEdit-block .upload .el-upload-list--picture-card .el-upload-list__item').forEach(el=>{
-			el.style.width = this.addEditForm.uploadHeight
-			el.style.height = this.addEditForm.uploadHeight
-			el.style.borderWidth = this.addEditForm.uploadBorderWidth
-			el.style.borderStyle = this.addEditForm.uploadBorderStyle
-			el.style.borderColor = this.addEditForm.uploadBorderColor
-			el.style.borderRadius = this.addEditForm.uploadBorderRadius
-			el.style.backgroundColor = this.addEditForm.uploadBgColor
-		  })
-	  })
-	},
   }
 };
 </script>
@@ -381,7 +374,7 @@ export default {
   height: 500px;
 
   & /deep/ .ql-container {
-	  height: 310px;
+    height: 310px;
   }
 }
 .amap-wrapper {
@@ -392,10 +385,10 @@ export default {
   position: absolute;
 }
 .addEdit-block {
-	margin: -10px;
+  margin: -10px;
 }
 .detail-form-content {
-	padding: 12px;
+  padding: 12px;
 }
 .btn .el-button {
   padding: 0;

src/main/resources/admin/admin/src/views/modules/config/list.vue

@@ -1,513 +1,243 @@
 <template>
+  <!-- 主内容容器 -->
   <div class="main-content">
-    <!-- 列表页 -->
-    <div v-if="showFlag">
-      <el-form :inline="true" :model="searchForm" class="form-content">
-        <el-row class="ad" :style="{justifyContent:contents.btnAdAllBoxPosition=='1'?'flex-start':contents.btnAdAllBoxPosition=='2'?'center':'flex-end'}">
-          <el-form-item>
-            <el-button
-              v-if="isAuth('config','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1"
-              type="success"
-              icon="el-icon-plus"
-              @click="addOrUpdateHandler()"
-            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
-            <el-button
-              v-if="isAuth('config','新增') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2"
-              type="success"
-              @click="addOrUpdateHandler()"
-            >{{ contents.btnAdAllFont == 1?'新增':'' }}<i class="el-icon-plus el-icon--right" /></el-button>
-            <el-button
-              v-if="isAuth('config','新增') && contents.btnAdAllIcon == 0"
-              type="success"
-              @click="addOrUpdateHandler()"
-            >{{ contents.btnAdAllFont == 1?'新增':'' }}</el-button>
-            <el-button
-              v-if="isAuth('config','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 1 && contents.tableSelection"
-              :disabled="dataListSelections.length <= 0"
-              type="danger"
-              icon="el-icon-delete"
-              @click="deleteHandler()"
-            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
-            <el-button
-              v-if="isAuth('config','删除') && contents.btnAdAllIcon == 1 && contents.btnAdAllIconPosition == 2 && contents.tableSelection"
-              :disabled="dataListSelections.length <= 0"
-              type="danger"
-              @click="deleteHandler()"
-            >{{ contents.btnAdAllFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
-            <el-button
-              v-if="isAuth('config','删除') && contents.btnAdAllIcon == 0 && contents.tableSelection"
-              :disabled="dataListSelections.length <= 0"
-              type="danger"
-              @click="deleteHandler()"
-            >{{ contents.btnAdAllFont == 1?'删除':'' }}</el-button>
-
-
-          </el-form-item>
-        </el-row>
-      </el-form>
+    <!-- 列表页展示，当 showFlag 为 false 时显示 -->
+    <div v-if="!showFlag">
+      <!-- 表格内容容器 -->
       <div class="table-content">
-        <el-table class="tables" :size="contents.tableSize" :show-header="contents.tableShowHeader"
-            :header-row-style="headerRowStyle" :header-cell-style="headerCellStyle"
-            :border="contents.tableBorder"
-            :fit="contents.tableFit"
-            :stripe="contents.tableStripe"
-            :row-style="rowStyle"
-            :cell-style="cellStyle"
-            :style="{width: '100%',fontSize:contents.tableContentFontSize,color:contents.tableContentFontColor}"
-            v-if="isAuth('config','查看')"
+        <!-- Element UI 表格组件，用于展示聊天消息列表 -->
+        <el-table
             :data="dataList"
+            empty-text="暂无需要回复的消息"
+            border
             v-loading="dataListLoading"
-            @selection-change="selectionChangeHandler">
-            <el-table-column  v-if="contents.tableSelection"
-                type="selection"
-                header-align="center"
-                align="center"
-                width="50">
-            </el-table-column>
-            <el-table-column label="索引" v-if="contents.tableIndex" type="index" width="50" />
-                <el-table-column  :sortable="contents.tableSortable" :align="contents.tableAlign"
-                    prop="name"
-                    header-align="center"
-		    label="名称">
-		     <template slot-scope="scope">
-                       {{scope.row.name}}
-                     </template>
-                </el-table-column>
-                  <el-table-column :sortable="contents.tableSortable" :align="contents.tableAlign" prop="value"
-                    header-align="center"
-                    width="200"
-                    label="值">
-                    <template slot-scope="scope">
-                      <div v-if="scope.row.value">
-                        <img :src="scope.row.value.split(',')[0]" width="100" height="100">
-                      </div>
-                      <div v-else>无图片</div>
-                    </template>
-                  </el-table-column>
-            <el-table-column width="300" :align="contents.tableAlign"
-                header-align="center"
-                label="操作">
-                <template slot-scope="scope">
-                <el-button v-if="isAuth('config','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="success" icon="el-icon-tickets" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
-                <el-button v-if="isAuth('config','查看') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}<i class="el-icon-tickets el-icon--right" /></el-button>
-                <el-button v-if="isAuth('config','查看') && contents.tableBtnIcon == 0" type="success" size="mini" @click="addOrUpdateHandler(scope.row.id,'info')">{{ contents.tableBtnFont == 1?'详情':'' }}</el-button>
-                <el-button v-if="isAuth('config','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="primary" icon="el-icon-edit" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
-                <el-button v-if="isAuth('config','修改') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}<i class="el-icon-edit el-icon--right" /></el-button>
-                <el-button v-if="isAuth('config','修改') && contents.tableBtnIcon == 0" type="primary" size="mini" @click="addOrUpdateHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'修改':'' }}</el-button>
-
-
-
-
-                <el-button v-if="isAuth('config','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 1" type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
-                <el-button v-if="isAuth('config','删除') && contents.tableBtnIcon == 1 && contents.tableBtnIconPosition == 2" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}<i class="el-icon-delete el-icon--right" /></el-button>
-                <el-button v-if="isAuth('config','删除') && contents.tableBtnIcon == 0" type="danger" size="mini" @click="deleteHandler(scope.row.id)">{{ contents.tableBtnFont == 1?'删除':'' }}</el-button>
-                </template>
-            </el-table-column>
+            style="width: 100%;"
+        >
+          <!-- 新消息列 -->
+          <el-table-column prop="chatIssue" header-align="center" align="center" sortable label="新消息"></el-table-column>
+          <!-- 发送时间列 -->
+          <el-table-column prop="issueTime" header-align="center" align="center" sortable label="发送时间"></el-table-column>
+          <!-- 状态列 -->
+          <el-table-column
+              prop="allnode"
+              header-align="center"
+              align="center"
+              sortable
+              label="状态"
+              width="150"
+          >
+            <!-- 自定义状态列内容 -->
+            <template slot-scope="scope">
+              <!-- 根据状态类型显示不同样式的标签 -->
+              <el-tag v-if="" :type="scope.row.zhuangtaiTypes === 1? 'success' : 'info'">{{ scope.row.zhuangtaiValue }}</el-tag>
+            </template>
+          </el-table-column>
+          <!-- 操作列，固定在右侧 -->
+          <el-table-column
+              fixed="right"
+              header-align="center"
+              align="center"
+              width="150"
+              label="操作"
+          >
+            <!-- 自定义操作列内容 -->
+            <template slot-scope="scope">
+              <!-- 回复按钮，点击调用 addOrUpdateHandler 方法 -->
+              <el-button
+                  type="text"
+                  icon="el-icon-edit"
+                  size="small"
+                  @click="addOrUpdateHandler(scope.row)"
+              >回复</el-button>
+            </template>
+          </el-table-column>
         </el-table>
+        <!-- 分页组件 -->
         <el-pagination
-          clsss="pages"
-          :layout="layouts"
-          @size-change="sizeChangeHandle"
-          @current-change="currentChangeHandle"
-          :current-page="pageIndex"
-          :page-sizes="[10, 20, 50, 100]"
-          :page-size="Number(contents.pageEachNum)"
-          :total="totalPage"
-          :small="contents.pageStyle"
-          class="pagination-content"
-          :background="contents.pageBtnBG"
-          :style="{textAlign:contents.pagePosition==1?'left':contents.pagePosition==2?'center':'right'}"
+            @size-change="sizeChangeHandle"
+            @current-change="currentChangeHandle"
+            :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="pageSize"
+            :total="totalPage"
+            layout="total, sizes, prev, pager, next, jumper"
+            class="pagination-content"
         ></el-pagination>
       </div>
     </div>
-    <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
-    <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
-
-
-
+    <!-- 添加/修改页面，当 showFlag 为 true 时显示 -->
+    <add-or-update v-else :parent="this" ref="addOrUpdate"></add-or-update>
   </div>
 </template>
+
 <script>
-import AddOrUpdate from "./add-or-update.vue";
-import styleJs from "../../../utils/style.js";
+// 导入添加/修改页面组件
+import AddOrUpdate from "./add-or-update";
+// 导入定时器相关函数
+import { setInterval, clearInterval } from 'timers';
+
 export default {
   data() {
     return {
-      searchForm: {
-        key: ""
-      },
-      form:{},
+      // 搜索表单数据
+      searchForm: {},
+      // 聊天消息列表数据
       dataList: [],
+      // 当前页码
       pageIndex: 1,
+      // 每页显示的记录数
       pageSize: 10,
+      // 总记录数
       totalPage: 0,
+      // 表格数据加载状态
       dataListLoading: false,
+      // 控制显示列表页还是添加/修改页
+      showFlag: false,
+      // 表格选中的数据
       dataListSelections: [],
-      showFlag: true,
-      sfshVisiable: false,
-      shForm: {},
-      chartVisiable: false,
-      addOrUpdateFlag:false,
-      contents:null,
-      layouts: '',
-
-
+      // 定时器
+      inter: null
     };
   },
+  // 组件创建时执行的钩子函数
   created() {
-    this.contents = styleJs.listStyle();
-    this.init();
-    this.getDataList();
-    this.contentStyleChange()
+    var that = this;
+    // 每 5 秒调用一次 getDataList 方法更新数据
+    var inter = setInterval(function () {
+      that.getDataList();
+    }, 5000);
+    this.inter = inter;
   },
-  mounted() {
-
-  },
-  filters: {
-    htmlfilter: function (val) {
-      return val.replace(/<[^>]*>/g).replace(/undefined/g,'');
-    }
+  // 组件销毁时执行的钩子函数
+  destroyed() {
+    // 清除定时器
+    clearInterval(this.inter);
   },
+  // 注册组件
   components: {
-    AddOrUpdate,
+    AddOrUpdate
   },
   methods: {
-    contentStyleChange() {
-      this.contentSearchStyleChange()
-      this.contentBtnAdAllStyleChange()
-      this.contentSearchBtnStyleChange()
-      this.contentTableBtnStyleChange()
-      this.contentPageStyleChange()
-    },
-    contentSearchStyleChange() {
-      this.$nextTick(()=>{
-        document.querySelectorAll('.form-content .slt .el-input__inner').forEach(el=>{
-          let textAlign = 'left'
-          if(this.contents.inputFontPosition == 2) textAlign = 'center'
-          if(this.contents.inputFontPosition == 3) textAlign = 'right'
-          el.style.textAlign = textAlign
-          el.style.height = this.contents.inputHeight
-          el.style.lineHeight = this.contents.inputHeight
-          el.style.color = this.contents.inputFontColor
-          el.style.fontSize = this.contents.inputFontSize
-          el.style.borderWidth = this.contents.inputBorderWidth
-          el.style.borderStyle = this.contents.inputBorderStyle
-          el.style.borderColor = this.contents.inputBorderColor
-          el.style.borderRadius = this.contents.inputBorderRadius
-          el.style.backgroundColor = this.contents.inputBgColor
-        })
-        if(this.contents.inputTitle) {
-          document.querySelectorAll('.form-content .slt .el-form-item__label').forEach(el=>{
-            el.style.color = this.contents.inputTitleColor
-            el.style.fontSize = this.contents.inputTitleSize
-            el.style.lineHeight = this.contents.inputHeight
-          })
-        }
-        setTimeout(()=>{
-          document.querySelectorAll('.form-content .slt .el-input__prefix').forEach(el=>{
-            el.style.color = this.contents.inputIconColor
-            el.style.lineHeight = this.contents.inputHeight
-          })
-          document.querySelectorAll('.form-content .slt .el-input__suffix').forEach(el=>{
-            el.style.color = this.contents.inputIconColor
-            el.style.lineHeight = this.contents.inputHeight
-          })
-          document.querySelectorAll('.form-content .slt .el-input__icon').forEach(el=>{
-            el.style.lineHeight = this.contents.inputHeight
-          })
-        },10)
-
-      })
-    },
-    // 搜索按钮
-    contentSearchBtnStyleChange() {
-      this.$nextTick(()=>{
-        document.querySelectorAll('.form-content .slt .el-button--success').forEach(el=>{
-          el.style.height = this.contents.searchBtnHeight
-          el.style.color = this.contents.searchBtnFontColor
-          el.style.fontSize = this.contents.searchBtnFontSize
-          el.style.borderWidth = this.contents.searchBtnBorderWidth
-          el.style.borderStyle = this.contents.searchBtnBorderStyle
-          el.style.borderColor = this.contents.searchBtnBorderColor
-          el.style.borderRadius = this.contents.searchBtnBorderRadius
-          el.style.backgroundColor = this.contents.searchBtnBgColor
-        })
-      })
-    },
-    // 新增、批量删除
-    contentBtnAdAllStyleChange() {
-      this.$nextTick(()=>{
-        document.querySelectorAll('.form-content .ad .el-button--success').forEach(el=>{
-          el.style.height = this.contents.btnAdAllHeight
-          el.style.color = this.contents.btnAdAllAddFontColor
-          el.style.fontSize = this.contents.btnAdAllFontSize
-          el.style.borderWidth = this.contents.btnAdAllBorderWidth
-          el.style.borderStyle = this.contents.btnAdAllBorderStyle
-          el.style.borderColor = this.contents.btnAdAllBorderColor
-          el.style.borderRadius = this.contents.btnAdAllBorderRadius
-          el.style.backgroundColor = this.contents.btnAdAllAddBgColor
-        })
-        document.querySelectorAll('.form-content .ad .el-button--danger').forEach(el=>{
-          el.style.height = this.contents.btnAdAllHeight
-          el.style.color = this.contents.btnAdAllDelFontColor
-          el.style.fontSize = this.contents.btnAdAllFontSize
-          el.style.borderWidth = this.contents.btnAdAllBorderWidth
-          el.style.borderStyle = this.contents.btnAdAllBorderStyle
-          el.style.borderColor = this.contents.btnAdAllBorderColor
-          el.style.borderRadius = this.contents.btnAdAllBorderRadius
-          el.style.backgroundColor = this.contents.btnAdAllDelBgColor
-        })
-        document.querySelectorAll('.form-content .ad .el-button--warning').forEach(el=>{
-          el.style.height = this.contents.btnAdAllHeight
-          el.style.color = this.contents.btnAdAllWarnFontColor
-          el.style.fontSize = this.contents.btnAdAllFontSize
-          el.style.borderWidth = this.contents.btnAdAllBorderWidth
-          el.style.borderStyle = this.contents.btnAdAllBorderStyle
-          el.style.borderColor = this.contents.btnAdAllBorderColor
-          el.style.borderRadius = this.contents.btnAdAllBorderRadius
-          el.style.backgroundColor = this.contents.btnAdAllWarnBgColor
-        })
-      })
-    },
-    // 表格
-    rowStyle({ row, rowIndex}) {
-      if (rowIndex % 2 == 1) {
-        if(this.contents.tableStripe) {
-          return {color:this.contents.tableStripeFontColor}
-        }
-      } else {
-        return ''
-      }
-    },
-    cellStyle({ row, rowIndex}){
-      if (rowIndex % 2 == 1) {
-        if(this.contents.tableStripe) {
-          return {backgroundColor:this.contents.tableStripeBgColor}
-        }
-      } else {
-        return ''
-      }
-    },
-    headerRowStyle({ row, rowIndex}){
-      return {color: this.contents.tableHeaderFontColor}
-    },
-    headerCellStyle({ row, rowIndex}){
-      return {backgroundColor: this.contents.tableHeaderBgColor}
-    },
-    // 表格按钮
-    contentTableBtnStyleChange(){
-      // this.$nextTick(()=>{
-      //   setTimeout(()=>{
-      //     document.querySelectorAll('.table-content .tables .el-table__body .el-button--success').forEach(el=>{
-      //       el.style.height = this.contents.tableBtnHeight
-      //       el.style.color = this.contents.tableBtnDetailFontColor
-      //       el.style.fontSize = this.contents.tableBtnFontSize
-      //       el.style.borderWidth = this.contents.tableBtnBorderWidth
-      //       el.style.borderStyle = this.contents.tableBtnBorderStyle
-      //       el.style.borderColor = this.contents.tableBtnBorderColor
-      //       el.style.borderRadius = this.contents.tableBtnBorderRadius
-      //       el.style.backgroundColor = this.contents.tableBtnDetailBgColor
-      //     })
-      //     document.querySelectorAll('.table-content .tables .el-table__body .el-button--primary').forEach(el=>{
-      //       el.style.height = this.contents.tableBtnHeight
-      //       el.style.color = this.contents.tableBtnEditFontColor
-      //       el.style.fontSize = this.contents.tableBtnFontSize
-      //       el.style.borderWidth = this.contents.tableBtnBorderWidth
-      //       el.style.borderStyle = this.contents.tableBtnBorderStyle
-      //       el.style.borderColor = this.contents.tableBtnBorderColor
-      //       el.style.borderRadius = this.contents.tableBtnBorderRadius
-      //       el.style.backgroundColor = this.contents.tableBtnEditBgColor
-      //     })
-      //     document.querySelectorAll('.table-content .tables .el-table__body .el-button--danger').forEach(el=>{
-      //       el.style.height = this.contents.tableBtnHeight
-      //       el.style.color = this.contents.tableBtnDelFontColor
-      //       el.style.fontSize = this.contents.tableBtnFontSize
-      //       el.style.borderWidth = this.contents.tableBtnBorderWidth
-      //       el.style.borderStyle = this.contents.tableBtnBorderStyle
-      //       el.style.borderColor = this.contents.tableBtnBorderColor
-      //       el.style.borderRadius = this.contents.tableBtnBorderRadius
-      //       el.style.backgroundColor = this.contents.tableBtnDelBgColor
-      //     })
-
-      //   }, 50)
-      // })
-    },
-    // 分页
-    contentPageStyleChange(){
-      let arr = []
-
-      if(this.contents.pageTotal) arr.push('total')
-      if(this.contents.pageSizes) arr.push('sizes')
-      if(this.contents.pagePrevNext){
-        arr.push('prev')
-        if(this.contents.pagePager) arr.push('pager')
-        arr.push('next')
-      }
-      if(this.contents.pageJumper) arr.push('jumper')
-      this.layouts = arr.join()
-      this.contents.pageEachNum = 10
-    },
-
-    init () {
-    },
-    search() {
-      this.pageIndex = 1;
-      this.getDataList();
-    },
-    // 获取数据列表
+    // 获取聊天消息列表数据
     getDataList() {
+      // 开启加载状态
       this.dataListLoading = true;
-      let params = {
-        page: this.pageIndex,
-        limit: this.pageSize,
-        sort: 'id',
-      }
-          if(this.searchForm.name!='' && this.searchForm.name!=undefined){
-            params['name'] = '%' + this.searchForm.name + '%'
-          }
+      // 发送 HTTP 请求获取数据
       this.$http({
-        url: "config/page",
+        url: 'chat/page',
         method: "get",
-        params: params
+        params: {
+          page: this.pageIndex,
+          limit: this.pageSize,
+          sort: 'id',
+          zhuangtaiTypes: 1,
+          chatTypes: 1,
+        }
       }).then(({ data }) => {
         if (data && data.code === 0) {
+          // 更新聊天消息列表数据
           this.dataList = data.data.list;
+          // 更新总记录数
           this.totalPage = data.data.total;
         } else {
+          // 清空数据列表和总记录数
           this.dataList = [];
           this.totalPage = 0;
         }
+        // 关闭加载状态
         this.dataListLoading = false;
       });
     },
-    // 每页数
+    // 每页记录数改变时的处理函数
     sizeChangeHandle(val) {
+      // 更新每页记录数
       this.pageSize = val;
+      // 重置当前页码为 1
       this.pageIndex = 1;
+      // 重新获取数据
       this.getDataList();
     },
-    // 当前页
+    // 当前页码改变时的处理函数
     currentChangeHandle(val) {
+      // 更新当前页码
       this.pageIndex = val;
+      // 重新获取数据
       this.getDataList();
     },
-    // 多选
-    selectionChangeHandler(val) {
-      this.dataListSelections = val;
-    },
-    // 添加/修改
-    addOrUpdateHandler(id,type) {
-      this.showFlag = false;
-      this.addOrUpdateFlag = true;
-      this.crossAddOrUpdateFlag = false;
-      if(type!='info'){
-        type = 'else';
-      }
+    // 回复按钮点击处理函数
+    addOrUpdateHandler(row) {
+      // 显示添加/修改页
+      this.showFlag = true;
+      // 等待 DOM 更新后调用子组件的 init 方法
       this.$nextTick(() => {
-        this.$refs.addOrUpdate.init(id,type);
-      });
-    },
-    // 查看评论
-    // 下载
-    download(file){
-      window.open(`${file}`)
-    },
-    // 删除
-    deleteHandler(id) {
-      var ids = id
-        ? [Number(id)]
-        : this.dataListSelections.map(item => {
-            return Number(item.id);
-          });
-      this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      }).then(() => {
-        this.$http({
-          url: "config/delete",
-          method: "post",
-          data: ids
-        }).then(({ data }) => {
-          if (data && data.code === 0) {
-            this.$message({
-              message: "操作成功",
-              type: "success",
-              duration: 1500,
-              onClose: () => {
-                this.search();
-              }
-            });
-          } else {
-            this.$message.error(data.msg);
-          }
-        });
+        this.$refs.addOrUpdate.init(row);
       });
-    },
+    }
   }
-
 };
 </script>
+
 <style lang="scss" scoped>
+/* 部分样式类定义，用于设置表格、按钮等元素的样式 */
 .slt {
-    margin: 0 !important;
-    display: flex;
+  margin: 0 !important;
+  display: flex;
+}
+
+.ad {
+  margin: 0 !important;
+  display: flex;
+}
+
+.pages {
+  & /deep/ el-pagination__sizes {
+    & /deep/ el-input__inner {
+      height: 22px;
+      line-height: 22px;
+    }
   }
-
-  .ad {
-    margin: 0 !important;
-    display: flex;
+}
+
+.el-button +.el-button {
+  margin: 0;
+}
+
+.tables {
+  & /deep/.el-button--success {
+    height: 30px;
+    color: rgba(88, 179, 81, 1);
+    font-size: 12px;
+    border-width: 1px;
+    border-style: none none solid none;
+    border-color: rgba(88, 179, 81, 1);
+    border-radius: 0px;
+    background-color: #fff;
   }
 
-  .pages {
-    & /deep/ el-pagination__sizes{
-      & /deep/ el-input__inner {
-        height: 22px;
-        line-height: 22px;
-      }
-    }
+  & /deep/.el-button--primary {
+    height: 30px;
+    color: rgba(88, 179, 81, 1);
+    font-size: 12px;
+    border-width: 1px;
+    border-style: none none solid none;
+    border-color: rgba(88, 179, 81, 1);
+    border-radius: 0px;
+    background-color: #fff;
   }
-  
-
-  .el-button+.el-button {
-    margin:0;
-  } 
 
-  .tables {
-	& /deep/ .el-button--success {
-		height: 30px;
-		color: rgba(88, 179, 81, 1);
-		font-size: 12px;
-		border-width: 1px;
-		border-style: none none solid none;
-		border-color: rgba(88, 179, 81, 1);
-		border-radius: 0px;
-		background-color: #fff;
-	}
-	
-	& /deep/ .el-button--primary {
-		height: 30px;
-		color: rgba(88, 179, 81, 1);
-		font-size: 12px;
-		border-width: 1px;
-		border-style: none none solid none;
-		border-color: rgba(88, 179, 81, 1);
-		border-radius: 0px;
-		background-color: #fff;
-	}
-	
-	& /deep/ .el-button--danger {
-		height: 30px;
-		color: rgba(88, 179, 81, 1);
-		font-size: 12px;
-		border-width: 1px;
-		border-style: none none solid none;
-		border-color: rgba(88, 179, 81, 1);
-		border-radius: 0px;
-		background-color: #fff;
-	}
+  & /deep/.el-button--danger {
+    height: 30px;
+    color: rgba(88, 179, 81, 1);
+    font-size: 12px;
+    border-width: 1px;
+    border-style: none none solid none;
+    border-color: rgba(88, 179, 81, 1);
+    border-radius: 0px;
+    background-color: #fff;
+  }
 
-    & /deep/ .el-button {
-      margin: 4px;
-    }
-  }</style>
+  & /deep/.el-button {
+    margin: 4px;
+  }
+}
+</style>

src/main/resources/admin/admin/src/views/modules/dictionary/add-or-update.vue

@@ -4,15 +4,7 @@
                 class="detail-form-content"
                 ref="ruleForm"
                 :model="ruleForm"
-                :rules="rules"
-                label-width="80px"
-                :style="{backgroundColor:addEditForm.addEditBoxColor}">
-            <el-row>
-                <input id="updateId" name="id" type="hidden">
-               <el-col :span="12">
-                   <el-form-item class="input" v-if="type!='info'"  label="字段" prop="dicCode">
-                       <el-input v-model="ruleForm.dicCode"
-                                 placeholder="字段" clearable  :readonly="ro.dicCode"></el-input>
+                :rule" clearable  :readonly="ro.dicCode"></el-input>
                    </el-form-item>
                    <div v-else>
                        <el-form-item class="input" label="字段" prop="dicCode">

src/main/resources/front/front/css/style.css

@@ -1,701 +1,243 @@
-.container {
-	margin: 0 auto;
-	width: 980px;
-}
-
-label {
-	margin: 0;
-}
-
-/* 导航栏 */
-.nav {
-	text-align: center;
-}
-
-.layui-nav * {
-	font-size: 18px;
-}
-
-/* 轮播图 */
-.swiper-item {
-	width: 100%;
-}
-
-.layui-carousel-ind li {
-	width: 80px;
-	height: 5px;
-	border-radius: 0;
-}
-
-/* 商品推荐标题 */
-.recommend-container {
-	margin-top: 20px;
-}
-
-.index-title {
-	margin: 0 auto;
-	width: 980px;
-	text-align: center;
-	font-size: 42px;
-	font-family: "Times New Roman", Times, serif;
-	text-transform: uppercase;
-}
-
-.recommend-list {
-	width: 1000px;
-	margin: 0 auto;
-	height: 360px;
-	padding: 0px 0 0 0;
-}
-
-.recommend-item {
-	float: left;
-	width: 1000px;
-	padding: 20px 0 0 0;
-}
-
-.recommend-item li {
-	float: left;
-	width: 218px;
-	position: relative;
-	display: inline;
-	margin: 0 15px;
-}
-
-.recommend-item li a.img {
-	float: left;
-	width: 218px;
-	height: 218px;
-	position: absolute;
-	left: 0;
-	top: 0;
-	background: url(../img/yuan.png) left top no-repeat;
-}
-
-.recommend-item li a.wor {
-	float: left;
-	width: 218px;
-	height: 30px;
-	line-height: 30px;
-	text-align: center;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-	font-size: 14px;
-	color: #000;
-	display: inline;
-	margin: 10px 0 0 0;
-}
-
-/* 首页新闻样式（手风琴） */
-.news-home-container {
-	padding-top: 20px;
-	margin-bottom: 20px;
-	padding-bottom: 20px;
-}
-
-.news-home-container .layui-collapse {
-	border: 0;
-	margin: 0 20px;
-}
-
-.news-home-container .layui-colla-item {
-	margin-top: 14px;
-}
-
-.news-home-container .layui-colla-content {
-	font-size: 16px;
-	line-height: 40px;
-	height: 115px;
-}
-
-.news-home-container .layui-colla-title {
-	height: 50px;
-	line-height: 50px;
-	font-size: 16px;
-	font-weight: 500;
-}
-
-.news-home-container .card-container {
-	margin-top: 18px;
-}
-
-.news-home-container .layui-card-header {
-	height: 50px;
-	line-height: 50px;
-}
-
-/* 底部导航 */
-.nav-bottom {
-	text-align: center;
-}
-
-/* 底部栏 */
-.footer {
-	margin: 10px;
-	text-align: center;
-}
-
-.footer-item {
-	color: #515151;
-	margin-top: 10px;
-}
-
-/* 留言 */
-.message-container {
-	width: 980px;
-	margin: 0 auto;
-	text-align: center;
-}
-
-.message-container .message-form {
-	margin-top: 20px;
-	border-bottom: 1px dotted #888888;
-}
-
-.message-container .message-list {
-	text-align: left;
-}
-
-
-.message-container .message-list .message-item {
-	margin-top: 20px;
-	border-bottom: 1px solid #EEEEEE;
-}
-
-.message-container .message-list .message-item .username-container {
-	font-size: 18px;
-}
-
-.message-container .message-list .message-item .username-container .avator {
-	width: 60px;
-	height: 60px;
-	border-radius: 50%;
-}
-
-.message-container .message-list .message-item .content {
-	margin: 10px;
-}
-
-.message-container .message-list .message-item .replay {
-	background: #EEEEEE;
-	margin: 10px;
-	padding: 20px;
-	border-radius: 20px;
-}
-
-/* 论坛 */
-.forum-container {
-	width: 980px;
-	margin: 0 auto;
-	text-align: center;
-}
-
-.forum-container .forum-list {
-	text-align: left;
-	margin-top: 20px;
-}
-
-.forum-container .forum-list .forum-item {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 20px;
-	border-bottom: 3px dotted #EEEEEE;
-	border-top: 3px dotted #EEEEEE;
-}
-
-.forum-container .forum-list .forum-item.line {
-	background: #EEEEEE;
-}
-
-
-.forum-container .forum-list .forum-item .h2 {
-	font-size: 14px;
-}
-
-.forum-container .forum-list .forum-item .create-time {
-	font-size: 14px;
-}
-
-.forum-container {
-	margin-top: 20px;
-}
-
-.forum-container .title {
-	font-size: 22px;
-	font-weight: bold;
-}
-
-.forum-container .content {
-	width: 980px;
-	margin: 0 auto;
-	text-align: left;
-	margin-top: 30px;
-	font-size: 16px;
-	line-height: 30px;
-}
-
-.forum-container .auth-container {
-	margin-top: 20px;
-	color: #888888;
-	border-bottom: 1px dotted #888888;
-	padding-bottom: 20px;
-}
-
-.forum-container .bottom-container {
-	display: flex;
-	justify-content: space-between;
-	width: 980px;
-	margin: 0 auto;
-	background: #EEEEEE;
-	height: 60px;
-	line-height: 60px;
-	margin-top: 30px;
-}
-
-.forum-container .bottom-container .title {
-	margin-left: 30px;
-	font-size: 20px;
-	color: #515151;
-}
-
-.forum-container .bottom-container .btn {
-	font-size: 20px;
-	padding: 0 20px;
-}
-
-.forum-container .message-list {
-	text-align: left;
-}
-
-
-.forum-container .message-list .message-item {
-	margin-top: 20px;
-	border-bottom: 1px solid #EEEEEE;
-}
-
-.forum-container .message-list .message-item .username-container {
-	font-size: 18px;
-}
-
-.forum-container .message-list .message-item .username-container .avator {
-	width: 60px;
-	height: 60px;
-	border-radius: 50%;
-}
-
-.forum-container .message-list .message-item .content {
-	margin: 10px;
-}
-
-.forum-container .message-list .message-item .replay {
-	background: #EEEEEE;
-	margin: 10px;
-	padding: 20px;
-	border-radius: 20px;
-}
-
-/* 考试 */
-.paper-container {
-	width: 980px;
-	margin: 0 auto;
-	margin-top: 20px;
-	text-align: center;
-}
-
-.paper-container thead {
-	border-radius: 100px;
-}
-
-.paper-container thead tr th {
-	font-size: 16px;
-	font-weight: blod;
-	line-height: 50px;
-	height: 50px;
-	text-align: center;
-}
-
-.paper-container tbody tr td {
-	font-size: 16px;
-	height: 50px;
-	border-bottom: 5px dotted #EEEEEE;
-}
-
-.paper-container tbody tr {
-	border: 3px dotted #EEEEEE;
-}
-
-/* 个人中心 */
-.center-container {
-	width: 980px;
-	margin: 0 auto;
-	margin-top: 20px;
-	text-align: center;
-	display: flex;
-	margin-bottom: 20px;
-}
-
-.center-container .left-container {
-	border: 2px dotted #EEEEEE;
-	background: #FFFFFF;
-	width: 200px;
-	padding-top: 20px;
-	height: 600px;
-}
-
-.center-container .right-container {
-	flex: 1;
-	border: 2px dotted #EEEEEE;
-	background: #FFFFFF;
-	text-align: left;
-	padding: 20px;
-	padding-top: 40px;
-}
-
-/* 购物车 */
-.btn-container {
-	margin-top: 20px;
-	text-align: right;
-	margin-bottom: 60px;
-	border: 2px dotted #EEEEEE;
-	padding: 20px;
-}
-
-/* 登陆注册 */
-.login-container {
-	background: #FFFFFF;
-	z-index: 9;
-	position: relative;
-	width: 480px;
-	margin: 0 auto;
-	border-radius: 20px;
-	margin-top: 100px;
-	padding-top: 30px;
-}
-
-.login-form {
-	text-align: center;
-	padding: 20px;
-}
-
-.login-bg {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	opacity: 0.8;
-	background-size: 100% 100%;
-	background-repeat: no-repeat;
-}
-
-.login-container .bottom-container {
-	text-align: center;
-	color: #888888;
-	padding: 20px;
-}
-
-.login-container .bottom-container a {
-	margin-left: 10px;
-	border: 2px dotted #888888;
-	padding: 10px;
-}
-
-/* 确认下单页面 */
-.address-table {
-	border: 3px dotted #EEEEEE;
-}
-
-/* 图文列表 */
-.data-container {
-	margin: 20px 0;
-	text-align: center;
-	display: flex;
-	flex-direction: column;
-}
-
-.data-container .data-list .data-item {
-	padding: 20px;
-	text-align: left;
-	margin-bottom: 10px;
-	min-height: 330px;
-}
-
-.data-container .data-list .data-item:hover {
-	padding: 10px;
-}
-
-
-.data-container .data-list .data-item .cover {
-	width: 100%;
-	height: 200px;
-	object-fit: cover;
-	border: 1px solid #EEEEEE;
-}
-
-.data-container .data-list .data-item .title {
-	text-align: center;
-	padding: 10px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.data-container .data-list .data-item .price {
-	font-size: 20px;
-	text-align: right;
-}
-
-.data-container .data-list .data-item .data {
-	font-size: 16px;
-	border: 1px solid #EEEEEE;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	flex-wrap: wrap;
-}
-
-.data-container .data-list .data-item .data .item {
-	width: 40%;
-	text-align: center;
-	margin: 10px;
-}
-
-.search-container {
-	border: 0;
-	font-size: 16px;
-	width: 980px;
-	margin: 0 auto;
-	text-align: left;
-	margin-top: 10px;
-	margin-bottom: 10px;
-}
-
-/* 数据详情页 */
-
-.data-detail {
-	width: 980px;
-	margin: 0 auto;
-	margin-top: 20px;
-	text-align: left;
-	margin-bottom: 20px;
-}
-
-.data-detail-breadcrumb {
-	margin: 10px 0;
-	padding: 20px;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.data-detail .title {
-	font-size: 20px;
-	font-weight: bold;
-	border: 3px dotted #EEEEEE;
-	padding: 10px;
-}
-
-.data-detail .count-container {
-	background: url(../img/seckilling.jpg);
-	margin-top: 20px;
-	padding: 15px;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.data-detail .count-container .text {
-	font-size: 18px;
-	font-weight: blod;
-}
-
-.data-detail .count-container .number {
-	padding: 10px;
-	font-size: 16px;
-	font-weight: blod;
-}
-
-.data-detail .tool-container {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-top: 20px;
-	font-size: 16px;
-	font-weight: bolder;
-	padding: 10px;
-}
-
-.data-detail .price {
-	color: red;
-	font-size: 16px;
-	font-weight: bolder;
-	font-size: 20px;
-	font-weight: bolder;
-}
-
-.data-detail .detail-item {
-	background: #EEEEEE;
-	padding: 10px;
+<template>
+<!-- 主内容容器 -->
+<div class="main-content">
+<!-- 列表页展示，当 showFlag 为 false 时显示 -->
+<div v-if="!showFlag">
+<!-- 表格内容容器 -->
+<div class="table-content">
+<!-- Element UI 表格组件，用于展示聊天消息列表 -->
+<el-table
+ :data="dataList"
+empty-text="暂无需要回复的消息"
+border
+v-loading="dataListLoading"
+style="width: 100%;"
+>
+<!-- 新消息列 -->
+<el-table-column prop="chatIssue" header-align="center" align="center" sortable label="新消息"></el-table-column>
+<!-- 发送时间列 -->
+<el-table-column prop="issueTime" header-align="center" align="center" sortable label="发送时间"></el-table-column>
+<!-- 状态列 -->
+<el-table-column
+ prop="allnode"
+header-align="center"
+align="center"
+sortable
+label="状态"
+width="150"
+>
+<!-- 自定义状态列内容 -->
+<template slot-scope="scope">
+<!-- 根据状态类型显示不同样式的标签 -->
+<el-tag v-if="" :type="scope.row.zhuangtaiTypes === 1? 'success' : 'info'">{{ scope.row.zhuangtaiValue }}</el-tag>
+</template>
+</el-table-column>
+<!-- 操作列，固定在右侧 -->
+<el-table-column
+ fixed="right"
+header-align="center"
+align="center"
+width="150"
+label="操作"
+>
+<!-- 自定义操作列内容 -->
+<template slot-scope="scope">
+<!-- 回复按钮，点击调用 addOrUpdateHandler 方法 -->
+<el-button
+ type="text"
+icon="el-icon-edit"
+size="small"
+@click="addOrUpdateHandler(scope.row)"
+>回复</el-button>
+</template>
+</el-table-column>
+</el-table>
+<!-- 分页组件 -->
+<el-pagination
+@size-change="sizeChangeHandle"
+@current-change="currentChangeHandle"
+:current-page="pageIndex"
+:page-sizes="[10, 20, 50, 100]"
+:page-size="pageSize"
+:total="totalPage"
+layout="total, sizes, prev, pager, next, jumper"
+class="pagination-content"
+></el-pagination>
+</div>
+</div>
+<!-- 添加/修改页面，当 showFlag 为 true 时显示 -->
+<add-or-update v-else :parent="this" ref="addOrUpdate"></add-or-update>
+</div>
+</template>
+
+<script>
+// 导入添加/修改页面组件
+import AddOrUpdate from "./add-or-update";
+// 导入定时器相关函数
+   import { setInterval, clearInterval } from 'timers';
+
+export default {
+data() {
+	return {
+	// 搜索表单数据
+	searchForm: {},
+	// 聊天消息列表数据
+	dataList: [],
+	// 当前页码
+	pageIndex: 1,
+	// 每页显示的记录数
+	pageSize: 10,
+	// 总记录数
+	totalPage: 0,
+	// 表格数据加载状态
+	dataListLoading: false,
+	// 控制显示列表页还是添加/修改页
+	showFlag: false,
+	// 表格选中的数据
+	dataListSelections: [],
+	// 定时器
+	inter: null
+	};
+},
+// 组件创建时执行的钩子函数
+created() {
+	var that = this;
+// 每 5 秒调用一次 getDataList 方法更新数据
+var inter = setInterval(function () {
+	that.getDataList();
+}, 5000);
+	this.inter = inter;
+},
+// 组件销毁时执行的钩子函数
+destroyed() {
+// 清除定时器
+clearInterval(this.inter);
+},
+// 注册组件
+components: {
+	AddOrUpdate
+},
+methods: {
+// 获取聊天消息列表数据
+getDataList() {
+// 开启加载状态
+this.dataListLoading = true;
+// 发送 HTTP 请求获取数据
+this.$http({
+	url: 'chat/page',
+	method: "get",
+	params: {
+	page: this.pageIndex,
+	limit: this.pageSize,
+	sort: 'id',
+	zhuangtaiTypes: 1,
+	chatTypes: 1,
+}
+}).then(({ data }) => {
+	if (data && data.code === 0) {
+// 更新聊天消息列表数据
+this.dataList = data.data.list;
+// 更新总记录数
+this.totalPage = data.data.total;
+} else {
+  // 清空数据列表和总记录数
+  this.dataList = [];
+	  this.totalPage = 0;
+  }
+// 关闭加载状态
+this.dataListLoading = false;
+});
+},
+// 每页记录数改变时的处理函数
+sizeChangeHandle(val) {
+// 更新每页记录数
+this.pageSize = val;
+// 重置当前页码为 1
+this.pageIndex = 1;
+// 重新获取数据
+this.getDataList();
+},
+// 当前页码改变时的处理函数
+currentChangeHandle(val) {
+// 更新当前页码
+this.pageIndex = val;
+// 重新获取数据
+this.getDataList();
+},
+// 回复按钮点击处理函数
+addOrUpdateHandler(row) {
+// 显示添加/修改页
+this.showFlag = true;
+// 等待 DOM 更新后调用子组件的 init 方法
+this.$nextTick(() => {
+	this.$refs.addOrUpdate.init(row);
+});
+}
+}
+};
+</script>
+
+<style lang="scss" scoped>
+					   /* 部分样式类定义，用于设置表格、按钮等元素的样式 */
+				   .slt {
+					   margin: 0 !important;
+					   display: flex;
+				   }
+
+.ad {
+	margin: 0 !important;
 	display: flex;
-	align-items: center;
 }
 
-.data-detail .desc {
-	font-size: 16px;
-	color: #515151;
+.pages {
+	& /deep/ el-pagination__sizes {
+		& /deep/ el-input__inner {
+			height: 22px;
+			line-height: 22px;
+		}
+	}
 }
 
-.video-container {
-	width: 100%;
-	margin-top: 20px;
-}
-
-.num-picker {
-	display: flex;
-	align-items: center;
-	margin-right: 20px;
-}
-
-.num-picker button {
-	border: 0;
-	font-size: 20px;
-}
-
-.num-picker input {
-	width: 50px;
-	text-align: center;
-	height: 40px;
-}
-
-.data-add-container{
-	width: 800px;
-	margin: 0 auto;
-	margin-top: 20px;
-	text-align: left;
-	margin-bottom: 20px;
-	background: #FFFFFF;
-	padding: 20px;
-	padding-top: 30px;
-}
-
-/* 详情页选座 */
-.seat-list {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	background: #FFFFFF;
-	margin: 20px;
-	border-radius: 20px;
-	padding: 20px;
-	font-size: 16px;
-}
-
-.seat-item {
-	width: 10%;
-	display: flex;
-	align-items: center;
-	flex-direction: column;
-	margin-bottom: 20px;
-}
-
-.seat-icon {
-	width: 30px;
-	height: 30px;
-	margin-bottom: 10px;
-}
-
-/* banner */
-.banner {
-	width: 100%;
-	height: 50px;
-	margin-top: 30px;
-}
-
-/* 新闻列表 */
-.news-container {
-	text-align: center;
-	margin: 0 auto;
-	margin: 40px 0;
-}
-
-.news-container .pager {
-	margin: 20px 0;
-}
-
-.news-container .news-list {
-	width: 980px;
-	margin: 0 auto;
-	text-align: left;
-}
-
-.news-container .news-list .news-item {
-	display: flex;
-	border-bottom: 1px solid #EEEEEE;
-	padding: 10px;
-}
-
-.news-container .news-list .news-item .cover-container {
-	margin: 0 20px;
-}
-
-.news-container .news-list .news-item .cover-container .cover {
-	width: 200px;
-	height: 200px;
-	object-fit: cover;
-}
-
-.news-container .news-list .news-item .detail-container .h2 {
-	font-size: 18px;
-	font-weight: bold;
-}
-
-.news-container .news-list .news-item .detail-container .desc {
-	height: 140px;
-	padding-top: 20px;
-}
-
-.news-container .title {
-	font-size: 22px;
-	font-weight: bold;
-}
-
-.news-container .content {
-	width: 980px;
-	margin: 0 auto;
-	text-align: left;
-	margin-top: 30px;
-	font-size: 16px;
-	line-height: 30px;
-}
-
-.news-container .auth-container {
-	margin-top: 20px;
-	color: #888888;
-	border-bottom: 1px dotted #888888;
-	padding-bottom: 20px;
-}
-
-
-.news-container .bottom-container {
-	display: flex;
-	justify-content: space-between;
-	width: 980px;
-	margin: 0 auto;
-	background: #EEEEEE;
-	height: 60px;
-	line-height: 60px;
-	margin-top: 30px;
-}
-
-.news-container .bottom-container .title {
-	margin-left: 30px;
-	font-size: 20px;
-	color: #515151;
+.el-button +.el-button {
+	margin: 0;
 }
 
-.news-container .bottom-container .btn {
-	font-size: 20px;
-	padding: 0 20px;
-}
+.tables {
+	& /deep/.el-button--success {
+		height: 30px;
+		color: rgba(88, 179, 81, 1);
+		font-size: 12px;
+		border-width: 1px;
+		border-style: none none solid none;
+		border-color: rgba(88, 179, 81, 1);
+		border-radius: 0px;
+		background-color: #fff;
+	}
+
+	& /deep/.el-button--primary {
+		height: 30px;
+		color: rgba(88, 179, 81, 1);
+		font-size: 12px;
+		border-width: 1px;
+		border-style: none none solid none;
+		border-color: rgba(88, 179, 81, 1);
+		border-radius: 0px;
+		background-color: #fff;
+	}
+
+	& /deep/.el-button--danger {
+		height: 30px;
+		color: rgba(88, 179, 81, 1);
+		font-size: 12px;
+		border-width: 1px;
+		border-style: none none solid none;
+		border-color: rgba(88, 179, 81, 1);
+		border-radius: 0px;
+		background-color: #fff;
+	}
+
+	& /deep/.el-button {
+		margin: 4px;
+	}
+}
+</style>