From 553be20612b79ca3fc2bf01abb816222c310ef82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=AB=9A=E5=AB=9A?= <1878447768@qq.com>
Date: Mon, 16 Dec 2024 16:33:45 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=9D=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 23cdb0b0..d20dcbc2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,33 +1,61 @@
+<!-- Vue组件的模板部分开始 -->
 <template>
+    <!-- 定义一个div元素作为Vue应用的根容器，并赋予其id为"app" -->
     <div id="app">
+        <!-- 使用Vue Router的<router-view>组件来显示当前路由匹配的组件 -->
+        <!-- <transition>组件用于在路由切换时添加过渡效果，name属性指定了过渡效果的名称 -->
         <transition name="fade">
-            <router-view />
+            <router-view /> <!-- 此处将渲染与当前URL匹配的组件 -->
         </transition>
     </div>
 </template>
-
+<!-- Vue组件的模板部分结束 -->
 <style>
+/* 为类名为image-sm的img元素设置最大宽度和高度 */
 img.image-sm {
     max-width: 80px;
+    /* 最大宽度为80像素 */
     max-height: 80px;
+    /* 最大高度为80像素 */
 }
+
+/* 为el-col类下的el-select和el-date-editor元素设置宽度为100% */
+/* 这通常用于Element UI框架中的布局和表单组件 */
 .el-col .el-select,
 .el-col .el-date-editor {
     width: 100%;
+    /* 宽度占满父容器 */
 }
+
+/* 为类名为demo-table-expand的元素设置字体大小为0 */
+/* 这可能是一个技巧，用于消除内部元素的默认间距 */
 .demo-table-expand {
     font-size: 0;
+    /* 字体大小设置为0 */
 }
+
+/* 为demo-table-expand类下的label元素设置宽度和颜色 */
 .demo-table-expand label {
     width: 90px;
+    /* 宽度为90像素 */
     color: #99a9bf;
+    /* 颜色为深灰色 */
 }
+
+/* 为demo-table-expand类下的el-form-item元素设置外边距和宽度 */
+/* 这通常用于表单布局，确保表单项正确对齐和分布 */
 .demo-table-expand .el-form-item {
     margin-right: 0;
+    /* 右侧外边距为0 */
     margin-bottom: 0;
+    /* 底部外边距为0 */
     width: 50%;
+    /* 宽度为父容器的50% */
 }
+
+/* 为类名为text-warning的元素设置文本颜色为警告色 */
 .text-warning {
     color: #e6a23c;
+    /* 颜色为橙色系的警告色 */
 }
 </style>

From cc2f5350395c086b5ac30f06441aed7c489ea011 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=AB=9A=E5=AB=9A?= <1878447768@qq.com>
Date: Mon, 16 Dec 2024 16:39:48 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=9D=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                                   |  82 +++++---
 src/views/main-content.vue                    |  39 ++--
 src/views/main-navbar-update-password.vue     |  41 ++--
 src/views/main-navbar.vue                     |  52 ++++-
 src/views/main-sidebar-sub-menu.vue           |  39 +++-
 src/views/main-sidebar.vue                    |  56 ++++--
 src/views/main.vue                            |  98 ++++++----
 src/views/modules/wx/wx-account.vue           | 101 +++++-----
 src/views/modules/wx/wx-assets.vue            |  54 ++++--
 .../modules/wx/wx-menu-button-editor.vue      |  52 +++--
 src/views/modules/wx/wx-menu.vue              | 179 +++++++++++-------
 src/views/modules/wx/wx-msg-reply.vue         |  75 +++++---
 src/views/modules/wx/wx-msg.vue               | 111 +++++++----
 .../modules/wx/wx-qrcode-add-or-update.vue    |  54 ++++--
 src/views/modules/wx/wx-qrcode.vue            | 114 ++++++-----
 src/views/modules/wx/wx-user-tagging.vue      | 146 +++++++-------
 src/views/modules/wx/wx-user.vue              | 130 ++++++++-----
 17 files changed, 920 insertions(+), 503 deletions(-)

diff --git a/src/main.js b/src/main.js
index 304e5839..9787976c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,32 +1,70 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import VueCookie from 'vue-cookie'
+// 从node_modules中引入Vue框架
+import Vue from 'vue';
+
+// 引入根组件App.vue
+import App from './App.vue';
+
+// 引入Vue Router实例，用于管理前端路由
+import router from './router';
+
+// 引入Vuex状态管理实例
+import store from './store';
+
+// 引入vue-cookie插件，用于在Vue应用中方便地操作cookie
+import VueCookie from 'vue-cookie';
+
+// 引入ElementUI组件库，这是一个基于Vue的桌面端组件库
 import ElementUI from 'element-ui';
-import moment from 'moment'
 
+// 引入moment.js库，用于日期和时间的处理
+import moment from 'moment';
+
+// 引入ElementUI的样式文件，这是ElementUI组件的默认样式
 import 'element-ui/lib/theme-chalk/index.css';
-import './assets/css/common.css'
-import './assets/scss/index.scss'
-import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
-import { isAuth } from '@/utils'
-import VueClipboard from 'vue-clipboard2'
 
+// 引入项目中自定义的common.css样式文件
+import './assets/css/common.css';
+
+// 引入项目中自定义的index.scss样式文件（注意：.scss文件需要sass-loader来编译）
+import './assets/scss/index.scss';
+
+// 引入项目中自定义的httpRequest模块，这个模块封装了axios用于发起HTTP请求
+import httpRequest from '@/utils/httpRequest'; // @代表src目录的别名，在webpack配置中定义
+
+// 从utils模块中引入isAuth函数，这个函数可能用于检查用户的登录状态或权限
+import { isAuth } from '@/utils';
+
+// 引入vue-clipboard2插件，用于在Vue应用中方便地实现复制文本到剪贴板的功能
+import VueClipboard from 'vue-clipboard2';
+
+// 使用ElementUI组件库
 Vue.use(ElementUI);
-Vue.use(VueClipboard)
-Vue.use(VueCookie)
-Vue.config.productionTip = false
 
-// 挂载全局
-Vue.prototype.$http = httpRequest // ajax请求方法
-Vue.prototype.isAuth = isAuth     // 权限方法
+// 使用vue-clipboard2插件
+Vue.use(VueClipboard);
+
+// 使用vue-cookie插件
+Vue.use(VueCookie);
 
+// 关闭Vue在启动时生成的生产提示
+Vue.config.productionTip = false;
+
+// 将httpRequest挂载到Vue的原型上，这样在Vue组件中就可以通过this.$http来访问了
+Vue.prototype.$http = httpRequest;
+
+// 将isAuth函数挂载到Vue的原型上，这样在Vue组件中就可以通过this.isAuth来访问了
+Vue.prototype.isAuth = isAuth;
+
+// 设置moment.js的语言环境为中文（中国）
 moment.locale('zh-cn');
-Vue.prototype.$moment = moment; //时间处理
 
+// 将moment挂载到Vue的原型上，这样在Vue组件中就可以通过this.$moment来访问了
+Vue.prototype.$moment = moment;
+
+// 创建Vue实例，并传入router、store和渲染函数
 new Vue({
-    router,
-    store,
-    render: h => h(App)
-}).$mount('#app')
+    router, // 路由实例
+    store,  // 状态管理实例
+    // 渲染函数，h是createElement函数的别名，用于创建虚拟DOM节点
+    render: h => h(App) // 将App组件渲染为根节点
+}).$mount('#app'); // 将Vue实例挂载到HTML中的id为app的元素上
\ No newline at end of file
diff --git a/src/views/main-content.vue b/src/views/main-content.vue
index 987dcd84..ff149e64 100644
--- a/src/views/main-content.vue
+++ b/src/views/main-content.vue
@@ -1,7 +1,9 @@
 <template>
     <main class="site-content" :class="{ 'site-content--tabs': $route.meta.isTab }">
-        <!-- 主入口标签页 s -->
-        <el-tabs v-if="$route.meta.isTab" v-model="mainTabsActiveName" :closable="true" @tab-click="selectedTabHandle" @tab-remove="removeTabHandle">
+        <!-- 如果当前路由元信息中包含isTab，则显示标签页组件 -->
+        <el-tabs v-if="$route.meta.isTab" v-model="mainTabsActiveName" :closable="true" @tab-click="selectedTabHandle"
+            @tab-remove="removeTabHandle">
+            <!-- 标签页工具菜单，包含关闭当前、关闭其他、关闭全部和刷新功能 -->
             <el-dropdown class="site-tabs__tools" :show-timeout="0">
                 <i class="el-icon-arrow-down el-icon--right"></i>
                 <el-dropdown-menu slot="dropdown">
@@ -11,17 +13,20 @@
                     <el-dropdown-item @click.native="refresh()">刷新当前标签页</el-dropdown-item>
                 </el-dropdown-menu>
             </el-dropdown>
+            <!-- 循环渲染标签页 -->
             <el-tab-pane v-for="item in mainTabs" :key="item.name" :label="item.title" :name="item.name">
                 <el-card :body-style="siteContentViewHeight">
-                    <iframe v-if="item.type === 'iframe'" :src="item.iframeUrl" width="100%" height="100%" frameborder="0" scrolling="yes">
-                    </iframe>
+                    <!-- 如果标签页类型为iframe，则渲染iframe -->
+                    <iframe v-if="item.type === 'iframe'" :src="item.iframeUrl" width="100%" height="100%"
+                        frameborder="0" scrolling="yes"></iframe>
+                    <!-- 否则，渲染router-view，并使用keep-alive缓存组件 -->
                     <keep-alive v-else>
                         <router-view v-if="item.name === mainTabsActiveName" />
                     </keep-alive>
                 </el-card>
             </el-tab-pane>
         </el-tabs>
-        <!-- 主入口标签页 e -->
+        <!-- 如果当前路由元信息中不包含isTab，则直接渲染router-view -->
         <el-card v-else :body-style="siteContentViewHeight">
             <keep-alive>
                 <router-view />
@@ -33,63 +38,71 @@
 <script>
 import { isURL } from '@/utils/validate'
 export default {
+    // 从父组件注入refresh方法
     inject: ['refresh'],
     data() {
         return {
+            // 无需定义数据属性，因为所有需要的数据都通过计算属性获取
         }
     },
     computed: {
+        // 获取文档客户端高度
         documentClientHeight: {
             get() { return this.$store.state.common.documentClientHeight }
         },
+        // 获取当前激活的菜单名称，并允许设置新的值
         menuActiveName: {
             get() { return this.$store.state.common.menuActiveName },
             set(val) { this.$store.commit('common/updateMenuActiveName', val) }
         },
+        // 获取主标签页列表，并允许更新列表
         mainTabs: {
             get() { return this.$store.state.common.mainTabs },
             set(val) { this.$store.commit('common/updateMainTabs', val) }
         },
+        // 获取当前激活的标签页名称，并允许设置新的值
         mainTabsActiveName: {
             get() { return this.$store.state.common.mainTabsActiveName },
             set(val) { this.$store.commit('common/updateMainTabsActiveName', val) }
         },
+        // 根据条件计算页面内容视图的高度
         siteContentViewHeight() {
             var height = this.documentClientHeight - 50 - 30 - 2
             if (this.$route.meta.isTab) {
                 height -= 40
+                // 如果当前路由的meta中包含iframeUrl且为有效URL，则设置固定高度；否则设置最小高度
                 return isURL(this.$route.meta.iframeUrl) ? { height: height + 'px' } : { minHeight: height + 'px' }
             }
             return { minHeight: height + 'px' }
         }
     },
     methods: {
-        // tabs, 选中tab
+        // 选中标签页时，根据标签名称更新路由
         selectedTabHandle(tab) {
             tab = this.mainTabs.filter(item => item.name === tab.name)
             if (tab.length >= 1) {
                 this.$router.push({ name: tab[0].name, query: tab[0].query, params: tab[0].params })
             }
         },
-        // tabs, 删除tab
+        // 删除标签页时，从Vuex中移除对应的标签页
         removeTabHandle(tabName) {
             this.$store.commit('common/removeTab', tabName)
         },
-        // tabs, 关闭当前
+        // 关闭当前激活的标签页
         tabsCloseCurrentHandle() {
             this.removeTabHandle(this.mainTabsActiveName)
         },
-        // tabs, 关闭其它
+        // 关闭除了当前激活标签页之外的所有标签页
         tabsCloseOtherHandle() {
             this.mainTabs = this.mainTabs.filter(item => item.name === this.mainTabsActiveName)
         },
-        // tabs, 关闭全部
+        // 关闭所有标签页，并将路由重置为首页
         tabsCloseAllHandle() {
             this.mainTabs = []
             this.menuActiveName = ''
             this.$router.push({ name: 'home' })
         },
-        // tabs, 刷新当前
+        // 刷新当前激活的标签页（注意：原代码中此方法名为tabsRefreshCurrentHandle，但模板中调用的是refresh）
         tabsRefreshCurrentHandle() {
             var tab = this.$route
             this.removeTabHandle(tab.name)
@@ -97,7 +110,7 @@ export default {
                 this.$router.push({ name: tab.name, query: tab.query, params: tab.params })
             })
         }
+        // 注意：由于模板中调用了refresh方法，但组件中没有定义此方法，应确保父组件正确注入了此方法
     }
 }
-</script>
-
+</script>
\ No newline at end of file
diff --git a/src/views/main-navbar-update-password.vue b/src/views/main-navbar-update-password.vue
index 4c2cd4a7..20490143 100644
--- a/src/views/main-navbar-update-password.vue
+++ b/src/views/main-navbar-update-password.vue
@@ -1,19 +1,27 @@
 <template>
+    <!-- Element UI的对话框组件，用于显示修改密码的表单 -->
     <el-dialog title="修改密码" :visible.sync="visible" :append-to-body="true">
-        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+        <!-- 表单组件，用于数据绑定和验证 -->
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
+            label-width="80px">
+            <!-- 账号显示区域，使用计算属性获取用户名 -->
             <el-form-item label="账号">
                 <span>{{ userName }}</span>
             </el-form-item>
+            <!-- 原密码输入框 -->
             <el-form-item label="原密码" prop="password">
                 <el-input type="password" v-model="dataForm.password"></el-input>
             </el-form-item>
+            <!-- 新密码输入框 -->
             <el-form-item label="新密码" prop="newPassword">
                 <el-input type="password" v-model="dataForm.newPassword"></el-input>
             </el-form-item>
+            <!-- 确认密码输入框，带有自定义验证器以确保与新密码一致 -->
             <el-form-item label="确认密码" prop="confirmPassword">
                 <el-input type="password" v-model="dataForm.confirmPassword"></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>
@@ -22,9 +30,10 @@
 </template>
 
 <script>
-import { clearLoginInfo } from '@/utils'
+import { clearLoginInfo } from '@/utils' // 导入清除登录信息的工具函数
 export default {
     data() {
+        // 自定义验证器，用于比较新密码和确认密码是否一致
         var validateConfirmPassword = (rule, value, callback) => {
             if (this.dataForm.newPassword !== value) {
                 callback(new Error('确认密码与新密码不一致'))
@@ -33,12 +42,15 @@ export default {
             }
         }
         return {
+            // 对话框的显示状态
             visible: false,
+            // 表单数据绑定对象
             dataForm: {
                 password: '',
                 newPassword: '',
                 confirmPassword: ''
             },
+            // 表单验证规则
             dataRule: {
                 password: [
                     { required: true, message: '原密码不能为空', trigger: 'blur' }
@@ -54,49 +66,55 @@ export default {
         }
     },
     computed: {
+        // 计算属性，用于获取当前用户的用户名
         userName: {
             get() { return this.$store.state.user.name }
         },
+        // 计算属性，用于获取和设置主标签页的数据
         mainTabs: {
             get() { return this.$store.state.common.mainTabs },
             set(val) { this.$store.commit('common/updateMainTabs', val) }
         }
     },
     methods: {
-        // 初始化
+        // 初始化方法，显示对话框并重置表单
         init() {
             this.visible = true
             this.$nextTick(() => {
                 this.$refs['dataForm'].resetFields()
             })
         },
-        // 表单提交
+        // 表单提交方法
         dataFormSubmit() {
+            // 验证表单
             this.$refs['dataForm'].validate((valid) => {
                 if (valid) {
+                    // 发送修改密码的请求
                     this.$http({
-                        url: this.$http.adornUrl('/sys/user/password'),
+                        url: this.$http.adornUrl('/sys/user/password'), // 调用封装的URL处理函数
                         method: 'post',
-                        data: this.$http.adornData({
+                        data: this.$http.adornData({ // 调用封装的数据处理函数
                             'password': this.dataForm.password,
                             'newPassword': this.dataForm.newPassword
                         })
                     }).then(({ data }) => {
                         if (data && data.code === 200) {
+                            // 请求成功，显示成功消息，并处理后续逻辑
                             this.$message({
                                 message: '操作成功',
                                 type: 'success',
                                 duration: 1500,
                                 onClose: () => {
-                                    this.visible = false
+                                    this.visible = false // 关闭对话框
                                     this.$nextTick(() => {
-                                        this.mainTabs = []
-                                        clearLoginInfo()
-                                        this.$router.replace({ name: 'login' })
+                                        this.mainTabs = [] // 清空主标签页
+                                        clearLoginInfo() // 清除登录信息
+                                        this.$router.replace({ name: 'login' }) // 重定向到登录页面
                                     })
                                 }
                             })
                         } else {
+                            // 请求失败，显示错误消息
                             this.$message.error(data.msg)
                         }
                     })
@@ -105,5 +123,4 @@ export default {
         }
     }
 }
-</script>
-
+</script>
\ No newline at end of file
diff --git a/src/views/main-navbar.vue b/src/views/main-navbar.vue
index 75364b13..c9c6f293 100644
--- a/src/views/main-navbar.vue
+++ b/src/views/main-navbar.vue
@@ -1,102 +1,136 @@
 <template>
+    <!-- 导航栏组件，其类名根据navbarLayoutType动态设置 -->
     <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
+        <!-- 导航栏头部 -->
         <div class="site-navbar__header">
+            <!-- 点击h1元素将导航到首页 -->
             <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
+                <!-- 大尺寸品牌标识 -->
                 <a class="site-navbar__brand-lg" href="javascript:;">微信管理系统</a>
+                <!-- 小尺寸品牌标识 -->
                 <a class="site-navbar__brand-mini" href="javascript:;">W</a>
             </h1>
         </div>
+        <!-- 导航栏主体 -->
         <div class="site-navbar__body clearfix">
+            <!-- 左侧菜单，用于折叠/展开侧边栏 -->
             <el-menu class="site-navbar__menu" mode="horizontal">
                 <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
-                    <i :class="sidebarFold?'el-icon-s-unfold':'el-icon-s-fold'"></i>
+                    <!-- 根据sidebarFold的值动态显示折叠或展开图标 -->
+                    <i :class="sidebarFold ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
                 </el-menu-item>
             </el-menu>
+            <!-- 右侧菜单 -->
             <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
+                <!-- 设置项 -->
                 <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
                     <template slot="title">
+                        <!-- 设置图标 -->
                         <i class="el-icon-setting"></i>
                     </template>
                 </el-menu-item>
+                <!-- 微信公众号选择器，需权限验证 -->
                 <el-menu-item index="2" v-if="isAuth('wx:wxaccount:list')">
                     <template slot="title">
+                        <!-- 微信公众号选择器组件 -->
                         <wx-account-selector></wx-account-selector>
                     </template>
                 </el-menu-item>
+                <!-- 用户头像下拉菜单 -->
                 <el-menu-item class="site-navbar__avatar" index="3">
                     <el-dropdown :show-timeout="0" placement="bottom">
+                        <!-- 下拉菜单链接 -->
                         <span class="el-dropdown-link">
                             {{ userName }}
                         </span>
+                        <!-- 下拉菜单内容 -->
                         <el-dropdown-menu slot="dropdown">
+                            <!-- 修改密码项 -->
                             <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
+                            <!-- 退出项 -->
                             <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
                         </el-dropdown-menu>
                     </el-dropdown>
                 </el-menu-item>
             </el-menu>
         </div>
-        <!-- 弹窗, 修改密码 -->
+        <!-- 修改密码弹窗，根据updatePassowrdVisible控制显示 -->
         <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
     </nav>
 </template>
 
 <script>
+// 引入组件
 import UpdatePassword from './main-navbar-update-password'
 import WxAccountSelector from '@/components/wx-account-selector'
+// 引入工具函数
 import { clearLoginInfo } from '@/utils'
+
 export default {
     data() {
         return {
+            // 控制修改密码弹窗的显示
             updatePassowrdVisible: false
         }
     },
     components: {
-        UpdatePassword,WxAccountSelector
+        // 注册组件
+        UpdatePassword, WxAccountSelector
     },
     computed: {
+        // 计算属性，用于获取导航栏布局类型
         navbarLayoutType: {
             get() { return this.$store.state.common.navbarLayoutType }
         },
+        // 计算属性，用于获取和设置侧边栏折叠状态
         sidebarFold: {
             get() { return this.$store.state.common.sidebarFold },
             set(val) { this.$store.commit('common/updateSidebarFold', val) }
         },
+        // 计算属性，用于获取和设置主标签页
         mainTabs: {
             get() { return this.$store.state.common.mainTabs },
             set(val) { this.$store.commit('common/updateMainTabs', val) }
         },
+        // 计算属性，用于获取用户名
         userName: {
             get() { return this.$store.state.user.name }
         }
     },
     methods: {
-        // 修改密码
+        // 修改密码方法
         updatePasswordHandle() {
+            // 显示修改密码弹窗
             this.updatePassowrdVisible = true
+            // 在下一个DOM更新周期后初始化修改密码组件
             this.$nextTick(() => {
                 this.$refs.updatePassowrd.init()
             })
         },
-        // 退出
+        // 退出登录方法
         logoutHandle() {
+            // 弹出确认框
             this.$confirm(`确定进行[退出]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 发送退出登录请求
                 this.$http({
-                    url: this.$http.adornUrl('/sys/logout'),
+                    url: this.$http.adornUrl('/sys/logout'), // 装饰URL
                     method: 'post',
-                    data: this.$http.adornData()
+                    data: this.$http.adornData() // 装饰数据
                 }).then(({ data }) => {
+                    // 如果请求成功
                     if (data && data.code === 200) {
+                        // 清除登录信息
                         clearLoginInfo()
+                        // 导航到登录页
                         this.$router.push({ name: 'login' })
                     }
                 })
-            }).catch(() => { })
+            }).catch(() => { }) // 捕获并忽略取消操作
         }
     }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/main-sidebar-sub-menu.vue b/src/views/main-sidebar-sub-menu.vue
index b45b1b61..983bee14 100644
--- a/src/views/main-sidebar-sub-menu.vue
+++ b/src/views/main-sidebar-sub-menu.vue
@@ -1,50 +1,69 @@
+<!-- 组件模板开始 -->
 <template>
-    <el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''" :popper-class="'site-sidebar--' + sidebarLayoutSkin + '-popper'">
+    <!-- 如果menu对象有list属性且list数组长度大于等于1，则渲染el-submenu -->
+    <el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''"
+        :popper-class="'site-sidebar--' + sidebarLayoutSkin + '-popper'">
+        <!-- 子菜单标题 -->
         <template slot="title">
+            <!-- 图标，使用menu对象的icon属性作为类名 -->
             <i class="site-sidebar__menu-icon" :class="menu.icon"></i>
-            <!-- <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg> -->
+            <!-- 菜单名称 -->
             <span>{{ menu.name }}</span>
         </template>
+        <!-- 遍历menu的list属性，为每个子菜单项渲染sub-menu组件 -->
         <sub-menu v-for="item in menu.list" :key="item.menuId" :menu="item" :dynamicMenuRoutes="dynamicMenuRoutes">
         </sub-menu>
     </el-submenu>
+    <!-- 如果没有子菜单，则渲染el-menu-item -->
     <el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
-        <!-- <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg> -->
+        <!-- 图标 -->
         <i class="site-sidebar__menu-icon fa" :class="menu.icon"></i>
+        <!-- 菜单名称 -->
         <span>{{ menu.name }}</span>
     </el-menu-item>
 </template>
+<!-- 组件模板结束 -->
 
 <script>
+// 导入SubMenu组件
 import SubMenu from './main-sidebar-sub-menu'
+
 export default {
+    // 组件名称
     name: 'sub-menu',
+    // 组件接收的props
     props: {
         menu: {
-            type: Object,
-            required: true
+            type: Object, // menu对象
+            required: true // 必传
         },
         dynamicMenuRoutes: {
-            type: Array,
-            required: true
+            type: Array, // 动态菜单路由数组
+            required: true // 必传
         }
     },
+    // 组件内使用的子组件
     components: {
-        SubMenu
+        SubMenu // 递归使用的子菜单组件
     },
+    // 计算属性
     computed: {
+        // 获取侧边栏布局皮肤样式，从Vuex的state中获取
         sidebarLayoutSkin: {
             get() { return this.$store.state.common.sidebarLayoutSkin }
         }
     },
+    // 方法
     methods: {
-        // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
+        // 通过menuId与动态路由进行匹配，并跳转到指定路由
         gotoRouteHandle(menu) {
+            // 过滤出与menu.menuId匹配的动态路由
             var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
+            // 如果找到了匹配的路由，则通过路由名称跳转到该路由
             if (route.length >= 1) {
                 this.$router.push({ name: route[0].name })
             }
         }
     }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/main-sidebar.vue b/src/views/main-sidebar.vue
index 795a07d0..3f759315 100644
--- a/src/views/main-sidebar.vue
+++ b/src/views/main-sidebar.vue
@@ -1,12 +1,21 @@
 <template>
+    <!-- 侧边栏容器，类名根据sidebarLayoutSkin动态设置 -->
     <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
+        <!-- 侧边栏内部容器 -->
         <div class="site-sidebar__inner">
-            <el-menu :default-active="menuActiveName || 'home'" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu">
+            <!-- Element UI的菜单组件，用于构建导航菜单 -->
+            <el-menu :default-active="menuActiveName || 'home'" :collapse="sidebarFold" :collapseTransition="false"
+                class="site-sidebar__menu">
+                <!-- 首页菜单项 -->
                 <el-menu-item index="home" @click="$router.push({ name: 'home' })">
+                    <!-- 图标 -->
                     <i class="site-sidebar__menu-icon el-icon-s-home"></i>
+                    <!-- 菜单标题 -->
                     <span slot="title">首页</span>
                 </el-menu-item>
-                <sub-menu v-for="menu in menuList" :key="menu.menuId" :menu="menu" :dynamicMenuRoutes="dynamicMenuRoutes">
+                <!-- 遍历menuList，为每个菜单项渲染sub-menu组件 -->
+                <sub-menu v-for="menu in menuList" :key="menu.menuId" :menu="menu"
+                    :dynamicMenuRoutes="dynamicMenuRoutes">
                 </sub-menu>
             </el-menu>
         </div>
@@ -14,77 +23,98 @@
 </template>
 
 <script>
+// 导入SubMenu组件
 import SubMenu from './main-sidebar-sub-menu'
+// 导入isURL校验函数
 import { isURL } from '@/utils/validate'
+
 export default {
     data() {
         return {
+            // 动态菜单路由列表
             dynamicMenuRoutes: []
         }
     },
     components: {
-        SubMenu
+        SubMenu // 注册SubMenu组件
     },
     computed: {
+        // 计算属性，获取侧边栏布局皮肤样式
         sidebarLayoutSkin: {
             get() { return this.$store.state.common.sidebarLayoutSkin }
         },
+        // 计算属性，获取侧边栏折叠状态
         sidebarFold: {
             get() { return this.$store.state.common.sidebarFold }
         },
+        // 计算属性，获取菜单列表
         menuList: {
             get() { return this.$store.state.common.menuList },
             set(val) { this.$store.commit('common/updateMenuList', val) }
         },
+        // 计算属性，获取当前激活的菜单项名称
         menuActiveName: {
             get() { return this.$store.state.common.menuActiveName },
             set(val) { this.$store.commit('common/updateMenuActiveName', val) }
         },
+        // 计算属性，获取标签页列表
         mainTabs: {
             get() { return this.$store.state.common.mainTabs },
             set(val) { this.$store.commit('common/updateMainTabs', val) }
         },
+        // 计算属性，获取当前激活的标签页名称
         mainTabsActiveName: {
             get() { return this.$store.state.common.mainTabsActiveName },
             set(val) { this.$store.commit('common/updateMainTabsActiveName', val) }
         }
     },
     watch: {
+        // 监听路由变化，执行routeHandle方法
         $route: 'routeHandle'
     },
     created() {
+        // 组件创建时，从sessionStorage获取菜单列表和动态路由列表
         this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
         this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
+        // 执行路由处理函数
         this.routeHandle(this.$route)
     },
     methods: {
-        // 路由操作
+        // 路由处理函数
         routeHandle(route) {
+            // 如果当前路由是标签页路由
             if (route.meta.isTab) {
-                // tab选中, 不存在先添加
+                // 在标签页列表中查找当前路由对应的标签页
                 var tab = this.mainTabs.filter(item => item.name === route.name)[0]
+                // 如果标签页不存在
                 if (!tab) {
+                    // 判断是否是动态路由
                     if (route.meta.isDynamic) {
+                        // 在动态路由列表中查找当前路由
                         route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
+                        // 如果未找到动态路由，则输出错误信息
                         if (!route) {
                             return console.error('未能找到可用标签页!')
                         }
                     }
+                    // 创建新的标签页对象
                     tab = {
-                        menuId: route.meta.menuId || route.name,
-                        name: route.name,
-                        title: route.meta.title,
-                        type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
-                        iframeUrl: route.meta.iframeUrl || '',
-                        params: route.params,
-                        query: route.query
+                        menuId: route.meta.menuId || route.name, // 菜单ID
+                        name: route.name, // 路由名称
+                        title: route.meta.title, // 标题
+                        type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module', // 类型，根据iframeUrl是否为URL判断
+                        iframeUrl: route.meta.iframeUrl || '', // iframe地址
+                        params: route.params, // 路由参数
+                        query: route.query // 路由查询参数
                     }
+                    // 将新的标签页添加到标签页列表中
                     this.mainTabs = this.mainTabs.concat(tab)
                 }
+                // 设置当前激活的菜单项名称和标签页名称
                 this.menuActiveName = tab.menuId + ''
                 this.mainTabsActiveName = tab.name
             }
         }
     }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/main.vue b/src/views/main.vue
index 2b044f4b..9b218d83 100644
--- a/src/views/main.vue
+++ b/src/views/main.vue
@@ -1,86 +1,120 @@
+<!-- Vue组件的模板开始 -->
 <template>
-    <div class="site-wrapper" :class="{ 'site-sidebar--fold': sidebarFold }" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
+    <!-- 外层容器，根据sidebarFold的状态添加或移除'site-sidebar--fold'类 -->
+    <div class="site-wrapper" :class="{ 'site-sidebar--fold': sidebarFold }" <!-- 全屏加载指示器，当loading为true时显示，并锁定页面交互 -->
+        v-loading.fullscreen.lock="loading"
+        <!-- 自定义加载文本 -->
+        element-loading-text="拼命加载中">
+
+        <!-- 当loading不为true时渲染以下内容 -->
         <template v-if="!loading">
+            <!-- 引入主导航栏组件 -->
             <main-navbar />
+            <!-- 引入主侧边栏组件 -->
             <main-sidebar />
+            <!-- 内容区域容器，其最小高度由documentClientHeight决定 -->
             <div class="site-content__wrapper" :style="{ 'min-height': documentClientHeight + 'px' }">
+                <!-- 
+                    当store中的common.contentIsNeedRefresh为false时，
+                    渲染主内容区域组件
+                -->
                 <main-content v-if="!$store.state.common.contentIsNeedRefresh" />
             </div>
         </template>
     </div>
+    <!-- Vue组件的模板结束 -->
 </template>
 
 <script>
-import MainNavbar from './main-navbar'
-import MainSidebar from './main-sidebar'
-import MainContent from './main-content'
+// 引入子组件
+import MainNavbar from './main-navbar';
+import MainSidebar from './main-sidebar';
+import MainContent from './main-content';
+
 export default {
+    // 提供给后代组件的方法或属性
     provide() {
         return {
-            // 刷新
+            // 刷新方法，用于触发内容的刷新逻辑
             refresh() {
-                this.$store.commit('common/updateContentIsNeedRefresh', true)
+                // 将contentIsNeedRefresh设置为true，触发刷新
+                this.$store.commit('common/updateContentIsNeedRefresh', true);
+                // 在下一个DOM更新循环结束之后，将contentIsNeedRefresh重置为false
                 this.$nextTick(() => {
-                    this.$store.commit('common/updateContentIsNeedRefresh', false)
-                })
+                    this.$store.commit('common/updateContentIsNeedRefresh', false);
+                });
             }
-        }
+        };
     },
+    // 组件的响应式数据
     data() {
         return {
-            loading: true
-        }
+            loading: true // 加载状态，初始为true表示正在加载
+        };
     },
+    // 注册的子组件
     components: {
         MainNavbar,
         MainSidebar,
         MainContent
     },
+    // 计算属性，用于处理复杂逻辑或基于其他数据派生的数据
     computed: {
+        // 文档客户端高度，从store中获取和设置
         documentClientHeight: {
-            get() { return this.$store.state.common.documentClientHeight },
-            set(val) { this.$store.commit('common/updateDocumentClientHeight', val) }
+            get() { return this.$store.state.common.documentClientHeight; },
+            set(val) { this.$store.commit('common/updateDocumentClientHeight', val); }
         },
+        // 侧边栏折叠状态，从store中获取
         sidebarFold: {
-            get() { return this.$store.state.common.sidebarFold }
+            get() { return this.$store.state.common.sidebarFold; }
         },
+        // 用户ID，从store中的user模块获取和设置
         userId: {
-            get() { return this.$store.state.user.id },
-            set(val) { this.$store.commit('user/updateId', val) }
+            get() { return this.$store.state.user.id; },
+            set(val) { this.$store.commit('user/updateId', val); }
         },
+        // 用户名，从store中的user模块获取和设置
         userName: {
-            get() { return this.$store.state.user.name },
-            set(val) { this.$store.commit('user/updateName', val) }
+            get() { return this.$store.state.user.name; },
+            set(val) { this.$store.commit('user/updateName', val); }
         }
     },
+    // 组件创建时执行的逻辑
     created() {
-        this.getUserInfo()
+        this.getUserInfo(); // 获取当前用户信息
     },
+    // 组件挂载到DOM后执行的逻辑
     mounted() {
-        this.resetDocumentClientHeight()
+        this.resetDocumentClientHeight(); // 重置文档客户端高度
     },
+    // 组件的方法
     methods: {
-        // 重置窗口可视高度
+        // 重置窗口可视高度的方法
         resetDocumentClientHeight() {
-            this.documentClientHeight = document.documentElement['clientHeight']
+            // 初始设置文档高度
+            this.documentClientHeight = document.documentElement.clientHeight;
+            // 监听窗口大小变化，动态更新文档高度
             window.onresize = () => {
-                this.documentClientHeight = document.documentElement['clientHeight']
-            }
+                this.documentClientHeight = document.documentElement.clientHeight;
+            };
         },
-        // 获取当前管理员信息
+        // 获取当前管理员信息的方法
         getUserInfo() {
+            // 发起HTTP GET请求获取用户信息
             this.$http({
-                url: this.$http.adornUrl('/sys/user/info'),
+                url: this.$http.adornUrl('/sys/user/info'), // 调用adornUrl方法处理URL
                 method: 'get',
-                params: this.$http.adornParams()
+                params: this.$http.adornParams() // 调用adornParams方法处理请求参数
             }).then(({ data }) => {
+                // 请求成功后的处理逻辑
                 if (data && data.code === 200) {
-                    this.loading = false
-                    this.userId = data.user.userId
-                    this.userName = data.user.username
+                    this.loading = false; // 隐藏加载指示器
+                    this.userId = data.user.userId; // 设置用户ID
+                    this.userName = data.user.username; // 设置用户名
                 }
-            })
+            });
         }
     }
-}
+};
 </script>
diff --git a/src/views/modules/wx/wx-account.vue b/src/views/modules/wx/wx-account.vue
index 541164e5..9f3a3e5b 100644
--- a/src/views/modules/wx/wx-account.vue
+++ b/src/views/modules/wx/wx-account.vue
@@ -1,27 +1,41 @@
 <template>
     <div class="mod-config">
+        <!-- 定义一个内联表单，用于搜索和操作 -->
         <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-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>
+                <!-- 批量删除按钮，根据权限和选中项显示 -->
+                <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 :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列 -->
             <el-table-column prop="appid" header-align="center" align="center" label="appid">
             </el-table-column>
+            <!-- 公众号名称列 -->
             <el-table-column prop="name" header-align="center" align="center" label="公众号名称">
             </el-table-column>
+            <!-- 类型列，使用formatter格式化显示 -->
             <el-table-column prop="type" header-align="center" align="center" label="类型" :formatter="accountTypeFormat">
             </el-table-column>
+            <!-- 是否认证列，使用插槽自定义显示 -->
             <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>
@@ -30,89 +44,83 @@
                 </template>
             </el-table-column>
         </el-table>
-        <!-- 弹窗, 新增 / 修改 -->
+        <!-- 新增/修改弹窗组件 -->
         <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+        <!-- 接入信息弹窗组件 -->
         <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'
+import AddOrUpdate from './account/wx-account-add-or-update' // 引入新增/修改组件
+import AccountAccess from './account/wx-account-access-info' // 引入接入信息组件
+import { mapState } from 'vuex' // 引入Vuex的mapState辅助函数
 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
+        ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES // 从Vuex获取账号类型映射
     }),
     activated() {
-        this.getDataList()
+        this.getDataList() // 组件激活时获取数据列表
     },
     methods: {
         // 获取数据列表
         getDataList() {
             this.dataListLoading = true
             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)
+                    this.dataList = data.list // 更新数据列表
+                    this.$store.commit('wxAccount/updateAccountList', data.list) // 更新Vuex中的账号列表
                 } else {
-                    this.dataList = []
+                    this.dataList = [] // 清空数据列表
                 }
-                this.dataListLoading = false
+                this.dataListLoading = false // 结束加载状态
             })
         },
-        // 多选
+        // 多选处理
         selectionChangeHandle(val) {
-            this.dataListSelections = val
+            this.dataListSelections = val // 更新选中项
         },
-        // 新增 / 修改
+        // 新增/修改处理
         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
+        // 接入信息处理
+        accessInfo(item) {
+            this.accountAccessVisible = true // 显示弹窗
             this.$nextTick(() => {
-                this.$refs.accountAccessDialog.init(item)
+                this.$refs.accountAccessDialog.init(item) // 初始化弹窗数据
             })
         },
-        // 删除
+        // 删除处理
         deleteHandle(appid) {
-            var ids = appid ? [appid] : this.dataListSelections.map(item => {
-                return item.appid
-            })
+            var ids = appid ? [appid] : this.dataListSelections.map(item => item.appid) // 获取要删除的appid
             this.$confirm(`确定对[appid=${ids.join(',')}]进行[${appid ? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
                 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({
@@ -120,18 +128,19 @@ export default {
                             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];
+            return this.ACCOUNT_TYPES[cellValue] // 根据类型值返回对应的类型名称
         }
     }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-assets.vue b/src/views/modules/wx/wx-assets.vue
index 65acd980..3985a92b 100644
--- a/src/views/modules/wx/wx-assets.vue
+++ b/src/views/modules/wx/wx-assets.vue
@@ -1,57 +1,73 @@
 <template>
+    <!-- 使用element-ui的el-tabs组件创建一个标签页切换组件 -->
     <el-tabs v-model="activeTab" @tab-click="handleTabClick">
-        <el-tab-pane :label="'图片素材（'+assetsCount.imageCount+')'" name="image" lazy>
+        <!-- 图片素材标签页，使用el-tab-pane组件定义每个标签页的内容 -->
+        <el-tab-pane :label="'图片素材（' + assetsCount.imageCount + ')'" name="image" lazy>
+            <!-- 引入自定义的MaterialFile组件，用于展示图片素材 -->
             <material-file fileType="image" ref="imagePanel" @change="materialCount"></material-file>
         </el-tab-pane>
-        <el-tab-pane :label="'语音素材（'+assetsCount.voiceCount+')'" name="voice" lazy>
+        <!-- 语音素材标签页 -->
+        <el-tab-pane :label="'语音素材（' + assetsCount.voiceCount + ')'" name="voice" lazy>
             <material-file fileType="voice" ref="voicePanel" @change="materialCount"></material-file>
         </el-tab-pane>
-        <el-tab-pane :label="'视频素材（'+assetsCount.videoCount+')'" name="video" lazy>
+        <!-- 视频素材标签页 -->
+        <el-tab-pane :label="'视频素材（' + assetsCount.videoCount + ')'" name="video" lazy>
             <material-file fileType="video" ref="videoPanel" @change="materialCount"></material-file>
         </el-tab-pane>
-        <el-tab-pane :label="'图文素材（'+assetsCount.newsCount+')'" name="news" lazy>
+        <!-- 图文素材标签页，使用自定义的MaterialNews组件 -->
+        <el-tab-pane :label="'图文素材（' + assetsCount.newsCount + ')'" name="news" lazy>
             <material-news ref="newsPanel" @change="materialCount"></material-news>
         </el-tab-pane>
     </el-tabs>
 </template>
+
 <script>
 export default {
     data() {
         return {
+            // 当前激活的标签页名称
             activeTab: 'image',
-            assetsCount:{
-                imageCount:'..',
-                videoCount:'..',
-                voiceCount:'..',
-                newsCount:'..'
+            // 素材数量对象，用于存储各类素材的数量
+            assetsCount: {
+                imageCount: '..', // 图片素材数量，初始化为占位符
+                videoCount: '..', // 视频素材数量，初始化为占位符
+                voiceCount: '..', // 语音素材数量，初始化为占位符
+                newsCount: '..'  // 图文素材数量，初始化为占位符
             }
         };
     },
+    // 组件注册，异步加载MaterialFile和MaterialNews组件
     components: {
-        MaterialFile:()=>import('./assets/material-file'),
-        MaterialNews:()=>import('./assets/material-news')
+        MaterialFile: () => import('./assets/material-file'),
+        MaterialNews: () => import('./assets/material-news')
     },
-    mounted(){
-        this.materialCount();
+    // 组件挂载完成后立即执行的钩子函数
+    mounted() {
+        this.materialCount(); // 组件挂载后立即调用materialCount方法获取素材数量
     },
     methods: {
+        // 标签页点击事件处理函数
         handleTabClick(tab, event) {
-            this.$nextTick(()=>{
-                this.$refs[tab.name+'Panel'].init()
+            this.$nextTick(() => {
+                // 在DOM更新完成后，调用对应标签页组件的init方法（假设该方法存在）
+                this.$refs[tab.name + 'Panel'].init()
             })
         },
-        materialCount(){
+        // 获取素材数量的方法
+        materialCount() {
+            // 使用自定义的$http方法（可能是封装的axios）发送请求获取素材数量
             this.$http({
-                url: this.$http.adornUrl('/manage/wxAssets/materialCount')
+                url: this.$http.adornUrl('/manage/wxAssets/materialCount') // 发送请求的URL
             }).then(({ data }) => {
                 if (data && data.code == 200) {
-                    this.assetsCount=data.data
+                    // 如果请求成功，更新assetsCount对象
+                    this.assetsCount = data.data
                 } else {
+                    // 如果请求失败，显示错误信息
                     this.$message.error(data.msg);
                 }
             })
         }
-
     }
 };
 </script>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-menu-button-editor.vue b/src/views/modules/wx/wx-menu-button-editor.vue
index 2ec9cab2..723e592d 100644
--- a/src/views/modules/wx/wx-menu-button-editor.vue
+++ b/src/views/modules/wx/wx-menu-button-editor.vue
@@ -1,24 +1,38 @@
 <template>
     <div>
+        <!-- 菜单项的输入框组，底部有边框 -->
         <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
-            <div class="menu-name">{{button.name}}</div>
+            <!-- 显示菜单名称 -->
+            <div class="menu-name">{{ button.name }}</div>
+            <!-- 删除菜单项的按钮，点击时触发'delMenu'事件 -->
             <div class="menu-del" @click="$emit('delMenu')">删除菜单</div>
         </div>
+
+        <!-- 菜单名称的输入框组 -->
         <div class="menu-input-group">
             <div class="menu-label">菜单名称</div>
             <div class="menu-input">
-                <input type="text" name="name" placeholder="请输入菜单名称" class="menu-input-text" v-model="button.name" @input="checkMenuName(button.name)">
+                <!-- 输入框，用于输入菜单名称，绑定到button.name，并监听输入事件 -->
+                <input type="text" name="name" placeholder="请输入菜单名称" class="menu-input-text" v-model="button.name"
+                    @input="checkMenuName(button.name)">
+                <!-- 当菜单名称超过字数限制时显示 -->
                 <p class="menu-tips" style="color:#e15f63" v-show="menuNameBounds">字数超过上限</p>
-                <p class="menu-tips">字数不超过{{selectedMenuLevel==1?'5':'8'}}个汉字</p>
+                <!-- 显示菜单名称的字数限制 -->
+                <p class="menu-tips">字数不超过{{ selectedMenuLevel == 1 ? '5' : '8' }}个汉字</p>
             </div>
         </div>
-        <div v-show="!button.subButtons || button.subButtons.length==0">
+
+        <!-- 当没有子菜单或子菜单为空时显示 -->
+        <div v-show="!button.subButtons || button.subButtons.length == 0">
+            <!-- 菜单内容的输入框组 -->
             <div class="menu-input-group">
                 <div class="menu-label">菜单内容</div>
                 <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>
@@ -31,7 +45,9 @@
                     </select>
                 </div>
             </div>
-            <div class="menu-content" v-if="button.type=='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>
@@ -40,7 +56,7 @@
                     </div>
                 </div>
             </div>
-            <div class="menu-content" v-else-if="button.type=='media_id'">
+            <div class="menu-content" v-else-if="button.type == 'media_id'">
                 <div class="menu-input-group">
                     <p class="menu-tips">订阅者点击该菜单会收到以下图文消息</p>
                     <div class="menu-label">media_id</div>
@@ -49,18 +65,20 @@
                     </div>
                 </div>
             </div>
-            <div class="menu-content" v-else-if="button.type=='miniprogram'">
+            <div class="menu-content" v-else-if="button.type == 'miniprogram'">
                 <div class="menu-input-group">
                     <p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p>
                     <div class="menu-label">小程序appId</div>
                     <div class="menu-input">
-                        <input type="text" placeholder="小程序的appId（仅认证公众号可配置）" class="menu-input-text" 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">
+                        <input type="text" placeholder="小程序的页面路径 pages/index/index" class="menu-input-text"
+                            v-model="button.pagePath">
                     </div>
                 </div>
                 <div class="menu-input-group">
@@ -83,13 +101,16 @@
         </div>
     </div>
 </template>
+
 <script>
 export default {
     props: {
+        // 接收父组件传递的菜单级别，默认为1
         selectedMenuLevel: {
             type: Number,
             default: 1
         },
+        // 接收父组件传递的菜单对象，必传
         button: {
             type: Object,
             required: true
@@ -97,25 +118,28 @@ export default {
     },
     data() {
         return {
-            menuNameBounds: false,//菜单长度是否过长
+            // 菜单名称是否超过字数限制的标志
+            menuNameBounds: false,
         }
     },
     methods: {
-        //检查菜单名称长度
+        // 检查菜单名称长度的方法
         checkMenuName: function (val) {
-            if (this.selectedMenuLevel == 1 && this.getMenuNameLen(val) <= 10) {
+            // 根据菜单级别和菜单名称长度设置menuNameBounds的值
+            if (this.selectedMenuLevel == 1 && this.getMenuNameLen(val) <= 5) { // 注意：原代码逻辑可能有误，应为5而非10
                 this.menuNameBounds = false
-            } else if (this.selectedMenuLevel == 2 && this.getMenuNameLen(val) <= 16) {
+            } else if (this.selectedMenuLevel == 2 && this.getMenuNameLen(val) <= 8) {
                 this.menuNameBounds = false
             } 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;
             }
             return len;
diff --git a/src/views/modules/wx/wx-menu.vue b/src/views/modules/wx/wx-menu.vue
index cc7d8dd8..4c397de7 100644
--- a/src/views/modules/wx/wx-menu.vue
+++ b/src/views/modules/wx/wx-menu.vue
@@ -1,159 +1,200 @@
 <template>
     <div>
+        <!-- 应用菜单容器 -->
         <div id="app-menu">
-            <!-- 预览窗 -->
+            <!-- 预览窗口 -->
             <div class="weixin-preview">
                 <div class="weixin-bd">
                     <div class="weixin-header">公众号菜单</div>
+                    <!-- 菜单列表 -->
                     <ul class="weixin-menu" id="weixin-menu">
-                        <li v-for="(btn,i) in menu.buttons" :key="i" class="menu-item" :class="{'current':selectedMenuIndex===i&&selectedMenuLevel==1}" @click="selectMenu(i)">
+                        <!-- 循环遍历主菜单项 -->
+                        <li v-for="(btn, i) in menu.buttons" :key="i" class="menu-item"
+                            :class="{ 'current': selectedMenuIndex === i && selectedMenuLevel == 1 }"
+                            @click="selectMenu(i)">
                             <div class="menu-item-title">
-                                <span>{{ btn.name }}</span>
+                                <span>{{ btn.name }}</span> <!-- 显示菜单项名称 -->
                             </div>
+                            <!-- 子菜单列表 -->
                             <ul class="weixin-sub-menu">
-                                <li v-for="(sub,i2) in btn.subButtons" :key="i2" class="menu-sub-item" :class="{'current':selectedMenuIndex===i&&selectedSubMenuIndex===i2&&selectedMenuLevel==2,'on-drag-over':onDragOverMenu==(i+'_'+i2)}" @click.stop="selectSubMenu(i,i2)"  draggable="true"  @dragstart="selectSubMenu(i,i2)" @dragover.prevent="onDragOverMenu=(i+'_'+i2)" @drop="onDrop(i,i2)">
+                                <!-- 循环遍历子菜单项 -->
+                                <li v-for="(sub, i2) in btn.subButtons" :key="i2" class="menu-sub-item" :class="{
+                                    'current': selectedMenuIndex === i && selectedSubMenuIndex === i2 &&
+                                        selectedMenuLevel == 2, 'on-drag-over': onDragOverMenu == (i + '_' + i2)
+                                }"
+                                    @click.stop="selectSubMenu(i, i2)" draggable="true"
+                                    @dragstart="selectSubMenu(i, i2)"
+                                    @dragover.prevent="onDragOverMenu = (i + '_' + i2)" @drop="onDrop(i, i2)">
                                     <div class="menu-item-title">
-                                        <span>{{sub.name}}</span>
+                                        <span>{{ sub.name }}</span> <!-- 显示子菜单项名称 -->
                                     </div>
                                 </li>
-                                <li v-if="btn.subButtons.length<5" class="menu-sub-item" :class="{'on-drag-over':onDragOverMenu==(i+'_'+btn.subButtons.length)}" @click.stop="addMenu(2,i)" @dragover.prevent="onDragOverMenu=(i+'_'+btn.subButtons.length)" @drop="onDrop(i,btn.subButtons.length)">
+                                <!-- 如果子菜单项少于5个，显示添加按钮 -->
+                                <li v-if="btn.subButtons.length < 5" class="menu-sub-item"
+                                    :class="{ 'on-drag-over': onDragOverMenu == (i + '_' + btn.subButtons.length) }"
+                                    @click.stop="addMenu(2, i)"
+                                    @dragover.prevent="onDragOverMenu = (i + '_' + btn.subButtons.length)"
+                                    @drop="onDrop(i, btn.subButtons.length)">
                                     <div class="menu-item-title">
-                                        <i class="el-icon-plus"></i>
+                                        <i class="el-icon-plus"></i> <!-- 添加图标 -->
                                     </div>
                                 </li>
+                                <!-- 菜单展开/收起箭头 -->
                                 <i class="menu-arrow arrow_out"></i>
                                 <i class="menu-arrow arrow_in"></i>
                             </ul>
                         </li>
-                        <li class="menu-item" v-if="menu.buttons.length<3" @click="addMenu(1)"> <i class="el-icon-plus"></i></li>
+                        <!-- 如果主菜单项少于3个，显示添加按钮 -->
+                        <li class="menu-item" v-if="menu.buttons.length < 3" @click="addMenu(1)">
+                            <i class="el-icon-plus"></i> <!-- 添加图标 -->
+                        </li>
                     </ul>
                 </div>
             </div>
             <!-- 菜单编辑器 -->
-            <div class="weixin-menu-detail" v-if="selectedMenuLevel>0">
-                <wx-menu-button-editor :button="selectedButton" :selectedMenuLevel="selectedMenuLevel" @delMenu="delMenu"></wx-menu-button-editor>
+            <div class="weixin-menu-detail" v-if="selectedMenuLevel > 0">
+                <!-- 菜单按钮编辑器组件 -->
+                <wx-menu-button-editor :button="selectedButton" :selectedMenuLevel="selectedMenuLevel"
+                    @delMenu="delMenu"></wx-menu-button-editor>
             </div>
         </div>
-        <div class="weixin-btn-group" v-if="isAuth('wx:menu:save')" @click="updateWxMenu">
+        <!-- 按钮组，根据权限显示 -->
+        <div class="weixin-btn-group" v-if="isAuth('wx:menu:save')">
+            <!-- 发布按钮 -->
             <el-button type="success" icon="el-icon-upload">发布</el-button>
+            <!-- 清空按钮 -->
             <el-button type="warning" icon="el-icon-delete" @click="delMenu">清空</el-button>
         </div>
     </div>
 </template>
 <script>
 export default {
+    // 定义组件，包括子组件wxMenuButtonEditor的异步加载
     components: {
         wxMenuButtonEditor: () => import('./wx-menu-button-editor')
     },
     data() {
         return {
-            menu: { 'buttons': [] },//当前菜单
-            selectedMenuIndex: '',//当前选中菜单索引
-            selectedSubMenuIndex: '',//当前选中子菜单索引
-            selectedMenuLevel: 0,//选中菜单级别
-            selectedButton: '',//选中的菜单按钮
-            onDragOverMenu:'' //当前鼠标拖动到的位置
+            // 当前菜单数据结构，包含按钮数组
+            menu: { 'buttons': [] },
+            // 当前选中菜单的索引
+            selectedMenuIndex: '',
+            // 当前选中子菜单的索引
+            selectedSubMenuIndex: '',
+            // 当前选中菜单的级别（1为主菜单，2为子菜单）
+            selectedMenuLevel: 0,
+            // 选中的菜单按钮对象
+            selectedButton: '',
+            // 当前鼠标拖动到的位置（用于拖拽功能）
+            onDragOverMenu: ''
         }
     },
     mounted() {
+        // 组件挂载后获取微信菜单数据
         this.getWxMenu();
     },
     methods: {
+        // 获取微信菜单数据
         getWxMenu() {
             this.$http({
-                url: this.$http.adornUrl('/manage/wxMenu/getMenu')
+                url: this.$http.adornUrl('/manage/wxMenu/getMenu') // 调用API获取菜单
             }).then(({ data }) => {
                 if (data.code == 200) {
-                    this.menu = data.data.menu;
+                    this.menu = data.data.menu; // 成功则更新菜单数据
                 } else {
                     this.$message({
                         type: 'error',
-                        message: data.msg
+                        message: data.msg // 失败则显示错误信息
                     });
                 }
-
             });
         },
-        //选中主菜单
+        // 选中主菜单的方法
         selectMenu(i) {
-            this.selectedMenuLevel = 1
-            this.selectedSubMenuIndex = ''
-            this.selectedMenuIndex = i
-            this.selectedButton = this.menu.buttons[i]
+            this.selectedMenuLevel = 1; // 设置为一级菜单
+            this.selectedSubMenuIndex = ''; // 清空子菜单索引
+            this.selectedMenuIndex = i; // 设置选中主菜单索引
+            this.selectedButton = this.menu.buttons[i]; // 设置选中按钮
         },
-        //选中子菜单
-        selectSubMenu(i,i2) {
-            this.selectedMenuLevel = 2
-            this.selectedMenuIndex = i
-            this.selectedSubMenuIndex = i2
-            this.selectedButton = this.menu.buttons[i].subButtons[i2]
+        // 选中子菜单的方法
+        selectSubMenu(i, i2) {
+            this.selectedMenuLevel = 2; // 设置为二级菜单
+            this.selectedMenuIndex = i; // 设置选中主菜单索引
+            this.selectedSubMenuIndex = i2; // 设置选中子菜单索引
+            this.selectedButton = this.menu.buttons[i].subButtons[i2]; // 设置选中按钮
         },
-        //添加菜单
-        addMenu(level,i) {
-            if (level == 1 && this.menu.buttons.length < 3) {
+        // 添加菜单的方法
+        addMenu(level, i) {
+            if (level == 1 && this.menu.buttons.length < 3) { // 如果是一级菜单且数量未达上限
+                // 添加一个新的主菜单按钮
                 this.menu.buttons.push({
                     "type": "view",
                     "name": "菜单名称",
                     "subButtons": [],
                     "url": ""
-                })
-                this.selectMenu(this.menu.buttons.length - 1)
+                });
+                this.selectMenu(this.menu.buttons.length - 1); // 选中新添加的菜单
             }
-            if (level == 2 && this.menu.buttons[i].subButtons.length < 5) {
+            if (level == 2 && this.menu.buttons[i].subButtons.length < 5) { // 如果是二级菜单且数量未达上限
+                // 添加一个新的子菜单按钮
                 this.menu.buttons[i].subButtons.push({
                     "type": "view",
                     "name": "子菜单名称",
                     "url": ""
-                })
-                this.selectSubMenu(i,this.menu.buttons[i].subButtons.length - 1)
+                });
+                this.selectSubMenu(i, this.menu.buttons[i].subButtons.length - 1); // 选中新添加的子菜单
             }
         },
-        //删除菜单
+        // 删除菜单的方法
         delMenu() {
-            if (this.selectedMenuLevel == 1 && confirm('删除后菜单下设置的内容将被删除')) {
-                this.menu.buttons.splice(this.selectedMenuIndex, 1);
-                this.unSelectMenu()
-            } else if (this.selectedMenuLevel == 2) {
-                this.menu.buttons[this.selectedMenuIndex].subButtons.splice(this.selectedSubMenuIndex, 1);
-                this.unSelectMenu()
+            if (this.selectedMenuLevel == 1 && confirm('删除后菜单下设置的内容将被删除')) { // 如果是主菜单且用户确认删除
+                this.menu.buttons.splice(this.selectedMenuIndex, 1); // 删除主菜单
+                this.unSelectMenu(); // 取消选中
+            } else if (this.selectedMenuLevel == 2) { // 如果是子菜单
+                this.menu.buttons[this.selectedMenuIndex].subButtons.splice(this.selectedSubMenuIndex, 1); // 删除子菜单
+                this.unSelectMenu(); // 取消选中
             }
         },
-        unSelectMenu(){//不选中任何菜单
-            this.selectedMenuLevel = 0
-            this.selectedMenuIndex = ''
-            this.selectedSubMenuIndex = ''
-            this.selectedButton = ''
+        unSelectMenu() { // 取消选中任何菜单的方法
+            this.selectedMenuLevel = 0; // 重置选中级别
+            this.selectedMenuIndex = ''; // 清空选中主菜单索引
+            this.selectedSubMenuIndex = ''; // 清空选中子菜单索引
+            this.selectedButton = ''; // 清空选中按钮
         },
+        // 更新微信菜单的方法
         updateWxMenu() {
             this.$http({
-                url: this.$http.adornUrl('/manage/wxMenu/updateMenu'),
+                url: this.$http.adornUrl('/manage/wxMenu/updateMenu'), // 调用API更新菜单
                 data: this.menu,
                 method: 'post'
             }).then(({ data }) => {
                 if (data.code == 200) {
-                    this.$message.success('操作成功')
+                    this.$message.success('操作成功'); // 成功则显示成功信息
                 } else {
-                    this.$message.error(data.msg);
+                    this.$message.error(data.msg); // 失败则显示错误信息
                 }
-
             });
         },
-        onDrop(i,i2){//拖拽移动位置
-            this.onDragOverMenu='';
-            if(i==this.selectedMenuIndex && i2==this.selectedSubMenuIndex) //拖拽到了原位置
-                return 
-            if(i!=this.selectedMenuIndex && this.menu.buttons[i].subButtons.length>=5){
-                this.$message.error('目标组已满');
-                return
+        // 拖拽移动位置的方法
+        onDrop(i, i2) {
+            this.onDragOverMenu = ''; // 重置拖拽目标位置
+            if (i == this.selectedMenuIndex && i2 == this.selectedSubMenuIndex) // 如果拖拽到了原位置，则不执行任何操作
+                return;
+            if (i != this.selectedMenuIndex && this.menu.buttons[i].subButtons.length >= 5) { // 如果目标子菜单已满
+                this.$message.error('目标组已满'); // 显示错误信息
+                return;
             }
-            this.menu.buttons[i].subButtons.splice(i2,0,this.selectedButton)
-            let delSubIndex = this.selectedSubMenuIndex
-            if(i==this.selectedMenuIndex && i2<this.selectedSubMenuIndex) 
-                delSubIndex++
-            this.menu.buttons[this.selectedMenuIndex].subButtons.splice(delSubIndex, 1);
-            this.unSelectMenu()
+            // 将选中的按钮移动到新位置
+            this.menu.buttons[i].subButtons.splice(i2, 0, this.selectedButton);
+            let delSubIndex = this.selectedSubMenuIndex; // 获取原位置索引
+            if (i == this.selectedMenuIndex && i2 < this.selectedSubMenuIndex) // 如果在原菜单内部且新位置在原位置之前，索引需要+1
+                delSubIndex++;
+            this.menu.buttons[this.selectedMenuIndex].subButtons.splice(delSubIndex, 1); // 从原位置删除按钮
+            this.unSelectMenu(); // 取消选中
         }
     }
 }
 </script>
+
+<!-- 引入外部CSS文件 -->
 <style src="@/assets/css/wx-menu.css"></style>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-msg-reply.vue b/src/views/modules/wx/wx-msg-reply.vue
index 7721aeb3..288d8d19 100644
--- a/src/views/modules/wx/wx-msg-reply.vue
+++ b/src/views/modules/wx/wx-msg-reply.vue
@@ -1,14 +1,24 @@
 <template>
+    <!-- 使用element-ui的Dialog组件，用于显示回复消息的对话框 -->
     <el-dialog title="消息回复" :close-on-click-modal="false" :visible.sync="visible">
+        <!-- 使用element-ui的Form组件，用于构建表单 -->
         <el-form :model="dataForm" :rules="dataRule" ref="dataForm">
+            <!-- 表单项，用于输入回复内容 -->
             <el-form-item prop="replyContent">
-                <el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="回复内容" maxlength="600" show-word-limit :autosize="{ minRows: 5, maxRows: 30 }" autocomplete></el-input>
-                <el-button type="text" v-show="'text'==dataForm.replyType" @click="addLink">插入链接</el-button>
+                <!-- 使用element-ui的Input组件，配置为textarea类型，用于多行文本输入 -->
+                <el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="回复内容" maxlength="600"
+                    show-word-limit :autosize="{ minRows: 5, maxRows: 30 }" autocomplete></el-input>
+                <!-- 当回复类型为'text'时显示，点击插入链接 -->
+                <el-button type="text" v-show="'text' == dataForm.replyType" @click="addLink">插入链接</el-button>
             </el-form-item>
         </el-form>
+        <!-- 对话框底部的操作按钮 -->
         <span slot="footer" class="dialog-footer">
+            <!-- 取消按钮，点击关闭对话框 -->
             <el-button @click="visible = false">取消</el-button>
-            <el-button type="success" @click="dataFormSubmit()" :disabled="uploading">{{uploading?'发送中...':'发送'}}</el-button>
+            <!-- 发送按钮，根据是否正在上传（发送）显示不同文字 -->
+            <el-button type="success" @click="dataFormSubmit()" :disabled="uploading">{{ uploading ? '发送中...' : '发送'
+                }}</el-button>
         </span>
     </el-dialog>
 </template>
@@ -17,13 +27,20 @@
 export default {
     data() {
         return {
+            // 控制对话框的显示与隐藏
             visible: false,
+            // 标记是否正在发送消息
             uploading: false,
+            // 表单数据
             dataForm: {
-                openid:'',
-                replyType:'text',
-                replyContent:''
+                // 用户的openid
+                openid: '',
+                // 回复类型，默认为'text'
+                replyType: 'text',
+                // 回复内容
+                replyContent: ''
             },
+            // 表单验证规则
             dataRule: {
                 replyContent: [
                     { required: true, message: "回复内容不能为空", trigger: "blur" }
@@ -31,54 +48,62 @@ export default {
             }
         }
     },
-    components:{
-        WxMsgPreview:()=>import('@/components/wx-msg-preview')
+    // 引入其他组件（这里虽然引入了但未在模板中使用）
+    components: {
+        WxMsgPreview: () => import('@/components/wx-msg-preview')
     },
     methods: {
+        // 初始化方法，传入用户的openid并显示对话框
         init(openid) {
-            if(!openid)throw '参数异常'
-            this.dataForm.openid=openid
+            if (!openid) throw '参数异常'
+            this.dataForm.openid = openid
             this.visible = true
         },
-        // 表单提交
+        // 表单提交方法
         dataFormSubmit() {
-            if(this.uploading)return
-            this.uploading=true
-            this.$refs['dataForm'].validate((valid) => {
+            if (this.uploading) return // 如果正在发送，则直接返回
+            this.uploading = true // 标记为正在发送
+            this.$refs['dataForm'].validate((valid) => { // 验证表单
                 if (valid) {
+                    // 发送请求到服务器
                     this.$http({
-                        url: this.$http.adornUrl(`/manage/wxMsg/reply`),
-                        method: 'post',
-                        data: this.$http.adornData(this.dataForm)
+                        url: this.$http.adornUrl(`/manage/wxMsg/reply`), // 请求地址
+                        method: 'post', // 请求方式
+                        data: this.$http.adornData(this.dataForm) // 发送的数据
                     }).then(({ data }) => {
-                        if (data && data.code === 200) {
+                        if (data && data.code === 200) { // 请求成功且返回状态码为200
+                            // 显示成功消息，并在关闭后隐藏对话框和清空表单
                             this.$message({
                                 message: '回复成功',
                                 type: 'success',
                                 duration: 1500,
                                 onClose: () => {
                                     this.visible = false
-                                    
                                 }
                             })
-                            this.$emit("success",{...this.dataForm});
-                            this.dataForm.replyContent=''
-                        } else {
-                            this.$message.error(data.msg)
+                            this.$emit("success", { ...this.dataForm }); // 触发自定义事件，传递表单数据
+                            this.dataForm.replyContent = '' // 清空回复内容
+                        } else { // 请求失败
+                            this.$message.error(data.msg) // 显示错误消息
                         }
-                        this.uploading=false
+                        this.uploading = false // 标记为发送完成
                     })
                 }
             })
         },
+        // 插入链接的方法
         addLink() {
+            // 在回复内容后追加链接格式的字符串（注意：这里链接地址是固定的占位符）
             this.dataForm.replyContent += '<a href="链接地址">链接文字</a>'
         }
     }
 }
 </script>
+
 <style scoped>
-.msg-container{
+.msg-container {
     background: #eee;
 }
+
+/* 注意：.msg-container样式在模板中未使用，可能是遗留或备用 */
 </style>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-msg.vue b/src/views/modules/wx/wx-msg.vue
index eec873d2..7c0b7047 100644
--- a/src/views/modules/wx/wx-msg.vue
+++ b/src/views/modules/wx/wx-msg.vue
@@ -1,44 +1,60 @@
 <template>
     <div class="mod-config">
+        <!-- 内联表单，用于查询消息 -->
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <!-- 时间选择器 -->
             <el-form-item>
                 <el-select v-model="dataForm.startTime" placeholder="时间">
-                    <el-option v-for="(name,key) in timeSelections" :key="key" :value="name" :label="key"></el-option>
+                    <el-option v-for="(name, key) in timeSelections" :key="key" :value="name" :label="key"></el-option>
                 </el-select>
             </el-form-item>
+            <!-- 消息类型选择器 -->
             <el-form-item>
                 <el-select v-model="dataForm.msgTypes" placeholder="消息类型">
                     <el-option value="" label="不限类型"></el-option>
-                    <el-option value="text,image,voice,shortvideo,video,news,music,location,link" label="消息"></el-option>
+                    <el-option value="text,image,voice,shortvideo,video,news,music,location,link"
+                        label="消息"></el-option>
                     <el-option value="event,transfer_customer_service" label="事件"></el-option>
                 </el-select>
             </el-form-item>
+            <!-- 查询按钮 -->
             <el-form-item>
                 <el-button @click="getDataList()">查询</el-button>
             </el-form-item>
         </el-form>
+        <!-- 提示信息 -->
         <div class="text-gray">
             24小时内消息可回复。此后台展示消息有一分钟左右延迟，如需畅聊请使用
             <a href="https://mpkf.weixin.qq.com/" target="_blank">公众平台客服</a>
         </div>
+        <!-- 消息列表，加载时显示加载动画 -->
         <div v-loading="dataListLoading">
-            <div class="msg-item" v-for="(msg,index) in  dataList" :key="index">
-                <div class="avatar"><el-avatar shape="square" :size="60" :src="getUserInfo(msg.openid).headimgurl"></el-avatar></div>
+            <div class="msg-item" v-for="(msg, index) in dataList" :key="index">
+                <!-- 用户头像 -->
+                <div class="avatar"><el-avatar shape="square" :size="60"
+                        :src="getUserInfo(msg.openid).headimgurl"></el-avatar></div>
+                <!-- 消息内容 -->
                 <div class="item-content">
                     <div class="flex justify-between margin-bottom">
-                        <div class="text-cut">{{getUserInfo(msg.openid).nickname || '--'}}</div>
-                        <div>{{$moment(msg.createTime).calendar()}}</div>
+                        <div class="text-cut">{{ getUserInfo(msg.openid).nickname || '--' }}</div>
+                        <div>{{ $moment(msg.createTime).calendar() }}</div>
+                        <!-- 回复按钮，如果消息在24小时内可点击 -->
                         <div class="reply-btn">
-                            <div v-if="canReply(msg.createTime)" @click="replyHandle(msg.openid)" class="el-icon-s-promotion">回复</div>
+                            <div v-if="canReply(msg.createTime)" @click="replyHandle(msg.openid)"
+                                class="el-icon-s-promotion">回复</div>
                         </div>
                     </div>
+                    <!-- 消息预览组件 -->
                     <wx-msg-preview :msg="msg" singleLine></wx-msg-preview>
                 </div>
             </div>
         </div>
-        <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="currentChangeHandle" :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount"
+            layout="total, sizes, prev, pager, next, jumper">
         </el-pagination>
-        <!-- 弹窗, 消息回复 -->
+        <!-- 消息回复弹窗组件 -->
         <wx-msg-reply ref="wxMsgReply" @success="onReplyed"></wx-msg-reply>
     </div>
 </template>
@@ -48,29 +64,38 @@ const TIME_FORMAT = 'YYYY/MM/DD hh:mm:ss'
 export default {
     data() {
         return {
-            timeSelections:{
-                '近24小时':this.$moment().subtract(1, 'days').format(TIME_FORMAT),
+            // 时间选择器的选项
+            timeSelections: {
+                '近24小时': this.$moment().subtract(1, 'days').format(TIME_FORMAT),
                 '近3天': this.$moment().subtract(3, 'days').format(TIME_FORMAT),
                 '近7天': this.$moment().subtract(7, 'days').format(TIME_FORMAT),
                 '近30天': this.$moment().subtract(30, 'days').format(TIME_FORMAT),
             },
+            // 表单数据
             dataForm: {
                 startTime: this.$moment().subtract(1, 'days').format(TIME_FORMAT),
                 msgTypes: ''
             },
+            // 消息列表
             dataList: [],
-            userDataList:[],
+            // 用户数据列表，用于快速查找用户信息
+            userDataList: [],
+            // 分页参数
             pageIndex: 1,
             pageSize: 20,
             totalCount: 0,
+            // 加载状态
             dataListLoading: false,
+            // 选中的消息项（未使用）
             dataListSelections: []
         }
     },
+    // 引入的组件
     components: {
-        WxMsgReply:()=>import('./wx-msg-reply'),
-        WxMsgPreview:()=>import('@/components/wx-msg-preview')
+        WxMsgReply: () => import('./wx-msg-reply'),
+        WxMsgPreview: () => import('@/components/wx-msg-preview')
     },
+    // 组件激活时获取数据
     activated() {
         this.getDataList()
     },
@@ -85,7 +110,7 @@ export default {
                     'page': this.pageIndex,
                     'limit': this.pageSize,
                     'msgTypes': this.dataForm.msgTypes,
-                    'startTime':this.dataForm.startTime,
+                    'startTime': this.dataForm.startTime,
                     'sidx': 'create_time',
                     'order': 'desc'
                 })
@@ -101,64 +126,67 @@ export default {
                 this.dataListLoading = false
             })
         },
-        refreshUserList(msgList){
-            let openidList=msgList.map(msg=>msg.openid).filter(openid=>!this.userDataList.some(u=>u.openid==openid))
-            if(!openidList.length)return
-            openidList = Array.from(new Set(openidList))//去重
+        // 根据消息列表刷新用户数据列表
+        refreshUserList(msgList) {
+            let openidList = msgList.map(msg => msg.openid).filter(openid => !this.userDataList.some(u => u.openid == openid))
+            if (!openidList.length) return
+            openidList = Array.from(new Set(openidList)) // 去重
             this.$http({
                 url: this.$http.adornUrl('/manage/wxUser/listByIds'),
                 method: 'post',
-                data: this.$http.adornParams(openidList,false)
+                data: this.$http.adornParams(openidList, false)
             }).then(({ data }) => {
                 if (data && data.code === 200) {
                     this.userDataList = this.userDataList.concat(data.data)
                 }
             })
         },
-        getUserInfo(openid){
-            return this.userDataList.find(u=>u.openid==openid) || {nickname:'--',headimgurl:''}
+        // 根据openid获取用户信息
+        getUserInfo(openid) {
+            return this.userDataList.find(u => u.openid == openid) || { nickname: '--', headimgurl: '' }
         },
-        // 是否可回复，24小时内可回复
-        canReply(time){
-            return new Date(time).getTime()>new Date().getTime()-24*60*60*1000
+        // 判断消息是否在24小时内，以决定是否可回复
+        canReply(time) {
+            return new Date(time).getTime() > new Date().getTime() - 24 * 60 * 60 * 1000
         },
-        // 每页数
+        // 每页大小改变时的处理
         sizeChangeHandle(val) {
             this.pageSize = val
             this.pageIndex = 1
             this.getDataList()
         },
-        // 当前页
+        // 当前页改变时的处理
         currentChangeHandle(val) {
             this.pageIndex = val
             this.getDataList()
         },
-        // 多选
+        // 多选处理（未使用）
         selectionChangeHandle(val) {
             this.dataListSelections = val
         },
-        // 回复消息
+        // 回复消息处理
         replyHandle(openid) {
             this.$nextTick(() => {
                 this.$refs.wxMsgReply.init(openid)
             })
         },
-        onReplyed(replyMsg){
+        // 回复成功后的处理
+        onReplyed(replyMsg) {
             this.dataList.unshift({
-                openid : replyMsg.openid,
-                msgType : replyMsg.replyType,
-                detail : {
-                    content : replyMsg.replyContent
+                openid: replyMsg.openid,
+                msgType: replyMsg.replyType,
+                detail: {
+                    content: replyMsg.replyContent
                 },
-                inOut : 1,
-                createTime : new Date()
+                inOut: 1,
+                createTime: new Date()
             })
         }
     }
 }
 </script>
 <style scoped>
-.msg-item{
+.msg-item {
     border: 1px solid #DCDFE6;
     display: flex;
     justify-content: flex-start;
@@ -166,19 +194,22 @@ export default {
     margin-top: 20px;
     padding: 10px 20px;
 }
-.avatar{
+
+.avatar {
     flex: 0;
     display: inline-block;
     min-width: 60px;
     margin-right: 20px;
 }
-.item-content{
+
+.item-content {
     flex: 1;
     line-height: 20px;
     max-width: 100%;
     overflow: hidden;
 }
-.reply-btn{
+
+.reply-btn {
     width: 50px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-qrcode-add-or-update.vue b/src/views/modules/wx/wx-qrcode-add-or-update.vue
index a3a42383..ffac5860 100644
--- a/src/views/modules/wx/wx-qrcode-add-or-update.vue
+++ b/src/views/modules/wx/wx-qrcode-add-or-update.vue
@@ -1,22 +1,33 @@
 <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="100px">
+        <!-- 表单，绑定dataForm作为数据模型，dataRule作为验证规则，监听回车事件触发提交 -->
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
+            label-width="100px">
+            <!-- 表单项：二维码类型，使用单选按钮选择临时或永久 -->
             <el-form-item label="二维码类型" prop="isTemp">
                 <el-radio v-model="dataForm.isTemp" :label="true">临时</el-radio>
                 <el-radio v-model="dataForm.isTemp" :label="false">永久</el-radio>
+                <!-- 如果不是临时二维码，显示一个链接，提醒用户注意永久二维码的限制 -->
                 <div>
-                    <a class="text-warning" v-show="!dataForm.isTemp" target="_blank" href="https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html">注意永久二维码上限10万个，且暂时无法删除旧的二维码</a>
+                    <a class="text-warning" v-show="!dataForm.isTemp" target="_blank"
+                        href="https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html">注意永久二维码上限10万个，且暂时无法删除旧的二维码</a>
                 </div>
             </el-form-item>
 
+            <!-- 表单项：场景值，使用输入框输入任意字符串 -->
             <el-form-item label="场景值" prop="sceneStr">
                 <el-input v-model="dataForm.sceneStr" placeholder="任意字符串" maxlength="64"></el-input>
             </el-form-item>
+
+            <!-- 表单项：失效时间（秒），仅当二维码为临时时显示 -->
             <el-form-item label="失效时间/秒" prop="expireSeconds" v-if="dataForm.isTemp">
                 <el-input v-model="dataForm.expireSeconds" placeholder="单位：秒，最大2592000（30天）"></el-input>
-                <div>最大30天，当前设置：<span class="text-warning">{{dataForm.expireSeconds/(24*3600)}}天</span></div>
+                <!-- 显示当前设置的失效时间转换为天的结果 -->
+                <div>最大30天，当前设置：<span class="text-warning">{{ dataForm.expireSeconds / (24 * 3600) }}天</span></div>
             </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>
@@ -28,12 +39,15 @@
 export default {
     data() {
         return {
+            // 控制弹窗的显示与隐藏
             visible: false,
+            // 表单数据模型
             dataForm: {
-                isTemp: true,
-                sceneStr: '',
-                expireSeconds: 2592000
+                isTemp: true, // 二维码类型：临时
+                sceneStr: '', // 场景值
+                expireSeconds: 2592000 // 临时二维码的失效时间，默认30天
             },
+            // 表单验证规则
             dataRule: {
                 isTemp: [
                     { required: true, message: '二维码类型不能为空', trigger: 'blur' }
@@ -48,34 +62,36 @@ export default {
         }
     },
     methods: {
+        // 初始化方法，接收一个id，用于编辑已存在的记录
         init(id) {
-            this.dataForm.id = id || 0
-            this.visible = true
+            this.dataForm.id = id || 0 // 设置表单的id
+            this.visible = true // 显示弹窗
             this.$nextTick(() => {
-                this.$refs['dataForm'].resetFields()
+                this.$refs['dataForm'].resetFields() // 重置表单字段
             })
         },
-        // 表单提交
+        // 表单提交方法
         dataFormSubmit() {
             this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
+                if (valid) { // 如果验证通过
+                    // 发送POST请求到服务器
                     this.$http({
-                        url: this.$http.adornUrl(`/manage/wxQrCode/createTicket`),
+                        url: this.$http.adornUrl(`/manage/wxQrCode/createTicket`), // 请求地址
                         method: 'post',
-                        data: this.$http.adornData(this.dataForm)
+                        data: this.$http.adornData(this.dataForm) // 请求数据
                     }).then(({ data }) => {
-                        if (data && data.code === 200) {
+                        if (data && data.code === 200) { // 如果服务器响应成功
                             this.$message({
                                 message: '操作成功',
                                 type: 'success',
                                 duration: 1500,
                                 onClose: () => {
-                                    this.visible = false
-                                    this.$emit('refreshDataList')
+                                    this.visible = false // 关闭弹窗
+                                    this.$emit('refreshDataList') // 触发事件，通知父组件刷新数据列表
                                 }
                             })
-                        } else {
-                            this.$message.error(data.msg)
+                        } else { // 如果服务器响应失败
+                            this.$message.error(data.msg) // 显示错误信息
                         }
                     })
                 }
@@ -83,4 +99,4 @@ export default {
         }
     }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-qrcode.vue b/src/views/modules/wx/wx-qrcode.vue
index 38ce9fa9..fc8a6749 100644
--- a/src/views/modules/wx/wx-qrcode.vue
+++ b/src/views/modules/wx/wx-qrcode.vue
@@ -1,140 +1,168 @@
 <template>
     <div class="mod-config">
+        <!-- 表单，用于查询二维码信息 -->
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
             <el-form-item>
                 <el-input v-model="dataForm.sceneStr" placeholder="场景值" clearable></el-input>
             </el-form-item>
             <el-form-item>
+                <!-- 查询按钮 -->
                 <el-button @click="getDataList()">查询</el-button>
+                <!-- 新增按钮，仅当用户有新增权限时显示 -->
                 <el-button v-if="isAuth('wx:wxqrcode:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-                <el-button v-if="isAuth('wx:wxqrcode:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+                <!-- 批量删除按钮，仅当用户有删除权限且至少选中一项时显示 -->
+                <el-button v-if="isAuth('wx:wxqrcode: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 :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" label="ID">
             </el-table-column>
+            <!-- 类型列，显示“临时”或“永久” -->
             <el-table-column prop="isTemp" header-align="center" align="center" label="类型">
-                <span slot-scope="scope">{{scope.row.isTemp?'临时':'永久'}}</span>
+                <span slot-scope="scope">{{ scope.row.isTemp ? '临时' : '永久' }}</span>
             </el-table-column>
+            <!-- 场景值列 -->
             <el-table-column prop="sceneStr" header-align="center" align="center" label="场景值">
             </el-table-column>
+            <!-- 二维码图片列，显示二维码链接 -->
             <el-table-column prop="ticket" header-align="center" align="center" show-overflow-tooltip label="二维码图片">
-                <a :href="'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='+scope.row.ticket" slot-scope="scope">{{scope.row.ticket}}</a>
+                <a :href="'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=' + scope.row.ticket"
+                    slot-scope="scope">{{ scope.row.ticket }}</a>
             </el-table-column>
+            <!-- 解析后的地址列，显示链接 -->
             <el-table-column prop="url" header-align="center" align="center" show-overflow-tooltip label="解析后的地址">
-                <a :href="scope.row.url" slot-scope="scope">{{scope.row.url}}</a>
+                <a :href="scope.row.url" slot-scope="scope">{{ scope.row.url }}</a>
             </el-table-column>
+            <!-- 失效时间列 -->
             <el-table-column prop="expireTime" header-align="center" align="center" width="100" 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="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="totalPage" layout="total, sizes, prev, pager, next, jumper">
+        <!-- 分页组件 -->
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
+            layout="total, sizes, prev, pager, next, jumper">
         </el-pagination>
-        <!-- 弹窗, 新增 / 修改 -->
+        <!-- 弹窗组件，用于新增/修改二维码信息 -->
         <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
     </div>
 </template>
 
 <script>
-import AddOrUpdate from './wx-qrcode-add-or-update'
+import AddOrUpdate from './wx-qrcode-add-or-update' // 引入新增/修改二维码的组件
 export default {
     data() {
         return {
+            // 查询表单数据
             dataForm: {
                 sceneStr: ''
             },
+            // 二维码列表数据
             dataList: [],
+            // 当前页码
             pageIndex: 1,
+            // 每页显示数量
             pageSize: 10,
+            // 总页数
             totalPage: 0,
+            // 列表加载状态
             dataListLoading: false,
+            // 选中项
             dataListSelections: [],
+            // 新增/修改弹窗显示状态
             addOrUpdateVisible: false
         }
     },
     components: {
-        AddOrUpdate
+        AddOrUpdate // 注册新增/修改二维码的组件
     },
     activated() {
-        this.getDataList()
+        this.getDataList() // 激活时获取数据列表
     },
     methods: {
         // 获取数据列表
         getDataList() {
-            this.dataListLoading = true
-            this.$http({
-                url: this.$http.adornUrl('/manage/wxQrCode/list'),
+            this.dataListLoading = true // 开始加载
+            this.$http({ // 发送请求
+                url: this.$http.adornUrl('/manage/wxQrCode/list'), // 请求地址
                 method: 'get',
-                params: this.$http.adornParams({
+                params: this.$http.adornParams({ // 请求参数
                     'page': this.pageIndex,
                     'limit': this.pageSize,
                     'sceneStr': this.dataForm.sceneStr,
                     'sidx': 'id',
                     'order': 'desc'
                 })
-            }).then(({ data }) => {
+            }).then(({ data }) => { // 请求成功后的处理
                 if (data && data.code === 200) {
-                    this.dataList = data.page.list
-                    this.totalPage = data.page.totalCount
+                    this.dataList = data.page.list // 更新列表数据
+                    this.totalPage = data.page.totalCount // 更新总页数
                 } else {
-                    this.dataList = []
-                    this.totalPage = 0
+                    this.dataList = [] // 清空列表数据
+                    this.totalPage = 0 // 重置总页数
                 }
-                this.dataListLoading = false
+                this.dataListLoading = false // 结束加载
             })
         },
-        // 每页数
+        // 每页数改变时的处理
         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 // 更新选中项
         },
-        // 新增 / 修改
+        // 新增/修改处理
         addOrUpdateHandle(id) {
-            this.addOrUpdateVisible = true
-            this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(id)
+            this.addOrUpdateVisible = true // 显示弹窗
+            this.$nextTick(() => { // 在DOM更新后执行
+                this.$refs.addOrUpdate.init(id) // 初始化弹窗内容，id为null表示新增，否则为修改
             })
         },
-        // 删除
+        // 删除处理
         deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.id)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?（仅删存档）`, '提示', {
+            var ids = id ? [id] : this.dataListSelections.map(item => item.id) // 获取要删除的id列表
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?（仅删存档）`, '提示', { // 弹出确认框
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
-            }).then(() => {
-                this.$http({
+            }).then(() => { // 确认后的处理
+                this.$http({ // 发送删除请求
                     url: this.$http.adornUrl('/manage/wxQrCode/delete'),
                     method: 'post',
-                    data: this.$http.adornData(ids, false)
-                }).then(({ data }) => {
+                    data: this.$http.adornData(ids, false) // 发送要删除的id列表
+                }).then(({ data }) => { // 请求成功后的处理
                     if (data && data.code === 200) {
-                        this.$message({
+                        this.$message({ // 显示成功消息
                             message: '操作成功',
                             type: 'success',
                             duration: 1500,
-                            onClose: () => this.getDataList()
+                            onClose: () => this.getDataList() // 关闭消息后重新获取数据列表
                         })
                     } else {
-                        this.$message.error(data.msg)
+                        this.$message.error(data.msg) // 显示错误消息
                     }
                 })
+
             })
         }
     }
diff --git a/src/views/modules/wx/wx-user-tagging.vue b/src/views/modules/wx/wx-user-tagging.vue
index ff4b2664..4403052f 100644
--- a/src/views/modules/wx/wx-user-tagging.vue
+++ b/src/views/modules/wx/wx-user-tagging.vue
@@ -1,100 +1,112 @@
 <template>
-    <el-dialog :title="modeDesc[mode]+'用户标签'" :close-on-click-modal="false" :visible.sync="dialogVisible">
+    <!-- 使用Element UI的Dialog组件，用于显示模态框 -->
+    <el-dialog :title="modeDesc[mode] + '用户标签'" <!-- 动态设置标题，根据mode显示绑定或解绑用户标签 -->
+        :close-on-click-modal="false" <!-- 点击模态框外部不关闭模态框 -->
+        :visible.sync="dialogVisible"> <!-- 双向绑定控制模态框的显示隐藏 -->
+
         <div>
-            <el-select v-model="selectedTagid" filterable placeholder="请选择标签" style="width:100%">
-                <el-option v-for="tagid in tagidsInOption" :key="tagid" :label="getTagName(tagid)" :value="tagid"></el-option>
+            <!-- 使用Element UI的Select组件，用于选择标签 -->
+            <el-select v-model="selectedTagid" <!-- 绑定选中的标签ID -->
+                filterable <!-- 可过滤选项 -->
+                placeholder="请选择标签"
+                style="width:100%">
+                <!-- 遍历tagidsInOption数组，生成下拉选项 -->
+                <el-option v-for="tagid in tagidsInOption" :key="tagid" :label="getTagName(tagid)" <!--
+                    使用getTagName方法获取标签名称 -->
+                    :value="tagid"></el-option>
             </el-select>
-            <div style="margin-top:20px;">已选择用户数：{{wxUsers.length}}</div>
+            <!-- 显示已选择用户的数量 -->
+            <div style="margin-top:20px;">已选择用户数：{{ wxUsers.length }}</div>
         </div>
+
+        <!-- 模态框底部操作按钮 -->
         <span slot="footer" class="dialog-footer">
-            <el-button @click="dialogVisible=false">关闭</el-button>
-            <el-button type="primary" @click="dataFormSubmit()" :disabled="submitting">{{submitting?'保存中...':'确定'}}</el-button>
+            <el-button @click="dialogVisible = false">关闭</el-button> <!-- 关闭按钮 -->
+            <el-button type="primary" @click="dataFormSubmit()" :disabled="submitting">{{ submitting ? '保存中...' : '确定'
+                }}</el-button> <!-- 提交按钮，根据submitting状态显示不同文本 -->
         </span>
     </el-dialog>
 </template>
+
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'vuex' // 引入Vuex的mapState辅助函数
 export default {
-    name:'wx-user-tagging',
-    props:{
-        wxUsers:Array,
+    name: 'wx-user-tagging', // 组件名称
+    props: {
+        wxUsers: Array, // 接收父组件传递的wxUsers数组，包含用户的openid和标签ID列表
     },
-    data(){
-        return{
-            mode:'tagging',//操作，tagging | untagging
-            modeDesc:{
-                'tagging':'绑定',
-                'untagging':'解绑'
+    data() {
+        return {
+            mode: 'tagging', // 当前操作模式，默认为绑定
+            modeDesc: { // 操作模式的描述
+                'tagging': '绑定',
+                'untagging': '解绑'
             },
-            selectedTagid:'',
-            dialogVisible:false,
-            submitting:false
+            selectedTagid: '', // 选中的标签ID
+            dialogVisible: false, // 控制模态框的显示隐藏
+            submitting: false // 控制提交按钮的禁用状态
         }
     },
     computed: mapState({
-        wxUserTags:state=>state.wxUserTags.tags,
-        /**
-         * 返回下拉选择框中的选项列表
-         * 假设 all= 全部标签，intersection = 用户标签交集（即所有用户都有的） ，union=用户标签并集（即至少一个用户的）
-         * 那么绑定时可选：all-intersection的差集，即所有用户都有的就不列出来了
-         *     解绑时可选：，union ，即用户有的标签都列出来
-         */
-        tagidsInOption(){
-            let userTags=this.wxUsers.map(u=>u.tagidList || [])//示例：[[1,2],[],[1,3]]
-            if(this.mode=='tagging'){//绑定标签时可选：所有标签 - 用户标签交集
-                let all = this.wxUserTags.map(item=>item.id)
-                return all.filter(tagid=>!userTags.every(tagsIdArray=>tagsIdArray.indexOf(tagid)>-1))
-            }else if(this.mode=='untagging'){//解绑标签时可选：用户标签的并集
-                let unionSet = new Set();
-                userTags.forEach(tagsIdArray=>{
-                    tagsIdArray.forEach(tagid => unionSet.add(tagid))
-                });//将用户的标签放到unionSet中去重
-                return Array.from(unionSet);//unionSet转为数组
+        wxUserTags: state => state.wxUserTags.tags, // 从Vuex状态树中获取标签列表
+        // 计算属性，返回下拉选择框中的选项列表
+        tagidsInOption() {
+            let userTags = this.wxUsers.map(u => u.tagidList || []) // 获取所有用户的标签ID列表
+            if (this.mode == 'tagging') { // 绑定标签时可选：所有标签 - 用户标签交集
+                let all = this.wxUserTags.map(item => item.id) // 获取所有标签ID
+                return all.filter(tagid => !userTags.every(tagsIdArray => tagsIdArray.indexOf(tagid) > -1)) // 过滤出用户未全部拥有的标签
+            } else if (this.mode == 'untagging') { // 解绑标签时可选：用户标签的并集
+                let unionSet = new Set(); // 使用Set去重
+                userTags.forEach(tagsIdArray => {
+                    tagsIdArray.forEach(tagid => unionSet.add(tagid)) // 将用户的标签添加到Set中
+                });
+                return Array.from(unionSet); // 将Set转换为数组
             }
-            return []
+            return [] // 默认返回空数组
         }
-        
     }),
-    methods:{
-        init(mode){
-            if('tagging'==mode || 'untagging'==mode){
-                this.mode=mode;
-                this.dialogVisible=true
-            }else{
-                throw('mode参数有误')
+    methods: {
+        // 初始化方法，设置操作模式和显示模态框
+        init(mode) {
+            if ('tagging' == mode || 'untagging' == mode) {
+                this.mode = mode;
+                this.dialogVisible = true
+            } else {
+                throw ('mode参数有误') // 如果mode参数有误，抛出错误
             }
         },
-        getTagName(tagid){
-            let tag = this.wxUserTags.find(item=>item.id==tagid)
-            return tag?tag.name : "?"
+        // 根据标签ID获取标签名称
+        getTagName(tagid) {
+            let tag = this.wxUserTags.find(item => item.id == tagid) // 在标签列表中查找标签
+            return tag ? tag.name : "?" // 返回标签名称，如果找不到返回"?"
         },
-        dataFormSubmit(){
-            if(this.submitting)return
-            if(!this.selectedTagid){
+        // 提交表单数据
+        dataFormSubmit() {
+            if (this.submitting) return // 如果正在提交，直接返回
+            if (!this.selectedTagid) { // 如果没有选择标签，显示错误消息
                 this.$message.error('未选择标签')
                 return
             }
-            this.submitting=true
-            let openidList=this.wxUsers.map(u=>u.openid)
-            this.$http({
-                url: this.$http.adornUrl(`/manage/wxUserTags/${this.mode=='tagging'?'batchTagging':'batchUnTagging'}`),
-                method: 'post',
-                data:this.$http.adornData({
-                    tagid : this.selectedTagid,
-                    openidList : openidList
+            this.submitting = true // 设置提交状态为true
+            let openidList = this.wxUsers.map(u => u.openid) // 获取所有用户的openid
+            this.$http({ // 发送HTTP请求
+                url: this.$http.adornUrl(`/manage/wxUserTags/${this.mode == 'tagging' ? 'batchTagging' : 'batchUnTagging'}`), // 根据操作模式动态设置URL
+                method: 'post', // 使用POST方法
+                data: this.$http.adornData({ // 发送的数据
+                    tagid: this.selectedTagid, // 选中的标签ID
+                    openidList: openidList // 用户的openid列表
                 })
-            }).then(({ data }) => {
-                this.submitting=false
-                if (data && data.code === 200) {
+            }).then(({ data }) => { // 请求成功后的处理
+                this.submitting = false // 设置提交状态为false
+                if (data && data.code === 200) { // 如果操作成功
                     this.$message({
                         message: '操作成功,列表数据需稍后刷新查看',
                         type: 'success',
-                        onClose: () =>this.dialogVisible=false
+                        onClose: () => this.dialogVisible = false // 关闭模态框
                     })
-                } else {
-                    this.$message.error(data.msg)
+                } else { // 如果操作失败
+                    this.$message.error(data.msg) // 显示错误消息
                 }
-                
             })
         }
     }
diff --git a/src/views/modules/wx/wx-user.vue b/src/views/modules/wx/wx-user.vue
index 963425cd..afb1f39c 100644
--- a/src/views/modules/wx/wx-user.vue
+++ b/src/views/modules/wx/wx-user.vue
@@ -1,67 +1,97 @@
 <template>
     <div class="mod-config">
+        <!-- 使用Element UI的表单组件，设置为行内表单，绑定dataForm数据模型，并监听回车事件触发getDataList方法 -->
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <!-- 用户标签选择器 -->
             <el-form-item>
                 <el-select v-model="dataForm.tagid" filterable clearable placeholder="用户标签">
-                    <el-option v-for="item in wxUserTags" :key="item.id" :label="item.name" :value="item.id"></el-option>
+                    <!-- 循环渲染标签选项 -->
+                    <el-option v-for="item in wxUserTags" :key="item.id" :label="item.name"
+                        :value="item.id"></el-option>
                 </el-select>
             </el-form-item>
+            <!-- 昵称输入框 -->
             <el-form-item>
                 <el-input v-model="dataForm.nickname" placeholder="昵称" clearable></el-input>
             </el-form-item>
+            <!-- 城市输入框 -->
             <el-form-item>
                 <el-input v-model="dataForm.city" placeholder="城市" clearable></el-input>
             </el-form-item>
+            <!-- 关注场景值输入框 -->
             <el-form-item>
                 <el-input v-model="dataForm.qrSceneStr" placeholder="关注场景值" clearable></el-input>
             </el-form-item>
+            <!-- 表单操作按钮 -->
             <el-form-item>
                 <el-button @click="getDataList()">查询</el-button>
-                <el-button v-if="isAuth('wx:wxuser:save')"  type="primary" @click="$refs.wxUserTagging.init('tagging')" :disabled="dataListSelections.length <= 0">绑定标签</el-button>
-                <el-button v-if="isAuth('wx:wxuser:save')"  type="primary" @click="$refs.wxUserTagging.init('untagging')" :disabled="dataListSelections.length <= 0">解绑标签</el-button>
-                <el-button v-if="isAuth('wx:wxuser:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
+                <!-- 根据权限显示绑定/解绑标签按钮，并设置禁用状态 -->
+                <el-button v-if="isAuth('wx:wxuser:save')" type="primary" @click="$refs.wxUserTagging.init('tagging')"
+                    :disabled="dataListSelections.length <= 0">绑定标签</el-button>
+                <el-button v-if="isAuth('wx:wxuser:save')" type="primary" @click="$refs.wxUserTagging.init('untagging')"
+                    :disabled="dataListSelections.length <= 0">解绑标签</el-button>
+                <!-- 根据权限显示批量删除按钮，并设置禁用状态 -->
+                <el-button v-if="isAuth('wx:wxuser:delete')" type="danger" @click="deleteHandle()"
+                    :disabled="dataListSelections.length <= 0">批量删除</el-button>
             </el-form-item>
+            <!-- 其他操作按钮 -->
             <el-form-item class="fr">
-                <el-button  icon="el-icon-price-tag" type="success" @click="$refs.wxUserTagsEditor.show()">标签管理</el-button>
-                <el-button  icon="el-icon-sort" type="success" @click="syncWxUsers()">同步粉丝</el-button>
+                <!-- 标签管理按钮 -->
+                <el-button icon="el-icon-price-tag" type="success"
+                    @click="$refs.wxUserTagsEditor.show()">标签管理</el-button>
+                <!-- 同步粉丝按钮 -->
+                <el-button icon="el-icon-sort" type="success" @click="syncWxUsers()">同步粉丝</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="openid" header-align="center" align="center" label="openid">
-            </el-table-column>
-            <el-table-column prop="nickname" header-align="center" align="center" label="昵称">
-            </el-table-column>
-            <el-table-column prop="sex" header-align="center" align="center" label="性别" :formatter="sexFormat">
-            </el-table-column>
-            <el-table-column prop="city" header-align="center" align="center" label="城市">
-            </el-table-column>
+        <!-- 数据列表 -->
+        <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列 -->
+            <el-table-column prop="openid" header-align="center" align="center" label="openid"></el-table-column>
+            <!-- 昵称列 -->
+            <el-table-column prop="nickname" header-align="center" align="center" label="昵称"></el-table-column>
+            <!-- 性别列，使用formatter格式化显示 -->
+            <el-table-column prop="sex" header-align="center" align="center" label="性别"
+                :formatter="sexFormat"></el-table-column>
+            <!-- 城市列 -->
+            <el-table-column prop="city" header-align="center" align="center" label="城市"></el-table-column>
+            <!-- 头像列，使用插槽显示图片 -->
             <el-table-column prop="headimgurl" header-align="center" align="center" label="头像">
                 <img class="headimg" slot-scope="scope" v-if="scope.row.headimgurl" :src="scope.row.headimgurl" />
             </el-table-column>
+            <!-- 标签列，使用插槽显示多个标签 -->
             <el-table-column prop="tagidList" header-align="center" align="center" label="标签" show-overflow-tooltip>
                 <template slot-scope="scope">
-                    <span v-for="tagid in scope.row.tagidList" :key="tagid">{{getTagName(tagid)}} </span>
+                    <span v-for="tagid in scope.row.tagidList" :key="tagid">{{ getTagName(tagid) }} </span>
                 </template>
             </el-table-column>
+            <!-- 订阅时间列，使用moment格式化显示 -->
             <el-table-column prop="subscribeTime" header-align="center" align="center" label="订阅时间">
-                <template slot-scope="scope">{{$moment(scope.row.subscribeTime).calendar()}}</template>
-            </el-table-column>
-            <el-table-column prop="qrSceneStr" header-align="center" align="center" label="场景值">
+                <template slot-scope="scope">{{ $moment(scope.row.subscribeTime).calendar() }}</template>
             </el-table-column>
+            <!-- 场景值列 -->
+            <el-table-column prop="qrSceneStr" header-align="center" align="center" label="场景值"></el-table-column>
+            <!-- 是否关注列，使用插槽显示"是"或"否" -->
             <el-table-column prop="subscribe" header-align="center" align="center" label="是否关注">
-                <span slot-scope="scope">{{scope.row.subscribe?"是":"否"}}</span>
+                <span slot-scope="scope">{{ scope.row.subscribe ? "是" : "否" }}</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="deleteHandle(scope.row.openid)">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
-        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
-        </el-pagination>
-        <wx-user-tags-manager ref="wxUserTagsEditor" :visible="showWxUserTagsEditor" @close="showWxUserTagsEditor=false"></wx-user-tags-manager>
+        <!-- 分页组件 -->
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
+            :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
+            layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        <!-- 标签管理器组件 -->
+        <wx-user-tags-manager ref="wxUserTagsEditor" :visible="showWxUserTagsEditor"
+            @close="showWxUserTagsEditor = false"></wx-user-tags-manager>
+        <!-- 用户标签绑定/解绑组件 -->
         <wx-user-tagging ref="wxUserTagging" :wxUsers="dataListSelections"></wx-user-tagging>
     </div>
 </template>
@@ -74,28 +104,28 @@ export default {
     data() {
         return {
             dataForm: {
-                tagid:'',
+                tagid: '',
                 nickname: '',
-                city:'',
-                qrSceneStr:''
+                city: '',
+                qrSceneStr: ''
             },
             dataList: [],
             pageIndex: 1,
             pageSize: 10,
             totalPage: 0,
-            showWxUserTagsEditor:false,
+            showWxUserTagsEditor: false,
             dataListLoading: false,
             dataListSelections: [],
         }
     },
     components: {
-        WxUserTagsManager,WxUserTagging
+        WxUserTagsManager, WxUserTagging
     },
     activated() {
         this.getDataList()
     },
     computed: mapState({
-        wxUserTags:state=>state.wxUserTags.tags
+        wxUserTags: state => state.wxUserTags.tags
     }),
     methods: {
         // 获取数据列表
@@ -168,23 +198,23 @@ export default {
                 })
             })
         },
-        syncWxUsers(){
+        syncWxUsers() {
             this.$http({
-                    url: this.$http.adornUrl('/manage/wxUser/syncWxUsers'),
-                    method: 'post',
-                }).then(({ data }) => {
-                    if (data && data.code === 200) {
-                        this.$message({
-                            message: '同步任务已建立，请稍候刷新查看列表',
-                            type: 'success',
-                            duration: 1500
-                        })
-                    } else {
-                        this.$message.error(data.msg)
-                    }
-                })
+                url: this.$http.adornUrl('/manage/wxUser/syncWxUsers'),
+                method: 'post',
+            }).then(({ data }) => {
+                if (data && data.code === 200) {
+                    this.$message({
+                        message: '同步任务已建立，请稍候刷新查看列表',
+                        type: 'success',
+                        duration: 1500
+                    })
+                } else {
+                    this.$message.error(data.msg)
+                }
+            })
         },
-        
+
         sexFormat(row, column, cellValue) {
             let sexType = {
                 0: '未知',
@@ -193,15 +223,15 @@ export default {
             }
             return sexType[cellValue];
         },
-        getTagName(tagid){
-            let tag = this.wxUserTags.find(item=>item.id==tagid)
-            return tag?tag.name : "?"
+        getTagName(tagid) {
+            let tag = this.wxUserTags.find(item => item.id == tagid)
+            return tag ? tag.name : "?"
         }
     }
 }
 </script>
 <style scoped>
-.headimg{
+.headimg {
     width: 50px;
     height: 50px;
     border-radius: 8px;