src/store/index.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+
+// 引入各个模块的 Vuex 状态管理文件
 import common from './modules/common'
 import user from './modules/user'
 import article from './modules/article'
@@ -7,18 +9,26 @@ import message from './modules/message'
 import wxUserTags from './modules/wxUserTags'
 import wxAccount from './modules/wxAccount'
 
+// 注册 Vuex 插件，使其可用于 Vue 中
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  modules: {
-    common,
-    user,
-    article,
-    message,
-    wxUserTags,
-    wxAccount
-  },
-  mutations: {
-  },
-  strict: true
+// 使用 modules 来组织不同的子模块
+modules: {
+// 引入并注册各个模块
+common, // 公共模块，可能用于存储一些通用的状态
+user, // 用户模块，存储用户信息相关的状态
+article, // 文章模块，存储与文章相关的状态
+message, // 消息模块，存储消息相关的状态
+wxUserTags, // 微信用户标签模块，管理微信用户标签的状态
+wxAccount // 微信账号模块，管理微信账号相关的状态
+},
+
+// mutations 用于同步修改状态，这里没有定义任何 mutations（可根据需求进行扩展）
+mutations: {
+// 这里可以添加全局的 mutation，但目前没有定义
+},
+
+// 启用严格模式，开发环境下会对状态的修改进行检查，确保只能通过 mutation 修改状态
+strict: true
 })

src/store/modules/wxAccount.js

@@ -1,32 +1,59 @@
-import Vue from 'vue'
+import Vue from 'vue';
+
 export default {
-    namespaced: true,
-    state: {
-        ACCOUNT_TYPES:{
-            1:'订阅号',
-            2:'服务号'
-        },
-        accountList:[],
-        selectedAppid:''
-    },
-    mutations: {
-      updateAccountList (state, list) {
-        state.accountList = list
-        if(!list.length)return
-        if(!state.selectedAppid){
-          let appidCookie  = Vue.cookie.get('appid')
-          let selectedAppid = appidCookie?appidCookie:list[0].appid
-          this.commit('wxAccount/selectAccount',selectedAppid)
-        }
-      },
-      selectAccount (state, appid) {
-        Vue.cookie.set('appid',appid)
-        let oldAppid = state.selectedAppid
-        state.selectedAppid = appid
-        if(oldAppid){//切换账号时刷新网页
-          location.reload();
-        }
-      },
-    }
-  }
-  
+// Vuex模块启用命名空间
+namespaced: true,
+
+// Vuex的state，用来存储应用状态
+state: {
+// 账户类型，映射数字ID到账户类型名称
+ACCOUNT_TYPES: {
+1: '订阅号',
+2: '服务号'
+},
+
+// 存储账户列表
+accountList: [],
+
+// 当前选中的Appid，用来标识选择的账号
+selectedAppid: ''
+},
+
+// Vuex的mutations，用来修改state
+mutations: {
+// 更新账户列表
+updateAccountList (state, list) {
+// 更新state中的accountList
+state.accountList = list;
+
+// 如果列表为空，直接返回
+if (!list.length) return;
+
+// 如果当前没有选中的Appid，则从cookie或列表中选择一个默认Appid
+if (!state.selectedAppid) {
+let appidCookie = Vue.cookie.get('appid');
+// 获取cookie中的appid，如果有则使用cookie中的appid，否则使用列表中的第一个Appid
+let selectedAppid = appidCookie ? appidCookie : list[0].appid;
+// 通过commit调用mutation更新选中的账号
+this.commit('wxAccount/selectAccount', selectedAppid);
+}
+},
+
+// 选择某个账号（切换Appid）
+selectAccount (state, appid) {
+// 更新cookie中的appid，保存选中的Appid
+Vue.cookie.set('appid', appid);
+
+// 记录上一个选中的Appid
+let oldAppid = state.selectedAppid;
+
+// 更新当前选中的Appid
+state.selectedAppid = appid;
+
+// 如果选中的Appid发生变化，则刷新页面
+if (oldAppid) {
+location.reload();
+}
+}
+}
+};

src/store/modules/wxUserTags.js

@@ -1,12 +1,20 @@
 export default {
-    namespaced: true,
-    state: {
-        tags:[]
-    },
-    mutations: {
-      updateTags (state, tags) {
-        state.tags = tags
-      }
-    }
+  // 启用 Vuex 模块的命名空间，避免命名冲突
+  namespaced: true,
+  
+  // state 存储模块的状态
+  state: {
+  // tags 用来存储标签数据的数组
+  tags: []
+  },
+  
+  // mutations 用来修改 state 中的状态
+  mutations: {
+  // 更新 tags 数组的内容
+  updateTags (state, tags) {
+  // 将传入的 tags 更新到 state 中
+  state.tags = tags;
   }
+  }
+  };
   

src/utils/httpRequest.js

@@ -4,74 +4,81 @@ import router from '@/router'
 import qs from 'qs'
 import merge from 'lodash/merge'
 import { clearLoginInfo } from '@/utils'
-const baseUrl = '/wx'
 
+const baseUrl = '/wx' // 设置请求的基础路径
+
+// 创建axios实例
 const http = axios.create({
-  timeout: 1000 * 30,
-  withCredentials: true,
-  headers: {
-    'Content-Type': 'application/json; charset=utf-8'
-  }
+timeout: 1000 * 30, // 设置请求超时为30秒
+withCredentials: true, // 允许携带跨域请求的cookie
+headers: {
+'Content-Type': 'application/json; charset=utf-8' // 默认请求头为json格式
+}
 })
 
 /**
- * 请求拦截
- */
+* 请求拦截器
+* 在每个请求发送之前，加入token（从cookie中获取）
+*/
 http.interceptors.request.use(config => {
-  config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
-  return config
+config.headers['token'] = Vue.cookie.get('token') // 在请求头中加入token
+return config // 返回请求配置
 }, error => {
-  return Promise.reject(error)
+return Promise.reject(error) // 请求出错时，返回Promise拒绝
 })
 
 /**
- * 响应拦截
- */
+* 响应拦截器
+* 对响应数据进行拦截处理
+* 如果返回的状态码为401（未授权），则清除登录信息并跳转到登录页
+*/
 http.interceptors.response.use(response => {
-  if (response.data && response.data.code === 401) { // 401, token失效
-    clearLoginInfo()
-    router.push({ name: 'login' })
-  }
-  return response
+if (response.data && response.data.code === 401) { // 判断返回的code是否为401，代表token失效
+clearLoginInfo() // 清除登录信息
+router.push({ name: 'login' }) // 跳转到登录页面
+}
+return response // 返回响应数据
 }, error => {
-  return Promise.reject(error)
+return Promise.reject(error) // 响应出错时，返回Promise拒绝
 })
 
 /**
- * 请求地址处理
- * @param {*} actionName action方法名称
- */
+* 请求地址处理函数
+* @param {*} actionName 接口的名称，拼接成完整的URL
+* @returns {string} 拼接后的完整URL
+*/
 http.adornUrl = (actionName) => {
-  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
-  return baseUrl + actionName
+// 在开发环境下，如果开启了代理，则请求路径会带上代理前缀
+return baseUrl + actionName // 返回完整的请求URL
 }
 
 /**
- * get请求参数处理
- * @param {*} params 参数对象
- * @param {*} openDefultParams 是否开启默认参数?
- */
+* get请求的参数处理
+* @param {*} params 请求的参数对象
+* @param {*} openDefultParams 是否开启默认参数
+* @returns {object} 处理后的参数对象
+*/
 http.adornParams = (params = {}, openDefultParams = true) => {
-  var defaults = {
-    't': new Date().getTime()
-  }
-  return openDefultParams ? merge(defaults, params) : params
+const defaults = {
+'t': new Date().getTime() // 添加时间戳参数，防止缓存
+}
+return openDefultParams ? merge(defaults, params) : params // 合并默认参数和传入的参数
 }
 
 /**
- * post请求数据处理
- * @param {*} data 数据对象
- * @param {*} openDefultdata 是否开启默认数据?
- * @param {*} contentType 数据格式
- *  json: 'application/json; charset=utf-8'
- *  form: 'application/x-www-form-urlencoded; charset=utf-8'
- */
+* post请求的数据处理
+* @param {*} data 请求的数据对象
+* @param {*} openDefultdata 是否开启默认数据
+* @param {*} contentType 数据格式类型（'json'或'form'）
+* @returns {string} 处理后的数据
+*/
 http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
-  var defaults = {
-    't': new Date().getTime()
-  }
-  data = openDefultdata ? merge(defaults, data) : data
-  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
+const defaults = {
+'t': new Date().getTime() // 添加时间戳参数，防止缓存
+}
+data = openDefultdata ? merge(defaults, data) : data // 合并默认数据和传入的数据
+// 根据不同的contentType，处理数据格式
+return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
 }
 
-export default http
+export default http // 导出axios实例，供其他模块使用

src/utils/index.js

@@ -3,56 +3,76 @@ import router from '@/router'
 import store from '@/store'
 
 /**
- * 获取uuid
- */
+* 获取UUID
+* 生成一个标准的UUID（例如：xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx）
+* 使用随机数和指定格式的规则生成UUID
+*/
 export function getUUID() {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
-    return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
-  })
+return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
+})
 }
 
 /**
- * 是否有权限
- * @param {*} key
- */
+* 检查是否有某个权限
+* @param {*} key 权限的标识符
+* @returns {boolean} 如果权限列表中包含该权限返回true，否则返回false
+*/
 export function isAuth(key) {
-  return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
+// 从 sessionStorage 中获取权限列表，并转换为数组，如果没有权限列表，默认返回空数组
+return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
 }
 
 /**
- * 树形数据转换
- * @param {*} data
- * @param {*} id
- * @param {*} pid
- */
+* 将平面数据转换为树形数据
+* @param {*} data 原始平面数据
+* @param {*} id 唯一标识符字段，默认为'id'
+* @param {*} pid 父级标识符字段，默认为'parentId'
+* @returns {Array} 转换后的树形数据
+*/
 export function treeDataTranslate(data, id = 'id', pid = 'parentId') {
-  var res = []
-  var temp = {}
-  for (var i = 0; i < data.length; i++) {
-    temp[data[i][id]] = data[i]
-  }
-  for (var k = 0; k < data.length; k++) {
-    if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
-      if (!temp[data[k][pid]]['children']) {
-        temp[data[k][pid]]['children'] = []
-      }
-      if (!temp[data[k][pid]]['_level']) {
-        temp[data[k][pid]]['_level'] = 1
-      }
-      data[k]['_level'] = temp[data[k][pid]]._level + 1
-      temp[data[k][pid]]['children'].push(data[k])
-    } else {
-      res.push(data[k])
-    }
-  }
-  return res
+var res = [] // 存储最终的树形结构
+var temp = {} // 临时存储每个节点，以便快速查找父节点
+
+// 将数据转换为临时对象，key为节点的id，值为节点本身
+for (var i = 0; i < data.length; i++) {
+temp[data[i][id]] = data[i]
+}
+
+// 遍历数据，根据pid将节点组织成树形结构
+for (var k = 0; k < data.length; k++) {
+// 如果节点的父节点存在，并且当前节点的id不等于父节点的id
+if (temp[data[k][pid]] && data[k][id] !== data[k][pid]) {
+// 如果父节点没有'children'属性，则初始化为数组
+if (!temp[data[k][pid]]['children']) {
+temp[data[k][pid]]['children'] = []
+}
+// 如果父节点没有'_level'属性，则设置为1
+if (!temp[data[k][pid]]['_level']) {
+temp[data[k][pid]]['_level'] = 1
+}
+// 当前节点的级别为父节点的级别+1
+data[k]['_level'] = temp[data[k][pid]]._level + 1
+// 将当前节点推送到父节点的children数组中
+temp[data[k][pid]]['children'].push(data[k])
+} else {
+// 如果当前节点是根节点，直接推送到结果数组中
+res.push(data[k])
+}
+}
+
+return res // 返回转换后的树形数据
 }
 
 /**
- * 清除登录信息
- */
+* 清除登录信息
+* 用于用户退出时，清理本地存储的登录信息
+*/
 export function clearLoginInfo() {
-  Vue.cookie.delete('token')
-  //store.commit('resetStore')
-  router.options.isAddDynamicMenuRoutes = false
+// 删除cookie中的'token'
+Vue.cookie.delete('token')
+// 目前注释掉了重置store的操作，若需要可以解除注释
+// store.commit('resetStore')
+// 重置动态菜单路由标志
+router.options.isAddDynamicMenuRoutes = false
 }

src/utils/validate.js

@@ -1,31 +1,36 @@
 /**
- * 邮箱
- * @param {*} s
- */
+* 验证邮箱格式
+* @param {*} s - 需要验证的邮箱地址
+* @returns {boolean} - 返回是否是有效的邮箱地址
+*/
 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
- */
-export function isMobile(s) {
+  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
+  }
+  
+  /**
+  * 验证手机号码格式（中国手机号）
+  * @param {*} s - 需要验证的手机号
+  * @returns {boolean} - 返回是否是有效的手机号码
+  */
+  export function isMobile(s) {
   return /^1[0-9]{10}$/.test(s)
-}
-
-/**
- * 电话号码
- * @param {*} s
- */
-export function isPhone(s) {
+  }
+  
+  /**
+  * 验证固定电话号码格式
+  * @param {*} s - 需要验证的电话号码
+  * @returns {boolean} - 返回是否是有效的电话号码（包括区号和本地号码）
+  */
+  export function isPhone(s) {
   return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
-}
-
-/**
- * URL地址
- * @param {*} s
- */
-export function isURL(s) {
+  }
+  
+  /**
+  * 验证URL地址格式
+  * @param {*} s - 需要验证的URL地址
+  * @returns {boolean} - 返回是否是有效的URL地址（包括http或https协议）
+  */
+  export function isURL(s) {
   return /^http[s]?:\/\/.*/.test(s)
-}
+  }
+  

src/views/common/404.vue

@@ -1,61 +1,81 @@
 <template>
+    <!-- 404 错误页面的模板 -->
     <div class="site-wrapper site-page--not-found">
-        <div class="site-content__wrapper">
-            <div class="site-content">
-                <h2 class="not-found-title">400</h2>
-                <p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p>
-                <el-button @click="$router.go(-1)">返回上一页</el-button>
-                <el-button type="primary" class="not-found-btn-gohome" @click="$router.push({ name: 'home' })">进入首页</el-button>
-            </div>
-        </div>
+    <div class="site-content__wrapper">
+    <div class="site-content">
+    <!-- 错误代码 -->
+    <h2 class="not-found-title">400</h2>
+    <!-- 错误描述 -->
+    <p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p >
+    <!-- 返回上一页按钮 -->
+    <el-button @click="$router.go(-1)">返回上一页</el-button>
+    <!-- 返回首页按钮 -->
+    <el-button type="primary" class="not-found-btn-gohome" @click="$router.push({ name: 'home' })">进入首页</el-button>
     </div>
-</template>
-
-<script>
-export default {
-}
-</script>
-
-<style lang="scss">
-.site-wrapper.site-page--not-found {
-    position: absolute;
+    </div>
+    </div>
+    </template>
+    
+    <script>
+    export default {
+    // 这里可以添加相关的 JavaScript 逻辑
+    }
+    </script>
+    
+    <style lang="scss">
+    /* 整个404页面的外部容器 */
+    .site-wrapper.site-page--not-found {
+    position: absolute; /* 定位到页面的绝对位置 */
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
-    overflow: hidden;
+    overflow: hidden; /* 防止内容溢出 */
+    
+    /* 内容包裹层 */
     .site-content__wrapper {
-        padding: 0;
-        margin: 0;
-        background-color: #fff;
+    padding: 0;
+    margin: 0;
+    background-color: #fff; /* 设置背景色为白色 */
     }
+    
+    /* 页面内容容器 */
     .site-content {
-        position: fixed;
-        top: 15%;
-        left: 50%;
-        z-index: 2;
-        padding: 30px;
-        text-align: center;
-        transform: translate(-50%, 0);
+    position: fixed; /* 固定位置 */
+    top: 15%; /* 距离顶部15% */
+    left: 50%; /* 距离左边50% */
+    z-index: 2; /* 确保内容在其他元素之上 */
+    padding: 30px;
+    text-align: center; /* 内容居中 */
+    transform: translate(-50%, 0); /* 将内容水平居中 */
     }
+    
+    /* 错误标题 */
     .not-found-title {
-        margin: 20px 0 15px;
-        font-size: 10em;
-        font-weight: 400;
-        color: rgb(55, 71, 79);
+    margin: 20px 0 15px;
+    font-size: 10em; /* 大字体 */
+    font-weight: 400;
+    color: rgb(55, 71, 79); /* 文字颜色 */
     }
+    
+    /* 错误描述 */
     .not-found-desc {
-        margin: 0 0 30px;
-        font-size: 26px;
-        text-transform: uppercase;
-        color: rgb(118, 131, 143);
-        > em {
-            font-style: normal;
-            color: #ee8145;
-        }
+    margin: 0 0 30px;
+    font-size: 26px;
+    text-transform: uppercase; /* 将文本转换为大写 */
+    color: rgb(118, 131, 143); /* 文字颜色 */
+    
+    /* 强调标签 <em> 样式 */
+    > em {
+    font-style: normal;
+    color: #ee8145; /* 设置颜色 */
     }
+    }
+    
+    /* 返回首页按钮的左边距 */
     .not-found-btn-gohome {
-        margin-left: 30px;
+    margin-left: 30px;
+    }
     }
-}
-</style>
+    </style>
+    

src/views/common/home.vue

@@ -1,12 +1,18 @@
 <template>
+    <!-- 模块容器 div -->
     <div class="mod-home">
-        <h3>欢迎使用微信管理系统</h3>
+    <!-- 欢迎标题 -->
+    <h3>欢迎使用微信管理系统</h3>
     </div>
-</template>
-<style>
-.mod-home {
+    </template>
+    
+    <style>
+    /* 样式部分 */
+    .mod-home {
+    /* 设置行高，增加文本的可读性 */
     line-height: 2.5;
+    /* 使文本水平居中对齐 */
     text-align: center;
-}
-</style>
-
+    }
+    </style>
+    

src/views/common/login.vue

@@ -1,184 +1,220 @@
 <template>
     <div class="site-wrapper site-page--login">
-        <div class="site-content__wrapper">
-            <div class="site-content">
-                <div class="brand-info">
-                    <h2 class="brand-info__text">微信后台管理系统</h2>
-                    <p class="brand-info__intro">微信公众号后台管理系统。</p>
-                </div>
-                <div class="login-main">
-                    <h3 class="login-title">管理员登录</h3>
-                    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
-                        <el-form-item prop="userName">
-                            <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
-                        </el-form-item>
-                        <el-form-item prop="password">
-                            <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
-                        </el-form-item>
-                        <el-form-item prop="captcha">
-                            <el-row :gutter="20">
-                                <el-col :span="14">
-                                    <el-input v-model="dataForm.captcha" placeholder="验证码">
-                                    </el-input>
-                                </el-col>
-                                <el-col :span="10" class="login-captcha">
-                                    <img :src="captchaPath" @click="getCaptcha()" alt="">
-                                </el-col>
-                            </el-row>
-                        </el-form-item>
-                        <el-form-item>
-                            <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
-                        </el-form-item>
-                    </el-form>
-                </div>
-            </div>
-        </div>
+    <!-- 页面容器，背景层 -->
+    <div class="site-content__wrapper">
+    <!-- 页面内容容器 -->
+    <div class="site-content">
+    <!-- 品牌信息部分 -->
+    <div class="brand-info">
+    <h2 class="brand-info__text">微信后台管理系统</h2>
+    <p class="brand-info__intro">微信公众号后台管理系统。</p >
     </div>
-</template>
-
+    
+    <!-- 登录表单 -->
+    <div class="login-main">
+    <h3 class="login-title">管理员登录</h3>
+    <!-- 表单，绑定了 model 和 validation 规则 -->
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
+    
+    <!-- 用户名输入框 -->
+    <el-form-item prop="userName">
+    <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
+    </el-form-item>
+    
+    <!-- 密码输入框 -->
+    <el-form-item prop="password">
+    <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
+    </el-form-item>
+    
+    <!-- 验证码输入框 -->
+    <el-form-item prop="captcha">
+    <el-row :gutter="20">
+    <el-col :span="14">
+    <el-input v-model="dataForm.captcha" placeholder="验证码"></el-input>
+    </el-col>
+    <el-col :span="10" class="login-captcha">
+    <!-- 验证码图片，点击刷新验证码 -->
+    < img :src="captchaPath" @click="getCaptcha()" alt="">
+    </el-col>
+    </el-row>
+    </el-form-item>
+    
+    <!-- 登录按钮 -->
+    <el-form-item>
+    <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
+    </el-form-item>
+    </el-form>
+    </div>
+    </div>
+    </div>
+    </div>
+    </template>
 <script>
-import { getUUID } from '@/utils'
+import { getUUID } from '@/utils' // 引入工具函数获取UUID
 export default {
-    data() {
-        return {
-            dataForm: {
-                userName: '',
-                password: '',
-                uuid: '',
-                captcha: ''
-            },
-            dataRule: {
-                userName: [
-                    { required: true, message: '帐号不能为空', trigger: 'blur' }
-                ],
-                password: [
-                    { required: true, message: '密码不能为空', trigger: 'blur' }
-                ],
-                captcha: [
-                    { required: true, message: '验证码不能为空', trigger: 'blur' }
-                ]
-            },
-            captchaPath: ''
-        }
-    },
-    created() {
-        this.getCaptcha()
-    },
-    methods: {
-        // 提交表单
-        dataFormSubmit() {
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    this.$http({
-                        url: this.$http.adornUrl('/sys/login'),
-                        method: 'post',
-                        data: this.$http.adornData({
-                            'username': this.dataForm.userName,
-                            'password': this.dataForm.password,
-                            'uuid': this.dataForm.uuid,
-                            'captcha': this.dataForm.captcha
-                        })
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.$cookie.set('token', data.token)
-                            this.$router.replace({ name: 'home' })
-                        } else {
-                            this.getCaptcha()
-                            this.$message.error(data.msg)
-                        }
-                    })
-                }
-            })
-        },
-        // 获取验证码
-        getCaptcha() {
-            this.dataForm.uuid = getUUID()
-            this.captchaPath = this.$http.adornUrl(`/captcha?uuid=${this.dataForm.uuid}`)
-        }
-    }
+data() {
+return {
+// 存储表单数据
+dataForm: {
+userName: '', // 用户名
+password: '', // 密码
+uuid: '', // UUID，用于生成验证码
+captcha: '' // 验证码
+},
+// 表单验证规则
+dataRule: {
+userName: [
+{ required: true, message: '帐号不能为空', trigger: 'blur' }
+],
+password: [
+{ required: true, message: '密码不能为空', trigger: 'blur' }
+],
+captcha: [
+{ required: true, message: '验证码不能为空', trigger: 'blur' }
+]
+},
+captchaPath: '' // 存储验证码的图片路径
+}
+},
+created() {
+// 在组件创建时获取验证码
+this.getCaptcha()
+},
+methods: {
+// 提交表单
+dataFormSubmit() {
+// 验证表单是否有效
+this.$refs['dataForm'].validate((valid) => {
+if (valid) {
+// 如果表单验证通过，发送登录请求
+this.$http({
+url: this.$http.adornUrl('/sys/login'), // 登录接口路径
+method: 'post',
+data: this.$http.adornData({
+'username': this.dataForm.userName,
+'password': this.dataForm.password,
+'uuid': this.dataForm.uuid,
+'captcha': this.dataForm.captcha
+})
+}).then(({ data }) => {
+if (data && data.code === 200) {
+// 如果登录成功，存储 token 并跳转到主页
+this.$cookie.set('token', data.token)
+this.$router.replace({ name: 'home' })
+} else {
+// 如果登录失败，重新获取验证码并显示错误消息
+this.getCaptcha()
+this.$message.error(data.msg)
+}
+})
+}
+})
+},
+// 获取验证码，生成新的 UUID
+getCaptcha() {
+this.dataForm.uuid = getUUID() // 获取新的 UUID
+// 更新验证码的路径
+this.captchaPath = this.$http.adornUrl(`/captcha?uuid=${this.dataForm.uuid}`)
+}
+}
 }
 </script>
-
 <style lang="scss">
 .site-wrapper.site-page--login {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(38, 50, 56, 0.5);
-    overflow: hidden;
-    &:before {
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: -1;
-        width: 100%;
-        height: 100%;
-        content: "";
-        background-color: #fa8bff;
-        background-image: linear-gradient(
-            45deg,
-            #fa8bff 0%,
-            #2bd2ff 52%,
-            #2bff88 90%
-        );
-        background-size: cover;
-    }
-    .site-content__wrapper {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        padding: 0;
-        margin: 0;
-        overflow-x: hidden;
-        overflow-y: auto;
-        background-color: transparent;
-    }
-    .site-content {
-        min-height: 100%;
-        padding: 30px 500px 30px 30px;
-    }
-    .brand-info {
-        margin: 220px 100px 0 90px;
-        color: #fff;
-    }
-    .brand-info__text {
-        margin: 0 0 22px 0;
-        font-size: 48px;
-        font-weight: 400;
-        text-transform: uppercase;
-    }
-    .brand-info__intro {
-        margin: 10px 0;
-        font-size: 16px;
-        line-height: 1.58;
-        opacity: 0.6;
-    }
-    .login-main {
-        position: absolute;
-        top: 0;
-        right: 0;
-        padding: 150px 60px 180px;
-        width: 470px;
-        min-height: 100%;
-        background-color: #fff;
-    }
-    .login-title {
-        font-size: 16px;
-    }
-    .login-captcha {
-        overflow: hidden;
-        > img {
-            width: 100%;
-            cursor: pointer;
-        }
-    }
-    .login-btn-submit {
-        width: 100%;
-        margin-top: 38px;
-    }
+position: absolute;
+top: 0;
+right: 0;
+bottom: 0;
+left: 0;
+background-color: rgba(38, 50, 56, 0.5); /* 半透明背景 */
+overflow: hidden;
+
+/* 页面背景渐变效果 */
+&:before {
+position: fixed;
+top: 0;
+left: 0;
+z-index: -1; /* 确保背景层在最底层 */
+width: 100%;
+height: 100%;
+content: "";
+background-color: #fa8bff;
+background-image: linear-gradient(
+45deg,
+#fa8bff 0%,
+#2bd2ff 52%,
+#2bff88 90%
+);
+background-size: cover;
+}
+
+.site-content__wrapper {
+position: absolute;
+top: 0;
+right: 0;
+bottom: 0;
+left: 0;
+padding: 0;
+margin: 0;
+overflow-x: hidden;
+overflow-y: auto;
+background-color: transparent;
+}
+
+.site-content {
+min-height: 100%;
+padding: 30px 500px 30px 30px;
+}
+
+/* 品牌信息样式 */
+.brand-info {
+margin: 220px 100px 0 90px;
+color: #fff;
+}
+
+.brand-info__text {
+margin: 0 0 22px 0;
+font-size: 48px;
+font-weight: 400;
+text-transform: uppercase;
+}
+
+.brand-info__intro {
+margin: 10px 0;
+font-size: 16px;
+line-height: 1.58;
+opacity: 0.6;
+}
+
+/* 登录表单样式 */
+.login-main {
+position: absolute;
+top: 0;
+right: 0;
+padding: 150px 60px 180px;
+width: 470px;
+min-height: 100%;
+background-color: #fff;
+}
+
+.login-title {
+font-size: 16px;
+}
+
+/* 验证码图片样式 */
+.login-captcha {
+overflow: hidden;
+> img {
+width: 100%;
+cursor: pointer; /* 鼠标指针变成手形，表示可以点击 */
+}
+}
+
+/* 登录按钮样式 */
+.login-btn-submit {
+width: 100%;
+margin-top: 38px;
+}
 }
 </style>
+    

src/views/common/theme.vue

@@ -1,33 +1,53 @@
 <template>
     <el-form>
-        <h2>布局设置</h2>
-        <el-form-item label="导航条类型">
-            <el-radio-group v-model="navbarLayoutType">
-                <el-radio label="default" border>default</el-radio>
-                <el-radio label="inverse" border>inverse</el-radio>
-            </el-radio-group>
-        </el-form-item>
-        <el-form-item label="侧边栏皮肤">
-            <el-radio-group v-model="sidebarLayoutSkin">
-                <el-radio label="light" border>light</el-radio>
-                <el-radio label="dark" border>dark</el-radio>
-            </el-radio-group>
-        </el-form-item>
+    <!-- 布局设置表单标题 -->
+    <h2>布局设置</h2>
+    
+    <!-- 导航条类型设置项 -->
+    <el-form-item label="导航条类型">
+    <!-- 导航条类型选择框，使用 radio 按钮选择 'default' 或 'inverse' -->
+    <el-radio-group v-model="navbarLayoutType">
+    <el-radio label="default" border>default</el-radio>
+    <el-radio label="inverse" border>inverse</el-radio>
+    </el-radio-group>
+    </el-form-item>
+    
+    <!-- 侧边栏皮肤设置项 -->
+    <el-form-item label="侧边栏皮肤">
+    <!-- 侧边栏皮肤选择框，使用 radio 按钮选择 'light' 或 'dark' -->
+    <el-radio-group v-model="sidebarLayoutSkin">
+    <el-radio label="light" border>light</el-radio>
+    <el-radio label="dark" border>dark</el-radio>
+    </el-radio-group>
+    </el-form-item>
     </el-form>
-</template>
-
+    </template>
 <script>
 export default {
-    computed: {
-        navbarLayoutType: {
-            get() { return this.$store.state.common.navbarLayoutType },
-            set(val) { this.$store.commit('common/updateNavbarLayoutType', val) }
-        },
-        sidebarLayoutSkin: {
-            get() { return this.$store.state.common.sidebarLayoutSkin },
-            set(val) { this.$store.commit('common/updateSidebarLayoutSkin', val) }
-        }
-    }
+computed: {
+// 计算属性：获取并设置导航条类型
+navbarLayoutType: {
+// getter：从 Vuex 中获取 navbarLayoutType 的当前值
+get() { 
+return this.$store.state.common.navbarLayoutType 
+},
+// setter：将新的值提交到 Vuex 中，更新 navbarLayoutType
+set(val) { 
+this.$store.commit('common/updateNavbarLayoutType', val) 
+}
+},
+// 计算属性：获取并设置侧边栏皮肤
+sidebarLayoutSkin: {
+// getter：从 Vuex 中获取 sidebarLayoutSkin 的当前值
+get() { 
+return this.$store.state.common.sidebarLayoutSkin 
+},
+// setter：将新的值提交到 Vuex 中，更新 sidebarLayoutSkin
+set(val) { 
+this.$store.commit('common/updateSidebarLayoutSkin', val) 
+}
+}
+}
 }
 </script>
-
+    

src/views/modules/oss/oss-config.vue

@@ -1,127 +1,150 @@
 <template>
+    <!-- Dialog弹框，用于配置云存储 -->
     <el-dialog title="云存储配置" :close-on-click-modal="false" :visible.sync="visible">
-        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
-            <el-form-item size="mini" label="存储类型">
-                <el-radio-group v-model="dataForm.type">
-                    <el-radio :label="1">七牛</el-radio>
-                    <el-radio :label="2">阿里云</el-radio>
-                    <el-radio :label="3">腾讯云</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <template v-if="dataForm.type === 1">
-                <el-form-item label="域名">
-                    <el-input v-model="dataForm.qiniuDomain" placeholder="七牛绑定的域名"></el-input>
-                </el-form-item>
-                <el-form-item label="路径前缀">
-                    <el-input v-model="dataForm.qiniuPrefix" placeholder="不设置默认为空"></el-input>
-                </el-form-item>
-                <el-form-item label="AccessKey">
-                    <el-input v-model="dataForm.qiniuAccessKey" placeholder="七牛AccessKey"></el-input>
-                </el-form-item>
-                <el-form-item label="SecretKey">
-                    <el-input v-model="dataForm.qiniuSecretKey" placeholder="七牛SecretKey"></el-input>
-                </el-form-item>
-                <el-form-item label="空间名">
-                    <el-input v-model="dataForm.qiniuBucketName" placeholder="七牛存储空间名"></el-input>
-                </el-form-item>
-            </template>
-            <template v-else-if="dataForm.type === 2">
-                <el-form-item label="域名">
-                    <el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名"></el-input>
-                </el-form-item>
-                <el-form-item label="路径前缀">
-                    <el-input v-model="dataForm.aliyunPrefix" placeholder="不设置默认为空"></el-input>
-                </el-form-item>
-                <el-form-item label="EndPoint">
-                    <el-input v-model="dataForm.aliyunEndPoint" placeholder="阿里云EndPoint"></el-input>
-                </el-form-item>
-                <el-form-item label="AccessKeyId">
-                    <el-input v-model="dataForm.aliyunAccessKeyId" placeholder="阿里云AccessKeyId"></el-input>
-                </el-form-item>
-                <el-form-item label="AccessKeySecret">
-                    <el-input v-model="dataForm.aliyunAccessKeySecret" placeholder="阿里云AccessKeySecret"></el-input>
-                </el-form-item>
-                <el-form-item label="BucketName">
-                    <el-input v-model="dataForm.aliyunBucketName" placeholder="阿里云BucketName"></el-input>
-                </el-form-item>
-            </template>
-            <template v-else-if="dataForm.type === 3">
-                <el-form-item label="域名">
-                    <el-input v-model="dataForm.qcloudDomain" placeholder="腾讯云绑定的域名"></el-input>
-                </el-form-item>
-                <el-form-item label="路径前缀">
-                    <el-input v-model="dataForm.qcloudPrefix" placeholder="不设置默认为空"></el-input>
-                </el-form-item>
-                <el-form-item label="AppId">
-                    <el-input v-model="dataForm.qcloudAppId" placeholder="腾讯云AppId"></el-input>
-                </el-form-item>
-                <el-form-item label="SecretId">
-                    <el-input v-model="dataForm.qcloudSecretId" placeholder="腾讯云SecretId"></el-input>
-                </el-form-item>
-                <el-form-item label="SecretKey">
-                    <el-input v-model="dataForm.qcloudSecretKey" placeholder="腾讯云SecretKey"></el-input>
-                </el-form-item>
-                <el-form-item label="BucketName">
-                    <el-input v-model="dataForm.qcloudBucketName" placeholder="腾讯云BucketName"></el-input>
-                </el-form-item>
-                <el-form-item label="Bucket所属地区">
-                    <el-input v-model="dataForm.qcloudRegion" placeholder="如：sh（可选值 ，华南：gz 华北：tj 华东：sh）"></el-input>
-                </el-form-item>
-            </template>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="visible = false">取消</el-button>
-            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-        </span>
+    
+    <!-- 表单组件，model 绑定 dataForm，rules 绑定 dataRule -->
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="120px">
+    
+    <!-- 存储类型选择项 -->
+    <el-form-item size="mini" label="存储类型">
+    <el-radio-group v-model="dataForm.type">
+    <el-radio :label="1">七牛</el-radio>
+    <el-radio :label="2">阿里云</el-radio>
+    <el-radio :label="3">腾讯云</el-radio>
+    </el-radio-group>
+    </el-form-item>
+    
+    <!-- 当选择七牛云时显示七牛相关配置项 -->
+    <template v-if="dataForm.type === 1">
+    <el-form-item label="域名">
+    <el-input v-model="dataForm.qiniuDomain" placeholder="七牛绑定的域名"></el-input>
+    </el-form-item>
+    <el-form-item label="路径前缀">
+    <el-input v-model="dataForm.qiniuPrefix" placeholder="不设置默认为空"></el-input>
+    </el-form-item>
+    <el-form-item label="AccessKey">
+    <el-input v-model="dataForm.qiniuAccessKey" placeholder="七牛AccessKey"></el-input>
+    </el-form-item>
+    <el-form-item label="SecretKey">
+    <el-input v-model="dataForm.qiniuSecretKey" placeholder="七牛SecretKey"></el-input>
+    </el-form-item>
+    <el-form-item label="空间名">
+    <el-input v-model="dataForm.qiniuBucketName" placeholder="七牛存储空间名"></el-input>
+    </el-form-item>
+    </template>
+    
+    <!-- 当选择阿里云时显示阿里云相关配置项 -->
+    <template v-else-if="dataForm.type === 2">
+    <el-form-item label="域名">
+    <el-input v-model="dataForm.aliyunDomain" placeholder="阿里云绑定的域名"></el-input>
+    </el-form-item>
+    <el-form-item label="路径前缀">
+    <el-input v-model="dataForm.aliyunPrefix" placeholder="不设置默认为空"></el-input>
+    </el-form-item>
+    <el-form-item label="EndPoint">
+    <el-input v-model="dataForm.aliyunEndPoint" placeholder="阿里云EndPoint"></el-input>
+    </el-form-item>
+    <el-form-item label="AccessKeyId">
+    <el-input v-model="dataForm.aliyunAccessKeyId" placeholder="阿里云AccessKeyId"></el-input>
+    </el-form-item>
+    <el-form-item label="AccessKeySecret">
+    <el-input v-model="dataForm.aliyunAccessKeySecret" placeholder="阿里云AccessKeySecret"></el-input>
+    </el-form-item>
+    <el-form-item label="BucketName">
+    <el-input v-model="dataForm.aliyunBucketName" placeholder="阿里云BucketName"></el-input>
+    </el-form-item>
+    </template>
+    
+    <!-- 当选择腾讯云时显示腾讯云相关配置项 -->
+    <template v-else-if="dataForm.type === 3">
+    <el-form-item label="域名">
+    <el-input v-model="dataForm.qcloudDomain" placeholder="腾讯云绑定的域名"></el-input>
+    </el-form-item>
+    <el-form-item label="路径前缀">
+    <el-input v-model="dataForm.qcloudPrefix" placeholder="不设置默认为空"></el-input>
+    </el-form-item>
+    <el-form-item label="AppId">
+    <el-input v-model="dataForm.qcloudAppId" placeholder="腾讯云AppId"></el-input>
+    </el-form-item>
+    <el-form-item label="SecretId">
+    <el-input v-model="dataForm.qcloudSecretId" placeholder="腾讯云SecretId"></el-input>
+    </el-form-item>
+    <el-form-item label="SecretKey">
+    <el-input v-model="dataForm.qcloudSecretKey" placeholder="腾讯云SecretKey"></el-input>
+    </el-form-item>
+    <el-form-item label="BucketName">
+    <el-input v-model="dataForm.qcloudBucketName" placeholder="腾讯云BucketName"></el-input>
+    </el-form-item>
+    <el-form-item label="Bucket所属地区">
+    <el-input v-model="dataForm.qcloudRegion" placeholder="如：sh（可选值 ，华南：gz 华北：tj 华东：sh）"></el-input>
+    </el-form-item>
+    </template>
+    </el-form>
+    
+    <!-- 弹窗底部按钮 -->
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="visible = false">取消</el-button>
+    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
     </el-dialog>
-</template>
-
+    </template>
 <script>
 export default {
-    data() {
-        return {
-            visible: false,
-            dataForm: {},
-            dataRule: {}
-        }
-    },
-    methods: {
-        init(id) {
-            this.visible = true
-            this.$http({
-                url: this.$http.adornUrl('/sys/oss/config'),
-                method: 'get',
-                params: this.$http.adornParams()
-            }).then(({ data }) => {
-                this.dataForm = data && data.code === 200 ? data.config : []
-            })
-        },
-        // 表单提交
-        dataFormSubmit() {
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    this.$http({
-                        url: this.$http.adornUrl('/sys/oss/saveConfig'),
-                        method: 'post',
-                        data: this.$http.adornData(this.dataForm)
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.$message({
-                                message: '操作成功',
-                                type: 'success',
-                                duration: 1500,
-                                onClose: () => {
-                                    this.visible = false
-                                }
-                            })
-                        } else {
-                            this.$message.error(data.msg)
-                        }
-                    })
-                }
-            })
-        }
-    }
+// 定义组件的数据
+data() {
+return {
+// 控制弹框显示/隐藏
+visible: false,
+// 存储表单数据
+dataForm: {},
+// 存储表单验证规则
+dataRule: {}
+}
+},
+methods: {
+// 初始化方法，用于根据 id 获取配置
+init(id) {
+this.visible = true // 显示弹框
+// 发送请求获取存储配置
+this.$http({
+url: this.$http.adornUrl('/sys/oss/config'), // 请求路径
+method: 'get', // GET 请求
+params: this.$http.adornParams() // 参数
+}).then(({ data }) => {
+// 如果获取成功，则填充表单数据
+this.dataForm = data && data.code === 200 ? data.config : []
+})
+},
+// 表单提交方法
+dataFormSubmit() {
+// 验证表单是否有效
+this.$refs['dataForm'].validate((valid) => {
+if (valid) {
+// 提交表单数据
+this.$http({
+url: this.$http.adornUrl('/sys/oss/saveConfig'), // 请求保存配置
+method: 'post', // POST 请求
+data: this.$http.adornData(this.dataForm) // 提交表单数据
+}).then(({ data }) => {
+if (data && data.code === 200) {
+// 如果操作成功，显示成功提示并关闭弹框
+this.$message({
+message: '操作成功',
+type: 'success',
+duration: 1500,
+onClose: () => {
+this.visible = false // 关闭弹框
+}
+})
+} else {
+// 显示错误信息
+this.$message.error(data.msg)
+}
+})
+}
+})
+}
+}
 }
 </script>
-
+    

src/views/modules/oss/oss-uploader-tencent.vue

@@ -1,87 +1,105 @@
 <template>
-    <div @click="selectFile">
-        <input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
-        <div>{{uploading?infoText:'上传文件'}}</div>
-    </div>
-</template>
-
-<script>
-	// 腾讯云对象存储组件，文件直接上传到腾讯云，可在后端服务无对应外网权限时使用
-	// 使用本组件需引入腾讯云对象存储依赖 <script src="https://unpkg.com/cos-js-sdk-v5@0.5.23/dist/cos-js-sdk-v5.min.js" async></script>
+	<!-- 触发文件选择的区域，点击时触发 selectFile 方法 -->
+	<div @click="selectFile">
+	<!-- 隐藏的文件输入框，通过 click 触发文件选择 -->
+	<input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
+	<!-- 显示上传状态文本，如果正在上传则显示 infoText，否则显示 "上传文件" -->
+	<div>{{uploading ? infoText : '上传文件'}}</div>
+	</div>
+	</template>
+	
+	<script>
+	// 腾讯云对象存储组件，允许文件直接上传到腾讯云，适合后端没有外网权限时使用
+	// 使用本组件时需引入腾讯云对象存储 SDK，具体请参考：https://unpkg.com/cos-js-sdk-v5@0.5.23/dist/cos-js-sdk-v5.min.js
 	var cos;
 	export default {
-		name: "oss-uploader",
-		data() {
-			return {
-				uploading: false,
-				infoText:"上传中...",
-				cosConfig:[]
-			}
-		},
-		mounted(){
-			this.$http({
-				url: this.$http.adornUrl('/sys/oss/config'),
-				method: 'get',
-				params: this.$http.adornParams()
-			}).then(({data}) => {
-				if(data && data.code === 200){
-					this.cosConfig =  data.config
-					cos=new COS({
-						SecretId: data.config.qcloudSecretId,
-						SecretKey: data.config.qcloudSecretKey,
-					});
-				}else{
-					this.$message.error('请先配置云存储相关信息！')
-				}
-				
-			})
-		},
-		methods: {
-			selectFile() {//选择文件
-				if (!this.uploading) {
-					this.$refs.fileInput.click();
-				}
-			},
-			onFileChange() {
-				let file = this.$refs.fileInput.files[0];
-				this.uploading = true;
-				let now = new Date();
-				let path=now.toISOString().slice(0,10)+'/'+now.getTime()+file.name.substr(file.name.lastIndexOf('.'))
-				cos.putObject({
-					Bucket: this.cosConfig.qcloudBucketName, /* 必须 */
-					Region: this.cosConfig.qcloudRegion,    /* 必须 */
-					Key: path,              /* 必须 */
-					Body: file, // 上传文件对象
-					onProgress: (progressData)=> {
-						this.infoText='上传中：'+progressData.percent*100+'%'
-					}
-				}, (err, data)=> {
-					console.log(err || data);
-					this.uploading = false;
-					if(data){
-						this.infoText='上传文件'
-						let fileUrl='https://'+this.cosConfig.qcloudBucketName+'.cos.'+this.cosConfig.qcloudRegion+'.myqcloud.com/'+path;
-						this.saveUploadResult(fileUrl)
-					}else {
-						this.$message.error('文件上传失败',err)
-					}
-
-				});
-			},
-			saveUploadResult(url){
-				this.$http({
-					url: this.$http.adornUrl('/sys/oss/upload'),
-					method: 'post',
-					data:{
-						url:url
-					}
-				}).then(({data})=>{
-					this.$emit('uploaded', url)
-				})
-			}
-		}
+	name: "oss-uploader", // 组件名称
+	data() {
+	return {
+	uploading: false, // 上传状态，默认未上传
+	infoText: "上传中...", // 上传中显示的提示文本
+	cosConfig: [] // 腾讯云 COS 配置数据
 	}
-</script>
-
-<style scoped>
-</style>
+	},
+	mounted() {
+	// 组件加载完毕后，发起请求获取 COS 配置数据
+	this.$http({
+	url: this.$http.adornUrl('/sys/oss/config'),
+	method: 'get',
+	params: this.$http.adornParams() // 传递请求参数
+	}).then(({ data }) => {
+	if (data && data.code === 200) {
+	// 如果获取成功，保存配置数据
+	this.cosConfig = data.config;
+	// 初始化腾讯云 COS 实例
+	cos = new COS({
+	SecretId: data.config.qcloudSecretId,
+	SecretKey: data.config.qcloudSecretKey,
+	});
+	} else {
+	// 配置获取失败，提示错误信息
+	this.$message.error('请先配置云存储相关信息！');
+	}
+	})
+	},
+	methods: {
+	// 选择文件的方法
+	selectFile() {
+	// 如果当前没有文件正在上传，点击触发文件选择框
+	if (!this.uploading) {
+	this.$refs.fileInput.click();
+	}
+	},
+	// 文件选择后触发的回调方法
+	onFileChange() {
+	let file = this.$refs.fileInput.files[0]; // 获取选中的文件
+	this.uploading = true; // 设置上传状态为 true
+	let now = new Date();
+	// 生成上传文件的存储路径（包括日期和时间戳确保路径唯一）
+	let path = now.toISOString().slice(0, 10) + '/' + now.getTime() + file.name.substr(file.name.lastIndexOf('.'));
+	
+	// 调用腾讯云 COS 上传文件方法
+	cos.putObject({
+	Bucket: this.cosConfig.qcloudBucketName, // 必须指定的桶名称
+	Region: this.cosConfig.qcloudRegion, // 必须指定的区域
+	Key: path, // 文件存储路径（文件名）
+	Body: file, // 上传的文件对象
+	onProgress: (progressData) => { // 上传进度回调
+	// 更新上传进度提示文本
+	this.infoText = '上传中：' + (progressData.percent * 100).toFixed(2) + '%';
+	}
+	}, (err, data) => {
+	// 上传完成后回调，处理成功和失败的情况
+	console.log(err || data);
+	this.uploading = false; // 上传状态恢复为 false
+	if (data) {
+	// 上传成功，更新提示文本
+	this.infoText = '上传文件';
+	// 生成文件访问的 URL
+	let fileUrl = 'https://' + this.cosConfig.qcloudBucketName + '.cos.' + this.cosConfig.qcloudRegion + '.myqcloud.com/' + path;
+	this.saveUploadResult(fileUrl); // 保存上传结果
+	} else {
+	// 上传失败，显示错误消息
+	this.$message.error('文件上传失败', err);
+	}
+	});
+	},
+	// 保存上传结果（上传成功后调用，传入文件的访问 URL）
+	saveUploadResult(url) {
+	this.$http({
+	url: this.$http.adornUrl('/sys/oss/upload'),
+	method: 'post',
+	data: { url: url } // 将上传的文件 URL 传给服务器
+	}).then(({ data }) => {
+	// 上传成功后，触发 `uploaded` 事件，将文件 URL 传递给父组件
+	this.$emit('uploaded', url);
+	})
+	}
+	}
+	}
+	</script>
+	
+	<style scoped>
+	/* 样式部分为空 */
+	</style>
+	

src/views/modules/oss/oss-uploader.vue

@@ -1,59 +1,73 @@
 <template>
+    <!-- 点击外部div触发文件选择操作 -->
     <div @click="selectFile">
-        <input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
-        <div>{{uploading?infoText:'上传文件'}}</div>
+    <!-- 隐藏的文件上传input，选择文件后触发onFileChange方法 -->
+    <input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
+    <!-- 显示上传中的状态或默认的“上传文件”文本 -->
+    <div>{{uploading ? infoText : '上传文件'}}</div>
     </div>
-</template>
-
-<script>
-export default {
-    name: "oss-uploader",
+    </template>
+    
+    <script>
+    export default {
+    name: "oss-uploader", // 组件名称为 "oss-uploader"
     data() {
-        return {
-            uploading: false,
-            infoText: "上传中...",
-            cosConfig: []
-        }
+    return {
+    uploading: false, // 上传状态，默认为false
+    infoText: "上传中...", // 上传中文本，上传中时显示此文本
+    cosConfig: [] // 存储云存储配置
+    }
     },
     mounted() {
-        this.$http({
-            url: this.$http.adornUrl('/sys/oss/config'),
-            method: 'get',
-            params: this.$http.adornParams()
-        }).then(({ data }) => {
-            if (data && data.code === 200 && data.config.type) {
-                this.cosConfig = data.config
-            } else {
-                this.$message.error('请先配置云存储相关信息！')
-            }
-
-        })
+    // 组件挂载后请求获取云存储的配置
+    this.$http({
+    url: this.$http.adornUrl('/sys/oss/config'), // 获取配置的API接口
+    method: 'get', // 使用GET请求
+    params: this.$http.adornParams() // 请求参数
+    }).then(({ data }) => {
+    // 请求成功后处理返回数据
+    if (data && data.code === 200 && data.config.type) {
+    this.cosConfig = data.config // 设置云存储配置
+    } else {
+    // 如果配置不存在，弹出错误提示
+    this.$message.error('请先配置云存储相关信息！')
+    }
+    })
     },
     methods: {
-        selectFile() {//选择文件
-            if (!this.uploading) {
-                this.$refs.fileInput.click();
-            }
-        },
-        onFileChange() {
-            let file = this.$refs.fileInput.files[0];
-            this.uploading = true;
-            let formData = new FormData();
-            formData.append("file", file)
-            this.$http({
-                url: this.$http.adornUrl('/sys/oss/upload'),
-                method: 'post',
-                data: formData
-            }).then(({ data }) => {
-                console.log(data)
-                if (data && data.code === 200) {
-                    this.$emit('uploaded', data.url)
-                } else {
-                    this.$message.error("文件上传失败：" + data.msg)
-                }
-                this.uploading = false;
-            })
-        }
+    // 选择文件的事件处理函数
+    selectFile() {
+    if (!this.uploading) {
+    // 如果当前不是上传中状态，则模拟点击隐藏的input元素，打开文件选择框
+    this.$refs.fileInput.click();
+    }
+    },
+    // 文件选择后触发的事件处理函数
+    onFileChange() {
+    let file = this.$refs.fileInput.files[0]; // 获取文件对象
+    this.uploading = true; // 设置上传状态为true，表示正在上传
+    let formData = new FormData();
+    formData.append("file", file); // 将文件添加到formData对象中
+    
+    // 发起POST请求上传文件
+    this.$http({
+    url: this.$http.adornUrl('/sys/oss/upload'), // 上传文件的API接口
+    method: 'post', // 使用POST请求
+    data: formData // 上传的文件数据
+    }).then(({ data }) => {
+    // 请求成功后处理返回的数据
+    console.log(data); // 输出返回的数据，便于调试
+    if (data && data.code === 200) {
+    // 上传成功，触发父组件的'uploaded'事件，传递上传后的文件url
+    this.$emit('uploaded', data.url)
+    } else {
+    // 上传失败，弹出错误提示，显示错误信息
+    this.$message.error("文件上传失败：" + data.msg)
+    }
+    this.uploading = false; // 上传完成，设置上传状态为false
+    })
+    }
+    }
     }
-}
-</script>
+    </script>
+    

src/views/modules/oss/oss.vue

@@ -39,108 +39,79 @@
 
 <script>
 export default {
-    data() {
-        return {
-            dataForm: {},
-            dataList: [],
-            pageIndex: 1,
-            pageSize: 10,
-            totalCount: 0,
-            dataListLoading: false,
-            dataListSelections: [],
-            configVisible: false,
-            uploadVisible: false
-        }
-    },
-    components: {
-        Config: () => import('./oss-config'),
-        OssUploader: () => import('./oss-uploader')
-    },
-    activated() {
-        this.getDataList()
-    },
-    methods: {
-        // 获取数据列表
-        getDataList() {
-            this.dataListLoading = true
-            this.$http({
-                url: this.$http.adornUrl('/sys/oss/list'),
-                method: 'get',
-                params: this.$http.adornParams({
-                    'page': this.pageIndex,
-                    'limit': this.pageSize,
-                    'sidx': 'id',
-                    'order': 'desc'
-                })
-            }).then(({ data }) => {
-                if (data && data.code === 200) {
-                    this.dataList = data.page.list
-                    this.totalCount = data.page.totalCount
-                } else {
-                    this.dataList = []
-                    this.totalCount = 0
-                }
-                this.dataListLoading = false
-            })
-        },
-        // 每页数
-        sizeChangeHandle(val) {
-            this.pageSize = val
-            this.pageIndex = 1
-            this.getDataList()
-        },
-        // 当前页
-        currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
-        },
-        // 多选
-        selectionChangeHandle(val) {
-            this.dataListSelections = val
-        },
-        // 云存储配置
-        configHandle() {
-            this.configVisible = true
-            this.$nextTick(() => {
-                this.$refs.config.init()
-            })
-        },
-        // 上传文件
-        uploadHandle() {
-            this.uploadVisible = true
-            this.$nextTick(() => {
-                this.$refs.upload.init()
-            })
-        },
-        // 删除
-        deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.id)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-                this.$http({
-                    url: this.$http.adornUrl('/sys/oss/delete'),
-                    method: 'post',
-                    data: this.$http.adornData(ids, false)
-                }).then(({ data }) => {
-                    if (data && data.code === 200) {
-                        this.$message({
-                            message: '操作成功',
-                            type: 'success',
-                            duration: 1500,
-                            onClose: () => this.getDataList()
-                        })
-                    } else {
-                        this.$message.error(data.msg)
-                    }
-                })
-            }).catch(() => { })
-        },
-        isImageUrl(url) {
-            return url && /.*\.(gif|jpg|jpeg|png|GIF|JPEG|JPG|PNG)/.test(url)
-        }
-    }
+data() {
+return {
+// 表单数据模型
+dataForm: {},
+// 文件列表数据
+dataList: [],
+// 当前页码
+pageIndex: 1,
+// 每页显示数量
+pageSize: 10,
+// 总记录数
+totalCount: 0,
+// 表格加载状态
+dataListLoading: false,
+// 存储已选中项
+dataListSelections: [],
+// 云存储配置弹窗是否显示
+configVisible: false,
+// 上传文件弹窗是否显示
+uploadVisible: false
+}
+},
+components: {
+// 动态引入云存储配置组件
+Config: () => import('./oss-config'),
+// 动态引入文件上传组件
+OssUploader: () => import('./oss-uploader')
+},
+// 组件激活时加载数据列表
+activated() {
+this.getDataList();
+},
+methods: {
+// 获取数据列表
+getDataList() {
+this.dataListLoading = true;
+this.$http({
+url: this.$http.adornUrl('/sys/oss/list'),
+method: 'get',
+params: this.$http.adornParams({
+'page': this.pageIndex, // 当前页
+'limit': this.pageSize, // 每页条数
+'sidx': 'id', // 排序字段
+'order': 'desc' // 排序方式
+})
+}).then(({ data }) => {
+// 如果请求成功，设置dataList和totalCount
+if (data && data.code === 200) {
+this.dataList = data.page.list;
+this.totalCount = data.page.totalCount;
+} else {
+// 如果请求失败，清空列表
+this.dataList = [];
+this.totalCount = 0;
+}
+this.dataListLoading = false; // 隐藏加载状态
+});
+},
+// 改变每页显示的数量时触发
+sizeChangeHandle(val) {
+this.pageSize = val;
+this.pageIndex = 1; // 重置为第一页
+this.getDataList(); // 重新获取数据
+},
+// 改变当前页时触发
+currentChangeHandle(val) {
+this.pageIndex = val;
+this.getDataList(); // 重新获取数据
+},
+// 多选时，记录选中的项
+selectionChangeHandle(val) {
+this.dataListSelections = val;
+},
+}
 }
 </script>

src/views/modules/sys/config-add-or-update.vue

@@ -1,96 +1,117 @@
 <template>
     <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
-        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-            <el-form-item label="参数名" prop="paramKey">
-                <el-input v-model="dataForm.paramKey" placeholder="参数名"></el-input>
-            </el-form-item>
-            <el-form-item label="参数值" prop="paramValue">
-                <el-input v-model="dataForm.paramValue" placeholder="参数值"></el-input>
-            </el-form-item>
-            <el-form-item label="备注" prop="remark">
-                <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
-            </el-form-item>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="visible = false">取消</el-button>
-            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-        </span>
-    </el-dialog>
+<!-- 弹窗组件，显示标题是“新增”或“修改”取决于dataForm.id -->
+<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+<!-- 表单组件，绑定数据模型为dataForm，表单校验规则为dataRule，按回车键提交表单 -->
+
+<el-form-item label="参数名" prop="paramKey">
+<!-- 参数名输入框，验证参数名 -->
+<el-input v-model="dataForm.paramKey" placeholder="参数名"></el-input>
+</el-form-item>
+
+<el-form-item label="参数值" prop="paramValue">
+<!-- 参数值输入框，验证参数值 -->
+<el-input v-model="dataForm.paramValue" placeholder="参数值"></el-input>
+</el-form-item>
+
+<el-form-item label="备注" prop="remark">
+<!-- 备注输入框 -->
+<el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+</el-form-item>
+
+</el-form>
+
+<span slot="footer" class="dialog-footer">
+<!-- 弹窗底部按钮 -->
+<el-button @click="visible = false">取消</el-button>
+<!-- 取消按钮，点击时关闭弹窗 -->
+<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+<!-- 确定按钮，点击时提交表单 -->
+</span>
+</el-dialog>
+
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            visible: false,
-            dataForm: {
-                id: 0,
-                paramKey: '',
-                paramValue: '',
-                remark: ''
-            },
-            dataRule: {
-                paramKey: [
-                    { required: true, message: '参数名不能为空', trigger: 'blur' }
-                ],
-                paramValue: [
-                    { required: true, message: '参数值不能为空', trigger: 'blur' }
-                ]
-            }
-        }
-    },
-    methods: {
-        init(id) {
-            this.dataForm.id = id || 0
-            this.visible = true
-            this.$nextTick(() => {
-                this.$refs['dataForm'].resetFields()
-                if (this.dataForm.id) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
-                        method: 'get',
-                        params: this.$http.adornParams()
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.dataForm.paramKey = data.config.paramKey
-                            this.dataForm.paramValue = data.config.paramValue
-                            this.dataForm.remark = data.config.remark
-                        }
-                    })
-                }
-            })
-        },
-        // 表单提交
-        dataFormSubmit() {
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/sys/config/${!this.dataForm.id ? 'save' : 'update'}`),
-                        method: 'post',
-                        data: this.$http.adornData({
-                            'id': this.dataForm.id || undefined,
-                            'paramKey': this.dataForm.paramKey,
-                            'paramValue': this.dataForm.paramValue,
-                            'remark': this.dataForm.remark
-                        })
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.$message({
-                                message: '操作成功',
-                                type: 'success',
-                                duration: 1500,
-                                onClose: () => {
-                                    this.visible = false
-                                    this.$emit('refreshDataList')
-                                }
-                            })
-                        } else {
-                            this.$message.error(data.msg)
-                        }
-                    })
-                }
-            })
-        }
-    }
+data() {
+return {
+visible: false, // 控制弹窗的显示与隐藏
+dataForm: {
+id: 0, // 数据表单的ID，新增时为0，修改时为已有的ID
+paramKey: '', // 参数名
+paramValue: '',// 参数值
+remark: '' // 备注
+},
+dataRule: {
+paramKey: [
+{ required: true, message: '参数名不能为空', trigger: 'blur' }
+],
+paramValue: [
+{ required: true, message: '参数值不能为空', trigger: 'blur' }
+]
+}
+}
+},
+methods: {
+// 初始化表单，设置ID并请求数据（如果是编辑状态）
+init(id) {
+this.dataForm.id = id || 0
+this.visible = true
+this.$nextTick(() => {
+this.$refs['dataForm'].resetFields() // 重置表单字段
+if (this.dataForm.id) {
+// 如果是编辑，发送请求获取已有数据
+this.$http({
+url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
+method: 'get',
+params: this.$http.adornParams()
+}).then(({ data }) => {
+if (data && data.code === 200) {
+this.dataForm.paramKey = data.config.paramKey
+this.dataForm.paramValue = data.config.paramValue
+this.dataForm.remark = data.config.remark
 }
+})
+}
+})
+},
+// 表单提交方法
+dataFormSubmit() {
+// 验证表单是否合法
+this.$refs['dataForm'].validate((valid) => {
+if (valid) {
+// 请求提交数据
+this.$http({
+url: this.$http.adornUrl(`/sys/config/${!this.dataForm.id ? 'save' : 'update'}`),
+method: 'post',
+data: this.$http.adornData({
+'id': this.dataForm.id || undefined, // 如果是编辑，传ID；如果是新增，ID为空
+'paramKey': this.dataForm.paramKey,
+'paramValue': this.dataForm.paramValue,
+'remark': this.dataForm.remark
+})
+}).then(({ data }) => {
+if (data && data.code === 200) {
+// 操作成功，显示成功消息并关闭弹窗
+this.$message({
+message: '操作成功',
+type: 'success',
+duration: 1500,
+onClose: () => {
+this.visible = false
+this.$emit('refreshDataList') // 向父组件发送刷新数据的事件
+}
+})
+} else {
+// 显示错误消息
+this.$message.error(data.msg)
+}
+})
+}
+})
+}
+}
+}
+
 </script>

src/views/modules/sys/config.vue

@@ -1,134 +1,172 @@
 <template>
     <div class="mod-config">
-        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-            <el-form-item>
-                <el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="getDataList()">查询</el-button>
-                <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
-                <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
-            </el-form-item>
-        </el-form>
-        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
-            <el-table-column type="selection" header-align="center" align="center" width="50">
-            </el-table-column>
-            <el-table-column prop="id" header-align="center" align="center" width="80" label="ID">
-            </el-table-column>
-            <el-table-column prop="paramKey" header-align="center" align="center" label="参数名">
-            </el-table-column>
-            <el-table-column prop="paramValue" header-align="center" align="center" label="参数值">
-            </el-table-column>
-            <el-table-column prop="remark" header-align="center" align="center" label="备注">
-            </el-table-column>
-            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
-                <template slot-scope="scope">
-                    <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
-                    <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</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="totalCount" layout="total, sizes, prev, pager, next, jumper">
-        </el-pagination>
-        <!-- 弹窗, 新增 / 修改 -->
-        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
-    </div>
+<!-- 表单部分，包含参数名的查询框和操作按钮 -->
+<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+<!-- 表单项，使用 inline 布局，按回车触发查询 -->
+<el-form-item>
+<el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
+<!-- 输入框，绑定 model 为 dataForm.paramKey，允许清除内容 -->
+</el-form-item>
+<el-form-item>
+<!-- 查询按钮，点击时触发 getDataList 方法 -->
+<el-button @click="getDataList()">查询</el-button>
+<!-- 新增按钮，点击时触发 addOrUpdateHandle 方法 -->
+<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
+<!-- 批量删除按钮，点击时触发 deleteHandle 方法，只有当有选中的数据时可用 -->
+<el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+</el-form-item>
+</el-form>
+
+<!-- 表格部分，用于显示数据列表 -->
+<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+<!-- 多选列 -->
+<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
+
+<!-- ID列 -->
+<el-table-column prop="id" header-align="center" align="center" width="80" label="ID"></el-table-column>
+
+<!-- 参数名列 -->
+<el-table-column prop="paramKey" header-align="center" align="center" label="参数名"></el-table-column>
+
+<!-- 参数值列 -->
+<el-table-column prop="paramValue" header-align="center" align="center" label="参数值"></el-table-column>
+
+<!-- 备注列 -->
+<el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>
+
+<!-- 操作列，包含修改和删除按钮 -->
+<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+<template slot-scope="scope">
+<!-- 修改按钮，点击时触发 addOrUpdateHandle 方法，传入当前行的 id -->
+<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+<!-- 删除按钮，点击时触发 deleteHandle 方法，传入当前行的 id -->
+<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</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="totalCount" layout="total, sizes, prev, pager, next, jumper">
+</el-pagination>
+
+<!-- 弹窗组件，用于新增或修改数据 -->
+<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+</div>
+
 </template>
 
 <script>
 import AddOrUpdate from './config-add-or-update'
+
 export default {
-    data() {
-        return {
-            dataForm: {
-                paramKey: ''
-            },
-            dataList: [],
-            pageIndex: 1,
-            pageSize: 10,
-            totalCount: 0,
-            dataListLoading: false,
-            dataListSelections: [],
-            addOrUpdateVisible: false
-        }
-    },
-    components: {
-        AddOrUpdate
-    },
-    activated() {
-        this.getDataList()
-    },
-    methods: {
-        // 获取数据列表
-        getDataList() {
-            this.dataListLoading = true
-            this.$http({
-                url: this.$http.adornUrl('/sys/config/list'),
-                method: 'get',
-                params: this.$http.adornParams({
-                    'page': this.pageIndex,
-                    'limit': this.pageSize,
-                    'paramKey': this.dataForm.paramKey
-                })
-            }).then(({ data }) => {
-                if (data && data.code === 200) {
-                    this.dataList = data.page.list
-                    this.totalCount = data.page.totalCount
-                } else {
-                    this.dataList = []
-                    this.totalCount = 0
-                }
-                this.dataListLoading = false
-            })
-        },
-        // 每页数
-        sizeChangeHandle(val) {
-            this.pageSize = val
-            this.pageIndex = 1
-            this.getDataList()
-        },
-        // 当前页
-        currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
-        },
-        // 多选
-        selectionChangeHandle(val) {
-            this.dataListSelections = val
-        },
-        // 新增 / 修改
-        addOrUpdateHandle(id) {
-            this.addOrUpdateVisible = true
-            this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(id)
-            })
-        },
-        // 删除
-        deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.id)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-                this.$http({
-                    url: this.$http.adornUrl('/sys/config/delete'),
-                    method: 'post',
-                    data: this.$http.adornData(ids, false)
-                }).then(({ data }) => {
-                    if (data && data.code === 200) {
-                        this.$message({
-                            message: '操作成功',
-                            type: 'success',
-                            duration: 1500,
-                            onClose: () => this.getDataList()
-                        })
-                    } else {
-                        this.$message.error(data.msg)
-                    }
-                })
-            }).catch(() => { })
-        }
-    }
+data() {
+return {
+// 表单数据
+dataForm: {
+paramKey: ''
+},
+// 数据列表
+dataList: [],
+// 当前页
+pageIndex: 1,
+// 每页显示条数
+pageSize: 10,
+// 总数据条数
+totalCount: 0,
+// 数据加载状态
+dataListLoading: false,
+// 表格选中的数据
+dataListSelections: [],
+// 新增/修改弹窗是否可见
+addOrUpdateVisible: false
 }
+},
+components: {
+AddOrUpdate
+},
+activated() {
+// 组件激活时，初始化数据列表
+this.getDataList()
+},
+methods: {
+// 获取数据列表
+getDataList() {
+this.dataListLoading = true
+this.$http({
+url: this.$http.adornUrl('/sys/config/list'),
+method: 'get',
+params: this.$http.adornParams({
+'page': this.pageIndex,
+'limit': this.pageSize,
+'paramKey': this.dataForm.paramKey
+})
+}).then(({ data }) => {
+if (data && data.code === 200) {
+this.dataList = data.page.list
+this.totalCount = data.page.totalCount
+} else {
+this.dataList = []
+this.totalCount = 0
+}
+this.dataListLoading = false
+})
+},
+
+// 每页显示条数变化时的处理
+sizeChangeHandle(val) {
+this.pageSize = val
+this.pageIndex = 1
+this.getDataList()
+},
+
+// 当前页变化时的处理
+currentChangeHandle(val) {
+this.pageIndex = val
+this.getDataList()
+},
+
+// 表格选中项变化时的处理
+selectionChangeHandle(val) {
+this.dataListSelections = val
+},
+
+// 新增/修改处理
+addOrUpdateHandle(id) {
+this.addOrUpdateVisible = true
+this.$nextTick(() => {
+// 弹窗显示时，初始化新增/修改数据
+this.$refs.addOrUpdate.init(id)
+})
+},
+
+// 删除操作
+deleteHandle(id) {
+var ids = id ? [id] : this.dataListSelections.map(item => item.id)
+// 弹窗确认删除
+this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+confirmButtonText: '确定',
+cancelButtonText: '取消',
+type: 'warning'
+}).then(() => {
+this.$http({
+url: this.$http.adornUrl('/sys/config/delete'),
+method: 'post',
+data: this.$http.adornData(ids, false)
+}).then(({ data }) => {
+if (data && data.code === 200) {
+this.$message({
+message: '操作成功',
+type: 'success',
+duration: 1500,
+onClose: () => this.getDataList()
+})
+} else {
+this.$message.error(data.msg)
+}
+})
+}).catch(() => { })
+}
+}
+}
+
 </script>

src/views/modules/sys/log.vue

@@ -1,90 +1,107 @@
 <template>
     <div class="mod-log">
-        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-            <el-form-item>
-                <el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="getDataList()">查询</el-button>
-            </el-form-item>
-        </el-form>
-        <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%">
-            <el-table-column prop="id" header-align="center" align="center" width="80" label="ID">
-            </el-table-column>
-            <el-table-column prop="username" header-align="center" align="center" label="用户名">
-            </el-table-column>
-            <el-table-column prop="operation" header-align="center" align="center" label="用户操作">
-            </el-table-column>
-            <el-table-column prop="method" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="请求方法">
-            </el-table-column>
-            <el-table-column prop="params" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="请求参数">
-            </el-table-column>
-            <el-table-column prop="time" header-align="center" align="center" label="执行时长(毫秒)">
-            </el-table-column>
-            <el-table-column prop="ip" header-align="center" align="center" width="150" label="IP地址">
-            </el-table-column>
-            <el-table-column prop="createDate" header-align="center" align="center" width="180" label="创建时间">
-            </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="totalCount" layout="total, sizes, prev, pager, next, jumper">
-        </el-pagination>
-    </div>
+<!-- 搜索表单部分 -->
+<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+<!-- 输入框，绑定到 dataForm.key，用于搜索用户操作或者用户名 -->
+<el-form-item>
+<el-input v-model="dataForm.key" placeholder="用户名／用户操作" clearable></el-input>
+</el-form-item>
+<el-form-item>
+<!-- 查询按钮，点击时触发 getDataList 方法 -->
+<el-button @click="getDataList()">查询</el-button>
+</el-form-item>
+</el-form>
+
+<!-- 表格显示数据 -->
+<el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%">
+<!-- 表格的列定义 -->
+<el-table-column prop="id" header-align="center" align="center" width="80" label="ID"></el-table-column>
+<el-table-column prop="username" header-align="center" align="center" label="用户名"></el-table-column>
+<el-table-column prop="operation" header-align="center" align="center" label="用户操作"></el-table-column>
+<el-table-column prop="method" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="请求方法"></el-table-column>
+<el-table-column prop="params" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="请求参数"></el-table-column>
+<el-table-column prop="time" header-align="center" align="center" label="执行时长(毫秒)"></el-table-column>
+<el-table-column prop="ip" header-align="center" align="center" width="150" label="IP地址"></el-table-column>
+<el-table-column prop="createDate" header-align="center" align="center" width="180" label="创建时间"></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="totalCount" layout="total, sizes, prev, pager, next, jumper">
+</el-pagination>
+</div>
+
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-            dataForm: {
-                key: ''
-            },
-            dataList: [],
-            pageIndex: 1,
-            pageSize: 10,
-            totalCount: 0,
-            dataListLoading: false,
-            selectionDataList: []
-        }
-    },
-    created() {
-        this.getDataList()
-    },
-    methods: {
-        // 获取数据列表
-        getDataList() {
-            this.dataListLoading = true
-            this.$http({
-                url: this.$http.adornUrl('/sys/log/list'),
-                method: 'get',
-                params: this.$http.adornParams({
-                    'page': this.pageIndex,
-                    'limit': this.pageSize,
-                    'key': this.dataForm.key,
-                    'sidx': 'id',
-                    'order': 'desc'
-                })
-            }).then(({ data }) => {
-                if (data && data.code === 200) {
-                    this.dataList = data.page.list
-                    this.totalCount = data.page.totalCount
-                } else {
-                    this.dataList = []
-                    this.totalCount = 0
-                }
-                this.dataListLoading = false
-            })
-        },
-        // 每页数
-        sizeChangeHandle(val) {
-            this.pageSize = val
-            this.pageIndex = 1
-            this.getDataList()
-        },
-        // 当前页
-        currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
-        }
-    }
+data() {
+return {
+// 表单数据，包含一个搜索条件 'key'
+dataForm: {
+key: ''
+},
+// 数据列表，存储表格数据
+dataList: [],
+// 当前页
+pageIndex: 1,
+// 每页显示的数据条数
+pageSize: 10,
+// 总数据条数
+totalCount: 0,
+// 数据加载状态
+dataListLoading: false,
+// 选中的数据（当前表格中未使用）
+selectionDataList: []
+}
+},
+created() {
+// 组件创建时，获取数据列表
+this.getDataList()
+},
+methods: {
+// 获取数据列表
+getDataList() {
+// 启动加载状态
+this.dataListLoading = true
+this.$http({
+url: this.$http.adornUrl('/sys/log/list'), // 请求日志列表接口
+method: 'get',
+params: this.$http.adornParams({
+// 请求参数，包含分页、搜索关键字、排序字段、排序方式等
+'page': this.pageIndex,
+'limit': this.pageSize,
+'key': this.dataForm.key, // 搜索条件
+'sidx': 'id', // 排序字段，按照 id 排序
+'order': 'desc' // 排序方式，降序
+})
+}).then(({ data }) => {
+// 处理返回的数据
+if (data && data.code === 200) {
+this.dataList = data.page.list // 数据列表
+this.totalCount = data.page.totalCount // 总条数
+} else {
+// 如果返回数据无效，清空数据和总数
+this.dataList = []
+this.totalCount = 0
+}
+// 完成加载
+this.dataListLoading = false
+})
+},
+
+// 每页显示条数变化时触发的函数
+sizeChangeHandle(val) {
+this.pageSize = val // 更新每页显示条数
+this.pageIndex = 1 // 重置为第一页
+this.getDataList() // 重新获取数据
+},
+
+// 当前页变化时触发的函数
+currentChangeHandle(val) {
+this.pageIndex = val // 更新当前页
+this.getDataList() // 重新获取数据
+}
 }
+}
+
 </script>

src/views/modules/sys/menu-add-or-update.vue

@@ -1,218 +1,253 @@
 <template>
+    <!-- 弹窗组件，标题根据dataForm.id判断是新增还是修改 -->
     <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
-        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-            <el-form-item label="类型" prop="type">
-                <el-radio-group v-model="dataForm.type">
-                    <el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
-                </el-radio-group>
-            </el-form-item>
-            <el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" prop="name">
-                <el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
-            </el-form-item>
-            <el-form-item label="上级菜单" prop="parentName">
-                <el-popover ref="menuListPopover" placement="bottom-start" trigger="click">
-                    <el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" @current-change="menuListTreeCurrentChangeHandle" :default-expand-all="true" :highlight-current="true" :expand-on-click-node="false">
-                    </el-tree>
-                </el-popover>
-                <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
-            </el-form-item>
-            <el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
-                <el-input v-model="dataForm.url" placeholder="菜单路由"></el-input>
-            </el-form-item>
-            <el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
-                <el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
-            </el-form-item>
-
-            <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
-                <el-row>
-                    <el-col :span="12">
-                        <el-input v-model="dataForm.icon" placeholder="菜单图标名称" class="icon-list__input"></el-input>
-                    </el-col>
-                    <el-col :span="12" class="icon-list__tips">
-                        <el-form-item v-if="dataForm.type !== 2" label="排序号" prop="orderNum">
-                            <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form-item>
-            <div>参考ElementUI图标库, <a href="https://element.eleme.cn/#/zh-CN/component/icon" target="_blank">找图标</a></div>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="visible = false">取消</el-button>
-            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-        </span>
+    <!-- 表单组件，绑定数据模型和验证规则 -->
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+    
+    <!-- 菜单类型选择 -->
+    <el-form-item label="类型" prop="type">
+    <el-radio-group v-model="dataForm.type">
+    <!-- 循环渲染可选择的菜单类型 -->
+    <el-radio v-for="(type, index) in dataForm.typeList" :label="index" :key="index">{{ type }}</el-radio>
+    </el-radio-group>
+    </el-form-item>
+    
+    <!-- 菜单名称输入框 -->
+    <el-form-item :label="dataForm.typeList[dataForm.type] + '名称'" prop="name">
+    <el-input v-model="dataForm.name" :placeholder="dataForm.typeList[dataForm.type] + '名称'"></el-input>
+    </el-form-item>
+    
+    <!-- 上级菜单选择 -->
+    <el-form-item label="上级菜单" prop="parentName">
+    <!-- 弹出菜单树选择 -->
+    <el-popover ref="menuListPopover" placement="bottom-start" trigger="click">
+    <el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" 
+    @current-change="menuListTreeCurrentChangeHandle" :default-expand-all="true" 
+    :highlight-current="true" :expand-on-click-node="false">
+    </el-tree>
+    </el-popover>
+    <!-- 显示上级菜单选择 -->
+    <el-input v-model="dataForm.parentName" v-popover:menuListPopover :readonly="true" 
+    placeholder="点击选择上级菜单" class="menu-list__input"></el-input>
+    </el-form-item>
+    
+    <!-- 菜单路由（仅在选择菜单类型时显示） -->
+    <el-form-item v-if="dataForm.type === 1" label="菜单路由" prop="url">
+    <el-input v-model="dataForm.url" placeholder="菜单路由"></el-input>
+    </el-form-item>
+    
+    <!-- 授权标识（仅在类型不为目录时显示） -->
+    <el-form-item v-if="dataForm.type !== 0" label="授权标识" prop="perms">
+    <el-input v-model="dataForm.perms" placeholder="多个用逗号分隔, 如: user:list,user:create"></el-input>
+    </el-form-item>
+    
+    <!-- 菜单图标（仅在类型不为按钮时显示） -->
+    <el-form-item v-if="dataForm.type !== 2" label="菜单图标" prop="icon">
+    <el-row>
+    <el-col :span="12">
+    <el-input v-model="dataForm.icon" placeholder="菜单图标名称" class="icon-list__input"></el-input>
+    </el-col>
+    <el-col :span="12" class="icon-list__tips">
+    <!-- 排序号输入框（仅在类型不为按钮时显示） -->
+    <el-form-item v-if="dataForm.type !== 2" label="排序号" prop="orderNum">
+    <el-input-number v-model="dataForm.orderNum" controls-position="right" :min="0" label="排序号"></el-input-number>
+    </el-form-item>
+    </el-col>
+    </el-row>
+    </el-form-item>
+    
+    <!-- 提示用户参考图标库 -->
+    <div>参考ElementUI图标库, 找图标</div>
+    </el-form>
+    
+    <!-- 弹窗底部按钮 -->
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="visible = false">取消</el-button>
+    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
     </el-dialog>
-</template>
-
-<script>
-import { treeDataTranslate } from '@/utils'
-export default {
+    </template>
+    
+    <script>
+    // 引入工具函数，用于处理树形数据
+    import { treeDataTranslate } from '@/utils'
+    export default {
     data() {
-        var validateUrl = (rule, value, callback) => {
-            if (this.dataForm.type === 1 && !/\S/.test(value)) {
-                callback(new Error('菜单URL不能为空'))
-            } else {
-                callback()
-            }
-        }
-        return {
-            visible: false,
-            dataForm: {
-                id: 0,
-                type: 1,
-                typeList: ['目录', '菜单', '按钮'],
-                name: '',
-                parentId: 0,
-                parentName: '',
-                url: '',
-                perms: '',
-                orderNum: 0,
-                icon: '',
-            },
-            dataRule: {
-                name: [
-                    { required: true, message: '菜单名称不能为空', trigger: 'blur' }
-                ],
-                parentName: [
-                    { required: true, message: '上级菜单不能为空', trigger: 'change' }
-                ],
-                url: [
-                    { validator: validateUrl, trigger: 'blur' }
-                ]
-            },
-            menuList: [],
-            menuListTreeProps: {
-                label: 'name',
-                children: 'children'
-            }
-        }
+    // 验证URL的函数
+    var validateUrl = (rule, value, callback) => {
+    // 如果类型是菜单且URL为空，返回错误
+    if (this.dataForm.type === 1 && !/\S/.test(value)) {
+    callback(new Error('菜单URL不能为空'))
+    } else {
+    callback() // 验证通过
+    }
+    }
+    return {
+    visible: false, // 控制弹窗的显示与隐藏
+    dataForm: {
+    id: 0, // 菜单ID，新增时为0
+    type: 1, // 菜单类型（0-目录，1-菜单，2-按钮）
+    typeList: ['目录', '菜单', '按钮'], // 菜单类型列表
+    name: '', // 菜单名称
+    parentId: 0, // 上级菜单ID
+    parentName: '', // 上级菜单名称
+    url: '', // 菜单路由
+    perms: '', // 授权标识
+    orderNum: 0, // 排序号
+    icon: '', // 菜单图标
+    },
+    // 表单验证规则
+    dataRule: {
+    name: [
+    { required: true, message: '菜单名称不能为空', trigger: 'blur' } // 菜单名称必填
+    ],
+    parentName: [
+    { required: true, message: '上级菜单不能为空', trigger: 'change' } // 上级菜单必填
+    ],
+    url: [
+    { validator: validateUrl, trigger: 'blur' } // URL验证
+    ]
+    },
+    menuList: [], // 菜单列表，供菜单树使用
+    menuListTreeProps: {
+    label: 'name', // 树节点显示的字段名称
+    children: 'children' // 树节点的子节点字段
+    }
+    }
     },
     methods: {
-        init(id) {
-            this.dataForm.id = id || 0
-            this.$http({
-                url: this.$http.adornUrl('/sys/menu/select'),
-                method: 'get',
-                params: this.$http.adornParams()
-            }).then(({ data }) => {
-                this.menuList = treeDataTranslate(data.menuList, 'menuId')
-            }).then(() => {
-                this.visible = true
-                this.$nextTick(() => {
-                    this.$refs['dataForm'].resetFields()
-                })
-            }).then(() => {
-                if (!this.dataForm.id) {
-                    // 新增
-                    this.menuListTreeSetCurrentNode()
-                } else {
-                    // 修改
-                    this.$http({
-                        url: this.$http.adornUrl(`/sys/menu/info/${this.dataForm.id}`),
-                        method: 'get',
-                        params: this.$http.adornParams()
-                    }).then(({ data }) => {
-                        this.dataForm.id = data.menu.menuId
-                        this.dataForm.type = data.menu.type
-                        this.dataForm.name = data.menu.name
-                        this.dataForm.parentId = data.menu.parentId
-                        this.dataForm.url = data.menu.url
-                        this.dataForm.perms = data.menu.perms
-                        this.dataForm.orderNum = data.menu.orderNum
-                        this.dataForm.icon = data.menu.icon
-                        this.menuListTreeSetCurrentNode()
-                    })
-                }
-            })
-        },
-        // 菜单树选中
-        menuListTreeCurrentChangeHandle(data, node) {
-            this.dataForm.parentId = data.menuId
-            this.dataForm.parentName = data.name
-        },
-        // 菜单树设置当前选中节点
-        menuListTreeSetCurrentNode() {
-            this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId)
-            this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name']
-        },
-        // 表单提交
-        dataFormSubmit() {
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/sys/menu/${!this.dataForm.id ? 'save' : 'update'}`),
-                        method: 'post',
-                        data: this.$http.adornData({
-                            'menuId': this.dataForm.id || undefined,
-                            'type': this.dataForm.type,
-                            'name': this.dataForm.name,
-                            'parentId': this.dataForm.parentId,
-                            'url': this.dataForm.url,
-                            'perms': this.dataForm.perms,
-                            'orderNum': this.dataForm.orderNum,
-                            'icon': this.dataForm.icon
-                        })
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.$message({
-                                message: '操作成功',
-                                type: 'success',
-                                duration: 1500,
-                                onClose: () => {
-                                    this.visible = false
-                                    this.$emit('refreshDataList')
-                                }
-                            })
-                        } else {
-                            this.$message.error(data.msg)
-                        }
-                    })
-                }
-            })
-        }
-    }
-}
-</script>
-
-<style lang="scss">
-.mod-menu {
+    // 初始化方法，用于新增或修改菜单
+    init(id) {
+    this.dataForm.id = id || 0 // 设置菜单ID
+    this.$http({
+    url: this.$http.adornUrl('/sys/menu/select'),
+    method: 'get',
+    params: this.$http.adornParams()
+    }).then(({ data }) => {
+    // 获取菜单列表并转换为树形结构
+    this.menuList = treeDataTranslate(data.menuList, 'menuId')
+    }).then(() => {
+    this.visible = true // 显示弹窗
+    this.$nextTick(() => {
+    this.$refs['dataForm'].resetFields() // 重置表单字段
+    })
+    }).then(() => {
+    if (!this.dataForm.id) {
+    // 新增时，设置当前选中的上级菜单
+    this.menuListTreeSetCurrentNode()
+    } else {
+    // 修改时，获取原数据
+    this.$http({
+    url: this.$http.adornUrl(`/sys/menu/info/${this.dataForm.id}`),
+    method: 'get',
+    params: this.$http.adornParams()
+    }).then(({ data }) => {
+    // 设置表单字段为获取到的原数据
+    this.dataForm.id = data.menu.menuId
+    this.dataForm.type = data.menu.type
+    this.dataForm.name = data.menu.name
+    this.dataForm.parentId = data.menu.parentId
+    this.dataForm.url = data.menu.url
+    this.dataForm.perms = data.menu.perms
+    this.dataForm.orderNum = data.menu.orderNum
+    this.dataForm.icon = data.menu.icon
+    this.menuListTreeSetCurrentNode() // 设置当前选中的菜单树节点
+    })
+    }
+    })
+    },
+    // 处理菜单树节点选择事件
+    menuListTreeCurrentChangeHandle(data, node) {
+    this.dataForm.parentId = data.menuId // 更新上级菜单ID
+    this.dataForm.parentName = data.name // 更新上级菜单名称
+    },
+    // 设置菜单树当前选中节点
+    menuListTreeSetCurrentNode() {
+    this.$refs.menuListTree.setCurrentKey(this.dataForm.parentId) // 设置当前选中的树节点
+    this.dataForm.parentName = (this.$refs.menuListTree.getCurrentNode() || {})['name'] // 更新上级菜单名称
+    },
+    // 表单提交方法
+    dataFormSubmit() {
+    this.$refs['dataForm'].validate((valid) => {
+    if (valid) {
+    // 提交表单数据到后台
+    this.$http({
+    url: this.$http.adornUrl(`/sys/menu/${!this.dataForm.id ? 'save' : 'update'}`),
+    method: 'post',
+    data: this.$http.adornData({
+    'menuId': this.dataForm.id || undefined,
+    'type': this.dataForm.type,
+    'name': this.dataForm.name,
+    'parentId': this.dataForm.parentId,
+    'url': this.dataForm.url,
+    'perms': this.dataForm.perms,
+    'orderNum': this.dataForm.orderNum,
+    'icon': this.dataForm.icon
+    })
+    }).then(({ data }) => {
+    if (data && data.code === 200) {
+    // 操作成功提示
+    this.$message({
+    message: '操作成功',
+    type: 'success',
+    duration: 1500,
+    onClose: () => {
+    this.visible = false // 关闭弹窗
+    this.$emit('refreshDataList') // 触发数据列表刷新事件
+    }
+    })
+    } else {
+    // 提示错误信息
+    this.$message.error(data.msg)
+    }
+    })
+    }
+    })
+    }
+    }
+    }
+    </script>
+    
+    <style lang="scss">
+    .mod-menu {
     .menu-list__input,
     .icon-list__input {
-        > .el-input__inner {
-            cursor: pointer;
-        }
+    > .el-input__inner {
+    cursor: pointer; // 鼠标悬停时显示为手型
+    }
     }
     &__icon-popover {
-        width: 458px;
-        overflow: hidden;
+    width: 458px; // 图标选择器的宽度
+    overflow: hidden; // 超出部分隐藏
     }
     &__icon-inner {
-        width: 478px;
-        max-height: 258px;
-        overflow-x: hidden;
-        overflow-y: auto;
+    width: 478px; // 内部图标容器的宽度
+    max-height: 258px; // 最大高度
+    overflow-x: hidden; // 水平溢出隐藏
+    overflow-y: auto; // 垂直溢出滚动
     }
     &__icon-list {
-        width: 458px;
-        padding: 0;
-        margin: -8px 0 0 -8px;
-        > .el-button {
-            padding: 8px;
-            margin: 8px 0 0 8px;
-            > span {
-                display: inline-block;
-                vertical-align: middle;
-                width: 18px;
-                height: 18px;
-                font-size: 18px;
-            }
-        }
+    width: 458px; // 图标列表宽度
+    padding: 0; // 内边距
+    margin: -8px 0 0 -8px; // 外边距调整
+    > .el-button {
+    padding: 8px; // 按钮内边距
+    margin: 8px 0 0 8px; // 按钮外边距
+    > span {
+    display: inline-block; // 使图标显示为行内块元素
+    vertical-align: middle; // 垂直居中对齐
+    width: 18px; // 图标宽度
+    height: 18px; // 图标高度
+    font-size: 18px; // 图标字体大小
+    }
+    }
     }
     .icon-list__tips {
-        font-size: 18px;
-        text-align: center;
-        color: #e6a23c;
-        cursor: pointer;
+    font-size: 18px; // 提示字体大小
+    text-align: center; // 内容置中
+    color: #e6a23c; // 提示字体颜色
+    cursor: pointer; // 鼠标悬停时显示为手型
+    }
     }
-}
-</style>
+    </style>
+    

src/views/modules/sys/menu.vue

@@ -1,109 +1,148 @@
 <template>
+    <!-- 菜单管理模块 -->
     <div class="mod-menu">
-        <el-form :inline="true" :model="dataForm">
-            <el-form-item>
-                <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-            </el-form-item>
-        </el-form>
-
-        <el-table :data="dataList" row-key="menuId" border style="width: 100%; ">
-            <el-table-column prop="name" header-align="center" min-width="150" label="名称">
-            </el-table-column>
-            <el-table-column prop="parentName" header-align="center" align="center" width="120" label="上级菜单">
-            </el-table-column>
-            <el-table-column header-align="center" align="center" label="图标">
-                <template slot-scope="scope">
-                    <i :class="scope.row.icon"></i>
-                </template>
-            </el-table-column>
-            <el-table-column prop="type" header-align="center" align="center" label="类型">
-                <template slot-scope="scope">
-                    <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
-                    <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
-                    <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
-                </template>
-            </el-table-column>
-            <el-table-column prop="orderNum" header-align="center" align="center" label="排序号">
-            </el-table-column>
-            <el-table-column prop="url" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="菜单URL">
-            </el-table-column>
-            <el-table-column prop="perms" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="授权标识">
-            </el-table-column>
-            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
-                <template slot-scope="scope">
-                    <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
-                    <el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <!-- 弹窗, 新增 / 修改 -->
-        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <!-- 表单组件，内联布局 -->
+    <el-form :inline="true" :model="dataForm">
+    <el-form-item>
+    <!-- 如果有新增权限，显示新增按钮 -->
+    <el-button v-if="isAuth('sys:menu:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+    </el-form-item>
+    </el-form>
+    
+    <!-- 菜单数据表格 -->
+    <el-table :data="dataList" row-key="menuId" border style="width: 100%;">
+    <!-- 菜单名称列 -->
+    <el-table-column prop="name" header-align="center" min-width="150" label="名称">
+    </el-table-column>
+    
+    <!-- 上级菜单列 -->
+    <el-table-column prop="parentName" header-align="center" align="center" width="120" label="上级菜单">
+    </el-table-column>
+    
+    <!-- 菜单图标列 -->
+    <el-table-column header-align="center" align="center" label="图标">
+    <template slot-scope="scope">
+    <!-- 根据图标类渲染图标 -->
+    <i :class="scope.row.icon"></i>
+    </template>
+    </el-table-column>
+    
+    <!-- 菜单类型列 -->
+    <el-table-column prop="type" header-align="center" align="center" label="类型">
+    <template slot-scope="scope">
+    <!-- 根据菜单类型渲染不同的标签 -->
+    <el-tag v-if="scope.row.type === 0" size="small">目录</el-tag>
+    <el-tag v-else-if="scope.row.type === 1" size="small" type="success">菜单</el-tag>
+    <el-tag v-else-if="scope.row.type === 2" size="small" type="info">按钮</el-tag>
+    </template>
+    </el-table-column>
+    
+    <!-- 排序号列 -->
+    <el-table-column prop="orderNum" header-align="center" align="center" label="排序号">
+    </el-table-column>
+    
+    <!-- 菜单URL列，支持溢出提示 -->
+    <el-table-column prop="url" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="菜单URL">
+    </el-table-column>
+    
+    <!-- 授权标识列，支持溢出提示 -->
+    <el-table-column prop="perms" header-align="center" align="center" width="150" :show-overflow-tooltip="true" label="授权标识">
+    </el-table-column>
+    
+    <!-- 操作列，显示修改和删除按钮 -->
+    <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+    <template slot-scope="scope">
+    <!-- 如果有修改权限，显示修改按钮 -->
+    <el-button v-if="isAuth('sys:menu:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.menuId)">修改</el-button>
+    <!-- 如果有删除权限，显示删除按钮 -->
+    <el-button v-if="isAuth('sys:menu:delete')" type="text" size="small" @click="deleteHandle(scope.row.menuId)">删除</el-button>
+    </template>
+    </el-table-column>
+    </el-table>
+    
+    <!-- 弹窗组件，用于新增或修改菜单 -->
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
     </div>
-</template>
-
-<script>
-import AddOrUpdate from './menu-add-or-update'
-import { treeDataTranslate } from '@/utils'
-export default {
+    </template>
+    
+    <script>
+    // 导入新增/修改组件和工具函数
+    import AddOrUpdate from './menu-add-or-update'
+    import { treeDataTranslate } from '@/utils'
+    
+    export default {
     data() {
-        return {
-            dataForm: {},
-            dataList: [],
-            dataListLoading: false,
-            addOrUpdateVisible: false
-        }
+    return {
+    dataForm: {}, // 表单数据
+    dataList: [], // 菜单数据列表
+    dataListLoading: false, // 数据加载状态
+    addOrUpdateVisible: false // 弹窗显示控制
+    }
     },
     components: {
-        AddOrUpdate
+    AddOrUpdate // 引入新增/修改组件
     },
     activated() {
-        this.getDataList()
+    // 页面激活时获取菜单数据列表
+    this.getDataList()
     },
     methods: {
-        // 获取数据列表
-        getDataList() {
-            this.dataListLoading = true
-            this.$http({
-                url: this.$http.adornUrl('/sys/menu/list'),
-                method: 'get',
-                params: this.$http.adornParams()
-            }).then(({ data }) => {
-                this.dataList = treeDataTranslate(data, 'menuId')
-                this.dataListLoading = false
-            })
-        },
-        // 新增 / 修改
-        addOrUpdateHandle(id) {
-            this.addOrUpdateVisible = true
-            this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(id)
-            })
-        },
-        // 删除
-        deleteHandle(id) {
-            this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-                this.$http({
-                    url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
-                    method: 'post',
-                    data: this.$http.adornData()
-                }).then(({ data }) => {
-                    if (data && data.code === 200) {
-                        this.$message({
-                            message: '操作成功',
-                            type: 'success',
-                            duration: 1500,
-                            onClose: () => this.getDataList()
-                        })
-                    } else {
-                        this.$message.error(data.msg)
-                    }
-                })
-            }).catch(() => { })
-        }
+    // 获取菜单数据列表
+    getDataList() {
+    this.dataListLoading = true // 开始加载数据
+    // 发起HTTP请求获取菜单列表数据
+    this.$http({
+    url: this.$http.adornUrl('/sys/menu/list'),
+    method: 'get',
+    params: this.$http.adornParams()
+    }).then(({ data }) => {
+    // 使用工具函数将数据转换为树形结构
+    this.dataList = treeDataTranslate(data, 'menuId')
+    this.dataListLoading = false // 数据加载完成
+    })
+    },
+    
+    // 新增或修改菜单
+    addOrUpdateHandle(id) {
+    this.addOrUpdateVisible = true // 显示新增/修改弹窗
+    this.$nextTick(() => {
+    // 弹窗渲染完成后，初始化数据
+    this.$refs.addOrUpdate.init(id)
+    })
+    },
+    
+    // 删除菜单
+    deleteHandle(id) {
+    // 显示确认弹窗，提示用户是否确认删除操作
+    this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning' // 警告类型的弹窗
+    }).then(() => {
+    // 发起删除请求
+    this.$http({
+    url: this.$http.adornUrl(`/sys/menu/delete/${id}`),
+    method: 'post',
+    data: this.$http.adornData()
+    }).then(({ data }) => {
+    if (data && data.code === 200) {
+    // 删除成功，显示成功提示并刷新菜单列表
+    this.$message({
+    message: '操作成功',
+    type: 'success',
+    duration: 1500,
+    onClose: () => this.getDataList() // 删除后刷新数据列表
+    })
+    } else {
+    // 删除失败，显示错误提示
+    this.$message.error(data.msg)
+    }
+    })
+    }).catch(() => {
+    // 如果用户取消删除，什么也不做
+    })
+    }
+    }
     }
-}
-</script>
+    </script>
+    

src/views/modules/sys/role-add-or-update.vue

@@ -1,111 +1,148 @@
 <template>
+    <!-- 弹窗组件，显示角色的新增或修改表单 -->
     <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
-        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-            <el-form-item label="角色名称" prop="roleName">
-                <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
-            </el-form-item>
-            <el-form-item label="备注" prop="remark">
-                <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
-            </el-form-item>
-            <el-form-item size="mini" label="授权">
-                <el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" :default-expand-all="true" show-checkbox>
-                </el-tree>
-            </el-form-item>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="visible = false">取消</el-button>
-            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-        </span>
+    <!-- 表单组件，绑定数据和验证规则 -->
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+    
+    <!-- 角色名称输入框 -->
+    <el-form-item label="角色名称" prop="roleName">
+    <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
+    </el-form-item>
+    
+    <!-- 备注输入框 -->
+    <el-form-item label="备注" prop="remark">
+    <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
+    </el-form-item>
+    
+    <!-- 授权菜单树 -->
+    <el-form-item size="mini" label="授权">
+    <el-tree :data="menuList" :props="menuListTreeProps" node-key="menuId" ref="menuListTree" :default-expand-all="true" show-checkbox>
+    </el-tree>
+    </el-form-item>
+    
+    </el-form>
+    
+    <!-- 弹窗底部按钮，取消和确认按钮 -->
+    <span slot="footer" class="dialog-footer">
+    <el-button @click="visible = false">取消</el-button>
+    <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
     </el-dialog>
-</template>
-
-<script>
-import { treeDataTranslate } from '@/utils'
-export default {
+    </template>
+    
+    <script>
+    // 导入工具函数，用于将树形数据转换
+    import { treeDataTranslate } from '@/utils'
+    
+    export default {
     data() {
-        return {
-            visible: false,
-            menuList: [],
-            menuListTreeProps: {
-                label: 'name',
-                children: 'children'
-            },
-            dataForm: {
-                id: 0,
-                roleName: '',
-                remark: ''
-            },
-            dataRule: {
-                roleName: [
-                    { required: true, message: '角色名称不能为空', trigger: 'blur' }
-                ]
-            }
-        }
+    return {
+    // 弹窗显示状态
+    visible: false,
+    // 菜单列表，用于树形展示
+    menuList: [],
+    // 用于el-tree组件的树形数据配置
+    menuListTreeProps: {
+    label: 'name', // 显示名称字段
+    children: 'children' // 子节点字段
+    },
+    // 表单数据
+    dataForm: {
+    id: 0, // 角色ID，新增时为0
+    roleName: '', // 角色名称
+    remark: '' // 备注
+    },
+    // 表单验证规则
+    dataRule: {
+    roleName: [
+    { required: true, message: '角色名称不能为空', trigger: 'blur' } // 角色名称不能为空
+    ]
+    }
+    }
     },
     methods: {
-        init(id) {
-            this.dataForm.id = id || 0
-            this.$http({
-                url: this.$http.adornUrl('/sys/menu/list'),
-                method: 'get',
-                params: this.$http.adornParams()
-            }).then(({ data }) => {
-                this.menuList = treeDataTranslate(data, 'menuId')
-            }).then(() => {
-                this.visible = true
-                this.$nextTick(() => {
-                    this.$refs['dataForm'].resetFields()
-                    this.$refs.menuListTree.setCheckedKeys([])
-                })
-            }).then(() => {
-                if (this.dataForm.id) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`),
-                        method: 'get',
-                        params: this.$http.adornParams()
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.dataForm.roleName = data.role.roleName
-                            this.dataForm.remark = data.role.remark
-                            data.role.menuIdList.forEach(item => {
-                                this.$refs.menuListTree.setChecked(item, true);
-                            });
-                        }
-                    })
-                }
-            })
-        },
-        // 表单提交
-        dataFormSubmit() {
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`),
-                        method: 'post',
-                        data: this.$http.adornData({
-                            'roleId': this.dataForm.id || undefined,
-                            'roleName': this.dataForm.roleName,
-                            'remark': this.dataForm.remark,
-                            'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), this.$refs.menuListTree.getHalfCheckedKeys())
-                        })
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.$message({
-                                message: '操作成功',
-                                type: 'success',
-                                duration: 1500,
-                                onClose: () => {
-                                    this.visible = false
-                                    this.$emit('refreshDataList')
-                                }
-                            })
-                        } else {
-                            this.$message.error(data.msg)
-                        }
-                    })
-                }
-            })
-        }
+    // 初始化方法，传入角色ID来初始化表单
+    init(id) {
+    this.dataForm.id = id || 0 // 如果没有传入ID，则初始化为0（新增）
+    
+    // 获取菜单列表并转换为树形结构
+    this.$http({
+    url: this.$http.adornUrl('/sys/menu/list'),
+    method: 'get',
+    params: this.$http.adornParams()
+    }).then(({ data }) => {
+    this.menuList = treeDataTranslate(data, 'menuId') // 转换为树形数据
+    }).then(() => {
+    // 显示弹窗
+    this.visible = true
+    
+    // 在下一次DOM更新后执行
+    this.$nextTick(() => {
+    // 重置表单字段
+    this.$refs['dataForm'].resetFields()
+    // 清除选中的菜单
+    this.$refs.menuListTree.setCheckedKeys([])
+    })
+    }).then(() => {
+    // 如果是修改操作（有ID），获取角色详细信息
+    if (this.dataForm.id) {
+    this.$http({
+    url: this.$http.adornUrl(`/sys/role/info/${this.dataForm.id}`),
+    method: 'get',
+    params: this.$http.adornParams()
+    }).then(({ data }) => {
+    if (data && data.code === 200) {
+    // 填充表单数据
+    this.dataForm.roleName = data.role.roleName
+    this.dataForm.remark = data.role.remark
+    // 设置菜单树选中的节点
+    data.role.menuIdList.forEach(item => {
+    this.$refs.menuListTree.setChecked(item, true)
+    })
+    }
+    })
+    }
+    })
+    },
+    
+    // 表单提交方法
+    dataFormSubmit() {
+    // 校验表单数据
+    this.$refs['dataForm'].validate((valid) => {
+    if (valid) {
+    // 提交数据
+    this.$http({
+    url: this.$http.adornUrl(`/sys/role/${!this.dataForm.id ? 'save' : 'update'}`), // 根据ID决定是保存还是更新
+    method: 'post',
+    data: this.$http.adornData({
+    'roleId': this.dataForm.id || undefined, // 角色ID
+    'roleName': this.dataForm.roleName, // 角色名称
+    'remark': this.dataForm.remark, // 备注
+    // 获取已选中的菜单ID列表
+    'menuIdList': [].concat(this.$refs.menuListTree.getCheckedKeys(), this.$refs.menuListTree.getHalfCheckedKeys())
+    })
+    }).then(({ data }) => {
+    if (data && data.code === 200) {
+    // 操作成功，显示提示消息
+    this.$message({
+    message: '操作成功',
+    type: 'success',
+    duration: 1500,
+    onClose: () => {
+    // 关闭弹窗并触发刷新列表事件
+    this.visible = false
+    this.$emit('refreshDataList')
+    }
+    })
+    } else {
+    // 显示错误提示
+    this.$message.error(data.msg)
+    }
+    })
+    }
+    })
+    }
+    }
     }
-}
-</script>
+    </script>
+    

src/views/modules/sys/role.vue

@@ -1,132 +1,168 @@
-<template>
-    <div class="mod-role">
-        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-            <el-form-item>
-                <el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="getDataList()">查询</el-button>
-                <el-button v-if="isAuth('sys:role:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-                <el-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
-            </el-form-item>
-        </el-form>
-        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
-            <el-table-column type="selection" header-align="center" align="center" width="50">
-            </el-table-column>
-            <el-table-column prop="roleId" header-align="center" align="center" width="80" label="ID">
-            </el-table-column>
-            <el-table-column prop="roleName" header-align="center" align="center" label="角色名称">
-            </el-table-column>
-            <el-table-column prop="remark" header-align="center" align="center" label="备注">
-            </el-table-column>
-            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
-                <template slot-scope="scope">
-                    <el-button v-if="isAuth('sys:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.roleId)">修改</el-button>
-                    <el-button v-if="isAuth('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.roleId)">删除</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="totalCount" layout="total, sizes, prev, pager, next, jumper">
-        </el-pagination>
-        <!-- 弹窗, 新增 / 修改 -->
-        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
-    </div>
-</template>
+<template>  
+    <div class="mod-role">  
+        <!-- 搜索和管理角色的表单 -->  
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">  
+            <el-form-item>  
+                <!-- 角色名称输入框 -->  
+                <el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input>  
+            </el-form-item>  
+            <el-form-item>  
+                <!-- 查询按钮 -->  
+                <el-button @click="getDataList()">查询</el-button>  
+                <!-- 新增按钮，只有在有权限时才显示 -->  
+                <el-button v-if="isAuth('sys:role:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>  
+                <!-- 批量删除按钮，只有在有权限时才显示，且未选择则禁用 -->  
+                <el-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>  
+            </el-form-item>  
+        </el-form>  
+        
+        <!-- 显示角色的表格 -->  
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">  
+            <!-- 选择列，用于多选 -->  
+            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>  
+            <!-- ID列 -->  
+            <el-table-column prop="roleId" header-align="center" align="center" width="80" label="ID"></el-table-column>  
+            <!-- 角色名称列 -->  
+            <el-table-column prop="roleName" header-align="center" align="center" label="角色名称"></el-table-column>  
+            <!-- 备注列 -->  
+            <el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>  
+            <!-- 操作列 -->  
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">  
+                <template slot-scope="scope">  
+                    <!-- 修改按钮，只有在有权限时才显示 -->  
+                    <el-button v-if="isAuth('sys:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.roleId)">修改</el-button>  
+                    <!-- 删除按钮，只有在有权限时才显示 -->  
+                    <el-button v-if="isAuth('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.roleId)">删除</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="totalCount"   
+            layout="total, sizes, prev, pager, next, jumper">  
+        </el-pagination>  
+        
+        <!-- 弹窗, 新增 / 修改 -->  
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>  
+    </div>  
+</template>  
 
-<script>
-import AddOrUpdate from './role-add-or-update'
-export default {
-    data() {
-        return {
-            dataForm: {
-                roleName: ''
-            },
-            dataList: [],
-            pageIndex: 1,
-            pageSize: 10,
-            totalCount: 0,
-            dataListLoading: false,
-            dataListSelections: [],
-            addOrUpdateVisible: false
-        }
-    },
-    components: {
-        AddOrUpdate
-    },
-    activated() {
-        this.getDataList()
-    },
-    methods: {
-        // 获取数据列表
-        getDataList() {
-            this.dataListLoading = true
-            this.$http({
-                url: this.$http.adornUrl('/sys/role/list'),
-                method: 'get',
-                params: this.$http.adornParams({
-                    'page': this.pageIndex,
-                    'limit': this.pageSize,
-                    'roleName': this.dataForm.roleName
-                })
-            }).then(({ data }) => {
-                if (data && data.code === 200) {
-                    this.dataList = data.page.list
-                    this.totalCount = data.page.totalCount
-                } else {
-                    this.dataList = []
-                    this.totalCount = 0
-                }
-                this.dataListLoading = false
-            })
-        },
-        // 每页数
-        sizeChangeHandle(val) {
-            this.pageSize = val
-            this.pageIndex = 1
-            this.getDataList()
-        },
-        // 当前页
-        currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
-        },
-        // 多选
-        selectionChangeHandle(val) {
-            this.dataListSelections = val
-        },
-        // 新增 / 修改
-        addOrUpdateHandle(id) {
-            this.addOrUpdateVisible = true
-            this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(id)
-            })
-        },
-        // 删除
-        deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.roleId)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-                this.$http({
-                    url: this.$http.adornUrl('/sys/role/delete'),
-                    method: 'post',
-                    data: this.$http.adornData(ids, false)
-                }).then(({ data }) => {
-                    if (data && data.code === 200) {
-                        this.$message({
-                            message: '操作成功',
-                            type: 'success',
-                            duration: 1500,
-                            onClose: () => this.getDataList()
-                        })
-                    } else {
-                        this.$message.error(data.msg)
-                    }
-                })
-            }).catch(() => { })
-        }
-    }
-}
-</script>
+<script>  
+import AddOrUpdate from './role-add-or-update' // 引入新增/修改组件  
+
+export default {  
+    data() {  
+        return {  
+            // 搜索表单数据  
+            dataForm: {  
+                roleName: ''  
+            },  
+            // 表格数据列表  
+            dataList: [],  
+            // 当前页索引  
+            pageIndex: 1,  
+            // 每页显示的数量  
+            pageSize: 10,  
+            // 数据总数  
+            totalCount: 0,  
+            // 数据加载状态  
+            dataListLoading: false,  
+            // 选中的数据列表  
+            dataListSelections: [],  
+            // 弹窗可见性  
+            addOrUpdateVisible: false  
+        }  
+    },  
+    components: {  
+        AddOrUpdate // 注册新增/修改组件  
+    },  
+    activated() {  
+        // 组件激活时获取数据列表  
+        this.getDataList()  
+    },  
+    methods: {  
+        // 获取数据列表  
+        getDataList() {  
+            this.dataListLoading = true // 设置加载状态  
+            this.$http({  
+                url: this.$http.adornUrl('/sys/role/list'), // API接口地址  
+                method: 'get', // HTTP请求方法  
+                params: this.$http.adornParams({  
+                    'page': this.pageIndex, // 当前页  
+                    'limit': this.pageSize, // 每页数量  
+                    'roleName': this.dataForm.roleName // 角色名称过滤  
+                })  
+            }).then(({ data }) => {  
+                if (data && data.code === 200) {  
+                    // 成功获取数据  
+                    this.dataList = data.page.list // 更新数据列表  
+                    this.totalCount = data.page.totalCount // 更新总数量  
+                } else {  
+                    // 获取数据失败  
+                    this.dataList = []  
+                    this.totalCount = 0  
+                }  
+                this.dataListLoading = false // 重置加载状态  
+            })  
+        },  
+        // 每页数量变化处理  
+        sizeChangeHandle(val) {  
+            this.pageSize = val // 更新每页数量  
+            this.pageIndex = 1 // 重置为第一页  
+            this.getDataList() // 再次获取数据列表  
+        },  
+        // 当前页变化处理  
+        currentChangeHandle(val) {  
+            this.pageIndex = val // 更新当前页  
+            this.getDataList() // 再次获取数据列表  
+        },  
+        // 选择变化处理  
+        selectionChangeHandle(val) {  
+            this.dataListSelections = val // 更新选中的数据  
+        },  
+        // 打开新增/修改弹窗  
+        addOrUpdateHandle(id) {  
+            this.addOrUpdateVisible = true // 显示弹窗  
+            this.$nextTick(() => {  
+                this.$refs.addOrUpdate.init(id) // 初始化弹窗（如果有ID则传入）  
+            })  
+        },  
+        // 删除处理  
+        deleteHandle(id) {  
+            // 确定要删除的ID（单个或多个）  
+            var ids = id ? [id] : this.dataListSelections.map(item => item.roleId)  
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {  
+                confirmButtonText: '确定',  
+                cancelButtonText: '取消',  
+                type: 'warning'  
+            }).then(() => {  
+                // 确认删除  
+                this.$http({  
+                    url: this.$http.adornUrl('/sys/role/delete'), // API接口地址  
+                    method: 'post', // HTTP请求方法  
+                    data: this.$http.adornData(ids, false) // 发送要删除的ID  
+                }).then(({ data }) => {  
+                    if (data && data.code === 200) {  
+                        // 删除成功  
+                        this.$message({  
+                            message: '操作成功',  
+                            type: 'success',  
+                            duration: 1500,  
+                            onClose: () => this.getDataList() // 删除成功后刷新数据列表  
+                        })  
+                    } else {  
+                        // 删除失败  
+                        this.$message.error(data.msg) // 显示错误信息  
+                    }  
+                })  
+            }).catch(() => { }) // 处理取消操作  
+        }  
+    }  
+}  
+</script>

src/views/modules/sys/user-add-or-update.vue

@@ -1,177 +1,202 @@
-<template>
-    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
-        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-            <el-form-item label="用户名" prop="userName">
-                <el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input>
-            </el-form-item>
-            <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
-                <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
-            </el-form-item>
-            <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">
-                <el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>
-            </el-form-item>
-            <el-form-item label="邮箱" prop="email">
-                <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
-            </el-form-item>
-            <el-form-item label="手机号" prop="mobile">
-                <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
-            </el-form-item>
-            <el-form-item label="角色" size="mini" prop="roleIdList">
-                <el-checkbox-group v-model="dataForm.roleIdList">
-                    <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
-                </el-checkbox-group>
-            </el-form-item>
-            <el-form-item label="状态" size="mini" prop="status">
-                <el-radio-group v-model="dataForm.status">
-                    <el-radio :label="0">禁用</el-radio>
-                    <el-radio :label="1">正常</el-radio>
-                </el-radio-group>
-            </el-form-item>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="visible = false">取消</el-button>
-            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-        </span>
-    </el-dialog>
-</template>
+<template>  
+    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">  
+        <!-- 表单，使用dataForm作为模型，进行用户信息的新增或修改 -->  
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">  
+            <!-- 用户名输入框 -->  
+            <el-form-item label="用户名" prop="userName">  
+                <el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input>  
+            </el-form-item>  
+            <!-- 密码输入框，若为新增则必填 -->  
+            <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">  
+                <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>  
+            </el-form-item>  
+            <!-- 确认密码输入框，若为新增则必填 -->  
+            <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">  
+                <el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>  
+            </el-form-item>  
+            <!-- 邮箱输入框 -->  
+            <el-form-item label="邮箱" prop="email">  
+                <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>  
+            </el-form-item>  
+            <!-- 手机号输入框 -->  
+            <el-form-item label="手机号" prop="mobile">  
+                <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>  
+            </el-form-item>  
+            <!-- 角色选择 -->  
+            <el-form-item label="角色" size="mini" prop="roleIdList">  
+                <el-checkbox-group v-model="dataForm.roleIdList">  
+                    <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>  
+                </el-checkbox-group>  
+            </el-form-item>  
+            <!-- 状态选择 -->  
+            <el-form-item label="状态" size="mini" prop="status">  
+                <el-radio-group v-model="dataForm.status">  
+                    <el-radio :label="0">禁用</el-radio>  
+                    <el-radio :label="1">正常</el-radio>  
+                </el-radio-group>  
+            </el-form-item>  
+        </el-form>  
+        <!-- 对话框底部按钮 -->  
+        <span slot="footer" class="dialog-footer">  
+            <el-button @click="visible = false">取消</el-button>  
+            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>  
+        </span>  
+    </el-dialog>  
+</template>  
 
-<script>
-import { isEmail, isMobile } from '@/utils/validate'
-export default {
-    data() {
-        var validatePassword = (rule, value, callback) => {
-            if (!this.dataForm.id && !/\S/.test(value)) {
-                callback(new Error('密码不能为空'))
-            } else {
-                callback()
-            }
-        }
-        var validateComfirmPassword = (rule, value, callback) => {
-            if (!this.dataForm.id && !/\S/.test(value)) {
-                callback(new Error('确认密码不能为空'))
-            } else if (this.dataForm.password !== value) {
-                callback(new Error('确认密码与密码输入不一致'))
-            } else {
-                callback()
-            }
-        }
-        var validateEmail = (rule, value, callback) => {
-            if (!isEmail(value)) {
-                callback(new Error('邮箱格式错误'))
-            } else {
-                callback()
-            }
-        }
-        var validateMobile = (rule, value, callback) => {
-            if (!isMobile(value)) {
-                callback(new Error('手机号格式错误'))
-            } else {
-                callback()
-            }
-        }
-        return {
-            visible: false,
-            roleList: [],
-            dataForm: {
-                id: 0,
-                userName: '',
-                password: '',
-                comfirmPassword: '',
-                salt: '',
-                email: '',
-                mobile: '',
-                roleIdList: [],
-                status: 1
-            },
-            dataRule: {
-                userName: [
-                    { required: true, message: '用户名不能为空', trigger: 'blur' }
-                ],
-                password: [
-                    { validator: validatePassword, trigger: 'blur' }
-                ],
-                comfirmPassword: [
-                    { validator: validateComfirmPassword, trigger: 'blur' }
-                ],
-                email: [
-                    { required: true, message: '邮箱不能为空', trigger: 'blur' },
-                    { validator: validateEmail, trigger: 'blur' }
-                ],
-                mobile: [
-                    { required: true, message: '手机号不能为空', trigger: 'blur' },
-                    { validator: validateMobile, trigger: 'blur' }
-                ]
-            }
-        }
-    },
-    methods: {
-        init(id) {
-            this.dataForm.id = id || 0
-            this.$http({
-                url: this.$http.adornUrl('/sys/role/select'),
-                method: 'get',
-                params: this.$http.adornParams()
-            }).then(({ data }) => {
-                this.roleList = data && data.code === 200 ? data.list : []
-            }).then(() => {
-                this.visible = true
-                this.$nextTick(() => {
-                    this.$refs['dataForm'].resetFields()
-                })
-            }).then(() => {
-                if (this.dataForm.id) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),
-                        method: 'get',
-                        params: this.$http.adornParams()
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.dataForm.userName = data.user.username
-                            this.dataForm.salt = data.user.salt
-                            this.dataForm.email = data.user.email
-                            this.dataForm.mobile = data.user.mobile
-                            this.dataForm.roleIdList = data.user.roleIdList
-                            this.dataForm.status = data.user.status
-                        }
-                    })
-                }
-            })
-        },
-        // 表单提交
-        dataFormSubmit() {
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),
-                        method: 'post',
-                        data: this.$http.adornData({
-                            'userId': this.dataForm.id || undefined,
-                            'username': this.dataForm.userName,
-                            'password': this.dataForm.password,
-                            'salt': this.dataForm.salt,
-                            'email': this.dataForm.email,
-                            'mobile': this.dataForm.mobile,
-                            'status': this.dataForm.status,
-                            'roleIdList': this.dataForm.roleIdList
-                        })
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.$message({
-                                message: '操作成功',
-                                type: 'success',
-                                duration: 1500,
-                                onClose: () => {
-                                    this.visible = false
-                                    this.$emit('refreshDataList')
-                                }
-                            })
-                        } else {
-                            this.$message.error(data.msg)
-                        }
-                    })
-                }
-            })
-        }
-    }
-}
-</script>
+<script>  
+import { isEmail, isMobile } from '@/utils/validate' // 导入验证函数  
+
+export default {  
+    data() {  
+        // 表单验证规则  
+        var validatePassword = (rule, value, callback) => {  
+            if (!this.dataForm.id && !/\S/.test(value)) { // 如果是新增且密码为空  
+                callback(new Error('密码不能为空'))  
+            } else {  
+                callback() // 验证通过  
+            }  
+        }  
+        var validateComfirmPassword = (rule, value, callback) => {  
+            if (!this.dataForm.id && !/\S/.test(value)) { // 如果是新增且确认密码为空  
+                callback(new Error('确认密码不能为空'))  
+            } else if (this.dataForm.password !== value) { // 确认密码与密码不一致  
+                callback(new Error('确认密码与密码输入不一致'))  
+            } else {  
+                callback() // 验证通过  
+            }  
+        }  
+        // 验证邮箱格式  
+        var validateEmail = (rule, value, callback) => {  
+            if (!isEmail(value)) {  
+                callback(new Error('邮箱格式错误'))  
+            } else {  
+                callback() // 验证通过  
+            }  
+        }  
+        // 验证手机格式  
+        var validateMobile = (rule, value, callback) => {  
+            if (!isMobile(value)) {  
+                callback(new Error('手机号格式错误'))  
+            } else {  
+                callback() // 验证通过  
+            }  
+        }  
+        return {  
+            visible: false, // 控制对话框可见性  
+            roleList: [], // 角色列表  
+            // 表单数据  
+            dataForm: {  
+                id: 0, // 用户ID  
+                userName: '', // 用户名  
+                password: '', // 密码  
+                comfirmPassword: '', // 确认密码  
+                salt: '', // 盐值  
+                email: '', // 邮箱  
+                mobile: '', // 手机号  
+                roleIdList: [], // 角色ID列表  
+                status: 1 // 状态（1: 正常, 0: 禁用）  
+            },  
+            // 表单验证规则  
+            dataRule: {  
+                userName: [  
+                    { required: true, message: '用户名不能为空', trigger: 'blur' }  
+                ],  
+                password: [  
+                    { validator: validatePassword, trigger: 'blur' }  
+                ],  
+                comfirmPassword: [  
+                    { validator: validateComfirmPassword, trigger: 'blur' }  
+                ],  
+                email: [  
+                    { required: true, message: '邮箱不能为空', trigger: 'blur' },  
+                    { validator: validateEmail, trigger: 'blur' }  
+                ],  
+                mobile: [  
+                    { required: true, message: '手机号不能为空', trigger: 'blur' },  
+                    { validator: validateMobile, trigger: 'blur' }  
+                ]  
+            }  
+        }  
+    },  
+    methods: {  
+        // 初始化表单，加载角色列表和用户信息  
+        init(id) {  
+            this.dataForm.id = id || 0 // 设置用户ID  
+            // 获取角色列表  
+            this.$http({  
+                url: this.$http.adornUrl('/sys/role/select'),  
+                method: 'get',  
+                params: this.$http.adornParams() // 获取请求参数  
+            }).then(({ data }) => {  
+                this.roleList = data && data.code === 200 ? data.list : [] // 更新角色列表  
+            }).then(() => {  
+                this.visible = true // 显示对话框  
+                this.$nextTick(() => {  
+                    this.$refs['dataForm'].resetFields() // 重置表单  
+                })  
+            }).then(() => {  
+                // 如果为修改状态，则加载用户信息  
+                if (this.dataForm.id) {  
+                    this.$http({  
+                        url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),  
+                        method: 'get',  
+                        params: this.$http.adornParams()  
+                    }).then(({ data }) => {  
+                        if (data && data.code === 200) {  
+                            // 填充表单数据  
+                                                        this.dataForm.userName = data.user.username // 设置用户名  
+                            this.dataForm.salt = data.user.salt // 设置盐值（如果需要，这部分可以在保存时再使用）  
+                            this.dataForm.email = data.user.email // 设置邮箱  
+                            this.dataForm.mobile = data.user.mobile // 设置手机号  
+                            this.dataForm.roleIdList = data.user.roleIdList // 设置角色ID列表  
+                            this.dataForm.status = data.user.status // 设置用户状态  
+                        }  
+                    })  
+                }  
+            })  
+        },  
+        // 表单提交处理  
+        dataFormSubmit() {  
+            // 验证表单  
+            this.$refs['dataForm'].validate((valid) => {  
+                if (valid) { // 如果表单验证通过  
+                    this.$http({  
+                        // 根据是否存在ID选择保存或更新接口  
+                        url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),  
+                        method: 'post',  
+                        data: this.$http.adornData({  
+                            // 提交表单数据  
+                            'userId': this.dataForm.id || undefined,  
+                            'username': this.dataForm.userName,  
+                            'password': this.dataForm.password,  
+                            'salt': this.dataForm.salt,  
+                            'email': this.dataForm.email,  
+                            'mobile': this.dataForm.mobile,  
+                            'status': this.dataForm.status,  
+                            'roleIdList': this.dataForm.roleIdList  
+                        })  
+                    }).then(({ data }) => {  
+                        // 处理接口返回的数据  
+                        if (data && data.code === 200) {  
+                            // 操作成功的提示  
+                            this.$message({  
+                                message: '操作成功',  
+                                type: 'success',  
+                                duration: 1500,  
+                                onClose: () => {  
+                                    this.visible = false // 关闭对话框  
+                                    this.$emit('refreshDataList') // 触发刷新数据列表事件  
+                                }  
+                            })  
+                        } else {  
+                            // 操作失败的提示  
+                            this.$message.error(data.msg) // 显示错误信息  
+                        }  
+                    })  
+                }  
+            })  
+        }  
+    }  
+}  
+</script>

src/views/modules/sys/user.vue

@@ -1,140 +1,168 @@
-<template>
-    <div class="mod-user">
-        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-            <el-form-item>
-                <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="getDataList()">查询</el-button>
-                <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-                <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
-            </el-form-item>
-        </el-form>
-        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
-            <el-table-column type="selection" header-align="center" align="center" width="50">
-            </el-table-column>
-            <el-table-column prop="userId" header-align="center" align="center" width="80" label="ID">
-            </el-table-column>
-            <el-table-column prop="username" header-align="center" align="center" label="用户名">
-            </el-table-column>
-            <el-table-column prop="email" header-align="center" align="center" label="邮箱">
-            </el-table-column>
-            <el-table-column prop="mobile" header-align="center" align="center" label="手机号">
-            </el-table-column>
-            <el-table-column prop="status" header-align="center" align="center" label="状态">
-                <template slot-scope="scope">
-                    <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
-                    <el-tag v-else size="small">正常</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 v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>
-                    <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</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="totalCount" layout="total, sizes, prev, pager, next, jumper">
-        </el-pagination>
-        <!-- 弹窗, 新增 / 修改 -->
-        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
-    </div>
-</template>
+<template>  
+    <div class="mod-user">  
+        <!-- 搜索表单 -->  
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">  
+            <el-form-item>  
+                <!-- 用户名输入框 -->  
+                <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>  
+            </el-form-item>  
+            <el-form-item>  
+                <!-- 查询按钮 -->  
+                <el-button @click="getDataList()">查询</el-button>  
+                <!-- 新增按钮，只有在有权限时显示 -->  
+                <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>  
+                <!-- 批量删除按钮，只有在有权限时显示，并且在没有选择项时禁用 -->  
+                <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>  
+            </el-form-item>  
+        </el-form>  
+        
+        <!-- 用户数据表格 -->  
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">  
+            <!-- 选择框列 -->  
+            <el-table-column type="selection" header-align="center" align="center" width="50">  
+            </el-table-column>  
+            <!-- ID列 -->  
+            <el-table-column prop="userId" header-align="center" align="center" width="80" label="ID">  
+            </el-table-column>  
+            <!-- 用户名列 -->  
+            <el-table-column prop="username" header-align="center" align="center" label="用户名">  
+            </el-table-column>  
+            <!-- 邮箱列 -->  
+            <el-table-column prop="email" header-align="center" align="center" label="邮箱">  
+            </el-table-column>  
+            <!-- 手机号列 -->  
+            <el-table-column prop="mobile" header-align="center" align="center" label="手机号">  
+            </el-table-column>  
+            <!-- 状态列 -->  
+            <el-table-column prop="status" header-align="center" align="center" label="状态">  
+                <template slot-scope="scope">  
+                    <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>  
+                    <el-tag v-else size="small">正常</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 v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>  
+                    <!-- 删除按钮，只有在有权限时显示 -->  
+                    <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</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="totalCount" layout="total, sizes, prev, pager, next, jumper">  
+        </el-pagination>  
+        
+        <!-- 弹窗，用于新增或修改用户 -->  
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>  
+    </div>  
+</template>  
 
-<script>
-import AddOrUpdate from './user-add-or-update'
-export default {
-    data() {
-        return {
-            dataForm: {
-                userName: ''
-            },
-            dataList: [],
-            pageIndex: 1,
-            pageSize: 10,
-            totalCount: 0,
-            dataListLoading: false,
-            dataListSelections: [],
-            addOrUpdateVisible: false
-        }
-    },
-    components: {
-        AddOrUpdate
-    },
-    activated() {
-        this.getDataList()
-    },
-    methods: {
-        // 获取数据列表
-        getDataList() {
-            this.dataListLoading = true
-            this.$http({
-                url: this.$http.adornUrl('/sys/user/list'),
-                method: 'get',
-                params: this.$http.adornParams({
-                    'page': this.pageIndex,
-                    'limit': this.pageSize,
-                    'username': this.dataForm.userName
-                })
-            }).then(({ data }) => {
-                if (data && data.code === 200) {
-                    this.dataList = data.page.list
-                    this.totalCount = data.page.totalCount
-                } else {
-                    this.dataList = []
-                    this.totalCount = 0
-                }
-                this.dataListLoading = false
-            })
-        },
-        // 每页数
-        sizeChangeHandle(val) {
-            this.pageSize = val
-            this.pageIndex = 1
-            this.getDataList()
-        },
-        // 当前页
-        currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
-        },
-        // 多选
-        selectionChangeHandle(val) {
-            this.dataListSelections = val
-        },
-        // 新增 / 修改
-        addOrUpdateHandle(id) {
-            this.addOrUpdateVisible = true
-            this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(id)
-            })
-        },
-        // 删除
-        deleteHandle(id) {
-            var userIds = id ? [id] : this.dataListSelections.map(item => item.userId)
-            this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-                this.$http({
-                    url: this.$http.adornUrl('/sys/user/delete'),
-                    method: 'post',
-                    data: this.$http.adornData(userIds, false)
-                }).then(({ data }) => {
-                    if (data && data.code === 200) {
-                        this.$message({
-                            message: '操作成功',
-                            type: 'success',
-                            duration: 1500,
-                            onClose: () => this.getDataList()
-                        })
-                    } else {
-                        this.$message.error(data.msg)
-                    }
-                })
-            }).catch(() => { })
-        }
-    }
-}
-</script>
+<script>  
+import AddOrUpdate from './user-add-or-update' // 导入新增/修改用户组件  
+
+export default {  
+    data() {  
+        return {  
+            dataForm: {  
+                userName: '' // 搜索表单数据  
+            },  
+            dataList: [], // 用户数据列表  
+            pageIndex: 1, // 当前页码  
+            pageSize: 10, // 每页显示条数  
+            totalCount: 0, // 总记录数  
+            dataListLoading: false, // 数据加载状态  
+            dataListSelections: [], // 选中的用户列表  
+            addOrUpdateVisible: false // 控制新增/修改弹窗的可见性  
+        }  
+    },  
+    components: {  
+        AddOrUpdate // 注册新增/修改用户组件  
+    },  
+    activated() {  
+        this.getDataList() // 组件激活时获取用户数据列表  
+    },  
+    methods: {  
+        // 获取用户数据列表  
+        getDataList() {  
+            this.dataListLoading = true // 设置加载状态为true  
+            this.$http({  
+                url: this.$http.adornUrl('/sys/user/list'), // 获取用户列表的API地址  
+                method: 'get',  
+                params: this.$http.adornParams({  
+                    'page': this.pageIndex, // 当前页码  
+                    'limit': this.pageSize, // 每页显示条数  
+                    'username': this.dataForm.userName // 用户名搜索条件  
+                })  
+            }).then(({ data }) => {  
+                if (data && data.code === 200) {  
+                    // 请求成功，更新用户数据列表和总记录数  
+                    this.dataList = data.page.list  
+                    this.totalCount = data.page.totalCount  
+                } else {  
+                    // 请求失败，清空数据列表  
+                    this.dataList = []  
+                    this.totalCount = 0  
+                }  
+                this.dataListLoading = false // 设置加载状态为false  
+            })  
+        },  
+        // 每页数变化处理  
+        sizeChangeHandle(val) {  
+            this.pageSize = val // 更新每页显示条数  
+            this.pageIndex = 1 // 重置为第一页  
+            this.getDataList() // 重新获取数据列表  
+        },  
+        // 当前页变化处理  
+        currentChangeHandle(val) {  
+            this.pageIndex = val // 更新当前页码  
+            this.getDataList() // 重新获取数据列表  
+        },  
+        // 多选处理  
+        selectionChangeHandle(val) {  
+            this.dataListSelections = val // 更新选中的用户列表  
+        },  
+        // 新增或修改用户处理  
+        addOrUpdateHandle(id) {  
+            this.addOrUpdateVisible = true // 显示新增/修改弹窗  
+            this.$nextTick(() => {  
+                this.$refs.addOrUpdate.init(id) // 初始化弹窗（传入用户ID）  
+            })  
+        },  
+        // 删除用户处理  
+        deleteHandle(id) {  
+            // 确定要删除的用户ID（单个或多个）  
+            var userIds = id ? [id] : this.dataListSelections.map(item => item.userId)  
+            this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {  
+                confirmButtonText: '确定',  
+                cancelButtonText: '取消',  
+                type: 'warning'  
+            }).then(() => {  
+                // 确认删除  
+                this.$http({  
+                    url: this.$http.adornUrl('/sys/user/delete'), // 删除用户的API地址  
+                    method: 'post',  
+                    data: this.$http.adornData(userIds, false) // 发送要删除的用户ID  
+                }).then(({ data }) => {  
+                    if (data && data.code === 200) {  
+                        // 删除成功  
+                        this.$message({  
+                            message: '操作成功',  
+                            type: 'success',  
+                            duration: 1500,  
+                            onClose: () => this.getDataList() // 关闭提示时重新获取数据列表  
+                        })  
+                    } else {  
+                        // 删除失败，显示错误信息  
+                        this.$message.error(data.msg)  
+                    }  
+                })  
+            }).catch(() => {   
+                // 取消删除操作的处理逻辑（空）  
+            })  
+        }  
+    }  
+}  
+</script>

src/views/modules/wx/account/wx-account-access-info.vue

@@ -1,54 +1,63 @@
-<template>
-    <el-dialog title="开发接入信息" :close-on-click-modal="false" :visible.sync="visible">
-        <div>
-            <div class="list-item"><span class="label">公众号:</span>{{account.name}}</div>
-            <div class="list-item"><span class="label">token:</span>{{account.token}}</div>
-            <div class="list-item"><span class="label">aesKey:</span>{{account.aesKey}}</div>
-            <div class="list-item">
-                <span class="label">接入链接:</span>
-                <span v-html="accessUrl"></span>
-            </div>
-            
-        </div>
-    </el-dialog>
-</template>
+<template>  
+    <!-- 开发接入信息对话框 -->  
+    <el-dialog title="开发接入信息" :close-on-click-modal="false" :visible.sync="visible">  
+        <div>  
+            <!-- 公众号信息 -->  
+            <div class="list-item"><span class="label">公众号:</span>{{account.name}}</div>  
+            <!-- token 信息 -->  
+            <div class="list-item"><span class="label">token:</span>{{account.token}}</div>  
+            <!-- aesKey 信息 -->  
+            <div class="list-item"><span class="label">aesKey:</span>{{account.aesKey}}</div>  
+            <!-- 接入链接 -->  
+            <div class="list-item">  
+                <span class="label">接入链接:</span>  
+                <span v-html="accessUrl"></span> <!-- 使用 v-html 渲染动态生成的接入链接 -->  
+            </div>  
+        </div>  
+    </el-dialog>  
+</template>  
 
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            account: {},
-        }
-    },
-    computed: {
-        accessUrl() {
-            let host = location.host;
-            if(/^(\d(.\d){3})|localhost/.test(host)){
-                host='<span class="text-red">正式域名</span>'
-            }
-            return location.protocol + '//' + host + '/wx/wx/msg/' + this.account.appid
-        }
-    },
-    methods: {
-        init(item) {
-            this.visible = true
-            if (item && item.appid) {
-                this.account = item
-            }
-        },
-    }
-}
-</script>
-<style scoped>
-.list-item{
-    line-height: 30px;
-}
-.label{
-    width: 100px;
-    display: inline-block;
-    margin-right: 10px;
-    font-weight: bold;
-    text-align: right;
-}
-</style>
+<script>  
+export default {  
+    data() {  
+        return {  
+            visible: false, // 控制对话框的可见状态  
+            account: {}, // 存储公众号的相关信息  
+        }  
+    },  
+    computed: {  
+        // 计算生成接入链接  
+        accessUrl() {  
+            let host = location.host; // 获取当前主机名  
+            // 检查主机名是否是 IP 或 localhost  
+            if(/^(\d(.\d){3})|localhost/.test(host)){  
+                host='<span class="text-red">正式域名</span>' // 如果是 IP 或 localhost，返回红色字体提示  
+            }  
+            // 返回完整的接入链接  
+            return location.protocol + '//' + host + '/wx/wx/msg/' + this.account.appid  
+        }  
+    },  
+    methods: {  
+        // 初始化对话框，设置可见状态和账户信息  
+        init(item) {  
+            this.visible = true // 设置对话框为可见  
+            if (item && item.appid) {  
+                this.account = item // 如果传入的项目包含 appid，则将其赋值给 account  
+            }  
+        },  
+    }  
+}  
+</script>  
+
+<style scoped>  
+.list-item{  
+    line-height: 30px; /* 每一项的行高 */  
+}  
+.label{  
+    width: 100px; /* 标签的宽度 */  
+    display: inline-block; /* 使标签在每行中内联显示 */  
+    margin-right: 10px; /* 标签与内容之间的右边距 */  
+    font-weight: bold; /* 标签加粗 */  
+    text-align: right; /* 标签文本右对齐 */  
+}  
+</style>

src/views/modules/wx/account/wx-account-add-or-update.vue

@@ -1,118 +1,145 @@
-<template>
-  <el-dialog
-    title="新增/修改"
-    :close-on-click-modal="false"
-    :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
-    <el-form-item label="公众号名称" prop="name">
-      <el-input v-model="dataForm.name" placeholder="公众号名称"></el-input>
-    </el-form-item>
-    <div class="padding text-gray">测试号可选择服务号，不同类型账号、是否认证可使用功能权限不同，<a href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html">参考文档</a></div>
-    <el-row>
-        <el-col :span="12">
-            <el-form-item label="公众号类型" prop="type">
-                <el-select v-model="dataForm.type" placeholder="公众号类型">
-                    <el-option v-for="(name,key) in ACCOUNT_TYPES" :key="name" :label="name" :value="key"></el-option>
-                </el-select>
-            </el-form-item>
-        </el-col>
-        <el-col :span="12">
-            <el-form-item label="是否认证" prop="verified">
-                <el-switch v-model="dataForm.verified" placeholder="是否认证"></el-switch>
-            </el-form-item>
-        </el-col>
-    </el-row>
+<template>  
+  <!-- 新增/修改对话框 -->  
+  <el-dialog  
+    title="新增/修改"  
+    :close-on-click-modal="false"  
+    :visible.sync="visible">  
     
-    <el-form-item label="appid" prop="appid">
-      <el-input v-model="dataForm.appid" placeholder="appid"></el-input>
-    </el-form-item>
-    <el-form-item label="appsecret" prop="secret">
-      <el-input v-model="dataForm.secret" placeholder="appsecret"></el-input>
-    </el-form-item>
-    <el-form-item label="token" prop="token">
-      <el-input v-model="dataForm.token" placeholder="token"></el-input>
-    </el-form-item>
-    <el-form-item label="aesKey" prop="aesKey">
-      <el-input v-model="dataForm.aesKey" placeholder="aesKey，可为空"></el-input>
-    </el-form-item>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-  export default {
-    data () {
-      return {
-        visible: false,
-        dataForm: {  
-          appid: '',
-          name: '',
-          type:'2',
-          verified:true,
-          secret: '',
-          token: 'my_weixin_token_',
-          aesKey: ''
-        },
-        dataRule: {
-          name: [
-            { required: true, message: '公众号名称不能为空', trigger: 'blur' }
-          ],
-          appid: [
-            { required: true, message: 'appid不能为空', trigger: 'blur' }
-          ],
-          secret: [
-            { required: true, message: 'appsecret不能为空', trigger: 'blur' }
-          ]
-        }
-      }
-    },
-    computed: mapState({
-        ACCOUNT_TYPES: state=>state.wxAccount.ACCOUNT_TYPES
-    }),
-    methods: {
-      init (item) {
-        this.visible = true
-        if(item && item.appid){
-            this.dataForm = item
-            this.dataForm.type = item.type+''
-        }else{
-            this.$nextTick(() => {
-                this.$refs['dataForm'].resetFields()
-            })
-        }
+    <!-- 表单区域 -->  
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">  
+      
+      <!-- 公众号名称输入 -->  
+      <el-form-item label="公众号名称" prop="name">  
+        <el-input v-model="dataForm.name" placeholder="公众号名称"></el-input>  
+      </el-form-item>  
+      
+      <!-- 提示信息 -->  
+      <div class="padding text-gray">测试号可选择服务号，不同类型账号、是否认证可使用功能权限不同，<a href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html">参考文档</a></div>  
+      
+      <el-row>  
+        <el-col :span="12">  
+          <!-- 公众号类型选择 -->  
+          <el-form-item label="公众号类型" prop="type">  
+            <el-select v-model="dataForm.type" placeholder="公众号类型">  
+              <el-option v-for="(name,key) in ACCOUNT_TYPES" :key="name" :label="name" :value="key"></el-option>  
+            </el-select>  
+          </el-form-item>  
+        </el-col>  
         
-      },
-      // 表单提交
-      dataFormSubmit () {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            this.$http({
-              url: this.$http.adornUrl(`/manage/wxAccount/save`),
-              method: 'post',
-           data: this.$http.adornData(this.dataForm)
-            }).then(({data}) => {
-              if (data && data.code === 200) {
-                this.$message({
-                  message: '操作成功',
-                  type: 'success',
-                  duration: 1500,
-                  onClose: () => {
-                    this.visible = false
-                    this.$emit('refreshDataList')
-                  }
-                })
-              } else {
-                this.$message.error(data.msg)
-              }
-            })
-          }
-        })
-      }
-    }
-  }
-</script>
+        <el-col :span="12">  
+          <!-- 是否认证开关 -->  
+          <el-form-item label="是否认证" prop="verified">  
+            <el-switch v-model="dataForm.verified" placeholder="是否认证"></el-switch>  
+          </el-form-item>  
+        </el-col>  
+      </el-row>  
+      
+      <!-- appid 输入 -->  
+      <el-form-item label="appid" prop="appid">  
+        <el-input v-model="dataForm.appid" placeholder="appid"></el-input>  
+      </el-form-item>  
+      
+      <!-- appsecret 输入 -->  
+      <el-form-item label="appsecret" prop="secret">  
+        <el-input v-model="dataForm.secret" placeholder="appsecret"></el-input>  
+      </el-form-item>  
+      
+      <!-- token 输入 -->  
+      <el-form-item label="token" prop="token">  
+        <el-input v-model="dataForm.token" placeholder="token"></el-input>  
+      </el-form-item>  
+      
+      <!-- aesKey 输入 -->  
+      <el-form-item label="aesKey" prop="aesKey">  
+        <el-input v-model="dataForm.aesKey" placeholder="aesKey，可为空"></el-input>  
+      </el-form-item>  
+      
+    </el-form>  
+    
+    <!-- 对话框底部按钮 -->  
+    <span slot="footer" class="dialog-footer">  
+      <el-button @click="visible = false">取消</el-button>  
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>  
+    </span>  
+  </el-dialog>  
+</template>  
+
+<script>  
+import { mapState } from 'vuex' // 从 Vuex 导入 mapState 方法以映射状态  
+
+export default {  
+    data () {  
+      return {  
+        visible: false, // 控制对话框的可见状态  
+        dataForm: { // 用于保存表单数据  
+          appid: '',  
+          name: '',  
+          type:'2', // 默认类型  
+          verified: true, // 默认是否认证为 true  
+          secret: '',  
+          token: 'my_weixin_token_', // 默认token  
+          aesKey: '' // aesKey，可为空  
+        },  
+        dataRule: { // 表单验证规则  
+          name: [  
+            { required: true, message: '公众号名称不能为空', trigger: 'blur' } // 公众号名称必填  
+          ],  
+          appid: [  
+            { required: true, message: 'appid不能为空', trigger: 'blur' } // appid必填  
+          ],  
+          secret: [  
+            { required: true, message: 'appsecret不能为空', trigger: 'blur' } // appsecret必填  
+          ]  
+        }  
+      }  
+    },  
+    computed: mapState({  
+        ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES // 从 store 中获取账号类型  
+    }),  
+    methods: {  
+      // 初始化对话框，设置可见状态和表单数据  
+      init (item) {  
+        this.visible = true // 显示对话框  
+        if(item && item.appid) {  
+            this.dataForm = item // 设置表单数据为传入的项  
+            this.dataForm.type = item.type + '' // 将类型转换为字符串  
+        } else {  
+            // 重置表单字段  
+            this.$nextTick(() => {  
+                this.$refs['dataForm'].resetFields()  
+            })  
+        }  
+      },  
+      // 表单提交处理  
+      dataFormSubmit () {  
+        // 验证表单  
+        this.$refs['dataForm'].validate((valid) => {  
+          if (valid) {  
+            // 发送 POST 请求保存数据  
+            this.$http({  
+              url: this.$http.adornUrl(`/manage/wxAccount/save`), // 请求的 URL  
+              method: 'post',  
+              data: this.$http.adornData(this.dataForm) // 使用 adornData 方法处理数据  
+            }).then(({data}) => {  
+              if (data && data.code === 200) {  
+                // 操作成功，显示成功消息并关闭对话框  
+                this.$message({  
+                  message: '操作成功',  
+                  type: 'success',  
+                  duration: 1500,  
+                  onClose: () => {  
+                    this.visible = false // 隐藏对话框  
+                    this.$emit('refreshDataList') // 触发刷新数据列表事件  
+                  }  
+                })  
+              } else {  
+                // 操作失败，显示错误消息  
+                this.$message.error(data.msg)  
+              }  
+            })  
+          }  
+        })  
+      }  
+    }  
+}  
+</script>

src/views/modules/wx/article-add-or-update.vue

@@ -1,68 +1,101 @@
 <template>
+    <!-- 根据visible属性的值控制整个组件内容的显示与隐藏，当visible为true时显示 -->
     <div v-show="visible">
+        <!-- 定义一个表单，绑定了dataForm数据模型，使用了dataRule验证规则，设置了表单尺寸为迷你型，标签宽度为80px -->
         <el-form :model="dataForm" :rules="dataRule" ref="dataForm" size="mini" label-width="80px">
+            <!-- 第一行布局，使用el-row包裹 -->
             <el-row>
+                <!-- 占12列，用于放置文章标题相关的表单元素 -->
                 <el-col :span="12">
+                    <!-- 文章标题的表单项，设置了必填验证，对应dataForm中的title属性 -->
                     <el-form-item label="文章标题" prop="title" required>
+                        <!-- 使用el-input组件实现输入框，双向绑定dataForm.title，设置了最大长度为1024，有占位提示文字 -->
                         <el-input v-model="dataForm.title" :maxlength="1024" placeholder="标题"></el-input>
                     </el-form-item>
                 </el-col>
+                <!-- 同样占12列，用于放置文章类型相关的表单元素 -->
                 <el-col :span="12">
+                    <!-- 文章类型的表单项，设置了必填验证，对应dataForm中的type属性 -->
                     <el-form-item label="文章类型" prop="type" required>
+                        <!-- 使用el-select组件实现下拉选择框，双向绑定dataForm.type，有占位提示文字 -->
                         <el-select v-model="dataForm.type" placeholder="选择文章类型">
+                            <!-- 循环遍历ARTICLE_TYPES对象，生成下拉选项，选项的标签显示为name，值为key，允许用户创建新的选项 -->
                             <el-option v-for="(name,key) in ARTICLE_TYPES" :key="name" :label="name" :value="key" allow-create></el-option>
                         </el-select>
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 第二行布局 -->
             <el-row>
+                <!-- 占12列，用于放置一级目录相关的表单元素 -->
                 <el-col :span="12">
+                    <!-- 一级目录的表单项，对应dataForm中的category属性 -->
                     <el-form-item label="一级目录" prop="category">
+                        <!-- 使用el-input组件实现输入框，双向绑定dataForm.category，设置了最大长度为50，有占位提示文字 -->
                         <el-input :maxlength="50" v-model="dataForm.category" placeholder="一级目录"></el-input>
                     </el-form-item>
                 </el-col>
+                <!-- 占12列，用于放置二级分类相关的表单元素 -->
                 <el-col :span="12">
+                    <!-- 二级分类的表单项，对应dataForm中的subCategory属性 -->
                     <el-form-item label="二级分类" prop="subCategory">
+                        <!-- 使用el-input组件实现输入框，双向绑定dataForm.subCategory，设置了最大长度为50，有占位提示文字 -->
                         <el-input :maxlength="50" v-model="dataForm.subCategory" placeholder="二级目录"></el-input>
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 指向外链的表单项，对应dataForm中的targetLink属性 -->
             <el-form-item label="指向外链" prop="targetLink">
+                <!-- 使用el-input组件实现输入框，双向绑定dataForm.targetLink，有占位提示文字 -->
                 <el-input v-model="dataForm.targetLink" placeholder="指向外链"></el-input>
             </el-form-item>
+            <!-- 摘要的表单项，对应dataForm中的summary属性 -->
             <el-form-item label="摘要" prop="summary">
+                <!-- 使用el-input组件实现文本域输入框，双向绑定dataForm.summary，设置了行数为3，最大长度为512，显示字数限制提示 -->
                 <el-input v-model="dataForm.summary" placeholder="摘要" type="textarea" rows="3" maxlength="512" show-word-limit></el-input>
             </el-form-item>
+            <!-- 标签的表单项，使用了自定义的tags-editor组件，双向绑定dataForm.tags -->
             <el-form-item label="标签" prop="tags">
                 <tags-editor v-model="dataForm.tags"></tags-editor>
             </el-form-item>
+            <!-- 封面图的表单项，对应dataForm中的image属性 -->
             <el-form-item label="封面图" prop="image">
+                <!-- 使用el-input组件实现输入框，双向绑定dataForm.image，有占位提示文字 -->
                 <el-input v-model="dataForm.image" placeholder="图片链接">
+                    <!-- 插入一个自定义的OssUploader组件，用于上传图片，上传成功后将返回值赋给dataForm.image -->
                     <OssUploader slot="append" @uploaded="dataForm.image=$event"></OssUploader>
                 </el-input>
             </el-form-item>
+            <!-- 引入一个富文本编辑器组件，双向绑定dataForm.content -->
             <tinymce-editor ref="editor" v-model="dataForm.content"></tinymce-editor>
         </el-form>
+        <!-- 距离顶部有一定间距，靠右对齐的按钮区域 -->
         <div class="margin-top text-right">
+            <!-- 取消按钮，点击时通过$emit触发父组件的hide事件 -->
             <el-button @click="$emit('hide')">取消</el-button>
+            <!-- 确定按钮，类型为主要按钮，点击时调用dataFormSubmit方法进行表单提交 -->
             <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
         </div>
     </div>
 </template>
 
 <script>
+// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
 import { mapState } from 'vuex'
 export default {
-    name:'article-add-or-update',
+    name: 'article-add-or-update',
     components: {
+        // 异步加载TinymceEditor组件，应该是用于编辑文章内容的富文本编辑器组件
         TinymceEditor: () => import("@/components/tinymce-editor"),
+        // 异步加载tags-editor组件，用于编辑文章标签
         tagsEditor: () => import("@/components/tags-editor"),
+        // 异步加载OssUploader组件，用于上传图片（可能是上传到OSS存储服务）
         OssUploader: () => import('../oss/oss-uploader')
     },
-    props:{
-        visible:{
-            type:Boolean,
-            default:false
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -94,37 +127,45 @@ export default {
         };
     },
     computed: mapState({
-        ARTICLE_TYPES: state=>state.article.ARTICLE_TYPES
+        // 从Vuex的state中获取article模块下的ARTICLE_TYPES状态，映射到组件的计算属性中，用于文章类型下拉框的选项数据
+        ARTICLE_TYPES: state => state.article.ARTICLE_TYPES
     }),
     methods: {
         init(id) {
+            // 初始化时设置dataForm的id属性，传入的id为空字符串则设置为空，否则使用传入的值
             this.dataForm.id = id || "";
             this.$nextTick(() => {
+                // 表单DOM更新后，重置表单所有字段的值
                 this.$refs["dataForm"].resetFields();
                 if (id > 0) {
+                    // 如果传入的id大于0，表示是编辑已有文章，发起HTTP请求获取文章详情信息
                     this.$http({
                         url: this.$http.adornUrl(`/manage/article/info/${this.dataForm.id}`),
                         method: "get",
                         params: this.$http.adornParams()
                     }).then(({ data }) => {
                         if (data && data.code === 200) {
-                            this.dataForm=data.article;
+                            // 如果请求成功，将返回的文章数据赋值给dataForm，同时将文章类型转为字符串类型（可能原数据类型不一致）
+                            this.dataForm = data.article;
                             this.dataForm.type = data.article.type + "";
                         }
                     });
                 }
             });
         },
-        // 表单提交
+        // 表单提交方法
         dataFormSubmit() {
+            // 对表单进行验证，验证结果通过回调函数的参数valid返回
             this.$refs["dataForm"].validate(valid => {
                 if (valid) {
+                    // 如果表单验证通过，发起HTTP请求保存文章数据（可能是新增或更新操作，根据后端接口逻辑）
                     this.$http({
                         url: this.$http.adornUrl(`/manage/article/save`),
                         method: "post",
                         data: this.$http.adornData(this.dataForm)
                     }).then(({ data }) => {
                         if (data && data.code === 200) {
+                            // 如果保存成功，弹出成功提示信息，提示框关闭后通过$emit触发父组件的refreshDataList和hide事件
                             this.$message({
                                 message: "操作成功",
                                 type: "success",
@@ -135,6 +176,7 @@ export default {
                                 }
                             });
                         } else {
+                            // 如果保存失败，弹出错误提示信息
                             this.$message.error(data.msg);
                         }
                     });
@@ -144,12 +186,14 @@ export default {
         imgUploadSuccess(response, file, fileList) {
             console.log(response);
             if (response.code == 200) {
+                // 如果图片上传成功（根据返回数据的状态码判断），将返回的图片数据赋值给dataForm.image
                 this.dataForm.image = response.data;
                 console.log("this.article", this.article);
             } else {
+                // 如果上传失败，弹出警告提示信息
                 this.$message.warning(response.msg);
             }
         }
     }
 };
-</script>
+</script>

src/views/modules/wx/article.vue

@@ -1,37 +1,56 @@
 <template>
+    <!-- 外层容器div -->
     <div>
+        <!-- 根据条件控制显示内容，当addOrUpdateVisible为false时显示以下部分 -->
         <div v-show="!addOrUpdateVisible">
+            <!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
             <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+                <!-- 文章类型选择的表单项 -->
                 <el-form-item>
+                    <!-- 使用el-select组件实现下拉选择框，双向绑定dataForm.type，有占位提示文字，选项通过循环ARTICLE_TYPES生成 -->
                     <el-select v-model="dataForm.type" placeholder="选择文章类型">
                         <el-option v-for="(name,key) in ARTICLE_TYPES" :key="key" :label="name" :value="key" allow-create></el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 文章标题输入的表单项，使用el-input组件，双向绑定dataForm.title，有占位提示文字且可清空输入内容 -->
                 <el-form-item>
                     <el-input v-model="dataForm.title" placeholder="标题" clearable></el-input>
                 </el-form-item>
+                <!-- 操作按钮所在的表单项 -->
                 <el-form-item>
+                    <!-- 查询按钮，点击时先将当前页码设置为1，然后调用getDataList方法获取数据 -->
                     <el-button @click="pageIndex=1;getDataList()">查询</el-button>
+                    <!-- 新增按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为主要按钮，点击时调用addOrUpdateHandle方法 -->
                     <el-button v-if="isAuth('wx:article:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+                    <!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
                     <el-button v-if="isAuth('wx:article:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
                 </el-form-item>
             </el-form>
+            <!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
             <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+                <!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
                 <el-table-column type="selection" header-align="center" align="center" width="50">
                 </el-table-column>
+                <!-- ID列，对应dataList中数据项的id属性，设置了表头和内容的对齐方式以及列标题 -->
                 <el-table-column prop="id" header-align="center" align="center" label="ID">
                 </el-table-column>
+                <!-- 文章类型列，对应dataList中数据项的type属性，使用formatter函数格式化显示内容，设置了表头和内容的对齐方式以及列标题 -->
                 <el-table-column prop="type" header-align="center" align="center" :formatter="articleTypeFormat" label="文章类型">
                 </el-table-column>
+                <!-- 标题列，对应dataList中数据项的title属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题，内容用a标签包裹可点击跳转 -->
                 <el-table-column prop="title" header-align="center" align="center" show-overflow-tooltip label="标题">
                     <a :href="scope.row.targetLink" slot-scope="scope">{{scope.row.title}}</a>
                 </el-table-column>
+                <!-- 一级分类列，对应dataList中数据项的category属性，设置了表头和内容的对齐方式以及列标题 -->
                 <el-table-column prop="category" header-align="center" align="center" label="一级分类">
                 </el-table-column>
+                <!-- 二级分类列，对应dataList中数据项的subCategory属性，设置了表头和内容的对齐方式以及列标题 -->
                 <el-table-column prop="subCategory" header-align="center" align="center" label="二级分类">
                 </el-table-column>
+                <!-- 打开次数列，对应dataList中数据项的openCount属性，设置了表头和内容的对齐方式以及列标题 -->
                 <el-table-column prop="openCount" header-align="center" align="center" label="打开次数">
                 </el-table-column>
+                <!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了修改和删除按钮 -->
                 <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                     <template slot-scope="scope">
                         <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
@@ -39,16 +58,19 @@
                     </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="totalCount" layout="total, sizes, prev, pager, next, jumper">
             </el-pagination>
         </div>
-         <!-- 新增 / 修改  -->
-        <add-or-update :visible="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @hide="addOrUpdateVisible=false"></add-or-update>
+        <!-- 新增/修改组件，通过属性和事件与父组件进行交互 -->
+        <add-or-update :visible="addOrUpdateVisible" ref="addOr-update" @refreshDataList="getDataList" @hide="addOrUpdateVisible=false"></add-or-update>
     </div>
 </template>
 
 <script>
+// 引入新增/修改组件
 import AddOrUpdate from './article-add-or-update'
+// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
 import { mapState } from 'vuex'
 export default {
     components: {
@@ -70,15 +92,19 @@ export default {
         }
     },
     computed: mapState({
-        ARTICLE_TYPES: state=>state.article.ARTICLE_TYPES
+        // 从Vuex的state中获取article模块下的ARTICLE_TYPES状态，映射到组件的计算属性中，用于文章类型的格式化显示等操作
+        ARTICLE_TYPES: state => state.article.ARTICLE_TYPES
     }),
     mounted() {
+        // 组件挂载完成后，调用getDataList方法获取初始数据列表
         this.getDataList()
     },
     methods: {
-        // 获取数据列表
+        // 获取数据列表的方法
         getDataList() {
+            // 设置正在加载数据的状态为true
             this.dataListLoading = true
+            // 发起HTTP请求获取文章数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
             this.$http({
                 url: this.$http.adornUrl('/manage/article/list'),
                 method: 'get',
@@ -91,52 +117,60 @@ export default {
                     'order': 'desc'
                 })
             }).then(({ data }) => {
+                // 根据返回数据的状态码判断是否请求成功
                 if (data && data.code === 200) {
+                    // 如果成功，更新数据列表和总记录数
                     this.dataList = data.page.list
                     this.totalCount = data.page.totalCount
                 } else {
+                    // 如果失败，清空数据列表和总记录数
                     this.dataList = []
                     this.totalCount = 0
                 }
+                // 请求完成后，设置正在加载数据的状态为false
                 this.dataListLoading = false
             })
         },
-        // 每页数
+        // 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
         sizeChangeHandle(val) {
             this.pageSize = val
             this.pageIndex = 1
             this.getDataList()
         },
-        // 当前页
+        // 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
         currentChangeHandle(val) {
             this.pageIndex = val
             this.getDataList()
         },
-        // 多选
+        // 处理表格中选择项变化的方法，更新选中的数据项列表
         selectionChangeHandle(val) {
             this.dataListSelections = val
         },
-        // 新增 / 修改
+        // 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入文章的id（可为空表示新增）
         addOrUpdateHandle(id) {
             this.addOrUpdateVisible = true
             this.$nextTick(() => {
                 this.$refs.addOrUpdate.init(id)
             })
         },
-        // 删除
+        // 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
         deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.id)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+            // 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的id数组进行批量删除
+            var ids = id? [id] : this.dataListSelections.map(item => item.id)
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
                 this.$http({
                     url: this.$http.adornUrl('/manage/article/delete'),
                     method: 'post',
                     data: this.$http.adornData(ids, false)
                 }).then(({ data }) => {
+                    // 根据返回数据判断删除操作是否成功
                     if (data && data.code === 200) {
+                        // 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
                         this.$message({
                             message: '操作成功',
                             type: 'success',
@@ -144,14 +178,16 @@ export default {
                             onClose: () => this.getDataList()
                         })
                     } else {
+                        // 如果失败，弹出错误提示信息
                         this.$message.error(data.msg)
                     }
                 })
             })
         },
+        // 文章类型格式化的方法，根据数据项中的文章类型值，从ARTICLE_TYPES对象中获取对应的显示名称并返回
         articleTypeFormat(row, column, cellValue) {
             return this.ARTICLE_TYPES[cellValue];
         }
     }
 }
-</script>
+</script>

src/views/modules/wx/assets/assets-selector.vue

@@ -1,38 +1,44 @@
-<template>
-    <el-dialog title="选择素材"  :visible.sync="dataVisible" :modal="true" append-to-body  @close="onClose">
-        <material-news v-if="selectType=='news'" @selected="onSelect" selectMode></material-news>
-        <material-file v-else :fileType="selectType" @selected="onSelect" selectMode></material-file>
-    </el-dialog>
-</template>
-<script>
-export default {
-    name:"assets-selector",
-    data:function (){
-        return {
-            dataVisible : this.visible
-        }
-    },
-    components:{
-        MaterialFile:()=>import('./material-file'),
-        MaterialNews:()=>import('./material-news')
-    },
-    props:{
-        selectType:{// image、voice、video、news
-            type:String,
-            default:'image'
-        },
-        visible:{
-            type:Boolean,
-            default:false
-        }
-    },
-    methods:{
-        onSelect(itemInfo){
-            this.$emit('selected', itemInfo)
-        },
-        onClose(){
-            this.$emit('onClose')
-        }
-    }
-}
+<template>  
+    <!-- 选择素材的对话框 -->  
+    <el-dialog title="选择素材" :visible.sync="dataVisible" :modal="true" append-to-body @close="onClose">  
+        <!-- 根据选择的素材类型加载不同的子组件 -->  
+        <material-news v-if="selectType === 'news'" @selected="onSelect" selectMode></material-news>  
+        <material-file v-else :fileType="selectType" @selected="onSelect" selectMode></material-file>  
+    </el-dialog>  
+</template>  
+
+<script>  
+export default {  
+    name: "assets-selector", // 组件名称  
+    data: function () {  
+        return {  
+            dataVisible: this.visible // 初始化 dataVisible，与父组件的 visible 属性保持同步  
+        }  
+    },  
+    components: {  
+        // 懒加载子组件  
+        MaterialFile: () => import('./material-file'), // 导入 MaterialFile 组件  
+        MaterialNews: () => import('./material-news') // 导入 MaterialNews 组件  
+    },  
+    props: {  
+        selectType: { // 所选素材的类型（如 image、voice、video、news）  
+            type: String,  
+            default: 'image' // 默认类型为 'image'  
+        },  
+        visible: { // 父组件传递进来的控制对话框可见性的属性  
+            type: Boolean,  
+            default: false // 默认对话框不可见  
+        }  
+    },  
+    methods: {  
+        // 子组件素材选择事件处理  
+        onSelect(itemInfo) {  
+            this.$emit('selected', itemInfo) // 将选择的素材信息向父组件发射事件  
+        },  
+        // 关闭对话框事件处理  
+        onClose() {  
+            this.$emit('onClose') // 向父组件发射关闭事件  
+        }  
+    }  
+}  
 </script>

src/views/modules/wx/assets/material-file-add-or-update.vue

@@ -1,103 +1,118 @@
-<template>
-    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
-        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-            <el-form-item label="媒体文件">
-                <el-button type="primary">
-                    选择文件
-                    <input type="file" style="opacity: 0;height: 100%;position: absolute;left: 0;top: 0;" @change="onFileChange" />
-                </el-button>
-                <div>{{dataForm.file.name}}</div>
-            </el-form-item>
-            <el-form-item label="媒体类型" prop="mediaType">
-                <el-select v-model="dataForm.mediaType" placeholder="媒体类型" style="width:100%">
-                    <el-option label="图片（2M以内，支持PNG\JPEG\JPG\GIF）" value="image"></el-option>
-                    <el-option label="视频（10M以内，只支持MP4）" value="video"></el-option>
-                    <el-option label="语音（2M、60s以内，支持AMR\MP3）" value="voice"></el-option>
-                    <el-option label="缩略图（64K以内JPG）" value="thumb"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="素材名称" prop="fileName">
-                <el-input v-model="dataForm.fileName" placeholder="为便于管理建议按用途分类+素材内容命名"></el-input>
-            </el-form-item>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="visible = false">取消</el-button>
-            <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{uploading?'提交中...':'提交'}}</el-button>
-        </span>
-    </el-dialog>
-</template>
+<template>  
+    <!-- 对话框，标题根据是否有 id 决定是“新增”还是“修改” -->  
+    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">  
+        <!-- 表单区域 -->  
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">  
+            <!-- 媒体文件选择 -->  
+            <el-form-item label="媒体文件">  
+                <el-button type="primary">  
+                    选择文件  
+                    <!-- 隐藏的文件输入框，选择文件后触发 onFileChange 方法 -->  
+                    <input type="file" style="opacity: 0; height: 100%; position: absolute; left: 0; top: 0;" @change="onFileChange" />  
+                </el-button>  
+                <!-- 显示已选择的文件名称 -->  
+                <div>{{dataForm.file.name}}</div>  
+            </el-form-item>  
+            <!-- 媒体类型选择 -->  
+            <el-form-item label="媒体类型" prop="mediaType">  
+                <el-select v-model="dataForm.mediaType" placeholder="媒体类型" style="width:100%">  
+                    <el-option label="图片（2M以内，支持PNG\JPEG\JPG\GIF）" value="image"></el-option>  
+                    <el-option label="视频（10M以内，只支持MP4）" value="video"></el-option>  
+                    <el-option label="语音（2M、60s以内，支持AMR\MP3）" value="voice"></el-option>  
+                    <el-option label="缩略图（64K以内JPG）" value="thumb"></el-option>  
+                </el-select>  
+            </el-form-item>  
+            <!-- 素材名称输入 -->  
+            <el-form-item label="素材名称" prop="fileName">  
+                <el-input v-model="dataForm.fileName" placeholder="为便于管理建议按用途分类+素材内容命名"></el-input>  
+            </el-form-item>  
+        </el-form>  
+        <!-- 对话框底部按钮 -->  
+        <span slot="footer" class="dialog-footer">  
+            <el-button @click="visible = false">取消</el-button>  
+            <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{uploading ? '提交中...' : '提交'}}</el-button>  
+        </span>  
+    </el-dialog>  
+</template>  
 
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            uploading:false,
-            dataForm: {
-                mediaId: '',
-                file: '',
-                fileName: '',
-                mediaType: 'image'
-            },
-            dataRule: {
-                fileName: [
-                    { required: true, message: '素材名称不能为空', trigger: 'blur' }
-                ],
-                mediaType: [
-                    { required: true, message: '素材类型不能为空', trigger: 'blur' }
-                ]
-            }
-        }
-    },
-    methods: {
-        init(fileType) {
-            if(fileType)this.dataForm.mediaType=fileType
-            this.visible = true
-        },
-        // 表单提交
-        dataFormSubmit() {
-            if(this.uploading)return
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    this.uploading=true
-                    console.log(this.dataForm)
-                    let form = new FormData();
-                    form.append('mediaId', this.dataForm.mediaId || '')
-                    form.append('file', this.dataForm.file)
-                    form.append('fileName', this.dataForm.fileName)
-                    form.append('mediaType', this.dataForm.mediaType)
-                    this.$http({
-                        url: this.$http.adornUrl(`/manage/wxAssets/materialFileUpload`),
-                        method: 'post',
-                        data: form,
-                        headers: { 'Content-Type': 'multipart/form-data' }
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.$message({
-                                message: '操作成功',
-                                type: 'success',
-                                duration: 1500,
-                                onClose: () => {
-                                    this.visible = false
-                                    this.$emit('refreshDataList')
-                                }
-                            })
-                        } else {
-                            this.$message.error(data.msg)
-                        }
-                        this.uploading=false
-                    })
-                }
-            })
-        },
-        onFileChange(e) {
-            let file = event.currentTarget.files[0]
-            this.dataForm.file = file;
-            this.dataForm.fileName = file.name.substring(0, file.name.lastIndexOf('.'))
-            let mediaType = file.type.substring(0, file.type.lastIndexOf('/'))
-            if (mediaType == 'audio') mediaType = 'voice'
-            this.dataForm.mediaType = mediaType
-        }
-    }
-}
-</script>
+<script>  
+export default {  
+    data() {  
+        return {  
+            visible: false, // 控制对话框的可见性  
+            uploading: false, // 控制是否正在上传  
+            dataForm: { // 表单数据模型  
+                mediaId: '', // 媒体 ID  
+                file: '', // 选择的文件  
+                fileName: '', // 文件名称  
+                mediaType: 'image' // 媒体类型，默认为 'image'  
+            },  
+            dataRule: { // 表单验证规则  
+                fileName: [  
+                    { required: true, message: '素材名称不能为空', trigger: 'blur' } // 素材名称必填  
+                ],  
+                mediaType: [  
+                    { required: true, message: '素材类型不能为空', trigger: 'blur' } // 媒体类型必填  
+                ]  
+            }  
+        }  
+    },  
+    methods: {  
+        // 初始化方法，用于设置媒体类型并显示对话框  
+        init(fileType) {  
+            if (fileType) this.dataForm.mediaType = fileType // 设置媒体类型  
+            this.visible = true // 显示对话框  
+        },  
+        // 表单提交处理  
+        dataFormSubmit() {  
+            if (this.uploading) return // 如果正在上传，则不再处理提交  
+            // 验证表单  
+            this.$refs['dataForm'].validate((valid) => {  
+                if (valid) {  
+                    this.uploading = true // 设置为正在上传状态  
+                    console.log(this.dataForm) // 打印表单数据  
+                    let form = new FormData(); // 创建 FormData 对象  
+                    // 将表单数据添加到 FormData 中  
+                    form.append('mediaId', this.dataForm.mediaId || '')  
+                    form.append('file', this.dataForm.file)  
+                    form.append('fileName', this.dataForm.fileName)  
+                    form.append('mediaType', this.dataForm.mediaType)  
+                    // 发送 POST 请求上传文件  
+                    this.$http({  
+                        url: this.$http.adornUrl(`/manage/wxAssets/materialFileUpload`), // 请求的 URL  
+                        method: 'post',  
+                        data: form,  
+                        headers: { 'Content-Type': 'multipart/form-data' } // 设置请求头为 multipart/form-data  
+                    }).then(({ data }) => {  
+                        if (data && data.code === 200) {  
+                            // 上传成功，显示成功消息  
+                            this.$message({  
+                                message: '操作成功',  
+                                type: 'success',  
+                                duration: 1500,  
+                                onClose: () => {  
+                                    this.visible = false // 关闭对话框  
+                                    this.$emit('refreshDataList') // 触发父组件刷新数据列表事件  
+                                }  
+                            })  
+                        } else {  
+                            // 上传失败，显示错误消息  
+                            this.$message.error(data.msg)  
+                        }  
+                        this.uploading = false // 重置上传状态  
+                    })  
+                }  
+            })  
+        },  
+        // 文件选择变化处理  
+        onFileChange(e) {  
+            let file = e.currentTarget.files[0] // 获取选择的文件  
+            this.dataForm.file = file; // 设置文件到表单数据  
+            this.dataForm.fileName = file.name.substring(0, file.name.lastIndexOf('.')) // 设置文件名称（去掉后缀）  
+            let mediaType = file.type.substring(0, file.type.lastIndexOf('/')) // 获取媒体类型  
+            if (mediaType === 'audio') mediaType = 'voice' // 将音频类型映射为 'voice'  
+            this.dataForm.mediaType = mediaType // 设置媒体类型到表单数据  
+        }  
+    }  
+}  
+</script>

src/views/modules/wx/assets/material-file.vue

@@ -1,185 +1,207 @@
-<template>
-    <div class="mod-menu">
-        <el-form :inline="true" :model="dataForm">
-            <el-form-item v-show="!selectMode">
-                <el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-            </el-form-item>
-        </el-form>
-        <div v-loading="dataListLoading">
-            <div class="card" v-for="item in dataList" :key="item.mediaId" @click="onSelect(item)">
-                <el-image v-if="fileType=='image'" class="card-image" :src="item.url" fit="contain" lazy></el-image>
-                <div v-else class="card-preview">
-                    <div v-if="fileType=='voice'" class="card-preview-icon el-icon-microphone"></div>
-                    <div v-if="fileType=='video'" class="card-preview-icon el-icon-video-camera-solid"></div>
-                    <div class="card-preview-text">管理后台不支持预览<br/>微信中可正常播放</div>
-                </div>
-                <div class="card-footer">
-                    <div class="text-cut-name">{{item.name}}</div>
-                    <div>{{$moment(item.updateTime).calendar()}}</div>
-                    <div class="flex justify-between align-center" v-show="!selectMode">
-                        <el-button size="mini" type="text" icon="el-icon-copy-document"  v-clipboard:copy="item.mediaId" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制media_id</el-button>
-                        <el-button size="mini" type="text" icon="el-icon-delete"  @click="deleteHandle(item.mediaId)" >删除</el-button>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20]" :page-size="20" :total="totalCount" layout="total, prev,pager, next, jumper">
-        </el-pagination>
-        <!-- 弹窗, 新增 / 修改 -->
-        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="onChange"></add-or-update>
-    </div>
-</template>
-<script>
-import AddOrUpdate from './material-file-add-or-update'
-export default {
-    name:'material-file',
-    props:{
-        fileType:{// image、voice、video
-            type:String,
-            default:'image'
-        },
-        selectMode:{// 是否选择模式，选择模式下点击素材选中，不可新增和删除
-            type:Boolean,
-            default:false
-        }
-    },
-    components: {
-        AddOrUpdate
-    },
-    data() {
-        return {
-            dataForm: {},
-            addOrUpdateVisible: false,
-            dataList: [],
-            pageIndex: 1,
-            pageSize: 20,
-            totalCount: 0,
-            dataListLoading: false,
-        }
-    },
-    mounted(){
-        this.init()
-    },
-    methods: {
-        init(){
-            if(!this.dataList.length){
-                this.getDataList()
-            }
-        },
-        getDataList() {
-            if(this.dataListLoading) return
-            this.dataListLoading = true
-            this.$http({
-                url: this.$http.adornUrl('/manage/wxAssets/materialFileBatchGet'),
-                params: this.$http.adornParams({
-                    'page': this.pageIndex,
-                    'type': this.fileType
-                })
-            }).then(({ data }) => {
-                if (data && data.code == 200) {
-                    this.dataList = data.data.items
-                    this.totalCount = data.data.totalCount
-                     this.pageIndex++;
-                } else {
-                    this.$message.error(data.msg);
-                }
-                this.dataListLoading = false
-            })
-        },
-        // 新增 / 修改
-        addOrUpdateHandle() {
-            this.addOrUpdateVisible = true
-            this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(this.fileType)
-            })
-        },
-        onSelect(itemInfo){
-            if(!this.selectMode)return
-            this.$emit('selected',itemInfo)
-        },
-        //删除
-        deleteHandle(id) {
-            this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-                this.$http({
-                    url: this.$http.adornUrl('/manage/wxAssets/materialDelete'),
-                    method: 'post',
-                    data: { mediaId: id }
-                }).then(({ data }) => {
-                    if (data && data.code === 200) {
-                        this.$message({
-                            message: '操作成功',
-                            type: 'success',
-                            duration: 1500,
-                            onClose: () =>  this.onChange()
-                        })
-                    } else {
-                        this.$message.error(data.msg)
-                    }
-                })
-            })
-        },
-        // 当前页
-        currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
-        },
-        onCopySuccess(){
-            this.$message.success('已复制')
-        },
-        onCopyError(err){
-            this.$message.error('复制失败,可能是此浏览器不支持复制')
-        },
-        onChange(){
-            this.pageIndex=1
-            this.getDataList()
-            this.$emit('change')
-        }
+<template>  
+    <div class="mod-menu">  
+        <!-- 表单，用于新增按钮 -->  
+        <el-form :inline="true" :model="dataForm">  
+            <el-form-item v-show="!selectMode">  
+                <!-- 新增按钮，只有在有权限时才显示 -->  
+                <el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>  
+            </el-form-item>  
+        </el-form>  
+        <!-- 数据列表加载状态 -->  
+        <div v-loading="dataListLoading">  
+            <!-- 遍历数据列表，生成每个素材的卡片 -->  
+            <div class="card" v-for="item in dataList" :key="item.mediaId" @click="onSelect(item)">  
+                <!-- 如果是图片类型，显示图片 -->  
+                <el-image v-if="fileType === 'image'" class="card-image" :src="item.url" fit="contain" lazy></el-image>  
+                <div v-else class="card-preview">  
+                    <!-- 根据不同的媒体类型显示不同的图标和提示 -->  
+                    <div v-if="fileType === 'voice'" class="card-preview-icon el-icon-microphone"></div>  
+                    <div v-if="fileType === 'video'" class="card-preview-icon el-icon-video-camera-solid"></div>  
+                    <div class="card-preview-text">管理后台不支持预览<br/>微信中可正常播放</div>  
+                </div>  
+                <div class="card-footer">  
+                    <!-- 显示素材名称和更新时间 -->  
+                    <div class="text-cut-name">{{item.name}}</div>  
+                    <div>{{$moment(item.updateTime).calendar()}}</div>  
+                    <div class="flex justify-between align-center" v-show="!selectMode">  
+                        <!-- 复制 media_id 的按钮 -->  
+                        <el-button size="mini" type="text" icon="el-icon-copy-document" v-clipboard:copy="item.mediaId" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制media_id</el-button>  
+                        <!-- 删除素材的按钮 -->  
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(item.mediaId)">删除</el-button>  
+                    </div>  
+                </div>  
+            </div>  
+        </div>  
+        <!-- 分页组件 -->  
+        <el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20]" :page-size="20" :total="totalCount" layout="total, prev, pager, next, jumper">  
+        </el-pagination>  
+        <!-- 弹窗，用于新增/修改素材 -->  
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="onChange"></add-or-update>  
+    </div>  
+</template>  
 
-    }
-}
-</script>
-<style scoped>
-.card{
-    width: 170px;
-    display: inline-block;
-    background: #FFFFFF;
-    border: 1px solid #EBEEF5;
-    box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.1);
-    margin: 0 10px 10px 0;
-    vertical-align: top;
-    border-radius: 5px;
-    box-sizing: border-box;
-}
-.card:hover{
-    border: 2px solid #66b1ff;
-    margin-bottom: 6px;
-}
-.card-image{
-    line-height: 170px;
-    max-height: 170px;
-    width: 100%;
-}
-.card-preview{
-    padding: 20px 0;
-    color: #d9d9d9;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.card-preview-icon{
-    font-size: 30px;
-    margin-right: 5px;
-}
-.card-preview-text{
-    font-size: 12px;
-}
-.card-footer{
-    color: #ccc;
-    font-size: 12px;
-    padding: 15px 10px;
-}
+<script>  
+import AddOrUpdate from './material-file-add-or-update' // 导入新增/修改组件  
+
+export default {  
+    name: 'material-file', // 组件名称  
+    props: {  
+        fileType: { // 媒体类型，支持 image、voice、video  
+            type: String,  
+            default: 'image'  
+        },  
+        selectMode: { // 是否为选择模式  
+            type: Boolean,  
+            default: false  
+        }  
+    },  
+    components: {  
+        AddOrUpdate // 注册新增/修改组件  
+    },  
+    data() {  
+        return {  
+            dataForm: {}, // 表单数据  
+            addOrUpdateVisible: false, // 控制新增/修改弹窗的可见性  
+            dataList: [], // 素材数据列表  
+            pageIndex: 1, // 当前页码  
+            pageSize: 20, // 每页显示的条数  
+            totalCount: 0, // 数据总数  
+            dataListLoading: false, // 加载状态  
+        }  
+    },  
+    mounted() {  
+        this.init() // 组件挂载后初始化数据  
+    },  
+    methods: {  
+        init() {  
+            // 初始化方法，如果数据列表为空则获取数据  
+            if (!this.dataList.length) {  
+                this.getDataList()  
+            }  
+        },  
+        getDataList() {  
+            // 获取数据列表  
+            if (this.dataListLoading) return // 如果正在加载则不再请求  
+            this.dataListLoading = true // 设置加载状态  
+            this.$http({  
+                url: this.$http.adornUrl('/manage/wxAssets/materialFileBatchGet'), // 请求的 URL  
+                params: this.$http.adornParams({  
+                    'page': this.pageIndex, // 当前页码  
+                    'type': this.fileType // 媒体类型  
+                })  
+            }).then(({ data }) => {  
+                if (data && data.code == 200) {  
+                    // 请求成功，更新数据列表和总数  
+                    this.dataList = data.data.items  
+                    this.totalCount = data.data.totalCount  
+                    this.pageIndex++; // 页码自增  
+                } else {  
+                    // 请求失败，显示错误消息  
+                    this.$message.error(data.msg);  
+                }  
+                this.dataListLoading = false // 重置加载状态  
+            })  
+        },  
+        // 新增/修改处理  
+        addOrUpdateHandle() {  
+            this.addOrUpdateVisible = true // 显示新增/修改弹窗  
+            this.$nextTick(() => {  
+                this.$refs.addOrUpdate.init(this.fileType) // 初始化新增/修改组件  
+            })  
+        },  
+        onSelect(itemInfo) {  
+            // 选择素材  
+            if (!this.selectMode) return // 如果不是选择模式则不处理  
+            this.$emit('selected', itemInfo) // 向父组件发射选择事件  
+        },  
+        // 删除素材处理  
+        deleteHandle(id) {  
+            this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', {  
+                confirmButtonText: '确定',  
+                cancelButtonText: '取消',  
+                type: 'warning'  
+            }).then(() => {  
+                this.$http({  
+                    url: this.$http.adornUrl('/manage/wxAssets/materialDelete'), // 删除请求的 URL  
+                    method: 'post',  
+                    data: { mediaId: id } // 传递媒体 ID  
+                }).then(({ data }) => {  
+                    if (data && data.code === 200) {  
+                        // 删除成功，显示成功消息并刷新数据  
+                        this.$message({  
+                            message: '操作成功',  
+                            type: 'success',  
+                            duration: 1500,  
+                            onClose: () => this.onChange() // 刷新数据列表  
+                        })  
+                    } else {  
+                        // 删除失败，显示错误消息  
+                        this.$message.error(data.msg)  
+                    }  
+                })  
+            })  
+        },  
+        // 分页当前页变化处理  
+        currentChangeHandle(val) {  
+            this.pageIndex = val // 更新当前页码  
+            this.getDataList() // 获取数据列表  
+        },  
+        onCopySuccess() {  
+            // 复制成功提示  
+            this.$message.success('已复制')  
+        },  
+        onCopyError(err) {  
+            // 复制失败提示  
+            this.$message.error('复制失败, 可能是此浏览器不支持复制')   
+        },  
+        onChange() {  
+            // 刷新数据列表的处理  
+            this.pageIndex = 1 // 重置页码为 1  
+            this.getDataList() // 获取数据列表  
+            this.$emit('change') // 向父组件发射变化事件  
+        }  
+    }  
+}  
+</script>  
+
+<style scoped>  
+.card {  
+    width: 170px; /* 卡片宽度 */  
+    display: inline-block; /* 以行内块元素方式显示，允许多个卡片横向排列 */  
+    background: #FFFFFF; /* 背景颜色 */  
+    border: 1px solid #EBEEF5; /* 边框颜色 */  
+    box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.1); /* 盒子阴影 */  
+    margin: 0 10px 10px 0; /* 外边距 */  
+    vertical-align: top; /* 垂直对齐 */  
+    border-radius: 5px; /* 圆角 */  
+    box-sizing: border-box; /* 包含内边距和边框在内的盒模型 */  
+}  
+.card:hover {  
+    border: 2px solid #66b1ff; /* 鼠标悬停时加粗边框 */  
+    margin-bottom: 6px; /* 下方外边距调整 */  
+}  
+.card-image {  
+    line-height: 170px; /* 设定行高以居中内容 */  
+    max-height: 170px; /* 最大高度 */  
+    width: 100%; /* 宽度100% */  
+}  
+.card-preview {  
+    padding: 20px 0; /* 上下内边距 */  
+    color: #d9d9d9; /* 字体颜色 */  
+    display: flex; /* 使用弹性布局 */  
+    justify-content: center; /* 内容居中对齐 */  
+    align-items: center; /* 垂直居中对齐 */  
+}  
+.card-preview-icon {  
+    font-size: 30px; /* 图标字体大小 */  
+    margin-right: 5px; /* 右侧外边距 */  
+}  
+.card-preview-text {  
+    font-size: 12px; /* 文本大小 */  
+}  
+.card-footer {  
+    color: #ccc; /* 字体颜色 */  
+    font-size: 12px; /* 字体大小 */  
+    padding: 15px 10px; /* 内边距 */  
+}  
 </style>

src/views/modules/wx/assets/material-news-add-or-update.vue

@@ -1,221 +1,232 @@
-<template>
-    <div  v-show="visible">
-        <div class="flex">
-            <div class="card-list">
-                <div class="text-center margin-bottom">图文列表</div>
-                <div class="card-item" :class="{'selected':selectedIndex==index}" v-for="(item,index) in articles" :key="index" @click="selectedIndex=index">
-                    <div class="text-cut-name">{{item.title}}</div>
-                </div>
-                <div v-show="articles.length<8 && !mediaId" class="card-add el-icon-plus" @click="addArticle()"></div>
-            </div>
-            <el-form size="mini" v-if="articles.length" :model="articles[selectedIndex]" :rules="dataRule" ref="dataForm" label-width="100px">
-                <el-form-item label="标题" prop="title">
-                    <el-input v-model="articles[selectedIndex].title" placeholder="标题"></el-input>
-                </el-form-item>
-                <el-form-item label="封面图" prop="thumbMediaId">
-                    <el-input v-model="articles[selectedIndex].thumbMediaId" placeholder="封面图media_id">
-                        <div slot="append" @click="assetsSelectorVisible=true">从素材库中选择</div>
-                    </el-input>
-                </el-form-item>
-                <el-form-item label="摘要" prop="digest">
-                    <el-input v-model="articles[selectedIndex].digest" placeholder="摘要"></el-input>
-                </el-form-item>
-                <el-form-item label="原文地址" prop="contentSourceUrl">
-                    <el-input v-model="articles[selectedIndex].contentSourceUrl" placeholder="阅读原文链接"></el-input>
-                </el-form-item>
-                <el-row>
-                    <el-col :span="9">
-                        <el-form-item label="作者" prop="author">
-                            <el-input v-model="articles[selectedIndex].author" placeholder="作者"></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="5">
-                        <el-form-item label="显示封面" prop="showCoverPic">
-                            <el-switch v-model="articles[selectedIndex].showCoverPic"></el-switch>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="5">
-                        <el-form-item label="允许评论" prop="needOpenComment">
-                            <el-switch v-model="articles[selectedIndex].needOpenComment"></el-switch>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="5">
-                        <el-form-item label="仅粉丝可评论" prop="onlyFansCanComment">
-                            <el-switch v-model="articles[selectedIndex].onlyFansCanComment"></el-switch>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-form-item label="内容" prop="content">
-                    <tinymce-editor ref="editor" v-model="articles[selectedIndex].content"> </tinymce-editor>
-                </el-form-item>
-            </el-form>
-        </div>
-        <div class="dialog-footer">
-            <el-button @click="$emit('hide')">取消</el-button>
-            <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{this.mediaId?'修改此篇':'全部提交（共'+articles.length+'篇）'}}</el-button>
-        </div>
-        <assets-selector v-if="assetsSelectorVisible" :visible="assetsSelectorVisible" selectType="image" @selected="onAssetsSelect"></assets-selector>
-    </div>
-</template>
+<template>  
+    <div v-show="visible"> <!-- 控制弹窗的显示与隐藏 -->  
+        <div class="flex">  
+            <div class="card-list">  
+                <div class="text-center margin-bottom">图文列表</div>  
+                <!-- 遍历所有文章，生成列表项 -->  
+                <div class="card-item" :class="{'selected':selectedIndex==index}" v-for="(item,index) in articles" :key="index" @click="selectedIndex=index">  
+                    <div class="text-cut-name">{{item.title}}</div>  
+                </div>  
+                <!-- 如果文章少于8篇且没有媒体ID，显示新增文章的按钮 -->  
+                <div v-show="articles.length<8 && !mediaId" class="card-add el-icon-plus" @click="addArticle()"></div>  
+            </div>  
+            <!-- 文章表单，绑定到选中的文章 -->  
+            <el-form size="mini" v-if="articles.length" :model="articles[selectedIndex]" :rules="dataRule" ref="dataForm" label-width="100px">  
+                <el-form-item label="标题" prop="title">  
+                    <el-input v-model="articles[selectedIndex].title" placeholder="标题"></el-input>  
+                </el-form-item>  
+                <el-form-item label="封面图" prop="thumbMediaId">  
+                    <el-input v-model="articles[selectedIndex].thumbMediaId" placeholder="封面图media_id">  
+                        <div slot="append" @click="assetsSelectorVisible=true">从素材库中选择</div> <!-- 选择封面图的按钮 -->  
+                    </el-input>  
+                </el-form-item>  
+                <el-form-item label="摘要" prop="digest">  
+                    <el-input v-model="articles[selectedIndex].digest" placeholder="摘要"></el-input>  
+                </el-form-item>  
+                <el-form-item label="原文地址" prop="contentSourceUrl">  
+                    <el-input v-model="articles[selectedIndex].contentSourceUrl" placeholder="阅读原文链接"></el-input>  
+                </el-form-item>  
+                <el-row>  
+                    <el-col :span="9">  
+                        <el-form-item label="作者" prop="author">  
+                            <el-input v-model="articles[selectedIndex].author" placeholder="作者"></el-input>  
+                        </el-form-item>  
+                    </el-col>  
+                    <el-col :span="5">  
+                        <el-form-item label="显示封面" prop="showCoverPic">  
+                            <el-switch v-model="articles[selectedIndex].showCoverPic"></el-switch>  
+                        </el-form-item>  
+                    </el-col>  
+                    <el-col :span="5">  
+                        <el-form-item label="允许评论" prop="needOpenComment">  
+                            <el-switch v-model="articles[selectedIndex].needOpenComment"></el-switch>  
+                        </el-form-item>  
+                    </el-col>  
+                    <el-col :span="5">  
+                        <el-form-item label="仅粉丝可评论" prop="onlyFansCanComment">  
+                            <el-switch v-model="articles[selectedIndex].onlyFansCanComment"></el-switch>  
+                        </el-form-item>  
+                    </el-col>  
+                </el-row>  
+                <el-form-item label="内容" prop="content">  
+                    <tinymce-editor ref="editor" v-model="articles[selectedIndex].content"> </tinymce-editor> <!-- 富文本编辑器 -->  
+                </el-form-item>  
+            </el-form>  
+        </div>  
+        <div class="dialog-footer">  
+            <el-button @click="$emit('hide')">取消</el-button> <!-- 取消按钮 -->  
+            <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{this.mediaId?'修改此篇':'全部提交（共'+articles.length+'篇）'}}</el-button>  
+            <!-- 提交按钮，根据是否有mediaId来决定按钮显示内容 -->  
+        </div>  
+        <assets-selector v-if="assetsSelectorVisible" :visible="assetsSelectorVisible" selectType="image" @selected="onAssetsSelect"></assets-selector> <!-- 选择素材框 -->  
+    </div>  
+</template>  
 
-<script>
-const articleTemplate={
-    templateId: 0,
-    title: '',
-    content: '',
-    author: '',
-    showCoverPic: true,
-    contentSourceUrl: '',
-    digest: '',
-    thumbMediaId: '',
-    needOpenComment: false,
-    onlyFansCanComment: false
-}
-export default {
-    components: {
-        TinymceEditor: () => import('@/components/tinymce-editor'),
-        AssetsSelector:()=>import('./assets-selector')
-    },
-    props:{
-        visible:{
-            type:Boolean,
-            default:false
-        }
-    },
-    data() {
-        return {
-            assetsSelectorVisible:false,
-            mediaId:'',
-            selectedIndex:0,
-            articles:[],
-            uploading:false,
-            dataRule: {
-                title: [
-                    { required: true, message: '标题不能为空', trigger: 'blur' }
-                ],
-                content: [
-                    { required: true, message: '内容不能为空', trigger: 'blur' }
-                ],
-                thumbMediaId: [
-                    { required: true, message: '封面图media_id不能为空', trigger: 'blur' }
-                ],
-                contentSourceUrl: [
-                    { required: true, message: '原文地址不得为空', trigger: 'blur' }
-                ]
-            }
-        }
-    },
-    methods: {
-        init(news){
-            if(news && news.mediaId){
-                this.mediaId=news.mediaId
-                this.articles = news.content.articles
-            }else{
-                this.mediaId=''
-                this.articles=[{...articleTemplate}]
-            }
-        },
-        // 表单提交
-        dataFormSubmit() {
-            if(this.uploading)return
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    if(this.mediaId){// 编辑，只能一次修改一篇
-                        this.materialArticleUpdate();
-                    }else{ // 新增，全部文章一起保存
-                        this.materialNewsUpload();
-                    }
-                }
-            })
-        },
-        materialNewsUpload(){
-            this.uploading=true
-            this.$http({
-                url: this.$http.adornUrl(`/manage/wxAssets/materialNewsUpload`),
-                method: 'post',
-                data: this.$http.adornData(this.articles,false)
-            }).then(({ data }) => {
-                if (data && data.code === 200) {
-                    this.$message({
-                        message: "操作成功",
-                        type: "success",
-                        duration: 1500,
-                        onClose: () => {
-                            this.$emit("refreshDataList");
-                            this.emit('hide')
-                        }
-                    });
-                } else {
-                    this.$message.error(data.msg)
-                }
-                this.uploading=false
-            })
-        },
-        materialArticleUpdate(){
-            this.uploading=true
-            this.$http({
-                url: this.$http.adornUrl(`/manage/wxAssets/materialArticleUpdate`),
-                method: 'post',
-                data: this.$http.adornData({
-                    'mediaId':this.mediaId,
-                    'index':this.selectedIndex,
-                    'articles':this.articles[this.selectedIndex]
-                })
-            }).then(({ data }) => {
-                if (data && data.code === 200) {
-                    this.$message.success('操作成功')
-                } else {
-                    this.$message.error(data.msg)
-                }
-                this.uploading=false
-            })
-        },
-        addArticle(){
-            this.articles.push({...articleTemplate})
-            this.selectedIndex=this.articles.length-1
-        },
-        onAssetsSelect(assetsInfo){
-            Vue.set(this.articles[this.selectedIndex], 'thumbMediaId', assetsInfo.mediaId)
-            this.assetsSelectorVisible=false
-        }
-    }
-}
-</script>
-<style scoped>
-.card-list{
-    width: 300px;
-    padding-right: 10px;
-    border-right: 1px solid #eeeeee;
-}
-.card-item{
-    margin-top: 2px;
-    padding: 20px 5px;
-    border: 1px solid #ddd;
-    font-size: 12px;
-    line-height: 15px;
-}
-.card-item.selected{
-    border: 2px solid #409EFF;
-}
-.text-cut-name{
-    display: -webkit-box;
-    word-wrap:break-word;
-    word-break:break-all;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-}
-.card-add{
-    margin-top: 2px;
-    display: block;
-    border: 1px dotted #ddd;
-    color: #ddd;
-    text-align: center;
-    font-size: 30px;
-    line-height: 50px;
-}
-.dialog-footer {
-    margin-top: 20px;
-    text-align: right;
-}
+<script>  
+const articleTemplate = { // 文章模板  
+    templateId: 0,  
+    title: '',  
+    content: '',  
+    author: '',  
+    showCoverPic: true,  
+    contentSourceUrl: '',  
+    digest: '',  
+    thumbMediaId: '',  
+    needOpenComment: false,  
+    onlyFansCanComment: false  
+}  
+export default {  
+    components: {  
+        TinymceEditor: () => import('@/components/tinymce-editor'), // 异步引入富文本编辑器组件  
+        AssetsSelector: () => import('./assets-selector') // 异步引入素材选择器组件  
+    },  
+    props: {  
+        visible: { // 控制组件可见性的属性  
+            type: Boolean,  
+            default: false  
+        }  
+    },  
+    data() {  
+        return {  
+            assetsSelectorVisible: false, // 控制素材选择器的可见性  
+            mediaId: '', // 用于存储文章的媒体ID  
+            selectedIndex: 0, // 当前选中文章的索引  
+            articles: [], // 存储文章列表  
+            uploading: false, // 上传状态  
+            dataRule: { // 表单的验证规则  
+                title: [  
+                    { required: true, message: '标题不能为空', trigger: 'blur' }  
+                ],  
+                content: [  
+                    { required: true, message: '内容不能为空', trigger: 'blur' }  
+                ],  
+                thumbMediaId: [  
+                    { required: true, message: '封面图media_id不能为空', trigger: 'blur' }  
+                ],  
+                contentSourceUrl: [  
+                                        { required: true, message: '原文地址不得为空', trigger: 'blur' }  
+                ]  
+            }  
+        }  
+    },  
+    methods: {  
+        init(news) { // 初始化方法，用于加载新闻数据  
+            if (news && news.mediaId) {  
+                this.mediaId = news.mediaId; // 如果有mediaId，设置mediaId  
+                this.articles = news.content.articles; // 加载新闻的文章内容  
+            } else {  
+                this.mediaId = ''; // 如果没有，从新初始化  
+                this.articles = [{ ...articleTemplate }]; // 新增一篇文章，使用模板  
+            }  
+        },  
+        // 表单提交  
+        dataFormSubmit() {  
+            if (this.uploading) return; // 如果正在上传，返回  
+            this.$refs['dataForm'].validate((valid) => { // 验证表单  
+                if (valid) {  
+                    if (this.mediaId) { // 如果已有mediaId，执行文章更新  
+                        this.materialArticleUpdate();  
+                    } else { // 否则执行文章新增  
+                        this.materialNewsUpload();  
+                    }  
+                }  
+            });  
+        },  
+        // 上传新闻内容  
+        materialNewsUpload() {  
+            this.uploading = true; // 设置上传状态为true  
+            this.$http({  
+                url: this.$http.adornUrl(`/manage/wxAssets/materialNewsUpload`), // 请求URL  
+                method: 'post', // 请求方法  
+                data: this.$http.adornData(this.articles, false) // 请求数据  
+            }).then(({ data }) => {  
+                // 处理成功响应  
+                if (data && data.code === 200) {  
+                    this.$message({  
+                        message: "操作成功", // 成功提示  
+                        type: "success",  
+                        duration: 1500,  
+                        onClose: () => {  
+                            this.$emit("refreshDataList"); // 发射刷新数据的事件  
+                            this.$emit('hide'); // 关闭弹窗  
+                        }  
+                    });  
+                } else {  
+                    this.$message.error(data.msg); // 显示错误消息  
+                }  
+                this.uploading = false; // 重置上传状态  
+            });  
+        },  
+        // 更新文章内容  
+        materialArticleUpdate() {  
+            this.uploading = true; // 设置上传状态为true  
+            this.$http({  
+                url: this.$http.adornUrl(`/manage/wxAssets/materialArticleUpdate`), // 请求URL  
+                method: 'post', // 请求方法  
+                data: this.$http.adornData({  
+                    'mediaId': this.mediaId, // 传递的mediaId  
+                    'index': this.selectedIndex, // 传递的文章索引  
+                    'articles': this.articles[this.selectedIndex] // 传递的文章数据  
+                })  
+            }).then(({ data }) => {  
+                // 处理成功响应  
+                if (data && data.code === 200) {  
+                    this.$message.success('操作成功'); // 成功提示  
+                } else {  
+                    this.$message.error(data.msg); // 显示错误消息  
+                }  
+                this.uploading = false; // 重置上传状态  
+            });  
+        },  
+        // 添加新文章  
+        addArticle() {  
+            this.articles.push({ ...articleTemplate }); // 将新的文章模板推入文章列表  
+            this.selectedIndex = this.articles.length - 1; // 更新当前选中索引为新增文章  
+        },  
+        // 处理素材选择  
+        onAssetsSelect(assetsInfo) {  
+            Vue.set(this.articles[this.selectedIndex], 'thumbMediaId', assetsInfo.mediaId); // 设置选择的封面图的mediaId  
+            this.assetsSelectorVisible = false; // 关闭素材选择器  
+        }  
+    }  
+}  
+</script>  
+
+<style scoped>  
+.card-list {   
+    width: 300px; /* 卡片列表的宽度 */  
+    padding-right: 10px; /* 右侧内边距 */  
+    border-right: 1px solid #eeeeee; /* 右侧边框 */  
+}  
+.card-item {  
+    margin-top: 2px; /* 上外边距 */  
+    padding: 20px 5px; /* 内边距 */  
+    border: 1px solid #ddd; /* 边框 */  
+    font-size: 12px; /* 字体大小 */  
+    line-height: 15px; /* 行高 */  
+}  
+.card-item.selected {  
+    border: 2px solid #409EFF; /* 选中时的边框颜色 */  
+}  
+.text-cut-name {  
+    display: -webkit-box; /* 使用盒子模型 */  
+    word-wrap: break-word; /* 自动换行 */  
+    word-break: break-all; /* 强制断行 */  
+    -webkit-box-orient: vertical; /* 垂直方向的盒子模型 */  
+    -webkit-line-clamp: 2; /* 限制显示的行数 */  
+    overflow: hidden; /* 溢出隐藏 */  
+}  
+.card-add {  
+    margin-top: 2px; /* 上外边距 */  
+    display: block; /* 块级元素 */  
+    border: 1px dotted #ddd; /* 虚线边框 */  
+    color: #ddd; /* 文字颜色 */  
+    text-align: center; /* 居中对齐 */  
+    font-size: 30px; /* 文字大小 */  
+    line-height: 50px; /* 行高 */  
+}  
+.dialog-footer {  
+    margin-top: 20px; /* 上外边距 */  
+    text-align: right; /* 右对齐 */  
+}  
 </style>

src/views/modules/wx/assets/material-news.vue

@@ -1,26 +1,45 @@
 <template>
+    <!-- 整个页面的面板容器 -->
     <div class="panel">
+        <!-- 根据条件控制显示内容，当addOrUpdateVisible为false时显示以下内容 -->
         <div v-show="!addOrUpdateVisible">
+            <!-- 内联表单，绑定了dataForm数据模型 -->
             <el-form :inline="true" :model="dataForm">
+                <!-- 根据selectMode的值决定是否显示该表单元素，当不是选择模式时显示 -->
                 <el-form-item v-show="!selectMode">
+                    <!-- 按钮，根据权限判断是否显示（调用isAuth方法判断），类型为主要按钮，点击时调用addOrUpdateHandle方法，按钮尺寸为迷你型 -->
                     <el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
                 </el-form-item>
             </el-form>
+            <!-- 加载提示容器，根据dataListLoading的值显示加载状态 -->
             <div  class="flex justify-start" v-loading="dataListLoading">
+                <!-- 循环生成行，n表示行号，这里的rows应该是控制每行显示的元素数量相关 -->
                 <div v-for="n in rows" :key="n">
+                    <!-- 循环遍历dataList数据列表，用于展示具体的数据项 -->
                     <template v-for="(item,i) in dataList">
+                        <!-- 根据条件显示卡片元素，当满足i%rows==n-1时显示，点击卡片会调用onSelect方法传递当前项数据 -->
                         <div class="card"  :key="item.mediaId" v-if="i%rows==n-1" @click="onSelect(item)">
+                            <!-- 卡片的预览部分，用于展示文章相关信息 -->
                             <div class="card-preview">
+                                <!-- 循环遍历文章数组，展示每篇文章的信息，点击文章链接会在新标签页打开（target="_blank"） -->
                                 <a v-for="(article,k) in item.content.articles" :key="k" :href="article.url" class="article-item" target="_blank">
+                                    <!-- 文章标题，做了多行文本截断显示处理 -->
                                     <div class="article-title">{{article.title}}</div>
+                                    <!-- 文章缩略图，通过绑定src属性显示图片 -->
                                     <el-image class="article-thumb" :src="article.thumbUrl"></el-image>
                                 </a>
                             </div>
+                            <!-- 卡片的底部部分，用于展示更新时间以及操作按钮等 -->
                             <div class="card-footer">
+                                <!-- 显示更新时间，使用了moment.js库（通过$moment方法调用）将时间格式化为日历格式 -->
                                 <div>{{$moment(item.updateTime).calendar()}}</div>
+                                <!-- 根据是否是选择模式决定是否显示以下操作按钮 -->
                                 <div class="flex justify-between align-center"  v-show="!selectMode">
+                                    <!-- 复制按钮，点击复制media_id，复制成功和失败分别调用对应的方法 -->
                                     <el-button size="mini" type="text" icon="el-icon-copy-document" v-clipboard:copy="item.mediaId" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制media_id</el-button>
+                                    <!-- 编辑按钮，点击调用addOrUpdateHandle方法传入当前项数据，按钮类型为文本样式 -->
                                     <el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(item)">编辑</el-button>
+                                    <!-- 删除按钮，点击调用deleteHandle方法传入mediaId进行删除操作，按钮类型为文本样式 -->
                                     <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(item.mediaId)">删除</el-button>
                                 </div>
                             </div>
@@ -28,20 +47,23 @@
                     </template>
                 </div>
             </div>
+            <!-- 分页组件，绑定了相关的分页事件和属性，用于切换页面获取不同页的数据 -->
             <el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-size="pageSize" :total="totalCount" layout="total, prev,pager, next, jumper">
             </el-pagination>
         </div>
-        <!-- 新增 / 修改 -->
+        <!-- 新增/修改组件，通过属性和事件与父组件进行交互 -->
         <add-or-update :visible="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="onChange" @hide="addOrUpdateVisible=false"></add-or-update>
     </div>
 </template>
 <script>
+// 引入新增/修改组件
 import AddOrUpdate from './material-news-add-or-update'
 export default {
     name: 'material-news',
     components: { 
         AddOrUpdate
     },
+    // 定义组件接收的属性及其类型和默认值
     props: {
         selectMode: {// 是否选择模式，选择模式下点击素材选中，不可新增和删除
             type: Boolean,
@@ -64,50 +86,63 @@ export default {
         }
     },
     mounted(){
+        // 组件挂载完成后调用init方法进行初始化操作
         this.init();
     },
     methods: {
         init() {
+            // 如果数据列表为空，则调用getDataList方法获取数据
             if (!this.dataList.length) {
                 this.getDataList()
             }
         },
         getDataList() {
+            // 如果正在加载数据，则直接返回，避免重复请求
             if (this.dataListLoading) return
+            // 设置正在加载数据的状态为true
             this.dataListLoading = true
+            // 发起HTTP请求获取数据，对请求的URL和参数进行了装饰处理（应该是统一处理请求相关的配置）
             this.$http({
                 url: this.$http.adornUrl('/manage/wxAssets/materialNewsBatchGet'),
                 params: this.$http.adornParams({
                     'page': this.pageIndex
                 })
             }).then(({ data }) => {
-
+                // 根据返回数据的状态码判断是否请求成功
                 if (data.code == 200) {
+                    // 如果成功，更新数据列表和总记录数
                     this.dataList = data.data.items
                     this.totalCount = data.data.totalCount
                 } else {
+                    // 如果失败，弹出错误提示信息
                     this.$message.error(data.msg);
                 }
+                // 请求完成后，设置正在加载数据的状态为false
                 this.dataListLoading = false
             })
         },
         onSelect(itemInfo) {
+            // 如果处于选择模式，才进行后续操作，点击卡片时会通过$emit触发父组件的selected事件传递当前项信息
             if (!this.selectMode) return
             this.$emit('selected', itemInfo)
         },
-        //删除
+        //删除操作方法
         deleteHandle(id) {
+            // 弹出确认框，让用户确认是否进行删除操作
             this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 如果用户确认，发起删除的HTTP请求
                 this.$http({
                     url: this.$http.adornUrl('/manage/wxAssets/materialDelete'),
                     method: 'post',
                     data: { mediaId: id }
                 }).then(({ data }) => {
+                    // 根据返回数据判断删除操作是否成功
                     if (data && data.code === 200) {
+                        // 如果成功，弹出成功提示信息，并在提示框关闭后调用onChange方法更新数据列表
                         this.$message({
                             message: '操作成功',
                             type: 'success',
@@ -115,17 +150,18 @@ export default {
                             onClose: () => this.onChange()
                         })
                     } else {
+                        // 如果失败，弹出错误提示信息
                         this.$message.error(data.msg)
                     }
                 })
             })
         },
-        // 当前页
+        // 当前页切换时的处理方法，更新当前页索引并重新获取数据列表
         currentChangeHandle(val) {
             this.pageIndex = val
             this.getDataList()
         },
-        // 新增 / 修改
+        // 新增/修改操作方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件
         addOrUpdateHandle(news) {
             this.addOrUpdateVisible = true
             this.$nextTick(() => {
@@ -133,12 +169,15 @@ export default {
             })
         },
         onCopySuccess() {
+            // 复制成功时的提示方法，弹出成功提示信息
             this.$message.success('已复制')
         },
         onCopyError(err) {
+            // 复制失败时的提示方法，弹出失败提示信息，并可以获取到具体的错误信息
             this.$message.error('复制失败,可能是此浏览器不支持复制')
         },
         onChange() {
+            // 数据更新相关的方法，重置当前页索引为1，重新获取数据列表，并通过$emit触发父组件的change事件
             this.pageIndex=1
             this.getDataList()
             this.$emit('change')

src/views/modules/wx/msg-reply-rule-add-or-update.vue

@@ -1,14 +1,22 @@
 <template>
-    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" >
+    <!-- el-dialog组件用于弹出对话框，根据dataForm中是否有id来设置标题为“新增”或“修改”，点击模态框背景不关闭对话框，通过visible属性双向绑定控制显示隐藏 -->
+    <el-dialog :title="!dataForm.id? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" >
+        <!-- el-form组件定义表单，绑定dataForm数据模型，应用dataRule验证规则，设置标签宽度为80px -->
         <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
+            <!-- 规则名称的表单项，对应dataForm中的ruleName属性，设置了必填验证 -->
             <el-form-item label="规则名称" prop="ruleName">
+                <!-- el-input组件实现输入框，双向绑定dataForm.ruleName，有占位提示文字 -->
                 <el-input v-model="dataForm.ruleName" placeholder="规则名称"></el-input>
             </el-form-item>
+            <!-- 匹配词的表单项，使用自定义的tags-editor组件，双向绑定dataForm.matchValue，用于输入或编辑匹配词（可能是多个，类似标签形式） -->
             <el-form-item label="匹配词" prop="matchValue">
                 <tags-editor v-model="dataForm.matchValue"></tags-editor>
             </el-form-item>
+            <!-- 第一行布局，使用el-row包裹 -->
             <el-row>
+                <!-- 占12列，用于放置作用范围相关的表单元素 -->
                 <el-col :span="12">
+                    <!-- 作用范围的表单项，对应dataForm中的appid属性，通过下拉选择框选择，有全部公众号和当前公众号两个选项 -->
                     <el-form-item label="作用范围" prop="appid">
                         <el-select v-model="dataForm.appid" placeholder="作用范围">
                             <el-option label="全部公众号" value=""></el-option>
@@ -16,71 +24,91 @@
                         </el-select>
                     </el-form-item>
                 </el-col>
+                <!-- 同样占12列，用于放置精确匹配相关的表单元素，使用el-switch组件实现开关切换功能，双向绑定dataForm.exactMatch -->
                 <el-col :span="12">
                     <el-form-item label="精确匹配" prop="exactMatch">
                         <el-switch v-model="dataForm.exactMatch" :active-value="true" :inactive-value="false"></el-switch>
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 第二行布局 -->
             <el-row>
+                <!-- 占12列，用于放置回复类型相关的表单元素 -->
                 <el-col :span="12">
+                    <!-- 回复类型的表单项，对应dataForm中的replyType属性，通过下拉选择框选择，选项通过循环KefuMsgType生成，选择改变时触发onReplyTypeChange方法 -->
                     <el-form-item label="回复类型" prop="replyType">
                         <el-select v-model="dataForm.replyType" @change="onReplyTypeChange">
                             <el-option v-for="(name,key) in KefuMsgType" :key="key" :value="key" :label="name"></el-option>
                         </el-select>
                     </el-form-item>
                 </el-col>
+                <!-- 占12列，用于放置是否启用相关的表单元素，使用el-switch组件实现开关切换功能，双向绑定dataForm.status -->
                 <el-col :span="12">
                     <el-form-item label="是否启用" prop="status">
                         <el-switch v-model="dataForm.status" :active-value="true" :inactive-value="false"></el-switch>
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 第三行布局 -->
             <el-row>
+                <!-- 占12列，用于放置生效时间相关的表单元素，使用el-time-picker组件实现时间选择功能，绑定dataForm.effectTimeStart，设置时间格式 -->
                 <el-col :span="12">
                     <el-form-item label="生效时间" prop="effectTimeStart">
                         <el-time-picker v-model="dataForm.effectTimeStart" value-format="HH:mm:ss"></el-time-picker>
                     </el-form-item>
                 </el-col>
+                <!-- 占12列，用于放置失效时间相关的表单元素，使用el-time-picker组件实现时间选择功能，绑定dataForm.effectTimeEnd，设置时间格式 -->
                 <el-col :span="12">
                     <el-form-item label="失效时间" prop="effectTimeEnd">
                         <el-time-picker v-model="dataForm.effectTimeEnd" value-format="HH:mm:ss"></el-time-picker>
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 回复内容的表单项，对应dataForm中的replyContent属性，使用el-input组件实现文本域输入框，双向绑定dataForm.replyContent，有行数设置和占位提示文字 -->
             <el-form-item label="回复内容" prop="replyContent">
                 <el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="文本、图文ID、media_id、json配置"></el-input>
+                <!-- 当回复类型为文本时显示插入链接按钮，点击调用addLink方法在回复内容中添加链接 -->
                 <el-button type="text" v-show="'text'==dataForm.replyType" @click="addLink">插入链接</el-button>
+                <!-- 根据assetsType的值决定是否显示按钮，点击打开素材选择器（通过控制assetsSelectorVisible属性），按钮文字根据回复类型有所不同 -->
                 <el-button type="text" v-show="assetsType" @click="assetsSelectorVisible=true">
                     从素材库中选择<span v-if="'miniprogrampage'==dataForm.replyType || 'music'==dataForm.replyType">缩略图</span>
                 </el-button>
             </el-form-item>
+            <!-- 备注说明的表单项，对应dataForm中的desc属性，使用el-input组件实现输入框，双向绑定dataForm.desc，有占位提示文字 -->
             <el-form-item label="备注说明" prop="desc">
                 <el-input v-model="dataForm.desc" placeholder="备注说明"></el-input>
             </el-form-item>
         </el-form>
+        <!-- 对话框底部的按钮区域，通过插槽定义 -->
         <span slot="footer" class="dialog-footer">
+            <!-- 取消按钮，点击时设置visible为false关闭对话框 -->
             <el-button @click="visible = false">取消</el-button>
+            <!-- 确定按钮，类型为主要按钮，点击时调用dataFormSubmit方法进行表单提交 -->
             <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
         </span>
+        <!-- 素材选择器组件，根据条件控制显示，通过属性和事件与当前组件进行交互，用于选择素材相关操作 -->
         <assets-selector v-if="assetsSelectorVisible && assetsType" :visible="assetsSelectorVisible" :selectType="assetsType" @selected="onAssetsSelect" @onClose="assetsSelectorVisible=false"></assets-selector>
     </el-dialog>
 </template>
 
 <script>
+// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
 import { mapState } from 'vuex'
 export default {
     components: {
+        // 异步加载tags-editor组件，用于编辑匹配词相关功能
         tagsEditor: () => import('@/components/tags-editor'),
-        AssetsSelector:()=>import('./assets/assets-selector')
+        // 异步加载AssetsSelector组件，用于选择素材相关功能
+        AssetsSelector: () => import('./assets/assets-selector')
     },
     data() {
         return {
             visible: false,
-            assetsSelectorVisible:false,
+            assetsSelectorVisible: false,
             dataForm: {
+                // 规则ID，初始化为0
                 ruleId: 0,
-                appid:'',
+                appid: '',
                 ruleName: "",
                 exactMatch: false,
                 matchValue: "",
@@ -92,24 +120,31 @@ export default {
                 effectTimeEnd: "23:59:59"
             },
             dataRule: {
+                // 规则名称的验证规则，必填，触发验证的时机是失去焦点（blur）
                 ruleName: [
                     { required: true, message: "规则名称不能为空", trigger: "blur" }
                 ],
+                // 匹配词的验证规则，必填，触发验证的时机是失去焦点
                 matchValue: [
                     { required: true, message: "匹配的关键词、事件等不能为空", trigger: "blur" }
                 ],
+                // 回复类型的验证规则，必填，触发验证的时机是失去焦点
                 replyType: [
                     { required: true, message: "回复类型（1:文本2:图文3媒体）不能为空", trigger: "blur" }
                 ],
+                // 回复内容的验证规则，必填，触发验证的时机是失去焦点
                 replyContent: [
                     { required: true, message: "回复内容不能为空", trigger: "blur" }
                 ],
+                // 是否启用的验证规则，必填，触发验证的时机是失去焦点
                 status: [
                     { required: true, message: "是否有效不能为空", trigger: "blur" }
                 ],
+                // 生效起始时间的验证规则，必填，触发验证的时机是失去焦点
                 effectTimeStart: [
                     { required: true, message: "生效起始时间不能为空", trigger: "blur" }
                 ],
+                // 生效结束时间的验证规则，必填，触发验证的时机是失去焦点
                 effectTimeEnd: [
                     { required: true, message: "生效结束时间不能为空", trigger: "blur" }
                 ]
@@ -117,49 +152,60 @@ export default {
         };
     },
     computed: mapState({
-        KefuMsgType: state=>state.message.KefuMsgType,
-        selectedAppid:state=>state.wxAccount.selectedAppid,
-        assetsType(){
-            const config={//消息类型与选择素材类型对应关系
-                'image':'image',
-                'voice':'voice',
-                'video':'video',
-                'mpnews':'news',
-                'miniprogrampage':'image',//小程序需选择卡片图
-                'music':'image'
-            }
-            return config[this.dataForm.replyType] || ''
+        // 从Vuex的state中获取message模块下的KefuMsgType状态，映射到组件的计算属性中，用于回复类型下拉框的选项数据
+        KefuMsgType: state => state.message.KefuMsgType,
+        // 从Vuex的state中获取wxAccount模块下的selectedAppid状态，映射到组件的计算属性中，用于作用范围下拉框中当前公众号选项的值
+        selectedAppid: state => state.wxAccount.selectedAppid,
+        assetsType() {
+            const config = {
+                // 定义消息类型与选择素材类型的对应关系，用于根据回复类型确定在素材库中选择的素材类型
+                'image': 'image',
+                'voice': 'voice',
+                'video': 'video',
+                'mpnews': 'news',
+                'miniprogrampage': 'image', // 小程序需选择卡片图
+                'music': 'image'
+            };
+            return config[this.dataForm.replyType] || '';
         }
     }),
     methods: {
         init(id) {
+            // 初始化时设置dataForm的ruleId属性，传入的id为空则设置为0
             this.dataForm.ruleId = id || 0;
+            // 设置对话框显示状态为true，即打开对话框
             this.visible = true;
             this.$nextTick(() => {
+                // 表单DOM更新后，重置表单所有字段的值
                 this.$refs["dataForm"].resetFields();
                 if (this.dataForm.ruleId) {
+                    // 如果ruleId有值，表示是修改操作，发起HTTP请求获取规则详情信息
                     this.$http({
-                        url: this.$http.adornUrl( `/manage/msgReplyRule/info/${this.dataForm.ruleId}` ),
+                        url: this.$http.adornUrl(`/manage/msgReplyRule/info/${this.dataForm.ruleId}`),
                         method: "get",
                         params: this.$http.adornParams()
                     }).then(({ data }) => {
                         if (data && data.code === 200) {
+                            // 如果请求成功，将返回的规则数据赋值给dataForm
                             this.dataForm = data.msgReplyRule;
                         }
                     });
                 }
             });
         },
-        // 表单提交
+        // 表单提交方法
         dataFormSubmit() {
+            // 对表单进行验证，验证结果通过回调函数的参数valid返回
             this.$refs["dataForm"].validate(valid => {
                 if (valid) {
+                    // 如果表单验证通过，发起HTTP请求保存或更新规则数据（根据ruleId是否有值判断是新增还是更新操作）
                     this.$http({
-                        url: this.$http.adornUrl(`/manage/msgReplyRule/${!this.dataForm.ruleId ? "save" : "update"}`),
+                        url: this.$http.adornUrl(`/manage/msgReplyRule/${!this.dataForm.ruleId? "save" : "update"}`),
                         method: "post",
                         data: this.$http.adornData(this.dataForm)
                     }).then(({ data }) => {
                         if (data && data.code === 200) {
+                            // 如果操作成功，弹出成功提示信息，提示框关闭后设置对话框隐藏，并通过$emit触发父组件的refreshDataList事件
                             this.$message({
                                 message: "操作成功",
                                 type: "success",
@@ -170,6 +216,7 @@ export default {
                                 }
                             });
                         } else {
+                            // 如果操作失败，弹出错误提示信息
                             this.$message.error(data.msg);
                         }
                     });
@@ -177,9 +224,11 @@ export default {
             });
         },
         addLink() {
+            // 插入链接的方法，在回复内容中添加一个简单的链接示例文本（实际应用中可能需要更灵活的处理方式来确定链接地址和文字等）
             this.dataForm.replyContent += '<a href="链接地址">链接文字</a>'
         },
         onReplyTypeChange(value) {
+            // 根据回复类型改变时的不同值，设置不同的回复内容默认值（以JSON格式字符串表示，方便后续解析和使用）
             if ("miniprogrampage" == value) {
                 let demo = { title: "标题", appid: "小程序APPID", pagepath: "页面地址", thumb_media_id: "缩略图media_id" };
                 this.dataForm.replyContent = JSON.stringify(demo, null, 4)
@@ -190,21 +239,22 @@ export default {
                 let demo = { head_content: "开头文字", list: [{ id: "菜单1ID", content: "菜单2内容" }, { id: "菜单2ID", content: "菜单2内容" }, { id: "菜单nID", content: "菜单n内容" }], tail_content: "结尾文字" }
                 this.dataForm.replyContent = JSON.stringify(demo, null, 4)
             } else if ("news" == value) {
-                let demo={title:"文章标题",description:"文章简介",url:"链接URL",picUrl:"缩略图URL"}
+                let demo = { title: "文章标题", description: "文章简介", url: "链接URL", picUrl: "缩略图URL" }
                 this.dataForm.replyContent = JSON.stringify(demo, null, 4)
             } else {
                 this.dataForm.replyContent = '媒体素材media_id'
             }
         },
-        onAssetsSelect(assetsInfo){
-            if(this.dataForm.replyType=='miniprogrampage' || this.dataForm.replyType=='music'){
-                let data = JSON.parse(this.dataForm.replyContent)
-                if(data && data.thumb_media_id)data.thumb_media_id=assetsInfo.mediaId
-                this.dataForm.replyContent = JSON.stringify(data, null, 4)
-            }else{
-                this.dataForm.replyContent = assetsInfo.mediaId
+        onAssetsSelect(assetsInfo) {
+            // 素材选择后的处理方法，根据回复类型判断如何更新回复内容，若是小程序页面或音乐类型，更新对应的缩略图media_id，否则直接赋值为所选素材的mediaId
+            if (this.dataForm.replyType =='miniprogrampage' || this.dataForm.replyType =='music') {
+                let data = JSON.parse(this.dataForm.replyContent);
+                if (data && data.thumb_media_id) data.thumb_media_id = assetsInfo.mediaId;
+                this.dataForm.replyContent = JSON.stringify(data, null, 4);
+            } else {
+                this.dataForm.replyContent = assetsInfo.mediaId;
             }
-            this.assetsSelectorVisible=false
+            this.assetsSelectorVisible = false;
         }
     }
 };

src/views/modules/wx/msg-reply-rule.vue

@@ -1,50 +1,72 @@
 <template>
+    <!-- 整个模块的容器类，用于包裹后续的表单、表格、分页等组件 -->
     <div class="mod-config">
+        <!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <!-- 匹配关键词输入框所在的表单项 -->
             <el-form-item>
+                <!-- 使用el-input组件实现输入框，双向绑定dataForm.matchValue，有占位提示文字且可清空输入内容 -->
                 <el-input v-model="dataForm.matchValue" placeholder="匹配关键词" clearable></el-input>
             </el-form-item>
+            <!-- 操作按钮所在的表单项 -->
             <el-form-item>
+                <!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
                 <el-button @click="getDataList()">查询</el-button>
+                <!-- 新增按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为主要按钮，点击时调用addOrUpdateHandle方法 -->
                 <el-button v-if="isAuth('wx:msgreplyrule:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+                <!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
                 <el-button v-if="isAuth('wx:msgreplyrule:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
             </el-form-item>
         </el-form>
+        <!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，可展开行（type="expand"），加载数据时显示加载提示，监听选择项变化事件 -->
         <el-table :data="dataList" border type="expand" v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <!-- 展开列，通过插槽定义展开内容，这里展示了更多规则相关详细信息的表单 -->
             <el-table-column type="expand">
                 <template slot-scope="props">
                     <el-form label-position="left" inline class="demo-table-expand">
+                        <!-- 作用范围信息展示的表单项，根据数据项中的appid值判断显示“当前公众号”或“全部公众号” -->
                         <el-form-item label="作用范围">
-                            <span>{{ props.row.appid?'当前公众号':'全部公众号' }}</span>
+                            <span>{{ props.row.appid? '当前公众号' : '全部公众号' }}</span>
                         </el-form-item>
+                        <!-- 精确匹配信息展示的表单项，根据数据项中的exactMatch值判断显示“是”或“否” -->
                         <el-form-item label="精确匹配">
-                            <span>{{ props.row.exactMatch?'是':'否' }}</span>
+                            <span>{{ props.row.exactMatch? '是' : '否' }}</span>
                         </el-form-item>
+                        <!-- 是否有效信息展示的表单项，根据数据项中的status值判断显示“是”或“否” -->
                         <el-form-item label="是否有效">
-                            <span>{{ props.row.status?'是':'否' }}</span>
+                            <span>{{ props.row.status? '是' : '否' }}</span>
                         </el-form-item>
+                        <!-- 备注说明信息展示的表单项，直接显示数据项中的desc值 -->
                         <el-form-item label="备注说明">
                             <span>{{ props.row.desc }}</span>
                         </el-form-item>
+                        <!-- 生效时间信息展示的表单项，直接显示数据项中的effectTimeStart值 -->
                         <el-form-item label="生效时间">
                             <span>{{ props.row.effectTimeStart }}</span>
                         </el-form-item>
+                        <!-- 失效时间信息展示的表单项，直接显示数据项中的effectTimeEnd值 -->
                         <el-form-item label="失效时间">
                             <span>{{ props.row.effectTimeEnd }}</span>
                         </el-form-item>
                     </el-form>
                 </template>
             </el-table-column>
+            <!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
             <el-table-column type="selection" header-align="center" align="center" width="50">
             </el-table-column>
+            <!-- 规则名称列，对应dataList中数据项的ruleName属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="ruleName" header-align="center" align="center" show-overflow-tooltip label="规则名称">
             </el-table-column>
+            <!-- 匹配关键词列，对应dataList中数据项的matchValue属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="matchValue" header-align="center" align="center" show-overflow-tooltip label="匹配关键词">
             </el-table-column>
+            <!-- 消息类型列，对应dataList中数据项的replyType属性，使用formatter函数格式化显示内容，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="replyType" header-align="center" align="center" :formatter="replyTypeFormat" label="消息类型">
             </el-table-column>
+            <!-- 回复内容列，对应dataList中数据项的replyContent属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="replyContent" header-align="center" align="center" show-overflow-tooltip label="回复内容">
             </el-table-column>
+            <!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了修改和删除按钮 -->
             <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                 <template slot-scope="scope">
                     <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.ruleId)">修改</el-button>
@@ -52,15 +74,18 @@
                 </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="totalCount" layout="total, sizes, prev, pager, next, jumper">
         </el-pagination>
-        <!-- 弹窗, 新增 / 修改 -->
+        <!-- 新增/修改组件，通过属性和事件与父组件进行交互，根据addOrUpdateVisible的值决定是否显示 -->
         <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
     </div>
 </template>
 
 <script>
+// 引入新增/修改组件，用于实现规则的新增或修改功能相关交互逻辑
 import AddOrUpdate from './msg-reply-rule-add-or-update'
+// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
 import { mapState } from 'vuex'
 export default {
     components: {
@@ -81,16 +106,20 @@ export default {
         }
     },
     computed: mapState({
-        KefuMsgType: state=>state.message.KefuMsgType
+        // 从Vuex的state中获取message模块下的KefuMsgType状态，映射到组件的计算属性中，用于消息类型列的格式化显示操作
+        KefuMsgType: state => state.message.KefuMsgType
     }),
 
     activated() {
+        // 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
         this.getDataList()
     },
     methods: {
-        // 获取数据列表
+        // 获取数据列表的方法
         getDataList() {
+            // 设置正在加载数据的状态为true
             this.dataListLoading = true
+            // 发起HTTP请求获取消息回复规则的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
             this.$http({
                 url: this.$http.adornUrl('/manage/msgReplyRule/list'),
                 method: 'get',
@@ -100,52 +129,60 @@ export default {
                     'matchValue': this.dataForm.matchValue
                 })
             }).then(({ data }) => {
+                // 根据返回数据的状态码判断是否请求成功
                 if (data && data.code === 200) {
+                    // 如果成功，更新数据列表和总记录数
                     this.dataList = data.page.list
                     this.totalCount = data.page.totalCount
                 } else {
+                    // 如果失败，清空数据列表和总记录数
                     this.dataList = []
                     this.totalCount = 0
                 }
+                // 请求完成后，设置正在加载数据的状态为false
                 this.dataListLoading = false
             })
         },
-        // 每页数
+        // 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
         sizeChangeHandle(val) {
             this.pageSize = val
             this.pageIndex = 1
             this.getDataList()
         },
-        // 当前页
+        // 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
         currentChangeHandle(val) {
             this.pageIndex = val
             this.getDataList()
         },
-        // 多选
+        // 处理表格中选择项变化的方法，更新选中的数据项列表
         selectionChangeHandle(val) {
             this.dataListSelections = val
         },
-        // 新增 / 修改
+        // 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入规则的id（可为空表示新增）
         addOrUpdateHandle(id) {
             this.addOrUpdateVisible = true
             this.$nextTick(() => {
                 this.$refs.addOrUpdate.init(id)
             })
         },
-        // 删除
+        // 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
         deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.ruleId)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+            // 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的ruleId数组进行批量删除
+            var ids = id? [id] : this.dataListSelections.map(item => item.ruleId)
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
                 this.$http({
                     url: this.$http.adornUrl('/manage/msgReplyRule/delete'),
                     method: 'post',
                     data: this.$http.adornData(ids, false)
                 }).then(({ data }) => {
+                    // 根据返回数据判断删除操作是否成功
                     if (data && data.code === 200) {
+                        // 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
                         this.$message({
                             message: '操作成功',
                             type: 'success',
@@ -153,14 +190,16 @@ export default {
                             onClose: () => this.getDataList()
                         })
                     } else {
+                        // 如果失败，弹出错误提示信息
                         this.$message.error(data.msg)
                     }
                 })
             })
         },
+        // 消息类型格式化的方法，根据数据项中的消息类型值，从KefuMsgType对象中获取对应的显示名称并返回
         replyTypeFormat(row, column, cellValue) {
             return this.KefuMsgType[cellValue];
         }
     }
 }
-</script>
+</script>

src/views/modules/wx/msg-template-add-or-update.vue

@@ -1,165 +1,195 @@
-<template>
-    <el-dialog title="模板配置" :close-on-click-modal="false" :visible.sync="visible">
-        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" size="mini">
-            <el-form-item label="标题" prop="title">
-                <el-input v-model="dataForm.title" placeholder="标题"></el-input>
-            </el-form-item>
-            <el-form-item label="链接" prop="url">
-                <el-input v-model="dataForm.url" placeholder="跳转链接"></el-input>
-            </el-form-item>
-            <div>
-                <el-form-item label="小程序appid" prop="miniprogram.appid">
-                    <el-input v-model="dataForm.miniprogram.appid" placeholder="小程序appid"></el-input>
-                </el-form-item>
-                <el-form-item label="小程序路径" prop="miniprogram.pagePath">
-                    <el-input v-model="dataForm.miniprogram.pagePath" placeholder="小程序pagePath"></el-input>
-                </el-form-item>
-            </div>
-            <el-row>
-                <el-col :span="16">
-                    <el-form-item label="模版名称" prop="name">
-                        <el-input v-model="dataForm.name" placeholder="模版名称"></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item label="有效" prop="status">
-                        <el-switch v-model="dataForm.status" placeholder="是否有效" :active-value="true" :inactive-value="false"></el-switch>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <div class="form-group-area">
-                <el-form-item  class="form-group-title">消息填充数据，请对照模板内容填写</el-form-item>
-                <el-form-item>
-                    <el-input type="textarea" disabled autosize v-model="dataForm.content" placeholder="模版"></el-input>
-                </el-form-item>
-                <el-row v-for="(item,index) in dataForm.data" :key="item.name">
-                    <el-col :span="16">
-                        <el-form-item :label="item.name" :prop="'data.'+index+'.value'" :rules="[{required: true,message: '填充内容不得为空', trigger: 'blur' }]">
-                            <el-input type="textarea" autosize rows="1" v-model="item.value" placeholder="填充内容"  ></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="颜色" >
-                            <el-input type="color" v-model="item.color" placeholder="颜色"></el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </div>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="visible = false">取消</el-button>
-            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-        </span>
-    </el-dialog>
-</template>
+<template>  
+    <!-- el-dialog组件用于创建一个对话框，设置了标题、点击模态框不关闭、双向绑定显示隐藏状态等属性 -->  
+    <el-dialog title="模板配置" :close-on-click-modal="false" :visible.sync="visible">  
+        <!-- el-form组件用于创建表单，绑定了表单数据模型、验证规则，设置了标签宽度、尺寸等属性 -->  
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" size="mini">  
+            <!-- 表单项目，用于输入标题，绑定了dataForm中的title字段，设置了提示文字 -->  
+            <el-form-item label="标题" prop="title">  
+                <el-input v-model="dataForm.title" placeholder="标题"></el-input>  
+            </el-form-item>  
+            <!-- 表单项目，用于输入链接，绑定了dataForm中的url字段，设置了提示文字 -->  
+            <el-form-item label="链接" prop="url">  
+                <el-input v-model="dataForm.url" placeholder="跳转链接"></el-input>  
+            </el-form-item>  
+            <div>  
+                <!-- 表单项目，用于输入小程序appid，绑定了dataForm.miniprogram.appid字段，设置了提示文字 -->  
+                <el-form-item label="小程序appid" prop="miniprogram.appid">  
+                    <el-input v-model="dataForm.miniprogram.appid" placeholder="小程序appid"></el-input>  
+                </el-form-item>  
+                <!-- 表单项目，用于输入小程序路径，绑定了dataForm.miniprogram.pagePath字段，设置了提示文字 -->  
+                <el-form-item label="小程序路径" prop="miniprogram.pagePath">  
+                    <el-input v-model="dataForm.miniprogram.pagePath" placeholder="小程序pagePath"></el-input>  
+                </el-form-item>  
+            </div>  
+            <el-row>  
+                <el-col :span="16">  
+                    <!-- 表单项目，用于输入模版名称，绑定了dataForm中的name字段，设置了提示文字 -->  
+                    <el-form-item label="模版名称" prop="name">  
+                        <el-input v-model="dataForm.name" placeholder="模版名称"></el-input>  
+                    </el-form-item>  
+                </el-col>  
+                <el-col :span="8">  
+                    <!-- 表单项目，使用el-switch组件用于切换是否有效状态，绑定了dataForm中的status字段 -->  
+                    <el-form-item label="有效" prop="status">  
+                        <el-switch v-model="dataForm.status" placeholder="是否有效" :active-value="true" :inactive-value="false"></el-switch>  
+                    </el-form-item>  
+                </el-col>  
+            </el-row>  
+            <div class="form-group-area">  
+                <!-- 表单项目，用于显示提示信息，告知消息填充数据的相关要求 -->  
+                <el-form-item class="form-group-title">消息填充数据，请对照模板内容填写</el-form-item>  
+                <!-- 表单项目，使用textarea类型的el-input展示模板内容，设置为禁用状态 -->  
+                <el-form-item>  
+                    <el-input type="textarea" disabled autosize v-model="dataForm.content" placeholder="模版"></el-input>  
+                </el-form-item>  
+                <!-- 使用v-for循环遍历dataForm.data数组，动态生成表单项目，用于输入消息填充数据及设置颜色 -->  
+                <el-row v-for="(item, index) in dataForm.data" :key="item.name">  
+                    <el-col :span="16">  
+                        <!-- 表单项目，根据循环的索引和字段名绑定对应的数据项的value字段，设置了必填验证规则 -->  
+                        <el-form-item :label="item.name" :prop="'data.' + index + '.value'" :rules="[{required: true, message: '填充内容不得为空', trigger: 'blur' }]">  
+                            <el-input type="textarea" autosize rows="1" v-model="item.value" placeholder="填充内容"></el-input>  
+                        </el-form-item>  
+                    </el-col>  
+                    <el-col :span="8">  
+                        <!-- 表单项目，用于输入颜色值，绑定对应数据项的color字段 -->  
+                        <el-form-item label="颜色">  
+                            <el-input type="color" v-model="item.color" placeholder="颜色"></el-input>  
+                        </el-form-item>  
+                    </el-col>  
+                </el-row>  
+            </div>  
+        </el-form>  
+                <!-- 在对话框的底部插槽中添加取消和确定按钮，分别绑定对应的点击事件 -->  
+        <span slot="footer" class="dialog-footer">  
+            <el-button @click="visible = false">取消</el-button>  
+            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>  
+        </span>  
+    </el-dialog>  
+</template>  
 
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            dataForm: {
-                id: 0,
-                templateId: '',
-                title: '',
-                data: [],
-                url: '',
-                miniprogram:{appid:'',pagePath:''},
-                content: '',
-                status: true,
-                name: ''
-            },
-            dataRule: {
-                title: [
-                    { required: true, message: '标题不能为空', trigger: 'blur' }
-                ],
-                data: [
-                    { required: true, message: '内容不能为空', trigger: 'blur' }
-                ],
-                name: [
-                    { required: true, message: '模版名称不能为空', trigger: 'blur' }
-                ]
-            }
-        }
-    },
-    methods: {
-        init(id) {
-            console.log('init',id)
-            this.dataForm.id = id || 0
-            this.visible = true
-            this.$nextTick(() => {
-                this.$refs['dataForm'].resetFields()
-                if (this.dataForm.id) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/manage/msgTemplate/info/${this.dataForm.id}`),
-                        method: 'get',
-                        params: this.$http.adornParams()
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.transformTemplate(data.msgTemplate)
-                        }else{
-                            this.$message.error(data.msg)
-                        }
-                    })
-                }
-            })
-        },
-        /**
-         * 根据content信息展开data配置项(content为微信公众平台后台配置的模板)
-         * 如content='{{first.DATA}} ↵商品名称：{{keyword1.DATA}} ↵购买时间：{{keyword2.DATA}} ↵{{remark.DATA}}'
-         * 则生成data=[{name:'first',value:'',color:''},{name:'first',value:'',color:''},{name:'first',value:'',color:''}]
-         * 展示表单让管理员给对应的字段填充内容
-         */
-        transformTemplate(template){
-            if(!template.miniprogram)template.miniprogram={appid:'',pagePath:''}
-            if(template.data instanceof Array) {//已经配置过了，直接读取
-                this.dataForm =  template
-                return
-            }
+<script>  
+export default {  
+    data() {  
+        return {  
+            visible: false,  // 控制对话框的显示状态  
+            // 表单数据对象，包含了各种表单字段的初始值，如id、templateId、标题、数据数组、链接等  
+            dataForm: {  
+                id: 0,  
+                templateId: '',  
+                title: '',  
+                data: [],  // 用于存储动态生成的数据项  
+                url: '',  
+                miniprogram: { appid: '', pagePath: '' },  // 小程序相关信息  
+                content: '',  // 模板内容  
+                status: true,  // 模板的有效状态  
+                name: ''  // 模板名称  
+            },  
+            // 表单验证规则对象，定义了部分字段的必填等验证规则  
+            dataRule: {  
+                title: [  
+                    { required: true, message: '标题不能为空', trigger: 'blur' }  
+                ],  
+                data: [  
+                    { required: true, message: '内容不能为空', trigger: 'blur' }  
+                ],  
+                name: [  
+                    { required: true, message: '模版名称不能为空', trigger: 'blur' }  
+                ]  
+            }  
+        }  
+    },  
+    methods: {  
+        // 初始化方法，接受一个id作为参数  
+        init(id) {  
+            console.log('init', id);  
+            // 设置表单数据对象的id字段，如果传入的id为空则设为0  
+            this.dataForm.id = id || 0;  
+            // 设置对话框为显示状态  
+            this.visible = true;  
+            this.$nextTick(() => {  
+                // 重置表单字段  
+                this.$refs['dataForm'].resetFields();  
+                if (this.dataForm.id) {  
+                    // 如果有id，使用axios（这里假设$http是基于axios封装的）发送GET请求获取模板信息  
+                    this.$http({  
+                        url: this.$http.adornUrl(`/manage/msgTemplate/info/${this.dataForm.id}`),  
+                        method: 'get',  
+                        params: this.$http.adornParams()  
+                    }).then(({ data }) => {  
+                        if (data && data.code === 200) {  
+                            // 如果请求成功，调用方法处理获取到的模板信息  
+                            this.transformTemplate(data.msgTemplate);  
+                        } else {  
+                            // 如果请求失败，显示错误提示信息  
+                            this.$message.error(data.msg);  
+                        }  
+                    });  
+                }  
+            });  
+        },  
+        /**  
+         * 根据content信息展开data配置项(content为微信公众平台后台配置的模板)  
+         * 如content='{{first.DATA}} ↵商品名称：{{keyword1.DATA}} ↵购买时间：{{keyword2.DATA}} ↵{{remark.DATA}}'  
+         * 则生成data=[{name:'first',value:'',color:''},{name:'first',value:'',color:''},{name:'first',value:'',color:''}]  
+         * 展示表单让管理员给对应的字段填充内容  
+         */  
+        transformTemplate(template) {  
+            if (!template.miniprogram) template.miniprogram = { appid: '', pagePath: '' };  
+            if (template.data instanceof Array) { // 如果已经配置过了，直接读取  
+                this.dataForm = template;  
+                return;  
+            }  
             
-            template.data=[]
-            let keysArray = template.content.match(/\{\{(\w*)\.DATA\}\}/g) || [] //示例： ["{{first.DATA}}", "{{keyword1.DATA}}", "{{keyword2.DATA}}", "{{remark.DATA}}"]
-            keysArray.map(item=>{
-                name=item.replace('{{','').replace('.DATA}}','')
-                template.data.push({"name":name,"value":"",color:"#000000"})
-            })
-            this.dataForm = template
-        },
-        // 表单提交
-        dataFormSubmit() {
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/manage/msgTemplate/${!this.dataForm.id ? 'save' : 'update'}`),
-                        method: 'post',
-                        data: this.$http.adornData(this.dataForm)
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.$message({
-                                message: '操作成功',
-                                type: 'success',
-                                duration: 1500,
-                                onClose: () => {
-                                    this.visible = false
-                                    this.$emit('refreshDataList')
-                                }
-                            })
-                        } else {
-                            this.$message.error(data.msg)
-                        }
-                    })
-                }
-            })
-        }
-    }
-}
-</script>
-<style scoped>
-.form-group-area{
-    border:1px dotted gray;
-}
-.form-group-title{
-    color: gray;
-    font-size: 12px;
-}
+            template.data = [];  
+            // 通过正则表达式匹配content中类似{{xxx.DATA}}的内容，提取出其中的xxx部分，放入keysArray数组  
+            let keysArray = template.content.match(/\{\{(\w*)\.DATA\}\}/g) || []; // 示例： ["{{first.DATA}}", "{{keyword1.DATA}}", "{{keyword2.DATA}}", "{{remark.DATA}}"]  
+            keysArray.map(item => {  
+                const name = item.replace('{{', '').replace('.DATA}}', '');  
+                // 基于提取的字段名创建对应的data数据项，设置初始的value为空，颜色为黑色  
+                template.data.push({ "name": name, "value": "", color: "#000000" });  
+            });  
+            this.dataForm = template; // 更新dataForm  
+        },  
+        // 表单提交的方法  
+        dataFormSubmit() {  
+            // 对整个表单进行验证  
+            this.$refs['dataForm'].validate((valid) => {  
+                if (valid) {  
+                    // 使用axios（这里假设$http是基于axios封装的）发送POST请求提交表单数据，根据id是否存在决定是保存还是更新操作  
+                    this.$http({  
+                        url: this.$http.adornUrl(`/manage/msgTemplate/${!this.dataForm.id ? 'save' : 'update'}`),  
+                        method: 'post',  
+                        data: this.$http.adornData(this.dataForm) // 装饰数据  
+                    }).then(({ data }) => {  
+                        if (data && data.code === 200) {  
+                            // 如果操作成功，显示成功提示信息，并在提示信息关闭后隐藏对话框，触发父组件的refreshDataList事件  
+                            this.$message({  
+                                message: '操作成功',  
+                                type: 'success',  
+                                duration: 1500,  
+                                onClose: () => {  
+                                    this.visible = false; // 隐藏对话框  
+                                    this.$emit('refreshDataList'); // 触发父组件的事件  
+                                }  
+                            });  
+                        } else {  
+                            // 如果操作失败，显示错误提示信息  
+                            this.$message.error(data.msg);  
+                        }  
+                    });  
+                }  
+            });  
+        }  
+    }  
+}  
+</script>  
+
+<style scoped>  
+.form-group-area {  
+    border: 1px dotted gray; /* 添加边框样式，使其更明显 */  
+}  
+.form-group-title {  
+    color: gray; /* 设置标题颜色 */  
+    font-size: 12px; /* 设置标题字体大小 */  
+}  
 </style>

src/views/modules/wx/msg-template.vue

@@ -1,36 +1,55 @@
 <template>
+    <!-- 整个模块的容器类，用于包裹后续的表单、表格、分页以及相关弹窗组件等 -->
     <div class="mod-config">
+        <!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <!-- 标题输入框所在的表单项，使用el-input组件实现输入框，双向绑定dataForm.title，有占位提示文字且可清空输入内容 -->
             <el-form-item>
                 <el-input v-model="dataForm.title" placeholder="标题" clearable></el-input>
             </el-form-item>
+            <!-- 操作按钮所在的表单项 -->
             <el-form-item>
+                <!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
                 <el-button @click="getDataList()">查询</el-button>
+                <!-- 批量复制按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为成功按钮，点击时调用copyHandle方法，当没有选中的数据项时禁用按钮 -->
                 <el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="copyHandle()" :disabled="dataListSelections.length <= 0">批量复制</el-button>
-                <el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="templateMsgTaskHandle()" :disabled="dataListSelections.length!=1">推送消息</el-button>
+                <!-- 推送消息按钮，根据权限决定是否显示，类型为成功按钮，点击时调用templateMsgTaskHandle方法，当选中的数据项数量不为1时禁用按钮 -->
+                <el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="templateMsgTaskHandle()" :disabled="dataListSelections.length!= 1">推送消息</el-button>
+                <!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
                 <el-button v-if="isAuth('wx:msgtemplate:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
             </el-form-item>
+            <!-- 靠右对齐的表单项，包含同步公众号模板按钮和模板管理指引链接按钮 -->
             <el-form-item class="fr">
-                <el-button v-if="isAuth('wx:msgtemplate:save')" icon="el-icon-sort" type="success" @click="syncWxTemplate()" :disabled="synchonizingWxTemplate">{{synchonizingWxTemplate?'同步中...':'同步公众号模板'}}</el-button>
+                <!-- 同步公众号模板按钮，根据权限决定是否显示，点击时调用syncWxTemplate方法，按钮文字根据同步状态动态变化，正在同步时显示“同步中...”，否则显示“同步公众号模板”，同步过程中按钮禁用 -->
+                <el-button v-if="isAuth('wx:msgtemplate:save')" icon="el-icon-sort" type="success" @click="syncWxTemplate()" :disabled="synchonizingWxTemplate">{{synchonizingWxTemplate? '同步中...' : '同步公众号模板'}}</el-button>
+                <!-- 模板管理指引链接按钮，点击后在新标签页打开指定的链接 -->
                 <el-button><el-link type="primary" icon="el-icon-link" target="_blank" href="https://kf.qq.com/faq/170209E3InyI170209nIF7RJ.html">模板管理指引</el-link></el-button>
             </el-form-item>
         </el-form>
-        
+
+        <!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
         <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
             <el-table-column type="selection" header-align="center" align="center" width="50">
             </el-table-column>
+            <!-- 模板ID列，对应dataList中数据项的templateId属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="templateId" show-overflow-tooltip header-align="center" align="center" label="模板ID">
             </el-table-column>
+            <!-- 标题列，对应dataList中数据项的title属性，通过插槽使用a标签包裹内容使其可点击跳转（链接地址取自数据项的url属性），设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="title" header-align="center" align="center" label="标题">
                 <a :href="scope.row.url" slot-scope="scope">{{scope.row.title}}</a>
             </el-table-column>
+            <!-- 模版名称列，对应dataList中数据项的name属性，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="name" header-align="center" align="center" label="模版名称">
             </el-table-column>
+            <!-- 模版字段列，对应dataList中数据项的content属性，显示溢出提示，设置了表头和内容的对齐方式以及列宽度 -->
             <el-table-column prop="content" show-overflow-tooltip header-align="center" align="center" label="模版字段" width="200">
             </el-table-column>
+            <!-- 是否有效列，对应dataList中数据项的status属性，通过插槽根据数据项的status值判断显示“是”或“否”，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="status" header-align="center" align="center" label="是否有效">
-                <span slot-scope="scope">{{scope.row.status?"是":"否"}}</span>
+                <span slot-scope="scope">{{scope.row.status? "是" : "否"}}</span>
             </el-table-column>
+            <!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了配置和删除按钮 -->
             <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                 <template slot-scope="scope">
                     <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">配置</el-button>
@@ -38,16 +57,22 @@
                 </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="totalCount" layout="total, sizes, prev, pager, next, jumper">
         </el-pagination>
-        <!-- 弹窗, 新增 / 修改 -->
+
+        <!-- 新增/修改组件，通过属性和事件与父组件进行交互，根据addOrUpdateVisible的值决定是否显示 -->
         <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+        <!-- 模板消息任务组件，根据templateMsgTaskVisible的值决定是否显示 -->
         <template-msg-task v-if="templateMsgTaskVisible" ref="templateMsgTask"></template-msg-task>
     </div>
 </template>
 
 <script>
+// 引入新增/修改组件，用于实现模板的新增或修改功能相关交互逻辑
 import AddOrUpdate from './msg-template-add-or-update'
+// 引入模板消息任务组件，用于处理模板消息相关任务逻辑
 import TemplateMsgTask from '@/components/template-msg-task'
 export default {
     data() {
@@ -62,20 +87,23 @@ export default {
             dataListLoading: false,
             dataListSelections: [],
             addOrUpdateVisible: false,
-            templateMsgTaskVisible:false,
-            synchonizingWxTemplate:false
+            templateMsgTaskVisible: false,
+            synchonizingWxTemplate: false
         }
     },
     components: {
-        AddOrUpdate,TemplateMsgTask
+        AddOrUpdate, TemplateMsgTask
     },
     activated() {
+        // 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
         this.getDataList()
     },
     methods: {
-        // 获取数据列表
+        // 获取数据列表的方法
         getDataList() {
-            this.dataListLoading = true
+            // 设置正在加载数据的状态为true
+            this.dataListLoading = true;
+            // 发起HTTP请求获取消息模板的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
             this.$http({
                 url: this.$http.adornUrl('/manage/msgTemplate/list'),
                 method: 'get',
@@ -87,128 +115,159 @@ export default {
                     'order': 'desc'
                 })
             }).then(({ data }) => {
+                // 根据返回数据的状态码判断是否请求成功
                 if (data && data.code === 200) {
-                    this.dataList = data.page.list
-                    this.totalCount = data.page.totalCount
+                    // 如果成功，更新数据列表和总记录数
+                    this.dataList = data.page.list;
+                    this.totalCount = data.page.totalCount;
                 } else {
-                    this.dataList = []
-                    this.totalCount = 0
+                    // 如果失败，清空数据列表和总记录数
+                    this.dataList = [];
+                    this.totalCount = 0;
                 }
-                this.dataListLoading = false
-            })
+                // 请求完成后，设置正在加载数据的状态为false
+                this.dataListLoading = false;
+            });
         },
-        // 每页数
+        // 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
         sizeChangeHandle(val) {
-            this.pageSize = val
-            this.pageIndex = 1
-            this.getDataList()
+            this.pageSize = val;
+            this.pageIndex = 1;
+            this.getDataList();
         },
-        // 当前页
+        // 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
         currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
+            this.pageIndex = val;
+            this.getDataList();
         },
-        // 多选
+        // 处理表格中选择项变化的方法，更新选中的数据项列表
         selectionChangeHandle(val) {
-            this.dataListSelections = val
+            this.dataListSelections = val;
         },
-        // 新增 / 修改
+        // 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入模板的id（可为空表示新增）
         addOrUpdateHandle(id) {
-            this.addOrUpdateVisible = true
+            this.addOrUpdateVisible = true;
             this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(id)
-            })
+                this.$refs.addOrUpdate.init(id);
+            });
         },
-        // 删除
+        // 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
         deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.id)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+            // 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的id数组进行批量删除
+            var ids = id? [id] : this.dataListSelections.map(item => item.id);
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
                 this.$http({
                     url: this.$http.adornUrl('/manage/msgTemplate/delete'),
                     method: 'post',
                     data: this.$http.adornData(ids, false)
                 }).then(({ data }) => {
+                    // 根据返回数据判断删除操作是否成功
                     if (data && data.code === 200) {
+                        // 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
                         this.$message({
                             message: '操作成功',
                             type: 'success',
                             duration: 1500,
                             onClose: () => {
-                                this.getDataList()
+                                this.getDataList();
                             }
-                        })
+                        });
                     } else {
-                        this.$message.error(data.msg)
+                        // 如果失败，弹出错误提示信息
+                        this.$message.error(data.msg);
                     }
-                })
-            })
+                });
+            });
         },
-        syncWxTemplate(){
-            if(this.synchonizingWxTemplate)return
-            this.synchonizingWxTemplate=true
+        syncWxTemplate() {
+            // 如果正在同步中，则直接返回，不进行后续操作
+            if (this.synchonizingWxTemplate) return;
+            // 设置正在同步的状态为true
+            this.synchonizingWxTemplate = true;
+            // 发起HTTP请求进行同步公众号模板操作
             this.$http({
-                    url: this.$http.adornUrl('/manage/msgTemplate/syncWxTemplate'),
-                    method: 'post',
-                }).then(({ data }) => {
-                    this.synchonizingWxTemplate=false
-                    if (data && data.code === 200) {
-                        this.$message({
-                            message: '同步完成',
-                            type: 'success',
-                            duration: 1500,
-                            onClose: () => {
-                                this.getDataList()
-                            }
-                        })
-                    } else {
-                        this.$message.error(data.msg)
-                    }
-                }).catch(()=>this.synchonizingWxTemplate=false)
+                url: this.$http.adornUrl('/manage/msgTemplate/syncWxTemplate'),
+                method: 'post'
+            }).then(({ data }) => {
+                // 同步完成后，设置正在同步的状态为false
+                this.synchonizingWxTemplate = false;
+                // 根据返回数据判断同步操作是否成功
+                if (data && data.code === 200) {
+                    // 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
+                    this.$message({
+                        message: '同步完成',
+                        type: 'success',
+                        duration: 1500,
+                        onClose: () => {
+                            this.getDataList();
+                        }
+                    });
+                } else {
+                    // 如果失败，弹出错误提示信息
+                    this.$message.error(data.msg);
+                }
+            }).catch(() => this.synchonizingWxTemplate = false);
         },
-        templateMsgTaskHandle(){
-            this.templateMsgTaskVisible = true
+        templateMsgTaskHandle() {
+            // 设置模板消息任务组件的显示状态为true，即显示该组件
+            this.templateMsgTaskVisible = true;
             this.$nextTick(() => {
-                this.$refs.templateMsgTask.init(this.dataListSelections[0])
-            })
+                // 在DOM更新后，初始化模板消息任务组件，传入当前选中的唯一一条数据项（因为按钮禁用条件限制了只能选中一个）
+                this.$refs.templateMsgTask.init(this.dataListSelections[0]);
+            });
         },
-        async copyHandle(){
+        async copyHandle() {
             let loading;
+            // 循环遍历选中的数据项列表，对每个数据项进行复制操作
             for (let i = 0; i < this.dataListSelections.length; i++) {
                 let item = this.dataListSelections[i];
-                loading=this.$loading({
+                // 显示加载提示，提示文字显示正在复制的模板标题
+                loading = this.$loading({
                     lock: true,
-                    text: "复制模板："+item.title,
+                    text: "复制模板：" + item.title,
                     spinner: 'el-icon-loading',
                     background: 'rgba(0, 0, 0, 0.7)'
                 });
-                item.id='';
-                item.updateTime=new Date()
-                item.name+='_COPY'
-                await this.addMsgTemplate(item).catch(()=>loading.close())
-                loading.close()
+                // 将数据项的id清空（可能用于标识新增状态）
+                item.id = '';
+                // 更新数据项的更新时间为当前时间
+                item.updateTime = new Date();
+                // 在模版名称后添加“_COPY”后缀
+                item.name += '_COPY';
+                // 调用addMsgTemplate方法添加消息模板，使用await等待异步操作完成，若出现错误则关闭加载提示
+                await this.addMsgTemplate(item).catch(() => loading.close());
+                // 关闭加载提示
+                loading.close();
             }
-            loading.close()
-            this.getDataList()
+            // 最后再关闭一次加载提示（确保关闭，可能存在多余情况，但保证逻辑完整性）
+            loading.close();
+            // 重新获取数据列表，以更新展示的数据
+            this.getDataList();
         },
-        addMsgTemplate(msgTemplate){
+        addMsgTemplate(msgTemplate) {
             return new Promise((resolve, reject) => {
+                // 发起HTTP请求保存消息模板数据（此处应该是执行新增操作），对请求的数据进行了装饰处理
                 this.$http({
                     url: this.$http.adornUrl('/manage/msgTemplate/save'),
                     method: 'post',
                     data: this.$http.adornData(msgTemplate)
                 }).then(({ data }) => {
+                    // 根据返回数据判断保存操作是否成功
                     if (data && data.code === 200) {
-                        resolve()
+                        // 如果成功，调用resolve函数，表示异步操作成功完成
+                        resolve();
                     } else {
-                        this.$message.error(data.msg)
-                        reject(data.msg)
+                        // 如果失败，弹出错误提示信息，并调用reject函数，表示异步操作失败，传递错误信息
+                        this.$message.error(data.msg);
+                        reject(data.msg);
                     }
-                }).catch(err=>reject(err))
-            }) 
+                }).catch(err => reject(err));
+            });
         }
     }
 }

src/views/modules/wx/template-msg-log.vue

@@ -1,38 +1,57 @@
 <template>
+    <!-- 整个模块的容器类，用于包裹后续的表单、表格以及分页组件等 -->
     <div class="mod-config">
+        <!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <!-- openid输入框所在的表单项，使用el-input组件实现输入框，双向绑定dataForm.touser，有占位提示文字且可清空输入内容 -->
             <el-form-item>
                 <el-input v-model="dataForm.touser" placeholder="openid" clearable></el-input>
             </el-form-item>
+            <!-- 操作按钮所在的表单项 -->
             <el-form-item>
+                <!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
                 <el-button @click="getDataList()">查询</el-button>
+                <!-- 批量删除按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
                 <el-button v-if="isAuth('wx:templatemsglog:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
             </el-form-item>
         </el-form>
+
+        <!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
         <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
             <el-table-column type="selection" header-align="center" align="center" width="50">
             </el-table-column>
+            <!-- openid列，对应dataList中数据项的touser属性，设置了表头和内容的对齐方式以及列宽度 -->
             <el-table-column prop="touser" header-align="center" align="center" label="openid" width="100">
             </el-table-column>
+            <!-- 内容列，对应dataList中数据项的data属性，使用formatter函数（tableJsonFormat方法）格式化显示内容，设置了表头和内容的对齐方式以及列宽度 -->
             <el-table-column prop="data" header-align="center" align="center" :formatter="tableJsonFormat" label="内容"  width="300">
             </el-table-column>
+            <!-- 发送结果列，对应dataList中数据项的sendResult属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题和宽度 -->
             <el-table-column prop="sendResult" header-align="center" align="center" show-overflow-tooltip label="发送结果" width="150">
             </el-table-column>
+            <!-- 发送时间列，对应dataList中数据项的sendTime属性，设置了表头和内容的对齐方式以及列标题和宽度 -->
             <el-table-column prop="sendTime" header-align="center" align="center" width="100" label="发送时间">
             </el-table-column>
+            <!-- 链接列，对应dataList中数据项的url属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="url" header-align="center" align="center" show-overflow-tooltip label="链接">
             </el-table-column>
+            <!-- 小程序列，对应dataList中数据项的miniprogram属性，使用formatter函数（tableJsonFormat方法）格式化显示内容，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="miniprogram" header-align="center" align="center" :formatter="tableJsonFormat" show-overflow-tooltip label="小程序">
             </el-table-column>
+            <!-- 模板ID列，对应dataList中数据项的templateId属性，设置了表头和内容的对齐方式以及列标题和宽度 -->
             <el-table-column prop="templateId" header-align="center" align="center" label="模板ID"  width="150">
             </el-table-column>
+            <!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了删除按钮 -->
             <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                 <template slot-scope="scope">
                     <el-button type="text" size="small" @click="deleteHandle(scope.row.logId)">删除</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="totalCount" layout="total, sizes, prev, pager, next, jumper">
+
+        <!-- 分页组件，绑定了相关的分页事件和属性，用于切换每页显示数量、当前页码等操作 -->
+        <el-pagination @size-change="sizeChangeHandle" @current-change="current-changeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
         </el-pagination>
     </div>
 </template>
@@ -42,6 +61,7 @@ export default {
     data() {
         return {
             dataForm: {
+                // 用于存储查询条件中的openid，初始为空字符串
                 touser: ''
             },
             dataList: [],
@@ -54,12 +74,15 @@ export default {
         }
     },
     activated() {
+        // 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
         this.getDataList()
     },
     methods: {
-        // 获取数据列表
+        // 获取数据列表的方法
         getDataList() {
-            this.dataListLoading = true
+            // 设置正在加载数据的状态为true
+            this.dataListLoading = true;
+            // 发起HTTP请求获取模板消息日志的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
             this.$http({
                 url: this.$http.adornUrl('/manage/templateMsgLog/list'),
                 method: 'get',
@@ -71,65 +94,76 @@ export default {
                     'order': 'desc'
                 })
             }).then(({ data }) => {
+                // 根据返回数据的状态码判断是否请求成功
                 if (data && data.code === 200) {
-                    this.dataList = data.page.list
-                    this.totalCount = data.page.totalCount
+                    // 如果成功，更新数据列表和总记录数
+                    this.dataList = data.page.list;
+                    this.totalCount = data.page.totalCount;
                 } else {
-                    this.dataList = []
-                    this.totalCount = 0
+                    // 如果失败，清空数据列表和总记录数
+                    this.dataList = [];
+                    this.totalCount = 0;
                 }
-                this.dataListLoading = false
-            })
+                // 请求完成后，设置正在加载数据的状态为false
+                this.dataListLoading = false;
+            });
         },
-        // 每页数
+        // 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
         sizeChangeHandle(val) {
-            this.pageSize = val
-            this.pageIndex = 1
-            this.getDataList()
+            this.pageSize = val;
+            this.pageIndex = 1;
+            this.getDataList();
         },
-        // 当前页
+        // 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
         currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
+            this.pageIndex = val;
+            this.getDataList();
         },
-        // 多选
+        // 处理表格中选择项变化的方法，更新选中的数据项列表
         selectionChangeHandle(val) {
-            this.dataListSelections = val
+            this.dataListSelections = val;
         },
-        // 删除
+        // 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
         deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.logId)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+            // 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的logId数组进行批量删除
+            var ids = id? [id] : this.dataListSelections.map(item => item.logId);
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
                 this.$http({
                     url: this.$http.adornUrl('/manage/templateMsgLog/delete'),
                     method: 'post',
                     data: this.$http.adornData(ids, false)
                 }).then(({ data }) => {
+                    // 根据返回数据判断删除操作是否成功
                     if (data && data.code === 200) {
+                        // 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
                         this.$message({
                             message: '操作成功',
                             type: 'success',
                             duration: 1500,
                             onClose: () => {
-                                this.getDataList()
+                                this.getDataList();
                             }
-                        })
+                        });
                     } else {
-                        this.$message.error(data.msg)
+                        // 如果失败，弹出错误提示信息
+                        this.$message.error(data.msg);
                     }
-                })
-            })
+                });
+            });
         },
-        tableJsonFormat(row, column, cellValue){
+        tableJsonFormat(row, column, cellValue) {
+            // 如果传入的要格式化的值为空，则直接返回空字符串
             if (!cellValue) {
                 return '';
             }
-            return JSON.stringify(cellValue)
+            // 将传入的值（通常是JSON对象类型的数据）转换为JSON字符串格式进行显示，方便查看数据内容
+            return JSON.stringify(cellValue);
         }
     }
 }
-</script>
+</script>

src/views/modules/wx/wx-account.vue

@@ -1,41 +1,42 @@
 <template>
+    <!-- 整个模块的容器类，用于包裹后续的表单、表格以及相关弹窗组件等 -->
     <div class="mod-config">
-        <!-- 定义一个内联表单，用于搜索和操作 -->
+        <!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <!-- 参数名输入框所在的表单项，使用el-input组件实现输入框，双向绑定dataForm.key，有占位提示文字且可清空输入内容 -->
             <el-form-item>
-                <!-- 输入框，用于输入搜索关键词 -->
                 <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
             </el-form-item>
+            <!-- 操作按钮所在的表单项 -->
             <el-form-item>
-                <!-- 查询按钮，触发数据列表的获取 -->
+                <!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
                 <el-button @click="getDataList()">查询</el-button>
-                <!-- 新增按钮，根据权限显示 -->
+                <!-- 新增按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为主要按钮，点击时调用addOrUpdateHandle方法 -->
                 <el-button v-if="isAuth('wx:wxaccount:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-                <!-- 批量删除按钮，根据权限和选中项显示 -->
-                <el-button v-if="isAuth('wx:wxaccount:delete')" type="danger" @click="deleteHandle()"
-                    :disabled="dataListSelections.length <= 0">批量删除</el-button>
+                <!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
+                <el-button v-if="isAuth('wx:wxaccount:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
             </el-form-item>
         </el-form>
-        <!-- 数据列表展示 -->
-        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
-            style="width: 100%;">
-            <!-- 选择框列 -->
+
+        <!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
             <el-table-column type="selection" header-align="center" align="center" width="50">
             </el-table-column>
-            <!-- appid列 -->
+            <!-- appid列，对应dataList中数据项的appid属性，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="appid" header-align="center" align="center" label="appid">
             </el-table-column>
-            <!-- 公众号名称列 -->
+            <!-- 公众号名称列，对应dataList中数据项的name属性，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="name" header-align="center" align="center" label="公众号名称">
             </el-table-column>
-            <!-- 类型列，使用formatter格式化显示 -->
+            <!-- 类型列，对应dataList中数据项的type属性，使用formatter函数（accountTypeFormat方法）格式化显示内容，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="type" header-align="center" align="center" label="类型" :formatter="accountTypeFormat">
             </el-table-column>
-            <!-- 是否认证列，使用插槽自定义显示 -->
+            <!-- 是否认证列，对应dataList中数据项的verified属性，通过插槽根据数据项的verified值判断显示“是”或“否”，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="verified" header-align="center" align="center" label="是否认证">
-                <span slot-scope="scope">{{ scope.row.verified ? "是" : "否" }}</span>
+                <span slot-scope="scope">{{scope.row.verified? "是" : "否"}}</span>
             </el-table-column>
-            <!-- 操作列，包含接入、修改和删除按钮 -->
+            <!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了接入、修改和删除按钮 -->
             <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                 <template slot-scope="scope">
                     <el-button type="text" size="small" @click="accessInfo(scope.row)">接入</el-button>
@@ -44,102 +45,129 @@
                 </template>
             </el-table-column>
         </el-table>
-        <!-- 新增/修改弹窗组件 -->
+
+        <!-- 新增/修改组件，通过属性和事件与父组件进行交互，根据addOrUpdateVisible的值决定是否显示 -->
         <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
-        <!-- 接入信息弹窗组件 -->
+        <!-- 账号接入信息组件，根据accountAccessVisible的值决定是否显示 -->
         <account-access v-if="accountAccessVisible" ref="accountAccessDialog"></account-access>
     </div>
 </template>
 
 <script>
-import AddOrUpdate from './account/wx-account-add-or-update' // 引入新增/修改组件
-import AccountAccess from './account/wx-account-access-info' // 引入接入信息组件
-import { mapState } from 'vuex' // 引入Vuex的mapState辅助函数
+// 引入新增/修改组件，用于实现公众号账号的新增或修改功能相关交互逻辑
+import AddOrUpdate from './account/wx-account-add-or-update'
+// 引入账号接入信息组件，用于展示和处理公众号账号接入相关信息逻辑
+import AccountAccess from './account/wx-account-access-info'
+// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
+import { mapState } from 'vuex'
 export default {
     data() {
         return {
-            dataForm: { key: '' }, // 搜索表单数据
-            dataList: [], // 数据列表
-            dataListLoading: false, // 数据列表加载状态
-            dataListSelections: [], // 选中项
-            addOrUpdateVisible: false, // 新增/修改弹窗显示状态
-            accountAccessVisible: false // 接入信息弹窗显示状态
+            dataForm: {
+                // 用于存储查询条件中的参数名，初始为空字符串
+                key: ''
+            },
+            dataList: [],
+            dataListLoading: false,
+            dataListSelections: [],
+            addOrUpdateVisible: false,
+            accountAccessVisible: false
         }
     },
-    components: { AddOrUpdate, AccountAccess }, // 注册组件
+    components: {
+        AddOrUpdate, AccountAccess
+    },
     computed: mapState({
-        ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES // 从Vuex获取账号类型映射
+        // 从Vuex的state中获取wxAccount模块下的ACCOUNT_TYPES状态，映射到组件的计算属性中，用于类型列的格式化显示操作
+        ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES
     }),
     activated() {
-        this.getDataList() // 组件激活时获取数据列表
+        // 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
+        this.getDataList()
     },
     methods: {
-        // 获取数据列表
+        // 获取数据列表的方法
         getDataList() {
-            this.dataListLoading = true
+            // 设置正在加载数据的状态为true
+            this.dataListLoading = true;
+            // 发起HTTP请求获取微信公众号账号的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
             this.$http({
-                url: this.$http.adornUrl('/manage/wxAccount/list'), // 请求地址
+                url: this.$http.adornUrl('/manage/wxAccount/list'),
                 method: 'get',
-                params: this.$http.adornParams({ 'key': this.dataForm.key }) // 请求参数
+                params: this.$http.adornParams({
+                    'key': this.dataForm.key
+                })
             }).then(({ data }) => {
+                // 根据返回数据的状态码判断是否请求成功
                 if (data && data.code === 200) {
-                    this.dataList = data.list // 更新数据列表
-                    this.$store.commit('wxAccount/updateAccountList', data.list) // 更新Vuex中的账号列表
+                    // 如果成功，更新数据列表，并通过Vuex的mutation更新账号列表状态（可能用于其他地方的数据同步等）
+                    this.dataList = data.list;
+                    this.$store.commit('wxAccount/updateAccountList', data.list);
                 } else {
-                    this.dataList = [] // 清空数据列表
+                    // 如果失败，清空数据列表
+                    this.dataList = [];
                 }
-                this.dataListLoading = false // 结束加载状态
-            })
+                // 请求完成后，设置正在加载数据的状态为false
+                this.dataListLoading = false;
+            });
         },
-        // 多选处理
+        // 处理表格中选择项变化的方法，更新选中的数据项列表
         selectionChangeHandle(val) {
-            this.dataListSelections = val // 更新选中项
+            this.dataListSelections = val;
         },
-        // 新增/修改处理
+        // 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入要操作的数据项（可为空表示新增）
         addOrUpdateHandle(item) {
-            this.addOrUpdateVisible = true // 显示弹窗
+            this.addOrUpdateVisible = true;
             this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(item) // 初始化弹窗数据
-            })
+                this.$refs.addOrUpdate.init(item);
+            });
         },
-        // 接入信息处理
         accessInfo(item) {
-            this.accountAccessVisible = true // 显示弹窗
+            // 设置账号接入信息组件的显示状态为true，即显示该组件
+            this.accountAccessVisible = true;
             this.$nextTick(() => {
-                this.$refs.accountAccessDialog.init(item) // 初始化弹窗数据
-            })
+                // 在DOM更新后，初始化账号接入信息组件，传入要操作的数据项
+                this.$refs.accountAccessDialog.init(item);
+            });
         },
-        // 删除处理
+        // 删除操作的方法，根据传入的appid判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
         deleteHandle(appid) {
-            var ids = appid ? [appid] : this.dataListSelections.map(item => item.appid) // 获取要删除的appid
-            this.$confirm(`确定对[appid=${ids.join(',')}]进行[${appid ? '删除' : '批量删除'}]操作?`, '提示', {
+            // 如果传入了appid，表示单个删除，将其放入数组；否则使用选中的数据项的appid数组进行批量删除
+            var ids = appid? [appid] : this.dataListSelections.map(item => {
+                return item.appid
+            });
+            this.$confirm(`确定对[appid=${ids.join(',')}]进行[${appid? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
                 this.$http({
-                    url: this.$http.adornUrl('/manage/wxAccount/delete'), // 请求地址
+                    url: this.$http.adornUrl('/manage/wxAccount/delete'),
                     method: 'post',
-                    data: this.$http.adornData(ids, false) // 请求数据
+                    data: this.$http.adornData(ids, false)
                 }).then(({ data }) => {
+                    // 根据返回数据判断删除操作是否成功
                     if (data && data.code === 200) {
+                        // 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
                         this.$message({
                             message: '操作成功',
                             type: 'success',
                             duration: 1500,
                             onClose: () => {
-                                this.getDataList() // 刷新数据列表
+                                this.getDataList();
                             }
-                        })
+                        });
                     } else {
-                        this.$message.error(data.msg) // 显示错误信息
+                        // 如果失败，弹出错误提示信息
+                        this.$message.error(data.msg);
                     }
-                })
-            })
+                });
+            });
         },
-        // 类型格式化函数
         accountTypeFormat(row, column, cellValue) {
-            return this.ACCOUNT_TYPES[cellValue] // 根据类型值返回对应的类型名称
+            // 根据数据项中的类型值，从ACCOUNT_TYPES对象中获取对应的显示名称并返回，用于格式化类型列的显示内容
+            return this.ACCOUNT_TYPES[cellValue];
         }
     }
 }

src/views/modules/wx/wx-assets.vue

@@ -1,21 +1,24 @@
 <template>
-    <!-- 使用element-ui的el-tabs组件创建一个标签页切换组件 -->
+    <!-- 使用el-tabs组件创建选项卡，通过v-model双向绑定activeTab来控制当前选中的选项卡，监听tab-click事件，触发handleTabClick方法 -->
     <el-tabs v-model="activeTab" @tab-click="handleTabClick">
-        <!-- 图片素材标签页，使用el-tab-pane组件定义每个标签页的内容 -->
-        <el-tab-pane :label="'图片素材（' + assetsCount.imageCount + ')'" name="image" lazy>
-            <!-- 引入自定义的MaterialFile组件，用于展示图片素材 -->
+        <!-- 图片素材选项卡面板，标签显示为“图片素材（数量）”，数量通过assetsCount.imageCount动态获取，设置name属性为“image”，采用懒加载模式 -->
+        <el-tab-pane :label="'图片素材（'+assetsCount.imageCount+')'" name="image" lazy>
+            <!-- 引入自定义组件material-file，设置其fileType属性为“image”，用于展示和管理图片素材相关功能，同时监听其@change事件，触发materialCount方法 -->
             <material-file fileType="image" ref="imagePanel" @change="materialCount"></material-file>
         </el-tab-pane>
-        <!-- 语音素材标签页 -->
-        <el-tab-pane :label="'语音素材（' + assetsCount.voiceCount + ')'" name="voice" lazy>
+        <!-- 语音素材选项卡面板，标签显示为“语音素材（数量）”，数量通过assetsCount.voiceCount动态获取，设置name属性为“voice”，采用懒加载模式 -->
+        <el-tab-pane :label="'语音素材（'+assetsCount.voiceCount+')'" name="voice" lazy>
+            <!-- 引入自定义组件material-file，设置其fileType属性为“voice”，用于展示和管理语音素材相关功能，同时监听其@change事件，触发materialCount方法 -->
             <material-file fileType="voice" ref="voicePanel" @change="materialCount"></material-file>
         </el-tab-pane>
-        <!-- 视频素材标签页 -->
-        <el-tab-pane :label="'视频素材（' + assetsCount.videoCount + ')'" name="video" lazy>
+        <!-- 视频素材选项卡面板，标签显示为“视频素材（数量）”，数量通过assetsCount.videoCount动态获取，设置name属性为“video”，采用懒加载模式 -->
+        <el-tab-pane :label="'视频素材（'+assetsCount.videoCount+')'" name="video" lazy>
+            <!-- 引入自定义组件material-file，设置其fileType属性为“video”，用于展示和管理视频素材相关功能，同时监听其@change事件，触发materialCount方法 -->
             <material-file fileType="video" ref="videoPanel" @change="materialCount"></material-file>
         </el-tab-pane>
-        <!-- 图文素材标签页，使用自定义的MaterialNews组件 -->
-        <el-tab-pane :label="'图文素材（' + assetsCount.newsCount + ')'" name="news" lazy>
+        <!-- 图文素材选项卡面板，标签显示为“图文素材（数量）”，数量通过assetsCount.newsCount动态获取，设置name属性为“news”，采用懒加载模式 -->
+        <el-tab-pane :label="'图文素材（'+assetsCount.newsCount+')'" name="news" lazy>
+            <!-- 引入自定义组件material-news，用于展示和管理图文素材相关功能，同时监听其@change事件，触发materialCount方法 -->
             <material-news ref="newsPanel" @change="materialCount"></material-news>
         </el-tab-pane>
     </el-tabs>
@@ -25,49 +28,54 @@
 export default {
     data() {
         return {
-            // 当前激活的标签页名称
+            // 用于双向绑定el-tabs组件中当前选中的选项卡名称，初始值为“image”，表示默认选中图片素材选项卡
             activeTab: 'image',
-            // 素材数量对象，用于存储各类素材的数量
             assetsCount: {
-                imageCount: '..', // 图片素材数量，初始化为占位符
-                videoCount: '..', // 视频素材数量，初始化为占位符
-                voiceCount: '..', // 语音素材数量，初始化为占位符
-                newsCount: '..'  // 图文素材数量，初始化为占位符
+                // 图片素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
+                imageCount: '..',
+                // 视频素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
+                videoCount: '..',
+                // 语音素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
+                voiceCount: '..',
+                // 图文素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
+                newsCount: '..'
             }
         };
     },
-    // 组件注册，异步加载MaterialFile和MaterialNews组件
     components: {
+        // 动态导入自定义组件material-file，用于处理不同类型的素材文件（图片、语音、视频）相关功能
         MaterialFile: () => import('./assets/material-file'),
+        // 动态导入自定义组件material-news，用于处理图文素材相关功能
         MaterialNews: () => import('./assets/material-news')
     },
-    // 组件挂载完成后立即执行的钩子函数
     mounted() {
-        this.materialCount(); // 组件挂载后立即调用materialCount方法获取素材数量
+        // 组件挂载完成后，调用materialCount方法，用于获取各类素材的数量信息
+        this.materialCount();
     },
     methods: {
-        // 标签页点击事件处理函数
         handleTabClick(tab, event) {
+            // 在下次DOM更新循环后执行以下代码，确保操作的元素已经渲染完成
             this.$nextTick(() => {
-                // 在DOM更新完成后，调用对应标签页组件的init方法（假设该方法存在）
-                this.$refs[tab.name + 'Panel'].init()
-            })
+                // 通过ref获取对应选项卡面板的组件实例，并调用其init方法进行初始化操作（不同组件的init方法可能有不同的初始化逻辑）
+                this.$refs[tab.name + 'Panel'].init();
+            });
         },
-        // 获取素材数量的方法
         materialCount() {
-            // 使用自定义的$http方法（可能是封装的axios）发送请求获取素材数量
+            // 发起HTTP请求，获取素材数量信息，对请求的URL进行了装饰处理（可能是统一处理请求相关的配置，比如添加前缀、处理参数等）
             this.$http({
-                url: this.$http.adornUrl('/manage/wxAssets/materialCount') // 发送请求的URL
+                url: this.$http.adornUrl('/manage/wxAssets/materialCount')
             }).then(({ data }) => {
+                // 根据返回数据的状态码判断请求是否成功
                 if (data && data.code == 200) {
-                    // 如果请求成功，更新assetsCount对象
-                    this.assetsCount = data.data
+                    // 如果成功，将返回数据中的素材数量信息更新到assetsCount对象中，用于在选项卡标签等处显示准确的数量
+                    this.assetsCount = data.data;
                 } else {
-                    // 如果请求失败，显示错误信息
+                    // 如果请求失败，弹出错误提示信息，显示接口返回的错误消息内容
                     this.$message.error(data.msg);
                 }
-            })
+            });
         }
+
     }
 };
 </script>

src/views/modules/wx/wx-menu-button-editor.vue

@@ -1,38 +1,38 @@
 <template>
+    <!-- 最外层的 div 作为整体容器 -->
     <div>
-        <!-- 菜单项的输入框组，底部有边框 -->
+        <!-- 菜单输入组容器，设置底部边框样式，用于展示菜单名称以及删除菜单按钮 -->
         <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
-            <!-- 显示菜单名称 -->
-            <div class="menu-name">{{ button.name }}</div>
-            <!-- 删除菜单项的按钮，点击时触发'delMenu'事件 -->
+            <!-- 展示菜单名称，通过插值表达式绑定 button.name 获取名称值 -->
+            <div class="menu-name">{{button.name}}</div>
+            <!-- 删除菜单按钮，点击时通过 $emit 触发父组件的 'delMenu' 事件，由父组件来处理菜单删除相关逻辑 -->
             <div class="menu-del" @click="$emit('delMenu')">删除菜单</div>
         </div>
-
-        <!-- 菜单名称的输入框组 -->
+        <!-- 菜单输入组容器，用于输入菜单名称 -->
         <div class="menu-input-group">
+            <!-- 菜单名称标签 -->
             <div class="menu-label">菜单名称</div>
+            <!-- 菜单名称输入框所在的容器 -->
             <div class="menu-input">
-                <!-- 输入框，用于输入菜单名称，绑定到button.name，并监听输入事件 -->
-                <input type="text" name="name" placeholder="请输入菜单名称" class="menu-input-text" v-model="button.name"
-                    @input="checkMenuName(button.name)">
-                <!-- 当菜单名称超过字数限制时显示 -->
+                <!-- 文本输入框，用于输入菜单名称，绑定 v-model 到 button.name 实现双向数据绑定，监听 input 事件，触发 checkMenuName 方法来检查名称长度是否合规 -->
+                <input type="text" name="name" placeholder="请输入菜单名称" class="menu-input-text" v-model="button.name" @input="checkMenuName(button.name)">
+                <!-- 提示信息，当 menuNameBounds 为 true 时显示，提示字数超过上限，通过 v-show 根据条件控制显示与否 -->
                 <p class="menu-tips" style="color:#e15f63" v-show="menuNameBounds">字数超过上限</p>
-                <!-- 显示菜单名称的字数限制 -->
-                <p class="menu-tips">字数不超过{{ selectedMenuLevel == 1 ? '5' : '8' }}个汉字</p>
+                <!-- 提示信息，显示菜单名称的字数限制规则，根据 selectedMenuLevel 的值动态展示不同的字数上限说明 -->
+                <p class="menu-tips">字数不超过{{selectedMenuLevel==1?'5':'8'}}个汉字</p>
             </div>
         </div>
-
-        <!-- 当没有子菜单或子菜单为空时显示 -->
-        <div v-show="!button.subButtons || button.subButtons.length == 0">
-            <!-- 菜单内容的输入框组 -->
+        <!-- 根据按钮是否有子按钮或者子按钮数组长度是否为 0 来决定是否显示下面的内容，若没有子按钮则展示以下配置项 -->
+        <div v-show="!button.subButtons || button.subButtons.length==0">
+            <!-- 菜单输入组容器，用于选择菜单内容类型 -->
             <div class="menu-input-group">
+                <!-- 菜单内容类型标签 -->
                 <div class="menu-label">菜单内容</div>
+                <!-- 下拉选择框，用于选择菜单的类型，通过 v-model 双向绑定 button.type，绑定不同的选项值，每个选项对应不同的菜单功能 -->
                 <div class="menu-input">
-                    <!-- 下拉选择框，用于选择菜单类型 -->
                     <select v-model="button.type" name="type" class="menu-input-text">
                         <option value="view">跳转网页(view)</option>
                         <option value="media_id">发送消息(media_id)</option>
-                        <!-- 注释掉的选项 -->
                         <!--<option value="view_limited">跳转公众号图文消息链接(view_limited)</option>-->
                         <option value="miniprogram">打开指定小程序(miniprogram)</option>
                         <option value="click">自定义点击事件(click)</option>
@@ -45,55 +45,83 @@
                     </select>
                 </div>
             </div>
-
-            <!-- 根据选择的菜单类型显示不同的内容输入框 -->
-            <div class="menu-content" v-if="button.type == 'view'">
+            <!-- 当菜单类型为 'view' 时显示的内容，用于配置跳转网页相关信息 -->
+            <div class="menu-content" v-if="button.type=='view'">
+                <!-- 菜单输入组容器，用于输入页面地址 -->
                 <div class="menu-input-group">
+                    <!-- 提示信息，说明点击该子菜单后的跳转行为 -->
                     <p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p>
+                    <!-- 页面地址标签 -->
                     <div class="menu-label">页面地址</div>
+                    <!-- 页面地址输入框所在的容器 -->
                     <div class="menu-input">
+                        <!-- 文本输入框，用于输入页面地址，通过 v-model 双向绑定 button.url -->
                         <input type="text" placeholder="" class="menu-input-text" v-model="button.url">
                     </div>
                 </div>
             </div>
-            <div class="menu-content" v-else-if="button.type == 'media_id'">
+            <!-- 当菜单类型为 'media_id' 时显示的内容，用于配置发送图文消息相关信息 -->
+            <div class="menu-content" v-else-if="button.type=='media_id'">
+                <!-- 菜单输入组容器，用于输入图文消息的 media_id -->
                 <div class="menu-input-group">
+                    <!-- 提示信息，说明点击该菜单后的行为 -->
                     <p class="menu-tips">订阅者点击该菜单会收到以下图文消息</p>
+                    <!-- media_id 标签 -->
                     <div class="menu-label">media_id</div>
+                    <!-- media_id 输入框所在的容器 -->
                     <div class="menu-input">
+                        <!-- 文本输入框，用于输入图文消息的 media_id，通过 v-model 双向绑定 button.mediaId -->
                         <input type="text" placeholder="图文消息media_id" class="menu-input-text" v-model="button.mediaId">
                     </div>
                 </div>
             </div>
-            <div class="menu-content" v-else-if="button.type == 'miniprogram'">
+            <!-- 当菜单类型为 'miniprogram' 时显示的内容，用于配置小程序相关信息，包含 appId、页面路径以及备用网页等 -->
+            <div class="menu-content" v-else-if="button.type=='miniprogram'">
+                <!-- 菜单输入组容器，用于输入小程序的 appId -->
                 <div class="menu-input-group">
+                    <!-- 提示信息，说明点击该子菜单后的跳转行为 -->
                     <p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p>
+                    <!-- 小程序 appId 标签 -->
                     <div class="menu-label">小程序appId</div>
+                    <!-- 小程序 appId 输入框所在的容器 -->
                     <div class="menu-input">
-                        <input type="text" placeholder="小程序的appId（仅认证公众号可配置）" class="menu-input-text"
-                            v-model="button.appId">
+                        <!-- 文本输入框，用于输入小程序的 appId，通过 v-model 双向绑定 button.appId，并提示仅认证公众号可配置 -->
+                        <input type="text" placeholder="小程序的appId（仅认证公众号可配置）" class="menu-input-text" v-model="button.appId">
                     </div>
                 </div>
+                <!-- 菜单输入组容器，用于输入小程序的页面路径 -->
                 <div class="menu-input-group">
+                    <!-- 小程序路径标签 -->
                     <div class="menu-label">小程序路径</div>
+                    <!-- 小程序路径输入框所在的容器 -->
                     <div class="menu-input">
-                        <input type="text" placeholder="小程序的页面路径 pages/index/index" class="menu-input-text"
-                            v-model="button.pagePath">
+                        <!-- 文本输入框，用于输入小程序的页面路径，通过 v-model 双向绑定 button.pagePath，并给出示例路径 -->
+                        <input type="text" placeholder="小程序的页面路径 pages/index/index" class="menu-input-text" v-model="button.pagePath">
                     </div>
                 </div>
+                <!-- 菜单输入组容器，用于输入备用网页地址 -->
                 <div class="menu-input-group">
+                    <!-- 备用网页标签 -->
                     <div class="menu-label">备用网页</div>
+                    <!-- 备用网页地址输入框所在的容器 -->
                     <div class="menu-input">
+                        <!-- 文本输入框，用于输入备用网页地址，通过 v-model 双向绑定 button.url，并给出相关说明 -->
                         <input type="text" placeholder="" class="menu-input-text" v-model="button.url">
                         <p class="menu-tips">旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
                     </div>
                 </div>
             </div>
+            <!-- 当菜单类型为其他值（非上述几种情况）时显示的内容，用于配置菜单 KEY 值 -->
             <div class="menu-content" v-else>
+                <!-- 菜单输入组容器，用于输入菜单 KEY 值 -->
                 <div class="menu-input-group">
+                    <!-- 提示信息，说明 KEY 值的长度限制及用途 -->
                     <p class="menu-tips">用于消息接口推送，不超过128字节</p>
+                    <!-- 菜单 KEY 值标签 -->
                     <div class="menu-label">菜单KEY值</div>
+                    <!-- 菜单 KEY 值输入框所在的容器 -->
                     <div class="menu-input">
+                        <!-- 文本输入框，用于输入菜单 KEY 值，通过 v-model 双向绑定 button.key -->
                         <input type="text" placeholder="" class="menu-input-text" v-model="button.key">
                     </div>
                 </div>
@@ -104,13 +132,14 @@
 
 <script>
 export default {
+    // 定义组件接收的属性
     props: {
-        // 接收父组件传递的菜单级别，默认为1
+        // 表示选中的菜单层级，类型为数字，默认值为 1
         selectedMenuLevel: {
             type: Number,
             default: 1
         },
-        // 接收父组件传递的菜单对象，必传
+        // 表示菜单相关的数据对象，类型为对象，是必填项
         button: {
             type: Object,
             required: true
@@ -118,29 +147,35 @@ export default {
     },
     data() {
         return {
-            // 菜单名称是否超过字数限制的标志
+            // 用于标记菜单名称长度是否超出上限，初始值为 false
             menuNameBounds: false,
         }
     },
     methods: {
         // 检查菜单名称长度的方法
         checkMenuName: function (val) {
-            // 根据菜单级别和菜单名称长度设置menuNameBounds的值
-            if (this.selectedMenuLevel == 1 && this.getMenuNameLen(val) <= 5) { // 注意：原代码逻辑可能有误，应为5而非10
-                this.menuNameBounds = false
-            } else if (this.selectedMenuLevel == 2 && this.getMenuNameLen(val) <= 8) {
-                this.menuNameBounds = false
-            } else {
-                this.menuNameBounds = true
+            // 如果选中的菜单层级为 1 且菜单名称长度（通过 getMenuNameLen 方法获取）小于等于 10
+            if (this.selectedMenuLevel == 1 && this.getMenuNameLen(val) <= 10) {
+                // 将 menuNameBounds 设置为 false，表示菜单名称长度未超出上限
+                this.menuNameBounds = false;
+            }
+            // 如果选中的菜单层级为 2 且菜单名称长度小于等于 16
+            else if (this.selectedMenuLevel == 2 && this.getMenuNameLen(val) <= 16) {
+                this.menuNameBounds = false;
+            }
+            // 其他情况，即超出对应层级的长度限制，将 menuNameBounds 设置为 true
+            else {
+                this.menuNameBounds = true;
             }
         },
-        // 获取菜单名称长度的方法，考虑中文字符占两个字节
+        // 获取菜单名称长度的方法
         getMenuNameLen: function (val) {
             var len = 0;
+            // 遍历菜单名称字符串的每个字符
             for (var i = 0; i < val.length; i++) {
                 var a = val.charAt(i);
-                // 判断字符是否为中文字符，并累加长度
-                a.match(/[^\x00-\xff]/ig) != null ? len += 2 : len += 1;
+                // 判断字符是否为双字节字符（非 ASCII 码字符），如果是则长度计为 2，否则计为 1
+                a.match(/[^\x00-\xff]/ig)!= null? len += 2 : len += 1;
             }
             return len;
         }