李

代码注释

src/App.vue

@@ -1,56 +1,7 @@
 <template>
     <!-- 根元素，应用的主容器 -->
     <!-- 根元素，应用的主容器 -->
-    <div id="app">
+     <!-- 根元素，应用的主容器 -->
-        <!-- 使用fade过渡效果来切换路由视图 -->
-        <transition name="fade">
-            <router-view /> <!-- 路由出口，用于渲染匹配的组件 -->
-        </transition>
-    </div>
-</template>
-
-<style>
-/* 样式定义 */
-
-/* 定义小图片的样式 */
-img.image-sm {
-    max-width: 80px; /* 最大宽度 */
-    max-height: 80px; /* 最大高度 */
-}
-
-/* 为el-col内的el-select和el-date-editor设置宽度 */
-.el-col .el-select,
-.el-col .el-date-editor {
-    width: 100%; /* 宽度设置为父容器的100% */
-}
-
-/* 设置表格展开行的样式 */
-.demo-table-expand {
-    font-size: 0; /* 将字体大小设为0，常用于清除子元素的默认间隙 */
-}
-
-/* 设置表格展开行内label的样式 */
-.demo-table-expand label {
-    width: 90px; /* 宽度 */
-    color: #99a9bf; /* 文字颜色 */
-}
-
-/* 设置el-form-item在表格展开行中的样式 */
-.demo-table-expand .el-form-item {
-    margin-right: 0; /* 右侧外边距 */
-    margin-bottom: 0; /* 底部外边距 */
-    width: 50%; /* 宽度设置为父容器的50% */
-}
-
-/* 定义警告文本的样式 */
-.text-warning {
-    color: #e6a23c; /* 文字颜色 */
-}
-</style>
-
-
-<template>
-    <!-- 根元素，应用的主容器 -->
     <!-- 根元素，应用的主容器 -->
     <div id="app">
         <!-- 使用fade过渡效果来切换路由视图 -->
@@ -69,6 +20,7 @@ img.image-sm {
     max-height: 80px; /* 最大高度 */
 }
 
+
 /* 为el-col内的el-select和el-date-editor设置宽度 */
 .el-col .el-select,
 .el-col .el-date-editor {
@@ -98,4 +50,3 @@ img.image-sm {
     color: #e6a23c; /* 文字颜色 */
 }
 </style>
-

src/main.js

@@ -19,6 +19,8 @@ import ElementUI from 'element-ui';
 // 导入moment.js库，用于日期和时间处理
 import moment from 'moment';
 
+
+
 // 导入Element UI的CSS样式
 import 'element-ui/lib/theme-chalk/index.css';
 

src/views/main-content.vue

@@ -14,6 +14,7 @@
                 </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，则显示iframe -->

src/views/main-navbar-update-password.vue

@@ -12,6 +12,7 @@
                 <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>

src/views/main-navbar.vue

@@ -11,6 +11,7 @@
             </h1>
         </div>
         <!-- 导航栏主体，包含菜单 -->
+         
         <div class="site-navbar__body clearfix">
             <!-- 左侧菜单，包含侧边栏折叠/展开按钮 -->
             <el-menu class="site-navbar__menu" mode="horizontal">

src/views/main-sidebar-sub-menu.vue

@@ -15,6 +15,7 @@ export default {
         }
     },
     components: {
+        
         SubMenu // 注册SubMenu组件
     },
     computed: {

src/views/main-sidebar.vue

@@ -17,6 +17,7 @@
     </aside>
 </template>
 
+
 <script>
 import SubMenu from './main-sidebar-sub-menu' // 导入SubMenu组件
 import { isURL } from '@/utils/validate' // 导入isURL验证函数

src/views/main.vue

@@ -17,7 +17,9 @@
     </div>
 </template> 
 
+
 <script>
+
 // 导入子组件
 import MainNavbar from './main-navbar'
 import MainSidebar from './main-sidebar'

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

@@ -1,28 +1,44 @@
 <template>
+    <!-- 组件的HTML模板 -->
     <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-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>
+            <!-- 展示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>
             </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>
                     <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
@@ -30,35 +46,48 @@
                 </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'
+
 export default {
     data() {
         return {
+            // 搜索表单数据
             dataForm: {
                 key: ''
             },
+            // 数据列表
             dataList: [],
+            // 数据列表加载状态
             dataListLoading: false,
+            // 选中项
             dataListSelections: [],
+            // 新增/修改弹窗显示状态
             addOrUpdateVisible: false,
-            accountAccessVisible:false
+            // 接入信息弹窗显示状态
+            accountAccessVisible: false
         }
     },
+    // 引入子组件
     components: {
-        AddOrUpdate,AccountAccess
+        AddOrUpdate,
+        AccountAccess
     },
+    // 从Vuex中获取状态
     computed: mapState({
-        ACCOUNT_TYPES: state=>state.wxAccount.ACCOUNT_TYPES
+        ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES
     }),
+    // 组件激活时获取数据列表
     activated() {
         this.getDataList()
     },
@@ -66,53 +95,55 @@ export default {
         // 获取数据列表
         getDataList() {
             this.dataListLoading = true
+            // 发起HTTP请求获取数据
             this.$http({
-                url: this.$http.adornUrl('/manage/wxAccount/list'),
+                url: this.$http.adornUrl('/manage/wxAccount/list'), // 调用封装的URL处理函数
                 method: 'get',
-                params: this.$http.adornParams({
+                params: this.$http.adornParams({ // 调用封装的参数处理函数
                     'key': this.dataForm.key
                 })
             }).then(({ data }) => {
                 if (data && data.code === 200) {
-                    this.dataList = data.list
+                    this.dataList = data.list // 更新数据列表
-                    this.$store.commit('wxAccount/updateAccountList', 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
         },
-        // 新增 / 修改
+        // 新增/修改操作
         addOrUpdateHandle(item) {
             this.addOrUpdateVisible = true
             this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(item)
+                this.$refs.addOrUpdate.init(item) // 初始化弹窗
             })
         },
-        accessInfo(item){
+        // 接入信息操作
+        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 => {
+            // 根据是否有传入appid决定是单个删除还是批量删除
-                return item.appid
+            var ids = appid ? [appid] : this.dataListSelections.map(item => item.appid)
-            })
             this.$confirm(`确定对[appid=${ids.join(',')}]进行[${appid ? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 发起HTTP请求删除数据
                 this.$http({
                     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,17 +151,18 @@ 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]
         }
     }
 }

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

@@ -16,6 +16,7 @@
 </template>
 <script>
 export default {
+    
     data() {
         return {
             activeTab: 'image',

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

@@ -15,6 +15,7 @@
         <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>

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

@@ -22,6 +22,7 @@
                                     <div class="menu-item-title">
                                         <span>{{ sub.name }}</span>
                                     </div>
+                                    
                                 </li>
                                 <!-- 如果子菜单数量少于5个，显示添加按钮 -->
                                 <li v-if="btn.subButtons.length < 5" class="menu-sub-item" 

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

@@ -21,6 +21,7 @@
     </el-dialog>
 </template>
 
+
 <script>
 export default {
     data() {

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

@@ -18,6 +18,7 @@
                 </el-select>
             </el-form-item>
             <el-form-item>
+                
                 <!-- 查询按钮 -->
                 <el-button @click="getDataList()">查询</el-button>
             </el-form-item>

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

@@ -18,6 +18,7 @@
                 <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万个，且暂时无法删除旧的二维码

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

@@ -16,6 +16,7 @@
             </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>

src/views/modules/wx/wx-user-tagging.vue

@@ -18,6 +18,7 @@
             <el-button type="primary" @click="dataFormSubmit()" :disabled="submitting">{{submitting?'保存中...':'确定'}}</el-button>
         </span>
     </el-dialog>
+    
 </template>
 
 <script>

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

@@ -18,6 +18,7 @@
                 <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>