diff --git a/src/views/modules/sys/role.vue b/src/views/modules/sys/role.vue
index 000c3188..0d0eb2b0 100644
--- a/src/views/modules/sys/role.vue
+++ b/src/views/modules/sys/role.vue
@@ -1,132 +1,168 @@
-<template>
-    <div class="mod-role">
-        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-            <el-form-item>
-                <el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="getDataList()">查询</el-button>
-                <el-button v-if="isAuth('sys:role:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-                <el-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
-            </el-form-item>
-        </el-form>
-        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
-            <el-table-column type="selection" header-align="center" align="center" width="50">
-            </el-table-column>
-            <el-table-column prop="roleId" header-align="center" align="center" width="80" label="ID">
-            </el-table-column>
-            <el-table-column prop="roleName" header-align="center" align="center" label="角色名称">
-            </el-table-column>
-            <el-table-column prop="remark" header-align="center" align="center" label="备注">
-            </el-table-column>
-            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
-                <template slot-scope="scope">
-                    <el-button v-if="isAuth('sys:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.roleId)">修改</el-button>
-                    <el-button v-if="isAuth('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.roleId)">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
-        </el-pagination>
-        <!-- 弹窗, 新增 / 修改 -->
-        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
-    </div>
-</template>
+<template>  
+    <div class="mod-role">  
+        <!-- 搜索和管理角色的表单 -->  
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">  
+            <el-form-item>  
+                <!-- 角色名称输入框 -->  
+                <el-input v-model="dataForm.roleName" placeholder="角色名称" clearable></el-input>  
+            </el-form-item>  
+            <el-form-item>  
+                <!-- 查询按钮 -->  
+                <el-button @click="getDataList()">查询</el-button>  
+                <!-- 新增按钮，只有在有权限时才显示 -->  
+                <el-button v-if="isAuth('sys:role:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>  
+                <!-- 批量删除按钮，只有在有权限时才显示，且未选择则禁用 -->  
+                <el-button v-if="isAuth('sys:role:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>  
+            </el-form-item>  
+        </el-form>  
+        
+        <!-- 显示角色的表格 -->  
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">  
+            <!-- 选择列，用于多选 -->  
+            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>  
+            <!-- ID列 -->  
+            <el-table-column prop="roleId" header-align="center" align="center" width="80" label="ID"></el-table-column>  
+            <!-- 角色名称列 -->  
+            <el-table-column prop="roleName" header-align="center" align="center" label="角色名称"></el-table-column>  
+            <!-- 备注列 -->  
+            <el-table-column prop="remark" header-align="center" align="center" label="备注"></el-table-column>  
+            <!-- 操作列 -->  
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">  
+                <template slot-scope="scope">  
+                    <!-- 修改按钮，只有在有权限时才显示 -->  
+                    <el-button v-if="isAuth('sys:role:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.roleId)">修改</el-button>  
+                    <!-- 删除按钮，只有在有权限时才显示 -->  
+                    <el-button v-if="isAuth('sys:role:delete')" type="text" size="small" @click="deleteHandle(scope.row.roleId)">删除</el-button>  
+                </template>  
+            </el-table-column>  
+        </el-table>  
+        
+        <!-- 分页组件 -->  
+        <el-pagination   
+            @size-change="sizeChangeHandle"   
+            @current-change="currentChangeHandle"   
+            :current-page="pageIndex"   
+            :page-sizes="[10, 20, 50, 100]"   
+            :page-size="pageSize"   
+            :total="totalCount"   
+            layout="total, sizes, prev, pager, next, jumper">  
+        </el-pagination>  
+        
+        <!-- 弹窗, 新增 / 修改 -->  
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>  
+    </div>  
+</template>  
 
-<script>
-import AddOrUpdate from './role-add-or-update'
-export default {
-    data() {
-        return {
-            dataForm: {
-                roleName: ''
-            },
-            dataList: [],
-            pageIndex: 1,
-            pageSize: 10,
-            totalCount: 0,
-            dataListLoading: false,
-            dataListSelections: [],
-            addOrUpdateVisible: false
-        }
-    },
-    components: {
-        AddOrUpdate
-    },
-    activated() {
-        this.getDataList()
-    },
-    methods: {
-        // 获取数据列表
-        getDataList() {
-            this.dataListLoading = true
-            this.$http({
-                url: this.$http.adornUrl('/sys/role/list'),
-                method: 'get',
-                params: this.$http.adornParams({
-                    'page': this.pageIndex,
-                    'limit': this.pageSize,
-                    'roleName': this.dataForm.roleName
-                })
-            }).then(({ data }) => {
-                if (data && data.code === 200) {
-                    this.dataList = data.page.list
-                    this.totalCount = data.page.totalCount
-                } else {
-                    this.dataList = []
-                    this.totalCount = 0
-                }
-                this.dataListLoading = false
-            })
-        },
-        // 每页数
-        sizeChangeHandle(val) {
-            this.pageSize = val
-            this.pageIndex = 1
-            this.getDataList()
-        },
-        // 当前页
-        currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
-        },
-        // 多选
-        selectionChangeHandle(val) {
-            this.dataListSelections = val
-        },
-        // 新增 / 修改
-        addOrUpdateHandle(id) {
-            this.addOrUpdateVisible = true
-            this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(id)
-            })
-        },
-        // 删除
-        deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.roleId)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-                this.$http({
-                    url: this.$http.adornUrl('/sys/role/delete'),
-                    method: 'post',
-                    data: this.$http.adornData(ids, false)
-                }).then(({ data }) => {
-                    if (data && data.code === 200) {
-                        this.$message({
-                            message: '操作成功',
-                            type: 'success',
-                            duration: 1500,
-                            onClose: () => this.getDataList()
-                        })
-                    } else {
-                        this.$message.error(data.msg)
-                    }
-                })
-            }).catch(() => { })
-        }
-    }
-}
-</script>
+<script>  
+import AddOrUpdate from './role-add-or-update' // 引入新增/修改组件  
+
+export default {  
+    data() {  
+        return {  
+            // 搜索表单数据  
+            dataForm: {  
+                roleName: ''  
+            },  
+            // 表格数据列表  
+            dataList: [],  
+            // 当前页索引  
+            pageIndex: 1,  
+            // 每页显示的数量  
+            pageSize: 10,  
+            // 数据总数  
+            totalCount: 0,  
+            // 数据加载状态  
+            dataListLoading: false,  
+            // 选中的数据列表  
+            dataListSelections: [],  
+            // 弹窗可见性  
+            addOrUpdateVisible: false  
+        }  
+    },  
+    components: {  
+        AddOrUpdate // 注册新增/修改组件  
+    },  
+    activated() {  
+        // 组件激活时获取数据列表  
+        this.getDataList()  
+    },  
+    methods: {  
+        // 获取数据列表  
+        getDataList() {  
+            this.dataListLoading = true // 设置加载状态  
+            this.$http({  
+                url: this.$http.adornUrl('/sys/role/list'), // API接口地址  
+                method: 'get', // HTTP请求方法  
+                params: this.$http.adornParams({  
+                    'page': this.pageIndex, // 当前页  
+                    'limit': this.pageSize, // 每页数量  
+                    'roleName': this.dataForm.roleName // 角色名称过滤  
+                })  
+            }).then(({ data }) => {  
+                if (data && data.code === 200) {  
+                    // 成功获取数据  
+                    this.dataList = data.page.list // 更新数据列表  
+                    this.totalCount = data.page.totalCount // 更新总数量  
+                } else {  
+                    // 获取数据失败  
+                    this.dataList = []  
+                    this.totalCount = 0  
+                }  
+                this.dataListLoading = false // 重置加载状态  
+            })  
+        },  
+        // 每页数量变化处理  
+        sizeChangeHandle(val) {  
+            this.pageSize = val // 更新每页数量  
+            this.pageIndex = 1 // 重置为第一页  
+            this.getDataList() // 再次获取数据列表  
+        },  
+        // 当前页变化处理  
+        currentChangeHandle(val) {  
+            this.pageIndex = val // 更新当前页  
+            this.getDataList() // 再次获取数据列表  
+        },  
+        // 选择变化处理  
+        selectionChangeHandle(val) {  
+            this.dataListSelections = val // 更新选中的数据  
+        },  
+        // 打开新增/修改弹窗  
+        addOrUpdateHandle(id) {  
+            this.addOrUpdateVisible = true // 显示弹窗  
+            this.$nextTick(() => {  
+                this.$refs.addOrUpdate.init(id) // 初始化弹窗（如果有ID则传入）  
+            })  
+        },  
+        // 删除处理  
+        deleteHandle(id) {  
+            // 确定要删除的ID（单个或多个）  
+            var ids = id ? [id] : this.dataListSelections.map(item => item.roleId)  
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {  
+                confirmButtonText: '确定',  
+                cancelButtonText: '取消',  
+                type: 'warning'  
+            }).then(() => {  
+                // 确认删除  
+                this.$http({  
+                    url: this.$http.adornUrl('/sys/role/delete'), // API接口地址  
+                    method: 'post', // HTTP请求方法  
+                    data: this.$http.adornData(ids, false) // 发送要删除的ID  
+                }).then(({ data }) => {  
+                    if (data && data.code === 200) {  
+                        // 删除成功  
+                        this.$message({  
+                            message: '操作成功',  
+                            type: 'success',  
+                            duration: 1500,  
+                            onClose: () => this.getDataList() // 删除成功后刷新数据列表  
+                        })  
+                    } else {  
+                        // 删除失败  
+                        this.$message.error(data.msg) // 显示错误信息  
+                    }  
+                })  
+            }).catch(() => { }) // 处理取消操作  
+        }  
+    }  
+}  
+</script>
\ No newline at end of file
diff --git a/src/views/modules/sys/user-add-or-update.vue b/src/views/modules/sys/user-add-or-update.vue
index 7db0c06e..df4336eb 100644
--- a/src/views/modules/sys/user-add-or-update.vue
+++ b/src/views/modules/sys/user-add-or-update.vue
@@ -1,177 +1,202 @@
-<template>
-    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
-        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-            <el-form-item label="用户名" prop="userName">
-                <el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input>
-            </el-form-item>
-            <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">
-                <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
-            </el-form-item>
-            <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">
-                <el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>
-            </el-form-item>
-            <el-form-item label="邮箱" prop="email">
-                <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>
-            </el-form-item>
-            <el-form-item label="手机号" prop="mobile">
-                <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>
-            </el-form-item>
-            <el-form-item label="角色" size="mini" prop="roleIdList">
-                <el-checkbox-group v-model="dataForm.roleIdList">
-                    <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>
-                </el-checkbox-group>
-            </el-form-item>
-            <el-form-item label="状态" size="mini" prop="status">
-                <el-radio-group v-model="dataForm.status">
-                    <el-radio :label="0">禁用</el-radio>
-                    <el-radio :label="1">正常</el-radio>
-                </el-radio-group>
-            </el-form-item>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="visible = false">取消</el-button>
-            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-        </span>
-    </el-dialog>
-</template>
+<template>  
+    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">  
+        <!-- 表单，使用dataForm作为模型，进行用户信息的新增或修改 -->  
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">  
+            <!-- 用户名输入框 -->  
+            <el-form-item label="用户名" prop="userName">  
+                <el-input v-model="dataForm.userName" placeholder="登录帐号"></el-input>  
+            </el-form-item>  
+            <!-- 密码输入框，若为新增则必填 -->  
+            <el-form-item label="密码" prop="password" :class="{ 'is-required': !dataForm.id }">  
+                <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>  
+            </el-form-item>  
+            <!-- 确认密码输入框，若为新增则必填 -->  
+            <el-form-item label="确认密码" prop="comfirmPassword" :class="{ 'is-required': !dataForm.id }">  
+                <el-input v-model="dataForm.comfirmPassword" type="password" placeholder="确认密码"></el-input>  
+            </el-form-item>  
+            <!-- 邮箱输入框 -->  
+            <el-form-item label="邮箱" prop="email">  
+                <el-input v-model="dataForm.email" placeholder="邮箱"></el-input>  
+            </el-form-item>  
+            <!-- 手机号输入框 -->  
+            <el-form-item label="手机号" prop="mobile">  
+                <el-input v-model="dataForm.mobile" placeholder="手机号"></el-input>  
+            </el-form-item>  
+            <!-- 角色选择 -->  
+            <el-form-item label="角色" size="mini" prop="roleIdList">  
+                <el-checkbox-group v-model="dataForm.roleIdList">  
+                    <el-checkbox v-for="role in roleList" :key="role.roleId" :label="role.roleId">{{ role.roleName }}</el-checkbox>  
+                </el-checkbox-group>  
+            </el-form-item>  
+            <!-- 状态选择 -->  
+            <el-form-item label="状态" size="mini" prop="status">  
+                <el-radio-group v-model="dataForm.status">  
+                    <el-radio :label="0">禁用</el-radio>  
+                    <el-radio :label="1">正常</el-radio>  
+                </el-radio-group>  
+            </el-form-item>  
+        </el-form>  
+        <!-- 对话框底部按钮 -->  
+        <span slot="footer" class="dialog-footer">  
+            <el-button @click="visible = false">取消</el-button>  
+            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>  
+        </span>  
+    </el-dialog>  
+</template>  
 
-<script>
-import { isEmail, isMobile } from '@/utils/validate'
-export default {
-    data() {
-        var validatePassword = (rule, value, callback) => {
-            if (!this.dataForm.id && !/\S/.test(value)) {
-                callback(new Error('密码不能为空'))
-            } else {
-                callback()
-            }
-        }
-        var validateComfirmPassword = (rule, value, callback) => {
-            if (!this.dataForm.id && !/\S/.test(value)) {
-                callback(new Error('确认密码不能为空'))
-            } else if (this.dataForm.password !== value) {
-                callback(new Error('确认密码与密码输入不一致'))
-            } else {
-                callback()
-            }
-        }
-        var validateEmail = (rule, value, callback) => {
-            if (!isEmail(value)) {
-                callback(new Error('邮箱格式错误'))
-            } else {
-                callback()
-            }
-        }
-        var validateMobile = (rule, value, callback) => {
-            if (!isMobile(value)) {
-                callback(new Error('手机号格式错误'))
-            } else {
-                callback()
-            }
-        }
-        return {
-            visible: false,
-            roleList: [],
-            dataForm: {
-                id: 0,
-                userName: '',
-                password: '',
-                comfirmPassword: '',
-                salt: '',
-                email: '',
-                mobile: '',
-                roleIdList: [],
-                status: 1
-            },
-            dataRule: {
-                userName: [
-                    { required: true, message: '用户名不能为空', trigger: 'blur' }
-                ],
-                password: [
-                    { validator: validatePassword, trigger: 'blur' }
-                ],
-                comfirmPassword: [
-                    { validator: validateComfirmPassword, trigger: 'blur' }
-                ],
-                email: [
-                    { required: true, message: '邮箱不能为空', trigger: 'blur' },
-                    { validator: validateEmail, trigger: 'blur' }
-                ],
-                mobile: [
-                    { required: true, message: '手机号不能为空', trigger: 'blur' },
-                    { validator: validateMobile, trigger: 'blur' }
-                ]
-            }
-        }
-    },
-    methods: {
-        init(id) {
-            this.dataForm.id = id || 0
-            this.$http({
-                url: this.$http.adornUrl('/sys/role/select'),
-                method: 'get',
-                params: this.$http.adornParams()
-            }).then(({ data }) => {
-                this.roleList = data && data.code === 200 ? data.list : []
-            }).then(() => {
-                this.visible = true
-                this.$nextTick(() => {
-                    this.$refs['dataForm'].resetFields()
-                })
-            }).then(() => {
-                if (this.dataForm.id) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),
-                        method: 'get',
-                        params: this.$http.adornParams()
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.dataForm.userName = data.user.username
-                            this.dataForm.salt = data.user.salt
-                            this.dataForm.email = data.user.email
-                            this.dataForm.mobile = data.user.mobile
-                            this.dataForm.roleIdList = data.user.roleIdList
-                            this.dataForm.status = data.user.status
-                        }
-                    })
-                }
-            })
-        },
-        // 表单提交
-        dataFormSubmit() {
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),
-                        method: 'post',
-                        data: this.$http.adornData({
-                            'userId': this.dataForm.id || undefined,
-                            'username': this.dataForm.userName,
-                            'password': this.dataForm.password,
-                            'salt': this.dataForm.salt,
-                            'email': this.dataForm.email,
-                            'mobile': this.dataForm.mobile,
-                            'status': this.dataForm.status,
-                            'roleIdList': this.dataForm.roleIdList
-                        })
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.$message({
-                                message: '操作成功',
-                                type: 'success',
-                                duration: 1500,
-                                onClose: () => {
-                                    this.visible = false
-                                    this.$emit('refreshDataList')
-                                }
-                            })
-                        } else {
-                            this.$message.error(data.msg)
-                        }
-                    })
-                }
-            })
-        }
-    }
-}
-</script>
+<script>  
+import { isEmail, isMobile } from '@/utils/validate' // 导入验证函数  
+
+export default {  
+    data() {  
+        // 表单验证规则  
+        var validatePassword = (rule, value, callback) => {  
+            if (!this.dataForm.id && !/\S/.test(value)) { // 如果是新增且密码为空  
+                callback(new Error('密码不能为空'))  
+            } else {  
+                callback() // 验证通过  
+            }  
+        }  
+        var validateComfirmPassword = (rule, value, callback) => {  
+            if (!this.dataForm.id && !/\S/.test(value)) { // 如果是新增且确认密码为空  
+                callback(new Error('确认密码不能为空'))  
+            } else if (this.dataForm.password !== value) { // 确认密码与密码不一致  
+                callback(new Error('确认密码与密码输入不一致'))  
+            } else {  
+                callback() // 验证通过  
+            }  
+        }  
+        // 验证邮箱格式  
+        var validateEmail = (rule, value, callback) => {  
+            if (!isEmail(value)) {  
+                callback(new Error('邮箱格式错误'))  
+            } else {  
+                callback() // 验证通过  
+            }  
+        }  
+        // 验证手机格式  
+        var validateMobile = (rule, value, callback) => {  
+            if (!isMobile(value)) {  
+                callback(new Error('手机号格式错误'))  
+            } else {  
+                callback() // 验证通过  
+            }  
+        }  
+        return {  
+            visible: false, // 控制对话框可见性  
+            roleList: [], // 角色列表  
+            // 表单数据  
+            dataForm: {  
+                id: 0, // 用户ID  
+                userName: '', // 用户名  
+                password: '', // 密码  
+                comfirmPassword: '', // 确认密码  
+                salt: '', // 盐值  
+                email: '', // 邮箱  
+                mobile: '', // 手机号  
+                roleIdList: [], // 角色ID列表  
+                status: 1 // 状态（1: 正常, 0: 禁用）  
+            },  
+            // 表单验证规则  
+            dataRule: {  
+                userName: [  
+                    { required: true, message: '用户名不能为空', trigger: 'blur' }  
+                ],  
+                password: [  
+                    { validator: validatePassword, trigger: 'blur' }  
+                ],  
+                comfirmPassword: [  
+                    { validator: validateComfirmPassword, trigger: 'blur' }  
+                ],  
+                email: [  
+                    { required: true, message: '邮箱不能为空', trigger: 'blur' },  
+                    { validator: validateEmail, trigger: 'blur' }  
+                ],  
+                mobile: [  
+                    { required: true, message: '手机号不能为空', trigger: 'blur' },  
+                    { validator: validateMobile, trigger: 'blur' }  
+                ]  
+            }  
+        }  
+    },  
+    methods: {  
+        // 初始化表单，加载角色列表和用户信息  
+        init(id) {  
+            this.dataForm.id = id || 0 // 设置用户ID  
+            // 获取角色列表  
+            this.$http({  
+                url: this.$http.adornUrl('/sys/role/select'),  
+                method: 'get',  
+                params: this.$http.adornParams() // 获取请求参数  
+            }).then(({ data }) => {  
+                this.roleList = data && data.code === 200 ? data.list : [] // 更新角色列表  
+            }).then(() => {  
+                this.visible = true // 显示对话框  
+                this.$nextTick(() => {  
+                    this.$refs['dataForm'].resetFields() // 重置表单  
+                })  
+            }).then(() => {  
+                // 如果为修改状态，则加载用户信息  
+                if (this.dataForm.id) {  
+                    this.$http({  
+                        url: this.$http.adornUrl(`/sys/user/info/${this.dataForm.id}`),  
+                        method: 'get',  
+                        params: this.$http.adornParams()  
+                    }).then(({ data }) => {  
+                        if (data && data.code === 200) {  
+                            // 填充表单数据  
+                                                        this.dataForm.userName = data.user.username // 设置用户名  
+                            this.dataForm.salt = data.user.salt // 设置盐值（如果需要，这部分可以在保存时再使用）  
+                            this.dataForm.email = data.user.email // 设置邮箱  
+                            this.dataForm.mobile = data.user.mobile // 设置手机号  
+                            this.dataForm.roleIdList = data.user.roleIdList // 设置角色ID列表  
+                            this.dataForm.status = data.user.status // 设置用户状态  
+                        }  
+                    })  
+                }  
+            })  
+        },  
+        // 表单提交处理  
+        dataFormSubmit() {  
+            // 验证表单  
+            this.$refs['dataForm'].validate((valid) => {  
+                if (valid) { // 如果表单验证通过  
+                    this.$http({  
+                        // 根据是否存在ID选择保存或更新接口  
+                        url: this.$http.adornUrl(`/sys/user/${!this.dataForm.id ? 'save' : 'update'}`),  
+                        method: 'post',  
+                        data: this.$http.adornData({  
+                            // 提交表单数据  
+                            'userId': this.dataForm.id || undefined,  
+                            'username': this.dataForm.userName,  
+                            'password': this.dataForm.password,  
+                            'salt': this.dataForm.salt,  
+                            'email': this.dataForm.email,  
+                            'mobile': this.dataForm.mobile,  
+                            'status': this.dataForm.status,  
+                            'roleIdList': this.dataForm.roleIdList  
+                        })  
+                    }).then(({ data }) => {  
+                        // 处理接口返回的数据  
+                        if (data && data.code === 200) {  
+                            // 操作成功的提示  
+                            this.$message({  
+                                message: '操作成功',  
+                                type: 'success',  
+                                duration: 1500,  
+                                onClose: () => {  
+                                    this.visible = false // 关闭对话框  
+                                    this.$emit('refreshDataList') // 触发刷新数据列表事件  
+                                }  
+                            })  
+                        } else {  
+                            // 操作失败的提示  
+                            this.$message.error(data.msg) // 显示错误信息  
+                        }  
+                    })  
+                }  
+            })  
+        }  
+    }  
+}  
+</script>
\ No newline at end of file
diff --git a/src/views/modules/sys/user.vue b/src/views/modules/sys/user.vue
index 6454a769..a63cec29 100644
--- a/src/views/modules/sys/user.vue
+++ b/src/views/modules/sys/user.vue
@@ -1,140 +1,168 @@
-<template>
-    <div class="mod-user">
-        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-            <el-form-item>
-                <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="getDataList()">查询</el-button>
-                <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-                <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
-            </el-form-item>
-        </el-form>
-        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
-            <el-table-column type="selection" header-align="center" align="center" width="50">
-            </el-table-column>
-            <el-table-column prop="userId" header-align="center" align="center" width="80" label="ID">
-            </el-table-column>
-            <el-table-column prop="username" header-align="center" align="center" label="用户名">
-            </el-table-column>
-            <el-table-column prop="email" header-align="center" align="center" label="邮箱">
-            </el-table-column>
-            <el-table-column prop="mobile" header-align="center" align="center" label="手机号">
-            </el-table-column>
-            <el-table-column prop="status" header-align="center" align="center" label="状态">
-                <template slot-scope="scope">
-                    <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
-                    <el-tag v-else size="small">正常</el-tag>
-                </template>
-            </el-table-column>
-            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
-                <template slot-scope="scope">
-                    <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>
-                    <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
-        </el-pagination>
-        <!-- 弹窗, 新增 / 修改 -->
-        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
-    </div>
-</template>
+<template>  
+    <div class="mod-user">  
+        <!-- 搜索表单 -->  
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">  
+            <el-form-item>  
+                <!-- 用户名输入框 -->  
+                <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>  
+            </el-form-item>  
+            <el-form-item>  
+                <!-- 查询按钮 -->  
+                <el-button @click="getDataList()">查询</el-button>  
+                <!-- 新增按钮，只有在有权限时显示 -->  
+                <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>  
+                <!-- 批量删除按钮，只有在有权限时显示，并且在没有选择项时禁用 -->  
+                <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>  
+            </el-form-item>  
+        </el-form>  
+        
+        <!-- 用户数据表格 -->  
+        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">  
+            <!-- 选择框列 -->  
+            <el-table-column type="selection" header-align="center" align="center" width="50">  
+            </el-table-column>  
+            <!-- ID列 -->  
+            <el-table-column prop="userId" header-align="center" align="center" width="80" label="ID">  
+            </el-table-column>  
+            <!-- 用户名列 -->  
+            <el-table-column prop="username" header-align="center" align="center" label="用户名">  
+            </el-table-column>  
+            <!-- 邮箱列 -->  
+            <el-table-column prop="email" header-align="center" align="center" label="邮箱">  
+            </el-table-column>  
+            <!-- 手机号列 -->  
+            <el-table-column prop="mobile" header-align="center" align="center" label="手机号">  
+            </el-table-column>  
+            <!-- 状态列 -->  
+            <el-table-column prop="status" header-align="center" align="center" label="状态">  
+                <template slot-scope="scope">  
+                    <el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>  
+                    <el-tag v-else size="small">正常</el-tag>  
+                </template>  
+            </el-table-column>  
+            <!-- 操作列 -->  
+            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">  
+                <template slot-scope="scope">  
+                    <!-- 修改按钮，只有在有权限时显示 -->  
+                    <el-button v-if="isAuth('sys:user:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.userId)">修改</el-button>  
+                    <!-- 删除按钮，只有在有权限时显示 -->  
+                    <el-button v-if="isAuth('sys:user:delete')" type="text" size="small" @click="deleteHandle(scope.row.userId)">删除</el-button>  
+                </template>  
+            </el-table-column>  
+        </el-table>  
+        
+        <!-- 分页组件 -->  
+        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">  
+        </el-pagination>  
+        
+        <!-- 弹窗，用于新增或修改用户 -->  
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>  
+    </div>  
+</template>  
 
-<script>
-import AddOrUpdate from './user-add-or-update'
-export default {
-    data() {
-        return {
-            dataForm: {
-                userName: ''
-            },
-            dataList: [],
-            pageIndex: 1,
-            pageSize: 10,
-            totalCount: 0,
-            dataListLoading: false,
-            dataListSelections: [],
-            addOrUpdateVisible: false
-        }
-    },
-    components: {
-        AddOrUpdate
-    },
-    activated() {
-        this.getDataList()
-    },
-    methods: {
-        // 获取数据列表
-        getDataList() {
-            this.dataListLoading = true
-            this.$http({
-                url: this.$http.adornUrl('/sys/user/list'),
-                method: 'get',
-                params: this.$http.adornParams({
-                    'page': this.pageIndex,
-                    'limit': this.pageSize,
-                    'username': this.dataForm.userName
-                })
-            }).then(({ data }) => {
-                if (data && data.code === 200) {
-                    this.dataList = data.page.list
-                    this.totalCount = data.page.totalCount
-                } else {
-                    this.dataList = []
-                    this.totalCount = 0
-                }
-                this.dataListLoading = false
-            })
-        },
-        // 每页数
-        sizeChangeHandle(val) {
-            this.pageSize = val
-            this.pageIndex = 1
-            this.getDataList()
-        },
-        // 当前页
-        currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
-        },
-        // 多选
-        selectionChangeHandle(val) {
-            this.dataListSelections = val
-        },
-        // 新增 / 修改
-        addOrUpdateHandle(id) {
-            this.addOrUpdateVisible = true
-            this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(id)
-            })
-        },
-        // 删除
-        deleteHandle(id) {
-            var userIds = id ? [id] : this.dataListSelections.map(item => item.userId)
-            this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-                this.$http({
-                    url: this.$http.adornUrl('/sys/user/delete'),
-                    method: 'post',
-                    data: this.$http.adornData(userIds, false)
-                }).then(({ data }) => {
-                    if (data && data.code === 200) {
-                        this.$message({
-                            message: '操作成功',
-                            type: 'success',
-                            duration: 1500,
-                            onClose: () => this.getDataList()
-                        })
-                    } else {
-                        this.$message.error(data.msg)
-                    }
-                })
-            }).catch(() => { })
-        }
-    }
-}
-</script>
+<script>  
+import AddOrUpdate from './user-add-or-update' // 导入新增/修改用户组件  
+
+export default {  
+    data() {  
+        return {  
+            dataForm: {  
+                userName: '' // 搜索表单数据  
+            },  
+            dataList: [], // 用户数据列表  
+            pageIndex: 1, // 当前页码  
+            pageSize: 10, // 每页显示条数  
+            totalCount: 0, // 总记录数  
+            dataListLoading: false, // 数据加载状态  
+            dataListSelections: [], // 选中的用户列表  
+            addOrUpdateVisible: false // 控制新增/修改弹窗的可见性  
+        }  
+    },  
+    components: {  
+        AddOrUpdate // 注册新增/修改用户组件  
+    },  
+    activated() {  
+        this.getDataList() // 组件激活时获取用户数据列表  
+    },  
+    methods: {  
+        // 获取用户数据列表  
+        getDataList() {  
+            this.dataListLoading = true // 设置加载状态为true  
+            this.$http({  
+                url: this.$http.adornUrl('/sys/user/list'), // 获取用户列表的API地址  
+                method: 'get',  
+                params: this.$http.adornParams({  
+                    'page': this.pageIndex, // 当前页码  
+                    'limit': this.pageSize, // 每页显示条数  
+                    'username': this.dataForm.userName // 用户名搜索条件  
+                })  
+            }).then(({ data }) => {  
+                if (data && data.code === 200) {  
+                    // 请求成功，更新用户数据列表和总记录数  
+                    this.dataList = data.page.list  
+                    this.totalCount = data.page.totalCount  
+                } else {  
+                    // 请求失败，清空数据列表  
+                    this.dataList = []  
+                    this.totalCount = 0  
+                }  
+                this.dataListLoading = false // 设置加载状态为false  
+            })  
+        },  
+        // 每页数变化处理  
+        sizeChangeHandle(val) {  
+            this.pageSize = val // 更新每页显示条数  
+            this.pageIndex = 1 // 重置为第一页  
+            this.getDataList() // 重新获取数据列表  
+        },  
+        // 当前页变化处理  
+        currentChangeHandle(val) {  
+            this.pageIndex = val // 更新当前页码  
+            this.getDataList() // 重新获取数据列表  
+        },  
+        // 多选处理  
+        selectionChangeHandle(val) {  
+            this.dataListSelections = val // 更新选中的用户列表  
+        },  
+        // 新增或修改用户处理  
+        addOrUpdateHandle(id) {  
+            this.addOrUpdateVisible = true // 显示新增/修改弹窗  
+            this.$nextTick(() => {  
+                this.$refs.addOrUpdate.init(id) // 初始化弹窗（传入用户ID）  
+            })  
+        },  
+        // 删除用户处理  
+        deleteHandle(id) {  
+            // 确定要删除的用户ID（单个或多个）  
+            var userIds = id ? [id] : this.dataListSelections.map(item => item.userId)  
+            this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {  
+                confirmButtonText: '确定',  
+                cancelButtonText: '取消',  
+                type: 'warning'  
+            }).then(() => {  
+                // 确认删除  
+                this.$http({  
+                    url: this.$http.adornUrl('/sys/user/delete'), // 删除用户的API地址  
+                    method: 'post',  
+                    data: this.$http.adornData(userIds, false) // 发送要删除的用户ID  
+                }).then(({ data }) => {  
+                    if (data && data.code === 200) {  
+                        // 删除成功  
+                        this.$message({  
+                            message: '操作成功',  
+                            type: 'success',  
+                            duration: 1500,  
+                            onClose: () => this.getDataList() // 关闭提示时重新获取数据列表  
+                        })  
+                    } else {  
+                        // 删除失败，显示错误信息  
+                        this.$message.error(data.msg)  
+                    }  
+                })  
+            }).catch(() => {   
+                // 取消删除操作的处理逻辑（空）  
+            })  
+        }  
+    }  
+}  
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/account/wx-account-access-info.vue b/src/views/modules/wx/account/wx-account-access-info.vue
index fb1f853e..6ee96b14 100644
--- a/src/views/modules/wx/account/wx-account-access-info.vue
+++ b/src/views/modules/wx/account/wx-account-access-info.vue
@@ -1,54 +1,63 @@
-<template>
-    <el-dialog title="开发接入信息" :close-on-click-modal="false" :visible.sync="visible">
-        <div>
-            <div class="list-item"><span class="label">公众号:</span>{{account.name}}</div>
-            <div class="list-item"><span class="label">token:</span>{{account.token}}</div>
-            <div class="list-item"><span class="label">aesKey:</span>{{account.aesKey}}</div>
-            <div class="list-item">
-                <span class="label">接入链接:</span>
-                <span v-html="accessUrl"></span>
-            </div>
-            
-        </div>
-    </el-dialog>
-</template>
+<template>  
+    <!-- 开发接入信息对话框 -->  
+    <el-dialog title="开发接入信息" :close-on-click-modal="false" :visible.sync="visible">  
+        <div>  
+            <!-- 公众号信息 -->  
+            <div class="list-item"><span class="label">公众号:</span>{{account.name}}</div>  
+            <!-- token 信息 -->  
+            <div class="list-item"><span class="label">token:</span>{{account.token}}</div>  
+            <!-- aesKey 信息 -->  
+            <div class="list-item"><span class="label">aesKey:</span>{{account.aesKey}}</div>  
+            <!-- 接入链接 -->  
+            <div class="list-item">  
+                <span class="label">接入链接:</span>  
+                <span v-html="accessUrl"></span> <!-- 使用 v-html 渲染动态生成的接入链接 -->  
+            </div>  
+        </div>  
+    </el-dialog>  
+</template>  
 
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            account: {},
-        }
-    },
-    computed: {
-        accessUrl() {
-            let host = location.host;
-            if(/^(\d(.\d){3})|localhost/.test(host)){
-                host='<span class="text-red">正式域名</span>'
-            }
-            return location.protocol + '//' + host + '/wx/wx/msg/' + this.account.appid
-        }
-    },
-    methods: {
-        init(item) {
-            this.visible = true
-            if (item && item.appid) {
-                this.account = item
-            }
-        },
-    }
-}
-</script>
-<style scoped>
-.list-item{
-    line-height: 30px;
-}
-.label{
-    width: 100px;
-    display: inline-block;
-    margin-right: 10px;
-    font-weight: bold;
-    text-align: right;
-}
-</style>
+<script>  
+export default {  
+    data() {  
+        return {  
+            visible: false, // 控制对话框的可见状态  
+            account: {}, // 存储公众号的相关信息  
+        }  
+    },  
+    computed: {  
+        // 计算生成接入链接  
+        accessUrl() {  
+            let host = location.host; // 获取当前主机名  
+            // 检查主机名是否是 IP 或 localhost  
+            if(/^(\d(.\d){3})|localhost/.test(host)){  
+                host='<span class="text-red">正式域名</span>' // 如果是 IP 或 localhost，返回红色字体提示  
+            }  
+            // 返回完整的接入链接  
+            return location.protocol + '//' + host + '/wx/wx/msg/' + this.account.appid  
+        }  
+    },  
+    methods: {  
+        // 初始化对话框，设置可见状态和账户信息  
+        init(item) {  
+            this.visible = true // 设置对话框为可见  
+            if (item && item.appid) {  
+                this.account = item // 如果传入的项目包含 appid，则将其赋值给 account  
+            }  
+        },  
+    }  
+}  
+</script>  
+
+<style scoped>  
+.list-item{  
+    line-height: 30px; /* 每一项的行高 */  
+}  
+.label{  
+    width: 100px; /* 标签的宽度 */  
+    display: inline-block; /* 使标签在每行中内联显示 */  
+    margin-right: 10px; /* 标签与内容之间的右边距 */  
+    font-weight: bold; /* 标签加粗 */  
+    text-align: right; /* 标签文本右对齐 */  
+}  
+</style>
\ No newline at end of file
diff --git a/src/views/modules/wx/account/wx-account-add-or-update.vue b/src/views/modules/wx/account/wx-account-add-or-update.vue
index 27090997..dc23c56d 100644
--- a/src/views/modules/wx/account/wx-account-add-or-update.vue
+++ b/src/views/modules/wx/account/wx-account-add-or-update.vue
@@ -1,118 +1,145 @@
-<template>
-  <el-dialog
-    title="新增/修改"
-    :close-on-click-modal="false"
-    :visible.sync="visible">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
-    <el-form-item label="公众号名称" prop="name">
-      <el-input v-model="dataForm.name" placeholder="公众号名称"></el-input>
-    </el-form-item>
-    <div class="padding text-gray">测试号可选择服务号，不同类型账号、是否认证可使用功能权限不同，<a href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html">参考文档</a></div>
-    <el-row>
-        <el-col :span="12">
-            <el-form-item label="公众号类型" prop="type">
-                <el-select v-model="dataForm.type" placeholder="公众号类型">
-                    <el-option v-for="(name,key) in ACCOUNT_TYPES" :key="name" :label="name" :value="key"></el-option>
-                </el-select>
-            </el-form-item>
-        </el-col>
-        <el-col :span="12">
-            <el-form-item label="是否认证" prop="verified">
-                <el-switch v-model="dataForm.verified" placeholder="是否认证"></el-switch>
-            </el-form-item>
-        </el-col>
-    </el-row>
+<template>  
+  <!-- 新增/修改对话框 -->  
+  <el-dialog  
+    title="新增/修改"  
+    :close-on-click-modal="false"  
+    :visible.sync="visible">  
     
-    <el-form-item label="appid" prop="appid">
-      <el-input v-model="dataForm.appid" placeholder="appid"></el-input>
-    </el-form-item>
-    <el-form-item label="appsecret" prop="secret">
-      <el-input v-model="dataForm.secret" placeholder="appsecret"></el-input>
-    </el-form-item>
-    <el-form-item label="token" prop="token">
-      <el-input v-model="dataForm.token" placeholder="token"></el-input>
-    </el-form-item>
-    <el-form-item label="aesKey" prop="aesKey">
-      <el-input v-model="dataForm.aesKey" placeholder="aesKey，可为空"></el-input>
-    </el-form-item>
-    </el-form>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-  export default {
-    data () {
-      return {
-        visible: false,
-        dataForm: {  
-          appid: '',
-          name: '',
-          type:'2',
-          verified:true,
-          secret: '',
-          token: 'my_weixin_token_',
-          aesKey: ''
-        },
-        dataRule: {
-          name: [
-            { required: true, message: '公众号名称不能为空', trigger: 'blur' }
-          ],
-          appid: [
-            { required: true, message: 'appid不能为空', trigger: 'blur' }
-          ],
-          secret: [
-            { required: true, message: 'appsecret不能为空', trigger: 'blur' }
-          ]
-        }
-      }
-    },
-    computed: mapState({
-        ACCOUNT_TYPES: state=>state.wxAccount.ACCOUNT_TYPES
-    }),
-    methods: {
-      init (item) {
-        this.visible = true
-        if(item && item.appid){
-            this.dataForm = item
-            this.dataForm.type = item.type+''
-        }else{
-            this.$nextTick(() => {
-                this.$refs['dataForm'].resetFields()
-            })
-        }
+    <!-- 表单区域 -->  
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">  
+      
+      <!-- 公众号名称输入 -->  
+      <el-form-item label="公众号名称" prop="name">  
+        <el-input v-model="dataForm.name" placeholder="公众号名称"></el-input>  
+      </el-form-item>  
+      
+      <!-- 提示信息 -->  
+      <div class="padding text-gray">测试号可选择服务号，不同类型账号、是否认证可使用功能权限不同，<a href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html">参考文档</a></div>  
+      
+      <el-row>  
+        <el-col :span="12">  
+          <!-- 公众号类型选择 -->  
+          <el-form-item label="公众号类型" prop="type">  
+            <el-select v-model="dataForm.type" placeholder="公众号类型">  
+              <el-option v-for="(name,key) in ACCOUNT_TYPES" :key="name" :label="name" :value="key"></el-option>  
+            </el-select>  
+          </el-form-item>  
+        </el-col>  
         
-      },
-      // 表单提交
-      dataFormSubmit () {
-        this.$refs['dataForm'].validate((valid) => {
-          if (valid) {
-            this.$http({
-              url: this.$http.adornUrl(`/manage/wxAccount/save`),
-              method: 'post',
-           data: this.$http.adornData(this.dataForm)
-            }).then(({data}) => {
-              if (data && data.code === 200) {
-                this.$message({
-                  message: '操作成功',
-                  type: 'success',
-                  duration: 1500,
-                  onClose: () => {
-                    this.visible = false
-                    this.$emit('refreshDataList')
-                  }
-                })
-              } else {
-                this.$message.error(data.msg)
-              }
-            })
-          }
-        })
-      }
-    }
-  }
-</script>
+        <el-col :span="12">  
+          <!-- 是否认证开关 -->  
+          <el-form-item label="是否认证" prop="verified">  
+            <el-switch v-model="dataForm.verified" placeholder="是否认证"></el-switch>  
+          </el-form-item>  
+        </el-col>  
+      </el-row>  
+      
+      <!-- appid 输入 -->  
+      <el-form-item label="appid" prop="appid">  
+        <el-input v-model="dataForm.appid" placeholder="appid"></el-input>  
+      </el-form-item>  
+      
+      <!-- appsecret 输入 -->  
+      <el-form-item label="appsecret" prop="secret">  
+        <el-input v-model="dataForm.secret" placeholder="appsecret"></el-input>  
+      </el-form-item>  
+      
+      <!-- token 输入 -->  
+      <el-form-item label="token" prop="token">  
+        <el-input v-model="dataForm.token" placeholder="token"></el-input>  
+      </el-form-item>  
+      
+      <!-- aesKey 输入 -->  
+      <el-form-item label="aesKey" prop="aesKey">  
+        <el-input v-model="dataForm.aesKey" placeholder="aesKey，可为空"></el-input>  
+      </el-form-item>  
+      
+    </el-form>  
+    
+    <!-- 对话框底部按钮 -->  
+    <span slot="footer" class="dialog-footer">  
+      <el-button @click="visible = false">取消</el-button>  
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>  
+    </span>  
+  </el-dialog>  
+</template>  
+
+<script>  
+import { mapState } from 'vuex' // 从 Vuex 导入 mapState 方法以映射状态  
+
+export default {  
+    data () {  
+      return {  
+        visible: false, // 控制对话框的可见状态  
+        dataForm: { // 用于保存表单数据  
+          appid: '',  
+          name: '',  
+          type:'2', // 默认类型  
+          verified: true, // 默认是否认证为 true  
+          secret: '',  
+          token: 'my_weixin_token_', // 默认token  
+          aesKey: '' // aesKey，可为空  
+        },  
+        dataRule: { // 表单验证规则  
+          name: [  
+            { required: true, message: '公众号名称不能为空', trigger: 'blur' } // 公众号名称必填  
+          ],  
+          appid: [  
+            { required: true, message: 'appid不能为空', trigger: 'blur' } // appid必填  
+          ],  
+          secret: [  
+            { required: true, message: 'appsecret不能为空', trigger: 'blur' } // appsecret必填  
+          ]  
+        }  
+      }  
+    },  
+    computed: mapState({  
+        ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES // 从 store 中获取账号类型  
+    }),  
+    methods: {  
+      // 初始化对话框，设置可见状态和表单数据  
+      init (item) {  
+        this.visible = true // 显示对话框  
+        if(item && item.appid) {  
+            this.dataForm = item // 设置表单数据为传入的项  
+            this.dataForm.type = item.type + '' // 将类型转换为字符串  
+        } else {  
+            // 重置表单字段  
+            this.$nextTick(() => {  
+                this.$refs['dataForm'].resetFields()  
+            })  
+        }  
+      },  
+      // 表单提交处理  
+      dataFormSubmit () {  
+        // 验证表单  
+        this.$refs['dataForm'].validate((valid) => {  
+          if (valid) {  
+            // 发送 POST 请求保存数据  
+            this.$http({  
+              url: this.$http.adornUrl(`/manage/wxAccount/save`), // 请求的 URL  
+              method: 'post',  
+              data: this.$http.adornData(this.dataForm) // 使用 adornData 方法处理数据  
+            }).then(({data}) => {  
+              if (data && data.code === 200) {  
+                // 操作成功，显示成功消息并关闭对话框  
+                this.$message({  
+                  message: '操作成功',  
+                  type: 'success',  
+                  duration: 1500,  
+                  onClose: () => {  
+                    this.visible = false // 隐藏对话框  
+                    this.$emit('refreshDataList') // 触发刷新数据列表事件  
+                  }  
+                })  
+              } else {  
+                // 操作失败，显示错误消息  
+                this.$message.error(data.msg)  
+              }  
+            })  
+          }  
+        })  
+      }  
+    }  
+}  
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/article-add-or-update.vue b/src/views/modules/wx/article-add-or-update.vue
index f400a3a8..ada31ed7 100644
--- a/src/views/modules/wx/article-add-or-update.vue
+++ b/src/views/modules/wx/article-add-or-update.vue
@@ -1,68 +1,101 @@
 <template>
+    <!-- 根据visible属性的值控制整个组件内容的显示与隐藏，当visible为true时显示 -->
     <div v-show="visible">
+        <!-- 定义一个表单，绑定了dataForm数据模型，使用了dataRule验证规则，设置了表单尺寸为迷你型，标签宽度为80px -->
         <el-form :model="dataForm" :rules="dataRule" ref="dataForm" size="mini" label-width="80px">
+            <!-- 第一行布局，使用el-row包裹 -->
             <el-row>
+                <!-- 占12列，用于放置文章标题相关的表单元素 -->
                 <el-col :span="12">
+                    <!-- 文章标题的表单项，设置了必填验证，对应dataForm中的title属性 -->
                     <el-form-item label="文章标题" prop="title" required>
+                        <!-- 使用el-input组件实现输入框，双向绑定dataForm.title，设置了最大长度为1024，有占位提示文字 -->
                         <el-input v-model="dataForm.title" :maxlength="1024" placeholder="标题"></el-input>
                     </el-form-item>
                 </el-col>
+                <!-- 同样占12列，用于放置文章类型相关的表单元素 -->
                 <el-col :span="12">
+                    <!-- 文章类型的表单项，设置了必填验证，对应dataForm中的type属性 -->
                     <el-form-item label="文章类型" prop="type" required>
+                        <!-- 使用el-select组件实现下拉选择框，双向绑定dataForm.type，有占位提示文字 -->
                         <el-select v-model="dataForm.type" placeholder="选择文章类型">
+                            <!-- 循环遍历ARTICLE_TYPES对象，生成下拉选项，选项的标签显示为name，值为key，允许用户创建新的选项 -->
                             <el-option v-for="(name,key) in ARTICLE_TYPES" :key="name" :label="name" :value="key" allow-create></el-option>
                         </el-select>
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 第二行布局 -->
             <el-row>
+                <!-- 占12列，用于放置一级目录相关的表单元素 -->
                 <el-col :span="12">
+                    <!-- 一级目录的表单项，对应dataForm中的category属性 -->
                     <el-form-item label="一级目录" prop="category">
+                        <!-- 使用el-input组件实现输入框，双向绑定dataForm.category，设置了最大长度为50，有占位提示文字 -->
                         <el-input :maxlength="50" v-model="dataForm.category" placeholder="一级目录"></el-input>
                     </el-form-item>
                 </el-col>
+                <!-- 占12列，用于放置二级分类相关的表单元素 -->
                 <el-col :span="12">
+                    <!-- 二级分类的表单项，对应dataForm中的subCategory属性 -->
                     <el-form-item label="二级分类" prop="subCategory">
+                        <!-- 使用el-input组件实现输入框，双向绑定dataForm.subCategory，设置了最大长度为50，有占位提示文字 -->
                         <el-input :maxlength="50" v-model="dataForm.subCategory" placeholder="二级目录"></el-input>
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 指向外链的表单项，对应dataForm中的targetLink属性 -->
             <el-form-item label="指向外链" prop="targetLink">
+                <!-- 使用el-input组件实现输入框，双向绑定dataForm.targetLink，有占位提示文字 -->
                 <el-input v-model="dataForm.targetLink" placeholder="指向外链"></el-input>
             </el-form-item>
+            <!-- 摘要的表单项，对应dataForm中的summary属性 -->
             <el-form-item label="摘要" prop="summary">
+                <!-- 使用el-input组件实现文本域输入框，双向绑定dataForm.summary，设置了行数为3，最大长度为512，显示字数限制提示 -->
                 <el-input v-model="dataForm.summary" placeholder="摘要" type="textarea" rows="3" maxlength="512" show-word-limit></el-input>
             </el-form-item>
+            <!-- 标签的表单项，使用了自定义的tags-editor组件，双向绑定dataForm.tags -->
             <el-form-item label="标签" prop="tags">
                 <tags-editor v-model="dataForm.tags"></tags-editor>
             </el-form-item>
+            <!-- 封面图的表单项，对应dataForm中的image属性 -->
             <el-form-item label="封面图" prop="image">
+                <!-- 使用el-input组件实现输入框，双向绑定dataForm.image，有占位提示文字 -->
                 <el-input v-model="dataForm.image" placeholder="图片链接">
+                    <!-- 插入一个自定义的OssUploader组件，用于上传图片，上传成功后将返回值赋给dataForm.image -->
                     <OssUploader slot="append" @uploaded="dataForm.image=$event"></OssUploader>
                 </el-input>
             </el-form-item>
+            <!-- 引入一个富文本编辑器组件，双向绑定dataForm.content -->
             <tinymce-editor ref="editor" v-model="dataForm.content"></tinymce-editor>
         </el-form>
+        <!-- 距离顶部有一定间距，靠右对齐的按钮区域 -->
         <div class="margin-top text-right">
+            <!-- 取消按钮，点击时通过$emit触发父组件的hide事件 -->
             <el-button @click="$emit('hide')">取消</el-button>
+            <!-- 确定按钮，类型为主要按钮，点击时调用dataFormSubmit方法进行表单提交 -->
             <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
         </div>
     </div>
 </template>
 
 <script>
+// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
 import { mapState } from 'vuex'
 export default {
-    name:'article-add-or-update',
+    name: 'article-add-or-update',
     components: {
+        // 异步加载TinymceEditor组件，应该是用于编辑文章内容的富文本编辑器组件
         TinymceEditor: () => import("@/components/tinymce-editor"),
+        // 异步加载tags-editor组件，用于编辑文章标签
         tagsEditor: () => import("@/components/tags-editor"),
+        // 异步加载OssUploader组件，用于上传图片（可能是上传到OSS存储服务）
         OssUploader: () => import('../oss/oss-uploader')
     },
-    props:{
-        visible:{
-            type:Boolean,
-            default:false
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -94,37 +127,45 @@ export default {
         };
     },
     computed: mapState({
-        ARTICLE_TYPES: state=>state.article.ARTICLE_TYPES
+        // 从Vuex的state中获取article模块下的ARTICLE_TYPES状态，映射到组件的计算属性中，用于文章类型下拉框的选项数据
+        ARTICLE_TYPES: state => state.article.ARTICLE_TYPES
     }),
     methods: {
         init(id) {
+            // 初始化时设置dataForm的id属性，传入的id为空字符串则设置为空，否则使用传入的值
             this.dataForm.id = id || "";
             this.$nextTick(() => {
+                // 表单DOM更新后，重置表单所有字段的值
                 this.$refs["dataForm"].resetFields();
                 if (id > 0) {
+                    // 如果传入的id大于0，表示是编辑已有文章，发起HTTP请求获取文章详情信息
                     this.$http({
                         url: this.$http.adornUrl(`/manage/article/info/${this.dataForm.id}`),
                         method: "get",
                         params: this.$http.adornParams()
                     }).then(({ data }) => {
                         if (data && data.code === 200) {
-                            this.dataForm=data.article;
+                            // 如果请求成功，将返回的文章数据赋值给dataForm，同时将文章类型转为字符串类型（可能原数据类型不一致）
+                            this.dataForm = data.article;
                             this.dataForm.type = data.article.type + "";
                         }
                     });
                 }
             });
         },
-        // 表单提交
+        // 表单提交方法
         dataFormSubmit() {
+            // 对表单进行验证，验证结果通过回调函数的参数valid返回
             this.$refs["dataForm"].validate(valid => {
                 if (valid) {
+                    // 如果表单验证通过，发起HTTP请求保存文章数据（可能是新增或更新操作，根据后端接口逻辑）
                     this.$http({
                         url: this.$http.adornUrl(`/manage/article/save`),
                         method: "post",
                         data: this.$http.adornData(this.dataForm)
                     }).then(({ data }) => {
                         if (data && data.code === 200) {
+                            // 如果保存成功，弹出成功提示信息，提示框关闭后通过$emit触发父组件的refreshDataList和hide事件
                             this.$message({
                                 message: "操作成功",
                                 type: "success",
@@ -135,6 +176,7 @@ export default {
                                 }
                             });
                         } else {
+                            // 如果保存失败，弹出错误提示信息
                             this.$message.error(data.msg);
                         }
                     });
@@ -144,12 +186,14 @@ export default {
         imgUploadSuccess(response, file, fileList) {
             console.log(response);
             if (response.code == 200) {
+                // 如果图片上传成功（根据返回数据的状态码判断），将返回的图片数据赋值给dataForm.image
                 this.dataForm.image = response.data;
                 console.log("this.article", this.article);
             } else {
+                // 如果上传失败，弹出警告提示信息
                 this.$message.warning(response.msg);
             }
         }
     }
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/article.vue b/src/views/modules/wx/article.vue
index 076d1606..20792861 100644
--- a/src/views/modules/wx/article.vue
+++ b/src/views/modules/wx/article.vue
@@ -1,37 +1,56 @@
 <template>
+    <!-- 外层容器div -->
     <div>
+        <!-- 根据条件控制显示内容，当addOrUpdateVisible为false时显示以下部分 -->
         <div v-show="!addOrUpdateVisible">
+            <!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
             <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+                <!-- 文章类型选择的表单项 -->
                 <el-form-item>
+                    <!-- 使用el-select组件实现下拉选择框，双向绑定dataForm.type，有占位提示文字，选项通过循环ARTICLE_TYPES生成 -->
                     <el-select v-model="dataForm.type" placeholder="选择文章类型">
                         <el-option v-for="(name,key) in ARTICLE_TYPES" :key="key" :label="name" :value="key" allow-create></el-option>
                     </el-select>
                 </el-form-item>
+                <!-- 文章标题输入的表单项，使用el-input组件，双向绑定dataForm.title，有占位提示文字且可清空输入内容 -->
                 <el-form-item>
                     <el-input v-model="dataForm.title" placeholder="标题" clearable></el-input>
                 </el-form-item>
+                <!-- 操作按钮所在的表单项 -->
                 <el-form-item>
+                    <!-- 查询按钮，点击时先将当前页码设置为1，然后调用getDataList方法获取数据 -->
                     <el-button @click="pageIndex=1;getDataList()">查询</el-button>
+                    <!-- 新增按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为主要按钮，点击时调用addOrUpdateHandle方法 -->
                     <el-button v-if="isAuth('wx:article:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+                    <!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
                     <el-button v-if="isAuth('wx:article:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
                 </el-form-item>
             </el-form>
+            <!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
             <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+                <!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
                 <el-table-column type="selection" header-align="center" align="center" width="50">
                 </el-table-column>
+                <!-- ID列，对应dataList中数据项的id属性，设置了表头和内容的对齐方式以及列标题 -->
                 <el-table-column prop="id" header-align="center" align="center" label="ID">
                 </el-table-column>
+                <!-- 文章类型列，对应dataList中数据项的type属性，使用formatter函数格式化显示内容，设置了表头和内容的对齐方式以及列标题 -->
                 <el-table-column prop="type" header-align="center" align="center" :formatter="articleTypeFormat" label="文章类型">
                 </el-table-column>
+                <!-- 标题列，对应dataList中数据项的title属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题，内容用a标签包裹可点击跳转 -->
                 <el-table-column prop="title" header-align="center" align="center" show-overflow-tooltip label="标题">
                     <a :href="scope.row.targetLink" slot-scope="scope">{{scope.row.title}}</a>
                 </el-table-column>
+                <!-- 一级分类列，对应dataList中数据项的category属性，设置了表头和内容的对齐方式以及列标题 -->
                 <el-table-column prop="category" header-align="center" align="center" label="一级分类">
                 </el-table-column>
+                <!-- 二级分类列，对应dataList中数据项的subCategory属性，设置了表头和内容的对齐方式以及列标题 -->
                 <el-table-column prop="subCategory" header-align="center" align="center" label="二级分类">
                 </el-table-column>
+                <!-- 打开次数列，对应dataList中数据项的openCount属性，设置了表头和内容的对齐方式以及列标题 -->
                 <el-table-column prop="openCount" header-align="center" align="center" label="打开次数">
                 </el-table-column>
+                <!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了修改和删除按钮 -->
                 <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                     <template slot-scope="scope">
                         <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
@@ -39,16 +58,19 @@
                     </template>
                 </el-table-column>
             </el-table>
+            <!-- 分页组件，绑定了相关的分页事件和属性，用于切换每页显示数量、当前页码等操作 -->
             <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
             </el-pagination>
         </div>
-         <!-- 新增 / 修改  -->
-        <add-or-update :visible="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" @hide="addOrUpdateVisible=false"></add-or-update>
+        <!-- 新增/修改组件，通过属性和事件与父组件进行交互 -->
+        <add-or-update :visible="addOrUpdateVisible" ref="addOr-update" @refreshDataList="getDataList" @hide="addOrUpdateVisible=false"></add-or-update>
     </div>
 </template>
 
 <script>
+// 引入新增/修改组件
 import AddOrUpdate from './article-add-or-update'
+// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
 import { mapState } from 'vuex'
 export default {
     components: {
@@ -70,15 +92,19 @@ export default {
         }
     },
     computed: mapState({
-        ARTICLE_TYPES: state=>state.article.ARTICLE_TYPES
+        // 从Vuex的state中获取article模块下的ARTICLE_TYPES状态，映射到组件的计算属性中，用于文章类型的格式化显示等操作
+        ARTICLE_TYPES: state => state.article.ARTICLE_TYPES
     }),
     mounted() {
+        // 组件挂载完成后，调用getDataList方法获取初始数据列表
         this.getDataList()
     },
     methods: {
-        // 获取数据列表
+        // 获取数据列表的方法
         getDataList() {
+            // 设置正在加载数据的状态为true
             this.dataListLoading = true
+            // 发起HTTP请求获取文章数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
             this.$http({
                 url: this.$http.adornUrl('/manage/article/list'),
                 method: 'get',
@@ -91,52 +117,60 @@ export default {
                     'order': 'desc'
                 })
             }).then(({ data }) => {
+                // 根据返回数据的状态码判断是否请求成功
                 if (data && data.code === 200) {
+                    // 如果成功，更新数据列表和总记录数
                     this.dataList = data.page.list
                     this.totalCount = data.page.totalCount
                 } else {
+                    // 如果失败，清空数据列表和总记录数
                     this.dataList = []
                     this.totalCount = 0
                 }
+                // 请求完成后，设置正在加载数据的状态为false
                 this.dataListLoading = false
             })
         },
-        // 每页数
+        // 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
         sizeChangeHandle(val) {
             this.pageSize = val
             this.pageIndex = 1
             this.getDataList()
         },
-        // 当前页
+        // 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
         currentChangeHandle(val) {
             this.pageIndex = val
             this.getDataList()
         },
-        // 多选
+        // 处理表格中选择项变化的方法，更新选中的数据项列表
         selectionChangeHandle(val) {
             this.dataListSelections = val
         },
-        // 新增 / 修改
+        // 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入文章的id（可为空表示新增）
         addOrUpdateHandle(id) {
             this.addOrUpdateVisible = true
             this.$nextTick(() => {
                 this.$refs.addOrUpdate.init(id)
             })
         },
-        // 删除
+        // 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
         deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.id)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+            // 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的id数组进行批量删除
+            var ids = id? [id] : this.dataListSelections.map(item => item.id)
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
                 this.$http({
                     url: this.$http.adornUrl('/manage/article/delete'),
                     method: 'post',
                     data: this.$http.adornData(ids, false)
                 }).then(({ data }) => {
+                    // 根据返回数据判断删除操作是否成功
                     if (data && data.code === 200) {
+                        // 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
                         this.$message({
                             message: '操作成功',
                             type: 'success',
@@ -144,14 +178,16 @@ export default {
                             onClose: () => this.getDataList()
                         })
                     } else {
+                        // 如果失败，弹出错误提示信息
                         this.$message.error(data.msg)
                     }
                 })
             })
         },
+        // 文章类型格式化的方法，根据数据项中的文章类型值，从ARTICLE_TYPES对象中获取对应的显示名称并返回
         articleTypeFormat(row, column, cellValue) {
             return this.ARTICLE_TYPES[cellValue];
         }
     }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/assets/assets-selector.vue b/src/views/modules/wx/assets/assets-selector.vue
index 1123ea88..9f76cf10 100644
--- a/src/views/modules/wx/assets/assets-selector.vue
+++ b/src/views/modules/wx/assets/assets-selector.vue
@@ -1,38 +1,44 @@
-<template>
-    <el-dialog title="选择素材"  :visible.sync="dataVisible" :modal="true" append-to-body  @close="onClose">
-        <material-news v-if="selectType=='news'" @selected="onSelect" selectMode></material-news>
-        <material-file v-else :fileType="selectType" @selected="onSelect" selectMode></material-file>
-    </el-dialog>
-</template>
-<script>
-export default {
-    name:"assets-selector",
-    data:function (){
-        return {
-            dataVisible : this.visible
-        }
-    },
-    components:{
-        MaterialFile:()=>import('./material-file'),
-        MaterialNews:()=>import('./material-news')
-    },
-    props:{
-        selectType:{// image、voice、video、news
-            type:String,
-            default:'image'
-        },
-        visible:{
-            type:Boolean,
-            default:false
-        }
-    },
-    methods:{
-        onSelect(itemInfo){
-            this.$emit('selected', itemInfo)
-        },
-        onClose(){
-            this.$emit('onClose')
-        }
-    }
-}
+<template>  
+    <!-- 选择素材的对话框 -->  
+    <el-dialog title="选择素材" :visible.sync="dataVisible" :modal="true" append-to-body @close="onClose">  
+        <!-- 根据选择的素材类型加载不同的子组件 -->  
+        <material-news v-if="selectType === 'news'" @selected="onSelect" selectMode></material-news>  
+        <material-file v-else :fileType="selectType" @selected="onSelect" selectMode></material-file>  
+    </el-dialog>  
+</template>  
+
+<script>  
+export default {  
+    name: "assets-selector", // 组件名称  
+    data: function () {  
+        return {  
+            dataVisible: this.visible // 初始化 dataVisible，与父组件的 visible 属性保持同步  
+        }  
+    },  
+    components: {  
+        // 懒加载子组件  
+        MaterialFile: () => import('./material-file'), // 导入 MaterialFile 组件  
+        MaterialNews: () => import('./material-news') // 导入 MaterialNews 组件  
+    },  
+    props: {  
+        selectType: { // 所选素材的类型（如 image、voice、video、news）  
+            type: String,  
+            default: 'image' // 默认类型为 'image'  
+        },  
+        visible: { // 父组件传递进来的控制对话框可见性的属性  
+            type: Boolean,  
+            default: false // 默认对话框不可见  
+        }  
+    },  
+    methods: {  
+        // 子组件素材选择事件处理  
+        onSelect(itemInfo) {  
+            this.$emit('selected', itemInfo) // 将选择的素材信息向父组件发射事件  
+        },  
+        // 关闭对话框事件处理  
+        onClose() {  
+            this.$emit('onClose') // 向父组件发射关闭事件  
+        }  
+    }  
+}  
 </script>
\ No newline at end of file
diff --git a/src/views/modules/wx/assets/material-file-add-or-update.vue b/src/views/modules/wx/assets/material-file-add-or-update.vue
index 5f7c8d02..fd658130 100644
--- a/src/views/modules/wx/assets/material-file-add-or-update.vue
+++ b/src/views/modules/wx/assets/material-file-add-or-update.vue
@@ -1,103 +1,118 @@
-<template>
-    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
-        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-            <el-form-item label="媒体文件">
-                <el-button type="primary">
-                    选择文件
-                    <input type="file" style="opacity: 0;height: 100%;position: absolute;left: 0;top: 0;" @change="onFileChange" />
-                </el-button>
-                <div>{{dataForm.file.name}}</div>
-            </el-form-item>
-            <el-form-item label="媒体类型" prop="mediaType">
-                <el-select v-model="dataForm.mediaType" placeholder="媒体类型" style="width:100%">
-                    <el-option label="图片（2M以内，支持PNG\JPEG\JPG\GIF）" value="image"></el-option>
-                    <el-option label="视频（10M以内，只支持MP4）" value="video"></el-option>
-                    <el-option label="语音（2M、60s以内，支持AMR\MP3）" value="voice"></el-option>
-                    <el-option label="缩略图（64K以内JPG）" value="thumb"></el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item label="素材名称" prop="fileName">
-                <el-input v-model="dataForm.fileName" placeholder="为便于管理建议按用途分类+素材内容命名"></el-input>
-            </el-form-item>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="visible = false">取消</el-button>
-            <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{uploading?'提交中...':'提交'}}</el-button>
-        </span>
-    </el-dialog>
-</template>
+<template>  
+    <!-- 对话框，标题根据是否有 id 决定是“新增”还是“修改” -->  
+    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">  
+        <!-- 表单区域 -->  
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">  
+            <!-- 媒体文件选择 -->  
+            <el-form-item label="媒体文件">  
+                <el-button type="primary">  
+                    选择文件  
+                    <!-- 隐藏的文件输入框，选择文件后触发 onFileChange 方法 -->  
+                    <input type="file" style="opacity: 0; height: 100%; position: absolute; left: 0; top: 0;" @change="onFileChange" />  
+                </el-button>  
+                <!-- 显示已选择的文件名称 -->  
+                <div>{{dataForm.file.name}}</div>  
+            </el-form-item>  
+            <!-- 媒体类型选择 -->  
+            <el-form-item label="媒体类型" prop="mediaType">  
+                <el-select v-model="dataForm.mediaType" placeholder="媒体类型" style="width:100%">  
+                    <el-option label="图片（2M以内，支持PNG\JPEG\JPG\GIF）" value="image"></el-option>  
+                    <el-option label="视频（10M以内，只支持MP4）" value="video"></el-option>  
+                    <el-option label="语音（2M、60s以内，支持AMR\MP3）" value="voice"></el-option>  
+                    <el-option label="缩略图（64K以内JPG）" value="thumb"></el-option>  
+                </el-select>  
+            </el-form-item>  
+            <!-- 素材名称输入 -->  
+            <el-form-item label="素材名称" prop="fileName">  
+                <el-input v-model="dataForm.fileName" placeholder="为便于管理建议按用途分类+素材内容命名"></el-input>  
+            </el-form-item>  
+        </el-form>  
+        <!-- 对话框底部按钮 -->  
+        <span slot="footer" class="dialog-footer">  
+            <el-button @click="visible = false">取消</el-button>  
+            <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{uploading ? '提交中...' : '提交'}}</el-button>  
+        </span>  
+    </el-dialog>  
+</template>  
 
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            uploading:false,
-            dataForm: {
-                mediaId: '',
-                file: '',
-                fileName: '',
-                mediaType: 'image'
-            },
-            dataRule: {
-                fileName: [
-                    { required: true, message: '素材名称不能为空', trigger: 'blur' }
-                ],
-                mediaType: [
-                    { required: true, message: '素材类型不能为空', trigger: 'blur' }
-                ]
-            }
-        }
-    },
-    methods: {
-        init(fileType) {
-            if(fileType)this.dataForm.mediaType=fileType
-            this.visible = true
-        },
-        // 表单提交
-        dataFormSubmit() {
-            if(this.uploading)return
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    this.uploading=true
-                    console.log(this.dataForm)
-                    let form = new FormData();
-                    form.append('mediaId', this.dataForm.mediaId || '')
-                    form.append('file', this.dataForm.file)
-                    form.append('fileName', this.dataForm.fileName)
-                    form.append('mediaType', this.dataForm.mediaType)
-                    this.$http({
-                        url: this.$http.adornUrl(`/manage/wxAssets/materialFileUpload`),
-                        method: 'post',
-                        data: form,
-                        headers: { 'Content-Type': 'multipart/form-data' }
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.$message({
-                                message: '操作成功',
-                                type: 'success',
-                                duration: 1500,
-                                onClose: () => {
-                                    this.visible = false
-                                    this.$emit('refreshDataList')
-                                }
-                            })
-                        } else {
-                            this.$message.error(data.msg)
-                        }
-                        this.uploading=false
-                    })
-                }
-            })
-        },
-        onFileChange(e) {
-            let file = event.currentTarget.files[0]
-            this.dataForm.file = file;
-            this.dataForm.fileName = file.name.substring(0, file.name.lastIndexOf('.'))
-            let mediaType = file.type.substring(0, file.type.lastIndexOf('/'))
-            if (mediaType == 'audio') mediaType = 'voice'
-            this.dataForm.mediaType = mediaType
-        }
-    }
-}
-</script>
+<script>  
+export default {  
+    data() {  
+        return {  
+            visible: false, // 控制对话框的可见性  
+            uploading: false, // 控制是否正在上传  
+            dataForm: { // 表单数据模型  
+                mediaId: '', // 媒体 ID  
+                file: '', // 选择的文件  
+                fileName: '', // 文件名称  
+                mediaType: 'image' // 媒体类型，默认为 'image'  
+            },  
+            dataRule: { // 表单验证规则  
+                fileName: [  
+                    { required: true, message: '素材名称不能为空', trigger: 'blur' } // 素材名称必填  
+                ],  
+                mediaType: [  
+                    { required: true, message: '素材类型不能为空', trigger: 'blur' } // 媒体类型必填  
+                ]  
+            }  
+        }  
+    },  
+    methods: {  
+        // 初始化方法，用于设置媒体类型并显示对话框  
+        init(fileType) {  
+            if (fileType) this.dataForm.mediaType = fileType // 设置媒体类型  
+            this.visible = true // 显示对话框  
+        },  
+        // 表单提交处理  
+        dataFormSubmit() {  
+            if (this.uploading) return // 如果正在上传，则不再处理提交  
+            // 验证表单  
+            this.$refs['dataForm'].validate((valid) => {  
+                if (valid) {  
+                    this.uploading = true // 设置为正在上传状态  
+                    console.log(this.dataForm) // 打印表单数据  
+                    let form = new FormData(); // 创建 FormData 对象  
+                    // 将表单数据添加到 FormData 中  
+                    form.append('mediaId', this.dataForm.mediaId || '')  
+                    form.append('file', this.dataForm.file)  
+                    form.append('fileName', this.dataForm.fileName)  
+                    form.append('mediaType', this.dataForm.mediaType)  
+                    // 发送 POST 请求上传文件  
+                    this.$http({  
+                        url: this.$http.adornUrl(`/manage/wxAssets/materialFileUpload`), // 请求的 URL  
+                        method: 'post',  
+                        data: form,  
+                        headers: { 'Content-Type': 'multipart/form-data' } // 设置请求头为 multipart/form-data  
+                    }).then(({ data }) => {  
+                        if (data && data.code === 200) {  
+                            // 上传成功，显示成功消息  
+                            this.$message({  
+                                message: '操作成功',  
+                                type: 'success',  
+                                duration: 1500,  
+                                onClose: () => {  
+                                    this.visible = false // 关闭对话框  
+                                    this.$emit('refreshDataList') // 触发父组件刷新数据列表事件  
+                                }  
+                            })  
+                        } else {  
+                            // 上传失败，显示错误消息  
+                            this.$message.error(data.msg)  
+                        }  
+                        this.uploading = false // 重置上传状态  
+                    })  
+                }  
+            })  
+        },  
+        // 文件选择变化处理  
+        onFileChange(e) {  
+            let file = e.currentTarget.files[0] // 获取选择的文件  
+            this.dataForm.file = file; // 设置文件到表单数据  
+            this.dataForm.fileName = file.name.substring(0, file.name.lastIndexOf('.')) // 设置文件名称（去掉后缀）  
+            let mediaType = file.type.substring(0, file.type.lastIndexOf('/')) // 获取媒体类型  
+            if (mediaType === 'audio') mediaType = 'voice' // 将音频类型映射为 'voice'  
+            this.dataForm.mediaType = mediaType // 设置媒体类型到表单数据  
+        }  
+    }  
+}  
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/assets/material-file.vue b/src/views/modules/wx/assets/material-file.vue
index cc0b0180..edb2a1b7 100644
--- a/src/views/modules/wx/assets/material-file.vue
+++ b/src/views/modules/wx/assets/material-file.vue
@@ -1,185 +1,207 @@
-<template>
-    <div class="mod-menu">
-        <el-form :inline="true" :model="dataForm">
-            <el-form-item v-show="!selectMode">
-                <el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-            </el-form-item>
-        </el-form>
-        <div v-loading="dataListLoading">
-            <div class="card" v-for="item in dataList" :key="item.mediaId" @click="onSelect(item)">
-                <el-image v-if="fileType=='image'" class="card-image" :src="item.url" fit="contain" lazy></el-image>
-                <div v-else class="card-preview">
-                    <div v-if="fileType=='voice'" class="card-preview-icon el-icon-microphone"></div>
-                    <div v-if="fileType=='video'" class="card-preview-icon el-icon-video-camera-solid"></div>
-                    <div class="card-preview-text">管理后台不支持预览<br/>微信中可正常播放</div>
-                </div>
-                <div class="card-footer">
-                    <div class="text-cut-name">{{item.name}}</div>
-                    <div>{{$moment(item.updateTime).calendar()}}</div>
-                    <div class="flex justify-between align-center" v-show="!selectMode">
-                        <el-button size="mini" type="text" icon="el-icon-copy-document"  v-clipboard:copy="item.mediaId" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制media_id</el-button>
-                        <el-button size="mini" type="text" icon="el-icon-delete"  @click="deleteHandle(item.mediaId)" >删除</el-button>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20]" :page-size="20" :total="totalCount" layout="total, prev,pager, next, jumper">
-        </el-pagination>
-        <!-- 弹窗, 新增 / 修改 -->
-        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="onChange"></add-or-update>
-    </div>
-</template>
-<script>
-import AddOrUpdate from './material-file-add-or-update'
-export default {
-    name:'material-file',
-    props:{
-        fileType:{// image、voice、video
-            type:String,
-            default:'image'
-        },
-        selectMode:{// 是否选择模式，选择模式下点击素材选中，不可新增和删除
-            type:Boolean,
-            default:false
-        }
-    },
-    components: {
-        AddOrUpdate
-    },
-    data() {
-        return {
-            dataForm: {},
-            addOrUpdateVisible: false,
-            dataList: [],
-            pageIndex: 1,
-            pageSize: 20,
-            totalCount: 0,
-            dataListLoading: false,
-        }
-    },
-    mounted(){
-        this.init()
-    },
-    methods: {
-        init(){
-            if(!this.dataList.length){
-                this.getDataList()
-            }
-        },
-        getDataList() {
-            if(this.dataListLoading) return
-            this.dataListLoading = true
-            this.$http({
-                url: this.$http.adornUrl('/manage/wxAssets/materialFileBatchGet'),
-                params: this.$http.adornParams({
-                    'page': this.pageIndex,
-                    'type': this.fileType
-                })
-            }).then(({ data }) => {
-                if (data && data.code == 200) {
-                    this.dataList = data.data.items
-                    this.totalCount = data.data.totalCount
-                     this.pageIndex++;
-                } else {
-                    this.$message.error(data.msg);
-                }
-                this.dataListLoading = false
-            })
-        },
-        // 新增 / 修改
-        addOrUpdateHandle() {
-            this.addOrUpdateVisible = true
-            this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(this.fileType)
-            })
-        },
-        onSelect(itemInfo){
-            if(!this.selectMode)return
-            this.$emit('selected',itemInfo)
-        },
-        //删除
-        deleteHandle(id) {
-            this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
-                this.$http({
-                    url: this.$http.adornUrl('/manage/wxAssets/materialDelete'),
-                    method: 'post',
-                    data: { mediaId: id }
-                }).then(({ data }) => {
-                    if (data && data.code === 200) {
-                        this.$message({
-                            message: '操作成功',
-                            type: 'success',
-                            duration: 1500,
-                            onClose: () =>  this.onChange()
-                        })
-                    } else {
-                        this.$message.error(data.msg)
-                    }
-                })
-            })
-        },
-        // 当前页
-        currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
-        },
-        onCopySuccess(){
-            this.$message.success('已复制')
-        },
-        onCopyError(err){
-            this.$message.error('复制失败,可能是此浏览器不支持复制')
-        },
-        onChange(){
-            this.pageIndex=1
-            this.getDataList()
-            this.$emit('change')
-        }
+<template>  
+    <div class="mod-menu">  
+        <!-- 表单，用于新增按钮 -->  
+        <el-form :inline="true" :model="dataForm">  
+            <el-form-item v-show="!selectMode">  
+                <!-- 新增按钮，只有在有权限时才显示 -->  
+                <el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>  
+            </el-form-item>  
+        </el-form>  
+        <!-- 数据列表加载状态 -->  
+        <div v-loading="dataListLoading">  
+            <!-- 遍历数据列表，生成每个素材的卡片 -->  
+            <div class="card" v-for="item in dataList" :key="item.mediaId" @click="onSelect(item)">  
+                <!-- 如果是图片类型，显示图片 -->  
+                <el-image v-if="fileType === 'image'" class="card-image" :src="item.url" fit="contain" lazy></el-image>  
+                <div v-else class="card-preview">  
+                    <!-- 根据不同的媒体类型显示不同的图标和提示 -->  
+                    <div v-if="fileType === 'voice'" class="card-preview-icon el-icon-microphone"></div>  
+                    <div v-if="fileType === 'video'" class="card-preview-icon el-icon-video-camera-solid"></div>  
+                    <div class="card-preview-text">管理后台不支持预览<br/>微信中可正常播放</div>  
+                </div>  
+                <div class="card-footer">  
+                    <!-- 显示素材名称和更新时间 -->  
+                    <div class="text-cut-name">{{item.name}}</div>  
+                    <div>{{$moment(item.updateTime).calendar()}}</div>  
+                    <div class="flex justify-between align-center" v-show="!selectMode">  
+                        <!-- 复制 media_id 的按钮 -->  
+                        <el-button size="mini" type="text" icon="el-icon-copy-document" v-clipboard:copy="item.mediaId" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制media_id</el-button>  
+                        <!-- 删除素材的按钮 -->  
+                        <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(item.mediaId)">删除</el-button>  
+                    </div>  
+                </div>  
+            </div>  
+        </div>  
+        <!-- 分页组件 -->  
+        <el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[20]" :page-size="20" :total="totalCount" layout="total, prev, pager, next, jumper">  
+        </el-pagination>  
+        <!-- 弹窗，用于新增/修改素材 -->  
+        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="onChange"></add-or-update>  
+    </div>  
+</template>  
 
-    }
-}
-</script>
-<style scoped>
-.card{
-    width: 170px;
-    display: inline-block;
-    background: #FFFFFF;
-    border: 1px solid #EBEEF5;
-    box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.1);
-    margin: 0 10px 10px 0;
-    vertical-align: top;
-    border-radius: 5px;
-    box-sizing: border-box;
-}
-.card:hover{
-    border: 2px solid #66b1ff;
-    margin-bottom: 6px;
-}
-.card-image{
-    line-height: 170px;
-    max-height: 170px;
-    width: 100%;
-}
-.card-preview{
-    padding: 20px 0;
-    color: #d9d9d9;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.card-preview-icon{
-    font-size: 30px;
-    margin-right: 5px;
-}
-.card-preview-text{
-    font-size: 12px;
-}
-.card-footer{
-    color: #ccc;
-    font-size: 12px;
-    padding: 15px 10px;
-}
+<script>  
+import AddOrUpdate from './material-file-add-or-update' // 导入新增/修改组件  
+
+export default {  
+    name: 'material-file', // 组件名称  
+    props: {  
+        fileType: { // 媒体类型，支持 image、voice、video  
+            type: String,  
+            default: 'image'  
+        },  
+        selectMode: { // 是否为选择模式  
+            type: Boolean,  
+            default: false  
+        }  
+    },  
+    components: {  
+        AddOrUpdate // 注册新增/修改组件  
+    },  
+    data() {  
+        return {  
+            dataForm: {}, // 表单数据  
+            addOrUpdateVisible: false, // 控制新增/修改弹窗的可见性  
+            dataList: [], // 素材数据列表  
+            pageIndex: 1, // 当前页码  
+            pageSize: 20, // 每页显示的条数  
+            totalCount: 0, // 数据总数  
+            dataListLoading: false, // 加载状态  
+        }  
+    },  
+    mounted() {  
+        this.init() // 组件挂载后初始化数据  
+    },  
+    methods: {  
+        init() {  
+            // 初始化方法，如果数据列表为空则获取数据  
+            if (!this.dataList.length) {  
+                this.getDataList()  
+            }  
+        },  
+        getDataList() {  
+            // 获取数据列表  
+            if (this.dataListLoading) return // 如果正在加载则不再请求  
+            this.dataListLoading = true // 设置加载状态  
+            this.$http({  
+                url: this.$http.adornUrl('/manage/wxAssets/materialFileBatchGet'), // 请求的 URL  
+                params: this.$http.adornParams({  
+                    'page': this.pageIndex, // 当前页码  
+                    'type': this.fileType // 媒体类型  
+                })  
+            }).then(({ data }) => {  
+                if (data && data.code == 200) {  
+                    // 请求成功，更新数据列表和总数  
+                    this.dataList = data.data.items  
+                    this.totalCount = data.data.totalCount  
+                    this.pageIndex++; // 页码自增  
+                } else {  
+                    // 请求失败，显示错误消息  
+                    this.$message.error(data.msg);  
+                }  
+                this.dataListLoading = false // 重置加载状态  
+            })  
+        },  
+        // 新增/修改处理  
+        addOrUpdateHandle() {  
+            this.addOrUpdateVisible = true // 显示新增/修改弹窗  
+            this.$nextTick(() => {  
+                this.$refs.addOrUpdate.init(this.fileType) // 初始化新增/修改组件  
+            })  
+        },  
+        onSelect(itemInfo) {  
+            // 选择素材  
+            if (!this.selectMode) return // 如果不是选择模式则不处理  
+            this.$emit('selected', itemInfo) // 向父组件发射选择事件  
+        },  
+        // 删除素材处理  
+        deleteHandle(id) {  
+            this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', {  
+                confirmButtonText: '确定',  
+                cancelButtonText: '取消',  
+                type: 'warning'  
+            }).then(() => {  
+                this.$http({  
+                    url: this.$http.adornUrl('/manage/wxAssets/materialDelete'), // 删除请求的 URL  
+                    method: 'post',  
+                    data: { mediaId: id } // 传递媒体 ID  
+                }).then(({ data }) => {  
+                    if (data && data.code === 200) {  
+                        // 删除成功，显示成功消息并刷新数据  
+                        this.$message({  
+                            message: '操作成功',  
+                            type: 'success',  
+                            duration: 1500,  
+                            onClose: () => this.onChange() // 刷新数据列表  
+                        })  
+                    } else {  
+                        // 删除失败，显示错误消息  
+                        this.$message.error(data.msg)  
+                    }  
+                })  
+            })  
+        },  
+        // 分页当前页变化处理  
+        currentChangeHandle(val) {  
+            this.pageIndex = val // 更新当前页码  
+            this.getDataList() // 获取数据列表  
+        },  
+        onCopySuccess() {  
+            // 复制成功提示  
+            this.$message.success('已复制')  
+        },  
+        onCopyError(err) {  
+            // 复制失败提示  
+            this.$message.error('复制失败, 可能是此浏览器不支持复制')   
+        },  
+        onChange() {  
+            // 刷新数据列表的处理  
+            this.pageIndex = 1 // 重置页码为 1  
+            this.getDataList() // 获取数据列表  
+            this.$emit('change') // 向父组件发射变化事件  
+        }  
+    }  
+}  
+</script>  
+
+<style scoped>  
+.card {  
+    width: 170px; /* 卡片宽度 */  
+    display: inline-block; /* 以行内块元素方式显示，允许多个卡片横向排列 */  
+    background: #FFFFFF; /* 背景颜色 */  
+    border: 1px solid #EBEEF5; /* 边框颜色 */  
+    box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.1); /* 盒子阴影 */  
+    margin: 0 10px 10px 0; /* 外边距 */  
+    vertical-align: top; /* 垂直对齐 */  
+    border-radius: 5px; /* 圆角 */  
+    box-sizing: border-box; /* 包含内边距和边框在内的盒模型 */  
+}  
+.card:hover {  
+    border: 2px solid #66b1ff; /* 鼠标悬停时加粗边框 */  
+    margin-bottom: 6px; /* 下方外边距调整 */  
+}  
+.card-image {  
+    line-height: 170px; /* 设定行高以居中内容 */  
+    max-height: 170px; /* 最大高度 */  
+    width: 100%; /* 宽度100% */  
+}  
+.card-preview {  
+    padding: 20px 0; /* 上下内边距 */  
+    color: #d9d9d9; /* 字体颜色 */  
+    display: flex; /* 使用弹性布局 */  
+    justify-content: center; /* 内容居中对齐 */  
+    align-items: center; /* 垂直居中对齐 */  
+}  
+.card-preview-icon {  
+    font-size: 30px; /* 图标字体大小 */  
+    margin-right: 5px; /* 右侧外边距 */  
+}  
+.card-preview-text {  
+    font-size: 12px; /* 文本大小 */  
+}  
+.card-footer {  
+    color: #ccc; /* 字体颜色 */  
+    font-size: 12px; /* 字体大小 */  
+    padding: 15px 10px; /* 内边距 */  
+}  
 </style>
\ No newline at end of file
diff --git a/src/views/modules/wx/assets/material-news-add-or-update.vue b/src/views/modules/wx/assets/material-news-add-or-update.vue
index c2df6169..4198f8eb 100644
--- a/src/views/modules/wx/assets/material-news-add-or-update.vue
+++ b/src/views/modules/wx/assets/material-news-add-or-update.vue
@@ -1,221 +1,232 @@
-<template>
-    <div  v-show="visible">
-        <div class="flex">
-            <div class="card-list">
-                <div class="text-center margin-bottom">图文列表</div>
-                <div class="card-item" :class="{'selected':selectedIndex==index}" v-for="(item,index) in articles" :key="index" @click="selectedIndex=index">
-                    <div class="text-cut-name">{{item.title}}</div>
-                </div>
-                <div v-show="articles.length<8 && !mediaId" class="card-add el-icon-plus" @click="addArticle()"></div>
-            </div>
-            <el-form size="mini" v-if="articles.length" :model="articles[selectedIndex]" :rules="dataRule" ref="dataForm" label-width="100px">
-                <el-form-item label="标题" prop="title">
-                    <el-input v-model="articles[selectedIndex].title" placeholder="标题"></el-input>
-                </el-form-item>
-                <el-form-item label="封面图" prop="thumbMediaId">
-                    <el-input v-model="articles[selectedIndex].thumbMediaId" placeholder="封面图media_id">
-                        <div slot="append" @click="assetsSelectorVisible=true">从素材库中选择</div>
-                    </el-input>
-                </el-form-item>
-                <el-form-item label="摘要" prop="digest">
-                    <el-input v-model="articles[selectedIndex].digest" placeholder="摘要"></el-input>
-                </el-form-item>
-                <el-form-item label="原文地址" prop="contentSourceUrl">
-                    <el-input v-model="articles[selectedIndex].contentSourceUrl" placeholder="阅读原文链接"></el-input>
-                </el-form-item>
-                <el-row>
-                    <el-col :span="9">
-                        <el-form-item label="作者" prop="author">
-                            <el-input v-model="articles[selectedIndex].author" placeholder="作者"></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="5">
-                        <el-form-item label="显示封面" prop="showCoverPic">
-                            <el-switch v-model="articles[selectedIndex].showCoverPic"></el-switch>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="5">
-                        <el-form-item label="允许评论" prop="needOpenComment">
-                            <el-switch v-model="articles[selectedIndex].needOpenComment"></el-switch>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="5">
-                        <el-form-item label="仅粉丝可评论" prop="onlyFansCanComment">
-                            <el-switch v-model="articles[selectedIndex].onlyFansCanComment"></el-switch>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-                <el-form-item label="内容" prop="content">
-                    <tinymce-editor ref="editor" v-model="articles[selectedIndex].content"> </tinymce-editor>
-                </el-form-item>
-            </el-form>
-        </div>
-        <div class="dialog-footer">
-            <el-button @click="$emit('hide')">取消</el-button>
-            <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{this.mediaId?'修改此篇':'全部提交（共'+articles.length+'篇）'}}</el-button>
-        </div>
-        <assets-selector v-if="assetsSelectorVisible" :visible="assetsSelectorVisible" selectType="image" @selected="onAssetsSelect"></assets-selector>
-    </div>
-</template>
+<template>  
+    <div v-show="visible"> <!-- 控制弹窗的显示与隐藏 -->  
+        <div class="flex">  
+            <div class="card-list">  
+                <div class="text-center margin-bottom">图文列表</div>  
+                <!-- 遍历所有文章，生成列表项 -->  
+                <div class="card-item" :class="{'selected':selectedIndex==index}" v-for="(item,index) in articles" :key="index" @click="selectedIndex=index">  
+                    <div class="text-cut-name">{{item.title}}</div>  
+                </div>  
+                <!-- 如果文章少于8篇且没有媒体ID，显示新增文章的按钮 -->  
+                <div v-show="articles.length<8 && !mediaId" class="card-add el-icon-plus" @click="addArticle()"></div>  
+            </div>  
+            <!-- 文章表单，绑定到选中的文章 -->  
+            <el-form size="mini" v-if="articles.length" :model="articles[selectedIndex]" :rules="dataRule" ref="dataForm" label-width="100px">  
+                <el-form-item label="标题" prop="title">  
+                    <el-input v-model="articles[selectedIndex].title" placeholder="标题"></el-input>  
+                </el-form-item>  
+                <el-form-item label="封面图" prop="thumbMediaId">  
+                    <el-input v-model="articles[selectedIndex].thumbMediaId" placeholder="封面图media_id">  
+                        <div slot="append" @click="assetsSelectorVisible=true">从素材库中选择</div> <!-- 选择封面图的按钮 -->  
+                    </el-input>  
+                </el-form-item>  
+                <el-form-item label="摘要" prop="digest">  
+                    <el-input v-model="articles[selectedIndex].digest" placeholder="摘要"></el-input>  
+                </el-form-item>  
+                <el-form-item label="原文地址" prop="contentSourceUrl">  
+                    <el-input v-model="articles[selectedIndex].contentSourceUrl" placeholder="阅读原文链接"></el-input>  
+                </el-form-item>  
+                <el-row>  
+                    <el-col :span="9">  
+                        <el-form-item label="作者" prop="author">  
+                            <el-input v-model="articles[selectedIndex].author" placeholder="作者"></el-input>  
+                        </el-form-item>  
+                    </el-col>  
+                    <el-col :span="5">  
+                        <el-form-item label="显示封面" prop="showCoverPic">  
+                            <el-switch v-model="articles[selectedIndex].showCoverPic"></el-switch>  
+                        </el-form-item>  
+                    </el-col>  
+                    <el-col :span="5">  
+                        <el-form-item label="允许评论" prop="needOpenComment">  
+                            <el-switch v-model="articles[selectedIndex].needOpenComment"></el-switch>  
+                        </el-form-item>  
+                    </el-col>  
+                    <el-col :span="5">  
+                        <el-form-item label="仅粉丝可评论" prop="onlyFansCanComment">  
+                            <el-switch v-model="articles[selectedIndex].onlyFansCanComment"></el-switch>  
+                        </el-form-item>  
+                    </el-col>  
+                </el-row>  
+                <el-form-item label="内容" prop="content">  
+                    <tinymce-editor ref="editor" v-model="articles[selectedIndex].content"> </tinymce-editor> <!-- 富文本编辑器 -->  
+                </el-form-item>  
+            </el-form>  
+        </div>  
+        <div class="dialog-footer">  
+            <el-button @click="$emit('hide')">取消</el-button> <!-- 取消按钮 -->  
+            <el-button type="primary" @click="dataFormSubmit()" :disabled="uploading">{{this.mediaId?'修改此篇':'全部提交（共'+articles.length+'篇）'}}</el-button>  
+            <!-- 提交按钮，根据是否有mediaId来决定按钮显示内容 -->  
+        </div>  
+        <assets-selector v-if="assetsSelectorVisible" :visible="assetsSelectorVisible" selectType="image" @selected="onAssetsSelect"></assets-selector> <!-- 选择素材框 -->  
+    </div>  
+</template>  
 
-<script>
-const articleTemplate={
-    templateId: 0,
-    title: '',
-    content: '',
-    author: '',
-    showCoverPic: true,
-    contentSourceUrl: '',
-    digest: '',
-    thumbMediaId: '',
-    needOpenComment: false,
-    onlyFansCanComment: false
-}
-export default {
-    components: {
-        TinymceEditor: () => import('@/components/tinymce-editor'),
-        AssetsSelector:()=>import('./assets-selector')
-    },
-    props:{
-        visible:{
-            type:Boolean,
-            default:false
-        }
-    },
-    data() {
-        return {
-            assetsSelectorVisible:false,
-            mediaId:'',
-            selectedIndex:0,
-            articles:[],
-            uploading:false,
-            dataRule: {
-                title: [
-                    { required: true, message: '标题不能为空', trigger: 'blur' }
-                ],
-                content: [
-                    { required: true, message: '内容不能为空', trigger: 'blur' }
-                ],
-                thumbMediaId: [
-                    { required: true, message: '封面图media_id不能为空', trigger: 'blur' }
-                ],
-                contentSourceUrl: [
-                    { required: true, message: '原文地址不得为空', trigger: 'blur' }
-                ]
-            }
-        }
-    },
-    methods: {
-        init(news){
-            if(news && news.mediaId){
-                this.mediaId=news.mediaId
-                this.articles = news.content.articles
-            }else{
-                this.mediaId=''
-                this.articles=[{...articleTemplate}]
-            }
-        },
-        // 表单提交
-        dataFormSubmit() {
-            if(this.uploading)return
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    if(this.mediaId){// 编辑，只能一次修改一篇
-                        this.materialArticleUpdate();
-                    }else{ // 新增，全部文章一起保存
-                        this.materialNewsUpload();
-                    }
-                }
-            })
-        },
-        materialNewsUpload(){
-            this.uploading=true
-            this.$http({
-                url: this.$http.adornUrl(`/manage/wxAssets/materialNewsUpload`),
-                method: 'post',
-                data: this.$http.adornData(this.articles,false)
-            }).then(({ data }) => {
-                if (data && data.code === 200) {
-                    this.$message({
-                        message: "操作成功",
-                        type: "success",
-                        duration: 1500,
-                        onClose: () => {
-                            this.$emit("refreshDataList");
-                            this.emit('hide')
-                        }
-                    });
-                } else {
-                    this.$message.error(data.msg)
-                }
-                this.uploading=false
-            })
-        },
-        materialArticleUpdate(){
-            this.uploading=true
-            this.$http({
-                url: this.$http.adornUrl(`/manage/wxAssets/materialArticleUpdate`),
-                method: 'post',
-                data: this.$http.adornData({
-                    'mediaId':this.mediaId,
-                    'index':this.selectedIndex,
-                    'articles':this.articles[this.selectedIndex]
-                })
-            }).then(({ data }) => {
-                if (data && data.code === 200) {
-                    this.$message.success('操作成功')
-                } else {
-                    this.$message.error(data.msg)
-                }
-                this.uploading=false
-            })
-        },
-        addArticle(){
-            this.articles.push({...articleTemplate})
-            this.selectedIndex=this.articles.length-1
-        },
-        onAssetsSelect(assetsInfo){
-            Vue.set(this.articles[this.selectedIndex], 'thumbMediaId', assetsInfo.mediaId)
-            this.assetsSelectorVisible=false
-        }
-    }
-}
-</script>
-<style scoped>
-.card-list{
-    width: 300px;
-    padding-right: 10px;
-    border-right: 1px solid #eeeeee;
-}
-.card-item{
-    margin-top: 2px;
-    padding: 20px 5px;
-    border: 1px solid #ddd;
-    font-size: 12px;
-    line-height: 15px;
-}
-.card-item.selected{
-    border: 2px solid #409EFF;
-}
-.text-cut-name{
-    display: -webkit-box;
-    word-wrap:break-word;
-    word-break:break-all;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-}
-.card-add{
-    margin-top: 2px;
-    display: block;
-    border: 1px dotted #ddd;
-    color: #ddd;
-    text-align: center;
-    font-size: 30px;
-    line-height: 50px;
-}
-.dialog-footer {
-    margin-top: 20px;
-    text-align: right;
-}
+<script>  
+const articleTemplate = { // 文章模板  
+    templateId: 0,  
+    title: '',  
+    content: '',  
+    author: '',  
+    showCoverPic: true,  
+    contentSourceUrl: '',  
+    digest: '',  
+    thumbMediaId: '',  
+    needOpenComment: false,  
+    onlyFansCanComment: false  
+}  
+export default {  
+    components: {  
+        TinymceEditor: () => import('@/components/tinymce-editor'), // 异步引入富文本编辑器组件  
+        AssetsSelector: () => import('./assets-selector') // 异步引入素材选择器组件  
+    },  
+    props: {  
+        visible: { // 控制组件可见性的属性  
+            type: Boolean,  
+            default: false  
+        }  
+    },  
+    data() {  
+        return {  
+            assetsSelectorVisible: false, // 控制素材选择器的可见性  
+            mediaId: '', // 用于存储文章的媒体ID  
+            selectedIndex: 0, // 当前选中文章的索引  
+            articles: [], // 存储文章列表  
+            uploading: false, // 上传状态  
+            dataRule: { // 表单的验证规则  
+                title: [  
+                    { required: true, message: '标题不能为空', trigger: 'blur' }  
+                ],  
+                content: [  
+                    { required: true, message: '内容不能为空', trigger: 'blur' }  
+                ],  
+                thumbMediaId: [  
+                    { required: true, message: '封面图media_id不能为空', trigger: 'blur' }  
+                ],  
+                contentSourceUrl: [  
+                                        { required: true, message: '原文地址不得为空', trigger: 'blur' }  
+                ]  
+            }  
+        }  
+    },  
+    methods: {  
+        init(news) { // 初始化方法，用于加载新闻数据  
+            if (news && news.mediaId) {  
+                this.mediaId = news.mediaId; // 如果有mediaId，设置mediaId  
+                this.articles = news.content.articles; // 加载新闻的文章内容  
+            } else {  
+                this.mediaId = ''; // 如果没有，从新初始化  
+                this.articles = [{ ...articleTemplate }]; // 新增一篇文章，使用模板  
+            }  
+        },  
+        // 表单提交  
+        dataFormSubmit() {  
+            if (this.uploading) return; // 如果正在上传，返回  
+            this.$refs['dataForm'].validate((valid) => { // 验证表单  
+                if (valid) {  
+                    if (this.mediaId) { // 如果已有mediaId，执行文章更新  
+                        this.materialArticleUpdate();  
+                    } else { // 否则执行文章新增  
+                        this.materialNewsUpload();  
+                    }  
+                }  
+            });  
+        },  
+        // 上传新闻内容  
+        materialNewsUpload() {  
+            this.uploading = true; // 设置上传状态为true  
+            this.$http({  
+                url: this.$http.adornUrl(`/manage/wxAssets/materialNewsUpload`), // 请求URL  
+                method: 'post', // 请求方法  
+                data: this.$http.adornData(this.articles, false) // 请求数据  
+            }).then(({ data }) => {  
+                // 处理成功响应  
+                if (data && data.code === 200) {  
+                    this.$message({  
+                        message: "操作成功", // 成功提示  
+                        type: "success",  
+                        duration: 1500,  
+                        onClose: () => {  
+                            this.$emit("refreshDataList"); // 发射刷新数据的事件  
+                            this.$emit('hide'); // 关闭弹窗  
+                        }  
+                    });  
+                } else {  
+                    this.$message.error(data.msg); // 显示错误消息  
+                }  
+                this.uploading = false; // 重置上传状态  
+            });  
+        },  
+        // 更新文章内容  
+        materialArticleUpdate() {  
+            this.uploading = true; // 设置上传状态为true  
+            this.$http({  
+                url: this.$http.adornUrl(`/manage/wxAssets/materialArticleUpdate`), // 请求URL  
+                method: 'post', // 请求方法  
+                data: this.$http.adornData({  
+                    'mediaId': this.mediaId, // 传递的mediaId  
+                    'index': this.selectedIndex, // 传递的文章索引  
+                    'articles': this.articles[this.selectedIndex] // 传递的文章数据  
+                })  
+            }).then(({ data }) => {  
+                // 处理成功响应  
+                if (data && data.code === 200) {  
+                    this.$message.success('操作成功'); // 成功提示  
+                } else {  
+                    this.$message.error(data.msg); // 显示错误消息  
+                }  
+                this.uploading = false; // 重置上传状态  
+            });  
+        },  
+        // 添加新文章  
+        addArticle() {  
+            this.articles.push({ ...articleTemplate }); // 将新的文章模板推入文章列表  
+            this.selectedIndex = this.articles.length - 1; // 更新当前选中索引为新增文章  
+        },  
+        // 处理素材选择  
+        onAssetsSelect(assetsInfo) {  
+            Vue.set(this.articles[this.selectedIndex], 'thumbMediaId', assetsInfo.mediaId); // 设置选择的封面图的mediaId  
+            this.assetsSelectorVisible = false; // 关闭素材选择器  
+        }  
+    }  
+}  
+</script>  
+
+<style scoped>  
+.card-list {   
+    width: 300px; /* 卡片列表的宽度 */  
+    padding-right: 10px; /* 右侧内边距 */  
+    border-right: 1px solid #eeeeee; /* 右侧边框 */  
+}  
+.card-item {  
+    margin-top: 2px; /* 上外边距 */  
+    padding: 20px 5px; /* 内边距 */  
+    border: 1px solid #ddd; /* 边框 */  
+    font-size: 12px; /* 字体大小 */  
+    line-height: 15px; /* 行高 */  
+}  
+.card-item.selected {  
+    border: 2px solid #409EFF; /* 选中时的边框颜色 */  
+}  
+.text-cut-name {  
+    display: -webkit-box; /* 使用盒子模型 */  
+    word-wrap: break-word; /* 自动换行 */  
+    word-break: break-all; /* 强制断行 */  
+    -webkit-box-orient: vertical; /* 垂直方向的盒子模型 */  
+    -webkit-line-clamp: 2; /* 限制显示的行数 */  
+    overflow: hidden; /* 溢出隐藏 */  
+}  
+.card-add {  
+    margin-top: 2px; /* 上外边距 */  
+    display: block; /* 块级元素 */  
+    border: 1px dotted #ddd; /* 虚线边框 */  
+    color: #ddd; /* 文字颜色 */  
+    text-align: center; /* 居中对齐 */  
+    font-size: 30px; /* 文字大小 */  
+    line-height: 50px; /* 行高 */  
+}  
+.dialog-footer {  
+    margin-top: 20px; /* 上外边距 */  
+    text-align: right; /* 右对齐 */  
+}  
 </style>
\ No newline at end of file
diff --git a/src/views/modules/wx/assets/material-news.vue b/src/views/modules/wx/assets/material-news.vue
index 42836b75..e3909200 100644
--- a/src/views/modules/wx/assets/material-news.vue
+++ b/src/views/modules/wx/assets/material-news.vue
@@ -1,26 +1,45 @@
 <template>
+    <!-- 整个页面的面板容器 -->
     <div class="panel">
+        <!-- 根据条件控制显示内容，当addOrUpdateVisible为false时显示以下内容 -->
         <div v-show="!addOrUpdateVisible">
+            <!-- 内联表单，绑定了dataForm数据模型 -->
             <el-form :inline="true" :model="dataForm">
+                <!-- 根据selectMode的值决定是否显示该表单元素，当不是选择模式时显示 -->
                 <el-form-item v-show="!selectMode">
+                    <!-- 按钮，根据权限判断是否显示（调用isAuth方法判断），类型为主要按钮，点击时调用addOrUpdateHandle方法，按钮尺寸为迷你型 -->
                     <el-button size="mini" v-if="isAuth('wx:wxassets:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
                 </el-form-item>
             </el-form>
+            <!-- 加载提示容器，根据dataListLoading的值显示加载状态 -->
             <div  class="flex justify-start" v-loading="dataListLoading">
+                <!-- 循环生成行，n表示行号，这里的rows应该是控制每行显示的元素数量相关 -->
                 <div v-for="n in rows" :key="n">
+                    <!-- 循环遍历dataList数据列表，用于展示具体的数据项 -->
                     <template v-for="(item,i) in dataList">
+                        <!-- 根据条件显示卡片元素，当满足i%rows==n-1时显示，点击卡片会调用onSelect方法传递当前项数据 -->
                         <div class="card"  :key="item.mediaId" v-if="i%rows==n-1" @click="onSelect(item)">
+                            <!-- 卡片的预览部分，用于展示文章相关信息 -->
                             <div class="card-preview">
+                                <!-- 循环遍历文章数组，展示每篇文章的信息，点击文章链接会在新标签页打开（target="_blank"） -->
                                 <a v-for="(article,k) in item.content.articles" :key="k" :href="article.url" class="article-item" target="_blank">
+                                    <!-- 文章标题，做了多行文本截断显示处理 -->
                                     <div class="article-title">{{article.title}}</div>
+                                    <!-- 文章缩略图，通过绑定src属性显示图片 -->
                                     <el-image class="article-thumb" :src="article.thumbUrl"></el-image>
                                 </a>
                             </div>
+                            <!-- 卡片的底部部分，用于展示更新时间以及操作按钮等 -->
                             <div class="card-footer">
+                                <!-- 显示更新时间，使用了moment.js库（通过$moment方法调用）将时间格式化为日历格式 -->
                                 <div>{{$moment(item.updateTime).calendar()}}</div>
+                                <!-- 根据是否是选择模式决定是否显示以下操作按钮 -->
                                 <div class="flex justify-between align-center"  v-show="!selectMode">
+                                    <!-- 复制按钮，点击复制media_id，复制成功和失败分别调用对应的方法 -->
                                     <el-button size="mini" type="text" icon="el-icon-copy-document" v-clipboard:copy="item.mediaId" v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">复制media_id</el-button>
+                                    <!-- 编辑按钮，点击调用addOrUpdateHandle方法传入当前项数据，按钮类型为文本样式 -->
                                     <el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(item)">编辑</el-button>
+                                    <!-- 删除按钮，点击调用deleteHandle方法传入mediaId进行删除操作，按钮类型为文本样式 -->
                                     <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(item.mediaId)">删除</el-button>
                                 </div>
                             </div>
@@ -28,20 +47,23 @@
                     </template>
                 </div>
             </div>
+            <!-- 分页组件，绑定了相关的分页事件和属性，用于切换页面获取不同页的数据 -->
             <el-pagination @current-change="currentChangeHandle" :current-page="pageIndex" :page-size="pageSize" :total="totalCount" layout="total, prev,pager, next, jumper">
             </el-pagination>
         </div>
-        <!-- 新增 / 修改 -->
+        <!-- 新增/修改组件，通过属性和事件与父组件进行交互 -->
         <add-or-update :visible="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="onChange" @hide="addOrUpdateVisible=false"></add-or-update>
     </div>
 </template>
 <script>
+// 引入新增/修改组件
 import AddOrUpdate from './material-news-add-or-update'
 export default {
     name: 'material-news',
     components: { 
         AddOrUpdate
     },
+    // 定义组件接收的属性及其类型和默认值
     props: {
         selectMode: {// 是否选择模式，选择模式下点击素材选中，不可新增和删除
             type: Boolean,
@@ -64,50 +86,63 @@ export default {
         }
     },
     mounted(){
+        // 组件挂载完成后调用init方法进行初始化操作
         this.init();
     },
     methods: {
         init() {
+            // 如果数据列表为空，则调用getDataList方法获取数据
             if (!this.dataList.length) {
                 this.getDataList()
             }
         },
         getDataList() {
+            // 如果正在加载数据，则直接返回，避免重复请求
             if (this.dataListLoading) return
+            // 设置正在加载数据的状态为true
             this.dataListLoading = true
+            // 发起HTTP请求获取数据，对请求的URL和参数进行了装饰处理（应该是统一处理请求相关的配置）
             this.$http({
                 url: this.$http.adornUrl('/manage/wxAssets/materialNewsBatchGet'),
                 params: this.$http.adornParams({
                     'page': this.pageIndex
                 })
             }).then(({ data }) => {
-
+                // 根据返回数据的状态码判断是否请求成功
                 if (data.code == 200) {
+                    // 如果成功，更新数据列表和总记录数
                     this.dataList = data.data.items
                     this.totalCount = data.data.totalCount
                 } else {
+                    // 如果失败，弹出错误提示信息
                     this.$message.error(data.msg);
                 }
+                // 请求完成后，设置正在加载数据的状态为false
                 this.dataListLoading = false
             })
         },
         onSelect(itemInfo) {
+            // 如果处于选择模式，才进行后续操作，点击卡片时会通过$emit触发父组件的selected事件传递当前项信息
             if (!this.selectMode) return
             this.$emit('selected', itemInfo)
         },
-        //删除
+        //删除操作方法
         deleteHandle(id) {
+            // 弹出确认框，让用户确认是否进行删除操作
             this.$confirm(`确定对[mediaId=${id}]进行删除操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 如果用户确认，发起删除的HTTP请求
                 this.$http({
                     url: this.$http.adornUrl('/manage/wxAssets/materialDelete'),
                     method: 'post',
                     data: { mediaId: id }
                 }).then(({ data }) => {
+                    // 根据返回数据判断删除操作是否成功
                     if (data && data.code === 200) {
+                        // 如果成功，弹出成功提示信息，并在提示框关闭后调用onChange方法更新数据列表
                         this.$message({
                             message: '操作成功',
                             type: 'success',
@@ -115,17 +150,18 @@ export default {
                             onClose: () => this.onChange()
                         })
                     } else {
+                        // 如果失败，弹出错误提示信息
                         this.$message.error(data.msg)
                     }
                 })
             })
         },
-        // 当前页
+        // 当前页切换时的处理方法，更新当前页索引并重新获取数据列表
         currentChangeHandle(val) {
             this.pageIndex = val
             this.getDataList()
         },
-        // 新增 / 修改
+        // 新增/修改操作方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件
         addOrUpdateHandle(news) {
             this.addOrUpdateVisible = true
             this.$nextTick(() => {
@@ -133,12 +169,15 @@ export default {
             })
         },
         onCopySuccess() {
+            // 复制成功时的提示方法，弹出成功提示信息
             this.$message.success('已复制')
         },
         onCopyError(err) {
+            // 复制失败时的提示方法，弹出失败提示信息，并可以获取到具体的错误信息
             this.$message.error('复制失败,可能是此浏览器不支持复制')
         },
         onChange() {
+            // 数据更新相关的方法，重置当前页索引为1，重新获取数据列表，并通过$emit触发父组件的change事件
             this.pageIndex=1
             this.getDataList()
             this.$emit('change')
diff --git a/src/views/modules/wx/msg-reply-rule-add-or-update.vue b/src/views/modules/wx/msg-reply-rule-add-or-update.vue
index 0a3e5ab4..610d744a 100644
--- a/src/views/modules/wx/msg-reply-rule-add-or-update.vue
+++ b/src/views/modules/wx/msg-reply-rule-add-or-update.vue
@@ -1,14 +1,22 @@
 <template>
-    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" >
+    <!-- el-dialog组件用于弹出对话框，根据dataForm中是否有id来设置标题为“新增”或“修改”，点击模态框背景不关闭对话框，通过visible属性双向绑定控制显示隐藏 -->
+    <el-dialog :title="!dataForm.id? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible" >
+        <!-- el-form组件定义表单，绑定dataForm数据模型，应用dataRule验证规则，设置标签宽度为80px -->
         <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
+            <!-- 规则名称的表单项，对应dataForm中的ruleName属性，设置了必填验证 -->
             <el-form-item label="规则名称" prop="ruleName">
+                <!-- el-input组件实现输入框，双向绑定dataForm.ruleName，有占位提示文字 -->
                 <el-input v-model="dataForm.ruleName" placeholder="规则名称"></el-input>
             </el-form-item>
+            <!-- 匹配词的表单项，使用自定义的tags-editor组件，双向绑定dataForm.matchValue，用于输入或编辑匹配词（可能是多个，类似标签形式） -->
             <el-form-item label="匹配词" prop="matchValue">
                 <tags-editor v-model="dataForm.matchValue"></tags-editor>
             </el-form-item>
+            <!-- 第一行布局，使用el-row包裹 -->
             <el-row>
+                <!-- 占12列，用于放置作用范围相关的表单元素 -->
                 <el-col :span="12">
+                    <!-- 作用范围的表单项，对应dataForm中的appid属性，通过下拉选择框选择，有全部公众号和当前公众号两个选项 -->
                     <el-form-item label="作用范围" prop="appid">
                         <el-select v-model="dataForm.appid" placeholder="作用范围">
                             <el-option label="全部公众号" value=""></el-option>
@@ -16,71 +24,91 @@
                         </el-select>
                     </el-form-item>
                 </el-col>
+                <!-- 同样占12列，用于放置精确匹配相关的表单元素，使用el-switch组件实现开关切换功能，双向绑定dataForm.exactMatch -->
                 <el-col :span="12">
                     <el-form-item label="精确匹配" prop="exactMatch">
                         <el-switch v-model="dataForm.exactMatch" :active-value="true" :inactive-value="false"></el-switch>
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 第二行布局 -->
             <el-row>
+                <!-- 占12列，用于放置回复类型相关的表单元素 -->
                 <el-col :span="12">
+                    <!-- 回复类型的表单项，对应dataForm中的replyType属性，通过下拉选择框选择，选项通过循环KefuMsgType生成，选择改变时触发onReplyTypeChange方法 -->
                     <el-form-item label="回复类型" prop="replyType">
                         <el-select v-model="dataForm.replyType" @change="onReplyTypeChange">
                             <el-option v-for="(name,key) in KefuMsgType" :key="key" :value="key" :label="name"></el-option>
                         </el-select>
                     </el-form-item>
                 </el-col>
+                <!-- 占12列，用于放置是否启用相关的表单元素，使用el-switch组件实现开关切换功能，双向绑定dataForm.status -->
                 <el-col :span="12">
                     <el-form-item label="是否启用" prop="status">
                         <el-switch v-model="dataForm.status" :active-value="true" :inactive-value="false"></el-switch>
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 第三行布局 -->
             <el-row>
+                <!-- 占12列，用于放置生效时间相关的表单元素，使用el-time-picker组件实现时间选择功能，绑定dataForm.effectTimeStart，设置时间格式 -->
                 <el-col :span="12">
                     <el-form-item label="生效时间" prop="effectTimeStart">
                         <el-time-picker v-model="dataForm.effectTimeStart" value-format="HH:mm:ss"></el-time-picker>
                     </el-form-item>
                 </el-col>
+                <!-- 占12列，用于放置失效时间相关的表单元素，使用el-time-picker组件实现时间选择功能，绑定dataForm.effectTimeEnd，设置时间格式 -->
                 <el-col :span="12">
                     <el-form-item label="失效时间" prop="effectTimeEnd">
                         <el-time-picker v-model="dataForm.effectTimeEnd" value-format="HH:mm:ss"></el-time-picker>
                     </el-form-item>
                 </el-col>
             </el-row>
+            <!-- 回复内容的表单项，对应dataForm中的replyContent属性，使用el-input组件实现文本域输入框，双向绑定dataForm.replyContent，有行数设置和占位提示文字 -->
             <el-form-item label="回复内容" prop="replyContent">
                 <el-input v-model="dataForm.replyContent" type="textarea" :rows="5" placeholder="文本、图文ID、media_id、json配置"></el-input>
+                <!-- 当回复类型为文本时显示插入链接按钮，点击调用addLink方法在回复内容中添加链接 -->
                 <el-button type="text" v-show="'text'==dataForm.replyType" @click="addLink">插入链接</el-button>
+                <!-- 根据assetsType的值决定是否显示按钮，点击打开素材选择器（通过控制assetsSelectorVisible属性），按钮文字根据回复类型有所不同 -->
                 <el-button type="text" v-show="assetsType" @click="assetsSelectorVisible=true">
                     从素材库中选择<span v-if="'miniprogrampage'==dataForm.replyType || 'music'==dataForm.replyType">缩略图</span>
                 </el-button>
             </el-form-item>
+            <!-- 备注说明的表单项，对应dataForm中的desc属性，使用el-input组件实现输入框，双向绑定dataForm.desc，有占位提示文字 -->
             <el-form-item label="备注说明" prop="desc">
                 <el-input v-model="dataForm.desc" placeholder="备注说明"></el-input>
             </el-form-item>
         </el-form>
+        <!-- 对话框底部的按钮区域，通过插槽定义 -->
         <span slot="footer" class="dialog-footer">
+            <!-- 取消按钮，点击时设置visible为false关闭对话框 -->
             <el-button @click="visible = false">取消</el-button>
+            <!-- 确定按钮，类型为主要按钮，点击时调用dataFormSubmit方法进行表单提交 -->
             <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
         </span>
+        <!-- 素材选择器组件，根据条件控制显示，通过属性和事件与当前组件进行交互，用于选择素材相关操作 -->
         <assets-selector v-if="assetsSelectorVisible && assetsType" :visible="assetsSelectorVisible" :selectType="assetsType" @selected="onAssetsSelect" @onClose="assetsSelectorVisible=false"></assets-selector>
     </el-dialog>
 </template>
 
 <script>
+// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
 import { mapState } from 'vuex'
 export default {
     components: {
+        // 异步加载tags-editor组件，用于编辑匹配词相关功能
         tagsEditor: () => import('@/components/tags-editor'),
-        AssetsSelector:()=>import('./assets/assets-selector')
+        // 异步加载AssetsSelector组件，用于选择素材相关功能
+        AssetsSelector: () => import('./assets/assets-selector')
     },
     data() {
         return {
             visible: false,
-            assetsSelectorVisible:false,
+            assetsSelectorVisible: false,
             dataForm: {
+                // 规则ID，初始化为0
                 ruleId: 0,
-                appid:'',
+                appid: '',
                 ruleName: "",
                 exactMatch: false,
                 matchValue: "",
@@ -92,24 +120,31 @@ export default {
                 effectTimeEnd: "23:59:59"
             },
             dataRule: {
+                // 规则名称的验证规则，必填，触发验证的时机是失去焦点（blur）
                 ruleName: [
                     { required: true, message: "规则名称不能为空", trigger: "blur" }
                 ],
+                // 匹配词的验证规则，必填，触发验证的时机是失去焦点
                 matchValue: [
                     { required: true, message: "匹配的关键词、事件等不能为空", trigger: "blur" }
                 ],
+                // 回复类型的验证规则，必填，触发验证的时机是失去焦点
                 replyType: [
                     { required: true, message: "回复类型（1:文本2:图文3媒体）不能为空", trigger: "blur" }
                 ],
+                // 回复内容的验证规则，必填，触发验证的时机是失去焦点
                 replyContent: [
                     { required: true, message: "回复内容不能为空", trigger: "blur" }
                 ],
+                // 是否启用的验证规则，必填，触发验证的时机是失去焦点
                 status: [
                     { required: true, message: "是否有效不能为空", trigger: "blur" }
                 ],
+                // 生效起始时间的验证规则，必填，触发验证的时机是失去焦点
                 effectTimeStart: [
                     { required: true, message: "生效起始时间不能为空", trigger: "blur" }
                 ],
+                // 生效结束时间的验证规则，必填，触发验证的时机是失去焦点
                 effectTimeEnd: [
                     { required: true, message: "生效结束时间不能为空", trigger: "blur" }
                 ]
@@ -117,49 +152,60 @@ export default {
         };
     },
     computed: mapState({
-        KefuMsgType: state=>state.message.KefuMsgType,
-        selectedAppid:state=>state.wxAccount.selectedAppid,
-        assetsType(){
-            const config={//消息类型与选择素材类型对应关系
-                'image':'image',
-                'voice':'voice',
-                'video':'video',
-                'mpnews':'news',
-                'miniprogrampage':'image',//小程序需选择卡片图
-                'music':'image'
-            }
-            return config[this.dataForm.replyType] || ''
+        // 从Vuex的state中获取message模块下的KefuMsgType状态，映射到组件的计算属性中，用于回复类型下拉框的选项数据
+        KefuMsgType: state => state.message.KefuMsgType,
+        // 从Vuex的state中获取wxAccount模块下的selectedAppid状态，映射到组件的计算属性中，用于作用范围下拉框中当前公众号选项的值
+        selectedAppid: state => state.wxAccount.selectedAppid,
+        assetsType() {
+            const config = {
+                // 定义消息类型与选择素材类型的对应关系，用于根据回复类型确定在素材库中选择的素材类型
+                'image': 'image',
+                'voice': 'voice',
+                'video': 'video',
+                'mpnews': 'news',
+                'miniprogrampage': 'image', // 小程序需选择卡片图
+                'music': 'image'
+            };
+            return config[this.dataForm.replyType] || '';
         }
     }),
     methods: {
         init(id) {
+            // 初始化时设置dataForm的ruleId属性，传入的id为空则设置为0
             this.dataForm.ruleId = id || 0;
+            // 设置对话框显示状态为true，即打开对话框
             this.visible = true;
             this.$nextTick(() => {
+                // 表单DOM更新后，重置表单所有字段的值
                 this.$refs["dataForm"].resetFields();
                 if (this.dataForm.ruleId) {
+                    // 如果ruleId有值，表示是修改操作，发起HTTP请求获取规则详情信息
                     this.$http({
-                        url: this.$http.adornUrl( `/manage/msgReplyRule/info/${this.dataForm.ruleId}` ),
+                        url: this.$http.adornUrl(`/manage/msgReplyRule/info/${this.dataForm.ruleId}`),
                         method: "get",
                         params: this.$http.adornParams()
                     }).then(({ data }) => {
                         if (data && data.code === 200) {
+                            // 如果请求成功，将返回的规则数据赋值给dataForm
                             this.dataForm = data.msgReplyRule;
                         }
                     });
                 }
             });
         },
-        // 表单提交
+        // 表单提交方法
         dataFormSubmit() {
+            // 对表单进行验证，验证结果通过回调函数的参数valid返回
             this.$refs["dataForm"].validate(valid => {
                 if (valid) {
+                    // 如果表单验证通过，发起HTTP请求保存或更新规则数据（根据ruleId是否有值判断是新增还是更新操作）
                     this.$http({
-                        url: this.$http.adornUrl(`/manage/msgReplyRule/${!this.dataForm.ruleId ? "save" : "update"}`),
+                        url: this.$http.adornUrl(`/manage/msgReplyRule/${!this.dataForm.ruleId? "save" : "update"}`),
                         method: "post",
                         data: this.$http.adornData(this.dataForm)
                     }).then(({ data }) => {
                         if (data && data.code === 200) {
+                            // 如果操作成功，弹出成功提示信息，提示框关闭后设置对话框隐藏，并通过$emit触发父组件的refreshDataList事件
                             this.$message({
                                 message: "操作成功",
                                 type: "success",
@@ -170,6 +216,7 @@ export default {
                                 }
                             });
                         } else {
+                            // 如果操作失败，弹出错误提示信息
                             this.$message.error(data.msg);
                         }
                     });
@@ -177,9 +224,11 @@ export default {
             });
         },
         addLink() {
+            // 插入链接的方法，在回复内容中添加一个简单的链接示例文本（实际应用中可能需要更灵活的处理方式来确定链接地址和文字等）
             this.dataForm.replyContent += '<a href="链接地址">链接文字</a>'
         },
         onReplyTypeChange(value) {
+            // 根据回复类型改变时的不同值，设置不同的回复内容默认值（以JSON格式字符串表示，方便后续解析和使用）
             if ("miniprogrampage" == value) {
                 let demo = { title: "标题", appid: "小程序APPID", pagepath: "页面地址", thumb_media_id: "缩略图media_id" };
                 this.dataForm.replyContent = JSON.stringify(demo, null, 4)
@@ -190,21 +239,22 @@ export default {
                 let demo = { head_content: "开头文字", list: [{ id: "菜单1ID", content: "菜单2内容" }, { id: "菜单2ID", content: "菜单2内容" }, { id: "菜单nID", content: "菜单n内容" }], tail_content: "结尾文字" }
                 this.dataForm.replyContent = JSON.stringify(demo, null, 4)
             } else if ("news" == value) {
-                let demo={title:"文章标题",description:"文章简介",url:"链接URL",picUrl:"缩略图URL"}
+                let demo = { title: "文章标题", description: "文章简介", url: "链接URL", picUrl: "缩略图URL" }
                 this.dataForm.replyContent = JSON.stringify(demo, null, 4)
             } else {
                 this.dataForm.replyContent = '媒体素材media_id'
             }
         },
-        onAssetsSelect(assetsInfo){
-            if(this.dataForm.replyType=='miniprogrampage' || this.dataForm.replyType=='music'){
-                let data = JSON.parse(this.dataForm.replyContent)
-                if(data && data.thumb_media_id)data.thumb_media_id=assetsInfo.mediaId
-                this.dataForm.replyContent = JSON.stringify(data, null, 4)
-            }else{
-                this.dataForm.replyContent = assetsInfo.mediaId
+        onAssetsSelect(assetsInfo) {
+            // 素材选择后的处理方法，根据回复类型判断如何更新回复内容，若是小程序页面或音乐类型，更新对应的缩略图media_id，否则直接赋值为所选素材的mediaId
+            if (this.dataForm.replyType =='miniprogrampage' || this.dataForm.replyType =='music') {
+                let data = JSON.parse(this.dataForm.replyContent);
+                if (data && data.thumb_media_id) data.thumb_media_id = assetsInfo.mediaId;
+                this.dataForm.replyContent = JSON.stringify(data, null, 4);
+            } else {
+                this.dataForm.replyContent = assetsInfo.mediaId;
             }
-            this.assetsSelectorVisible=false
+            this.assetsSelectorVisible = false;
         }
     }
 };
diff --git a/src/views/modules/wx/msg-reply-rule.vue b/src/views/modules/wx/msg-reply-rule.vue
index c728b4da..b834ae60 100644
--- a/src/views/modules/wx/msg-reply-rule.vue
+++ b/src/views/modules/wx/msg-reply-rule.vue
@@ -1,50 +1,72 @@
 <template>
+    <!-- 整个模块的容器类，用于包裹后续的表单、表格、分页等组件 -->
     <div class="mod-config">
+        <!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <!-- 匹配关键词输入框所在的表单项 -->
             <el-form-item>
+                <!-- 使用el-input组件实现输入框，双向绑定dataForm.matchValue，有占位提示文字且可清空输入内容 -->
                 <el-input v-model="dataForm.matchValue" placeholder="匹配关键词" clearable></el-input>
             </el-form-item>
+            <!-- 操作按钮所在的表单项 -->
             <el-form-item>
+                <!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
                 <el-button @click="getDataList()">查询</el-button>
+                <!-- 新增按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为主要按钮，点击时调用addOrUpdateHandle方法 -->
                 <el-button v-if="isAuth('wx:msgreplyrule:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+                <!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
                 <el-button v-if="isAuth('wx:msgreplyrule:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
             </el-form-item>
         </el-form>
+        <!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，可展开行（type="expand"），加载数据时显示加载提示，监听选择项变化事件 -->
         <el-table :data="dataList" border type="expand" v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <!-- 展开列，通过插槽定义展开内容，这里展示了更多规则相关详细信息的表单 -->
             <el-table-column type="expand">
                 <template slot-scope="props">
                     <el-form label-position="left" inline class="demo-table-expand">
+                        <!-- 作用范围信息展示的表单项，根据数据项中的appid值判断显示“当前公众号”或“全部公众号” -->
                         <el-form-item label="作用范围">
-                            <span>{{ props.row.appid?'当前公众号':'全部公众号' }}</span>
+                            <span>{{ props.row.appid? '当前公众号' : '全部公众号' }}</span>
                         </el-form-item>
+                        <!-- 精确匹配信息展示的表单项，根据数据项中的exactMatch值判断显示“是”或“否” -->
                         <el-form-item label="精确匹配">
-                            <span>{{ props.row.exactMatch?'是':'否' }}</span>
+                            <span>{{ props.row.exactMatch? '是' : '否' }}</span>
                         </el-form-item>
+                        <!-- 是否有效信息展示的表单项，根据数据项中的status值判断显示“是”或“否” -->
                         <el-form-item label="是否有效">
-                            <span>{{ props.row.status?'是':'否' }}</span>
+                            <span>{{ props.row.status? '是' : '否' }}</span>
                         </el-form-item>
+                        <!-- 备注说明信息展示的表单项，直接显示数据项中的desc值 -->
                         <el-form-item label="备注说明">
                             <span>{{ props.row.desc }}</span>
                         </el-form-item>
+                        <!-- 生效时间信息展示的表单项，直接显示数据项中的effectTimeStart值 -->
                         <el-form-item label="生效时间">
                             <span>{{ props.row.effectTimeStart }}</span>
                         </el-form-item>
+                        <!-- 失效时间信息展示的表单项，直接显示数据项中的effectTimeEnd值 -->
                         <el-form-item label="失效时间">
                             <span>{{ props.row.effectTimeEnd }}</span>
                         </el-form-item>
                     </el-form>
                 </template>
             </el-table-column>
+            <!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
             <el-table-column type="selection" header-align="center" align="center" width="50">
             </el-table-column>
+            <!-- 规则名称列，对应dataList中数据项的ruleName属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="ruleName" header-align="center" align="center" show-overflow-tooltip label="规则名称">
             </el-table-column>
+            <!-- 匹配关键词列，对应dataList中数据项的matchValue属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="matchValue" header-align="center" align="center" show-overflow-tooltip label="匹配关键词">
             </el-table-column>
+            <!-- 消息类型列，对应dataList中数据项的replyType属性，使用formatter函数格式化显示内容，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="replyType" header-align="center" align="center" :formatter="replyTypeFormat" label="消息类型">
             </el-table-column>
+            <!-- 回复内容列，对应dataList中数据项的replyContent属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="replyContent" header-align="center" align="center" show-overflow-tooltip label="回复内容">
             </el-table-column>
+            <!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了修改和删除按钮 -->
             <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                 <template slot-scope="scope">
                     <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.ruleId)">修改</el-button>
@@ -52,15 +74,18 @@
                 </template>
             </el-table-column>
         </el-table>
+        <!-- 分页组件，绑定了相关的分页事件和属性，用于切换每页显示数量、当前页码等操作 -->
         <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
         </el-pagination>
-        <!-- 弹窗, 新增 / 修改 -->
+        <!-- 新增/修改组件，通过属性和事件与父组件进行交互，根据addOrUpdateVisible的值决定是否显示 -->
         <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
     </div>
 </template>
 
 <script>
+// 引入新增/修改组件，用于实现规则的新增或修改功能相关交互逻辑
 import AddOrUpdate from './msg-reply-rule-add-or-update'
+// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
 import { mapState } from 'vuex'
 export default {
     components: {
@@ -81,16 +106,20 @@ export default {
         }
     },
     computed: mapState({
-        KefuMsgType: state=>state.message.KefuMsgType
+        // 从Vuex的state中获取message模块下的KefuMsgType状态，映射到组件的计算属性中，用于消息类型列的格式化显示操作
+        KefuMsgType: state => state.message.KefuMsgType
     }),
 
     activated() {
+        // 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
         this.getDataList()
     },
     methods: {
-        // 获取数据列表
+        // 获取数据列表的方法
         getDataList() {
+            // 设置正在加载数据的状态为true
             this.dataListLoading = true
+            // 发起HTTP请求获取消息回复规则的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
             this.$http({
                 url: this.$http.adornUrl('/manage/msgReplyRule/list'),
                 method: 'get',
@@ -100,52 +129,60 @@ export default {
                     'matchValue': this.dataForm.matchValue
                 })
             }).then(({ data }) => {
+                // 根据返回数据的状态码判断是否请求成功
                 if (data && data.code === 200) {
+                    // 如果成功，更新数据列表和总记录数
                     this.dataList = data.page.list
                     this.totalCount = data.page.totalCount
                 } else {
+                    // 如果失败，清空数据列表和总记录数
                     this.dataList = []
                     this.totalCount = 0
                 }
+                // 请求完成后，设置正在加载数据的状态为false
                 this.dataListLoading = false
             })
         },
-        // 每页数
+        // 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
         sizeChangeHandle(val) {
             this.pageSize = val
             this.pageIndex = 1
             this.getDataList()
         },
-        // 当前页
+        // 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
         currentChangeHandle(val) {
             this.pageIndex = val
             this.getDataList()
         },
-        // 多选
+        // 处理表格中选择项变化的方法，更新选中的数据项列表
         selectionChangeHandle(val) {
             this.dataListSelections = val
         },
-        // 新增 / 修改
+        // 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入规则的id（可为空表示新增）
         addOrUpdateHandle(id) {
             this.addOrUpdateVisible = true
             this.$nextTick(() => {
                 this.$refs.addOrUpdate.init(id)
             })
         },
-        // 删除
+        // 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
         deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.ruleId)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+            // 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的ruleId数组进行批量删除
+            var ids = id? [id] : this.dataListSelections.map(item => item.ruleId)
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
                 this.$http({
                     url: this.$http.adornUrl('/manage/msgReplyRule/delete'),
                     method: 'post',
                     data: this.$http.adornData(ids, false)
                 }).then(({ data }) => {
+                    // 根据返回数据判断删除操作是否成功
                     if (data && data.code === 200) {
+                        // 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
                         this.$message({
                             message: '操作成功',
                             type: 'success',
@@ -153,14 +190,16 @@ export default {
                             onClose: () => this.getDataList()
                         })
                     } else {
+                        // 如果失败，弹出错误提示信息
                         this.$message.error(data.msg)
                     }
                 })
             })
         },
+        // 消息类型格式化的方法，根据数据项中的消息类型值，从KefuMsgType对象中获取对应的显示名称并返回
         replyTypeFormat(row, column, cellValue) {
             return this.KefuMsgType[cellValue];
         }
     }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/msg-template-add-or-update.vue b/src/views/modules/wx/msg-template-add-or-update.vue
index 199aed64..73f63324 100644
--- a/src/views/modules/wx/msg-template-add-or-update.vue
+++ b/src/views/modules/wx/msg-template-add-or-update.vue
@@ -1,165 +1,195 @@
-<template>
-    <el-dialog title="模板配置" :close-on-click-modal="false" :visible.sync="visible">
-        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" size="mini">
-            <el-form-item label="标题" prop="title">
-                <el-input v-model="dataForm.title" placeholder="标题"></el-input>
-            </el-form-item>
-            <el-form-item label="链接" prop="url">
-                <el-input v-model="dataForm.url" placeholder="跳转链接"></el-input>
-            </el-form-item>
-            <div>
-                <el-form-item label="小程序appid" prop="miniprogram.appid">
-                    <el-input v-model="dataForm.miniprogram.appid" placeholder="小程序appid"></el-input>
-                </el-form-item>
-                <el-form-item label="小程序路径" prop="miniprogram.pagePath">
-                    <el-input v-model="dataForm.miniprogram.pagePath" placeholder="小程序pagePath"></el-input>
-                </el-form-item>
-            </div>
-            <el-row>
-                <el-col :span="16">
-                    <el-form-item label="模版名称" prop="name">
-                        <el-input v-model="dataForm.name" placeholder="模版名称"></el-input>
-                    </el-form-item>
-                </el-col>
-                <el-col :span="8">
-                    <el-form-item label="有效" prop="status">
-                        <el-switch v-model="dataForm.status" placeholder="是否有效" :active-value="true" :inactive-value="false"></el-switch>
-                    </el-form-item>
-                </el-col>
-            </el-row>
-            <div class="form-group-area">
-                <el-form-item  class="form-group-title">消息填充数据，请对照模板内容填写</el-form-item>
-                <el-form-item>
-                    <el-input type="textarea" disabled autosize v-model="dataForm.content" placeholder="模版"></el-input>
-                </el-form-item>
-                <el-row v-for="(item,index) in dataForm.data" :key="item.name">
-                    <el-col :span="16">
-                        <el-form-item :label="item.name" :prop="'data.'+index+'.value'" :rules="[{required: true,message: '填充内容不得为空', trigger: 'blur' }]">
-                            <el-input type="textarea" autosize rows="1" v-model="item.value" placeholder="填充内容"  ></el-input>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item label="颜色" >
-                            <el-input type="color" v-model="item.color" placeholder="颜色"></el-input>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </div>
-        </el-form>
-        <span slot="footer" class="dialog-footer">
-            <el-button @click="visible = false">取消</el-button>
-            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-        </span>
-    </el-dialog>
-</template>
+<template>  
+    <!-- el-dialog组件用于创建一个对话框，设置了标题、点击模态框不关闭、双向绑定显示隐藏状态等属性 -->  
+    <el-dialog title="模板配置" :close-on-click-modal="false" :visible.sync="visible">  
+        <!-- el-form组件用于创建表单，绑定了表单数据模型、验证规则，设置了标签宽度、尺寸等属性 -->  
+        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" size="mini">  
+            <!-- 表单项目，用于输入标题，绑定了dataForm中的title字段，设置了提示文字 -->  
+            <el-form-item label="标题" prop="title">  
+                <el-input v-model="dataForm.title" placeholder="标题"></el-input>  
+            </el-form-item>  
+            <!-- 表单项目，用于输入链接，绑定了dataForm中的url字段，设置了提示文字 -->  
+            <el-form-item label="链接" prop="url">  
+                <el-input v-model="dataForm.url" placeholder="跳转链接"></el-input>  
+            </el-form-item>  
+            <div>  
+                <!-- 表单项目，用于输入小程序appid，绑定了dataForm.miniprogram.appid字段，设置了提示文字 -->  
+                <el-form-item label="小程序appid" prop="miniprogram.appid">  
+                    <el-input v-model="dataForm.miniprogram.appid" placeholder="小程序appid"></el-input>  
+                </el-form-item>  
+                <!-- 表单项目，用于输入小程序路径，绑定了dataForm.miniprogram.pagePath字段，设置了提示文字 -->  
+                <el-form-item label="小程序路径" prop="miniprogram.pagePath">  
+                    <el-input v-model="dataForm.miniprogram.pagePath" placeholder="小程序pagePath"></el-input>  
+                </el-form-item>  
+            </div>  
+            <el-row>  
+                <el-col :span="16">  
+                    <!-- 表单项目，用于输入模版名称，绑定了dataForm中的name字段，设置了提示文字 -->  
+                    <el-form-item label="模版名称" prop="name">  
+                        <el-input v-model="dataForm.name" placeholder="模版名称"></el-input>  
+                    </el-form-item>  
+                </el-col>  
+                <el-col :span="8">  
+                    <!-- 表单项目，使用el-switch组件用于切换是否有效状态，绑定了dataForm中的status字段 -->  
+                    <el-form-item label="有效" prop="status">  
+                        <el-switch v-model="dataForm.status" placeholder="是否有效" :active-value="true" :inactive-value="false"></el-switch>  
+                    </el-form-item>  
+                </el-col>  
+            </el-row>  
+            <div class="form-group-area">  
+                <!-- 表单项目，用于显示提示信息，告知消息填充数据的相关要求 -->  
+                <el-form-item class="form-group-title">消息填充数据，请对照模板内容填写</el-form-item>  
+                <!-- 表单项目，使用textarea类型的el-input展示模板内容，设置为禁用状态 -->  
+                <el-form-item>  
+                    <el-input type="textarea" disabled autosize v-model="dataForm.content" placeholder="模版"></el-input>  
+                </el-form-item>  
+                <!-- 使用v-for循环遍历dataForm.data数组，动态生成表单项目，用于输入消息填充数据及设置颜色 -->  
+                <el-row v-for="(item, index) in dataForm.data" :key="item.name">  
+                    <el-col :span="16">  
+                        <!-- 表单项目，根据循环的索引和字段名绑定对应的数据项的value字段，设置了必填验证规则 -->  
+                        <el-form-item :label="item.name" :prop="'data.' + index + '.value'" :rules="[{required: true, message: '填充内容不得为空', trigger: 'blur' }]">  
+                            <el-input type="textarea" autosize rows="1" v-model="item.value" placeholder="填充内容"></el-input>  
+                        </el-form-item>  
+                    </el-col>  
+                    <el-col :span="8">  
+                        <!-- 表单项目，用于输入颜色值，绑定对应数据项的color字段 -->  
+                        <el-form-item label="颜色">  
+                            <el-input type="color" v-model="item.color" placeholder="颜色"></el-input>  
+                        </el-form-item>  
+                    </el-col>  
+                </el-row>  
+            </div>  
+        </el-form>  
+                <!-- 在对话框的底部插槽中添加取消和确定按钮，分别绑定对应的点击事件 -->  
+        <span slot="footer" class="dialog-footer">  
+            <el-button @click="visible = false">取消</el-button>  
+            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>  
+        </span>  
+    </el-dialog>  
+</template>  
 
-<script>
-export default {
-    data() {
-        return {
-            visible: false,
-            dataForm: {
-                id: 0,
-                templateId: '',
-                title: '',
-                data: [],
-                url: '',
-                miniprogram:{appid:'',pagePath:''},
-                content: '',
-                status: true,
-                name: ''
-            },
-            dataRule: {
-                title: [
-                    { required: true, message: '标题不能为空', trigger: 'blur' }
-                ],
-                data: [
-                    { required: true, message: '内容不能为空', trigger: 'blur' }
-                ],
-                name: [
-                    { required: true, message: '模版名称不能为空', trigger: 'blur' }
-                ]
-            }
-        }
-    },
-    methods: {
-        init(id) {
-            console.log('init',id)
-            this.dataForm.id = id || 0
-            this.visible = true
-            this.$nextTick(() => {
-                this.$refs['dataForm'].resetFields()
-                if (this.dataForm.id) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/manage/msgTemplate/info/${this.dataForm.id}`),
-                        method: 'get',
-                        params: this.$http.adornParams()
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.transformTemplate(data.msgTemplate)
-                        }else{
-                            this.$message.error(data.msg)
-                        }
-                    })
-                }
-            })
-        },
-        /**
-         * 根据content信息展开data配置项(content为微信公众平台后台配置的模板)
-         * 如content='{{first.DATA}} ↵商品名称：{{keyword1.DATA}} ↵购买时间：{{keyword2.DATA}} ↵{{remark.DATA}}'
-         * 则生成data=[{name:'first',value:'',color:''},{name:'first',value:'',color:''},{name:'first',value:'',color:''}]
-         * 展示表单让管理员给对应的字段填充内容
-         */
-        transformTemplate(template){
-            if(!template.miniprogram)template.miniprogram={appid:'',pagePath:''}
-            if(template.data instanceof Array) {//已经配置过了，直接读取
-                this.dataForm =  template
-                return
-            }
+<script>  
+export default {  
+    data() {  
+        return {  
+            visible: false,  // 控制对话框的显示状态  
+            // 表单数据对象，包含了各种表单字段的初始值，如id、templateId、标题、数据数组、链接等  
+            dataForm: {  
+                id: 0,  
+                templateId: '',  
+                title: '',  
+                data: [],  // 用于存储动态生成的数据项  
+                url: '',  
+                miniprogram: { appid: '', pagePath: '' },  // 小程序相关信息  
+                content: '',  // 模板内容  
+                status: true,  // 模板的有效状态  
+                name: ''  // 模板名称  
+            },  
+            // 表单验证规则对象，定义了部分字段的必填等验证规则  
+            dataRule: {  
+                title: [  
+                    { required: true, message: '标题不能为空', trigger: 'blur' }  
+                ],  
+                data: [  
+                    { required: true, message: '内容不能为空', trigger: 'blur' }  
+                ],  
+                name: [  
+                    { required: true, message: '模版名称不能为空', trigger: 'blur' }  
+                ]  
+            }  
+        }  
+    },  
+    methods: {  
+        // 初始化方法，接受一个id作为参数  
+        init(id) {  
+            console.log('init', id);  
+            // 设置表单数据对象的id字段，如果传入的id为空则设为0  
+            this.dataForm.id = id || 0;  
+            // 设置对话框为显示状态  
+            this.visible = true;  
+            this.$nextTick(() => {  
+                // 重置表单字段  
+                this.$refs['dataForm'].resetFields();  
+                if (this.dataForm.id) {  
+                    // 如果有id，使用axios（这里假设$http是基于axios封装的）发送GET请求获取模板信息  
+                    this.$http({  
+                        url: this.$http.adornUrl(`/manage/msgTemplate/info/${this.dataForm.id}`),  
+                        method: 'get',  
+                        params: this.$http.adornParams()  
+                    }).then(({ data }) => {  
+                        if (data && data.code === 200) {  
+                            // 如果请求成功，调用方法处理获取到的模板信息  
+                            this.transformTemplate(data.msgTemplate);  
+                        } else {  
+                            // 如果请求失败，显示错误提示信息  
+                            this.$message.error(data.msg);  
+                        }  
+                    });  
+                }  
+            });  
+        },  
+        /**  
+         * 根据content信息展开data配置项(content为微信公众平台后台配置的模板)  
+         * 如content='{{first.DATA}} ↵商品名称：{{keyword1.DATA}} ↵购买时间：{{keyword2.DATA}} ↵{{remark.DATA}}'  
+         * 则生成data=[{name:'first',value:'',color:''},{name:'first',value:'',color:''},{name:'first',value:'',color:''}]  
+         * 展示表单让管理员给对应的字段填充内容  
+         */  
+        transformTemplate(template) {  
+            if (!template.miniprogram) template.miniprogram = { appid: '', pagePath: '' };  
+            if (template.data instanceof Array) { // 如果已经配置过了，直接读取  
+                this.dataForm = template;  
+                return;  
+            }  
             
-            template.data=[]
-            let keysArray = template.content.match(/\{\{(\w*)\.DATA\}\}/g) || [] //示例： ["{{first.DATA}}", "{{keyword1.DATA}}", "{{keyword2.DATA}}", "{{remark.DATA}}"]
-            keysArray.map(item=>{
-                name=item.replace('{{','').replace('.DATA}}','')
-                template.data.push({"name":name,"value":"",color:"#000000"})
-            })
-            this.dataForm = template
-        },
-        // 表单提交
-        dataFormSubmit() {
-            this.$refs['dataForm'].validate((valid) => {
-                if (valid) {
-                    this.$http({
-                        url: this.$http.adornUrl(`/manage/msgTemplate/${!this.dataForm.id ? 'save' : 'update'}`),
-                        method: 'post',
-                        data: this.$http.adornData(this.dataForm)
-                    }).then(({ data }) => {
-                        if (data && data.code === 200) {
-                            this.$message({
-                                message: '操作成功',
-                                type: 'success',
-                                duration: 1500,
-                                onClose: () => {
-                                    this.visible = false
-                                    this.$emit('refreshDataList')
-                                }
-                            })
-                        } else {
-                            this.$message.error(data.msg)
-                        }
-                    })
-                }
-            })
-        }
-    }
-}
-</script>
-<style scoped>
-.form-group-area{
-    border:1px dotted gray;
-}
-.form-group-title{
-    color: gray;
-    font-size: 12px;
-}
+            template.data = [];  
+            // 通过正则表达式匹配content中类似{{xxx.DATA}}的内容，提取出其中的xxx部分，放入keysArray数组  
+            let keysArray = template.content.match(/\{\{(\w*)\.DATA\}\}/g) || []; // 示例： ["{{first.DATA}}", "{{keyword1.DATA}}", "{{keyword2.DATA}}", "{{remark.DATA}}"]  
+            keysArray.map(item => {  
+                const name = item.replace('{{', '').replace('.DATA}}', '');  
+                // 基于提取的字段名创建对应的data数据项，设置初始的value为空，颜色为黑色  
+                template.data.push({ "name": name, "value": "", color: "#000000" });  
+            });  
+            this.dataForm = template; // 更新dataForm  
+        },  
+        // 表单提交的方法  
+        dataFormSubmit() {  
+            // 对整个表单进行验证  
+            this.$refs['dataForm'].validate((valid) => {  
+                if (valid) {  
+                    // 使用axios（这里假设$http是基于axios封装的）发送POST请求提交表单数据，根据id是否存在决定是保存还是更新操作  
+                    this.$http({  
+                        url: this.$http.adornUrl(`/manage/msgTemplate/${!this.dataForm.id ? 'save' : 'update'}`),  
+                        method: 'post',  
+                        data: this.$http.adornData(this.dataForm) // 装饰数据  
+                    }).then(({ data }) => {  
+                        if (data && data.code === 200) {  
+                            // 如果操作成功，显示成功提示信息，并在提示信息关闭后隐藏对话框，触发父组件的refreshDataList事件  
+                            this.$message({  
+                                message: '操作成功',  
+                                type: 'success',  
+                                duration: 1500,  
+                                onClose: () => {  
+                                    this.visible = false; // 隐藏对话框  
+                                    this.$emit('refreshDataList'); // 触发父组件的事件  
+                                }  
+                            });  
+                        } else {  
+                            // 如果操作失败，显示错误提示信息  
+                            this.$message.error(data.msg);  
+                        }  
+                    });  
+                }  
+            });  
+        }  
+    }  
+}  
+</script>  
+
+<style scoped>  
+.form-group-area {  
+    border: 1px dotted gray; /* 添加边框样式，使其更明显 */  
+}  
+.form-group-title {  
+    color: gray; /* 设置标题颜色 */  
+    font-size: 12px; /* 设置标题字体大小 */  
+}  
 </style>
\ No newline at end of file
diff --git a/src/views/modules/wx/msg-template.vue b/src/views/modules/wx/msg-template.vue
index 49e12606..5df70f18 100644
--- a/src/views/modules/wx/msg-template.vue
+++ b/src/views/modules/wx/msg-template.vue
@@ -1,36 +1,55 @@
 <template>
+    <!-- 整个模块的容器类，用于包裹后续的表单、表格、分页以及相关弹窗组件等 -->
     <div class="mod-config">
+        <!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <!-- 标题输入框所在的表单项，使用el-input组件实现输入框，双向绑定dataForm.title，有占位提示文字且可清空输入内容 -->
             <el-form-item>
                 <el-input v-model="dataForm.title" placeholder="标题" clearable></el-input>
             </el-form-item>
+            <!-- 操作按钮所在的表单项 -->
             <el-form-item>
+                <!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
                 <el-button @click="getDataList()">查询</el-button>
+                <!-- 批量复制按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为成功按钮，点击时调用copyHandle方法，当没有选中的数据项时禁用按钮 -->
                 <el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="copyHandle()" :disabled="dataListSelections.length <= 0">批量复制</el-button>
-                <el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="templateMsgTaskHandle()" :disabled="dataListSelections.length!=1">推送消息</el-button>
+                <!-- 推送消息按钮，根据权限决定是否显示，类型为成功按钮，点击时调用templateMsgTaskHandle方法，当选中的数据项数量不为1时禁用按钮 -->
+                <el-button v-if="isAuth('wx:msgtemplate:save')" type="success" @click="templateMsgTaskHandle()" :disabled="dataListSelections.length!= 1">推送消息</el-button>
+                <!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
                 <el-button v-if="isAuth('wx:msgtemplate:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
             </el-form-item>
+            <!-- 靠右对齐的表单项，包含同步公众号模板按钮和模板管理指引链接按钮 -->
             <el-form-item class="fr">
-                <el-button v-if="isAuth('wx:msgtemplate:save')" icon="el-icon-sort" type="success" @click="syncWxTemplate()" :disabled="synchonizingWxTemplate">{{synchonizingWxTemplate?'同步中...':'同步公众号模板'}}</el-button>
+                <!-- 同步公众号模板按钮，根据权限决定是否显示，点击时调用syncWxTemplate方法，按钮文字根据同步状态动态变化，正在同步时显示“同步中...”，否则显示“同步公众号模板”，同步过程中按钮禁用 -->
+                <el-button v-if="isAuth('wx:msgtemplate:save')" icon="el-icon-sort" type="success" @click="syncWxTemplate()" :disabled="synchonizingWxTemplate">{{synchonizingWxTemplate? '同步中...' : '同步公众号模板'}}</el-button>
+                <!-- 模板管理指引链接按钮，点击后在新标签页打开指定的链接 -->
                 <el-button><el-link type="primary" icon="el-icon-link" target="_blank" href="https://kf.qq.com/faq/170209E3InyI170209nIF7RJ.html">模板管理指引</el-link></el-button>
             </el-form-item>
         </el-form>
-        
+
+        <!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
         <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
             <el-table-column type="selection" header-align="center" align="center" width="50">
             </el-table-column>
+            <!-- 模板ID列，对应dataList中数据项的templateId属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="templateId" show-overflow-tooltip header-align="center" align="center" label="模板ID">
             </el-table-column>
+            <!-- 标题列，对应dataList中数据项的title属性，通过插槽使用a标签包裹内容使其可点击跳转（链接地址取自数据项的url属性），设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="title" header-align="center" align="center" label="标题">
                 <a :href="scope.row.url" slot-scope="scope">{{scope.row.title}}</a>
             </el-table-column>
+            <!-- 模版名称列，对应dataList中数据项的name属性，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="name" header-align="center" align="center" label="模版名称">
             </el-table-column>
+            <!-- 模版字段列，对应dataList中数据项的content属性，显示溢出提示，设置了表头和内容的对齐方式以及列宽度 -->
             <el-table-column prop="content" show-overflow-tooltip header-align="center" align="center" label="模版字段" width="200">
             </el-table-column>
+            <!-- 是否有效列，对应dataList中数据项的status属性，通过插槽根据数据项的status值判断显示“是”或“否”，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="status" header-align="center" align="center" label="是否有效">
-                <span slot-scope="scope">{{scope.row.status?"是":"否"}}</span>
+                <span slot-scope="scope">{{scope.row.status? "是" : "否"}}</span>
             </el-table-column>
+            <!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了配置和删除按钮 -->
             <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                 <template slot-scope="scope">
                     <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">配置</el-button>
@@ -38,16 +57,22 @@
                 </template>
             </el-table-column>
         </el-table>
+
+        <!-- 分页组件，绑定了相关的分页事件和属性，用于切换每页显示数量、当前页码等操作 -->
         <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
         </el-pagination>
-        <!-- 弹窗, 新增 / 修改 -->
+
+        <!-- 新增/修改组件，通过属性和事件与父组件进行交互，根据addOrUpdateVisible的值决定是否显示 -->
         <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+        <!-- 模板消息任务组件，根据templateMsgTaskVisible的值决定是否显示 -->
         <template-msg-task v-if="templateMsgTaskVisible" ref="templateMsgTask"></template-msg-task>
     </div>
 </template>
 
 <script>
+// 引入新增/修改组件，用于实现模板的新增或修改功能相关交互逻辑
 import AddOrUpdate from './msg-template-add-or-update'
+// 引入模板消息任务组件，用于处理模板消息相关任务逻辑
 import TemplateMsgTask from '@/components/template-msg-task'
 export default {
     data() {
@@ -62,20 +87,23 @@ export default {
             dataListLoading: false,
             dataListSelections: [],
             addOrUpdateVisible: false,
-            templateMsgTaskVisible:false,
-            synchonizingWxTemplate:false
+            templateMsgTaskVisible: false,
+            synchonizingWxTemplate: false
         }
     },
     components: {
-        AddOrUpdate,TemplateMsgTask
+        AddOrUpdate, TemplateMsgTask
     },
     activated() {
+        // 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
         this.getDataList()
     },
     methods: {
-        // 获取数据列表
+        // 获取数据列表的方法
         getDataList() {
-            this.dataListLoading = true
+            // 设置正在加载数据的状态为true
+            this.dataListLoading = true;
+            // 发起HTTP请求获取消息模板的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
             this.$http({
                 url: this.$http.adornUrl('/manage/msgTemplate/list'),
                 method: 'get',
@@ -87,128 +115,159 @@ export default {
                     'order': 'desc'
                 })
             }).then(({ data }) => {
+                // 根据返回数据的状态码判断是否请求成功
                 if (data && data.code === 200) {
-                    this.dataList = data.page.list
-                    this.totalCount = data.page.totalCount
+                    // 如果成功，更新数据列表和总记录数
+                    this.dataList = data.page.list;
+                    this.totalCount = data.page.totalCount;
                 } else {
-                    this.dataList = []
-                    this.totalCount = 0
+                    // 如果失败，清空数据列表和总记录数
+                    this.dataList = [];
+                    this.totalCount = 0;
                 }
-                this.dataListLoading = false
-            })
+                // 请求完成后，设置正在加载数据的状态为false
+                this.dataListLoading = false;
+            });
         },
-        // 每页数
+        // 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
         sizeChangeHandle(val) {
-            this.pageSize = val
-            this.pageIndex = 1
-            this.getDataList()
+            this.pageSize = val;
+            this.pageIndex = 1;
+            this.getDataList();
         },
-        // 当前页
+        // 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
         currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
+            this.pageIndex = val;
+            this.getDataList();
         },
-        // 多选
+        // 处理表格中选择项变化的方法，更新选中的数据项列表
         selectionChangeHandle(val) {
-            this.dataListSelections = val
+            this.dataListSelections = val;
         },
-        // 新增 / 修改
+        // 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入模板的id（可为空表示新增）
         addOrUpdateHandle(id) {
-            this.addOrUpdateVisible = true
+            this.addOrUpdateVisible = true;
             this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(id)
-            })
+                this.$refs.addOrUpdate.init(id);
+            });
         },
-        // 删除
+        // 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
         deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.id)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+            // 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的id数组进行批量删除
+            var ids = id? [id] : this.dataListSelections.map(item => item.id);
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
                 this.$http({
                     url: this.$http.adornUrl('/manage/msgTemplate/delete'),
                     method: 'post',
                     data: this.$http.adornData(ids, false)
                 }).then(({ data }) => {
+                    // 根据返回数据判断删除操作是否成功
                     if (data && data.code === 200) {
+                        // 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
                         this.$message({
                             message: '操作成功',
                             type: 'success',
                             duration: 1500,
                             onClose: () => {
-                                this.getDataList()
+                                this.getDataList();
                             }
-                        })
+                        });
                     } else {
-                        this.$message.error(data.msg)
+                        // 如果失败，弹出错误提示信息
+                        this.$message.error(data.msg);
                     }
-                })
-            })
+                });
+            });
         },
-        syncWxTemplate(){
-            if(this.synchonizingWxTemplate)return
-            this.synchonizingWxTemplate=true
+        syncWxTemplate() {
+            // 如果正在同步中，则直接返回，不进行后续操作
+            if (this.synchonizingWxTemplate) return;
+            // 设置正在同步的状态为true
+            this.synchonizingWxTemplate = true;
+            // 发起HTTP请求进行同步公众号模板操作
             this.$http({
-                    url: this.$http.adornUrl('/manage/msgTemplate/syncWxTemplate'),
-                    method: 'post',
-                }).then(({ data }) => {
-                    this.synchonizingWxTemplate=false
-                    if (data && data.code === 200) {
-                        this.$message({
-                            message: '同步完成',
-                            type: 'success',
-                            duration: 1500,
-                            onClose: () => {
-                                this.getDataList()
-                            }
-                        })
-                    } else {
-                        this.$message.error(data.msg)
-                    }
-                }).catch(()=>this.synchonizingWxTemplate=false)
+                url: this.$http.adornUrl('/manage/msgTemplate/syncWxTemplate'),
+                method: 'post'
+            }).then(({ data }) => {
+                // 同步完成后，设置正在同步的状态为false
+                this.synchonizingWxTemplate = false;
+                // 根据返回数据判断同步操作是否成功
+                if (data && data.code === 200) {
+                    // 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
+                    this.$message({
+                        message: '同步完成',
+                        type: 'success',
+                        duration: 1500,
+                        onClose: () => {
+                            this.getDataList();
+                        }
+                    });
+                } else {
+                    // 如果失败，弹出错误提示信息
+                    this.$message.error(data.msg);
+                }
+            }).catch(() => this.synchonizingWxTemplate = false);
         },
-        templateMsgTaskHandle(){
-            this.templateMsgTaskVisible = true
+        templateMsgTaskHandle() {
+            // 设置模板消息任务组件的显示状态为true，即显示该组件
+            this.templateMsgTaskVisible = true;
             this.$nextTick(() => {
-                this.$refs.templateMsgTask.init(this.dataListSelections[0])
-            })
+                // 在DOM更新后，初始化模板消息任务组件，传入当前选中的唯一一条数据项（因为按钮禁用条件限制了只能选中一个）
+                this.$refs.templateMsgTask.init(this.dataListSelections[0]);
+            });
         },
-        async copyHandle(){
+        async copyHandle() {
             let loading;
+            // 循环遍历选中的数据项列表，对每个数据项进行复制操作
             for (let i = 0; i < this.dataListSelections.length; i++) {
                 let item = this.dataListSelections[i];
-                loading=this.$loading({
+                // 显示加载提示，提示文字显示正在复制的模板标题
+                loading = this.$loading({
                     lock: true,
-                    text: "复制模板："+item.title,
+                    text: "复制模板：" + item.title,
                     spinner: 'el-icon-loading',
                     background: 'rgba(0, 0, 0, 0.7)'
                 });
-                item.id='';
-                item.updateTime=new Date()
-                item.name+='_COPY'
-                await this.addMsgTemplate(item).catch(()=>loading.close())
-                loading.close()
+                // 将数据项的id清空（可能用于标识新增状态）
+                item.id = '';
+                // 更新数据项的更新时间为当前时间
+                item.updateTime = new Date();
+                // 在模版名称后添加“_COPY”后缀
+                item.name += '_COPY';
+                // 调用addMsgTemplate方法添加消息模板，使用await等待异步操作完成，若出现错误则关闭加载提示
+                await this.addMsgTemplate(item).catch(() => loading.close());
+                // 关闭加载提示
+                loading.close();
             }
-            loading.close()
-            this.getDataList()
+            // 最后再关闭一次加载提示（确保关闭，可能存在多余情况，但保证逻辑完整性）
+            loading.close();
+            // 重新获取数据列表，以更新展示的数据
+            this.getDataList();
         },
-        addMsgTemplate(msgTemplate){
+        addMsgTemplate(msgTemplate) {
             return new Promise((resolve, reject) => {
+                // 发起HTTP请求保存消息模板数据（此处应该是执行新增操作），对请求的数据进行了装饰处理
                 this.$http({
                     url: this.$http.adornUrl('/manage/msgTemplate/save'),
                     method: 'post',
                     data: this.$http.adornData(msgTemplate)
                 }).then(({ data }) => {
+                    // 根据返回数据判断保存操作是否成功
                     if (data && data.code === 200) {
-                        resolve()
+                        // 如果成功，调用resolve函数，表示异步操作成功完成
+                        resolve();
                     } else {
-                        this.$message.error(data.msg)
-                        reject(data.msg)
+                        // 如果失败，弹出错误提示信息，并调用reject函数，表示异步操作失败，传递错误信息
+                        this.$message.error(data.msg);
+                        reject(data.msg);
                     }
-                }).catch(err=>reject(err))
-            }) 
+                }).catch(err => reject(err));
+            });
         }
     }
 }
diff --git a/src/views/modules/wx/template-msg-log.vue b/src/views/modules/wx/template-msg-log.vue
index 13422461..3dba3791 100644
--- a/src/views/modules/wx/template-msg-log.vue
+++ b/src/views/modules/wx/template-msg-log.vue
@@ -1,38 +1,57 @@
 <template>
+    <!-- 整个模块的容器类，用于包裹后续的表单、表格以及分页组件等 -->
     <div class="mod-config">
+        <!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+            <!-- openid输入框所在的表单项，使用el-input组件实现输入框，双向绑定dataForm.touser，有占位提示文字且可清空输入内容 -->
             <el-form-item>
                 <el-input v-model="dataForm.touser" placeholder="openid" clearable></el-input>
             </el-form-item>
+            <!-- 操作按钮所在的表单项 -->
             <el-form-item>
+                <!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
                 <el-button @click="getDataList()">查询</el-button>
+                <!-- 批量删除按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
                 <el-button v-if="isAuth('wx:templatemsglog:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
             </el-form-item>
         </el-form>
+
+        <!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
         <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
+            <!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
             <el-table-column type="selection" header-align="center" align="center" width="50">
             </el-table-column>
+            <!-- openid列，对应dataList中数据项的touser属性，设置了表头和内容的对齐方式以及列宽度 -->
             <el-table-column prop="touser" header-align="center" align="center" label="openid" width="100">
             </el-table-column>
+            <!-- 内容列，对应dataList中数据项的data属性，使用formatter函数（tableJsonFormat方法）格式化显示内容，设置了表头和内容的对齐方式以及列宽度 -->
             <el-table-column prop="data" header-align="center" align="center" :formatter="tableJsonFormat" label="内容"  width="300">
             </el-table-column>
+            <!-- 发送结果列，对应dataList中数据项的sendResult属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题和宽度 -->
             <el-table-column prop="sendResult" header-align="center" align="center" show-overflow-tooltip label="发送结果" width="150">
             </el-table-column>
+            <!-- 发送时间列，对应dataList中数据项的sendTime属性，设置了表头和内容的对齐方式以及列标题和宽度 -->
             <el-table-column prop="sendTime" header-align="center" align="center" width="100" label="发送时间">
             </el-table-column>
+            <!-- 链接列，对应dataList中数据项的url属性，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="url" header-align="center" align="center" show-overflow-tooltip label="链接">
             </el-table-column>
+            <!-- 小程序列，对应dataList中数据项的miniprogram属性，使用formatter函数（tableJsonFormat方法）格式化显示内容，显示溢出提示，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="miniprogram" header-align="center" align="center" :formatter="tableJsonFormat" show-overflow-tooltip label="小程序">
             </el-table-column>
+            <!-- 模板ID列，对应dataList中数据项的templateId属性，设置了表头和内容的对齐方式以及列标题和宽度 -->
             <el-table-column prop="templateId" header-align="center" align="center" label="模板ID"  width="150">
             </el-table-column>
+            <!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了删除按钮 -->
             <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                 <template slot-scope="scope">
                     <el-button type="text" size="small" @click="deleteHandle(scope.row.logId)">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
-        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
+
+        <!-- 分页组件，绑定了相关的分页事件和属性，用于切换每页显示数量、当前页码等操作 -->
+        <el-pagination @size-change="sizeChangeHandle" @current-change="current-changeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalCount" layout="total, sizes, prev, pager, next, jumper">
         </el-pagination>
     </div>
 </template>
@@ -42,6 +61,7 @@ export default {
     data() {
         return {
             dataForm: {
+                // 用于存储查询条件中的openid，初始为空字符串
                 touser: ''
             },
             dataList: [],
@@ -54,12 +74,15 @@ export default {
         }
     },
     activated() {
+        // 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
         this.getDataList()
     },
     methods: {
-        // 获取数据列表
+        // 获取数据列表的方法
         getDataList() {
-            this.dataListLoading = true
+            // 设置正在加载数据的状态为true
+            this.dataListLoading = true;
+            // 发起HTTP请求获取模板消息日志的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
             this.$http({
                 url: this.$http.adornUrl('/manage/templateMsgLog/list'),
                 method: 'get',
@@ -71,65 +94,76 @@ export default {
                     'order': 'desc'
                 })
             }).then(({ data }) => {
+                // 根据返回数据的状态码判断是否请求成功
                 if (data && data.code === 200) {
-                    this.dataList = data.page.list
-                    this.totalCount = data.page.totalCount
+                    // 如果成功，更新数据列表和总记录数
+                    this.dataList = data.page.list;
+                    this.totalCount = data.page.totalCount;
                 } else {
-                    this.dataList = []
-                    this.totalCount = 0
+                    // 如果失败，清空数据列表和总记录数
+                    this.dataList = [];
+                    this.totalCount = 0;
                 }
-                this.dataListLoading = false
-            })
+                // 请求完成后，设置正在加载数据的状态为false
+                this.dataListLoading = false;
+            });
         },
-        // 每页数
+        // 每页数量改变时的处理方法，更新每页显示数量，将当前页码重置为1，然后重新获取数据列表
         sizeChangeHandle(val) {
-            this.pageSize = val
-            this.pageIndex = 1
-            this.getDataList()
+            this.pageSize = val;
+            this.pageIndex = 1;
+            this.getDataList();
         },
-        // 当前页
+        // 当前页码改变时的处理方法，更新当前页码，然后重新获取数据列表
         currentChangeHandle(val) {
-            this.pageIndex = val
-            this.getDataList()
+            this.pageIndex = val;
+            this.getDataList();
         },
-        // 多选
+        // 处理表格中选择项变化的方法，更新选中的数据项列表
         selectionChangeHandle(val) {
-            this.dataListSelections = val
+            this.dataListSelections = val;
         },
-        // 删除
+        // 删除操作的方法，根据传入的id判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
         deleteHandle(id) {
-            var ids = id ? [id] : this.dataListSelections.map(item => item.logId)
-            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
+            // 如果传入了id，表示单个删除，将其放入数组；否则使用选中的数据项的logId数组进行批量删除
+            var ids = id? [id] : this.dataListSelections.map(item => item.logId);
+            this.$confirm(`确定对[id=${ids.join(',')}]进行[${id? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
+                // 发起HTTP请求进行删除操作，对请求的数据进行了装饰处理
                 this.$http({
                     url: this.$http.adornUrl('/manage/templateMsgLog/delete'),
                     method: 'post',
                     data: this.$http.adornData(ids, false)
                 }).then(({ data }) => {
+                    // 根据返回数据判断删除操作是否成功
                     if (data && data.code === 200) {
+                        // 如果成功，弹出成功提示信息，并在提示框关闭后重新获取数据列表
                         this.$message({
                             message: '操作成功',
                             type: 'success',
                             duration: 1500,
                             onClose: () => {
-                                this.getDataList()
+                                this.getDataList();
                             }
-                        })
+                        });
                     } else {
-                        this.$message.error(data.msg)
+                        // 如果失败，弹出错误提示信息
+                        this.$message.error(data.msg);
                     }
-                })
-            })
+                });
+            });
         },
-        tableJsonFormat(row, column, cellValue){
+        tableJsonFormat(row, column, cellValue) {
+            // 如果传入的要格式化的值为空，则直接返回空字符串
             if (!cellValue) {
                 return '';
             }
-            return JSON.stringify(cellValue)
+            // 将传入的值（通常是JSON对象类型的数据）转换为JSON字符串格式进行显示，方便查看数据内容
+            return JSON.stringify(cellValue);
         }
     }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/views/modules/wx/wx-account.vue b/src/views/modules/wx/wx-account.vue
index 4d7b16da..599dd413 100644
--- a/src/views/modules/wx/wx-account.vue
+++ b/src/views/modules/wx/wx-account.vue
@@ -1,44 +1,43 @@
 <template>
-    <!-- 组件的HTML模板 -->
+    <!-- 整个模块的容器类，用于包裹后续的表单、表格以及相关弹窗组件等 -->
     <div class="mod-config">
-        <!-- 搜索表单 -->
+        <!-- 内联表单，绑定了dataForm数据模型，监听回车键（native修饰符表示监听原生的键盘事件）按下时调用getDataList方法 -->
         <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-            <!-- 输入框，用于输入搜索关键词 -->
+            <!-- 参数名输入框所在的表单项，使用el-input组件实现输入框，双向绑定dataForm.key，有占位提示文字且可清空输入内容 -->
             <el-form-item>
                 <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
             </el-form-item>
-            <!-- 操作按钮 -->
+            <!-- 操作按钮所在的表单项 -->
             <el-form-item>
-                <!-- 查询按钮，触发数据列表的获取 -->
+                <!-- 查询按钮，点击时调用getDataList方法获取符合条件的数据列表 -->
                 <el-button @click="getDataList()">查询</el-button>
-                <!-- 新增按钮，根据权限显示 -->
+                <!-- 新增按钮，根据权限（调用isAuth方法判断）决定是否显示，类型为主要按钮，点击时调用addOrUpdateHandle方法 -->
                 <el-button v-if="isAuth('wx:wxaccount:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
-                <!-- 批量删除按钮，根据权限和选中项显示 -->
+                <!-- 批量删除按钮，根据权限决定是否显示，类型为危险按钮，点击时调用deleteHandle方法，当没有选中的数据项时禁用按钮 -->
                 <el-button v-if="isAuth('wx:wxaccount:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
             </el-form-item>
         </el-form>
-        <!-- 数据表格 -->
+
+        <!-- el-table组件用于展示数据列表，绑定了dataList数据，显示边框，加载数据时显示加载提示，监听选择项变化事件 -->
         <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
-            <!-- 多选框 -->
+            <!-- 选择列，用于多选操作，设置了表头和内容的对齐方式以及宽度 -->
             <el-table-column type="selection" header-align="center" align="center" width="50">
             </el-table-column>
-            <!-- 展示appid -->
+            <!-- appid列，对应dataList中数据项的appid属性，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="appid" header-align="center" align="center" label="appid">
             </el-table-column>
-            <!-- 展示公众号名称 -->
+            <!-- 公众号名称列，对应dataList中数据项的name属性，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="name" header-align="center" align="center" label="公众号名称">
             </el-table-column>
-            <!-- 展示公众号类型，通过formatter格式化显示 -->
+            <!-- 类型列，对应dataList中数据项的type属性，使用formatter函数（accountTypeFormat方法）格式化显示内容，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="type" header-align="center" align="center" label="类型" :formatter="accountTypeFormat">
             </el-table-column>
-            <!-- 展示是否认证 -->
+            <!-- 是否认证列，对应dataList中数据项的verified属性，通过插槽根据数据项的verified值判断显示“是”或“否”，设置了表头和内容的对齐方式以及列标题 -->
             <el-table-column prop="verified" header-align="center" align="center" label="是否认证">
-                <!-- 使用插槽自定义显示内容 -->
-                <span slot-scope="scope">{{scope.row.verified?"是":"否"}}</span>
+                <span slot-scope="scope">{{scope.row.verified? "是" : "否"}}</span>
             </el-table-column>
-            <!-- 操作列 -->
+            <!-- 操作列，固定在右侧，设置了表头和内容的对齐方式、宽度以及列标题，通过插槽定义了接入、修改和删除按钮 -->
             <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
-                <!-- 使用插槽添加按钮 -->
                 <template slot-scope="scope">
                     <el-button type="text" size="small" @click="accessInfo(scope.row)">接入</el-button>
                     <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
@@ -46,123 +45,129 @@
                 </template>
             </el-table-column>
         </el-table>
-        <!-- 新增/修改弹窗 -->
+
+        <!-- 新增/修改组件，通过属性和事件与父组件进行交互，根据addOrUpdateVisible的值决定是否显示 -->
         <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
-        <!-- 接入信息弹窗 -->
+        <!-- 账号接入信息组件，根据accountAccessVisible的值决定是否显示 -->
         <account-access v-if="accountAccessVisible" ref="accountAccessDialog"></account-access>
     </div>
 </template>
 
 <script>
-// 引入子组件
+// 引入新增/修改组件，用于实现公众号账号的新增或修改功能相关交互逻辑
 import AddOrUpdate from './account/wx-account-add-or-update'
+// 引入账号接入信息组件，用于展示和处理公众号账号接入相关信息逻辑
 import AccountAccess from './account/wx-account-access-info'
+// 引入Vuex的mapState辅助函数，用于将Vuex中的状态映射到组件的计算属性中
 import { mapState } from 'vuex'
-
 export default {
     data() {
         return {
-            // 搜索表单数据
             dataForm: {
+                // 用于存储查询条件中的参数名，初始为空字符串
                 key: ''
             },
-            // 数据列表
             dataList: [],
-            // 数据列表加载状态
             dataListLoading: false,
-            // 选中项
             dataListSelections: [],
-            // 新增/修改弹窗显示状态
             addOrUpdateVisible: false,
-            // 接入信息弹窗显示状态
             accountAccessVisible: false
         }
     },
-    // 引入子组件
     components: {
-        AddOrUpdate,
-        AccountAccess
+        AddOrUpdate, AccountAccess
     },
-    // 从Vuex中获取状态
     computed: mapState({
+        // 从Vuex的state中获取wxAccount模块下的ACCOUNT_TYPES状态，映射到组件的计算属性中，用于类型列的格式化显示操作
         ACCOUNT_TYPES: state => state.wxAccount.ACCOUNT_TYPES
     }),
-    // 组件激活时获取数据列表
     activated() {
+        // 当组件被激活（例如路由切换到对应页面等情况）时，调用getDataList方法获取数据列表，用于展示初始数据
         this.getDataList()
     },
     methods: {
-        // 获取数据列表
+        // 获取数据列表的方法
         getDataList() {
-            this.dataListLoading = true
-            // 发起HTTP请求获取数据
+            // 设置正在加载数据的状态为true
+            this.dataListLoading = true;
+            // 发起HTTP请求获取微信公众号账号的数据列表，对请求的URL和参数进行了装饰处理（可能是统一处理请求相关的配置）
             this.$http({
-                url: this.$http.adornUrl('/manage/wxAccount/list'), // 调用封装的URL处理函数
+                url: this.$http.adornUrl('/manage/wxAccount/list'),
                 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.$store.commit('wxAccount/updateAccountList', data.list) // 更新Vuex中的状态
+                    // 如果成功，更新数据列表，并通过Vuex的mutation更新账号列表状态（可能用于其他地方的数据同步等）
+                    this.dataList = data.list;
+                    this.$store.commit('wxAccount/updateAccountList', data.list);
                 } else {
-                    this.dataList = [] // 清空数据列表
+                    // 如果失败，清空数据列表
+                    this.dataList = [];
                 }
-                this.dataListLoading = false // 结束加载状态
-            })
+                // 请求完成后，设置正在加载数据的状态为false
+                this.dataListLoading = false;
+            });
         },
-        // 处理多选变化
+        // 处理表格中选择项变化的方法，更新选中的数据项列表
         selectionChangeHandle(val) {
-            this.dataListSelections = val
+            this.dataListSelections = val;
         },
-        // 新增/修改操作
+        // 新增/修改操作的方法，设置新增/修改组件的显示状态为true，并在DOM更新后初始化新增/修改组件，传入要操作的数据项（可为空表示新增）
         addOrUpdateHandle(item) {
-            this.addOrUpdateVisible = true
+            this.addOrUpdateVisible = true;
             this.$nextTick(() => {
-                this.$refs.addOrUpdate.init(item) // 初始化弹窗
-            })
+                this.$refs.addOrUpdate.init(item);
+            });
         },
-        // 接入信息操作
         accessInfo(item) {
-            this.accountAccessVisible = true
+            // 设置账号接入信息组件的显示状态为true，即显示该组件
+            this.accountAccessVisible = true;
             this.$nextTick(() => {
-                this.$refs.accountAccessDialog.init(item) // 初始化弹窗
-            })
+                // 在DOM更新后，初始化账号接入信息组件，传入要操作的数据项
+                this.$refs.accountAccessDialog.init(item);
+            });
         },
-        // 删除操作
+        // 删除操作的方法，根据传入的appid判断是单个删除还是批量删除，弹出确认框让用户确认操作后发起HTTP删除请求
         deleteHandle(appid) {
-            // 根据是否有传入appid决定是单个删除还是批量删除
-            var ids = appid ? [appid] : this.dataListSelections.map(item => item.appid)
-            this.$confirm(`确定对[appid=${ids.join(',')}]进行[${appid ? '删除' : '批量删除'}]操作?`, '提示', {
+            // 如果传入了appid，表示单个删除，将其放入数组；否则使用选中的数据项的appid数组进行批量删除
+            var ids = appid? [appid] : this.dataListSelections.map(item => {
+                return item.appid
+            });
+            this.$confirm(`确定对[appid=${ids.join(',')}]进行[${appid? '删除' : '批量删除'}]操作?`, '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).then(() => {
-                // 发起HTTP请求删除数据
+                // 发起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({
                             message: '操作成功',
                             type: 'success',
                             duration: 1500,
                             onClose: () => {
-                                this.getDataList() // 刷新数据列表
+                                this.getDataList();
                             }
-                        })
+                        });
                     } else {
-                        this.$message.error(data.msg) // 显示错误信息
+                        // 如果失败，弹出错误提示信息
+                        this.$message.error(data.msg);
                     }
-                })
-            })
+                });
+            });
         },
-        // 格式化公众号类型显示
         accountTypeFormat(row, column, cellValue) {
-            return this.ACCOUNT_TYPES[cellValue]
+            // 根据数据项中的类型值，从ACCOUNT_TYPES对象中获取对应的显示名称并返回，用于格式化类型列的显示内容
+            return this.ACCOUNT_TYPES[cellValue];
         }
     }
 }
diff --git a/src/views/modules/wx/wx-assets.vue b/src/views/modules/wx/wx-assets.vue
index a407eef1..1fd73c5e 100644
--- a/src/views/modules/wx/wx-assets.vue
+++ b/src/views/modules/wx/wx-assets.vue
@@ -1,56 +1,79 @@
 <template>
+    <!-- 使用el-tabs组件创建选项卡，通过v-model双向绑定activeTab来控制当前选中的选项卡，监听tab-click事件，触发handleTabClick方法 -->
     <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+        <!-- 图片素材选项卡面板，标签显示为“图片素材（数量）”，数量通过assetsCount.imageCount动态获取，设置name属性为“image”，采用懒加载模式 -->
         <el-tab-pane :label="'图片素材（'+assetsCount.imageCount+')'" name="image" lazy>
+            <!-- 引入自定义组件material-file，设置其fileType属性为“image”，用于展示和管理图片素材相关功能，同时监听其@change事件，触发materialCount方法 -->
             <material-file fileType="image" ref="imagePanel" @change="materialCount"></material-file>
         </el-tab-pane>
+        <!-- 语音素材选项卡面板，标签显示为“语音素材（数量）”，数量通过assetsCount.voiceCount动态获取，设置name属性为“voice”，采用懒加载模式 -->
         <el-tab-pane :label="'语音素材（'+assetsCount.voiceCount+')'" name="voice" lazy>
+            <!-- 引入自定义组件material-file，设置其fileType属性为“voice”，用于展示和管理语音素材相关功能，同时监听其@change事件，触发materialCount方法 -->
             <material-file fileType="voice" ref="voicePanel" @change="materialCount"></material-file>
         </el-tab-pane>
+        <!-- 视频素材选项卡面板，标签显示为“视频素材（数量）”，数量通过assetsCount.videoCount动态获取，设置name属性为“video”，采用懒加载模式 -->
         <el-tab-pane :label="'视频素材（'+assetsCount.videoCount+')'" name="video" lazy>
+            <!-- 引入自定义组件material-file，设置其fileType属性为“video”，用于展示和管理视频素材相关功能，同时监听其@change事件，触发materialCount方法 -->
             <material-file fileType="video" ref="videoPanel" @change="materialCount"></material-file>
         </el-tab-pane>
+        <!-- 图文素材选项卡面板，标签显示为“图文素材（数量）”，数量通过assetsCount.newsCount动态获取，设置name属性为“news”，采用懒加载模式 -->
         <el-tab-pane :label="'图文素材（'+assetsCount.newsCount+')'" name="news" lazy>
+            <!-- 引入自定义组件material-news，用于展示和管理图文素材相关功能，同时监听其@change事件，触发materialCount方法 -->
             <material-news ref="newsPanel" @change="materialCount"></material-news>
         </el-tab-pane>
     </el-tabs>
 </template>
+
 <script>
 export default {
-    
     data() {
         return {
+            // 用于双向绑定el-tabs组件中当前选中的选项卡名称，初始值为“image”，表示默认选中图片素材选项卡
             activeTab: 'image',
-            assetsCount:{
-                imageCount:'..',
-                videoCount:'..',
-                voiceCount:'..',
-                newsCount:'..'
+            assetsCount: {
+                // 图片素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
+                imageCount: '..',
+                // 视频素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
+                videoCount: '..',
+                // 语音素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
+                voiceCount: '..',
+                // 图文素材数量，初始值为“..”，后续会通过接口请求获取真实数据进行更新
+                newsCount: '..'
             }
         };
     },
     components: {
-        MaterialFile:()=>import('./assets/material-file'),
-        MaterialNews:()=>import('./assets/material-news')
+        // 动态导入自定义组件material-file，用于处理不同类型的素材文件（图片、语音、视频）相关功能
+        MaterialFile: () => import('./assets/material-file'),
+        // 动态导入自定义组件material-news，用于处理图文素材相关功能
+        MaterialNews: () => import('./assets/material-news')
     },
-    mounted(){
+    mounted() {
+        // 组件挂载完成后，调用materialCount方法，用于获取各类素材的数量信息
         this.materialCount();
     },
     methods: {
         handleTabClick(tab, event) {
-            this.$nextTick(()=>{
-                this.$refs[tab.name+'Panel'].init()
-            })
+            // 在下次DOM更新循环后执行以下代码，确保操作的元素已经渲染完成
+            this.$nextTick(() => {
+                // 通过ref获取对应选项卡面板的组件实例，并调用其init方法进行初始化操作（不同组件的init方法可能有不同的初始化逻辑）
+                this.$refs[tab.name + 'Panel'].init();
+            });
         },
-        materialCount(){
+        materialCount() {
+            // 发起HTTP请求，获取素材数量信息，对请求的URL进行了装饰处理（可能是统一处理请求相关的配置，比如添加前缀、处理参数等）
             this.$http({
                 url: this.$http.adornUrl('/manage/wxAssets/materialCount')
             }).then(({ data }) => {
+                // 根据返回数据的状态码判断请求是否成功
                 if (data && data.code == 200) {
-                    this.assetsCount=data.data
+                    // 如果成功，将返回数据中的素材数量信息更新到assetsCount对象中，用于在选项卡标签等处显示准确的数量
+                    this.assetsCount = data.data;
                 } else {
+                    // 如果请求失败，弹出错误提示信息，显示接口返回的错误消息内容
                     this.$message.error(data.msg);
                 }
-            })
+            });
         }
 
     }
diff --git a/src/views/modules/wx/wx-menu-button-editor.vue b/src/views/modules/wx/wx-menu-button-editor.vue
index c6eaeb7c..3da8f2fc 100644
--- a/src/views/modules/wx/wx-menu-button-editor.vue
+++ b/src/views/modules/wx/wx-menu-button-editor.vue
@@ -1,21 +1,34 @@
 <template>
+    <!-- 最外层的 div 作为整体容器 -->
     <div>
+        <!-- 菜单输入组容器，设置底部边框样式，用于展示菜单名称以及删除菜单按钮 -->
         <div class="menu-input-group" style="border-bottom: 2px #e8e8e8 solid;">
+            <!-- 展示菜单名称，通过插值表达式绑定 button.name 获取名称值 -->
             <div class="menu-name">{{button.name}}</div>
+            <!-- 删除菜单按钮，点击时通过 $emit 触发父组件的 'delMenu' 事件，由父组件来处理菜单删除相关逻辑 -->
             <div class="menu-del" @click="$emit('delMenu')">删除菜单</div>
         </div>
+        <!-- 菜单输入组容器，用于输入菜单名称 -->
         <div class="menu-input-group">
+            <!-- 菜单名称标签 -->
             <div class="menu-label">菜单名称</div>
+            <!-- 菜单名称输入框所在的容器 -->
             <div class="menu-input">
+                <!-- 文本输入框，用于输入菜单名称，绑定 v-model 到 button.name 实现双向数据绑定，监听 input 事件，触发 checkMenuName 方法来检查名称长度是否合规 -->
                 <input type="text" name="name" placeholder="请输入菜单名称" class="menu-input-text" v-model="button.name" @input="checkMenuName(button.name)">
+                <!-- 提示信息，当 menuNameBounds 为 true 时显示，提示字数超过上限，通过 v-show 根据条件控制显示与否 -->
                 <p class="menu-tips" style="color:#e15f63" v-show="menuNameBounds">字数超过上限</p>
+                <!-- 提示信息，显示菜单名称的字数限制规则，根据 selectedMenuLevel 的值动态展示不同的字数上限说明 -->
                 <p class="menu-tips">字数不超过{{selectedMenuLevel==1?'5':'8'}}个汉字</p>
             </div>
         </div>
+        <!-- 根据按钮是否有子按钮或者子按钮数组长度是否为 0 来决定是否显示下面的内容，若没有子按钮则展示以下配置项 -->
         <div v-show="!button.subButtons || button.subButtons.length==0">
+            <!-- 菜单输入组容器，用于选择菜单内容类型 -->
             <div class="menu-input-group">
+                <!-- 菜单内容类型标签 -->
                 <div class="menu-label">菜单内容</div>
-                
+                <!-- 下拉选择框，用于选择菜单的类型，通过 v-model 双向绑定 button.type，绑定不同的选项值，每个选项对应不同的菜单功能 -->
                 <div class="menu-input">
                     <select v-model="button.type" name="type" class="menu-input-text">
                         <option value="view">跳转网页(view)</option>
@@ -32,51 +45,83 @@
                     </select>
                 </div>
             </div>
+            <!-- 当菜单类型为 'view' 时显示的内容，用于配置跳转网页相关信息 -->
             <div class="menu-content" v-if="button.type=='view'">
+                <!-- 菜单输入组容器，用于输入页面地址 -->
                 <div class="menu-input-group">
+                    <!-- 提示信息，说明点击该子菜单后的跳转行为 -->
                     <p class="menu-tips">订阅者点击该子菜单会跳到以下链接</p>
+                    <!-- 页面地址标签 -->
                     <div class="menu-label">页面地址</div>
+                    <!-- 页面地址输入框所在的容器 -->
                     <div class="menu-input">
+                        <!-- 文本输入框，用于输入页面地址，通过 v-model 双向绑定 button.url -->
                         <input type="text" placeholder="" class="menu-input-text" v-model="button.url">
                     </div>
                 </div>
             </div>
+            <!-- 当菜单类型为 'media_id' 时显示的内容，用于配置发送图文消息相关信息 -->
             <div class="menu-content" v-else-if="button.type=='media_id'">
+                <!-- 菜单输入组容器，用于输入图文消息的 media_id -->
                 <div class="menu-input-group">
+                    <!-- 提示信息，说明点击该菜单后的行为 -->
                     <p class="menu-tips">订阅者点击该菜单会收到以下图文消息</p>
+                    <!-- media_id 标签 -->
                     <div class="menu-label">media_id</div>
+                    <!-- media_id 输入框所在的容器 -->
                     <div class="menu-input">
+                        <!-- 文本输入框，用于输入图文消息的 media_id，通过 v-model 双向绑定 button.mediaId -->
                         <input type="text" placeholder="图文消息media_id" class="menu-input-text" v-model="button.mediaId">
                     </div>
                 </div>
             </div>
+            <!-- 当菜单类型为 'miniprogram' 时显示的内容，用于配置小程序相关信息，包含 appId、页面路径以及备用网页等 -->
             <div class="menu-content" v-else-if="button.type=='miniprogram'">
+                <!-- 菜单输入组容器，用于输入小程序的 appId -->
                 <div class="menu-input-group">
+                    <!-- 提示信息，说明点击该子菜单后的跳转行为 -->
                     <p class="menu-tips">订阅者点击该子菜单会跳到以下小程序</p>
+                    <!-- 小程序 appId 标签 -->
                     <div class="menu-label">小程序appId</div>
+                    <!-- 小程序 appId 输入框所在的容器 -->
                     <div class="menu-input">
+                        <!-- 文本输入框，用于输入小程序的 appId，通过 v-model 双向绑定 button.appId，并提示仅认证公众号可配置 -->
                         <input type="text" placeholder="小程序的appId（仅认证公众号可配置）" class="menu-input-text" v-model="button.appId">
                     </div>
                 </div>
+                <!-- 菜单输入组容器，用于输入小程序的页面路径 -->
                 <div class="menu-input-group">
+                    <!-- 小程序路径标签 -->
                     <div class="menu-label">小程序路径</div>
+                    <!-- 小程序路径输入框所在的容器 -->
                     <div class="menu-input">
+                        <!-- 文本输入框，用于输入小程序的页面路径，通过 v-model 双向绑定 button.pagePath，并给出示例路径 -->
                         <input type="text" placeholder="小程序的页面路径 pages/index/index" class="menu-input-text" v-model="button.pagePath">
                     </div>
                 </div>
+                <!-- 菜单输入组容器，用于输入备用网页地址 -->
                 <div class="menu-input-group">
+                    <!-- 备用网页标签 -->
                     <div class="menu-label">备用网页</div>
+                    <!-- 备用网页地址输入框所在的容器 -->
                     <div class="menu-input">
+                        <!-- 文本输入框，用于输入备用网页地址，通过 v-model 双向绑定 button.url，并给出相关说明 -->
                         <input type="text" placeholder="" class="menu-input-text" v-model="button.url">
                         <p class="menu-tips">旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
                     </div>
                 </div>
             </div>
+            <!-- 当菜单类型为其他值（非上述几种情况）时显示的内容，用于配置菜单 KEY 值 -->
             <div class="menu-content" v-else>
+                <!-- 菜单输入组容器，用于输入菜单 KEY 值 -->
                 <div class="menu-input-group">
+                    <!-- 提示信息，说明 KEY 值的长度限制及用途 -->
                     <p class="menu-tips">用于消息接口推送，不超过128字节</p>
+                    <!-- 菜单 KEY 值标签 -->
                     <div class="menu-label">菜单KEY值</div>
+                    <!-- 菜单 KEY 值输入框所在的容器 -->
                     <div class="menu-input">
+                        <!-- 文本输入框，用于输入菜单 KEY 值，通过 v-model 双向绑定 button.key -->
                         <input type="text" placeholder="" class="menu-input-text" v-model="button.key">
                     </div>
                 </div>
@@ -84,13 +129,17 @@
         </div>
     </div>
 </template>
+
 <script>
 export default {
+    // 定义组件接收的属性
     props: {
+        // 表示选中的菜单层级，类型为数字，默认值为 1
         selectedMenuLevel: {
             type: Number,
             default: 1
         },
+        // 表示菜单相关的数据对象，类型为对象，是必填项
         button: {
             type: Object,
             required: true
@@ -98,26 +147,35 @@ export default {
     },
     data() {
         return {
-            menuNameBounds: false,//菜单长度是否过长
+            // 用于标记菜单名称长度是否超出上限，初始值为 false
+            menuNameBounds: false,
         }
     },
     methods: {
-        //检查菜单名称长度
+        // 检查菜单名称长度的方法
         checkMenuName: function (val) {
+            // 如果选中的菜单层级为 1 且菜单名称长度（通过 getMenuNameLen 方法获取）小于等于 10
             if (this.selectedMenuLevel == 1 && this.getMenuNameLen(val) <= 10) {
-                this.menuNameBounds = false
-            } else if (this.selectedMenuLevel == 2 && this.getMenuNameLen(val) <= 16) {
-                this.menuNameBounds = false
-            } else {
-                this.menuNameBounds = true
+                // 将 menuNameBounds 设置为 false，表示菜单名称长度未超出上限
+                this.menuNameBounds = false;
+            }
+            // 如果选中的菜单层级为 2 且菜单名称长度小于等于 16
+            else if (this.selectedMenuLevel == 2 && this.getMenuNameLen(val) <= 16) {
+                this.menuNameBounds = false;
+            }
+            // 其他情况，即超出对应层级的长度限制，将 menuNameBounds 设置为 true
+            else {
+                this.menuNameBounds = true;
             }
         },
-        //获取菜单名称长度
+        // 获取菜单名称长度的方法
         getMenuNameLen: function (val) {
             var len = 0;
+            // 遍历菜单名称字符串的每个字符
             for (var i = 0; i < val.length; i++) {
                 var a = val.charAt(i);
-                a.match(/[^\x00-\xff]/ig) != null ? len += 2 : len += 1;
+                // 判断字符是否为双字节字符（非 ASCII 码字符），如果是则长度计为 2，否则计为 1
+                a.match(/[^\x00-\xff]/ig)!= null? len += 2 : len += 1;
             }
             return len;
         }