王

src/store/index.js

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

src/store/modules/wxAccount.js

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

src/store/modules/wxUserTags.js

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

src/utils/httpRequest.js

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

src/utils/index.js

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

src/utils/validate.js

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

src/views/common/404.vue

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

src/views/common/home.vue

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

src/views/common/login.vue

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

src/views/common/theme.vue

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

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

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

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

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

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

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

src/views/modules/oss/oss.vue

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

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

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

src/views/modules/sys/config.vue

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

src/views/modules/sys/log.vue

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

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

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

src/views/modules/sys/menu.vue

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

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

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