吴雨瞳添加了注释

aurora-vue/aurora-admin/src/views/resource/Resource.vue

@@ -1,69 +1,97 @@
 <template>
+  <!-- 主卡片容器，用于包裹整个资源管理页面内容 -->
   <el-card class="main-card">
+    <!-- 页面标题，使用当前路由名称作为标题 -->
     <div class="title">{{ this.$route.name }}</div>
+
+    <!-- 操作按钮和搜索区域容器 -->
     <div class="operation-container">
+      <!-- 新增模块按钮 -->
       <el-button type="primary" size="small" icon="el-icon-plus" @click="openModel(null)"> 新增模块 </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="listResources" />
+            v-model="keywords"
+            prefix-icon="el-icon-search"
+            size="small"
+            placeholder="请输入资源名"
+            style="width: 200px"
+            @keyup.enter.native="listResources" />
+        <!-- 搜索按钮 -->
         <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 1rem" @click="listResources">
           搜索
         </el-button>
       </div>
     </div>
+
+    <!-- 资源列表表格，支持树形结构展示 -->
     <el-table
-      v-loading="loading"
-      :data="resources"
-      row-key="id"
-      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
-      <el-table-column prop="resourceName" label="资源名" width="220" />
-      <el-table-column prop="url" label="资源路径" width="300" />
-      <el-table-column prop="requetMethod" label="请求方式">
-        <template slot-scope="scope" v-if="scope.row.requestMethod">
-          <el-tag :type="tagType(scope.row.requestMethod)">
-            {{ scope.row.requestMethod }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column prop="isAnonymous" label="匿名访问" align="center">
-        <template slot-scope="scope">
-          <el-switch
-            v-if="scope.row.url"
-            v-model="scope.row.isAnonymous"
-            active-color="#13ce66"
-            inactive-color="#F4F4F5"
-            :active-value="1"
-            :inactive-value="0"
-            @change="changeResource(scope.row)" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="createTime" label="创建时间" align="center">
-        <template slot-scope="scope">
-          <i class="el-icon-time" style="margin-right: 5px" />
-          {{ scope.row.createTime | date }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="200">
-        <template slot-scope="scope">
-          <el-button type="text" size="mini" @click="openAddResourceModel(scope.row)" v-if="scope.row.children">
-            <i class="el-icon-plus" /> 新增
-          </el-button>
-          <el-button type="text" size="mini" @click="openEditResourceModel(scope.row)">
-            <i class="el-icon-edit" /> 修改
-          </el-button>
-          <el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="deleteResource(scope.row.id)">
-            <el-button size="mini" type="text" slot="reference"> <i class="el-icon-delete" /> 删除 </el-button>
-          </el-popconfirm>
-        </template>
-      </el-table-column>
+        v-loading="loading"  <!-- 加载状态 -->
+    :data="resources"    <!-- 表格数据 -->
+    row-key="id"         <!-- 每行的唯一标识字段 -->
+    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">  <!-- 树形结构配置 -->
+
+    <!-- 资源名列 -->
+    <el-table-column prop="resourceName" label="资源名" width="220" />
+
+    <!-- 资源路径列 -->
+    <el-table-column prop="url" label="资源路径" width="300" />
+
+    <!-- 请求方式列，使用标签展示不同请求类型 -->
+    <el-table-column prop="requetMethod" label="请求方式">
+      <template slot-scope="scope" v-if="scope.row.requestMethod">
+        <el-tag :type="tagType(scope.row.requestMethod)">
+          {{ scope.row.requestMethod }}
+        </el-tag>
+      </template>
+    </el-table-column>
+
+    <!-- 匿名访问列，使用开关控制 -->
+    <el-table-column prop="isAnonymous" label="匿名访问" align="center">
+      <template slot-scope="scope">
+        <el-switch
+            v-if="scope.row.url"  <!-- 只有存在资源路径的行才显示开关 -->
+        v-model="scope.row.isAnonymous"
+        active-color="#13ce66"
+        inactive-color="#F4F4F5"
+        :active-value="1"  <!-- 1表示允许匿名访问 -->
+        :inactive-value="0"  <!-- 0表示不允许匿名访问 -->
+        @change="changeResource(scope.row)" />  <!-- 开关变化时触发的事件 -->
+      </template>
+    </el-table-column>
+
+    <!-- 创建时间列，格式化显示 -->
+    <el-table-column prop="createTime" label="创建时间" align="center">
+      <template slot-scope="scope">
+        <i class="el-icon-time" style="margin-right: 5px" />
+        {{ scope.row.createTime | date }}  <!-- 使用date过滤器格式化时间 -->
+      </template>
+    </el-table-column>
+
+    <!-- 操作列，包含新增子资源、修改、删除功能 -->
+    <el-table-column label="操作" align="center" width="200">
+      <template slot-scope="scope">
+        <!-- 新增子资源按钮，只有存在子资源的行才显示 -->
+        <el-button type="text" size="mini" @click="openAddResourceModel(scope.row)" v-if="scope.row.children">
+          <i class="el-icon-plus" /> 新增
+        </el-button>
+        <!-- 修改按钮 -->
+        <el-button type="text" size="mini" @click="openEditResourceModel(scope.row)">
+          <i class="el-icon-edit" /> 修改
+        </el-button>
+        <!-- 删除确认弹窗 -->
+        <el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="deleteResource(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-dialog :visible.sync="addModule" width="30%">
-      <div class="dialog-title-container" slot="title" ref="moduleTitle" />
+      <div class="dialog-title-container" slot="title" ref="moduleTitle" />  <!-- 弹窗标题，动态设置 -->
       <el-form label-width="80px" size="medium" :model="resourceForm">
         <el-form-item label="模块名">
           <el-input v-model="resourceForm.resourceName" style="width: 220px" />
@@ -74,8 +102,10 @@
         <el-button type="primary" @click="addOrEditResource"> 确 定 </el-button>
       </span>
     </el-dialog>
+
+    <!-- 新增/修改资源弹窗 -->
     <el-dialog :visible.sync="addResource" width="30%">
-      <div class="dialog-title-container" slot="title" ref="resourceTitle" />
+      <div class="dialog-title-container" slot="title" ref="resourceTitle" />  <!-- 弹窗标题，动态设置 -->
       <el-form label-width="80px" size="medium" :model="resourceForm">
         <el-form-item label="资源名">
           <el-input v-model="resourceForm.resourceName" style="width: 220px" />
@@ -102,41 +132,44 @@
 
 <script>
 export default {
+  // 页面创建时加载资源列表
   created() {
     this.listResources()
   },
   data() {
     return {
-      loading: true,
-      keywords: '',
-      resources: [],
-      addModule: false,
-      addResource: false,
-      resourceForm: {}
+      loading: true,  // 表格加载状态
+      keywords: '',   // 搜索关键词
+      resources: [],  // 资源列表数据
+      addModule: false,  // 新增/修改模块弹窗显示状态
+      addResource: false,  // 新增/修改资源弹窗显示状态
+      resourceForm: {}  // 资源表单数据
     }
   },
   methods: {
+    // 获取资源列表数据
     listResources() {
       this.axios
-        .get('/api/admin/resources', {
-          params: {
-            keywords: this.keywords
-          }
-        })
-        .then(({ data }) => {
-          this.resources = data.data
-          this.loading = false
-        })
+          .get('/api/admin/resources', {
+            params: {
+              keywords: this.keywords  // 携带搜索关键词参数
+            }
+          })
+          .then(({ data }) => {
+            this.resources = data.data  // 赋值资源列表数据
+            this.loading = false  // 关闭加载状态
+          })
     },
+    // 修改匿名访问状态
     changeResource(resource) {
       this.axios.post('/api/admin/resources', resource).then(({ data }) => {
-        if (data.flag) {
+        if (data.flag) {  // 操作成功
           this.$notify.success({
             title: '成功',
             message: data.message
           })
-          this.listResources()
-        } else {
+          this.listResources()  // 重新加载资源列表
+        } else {  // 操作失败
           this.$notify.error({
             title: '失败',
             message: data.message
@@ -144,41 +177,46 @@ export default {
         }
       })
     },
+    // 打开新增/修改模块弹窗
     openModel(resource) {
-      if (resource != null) {
+      if (resource != null) {  // 修改模块：复制资源数据到表单
         this.resourceForm = JSON.parse(JSON.stringify(resource))
-        this.$refs.moduleTitle.innerHTML = '修改模块'
-      } else {
+        this.$refs.moduleTitle.innerHTML = '修改模块'  // 设置弹窗标题
+      } else {  // 新增模块：清空表单
         this.resourceForm = {}
-        this.$refs.moduleTitle.innerHTML = '添加模块'
+        this.$refs.moduleTitle.innerHTML = '添加模块'  // 设置弹窗标题
       }
-      this.addModule = true
+      this.addModule = true  // 显示弹窗
     },
+    // 打开修改资源弹窗
     openEditResourceModel(resource) {
-      if (resource.url == null) {
+      if (resource.url == null) {  // 如果是模块（无资源路径），调用打开模块弹窗方法
         this.openModel(resource)
         return false
       }
+      // 复制资源数据到表单
       this.resourceForm = JSON.parse(JSON.stringify(resource))
-      this.$refs.resourceTitle.innerHTML = '修改资源'
-      this.addResource = true
+      this.$refs.resourceTitle.innerHTML = '修改资源'  // 设置弹窗标题
+      this.addResource = true  // 显示弹窗
     },
+    // 打开新增子资源弹窗
     openAddResourceModel(resource) {
       console.log(resource)
-      this.resourceForm = {}
-      this.resourceForm.parentId = resource.id
-      this.$refs.resourceTitle.innerHTML = '添加资源'
-      this.addResource = true
+      this.resourceForm = {}  // 清空表单
+      this.resourceForm.parentId = resource.id  // 设置父资源ID
+      this.$refs.resourceTitle.innerHTML = '添加资源'  // 设置弹窗标题
+      this.addResource = true  // 显示弹窗
     },
+    // 删除资源
     deleteResource(id) {
       this.axios.delete('/api/admin/resources/' + id).then(({ data }) => {
-        if (data.flag) {
+        if (data.flag) {  // 删除成功
           this.$notify.success({
             title: '成功',
             message: data.message
           })
-          this.listResources()
-        } else {
+          this.listResources()  // 重新加载资源列表
+        } else {  // 删除失败
           this.$notify.error({
             title: '失败',
             message: data.message
@@ -186,44 +224,49 @@ export default {
         }
       })
     },
+    // 新增或修改资源/模块
     addOrEditResource() {
+      // 校验资源名不能为空
       if (this.resourceForm.resourceName.trim() == '') {
         this.$message.error('资源名不能为空')
         return false
       }
+      // 提交表单数据
       this.axios.post('/api/admin/resources', this.resourceForm).then(({ data }) => {
-        if (data.flag) {
+        if (data.flag) {  // 操作成功
           this.$notify.success({
             title: '成功',
             message: data.message
           })
-          this.listResources()
-        } else {
+          this.listResources()  // 重新加载资源列表
+        } else {  // 操作失败
           this.$notify.error({
             title: '失败',
             message: data.message
           })
         }
+        // 关闭弹窗
         this.addModule = false
         this.addResource = false
       })
     }
   },
   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'  // 危险（红色）标签样式
         }
       }
     }
   }
 }
-</script>
+</script>