算力资源重构-算力资源SPU管理修改1.2

src/router/modules/remaining.ts

@@ -704,28 +704,15 @@ const remainingRouter: AppRouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'resource-spu/add',
+        path: 'resource-spu/form/:mode(add|edit|detail)?/:id(\\d+)?',
         component: () => import('@/views/compute/resourcespu/form/index.vue'),
-        name: 'ResourceSpuAdd',
+        name: 'ResourceSpuForm',
         meta: {
           noCache: false,
           hidden: true,
           canTo: true,
           icon: 'ep:edit',
-          title: '算力资源添加',
-          activeMenu: '/compute/resource-spu'
-        }
-      },
-      {
-        path: 'resource-spu/edit/:id(\\d+)',
-        component: () => import('@/views/compute/resourcespu/form/index.vue'),
-        name: 'ResourceSpuEdit',
-        meta: {
-          noCache: true,
-          hidden: true,
-          canTo: true,
-          icon: 'ep:edit',
-          title: '算力资源编辑',
+          title: '算力资源表单',
           activeMenu: '/compute/resource-spu'
         }
       }

src/views/compute/resourceconfig/index.vue

@@ -9,13 +9,19 @@
       label-width="68px"
     >
       <el-form-item label="配置类别" prop="configCategory">
-        <el-input
+        <el-select
           v-model="queryParams.configCategory"
-          placeholder="请输入配置类别"
+          placeholder="请选择配置类别"
           clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
-        />
+        >
+          <el-option
+            v-for="dict in categoryOptions"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="配置选项" prop="configOption">
         <el-input
@@ -114,12 +120,20 @@
         @selection-change="handleRowCheckboxChange"
     >
     <el-table-column type="selection" width="55" />
-      <el-table-column label="主键ID" align="center" prop="id" />
-      <el-table-column label="配置类别" align="center" prop="configCategory" />
+      <!-- <el-table-column label="主键ID" align="center" prop="id" /> -->
+      <el-table-column label="配置类别" align="center" prop="configCategory">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMPUTE_RESOURCE_CONFIG_CATEGORY" :value="scope.row.configCategory" />
+        </template>
+      </el-table-column>
       <el-table-column label="配置选项" align="center" prop="configOption" />
       <el-table-column label="排序" align="center" prop="sort" />
-      <el-table-column label="状态" align="center" prop="status" />
-      <el-table-column label="详情备注" align="center" prop="detailRemark" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_ENABLE_DISABLE" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="详情备注" align="center" prop="detailRemark" min-width="200" />
       <el-table-column
         label="创建时间"
         align="center"
@@ -167,12 +181,13 @@ import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { ResourceConfigApi, ResourceConfig } from '@/api/compute/resourceconfig'
 import ResourceConfigForm from './ResourceConfigForm.vue'
-import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
 
 /** 算力资源配置 列表 */
 defineOptions({ name: 'ResourceConfig' })
 
 const statusOptions = getIntDictOptions(DICT_TYPE.COMMON_ENABLE_DISABLE)
+const categoryOptions = getStrDictOptions(DICT_TYPE.COMPUTE_RESOURCE_CONFIG_CATEGORY)
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 

src/views/compute/resourcespu/form/index.vue

 <template>
   <ContentWrap v-loading="formLoading">
-    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+    <el-form ref="formRef" :model="formData" :rules="!isDetailMode ? formRules : {}" label-width="120px">
       <!-- 1. 算力资源名称 -->
       <el-form-item label="算力资源名称" prop="name">
         <el-input
@@ -9,17 +9,18 @@
           class="w-60!"
           maxlength="64"
           show-word-limit
+          :disabled="isDetailMode"
         />
       </el-form-item>
 
       <!-- 2. 商品封面图 -->
       <el-form-item label="商品封面图" prop="picUrl">
-        <UploadImg v-model="formData.picUrl" height="80px" />
+        <UploadImg v-model="formData.picUrl" height="80px" :disabled="isDetailMode" />
       </el-form-item>
 
       <!-- 3. 算力资源分类 -->
       <el-form-item label="算力资源分类" prop="categoryId">
-        <el-select v-model="formData.categoryId" placeholder="请选择算力资源分类" clearable style="width: 200px;">
+        <el-select v-model="formData.categoryId" placeholder="请选择算力资源分类" clearable style="width: 200px;" :disabled="isDetailMode">
           <el-option
             v-for="category in categoryList"
             :key="category.id"
@@ -32,7 +33,7 @@
       <!-- 4. 硬件配置 - inline布局 -->
       <div style="display: flex; margin-bottom: 16px;">
         <el-form-item label="CPU配置" prop="cpu" style="margin-right: 20px; margin-bottom: 0;">
-          <el-select v-model="formData.cpu" placeholder="请选择CPU配置" clearable style="width: 180px;">
+          <el-select v-model="formData.cpu" placeholder="请选择CPU配置" clearable style="width: 180px;" :disabled="isDetailMode">
             <el-option
               v-for="option in cpuOptions"
               :key="option.id"
@@ -42,7 +43,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="GPU配置" prop="gpu" style="margin-bottom: 0;">
-          <el-select v-model="formData.gpu" placeholder="请选择GPU配置" clearable style="width: 180px;">
+          <el-select v-model="formData.gpu" placeholder="请选择GPU配置" clearable style="width: 180px;" :disabled="isDetailMode">
             <el-option
               v-for="option in gpuOptions"
               :key="option.id"
@@ -55,7 +56,7 @@
 
       <div style="display: flex; margin-bottom: 24px;">
         <el-form-item label="内存配置" prop="ram" style="margin-right: 20px; margin-bottom: 0;">
-          <el-select v-model="formData.ram" placeholder="请选择内存配置" clearable style="width: 180px;">
+          <el-select v-model="formData.ram" placeholder="请选择内存配置" clearable style="width: 180px;" :disabled="isDetailMode">
             <el-option
               v-for="option in ramOptions"
               :key="option.id"
@@ -65,7 +66,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="存储配置" prop="storage" style="margin-bottom: 0;">
-          <el-select v-model="formData.storage" placeholder="请选择存储配置" clearable style="width: 180px;">
+          <el-select v-model="formData.storage" placeholder="请选择存储配置" clearable style="width: 180px;" :disabled="isDetailMode">
             <el-option
               v-for="option in storageOptions"
               :key="option.id"
@@ -78,25 +79,25 @@
 
       <!-- 5. 服务器信息 -->
       <el-form-item label="服务器IP" prop="ip">
-        <el-input v-model="formData.ip" placeholder="请输入服务器IP" style="width: 300px;" />
+        <el-input v-model="formData.ip" placeholder="请输入服务器IP" style="width: 300px;" :disabled="isDetailMode" />
       </el-form-item>
 
       <div style="display: flex; margin-bottom: 24px;">
         <el-form-item label="初始用户名" prop="initUsername" style="margin-right: 20px; margin-bottom: 0;">
-          <el-input v-model="formData.initUsername" placeholder="请输入初始用户名" style="width: 180px;" autocomplete="off" />
+          <el-input v-model="formData.initUsername" placeholder="请输入初始用户名" style="width: 180px;" autocomplete="off" :disabled="isDetailMode" />
         </el-form-item>
         <el-form-item label="初始密码" prop="initPassword" style="margin-bottom: 0;">
-          <el-input v-model="formData.initPassword" placeholder="请输入初始密码" type="password" style="width: 180px;" autocomplete="new-password" />
+          <el-input v-model="formData.initPassword" placeholder="请输入初始密码" type="password" style="width: 180px;" autocomplete="new-password" :disabled="isDetailMode" />
         </el-form-item>
       </div>
 
       <!-- 6. 商品库存和销量 -->
       <div style="display: flex; margin-bottom: 24px;">
         <el-form-item label="库存数量" prop="stock" style="margin-right: 20px; margin-bottom: 0;">
-          <el-input v-model="formData.stock" placeholder="请输入库存数量" style="width: 150px;" />
+          <el-input v-model="formData.stock" placeholder="请输入库存数量" style="width: 150px;" :disabled="isDetailMode" />
         </el-form-item>
         <el-form-item label="商品销量" prop="sales" style="margin-bottom: 0;">
-          <el-input v-model="formData.sales" placeholder="请输入商品销量" style="width: 150px;" />
+          <el-input v-model="formData.sales" placeholder="请输入商品销量" style="width: 150px;" :disabled="isDetailMode" />
         </el-form-item>
       </div>
 
@@ -108,6 +109,7 @@
           type="textarea"
           rows="3"
           style="width: 400px;"
+          :disabled="isDetailMode"
         />
       </el-form-item>
 
@@ -124,7 +126,7 @@
 
       <!-- 9. 状态 -->
       <el-form-item label="状态" prop="status">
-        <el-radio-group v-model="formData.status">
+        <el-radio-group v-model="formData.status" :disabled="isDetailMode">
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMPUTE_RESOURCE_SPU_STATUS)"
             :key="dict.value"
@@ -137,10 +139,12 @@
 
       <!-- 操作按钮 -->
       <el-form-item style="text-align: center; margin-top: 30px;">
-        <el-button :loading="formLoading" type="primary" size="large" @click="submitForm">
+        <el-button v-if="!isDetailMode" :loading="formLoading" type="primary" size="large" @click="submitForm">
           保存
         </el-button>
-        <el-button size="large" style="margin-left: 20px;" @click="close">返回</el-button>
+        <el-button size="large" style="margin-left: 20px;" @click="close">
+          {{ isDetailMode ? '返回' : '取消' }}
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -150,7 +154,7 @@
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { UploadImg } from '@/components/UploadFile'
 import { useTagsViewStore } from '@/store/modules/tagsView'
-import { ResourceConfigApi } from '@/api/compute/resourceconfig'
+import { useHardwareConfigStore } from '@/store/modules/compute/hardwareConfig'
 import { ResourceSpu, ResourceSpuApi } from '@/api/compute/resourcespu'
 
 defineOptions({ name: 'ResourceSpuAdd' })
@@ -159,15 +163,27 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push, currentRoute } = useRouter() // 路由
 const { params, name } = useRoute() // 查询参数
+
+// 获取路由参数
+const { mode, id } = params as { mode?: string, id?: string }
+
+// 判断当前模式
+const currentMode = computed(() => mode || 'add')
+const isDetailMode = computed(() => currentMode.value === 'detail')
+const isEditMode = computed(() => currentMode.value === 'edit')
+const isAddMode = computed(() => currentMode.value === 'add')
 const { delView } = useTagsViewStore() // 视图操作
+const hardwareConfigStore = useHardwareConfigStore() // 硬件配置store
 
 const formLoading = ref(false) // 表单的加载中
 const formRef = ref() // 表单 Ref
 const categoryList = ref<any[]>([])
-const cpuOptions = ref<any[]>([])
-const gpuOptions = ref<any[]>([])
-const ramOptions = ref<any[]>([])
-const storageOptions = ref<any[]>([])
+
+// 从store获取硬件配置选项
+const cpuOptions = computed(() => hardwareConfigStore.getOptionsByType('cpu'))
+const gpuOptions = computed(() => hardwareConfigStore.getOptionsByType('gpu'))
+const ramOptions = computed(() => hardwareConfigStore.getOptionsByType('ram'))
+const storageOptions = computed(() => hardwareConfigStore.getOptionsByType('storage'))
 
 const formData = ref<ResourceSpu>({
   id: undefined,
@@ -204,27 +220,15 @@ const formRules = reactive({
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
 })
 
-/** 加载配置选项 */
-const loadConfigOptions = async () => {
-  const [cpuRes, gpuRes, ramRes, storageRes] = await Promise.all([
-    ResourceConfigApi.listSimpleConfigByCategory('cpu'),
-    ResourceConfigApi.listSimpleConfigByCategory('gpu'),
-    ResourceConfigApi.listSimpleConfigByCategory('ram'),
-    ResourceConfigApi.listSimpleConfigByCategory('storage')
-  ])
-  cpuOptions.value = cpuRes
-  gpuOptions.value = gpuRes
-  ramOptions.value = ramRes
-  storageOptions.value = storageRes
-}
 
 /** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
   await formRef.value.validate()
   formLoading.value = true
   try {
     const data = formData.value as unknown as ResourceSpu
-    if (params.id) {
+    if (isEditMode.value) {
       // 编辑
       await ResourceSpuApi.updateResourceSpu(data)
       message.success(t('common.updateSuccess'))
@@ -234,6 +238,8 @@ const submitForm = async () => {
       message.success(t('common.createSuccess'))
     }
     close()
+    // 发送操作成功的事件
+    emit('success')
   } finally {
     formLoading.value = false
   }
@@ -247,21 +253,25 @@ const close = () => {
 
 /** 初始化 */
 onMounted(async () => {
-  // 加载分类列表
-  const categoryResponse = await ResourceSpuApi.listSimpleCategory()
-  categoryList.value = categoryResponse
-
-  // 加载配置选项
-  await loadConfigOptions()
+  try {
+    // 并行加载分类列表和硬件配置选项
+    const [categoryResponse] = await Promise.all([
+      ResourceSpuApi.listSimpleCategory(),
+      hardwareConfigStore.loadConfigOptions()
+    ])
+    categoryList.value = categoryResponse
 
-  // 如果是编辑模式，获取数据
-  if (params.id) {
-    formLoading.value = true
-    try {
-      formData.value = await ResourceSpuApi.getResourceSpu(Number(params.id))
-    } finally {
-      formLoading.value = false
+    // 编辑模式或详情模式需要获取数据
+    if (isEditMode.value || isDetailMode.value) {
+      formLoading.value = true
+      try {
+        formData.value = await ResourceSpuApi.getResourceSpu(Number(id))
+      } finally {
+        formLoading.value = false
+      }
     }
+  } catch (error) {
+    console.error('初始化失败:', error)
   }
 })
 </script>
\ No newline at end of file

src/views/compute/resourcespu/index.vue

@@ -8,7 +8,7 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="算力资源名称" prop="name">
+      <el-form-item label="资源名称" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入算力资源名称"
@@ -17,51 +17,75 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="CPU配置" prop="cpu">
-        <el-input
+      <el-form-item label="CPU" prop="cpu">
+        <el-select
           v-model="queryParams.cpu"
-          placeholder="请输入CPU配置"
+          placeholder="请选择CPU配置"
           clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
-        />
+        >
+          <el-option
+            v-for="option in hardwareConfigStore.getOptionsByType('cpu')"
+            :key="option.id"
+            :label="option.configOption"
+            :value="option.configOption"
+          />
+        </el-select>
       </el-form-item>
-      <el-form-item label="GPU配置" prop="gpu">
-        <el-input
+      <el-form-item label="GPU" prop="gpu">
+        <el-select
           v-model="queryParams.gpu"
-          placeholder="请输入GPU配置"
+          placeholder="请选择GPU配置"
           clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
-        />
+        >
+          <el-option
+            v-for="option in hardwareConfigStore.getOptionsByType('gpu')"
+            :key="option.id"
+            :label="option.configOption"
+            :value="option.configOption"
+          />
+        </el-select>
       </el-form-item>
-      <el-form-item label="内存配置" prop="ram">
-        <el-input
+      <el-form-item label="内存" prop="ram">
+        <el-select
           v-model="queryParams.ram"
-          placeholder="请输入内存配置"
+          placeholder="请选择内存配置"
           clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
-        />
+        >
+          <el-option
+            v-for="option in hardwareConfigStore.getOptionsByType('ram')"
+            :key="option.id"
+            :label="option.configOption"
+            :value="option.configOption"
+          />
+        </el-select>
       </el-form-item>
-      <el-form-item label="存储配置" prop="storage">
-        <el-input
+      <el-form-item label="存储" prop="storage">
+        <el-select
           v-model="queryParams.storage"
-          placeholder="请输入存储配置"
+          placeholder="请选择存储配置"
           clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="服务器ip" prop="ip">
-        <el-input
-          v-model="queryParams.ip"
-          placeholder="请输入服务器ip"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
+        >
+          <el-option
+            v-for="option in hardwareConfigStore.getOptionsByType('storage')"
+            :key="option.id"
+            :label="option.configOption"
+            :value="option.configOption"
+          />
+        </el-select>
       </el-form-item>
+<!--      <el-form-item label="服务器ip" prop="ip">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.ip"-->
+<!--          placeholder="请输入服务器ip"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
 <!--      <el-form-item label="初始用户名" prop="initUsername">-->
 <!--        <el-input-->
 <!--          v-model="queryParams.initUsername"-->
@@ -89,24 +113,30 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="算力资源分类编号" prop="categoryId">
-        <el-input
+      <el-form-item label="资源分类" prop="categoryId">
+        <el-select
           v-model="queryParams.categoryId"
-          placeholder="请输入算力资源分类编号"
+          placeholder="请选择资源分类"
           clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="商品封面图" prop="picUrl">
-        <el-input
-          v-model="queryParams.picUrl"
-          placeholder="请输入商品封面图"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.id"
+            :label="category.name"
+            :value="category.id"
+          />
+        </el-select>
       </el-form-item>
+<!--      <el-form-item label="商品封面图" prop="picUrl">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.picUrl"-->
+<!--          placeholder="请输入商品封面图"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
 <!--      <el-form-item label="商品轮播图地址" prop="sliderPicUrls">-->
 <!--        <el-input-->
 <!--          v-model="queryParams.sliderPicUrls"-->
@@ -116,24 +146,24 @@
 <!--          class="!w-240px"-->
 <!--        />-->
 <!--      </el-form-item>-->
-      <el-form-item label="总库存数量" prop="stock">
-        <el-input
-          v-model="queryParams.stock"
-          placeholder="请输入总库存数量"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="商品销量" prop="sales">
-        <el-input
-          v-model="queryParams.sales"
-          placeholder="请输入商品销量"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
+<!--      <el-form-item label="总库存数量" prop="stock">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.stock"-->
+<!--          placeholder="请输入总库存数量"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="商品销量" prop="sales">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.sales"-->
+<!--          placeholder="请输入商品销量"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
       <el-form-item label="状态" prop="status">
         <el-select
           v-model="queryParams.status"
@@ -242,7 +272,7 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="操作" align="center" min-width="120px">
+      <el-table-column label="操作" align="center" min-width="180px">
         <template #default="scope">
           <el-button
             link
@@ -254,6 +284,14 @@
           </el-button>
           <el-button
             link
+            type="success"
+            @click="openDetail(scope.row.id)"
+            v-hasPermi="['compute:resource-spu:query']"
+          >
+            详情
+          </el-button>
+          <el-button
+            link
             type="danger"
             @click="handleDelete(scope.row.id)"
             v-hasPermi="['compute:resource-spu:delete']"
@@ -274,14 +312,17 @@
 </template>
 
 <script setup lang="ts">
+import { ref, reactive, computed, onMounted, onActivated } from 'vue'
 import { isEmpty } from '@/utils/is'
 import { dateFormatter } from '@/utils/formatTime'
 import download from '@/utils/download'
 import { createImageViewer } from '@/components/ImageViewer'
 import { ResourceSpuApi, ResourceSpu } from '@/api/compute/resourcespu'
 import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+import { useHardwareConfigStore } from '@/store/modules/compute/hardwareConfig'
 
 const { push } = useRouter()
+const hardwareConfigStore = useHardwareConfigStore()
 
 /** 算力资源SPU表（基础配置信息） 列表 */
 defineOptions({ name: 'ResourceSpu' })
@@ -292,6 +333,7 @@ const { t } = useI18n() // 国际化
 const loading = ref(true) // 列表的加载中
 const list = ref<ResourceSpu[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
+const categoryList = ref<any[]>([]) // 分类列表
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -343,13 +385,18 @@ const resetQuery = () => {
 
 /** 新增或修改 */
 const openForm = (id?: number) => {
-  // 修改
   if (typeof id === 'number') {
-    push({ name: 'ResourceSpuEdit', params: { id } })
-    return
+    // 修改
+    push({ name: 'ResourceSpuForm', params: { mode: 'edit', id } })
+  } else {
+    // 新增
+    push({ name: 'ResourceSpuForm', params: { mode: 'add' } })
   }
-  // 新增
-  push({ name: 'ResourceSpuAdd' })
+}
+
+/** 查看详情 */
+const openDetail = (id: number) => {
+  push({ name: 'ResourceSpuForm', params: { mode: 'detail', id } })
 }
 
 /** 删除按钮操作 */
@@ -404,7 +451,24 @@ const handleExport = async () => {
 }
 
 /** 初始化 **/
-onMounted(() => {
+onMounted(async () => {
+  try {
+    // 并行加载数据
+    const [categoryResponse] = await Promise.all([
+      ResourceSpuApi.listSimpleCategory(),
+      hardwareConfigStore.loadConfigOptions()
+    ])
+    categoryList.value = categoryResponse
+
+    // 加载列表数据
+    getList()
+  } catch (error) {
+    console.error('初始化失败:', error)
+  }
+})
+
+// 监听路由变化，当从新增/编辑页面返回时刷新列表
+onActivated(() => {
   getList()
 })
 </script>