吴雨瞳添加了注释

aurora-vue/aurora-admin/src/views/log/ExceptionLog.vue

@@ -1,32 +1,44 @@
 <template>
+  <!-- 异常日志主卡片容器 -->
   <el-card class="main-card">
+    <!-- 页面标题，使用当前路由名称 -->
     <div class="title">{{ this.$route.name }}</div>
+    <!-- 操作按钮区域 -->
     <div class="operation-container">
+      <!-- 批量删除按钮，当没有选中日志时禁用 -->
       <el-button
-        type="danger"
-        size="small"
-        icon="el-icon-delete"
-        :disabled="logIds.length === 0"
-        @click="isDelete = true">
+          type="danger"
+          size="small"
+          icon="el-icon-delete"
+          :disabled="logIds.length === 0"
+          @click="isDelete = true">
         批量删除
       </el-button>
+      <!-- 搜索区域，居右显示 -->
       <div style="margin-left: auto">
+        <!-- 搜索输入框，支持回车搜索 -->
         <el-input
-          v-model="keywords"
-          prefix-icon="el-icon-search"
-          size="small"
-          placeholder="请输入操作描述"
-          style="width: 200px"
-          @keyup.enter.native="searchLogs" />
+            v-model="keywords"
+            prefix-icon="el-icon-search"
+            size="small"
+            placeholder="请输入操作描述"
+            style="width: 200px"
+            @keyup.enter.native="searchLogs" />
+        <!-- 搜索按钮 -->
         <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 1rem" @click="searchLogs">
           搜索
         </el-button>
       </div>
     </div>
+    <!-- 异常日志表格，加载时显示loading状态，支持选择行 -->
     <el-table @selection-change="selectionChange" v-loading="loading" :data="logs">
+      <!-- 选择列 -->
       <el-table-column type="selection" width="55" align="center" />
+      <!-- 请求接口列 -->
       <el-table-column prop="optUri" label="请求接口" align="center" width="160" />
+      <!-- 操作描述列 -->
       <el-table-column prop="optDesc" label="操作描述" align="center" width="150" />
+      <!-- 请求方式列，使用标签显示不同类型 -->
       <el-table-column prop="requetMethod" label="请求方式" align="center" width="150">
         <template slot-scope="scope" v-if="scope.row.requestMethod">
           <el-tag :type="tagType(scope.row.requestMethod)">
@@ -34,35 +46,43 @@
           </el-tag>
         </template>
       </el-table-column>
+      <!-- 登录IP列 -->
       <el-table-column prop="ipAddress" label="登录ip" align="center" width="160" />
+      <!-- 登录地址列 -->
       <el-table-column prop="ipSource" label="登录地址" align="center" width="190" />
+      <!-- 操作日期列，使用时间格式化过滤器 -->
       <el-table-column prop="createTime" label="操作日期" align="center" width="210">
         <template slot-scope="scope">
           <i class="el-icon-time" style="margin-right: 5px" />
           {{ scope.row.createTime | dateTime }}
         </template>
       </el-table-column>
+      <!-- 操作列：查看和删除 -->
       <el-table-column label="操作" align="center" width="150">
         <template slot-scope="scope">
+          <!-- 查看按钮 -->
           <el-button size="mini" type="text" slot="reference" @click="check(scope.row)">
             <i class="el-icon-view" /> 查看
           </el-button>
+          <!-- 删除确认按钮 -->
           <el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="deleteLog(scope.row.id)">
             <el-button size="mini" type="text" slot="reference"> <i class="el-icon-delete" /> 删除 </el-button>
           </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
+    <!-- 分页组件 -->
     <el-pagination
-      class="pagination-container"
-      background
-      @size-change="sizeChange"
-      @current-change="currentChange"
-      :current-page="current"
-      :page-size="size"
-      :total="count"
-      :page-sizes="[10, 20]"
-      layout="total, sizes, prev, pager, next, jumper" />
+        class="pagination-container"
+        background
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="current"
+        :page-size="size"
+        :total="count"
+        :page-sizes="[10, 20]"
+        layout="total, sizes, prev, pager, next, jumper" />
+    <!-- 查看详情对话框 -->
     <el-dialog :visible.sync="isCheck" append-to-body top="20px" width="80%" destroy-on-close>
       <div class="dialog-title-container" slot="title"><i class="el-icon-more" />详细信息</div>
       <el-form ref="form" :model="exceptionLog" label-width="100px" size="mini">
@@ -80,6 +100,7 @@
         <el-form-item label="请求参数：">
           {{ exceptionLog.requestParam }}
         </el-form-item>
+        <!-- 异常信息，使用代码高亮显示 -->
         <div>
           <pre>
 	    <code class="language-java">{{ exceptionInfo }}</code>
@@ -87,6 +108,7 @@
         </div>
       </el-form>
     </el-dialog>
+    <!-- 批量删除确认对话框 -->
     <el-dialog :visible.sync="isDelete" width="30%">
       <div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
       <div style="font-size: 1rem">是否删除选中项？</div>
@@ -100,105 +122,123 @@
 
 <script>
 export default {
+  // 页面创建时执行
   created() {
+    // 从store获取当前页码状态
     this.current = this.$store.state.pageState.exceptionLog
+    // 加载日志列表
     this.listLogs()
   },
   data() {
     return {
-      logs: [],
-      logIds: [],
-      isDelete: false,
-      loading: true,
-      keywords: '',
-      current: 1,
-      size: 10,
-      count: 0,
-      exceptionLog: '',
-      isCheck: false,
-      exceptionInfo: ''
+      logs: [], // 异常日志列表数据
+      logIds: [], // 选中的日志ID数组
+      isDelete: false, // 批量删除对话框显示状态
+      loading: true, // 表格加载状态
+      keywords: '', // 搜索关键词
+      current: 1, // 当前页码
+      size: 10, // 每页条数
+      count: 0, // 总记录数
+      exceptionLog: '', // 当前查看的异常日志详情
+      isCheck: false, // 详情对话框显示状态
+      exceptionInfo: '' // 格式化后的异常信息
     }
   },
   methods: {
+    // 处理表格选择变化，更新选中的日志ID
     selectionChange(logs) {
       this.logIds = []
       logs.forEach((item) => {
         this.logIds.push(item.id)
       })
     },
+    // 处理每页条数变化
     sizeChange(size) {
       this.size = size
       this.listLogs()
     },
+    // 处理页码变化，更新store中的页码状态
     currentChange(current) {
       this.current = current
       this.$store.commit('updateExceptionLogPageState', current)
       this.listLogs()
     },
+    // 搜索日志，重置页码为1
     searchLogs() {
       this.current = 1
       this.$store.commit('updateExceptionLogPageState', this.current)
       this.listLogs()
     },
+    // 加载异常日志列表数据
     listLogs() {
       this.axios
-        .get('/api/admin/exception/logs', {
-          params: {
-            current: this.current,
-            size: this.size,
-            keywords: this.keywords
-          }
-        })
-        .then(({ data }) => {
-          this.logs = data.data.records
-          this.count = data.data.count
-          this.loading = false
-        })
+          .get('/api/admin/exception/logs', {
+            params: {
+              current: this.current,
+              size: this.size,
+              keywords: this.keywords
+            }
+          })
+          .then(({ data }) => {
+            this.logs = data.data.records // 日志记录列表
+            this.count = data.data.count // 总记录数
+            this.loading = false // 关闭加载状态
+          })
     },
+    // 删除日志（支持单条和批量删除）
     deleteLog(id) {
       var param = {}
+      // 单条删除：参数为包含单个ID的数组
       if (id != null) {
         param = { data: [id] }
       } else {
+        // 批量删除：参数为选中的ID数组
         param = { data: this.logIds }
       }
       this.axios.delete('/api/admin/exception/logs', param).then(({ data }) => {
         if (data.flag) {
+          // 删除成功提示
           this.$notify.success({
             title: '成功',
             message: data.message
           })
+          // 重新加载列表
           this.listLogs()
         } else {
+          // 删除失败提示
           this.$notify.error({
             title: '失败',
             message: data.message
           })
         }
+        // 关闭删除对话框
         this.isDelete = false
       })
     },
+    // 查看日志详情
     check(exceptionLog) {
-      this.exceptionLog = exceptionLog
-      this.exceptionInfo = '\n' + this.exceptionLog.exceptionInfo
-      this.isCheck = true
+      this.exceptionLog = exceptionLog // 存储当前查看的日志
+      this.exceptionInfo = '\n' + this.exceptionLog.exceptionInfo // 格式化异常信息
+      this.isCheck = true // 显示详情对话框
+      // 等待DOM更新后执行代码高亮
       this.$nextTick(() => {
         Prism.highlightAll()
       })
     }
   },
   computed: {
+    // 根据请求方式返回对应的标签类型
     tagType() {
       return function (type) {
         switch (type) {
           case 'GET':
-            return ''
+            return '' // 默认标签样式
           case 'POST':
-            return 'success'
+            return 'success' // 成功绿色标签
           case 'PUT':
-            return 'warning'
+            return 'warning' // 警告黄色标签
           case 'DELETE':
-            return 'danger'
+            return 'danger' // 危险红色标签
         }
       }
     }
@@ -206,4 +246,4 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped></style>