Merge remote-tracking branch 'origin/compute' into develop

src/api/compute/resourcecategory/index.ts

+import request from '@/config/axios'
+
+/** 算力资源分类表（仅用于算力服务器分类）信息 */
+export interface ResourceCategory {
+          id: number; // 分类编号
+          name?: string; // 分类名称（如：高性能计算服务资源）
+          picUrl?: string; // 分类图标地址
+          sort: number; // 分类排序（数字越小越靠前）
+          status?: number; // 状态（0=启用，1=禁用）
+  }
+
+// 算力资源分类表（仅用于算力服务器分类） API
+export const ResourceCategoryApi = {
+  // 查询算力资源分类表（仅用于算力服务器分类）分页
+  getResourceCategoryPage: async (params: any) => {
+    return await request.get({ url: `/compute/resource-category/page`, params })
+  },
+
+  // 查询算力资源分类表（仅用于算力服务器分类）详情
+  getResourceCategory: async (id: number) => {
+    return await request.get({ url: `/compute/resource-category/get?id=` + id })
+  },
+
+  // 新增算力资源分类表（仅用于算力服务器分类）
+  createResourceCategory: async (data: ResourceCategory) => {
+    return await request.post({ url: `/compute/resource-category/create`, data })
+  },
+
+  // 修改算力资源分类表（仅用于算力服务器分类）
+  updateResourceCategory: async (data: ResourceCategory) => {
+    return await request.put({ url: `/compute/resource-category/update`, data })
+  },
+
+  // 删除算力资源分类表（仅用于算力服务器分类）
+  deleteResourceCategory: async (id: number) => {
+    return await request.delete({ url: `/compute/resource-category/delete?id=` + id })
+  },
+
+  /** 批量删除算力资源分类表（仅用于算力服务器分类） */
+  deleteResourceCategoryList: async (ids: number[]) => {
+    return await request.delete({ url: `/compute/resource-category/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出算力资源分类表（仅用于算力服务器分类） Excel
+  exportResourceCategory: async (params) => {
+    return await request.download({ url: `/compute/resource-category/export-excel`, params })
+  }
+}

src/api/compute/resourceconfig/index.ts

+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 算力资源配置信息 */
+export interface ResourceConfig {
+          id: number; // 主键ID
+          configCategory?: string; // 配置类别
+          configOption?: string; // 配置选项
+          sort: number; // 排序
+          status?: number; // 状态：0=启用,1=禁用
+          detailRemark: string; // 详情备注（如：i7-13700K 16核24线程）
+  }
+
+// 算力资源配置 API
+export const ResourceConfigApi = {
+  // 查询算力资源配置分页
+  getResourceConfigPage: async (params: any) => {
+    return await request.get({ url: `/compute/resource-config/page`, params })
+  },
+
+  // 查询算力资源配置详情
+  getResourceConfig: async (id: number) => {
+    return await request.get({ url: `/compute/resource-config/get?id=` + id })
+  },
+
+  // 新增算力资源配置
+  createResourceConfig: async (data: ResourceConfig) => {
+    return await request.post({ url: `/compute/resource-config/create`, data })
+  },
+
+  // 修改算力资源配置
+  updateResourceConfig: async (data: ResourceConfig) => {
+    return await request.put({ url: `/compute/resource-config/update`, data })
+  },
+
+  // 删除算力资源配置
+  deleteResourceConfig: async (id: number) => {
+    return await request.delete({ url: `/compute/resource-config/delete?id=` + id })
+  },
+
+  /** 批量删除算力资源配置 */
+  deleteResourceConfigList: async (ids: number[]) => {
+    return await request.delete({ url: `/compute/resource-config/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出算力资源配置 Excel
+  exportResourceConfig: async (params) => {
+    return await request.download({ url: `/compute/resource-config/export-excel`, params })
+  },
+
+  // 根据类别获取精简配置选项列表
+  listSimpleConfigByCategory: async (category: string) => {
+    return await request.get({ url: `/compute/resource-config/list-simple-config-by-category?category=${category}` })
+  }
+}
\ No newline at end of file

src/api/compute/resourceorder/index.ts

+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 算力资源订单信息 */
+export interface ResourceOrder {
+          id: number; // 订单ID
+          userId?: number; // 下单用户ID
+          skuId?: number; // 算力资源SKU ID
+          spuName?: string; // 算力资源名称（下单时快照）
+          orderNo?: string; // 订单编号
+          status: number; // 订单状态：0=待支付,1=已支付,2=已取消
+          marketPrice: number; // 市场价格(分)
+          paymentPrice?: number; // 实付金额(分)
+          payOrderId: number; // 支付订单编号
+          payTime: string | Dayjs; // 支付时间
+          payChannelCode: string; // 支付渠道
+          rentStartTime: string | Dayjs; // 租赁开始时间
+          rentEndTime: string | Dayjs; // 租赁结束时间
+          cancelTime: string | Dayjs; // 取消时间
+          remark: string; // 备注
+          resourceStatus: number; // 算力资源状态：[0]未启用,[1]使用中,[2]已释放
+          refundStatus: number; // 退款状态
+          refundPrice: string; // 退款金额
+          invoiceStatus: number; // 开票状态：[0]未开 [1]开票中 [2]已开票
+          invoiceUrl: string; // 发票链接
+  }
+
+// 算力资源订单 API
+export const ResourceOrderApi = {
+  // 查询算力资源订单分页
+  getResourceOrderPage: async (params: any) => {
+    return await request.get({ url: `/compute/resource-order/page`, params })
+  },
+
+  // 查询算力资源订单详情
+  getResourceOrder: async (id: number) => {
+    return await request.get({ url: `/compute/resource-order/get?id=` + id })
+  },
+
+  // 新增算力资源订单
+  createResourceOrder: async (data: ResourceOrder) => {
+    return await request.post({ url: `/compute/resource-order/create`, data })
+  },
+
+  // 修改算力资源订单
+  updateResourceOrder: async (data: ResourceOrder) => {
+    return await request.put({ url: `/compute/resource-order/update`, data })
+  },
+
+  // 删除算力资源订单
+  deleteResourceOrder: async (id: number) => {
+    return await request.delete({ url: `/compute/resource-order/delete?id=` + id })
+  },
+
+  /** 批量删除算力资源订单 */
+  deleteResourceOrderList: async (ids: number[]) => {
+    return await request.delete({ url: `/compute/resource-order/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出算力资源订单 Excel
+  exportResourceOrder: async (params) => {
+    return await request.download({ url: `/compute/resource-order/export-excel`, params })
+  }
+}
\ No newline at end of file

src/api/compute/resourcesku/index.ts

+import request from '@/config/axios'
+import type { Dayjs } from 'dayjs';
+
+/** 算力资源SKU表（价格和租赁信息）信息 */
+export interface ResourceSku {
+          id: number; // 主键ID
+          spuId?: number; // 关联的SPU ID
+          durationDays?: number; // 租赁天数（30/90/365等）
+          paymentPrice?: number; // 支付价格（单位：分）
+          marketPrice: number; // 市场价格（单位：分）
+          status?: number; // 状态（0-下架，1-上架）
+  }
+
+// 算力资源SKU表（价格和租赁信息） API
+export const ResourceSkuApi = {
+  // 查询算力资源SKU表（价格和租赁信息）分页
+  getResourceSkuPage: async (params: any) => {
+    return await request.get({ url: `/compute/resource-sku/page`, params })
+  },
+
+  // 查询算力资源SKU表（价格和租赁信息）详情
+  getResourceSku: async (id: number) => {
+    return await request.get({ url: `/compute/resource-sku/get?id=` + id })
+  },
+
+  // 新增算力资源SKU表（价格和租赁信息）
+  createResourceSku: async (data: ResourceSku) => {
+    return await request.post({ url: `/compute/resource-sku/create`, data })
+  },
+
+  // 修改算力资源SKU表（价格和租赁信息）
+  updateResourceSku: async (data: ResourceSku) => {
+    return await request.put({ url: `/compute/resource-sku/update`, data })
+  },
+
+  // 删除算力资源SKU表（价格和租赁信息）
+  deleteResourceSku: async (id: number) => {
+    return await request.delete({ url: `/compute/resource-sku/delete?id=` + id })
+  },
+
+  /** 批量删除算力资源SKU表（价格和租赁信息） */
+  deleteResourceSkuList: async (ids: number[]) => {
+    return await request.delete({ url: `/compute/resource-sku/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出算力资源SKU表（价格和租赁信息） Excel
+  exportResourceSku: async (params) => {
+    return await request.download({ url: `/compute/resource-sku/export-excel`, params })
+  }
+}
\ No newline at end of file

src/api/compute/resourcespu/index.ts

+import request from '@/config/axios'
+
+/** 算力资源SPU表（基础配置信息）信息 */
+export interface ResourceSpu {
+          id: number; // 主键ID
+          name?: string; // 算力资源名称
+          cpu?: string; // CPU配置
+          gpu: string; // GPU配置
+          ram?: string; // 内存配置
+          storage?: string; // 存储配置
+          ip?: string; // 服务器ip
+          initUsername?: string; // 初始用户名
+          initPassword?: string; // 初始密码
+          intro: string; // 商品简介
+          categoryId?: number; // 算力资源分类编号
+          picUrl?: string; // 商品封面图
+          sliderPicUrls: string; // 商品轮播图地址，以逗号分隔，最多15张
+          stock?: number; // 总库存数量
+          sales?: number; // 商品销量
+          status?: number; // 状态（0 下架，1 上架，2 回收）
+  }
+
+// 算力资源SPU表（基础配置信息） API
+export const ResourceSpuApi = {
+  // 查询算力资源SPU表（基础配置信息）分页
+  getResourceSpuPage: async (params: any) => {
+    return await request.get({ url: `/compute/resource-spu/page`, params })
+  },
+  //查询精简算力资源分类列表
+  listSimpleCategory: async () =>{
+    return await request.get({ url: `/compute/resource-category/list-simple`})
+  },
+  // 查询算力资源SPU表（基础配置信息）详情
+  getResourceSpu: async (id: number) => {
+    return await request.get({ url: `/compute/resource-spu/get?id=` + id })
+  },
+
+  // 新增算力资源SPU表（基础配置信息）
+  createResourceSpu: async (data: ResourceSpu) => {
+    return await request.post({ url: `/compute/resource-spu/create`, data })
+  },
+
+  // 修改算力资源SPU表（基础配置信息）
+  updateResourceSpu: async (data: ResourceSpu) => {
+    return await request.put({ url: `/compute/resource-spu/update`, data })
+  },
+
+  // 删除算力资源SPU表（基础配置信息）
+  deleteResourceSpu: async (id: number) => {
+    return await request.delete({ url: `/compute/resource-spu/delete?id=` + id })
+  },
+
+  /** 批量删除算力资源SPU表（基础配置信息） */
+  deleteResourceSpuList: async (ids: number[]) => {
+    return await request.delete({ url: `/compute/resource-spu/delete-list?ids=${ids.join(',')}` })
+  },
+
+  // 导出算力资源SPU表（基础配置信息） Excel
+  exportResourceSpu: async (params) => {
+    return await request.download({ url: `/compute/resource-spu/export-excel`, params })
+  }
+}

src/router/modules/remaining.ts

@@ -696,6 +696,29 @@ const remainingRouter: AppRouteRecordRaw[] = [
     ]
     ]
   },
   },
   {
   {
+    path: '/compute',
+    component: Layout,
+    name: 'Compute',
+    meta: {
+      hidden: true
+    },
+    children: [
+      {
+        path: 'resource-spu/form/:mode(add|edit|detail)?/:id(\\d+)?',
+        component: () => import('@/views/compute/resourcespu/form/index.vue'),
+        name: 'ResourceSpuForm',
+        meta: {
+          noCache: false,
+          hidden: true,
+          canTo: true,
+          icon: 'ep:edit',
+          title: '算力资源表单',
+          activeMenu: '/compute/resource-spu'
+        }
+      }
+    ]
+  },
+  {
     path: '/:pathMatch(.*)*',
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/Error/404.vue'),
     component: () => import('@/views/Error/404.vue'),
     name: '',
     name: '',

src/store/modules/compute/hardwareConfig.ts

+import { defineStore } from 'pinia'
+import { ResourceConfigApi } from '@/api/compute/resourceconfig'
+
+interface ResourceConfig {
+  cpuOptions: any[]
+  gpuOptions: any[]
+  ramOptions: any[]
+  storageOptions: any[]
+  locationOptions: any[]
+  lastFetched: number | null
+}
+
+export const useResourceConfigStore = defineStore('resourceConfig', {
+  state: (): ResourceConfig => ({
+    cpuOptions: [],
+    gpuOptions: [],
+    ramOptions: [],
+    storageOptions: [],
+    locationOptions: [],
+    lastFetched: null
+  }),
+
+  getters: {
+    // 判断是否需要重新获取数据（缓存5分钟）
+    needsRefresh(): boolean {
+      if (!this.lastFetched) return true
+      const now = Date.now()
+      const fiveMinutes = 5 * 60 * 1000
+      return now - this.lastFetched > fiveMinutes
+    },
+
+    // 获取所有配置选项
+    allOptions() {
+      return {
+        cpu: this.cpuOptions,
+        gpu: this.gpuOptions,
+        ram: this.ramOptions,
+        storage: this.storageOptions,
+        location: this.locationOptions
+      }
+    }
+  },
+
+  actions: {
+    // 加载硬件配置选项
+    async loadConfigOptions(forceRefresh = false) {
+      // 如果不需要刷新且不是强制刷新，直接返回缓存数据
+      if (!forceRefresh && !this.needsRefresh) {
+        return this.allOptions
+      }
+
+      try {
+        const [cpuRes, gpuRes, ramRes, storageRes, locationRes] = await Promise.all([
+          ResourceConfigApi.listSimpleConfigByCategory('cpu'),
+          ResourceConfigApi.listSimpleConfigByCategory('gpu'),
+          ResourceConfigApi.listSimpleConfigByCategory('ram'),
+          ResourceConfigApi.listSimpleConfigByCategory('storage'),
+          ResourceConfigApi.listSimpleConfigByCategory('location')
+        ])
+
+        this.cpuOptions = cpuRes
+        this.gpuOptions = gpuRes
+        this.ramOptions = ramRes
+        this.storageOptions = storageRes
+        this.locationOptions = locationRes
+        this.lastFetched = Date.now()
+
+        return this.allOptions
+      } catch (error) {
+        console.error('加载资源配置选项失败:', error)
+        throw error
+      }
+    },
+
+    // 清除缓存
+    clearCache() {
+      this.cpuOptions = []
+      this.gpuOptions = []
+      this.ramOptions = []
+      this.storageOptions = []
+      this.locationOptions = []
+      this.lastFetched = null
+    },
+
+    // 根据类型获取选项
+    getOptionsByType(type: 'cpu' | 'gpu' | 'ram' | 'storage' | 'location') {
+      return this[type + 'Options']
+    }
+  }
+})
\ No newline at end of file

src/utils/dict.ts

@@ -110,6 +110,8 @@ export const getDictLabel = (dictType: string, value: any): string => {
 export enum DICT_TYPE {
 export enum DICT_TYPE {
   USER_TYPE = 'user_type',
   USER_TYPE = 'user_type',
   COMMON_STATUS = 'common_status',
   COMMON_STATUS = 'common_status',
+  COMMON_ENABLE_DISABLE = 'common_enable_disable',
+  COMMON_LIST_STATUS = 'common_list_status',
   TERMINAL = 'terminal', // 终端
   TERMINAL = 'terminal', // 终端
   DATE_INTERVAL = 'date_interval', // 数据间隔
   DATE_INTERVAL = 'date_interval', // 数据间隔
 
 
@@ -173,6 +175,13 @@ export enum DICT_TYPE {
   MEMBER_EXPERIENCE_BIZ_TYPE = 'member_experience_biz_type', // 会员经验业务类型
   MEMBER_EXPERIENCE_BIZ_TYPE = 'member_experience_biz_type', // 会员经验业务类型
   CHECK_STATUS = 'check_status', // 客户企业管理审核
   CHECK_STATUS = 'check_status', // 客户企业管理审核
 
 
+  // ==========Compute 算力资源模块========
+  COMPUTE_RESOURCE_SPU_STATUS = 'compute_resource_spu_status',
+  COMPUTE_RESOURCE_CONFIG_CATEGORY = 'compute_resource_config_category',
+  COMPUTE_RESOURCE_DURATION = 'compute_resource_duration',
+  COMPUTE_RESOURCE_ORDER_STATUS = 'compute_resource_order_status',
+  COMPUTE_RESOURCE_REFUND_STATUS = 'compute_resource_refund_status',
+
   // ========== MALL - 商品模块 ==========
   // ========== MALL - 商品模块 ==========
   PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
   PRODUCT_SPU_STATUS = 'product_spu_status', //商品状态
 
 

src/views/compute/resourcecategory/ResourceCategoryForm.vue

+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="分类名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入分类名称" />
+      </el-form-item>
+      <el-form-item label="移动端分类图" prop="picUrl">
+        <UploadImg v-model="formData.picUrl" :limit="1" :is-show-tip="false" />
+        <div style="font-size: 10px" class="pl-10px">推荐 180x180 图片分辨率</div>
+      </el-form-item>
+      <el-form-item label="分类排序" prop="sort">
+        <el-input-number v-model="formData.sort" controls-position="right" :min="0" />
+      </el-form-item>
+      <el-form-item label="开启状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_ENABLE_DISABLE)"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { ResourceCategoryApi, ResourceCategory } from '@/api/compute/resourcecategory'
+import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+
+/** 算力资源分类表（仅用于算力服务器分类） 表单 */
+defineOptions({ name: 'ResourceCategoryForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  picUrl: undefined,
+  sort: undefined,
+  status: undefined
+})
+const formRules = reactive({
+  name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
+  picUrl: [{ required: true, message: '分类图标地址不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ResourceCategoryApi.getResourceCategory(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ResourceCategory
+    if (formType.value === 'create') {
+      await ResourceCategoryApi.createResourceCategory(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ResourceCategoryApi.updateResourceCategory(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    picUrl: undefined,
+    sort: undefined,
+    status: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/compute/resourcecategory/index.vue

+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="分类名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          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-form-item>-->
+<!--      <el-form-item label="分类排序" prop="sort">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.sort"-->
+<!--          placeholder="请输入分类排序"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['compute:resource-category:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['compute:resource-category:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+        <el-button
+            type="danger"
+            plain
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-hasPermi="['compute:resource-category:delete']"
+        >
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" width="55" />
+      <el-table-column label="分类编号" align="center" prop="id" />
+      <el-table-column label="分类名称" align="center" prop="name" />
+      <el-table-column label="分类图标" align="center" min-width="80" prop="picUrl">
+        <template #default="scope">
+          <img :src="scope.row.picUrl" alt="移动端分类图" class="h-36px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="分类排序" align="center" prop="sort" />
+      <el-table-column label="状态" align="center" min-width="150" 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="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['compute:resource-category:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['compute:resource-category:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ResourceCategoryForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { ResourceCategoryApi, ResourceCategory } from '@/api/compute/resourcecategory'
+import ResourceCategoryForm from './ResourceCategoryForm.vue'
+import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
+
+/** 算力资源分类表（仅用于算力服务器分类） 列表 */
+defineOptions({ name: 'ResourceCategory' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ResourceCategory[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  picUrl: undefined,
+  sort: undefined,
+  status: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+// 调用方法获取数字字典
+const statusOptions = getStrDictOptions(DICT_TYPE.COMMON_ENABLE_DISABLE);
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ResourceCategoryApi.getResourceCategoryPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ResourceCategoryApi.deleteResourceCategory(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除算力资源分类表（仅用于算力服务器分类） */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await ResourceCategoryApi.deleteResourceCategoryList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: ResourceCategory[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ResourceCategoryApi.exportResourceCategory(queryParams)
+    download.excel(data, '算力资源分类表（仅用于算力服务器分类）.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/compute/resourceconfig/ResourceConfigForm.vue

+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="配置类别" prop="configCategory">
+        <!--        <el-input v-model="formData.configCategory" placeholder="请输入配置类别" />-->
+        <el-select
+          v-model="formData.configCategory"
+          placeholder="请选择状态"
+          clearable
+          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 v-model="formData.configOption" placeholder="请输入配置选项"/>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="formData.sort" controls-position="right" :min="0"/>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio
+          v-model="formData.status"
+          v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+          :key="dict.value"
+          :value="dict.value"
+        >
+          {{ dict.label }}
+        </el-radio>
+      </el-form-item>
+      <el-form-item label="详情备注" prop="detailRemark">
+        <el-input v-model="formData.detailRemark" placeholder="请输入详情备注"/>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import {ResourceConfig, ResourceConfigApi} from '@/api/compute/resourceconfig'
+import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
+
+/** 算力资源配置 表单 */
+defineOptions({name: 'ResourceConfigForm'})
+
+const {t} = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+
+const categoryOptions = getStrDictOptions(DICT_TYPE.COMPUTE_RESOURCE_CONFIG_CATEGORY);
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  configCategory: undefined,
+  configOption: undefined,
+  sort: undefined,
+  status: undefined,
+  detailRemark: undefined
+})
+const formRules = reactive({
+  configCategory: [{required: true, message: '配置类别不能为空', trigger: 'blur'}],
+  configOption: [{required: true, message: '配置选项不能为空', trigger: 'blur'}],
+  status: [{required: true, message: '状态：0=启用,1=禁用不能为空', trigger: 'blur'}]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ResourceConfigApi.getResourceConfig(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({open}) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ResourceConfig
+    if (formType.value === 'create') {
+      await ResourceConfigApi.createResourceConfig(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ResourceConfigApi.updateResourceConfig(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    configCategory: undefined,
+    configOption: undefined,
+    sort: undefined,
+    status: undefined,
+    detailRemark: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/compute/resourceconfig/index.vue

+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="配置类别" prop="configCategory">
+        <el-select
+          v-model="queryParams.configCategory"
+          placeholder="请选择配置类别"
+          clearable
+          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
+          v-model="queryParams.configOption"
+          placeholder="请输入配置选项"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input
+          v-model="queryParams.sort"
+          placeholder="请输入排序"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="详情备注" prop="detailRemark">
+        <el-input
+          v-model="queryParams.detailRemark"
+          placeholder="请输入详情备注"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['compute:resource-config:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['compute:resource-config:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+        <el-button
+            type="danger"
+            plain
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-hasPermi="['compute:resource-config:delete']"
+        >
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        @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">
+        <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">
+        <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"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['compute:resource-config:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['compute:resource-config:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ResourceConfigForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+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, 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() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ResourceConfig[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  configCategory: undefined,
+  configOption: undefined,
+  sort: undefined,
+  status: undefined,
+  detailRemark: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ResourceConfigApi.getResourceConfigPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ResourceConfigApi.deleteResourceConfig(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除算力资源配置 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await ResourceConfigApi.deleteResourceConfigList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: ResourceConfig[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ResourceConfigApi.exportResourceConfig(queryParams)
+    download.excel(data, '算力资源配置.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/compute/resourceorder/ResourceOrderForm.vue

+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="下单用户ID" prop="userId">
+        <el-input v-model="formData.userId" placeholder="请输入下单用户ID" />
+      </el-form-item>
+      <el-form-item label="算力资源SKU ID" prop="skuId">
+        <el-input v-model="formData.skuId" placeholder="请输入算力资源SKU ID" />
+      </el-form-item>
+      <el-form-item label="算力资源名称（下单时快照）" prop="spuName">
+        <el-input v-model="formData.spuName" placeholder="请输入算力资源名称（下单时快照）" />
+      </el-form-item>
+      <el-form-item label="订单编号" prop="orderNo">
+        <el-input v-model="formData.orderNo" placeholder="请输入订单编号" />
+      </el-form-item>
+      <el-form-item label="订单状态：0=待支付,1=已支付,2=已取消" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio value="1">请选择字典生成</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="市场价格(分)" prop="marketPrice">
+        <el-input v-model="formData.marketPrice" placeholder="请输入市场价格(分)" />
+      </el-form-item>
+      <el-form-item label="实付金额(分)" prop="paymentPrice">
+        <el-input v-model="formData.paymentPrice" placeholder="请输入实付金额(分)" />
+      </el-form-item>
+      <el-form-item label="支付订单编号" prop="payOrderId">
+        <el-input v-model="formData.payOrderId" placeholder="请输入支付订单编号" />
+      </el-form-item>
+      <el-form-item label="支付时间" prop="payTime">
+        <el-date-picker
+          v-model="formData.payTime"
+          type="date"
+          value-format="x"
+          placeholder="选择支付时间"
+        />
+      </el-form-item>
+      <el-form-item label="支付渠道" prop="payChannelCode">
+        <el-input v-model="formData.payChannelCode" placeholder="请输入支付渠道" />
+      </el-form-item>
+      <el-form-item label="租赁开始时间" prop="rentStartTime">
+        <el-date-picker
+          v-model="formData.rentStartTime"
+          type="date"
+          value-format="x"
+          placeholder="选择租赁开始时间"
+        />
+      </el-form-item>
+      <el-form-item label="租赁结束时间" prop="rentEndTime">
+        <el-date-picker
+          v-model="formData.rentEndTime"
+          type="date"
+          value-format="x"
+          placeholder="选择租赁结束时间"
+        />
+      </el-form-item>
+      <el-form-item label="取消时间" prop="cancelTime">
+        <el-date-picker
+          v-model="formData.cancelTime"
+          type="date"
+          value-format="x"
+          placeholder="选择取消时间"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" placeholder="请输入备注" />
+      </el-form-item>
+      <el-form-item label="算力资源状态：[0]未启用,[1]使用中,[2]已释放" prop="resourceStatus">
+        <el-radio-group v-model="formData.resourceStatus">
+          <el-radio value="1">请选择字典生成</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="退款状态" prop="refundStatus">
+        <el-radio-group v-model="formData.refundStatus">
+          <el-radio value="1">请选择字典生成</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="退款金额" prop="refundPrice">
+        <el-input v-model="formData.refundPrice" placeholder="请输入退款金额" />
+      </el-form-item>
+      <el-form-item label="开票状态：[0]未开 [1]开票中 [2]已开票" prop="invoiceStatus">
+        <el-radio-group v-model="formData.invoiceStatus">
+          <el-radio value="1">请选择字典生成</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="发票链接" prop="invoiceUrl">
+        <el-input v-model="formData.invoiceUrl" placeholder="请输入发票链接" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { ResourceOrderApi, ResourceOrder } from '@/api/compute/resourceorder'
+
+/** 算力资源订单 表单 */
+defineOptions({ name: 'ResourceOrderForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  userId: undefined,
+  skuId: undefined,
+  spuName: undefined,
+  orderNo: undefined,
+  status: undefined,
+  marketPrice: undefined,
+  paymentPrice: undefined,
+  payOrderId: undefined,
+  payTime: undefined,
+  payChannelCode: undefined,
+  rentStartTime: undefined,
+  rentEndTime: undefined,
+  cancelTime: undefined,
+  remark: undefined,
+  resourceStatus: undefined,
+  refundStatus: undefined,
+  refundPrice: undefined,
+  invoiceStatus: undefined,
+  invoiceUrl: undefined
+})
+const formRules = reactive({
+  userId: [{ required: true, message: '下单用户ID不能为空', trigger: 'blur' }],
+  skuId: [{ required: true, message: '算力资源SKU ID不能为空', trigger: 'blur' }],
+  spuName: [{ required: true, message: '算力资源名称（下单时快照）不能为空', trigger: 'blur' }],
+  orderNo: [{ required: true, message: '订单编号不能为空', trigger: 'blur' }],
+  paymentPrice: [{ required: true, message: '实付金额(分)不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ResourceOrderApi.getResourceOrder(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ResourceOrder
+    if (formType.value === 'create') {
+      await ResourceOrderApi.createResourceOrder(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ResourceOrderApi.updateResourceOrder(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    userId: undefined,
+    skuId: undefined,
+    spuName: undefined,
+    orderNo: undefined,
+    status: undefined,
+    marketPrice: undefined,
+    paymentPrice: undefined,
+    payOrderId: undefined,
+    payTime: undefined,
+    payChannelCode: undefined,
+    rentStartTime: undefined,
+    rentEndTime: undefined,
+    cancelTime: undefined,
+    remark: undefined,
+    resourceStatus: undefined,
+    refundStatus: undefined,
+    refundPrice: undefined,
+    invoiceStatus: undefined,
+    invoiceUrl: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file

src/views/compute/resourceorder/index.vue

+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="下单用户ID" prop="userId">
+        <el-input
+          v-model="queryParams.userId"
+          placeholder="请输入下单用户ID"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="算力资源SKU ID" prop="skuId">
+        <el-input
+          v-model="queryParams.skuId"
+          placeholder="请输入算力资源SKU ID"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="算力资源名称（下单时快照）" prop="spuName">
+        <el-input
+          v-model="queryParams.spuName"
+          placeholder="请输入算力资源名称（下单时快照）"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="订单编号" prop="orderNo">
+        <el-input
+          v-model="queryParams.orderNo"
+          placeholder="请输入订单编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="订单状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择订单状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMPUTE_RESOURCE_ORDER_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="市场价格" prop="marketPrice">
+        <el-input
+          v-model="queryParams.marketPrice"
+          placeholder="请输入市场价格"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="实付金额" prop="paymentPrice">
+        <el-input
+          v-model="queryParams.paymentPrice"
+          placeholder="请输入实付金额"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="支付订单编号" prop="payOrderId">
+        <el-input
+          v-model="queryParams.payOrderId"
+          placeholder="请输入支付订单编号"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="支付时间" prop="payTime">
+        <el-date-picker
+          v-model="queryParams.payTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item label="支付渠道" prop="payChannelCode">
+        <el-input
+          v-model="queryParams.payChannelCode"
+          placeholder="请输入支付渠道"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="租赁开始时间" prop="rentStartTime">
+        <el-date-picker
+          v-model="queryParams.rentStartTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item label="租赁结束时间" prop="rentEndTime">
+        <el-date-picker
+          v-model="queryParams.rentEndTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item label="取消时间" prop="cancelTime">
+        <el-date-picker
+          v-model="queryParams.cancelTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="queryParams.remark"
+          placeholder="请输入备注"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="算力资源状态" prop="resourceStatus">
+        <el-select
+          v-model="queryParams.resourceStatus"
+          placeholder="请选择算力资源状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMPUTE_RESOURCE_SPU_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="退款状态" prop="refundStatus">
+        <el-select
+          v-model="queryParams.refundStatus"
+          placeholder="请选择退款状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMPUTE_RESOURCE_REFUND_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="退款金额" prop="refundPrice">
+        <el-input
+          v-model="queryParams.refundPrice"
+          placeholder="请输入退款金额"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="开票状态" prop="invoiceStatus">
+        <el-select
+          v-model="queryParams.invoiceStatus"
+          placeholder="请选择开票状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.TRADE_INVOICE_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="发票链接" prop="invoiceUrl">
+        <el-input
+          v-model="queryParams.invoiceUrl"
+          placeholder="请输入发票链接"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['compute:resource-order:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['compute:resource-order:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+        <el-button
+            type="danger"
+            plain
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-hasPermi="['compute:resource-order:delete']"
+        >
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" width="55" />
+      <el-table-column label="订单ID" align="center" prop="id" />
+      <el-table-column label="下单用户ID" align="center" prop="userId" />
+      <el-table-column label="算力资源SKU ID" align="center" prop="skuId" />
+      <el-table-column label="算力资源名称" align="center" prop="spuName" />
+      <el-table-column label="订单编号" align="center" prop="orderNo" />
+      <el-table-column label="订单状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMPUTE_RESOURCE_ORDER_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="市场价格" align="center" prop="marketPrice">
+        <template #default="{ row }">
+          ¥{{ fenToYuan(row.marketPrice) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="实付金额" align="center" prop="paymentPrice">
+        <template #default="{ row }">
+          ¥{{ fenToYuan(row.paymentPrice) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="支付订单编号" align="center" prop="payOrderId" />
+      <el-table-column
+        label="支付时间"
+        align="center"
+        prop="payTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="支付渠道" align="center" prop="payChannelCode" />
+      <el-table-column
+        label="租赁开始时间"
+        align="center"
+        prop="rentStartTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column
+        label="租赁结束时间"
+        align="center"
+        prop="rentEndTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column
+        label="取消时间"
+        align="center"
+        prop="cancelTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="算力资源状态" align="center" prop="resourceStatus">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMPUTE_RESOURCE_SPU_STATUS" :value="scope.row.resourceStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column label="退款状态" align="center" prop="refundStatus">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMPUTE_RESOURCE_REFUND_STATUS" :value="scope.row.refundStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column label="退款金额" align="center" prop="refundPrice">
+        <template #default="{ row }">
+          ¥{{ fenToYuan(row.refundPrice) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="开票状态" align="center" prop="invoiceStatus">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.TRADE_INVOICE_STATUS" :value="scope.row.invoiceStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column label="发票链接" align="center" prop="invoiceUrl" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['compute:resource-order:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['compute:resource-order:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ResourceOrderForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { ResourceOrderApi, ResourceOrder } from '@/api/compute/resourceorder'
+import ResourceOrderForm from './ResourceOrderForm.vue'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { fenToYuan } from '@/utils'
+
+/** 算力资源订单 列表 */
+defineOptions({ name: 'ResourceOrder' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ResourceOrder[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: undefined,
+  skuId: undefined,
+  spuName: undefined,
+  orderNo: undefined,
+  status: undefined,
+  marketPrice: undefined,
+  paymentPrice: undefined,
+  payOrderId: undefined,
+  payTime: [],
+  payChannelCode: undefined,
+  rentStartTime: [],
+  rentEndTime: [],
+  cancelTime: [],
+  remark: undefined,
+  resourceStatus: undefined,
+  refundStatus: undefined,
+  refundPrice: undefined,
+  invoiceStatus: undefined,
+  invoiceUrl: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ResourceOrderApi.getResourceOrderPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ResourceOrderApi.deleteResourceOrder(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除算力资源订单 */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await ResourceOrderApi.deleteResourceOrderList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: ResourceOrder[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ResourceOrderApi.exportResourceOrder(queryParams)
+    download.excel(data, '算力资源订单.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
\ No newline at end of file

src/views/compute/resourcesku/ResourceSkuForm.vue

+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="关联的SPU" prop="spuId">
+        <el-input
+          v-model="selectedSpuName"
+          placeholder="请选择SPU"
+          clearable
+          readonly
+          @click="openSpuSelector"
+          class="!w-240px cursor-pointer"
+        >
+          <template #suffix>
+            <Icon icon="ep:search" class="cursor-pointer" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="租赁时长" prop="durationDays">
+        <el-select
+          v-model="formData.durationDays"
+          placeholder="请选择租赁时长"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in durationOptions"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="支付价格" prop="paymentPrice">
+        <el-input-number
+          v-model="paymentPriceYuan"
+          placeholder="请输入支付价格"
+          :min="0"
+          :precision="2"
+          :step="0.1"
+          class="!w-240px"
+          controls-position="right"
+        />
+      </el-form-item>
+      <el-form-item label="市场价格" prop="marketPrice">
+        <el-input-number
+          v-model="marketPriceYuan"
+          placeholder="请输入市场价格"
+          :min="0"
+          :precision="2"
+          :step="0.1"
+          class="!w-240px"
+          controls-position="right"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_LIST_STATUS)"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+
+  <!-- SPU选择弹窗 -->
+  <ResourceSpuSelectDialog
+    v-model="spuSelectorVisible"
+    :multiple="false"
+    title="选择算力资源SPU"
+    @confirm="handleSpuSelect"
+  />
+</template>
+<script setup lang="ts">
+import { ResourceSkuApi, ResourceSku } from '@/api/compute/resourcesku'
+import ResourceSpuSelectDialog from '../resourcespu/ResourceSpuSelectDialog.vue'
+import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from "@/utils/dict"
+import { fenToYuan, yuanToFen } from '@/utils'
+
+/** 算力资源SKU表（价格和租赁信息） 表单 */
+defineOptions({ name: 'ResourceSkuForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const spuSelectorVisible = ref(false) // SPU选择弹窗显示状态
+const selectedSpu = ref<any>(null) // 选中的SPU
+const formData = ref({
+  id: undefined,
+  spuId: undefined,
+  durationDays: undefined,
+  paymentPrice: undefined,
+  marketPrice: undefined,
+  status: undefined
+})
+const selectedSpuName = ref('') // 选中的SPU名称显示
+
+// 租赁时长选项
+const durationOptions = getStrDictOptions(DICT_TYPE.COMPUTE_RESOURCE_DURATION)
+
+// 价格的计算属性（元单位）
+const paymentPriceYuan = computed({
+  get: () => fenToYuan(formData.value.paymentPrice || 0),
+  set: (value) => {
+    formData.value.paymentPrice = yuanToFen(value || 0)
+  }
+})
+
+const marketPriceYuan = computed({
+  get: () => fenToYuan(formData.value.marketPrice || 0),
+  set: (value) => {
+    formData.value.marketPrice = yuanToFen(value || 0)
+  }
+})
+
+const formRules = reactive({
+  spuId: [{ required: true, message: '关联的SPU不能为空', trigger: 'change' }],
+  durationDays: [{ required: true, message: '租赁时长不能为空', trigger: 'change' }],
+  paymentPrice: [{ required: true, message: '支付价格不能为空', trigger: 'blur' }],
+  marketPrice: [{ required: true, message: '市场价格不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态（0-下架，1-上架）不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ResourceSkuApi.getResourceSku(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as ResourceSku
+    if (formType.value === 'create') {
+      await ResourceSkuApi.createResourceSku(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ResourceSkuApi.updateResourceSku(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 打开SPU选择器 */
+const openSpuSelector = () => {
+  spuSelectorVisible.value = true
+}
+
+/** 处理SPU选择确认 */
+const handleSpuSelect = (selections: any[]) => {
+  if (selections.length > 0) {
+    const spu = selections[0]
+    selectedSpu.value = spu
+    selectedSpuName.value = spu.name
+    formData.value.spuId = spu.id
+  }
+  spuSelectorVisible.value = false
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  selectedSpu.value = null
+  selectedSpuName.value = ''
+  formData.value = {
+    id: undefined,
+    spuId: undefined,
+    durationDays: undefined,
+    paymentPrice: undefined,
+    marketPrice: undefined,
+    status: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
\ No newline at end of file

src/views/compute/resourcesku/index.vue

+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="SPU名称" prop="spuId">
+        <el-input
+          v-model="selectedSpuName"
+          placeholder="请选择SPU"
+          clearable
+          readonly
+          @click="openSpuSelector"
+          class="!w-240px cursor-pointer"
+        >
+          <template #suffix>
+            <Icon icon="ep:search" class="cursor-pointer" />
+          </template>
+        </el-input>
+      </el-form-item>
+<!--      <el-form-item label="租赁天数（30/90/365等）" prop="durationDays">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.durationDays"-->
+<!--          placeholder="请输入租赁天数（30/90/365等）"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="支付价格" prop="paymentPrice">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.paymentPrice"-->
+<!--          placeholder="请输入支付价格（单位：分）"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="市场价格" prop="marketPrice">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.marketPrice"-->
+<!--          placeholder="请输入市场价格（单位：分）"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="请选择状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_LIST_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['compute:resource-sku:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['compute:resource-sku:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+        <el-button
+            type="danger"
+            plain
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-hasPermi="['compute:resource-sku:delete']"
+        >
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" width="55" />
+<!--      <el-table-column label="主键ID" align="center" prop="id" />-->
+<!--      <el-table-column label="关联的SPU ID" align="center" prop="spuId" />-->
+      <el-table-column label="关联的SPU" align="center" prop="spuName"/>
+      <el-table-column label="租赁天数" align="center" prop="durationDays" />
+      <el-table-column label="支付价格" align="center" prop="paymentPrice">
+        <template #default="{ row }">
+          ¥{{ fenToYuan(row.paymentPrice) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="市场价格" align="center" prop="marketPrice">
+        <template #default="{ row }">
+          ¥{{ fenToYuan(row.marketPrice) }}
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_LIST_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="120px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['compute:resource-sku:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.id)"
+            v-hasPermi="['compute:resource-sku:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <ResourceSkuForm ref="formRef" @success="getList" />
+
+  <!-- SPU选择弹窗 -->
+  <ResourceSpuSelectDialog
+    v-model="spuSelectorVisible"
+    :multiple="false"
+    title="选择算力资源SPU"
+    @confirm="handleSpuSelect"
+  />
+</template>
+
+<script setup lang="ts">
+import { isEmpty } from '@/utils/is'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { ResourceSkuApi, ResourceSku } from '@/api/compute/resourcesku'
+import ResourceSkuForm from './ResourceSkuForm.vue'
+import ResourceSpuSelectDialog from '../resourcespu/ResourceSpuSelectDialog.vue'
+import {DICT_TYPE, getIntDictOptions} from "@/utils/dict"
+import { fenToYuan } from '@/utils'
+
+/** 算力资源SKU表（价格和租赁信息） 列表 */
+defineOptions({ name: 'ResourceSku' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<ResourceSku[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  spuId: undefined,
+  spuName: undefined,
+  durationDays: undefined,
+  paymentPrice: undefined,
+  marketPrice: undefined,
+  status: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+const spuSelectorVisible = ref(false) // SPU选择弹窗显示状态
+const selectedSpu = ref<any>(null) // 选中的SPU
+const selectedSpuName = ref('') // 选中的SPU名称
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ResourceSkuApi.getResourceSkuPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ResourceSkuApi.deleteResourceSku(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除算力资源SKU表（价格和租赁信息） */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await ResourceSkuApi.deleteResourceSkuList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: ResourceSku[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ResourceSkuApi.exportResourceSku(queryParams)
+    download.excel(data, '算力资源SKU表（价格和租赁信息）.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 打开SPU选择器 */
+const openSpuSelector = () => {
+  // 清除之前的选择状态
+  selectedSpu.value = null
+  selectedSpuName.value = ''
+  spuSelectorVisible.value = true
+}
+
+/** 处理SPU选择确认 */
+const handleSpuSelect = (selections: any[]) => {
+  if (selections.length > 0) {
+    const spu = selections[0]
+    selectedSpu.value = spu
+    selectedSpuName.value = spu.name
+    queryParams.spuId = spu.id
+    queryParams.spuName = spu.name
+  }
+  spuSelectorVisible.value = false
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>

src/views/compute/resourcespu/ResourceSpuForm.vue

+vue
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" :width="800">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      v-loading="formLoading"
+      size="default"
+    >
+      <!-- 第一行：基础信息 -->
+      <el-row :gutter="20" class="mb-4">
+        <el-col :span="12">
+          <el-form-item label="算力资源名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入算力资源名称" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="算力资源分类" prop="categoryId">
+            <el-select
+              v-model="formData.categoryId"
+              placeholder="请选择算力资源分类"
+              clearable
+              class="w-full"
+            >
+              <el-option
+                v-for="category in categoryList"
+                :key="category.id"
+                :label="category.name"
+                :value="category.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10" class="mb-2"> <!-- 仅减小列间距和行底间距，不缩输入框 -->
+        <el-col :span="6">
+          <el-form-item
+            label="CPU"
+            prop="cpu"
+            label-width="60px"
+            class="compact-item"
+          >
+          <el-select
+            v-model="formData.cpu"
+            placeholder="请选择CPU配置"
+            clearable
+            class="w-full"
+          >
+            <el-option
+              v-for="option in cpuOptions"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item
+            label="GPU"
+            prop="gpu"
+            label-width="60px"
+            class="compact-item"
+          >
+          <el-select
+            v-model="formData.gpu"
+            placeholder="请选择GPU配置"
+            clearable
+            class="w-full"
+          >
+            <el-option
+              v-for="option in gpuOptions"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item
+            label="内存"
+            prop="ram"
+            label-width="60px"
+            class="compact-item"
+          >
+          <el-select
+            v-model="formData.ram"
+            placeholder="请选择内存配置"
+            clearable
+            class="w-full"
+          >
+            <el-option
+              v-for="option in ramOptions"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item
+            label="存储"
+            prop="storage"
+            label-width="60px"
+            class="compact-item"
+          >
+          <el-select
+            v-model="formData.storage"
+            placeholder="请选择存储配置"
+            clearable
+            class="w-full"
+          >
+            <el-option
+              v-for="option in storageOptions"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第三行：服务器IP -->
+      <el-row :gutter="20" class="mb-4">
+        <el-col :span="12">
+          <el-form-item label="服务器ip" prop="ip">
+            <el-input v-model="formData.ip" placeholder="请输入服务器ip" class="w-full" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <!-- 可以在这里添加其他字段 -->
+        </el-col>
+      </el-row>
+
+      <!-- 第四行：登录信息 -->
+      <el-row :gutter="20" class="mb-4">
+        <el-col :span="12">
+          <el-form-item label="初始用户名" prop="initUsername">
+            <el-input v-model="formData.initUsername" placeholder="请输入初始用户名" class="w-full" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="初始密码" prop="initPassword">
+            <el-input v-model="formData.initPassword" placeholder="请输入初始密码" class="w-full" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第五行：商品简介（textarea 完整闭合） -->
+      <el-row class="mb-4">
+        <el-col :span="24">
+          <el-form-item label="商品简介" prop="intro">
+            <el-input
+              v-model="formData.intro"
+              placeholder="请输入商品简介"
+              class="w-full"
+              type="textarea"
+              rows="2"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第六行：商品图片 -->
+      <el-row :gutter="20" class="mb-4">
+        <el-col :span="12">
+          <el-form-item label="商品封面图" prop="picUrl">
+            <UploadImg v-model="formData.picUrl" height="80px" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="商品轮播图地址" prop="sliderPicUrls">
+            <el-input
+              v-model="formData.sliderPicUrls"
+              placeholder="以逗号分隔，最多15张"
+              class="w-full"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第七行：库存销量 -->
+      <el-row :gutter="20" class="mb-4">
+        <el-col :span="12">
+          <el-form-item label="总库存数量" prop="stock">
+            <el-input v-model="formData.stock" placeholder="请输入库存数量" class="w-full" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="商品销量" prop="sales">
+            <el-input v-model="formData.sales" placeholder="请输入商品销量" class="w-full" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <!-- 第八行：状态 -->
+      <el-row class="mb-4">
+        <el-col :span="24">
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="formData.status" class="flex gap-6">
+              <el-radio
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMPUTE_RESOURCE_SPU_STATUS)"
+                :key="dict.value"
+                :value="dict.value"
+              >
+                {{ dict.label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form> <!-- 现在这个 </el-form> 会正常解析，不会爆红 -->
+
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false" style="margin-left: 8px;">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import {ResourceSpu, ResourceSpuApi} from '@/api/compute/resourcespu'
+import {ResourceConfigApi} from '@/api/compute/resourceconfig'
+import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+import {UploadImg} from "@/components/UploadFile";
+
+/** 算力资源SPU表（基础配置信息） 表单 */
+defineOptions({name: 'ResourceSpuForm'})
+
+const {t} = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  cpu: undefined,
+  gpu: undefined,
+  ram: undefined,
+  storage: undefined,
+  ip: undefined,
+  initUsername: undefined,
+  initPassword: undefined,
+  intro: undefined,
+  categoryId: undefined,
+  picUrl: undefined,
+  sliderPicUrls: undefined,
+  stock: undefined,
+  sales: undefined,
+  status: undefined
+})
+const formRules = reactive({
+  name: [{required: true, message: '算力资源名称不能为空', trigger: 'blur'}],
+  cpu: [{required: true, message: 'CPU配置不能为空', trigger: 'blur'}],
+  gpu: [{required: true, message: 'GPU配置不能为空', trigger: 'blur'}],
+  ram: [{required: true, message: '内存配置不能为空', trigger: 'blur'}],
+  storage: [{required: true, message: '存储配置不能为空', trigger: 'blur'}],
+  ip: [{required: true, message: '服务器ip不能为空', trigger: 'blur'}],
+  initUsername: [{required: true, message: '初始用户名不能为空', trigger: 'blur'}],
+  initPassword: [{required: true, message: '初始密码不能为空', trigger: 'blur'}],
+  categoryId: [{required: true, message: '算力资源分类编号不能为空', trigger: 'blur'}],
+  picUrl: [{required: true, message: '商品封面图不能为空', trigger: 'blur'}],
+  stock: [{required: true, message: '总库存数量不能为空', trigger: 'blur'}],
+  sales: [{required: true, message: '商品销量不能为空', trigger: 'blur'}],
+  status: [{required: true, message: '状态（0 下架，1 上架，2 回收）不能为空', trigger: 'blur'}]
+})
+const formRef = ref() // 表单 Ref
+const categoryList = ref<CategoryItem[]>([]);
+
+// 配置选项列表
+const cpuOptions = ref<any[]>([])
+const gpuOptions = ref<any[]>([])
+const ramOptions = ref<any[]>([])
+const storageOptions = ref<any[]>([])
+interface CategoryItem {
+  id: number;
+  name: string;
+}
+
+/** 加载配置选项 */
+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 open = async (type: string, id?: number) => {
+  const categoryResponse = await ResourceSpuApi.listSimpleCategory();
+  categoryList.value = categoryResponse;
+
+  // 加载配置选项
+  await loadConfigOptions()
+
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await ResourceSpuApi.getResourceSpu(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({open}) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+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 (formType.value === 'create') {
+      await ResourceSpuApi.createResourceSpu(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await ResourceSpuApi.updateResourceSpu(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    cpu: undefined,
+    gpu: undefined,
+    ram: undefined,
+    storage: undefined,
+    ip: undefined,
+    initUsername: undefined,
+    initPassword: undefined,
+    intro: undefined,
+    categoryId: undefined,
+    picUrl: undefined,
+    sliderPicUrls: undefined,
+    stock: undefined,
+    sales: undefined,
+    status: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>
+
+<style scoped>
+/* 硬件配置紧凑布局样式 */
+.compact-hardware {
+  margin-bottom: 16px !important;
+}
+
+.compact-hardware .el-form-item__label {
+  width: 80px !important;
+  padding-right: 4px !important;
+  box-sizing: border-box !important;
+  text-align: right !important;
+}
+
+.compact-hardware .el-form-item__content {
+  margin-left: 80px !important;
+}
+
+/* 移除列之间的间距 */
+.el-row[gutter="0"] .el-col {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+</style>

src/views/compute/resourcespu/ResourceSpuSelectDialog.vue

+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" :width="1000">
+    <!-- 搜索区域 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="资源名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入算力资源名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item label="CPU" prop="cpu">
+        <el-select
+          v-model="queryParams.cpu"
+          placeholder="请选择CPU配置"
+          clearable
+          class="!w-160px"
+        >
+          <el-option
+            v-for="option in resourceConfigStore.getOptionsByType('cpu')"
+            :key="option.id"
+            :label="option.configOption"
+            :value="option.configOption"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="GPU" prop="gpu">
+        <el-select
+          v-model="queryParams.gpu"
+          placeholder="请选择GPU配置"
+          clearable
+          class="!w-160px"
+        >
+          <el-option
+            v-for="option in resourceConfigStore.getOptionsByType('gpu')"
+            :key="option.id"
+            :label="option.configOption"
+            :value="option.configOption"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="资源分类" prop="categoryId">
+        <el-select
+          v-model="queryParams.categoryId"
+          placeholder="请选择资源分类"
+          clearable
+          class="!w-160px"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.id"
+            :label="category.name"
+            :value="category.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- SPU列表 -->
+    <el-table
+      ref="tableRef"
+      v-loading="loading"
+      :data="list"
+      :stripe="true"
+      :show-overflow-tooltip="true"
+      @row-click="handleRowClick"
+      height="400"
+      highlight-current-row
+    >
+      <el-table-column width="55">
+        <template #default="{ row }">
+          <el-radio
+            v-model="selectedRowId"
+            :label="row.id"
+            @change="handleRadioChange(row)"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="算力资源" min-width="200">
+        <template #default="{ row }">
+          <div class="flex items-center">
+            <el-image
+              fit="cover"
+              :src="row.picUrl"
+              class="flex-none w-40px h-40px rounded"
+              :preview-src-list="[row.picUrl]"
+            />
+            <div class="ml-3">
+              <div class="font-medium">{{ row.name }}</div>
+              <div class="text-gray-500 text-sm">{{ row.categoryName }}</div>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="硬件配置" min-width="300">
+        <template #default="{ row }">
+          <div class="space-y-1">
+            <div class="text-sm">CPU: {{ row.cpu || '-' }}</div>
+            <div class="text-sm">GPU: {{ row.gpu || '-' }}</div>
+            <div class="text-sm">内存: {{ row.ram || '-' }}</div>
+            <div class="text-sm">存储: {{ row.storage || '-' }}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="服务器所在地" width="120" prop="location" />
+      <el-table-column label="库存" width="80" prop="stock" />
+      <el-table-column label="销量" width="80" prop="sales" />
+      <el-table-column label="状态" width="80" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMPUTE_RESOURCE_SPU_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      </el-table>
+
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+      class="mt-4"
+    />
+
+    <!-- 底部按钮 -->
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" :disabled="!selectedRows.length" @click="handleConfirm">
+        确定选择 ({{ selectedRows.length }})
+      </el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, watch } from 'vue'
+import { DICT_TYPE } from "@/utils/dict"
+import { ResourceSpuApi, ResourceSpu } from '@/api/compute/resourcespu'
+import { useResourceConfigStore } from '@/store/modules/compute/hardwareConfig'
+
+interface Props {
+  modelValue: boolean
+  title?: string
+  multiple?: boolean
+  // 默认只显示上架的SPU
+  defaultStatus?: number
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'confirm', selections: ResourceSpu[]): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '选择算力资源SPU',
+  multiple: false,
+  defaultStatus: 1 // 默认只显示上架的
+})
+
+const emit = defineEmits<Emits>()
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const dialogTitle = computed(() => props.title)
+
+const resourceConfigStore = useResourceConfigStore()
+const loading = ref(false)
+const list = ref<ResourceSpu[]>([])
+const total = ref(0)
+const selectedRows = ref<ResourceSpu[]>([])
+const selectedRowId = ref<number | null>(null)
+const tableRef = ref()
+const categoryList = ref<any[]>([])
+
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  cpu: undefined,
+  gpu: undefined,
+  ram: undefined,
+  storage: undefined,
+  categoryId: undefined,
+  status: props.defaultStatus
+})
+
+const queryFormRef = ref()
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ResourceSpuApi.getResourceSpuPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  queryParams.status = props.defaultStatus
+  handleQuery()
+}
+
+/** 处理单选框变化 */
+const handleRadioChange = (row: ResourceSpu) => {
+  selectedRows.value = [row]
+  selectedRowId.value = row.id
+}
+
+/** 处理行点击 */
+const handleRowClick = (row: ResourceSpu) => {
+  selectedRowId.value = row.id
+  selectedRows.value = [row]
+}
+
+/** 确认选择 */
+const handleConfirm = () => {
+  emit('confirm', selectedRows.value)
+  dialogVisible.value = false
+}
+
+/** 打开弹窗时加载数据 */
+const handleOpen = async () => {
+  // 清除之前的选择状态
+  selectedRows.value = []
+  selectedRowId.value = null
+
+  // 加载分类列表
+  const categoryResponse = await ResourceSpuApi.listSimpleCategory()
+  categoryList.value = categoryResponse
+
+  // 预加载硬件配置
+  resourceConfigStore.loadConfigOptions().catch(error => {
+    console.error('预加载资源配置失败:', error)
+  })
+
+  // 加载列表数据
+  getList()
+}
+
+// 监听弹窗打开
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) {
+      handleOpen()
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped>
+.text-orange-500 {
+  color: #f97316;
+}
+</style>
\ No newline at end of file

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

+<template>
+  <ContentWrap v-loading="formLoading">
+    <el-form ref="formRef" :model="formData" :rules="!isDetailMode ? formRules : {}" label-width="120px">
+      <!-- 1. 算力资源名称 -->
+      <el-form-item label="算力资源名称" prop="name">
+        <el-input
+          v-model="formData.name"
+          placeholder="请输入算力资源名称"
+          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" :disabled="isDetailMode" />
+      </el-form-item>
+
+      <!-- 3. 算力资源分类 -->
+      <el-form-item label="算力资源分类" prop="categoryId">
+        <el-select v-model="formData.categoryId" placeholder="请选择算力资源分类" clearable style="width: 200px;" :disabled="isDetailMode">
+          <el-option
+            v-for="category in categoryList"
+            :key="category.id"
+            :label="category.name"
+            :value="category.id"
+          />
+        </el-select>
+      </el-form-item>
+
+      <!-- 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;" :disabled="isDetailMode">
+            <el-option
+              v-for="option in cpuOptions"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </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;" :disabled="isDetailMode">
+            <el-option
+              v-for="option in gpuOptions"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+
+      <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;" :disabled="isDetailMode">
+            <el-option
+              v-for="option in ramOptions"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </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;" :disabled="isDetailMode">
+            <el-option
+              v-for="option in storageOptions"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+
+      <!-- 5. 服务器信息 -->
+      <div style="display: flex; margin-bottom: 24px;">
+        <el-form-item label="服务器所在地" prop="location" style="margin-right: 20px; margin-bottom: 0;">
+          <el-select v-model="formData.location" placeholder="请选择服务器所在地" clearable style="width: 180px;" :disabled="isDetailMode">
+            <el-option
+              v-for="option in resourceConfigStore.getOptionsByType('location')"
+              :key="option.id"
+              :label="option.configOption"
+              :value="option.configOption"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="服务器IP" prop="ip" style="margin-bottom: 0;">
+          <el-input v-model="formData.ip" placeholder="请输入服务器IP" style="width: 180px;" :disabled="isDetailMode" />
+        </el-form-item>
+      </div>
+
+      <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" :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" :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;" :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;" :disabled="isDetailMode" />
+        </el-form-item>
+      </div>
+
+  
+      <!-- 7. 商品简介 -->
+      <el-form-item label="商品简介" prop="intro">
+        <el-input
+          v-model="formData.intro"
+          placeholder="请输入商品简介"
+          type="textarea"
+          rows="3"
+          style="width: 400px;"
+          :disabled="isDetailMode"
+        />
+      </el-form-item>
+
+      <!-- 8. 轮播图地址 - 已隐藏 -->
+      <!-- <el-form-item label="轮播图地址" prop="sliderPicUrls">
+        <el-input
+          v-model="formData.sliderPicUrls"
+          placeholder="以逗号分隔，最多15张"
+          type="textarea"
+          rows="2"
+          style="width: 400px;"
+        />
+      </el-form-item> -->
+
+      <!-- 9. 状态 -->
+      <el-form-item label="状态" prop="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"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <!-- 操作按钮 -->
+      <el-form-item style="text-align: center; margin-top: 30px;">
+        <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">
+          {{ isDetailMode ? '返回' : '取消' }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { UploadImg } from '@/components/UploadFile'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import { useResourceConfigStore } from '@/store/modules/compute/hardwareConfig'
+import { ResourceSpu, ResourceSpuApi } from '@/api/compute/resourcespu'
+
+defineOptions({ name: 'ResourceSpuAdd' })
+
+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 resourceConfigStore = useResourceConfigStore() // 资源配置store
+
+const formLoading = ref(false) // 表单的加载中
+const formRef = ref() // 表单 Ref
+const categoryList = ref<any[]>([])
+
+// 从store获取硬件配置选项
+const cpuOptions = computed(() => resourceConfigStore.getOptionsByType('cpu'))
+const gpuOptions = computed(() => resourceConfigStore.getOptionsByType('gpu'))
+const ramOptions = computed(() => resourceConfigStore.getOptionsByType('ram'))
+const storageOptions = computed(() => resourceConfigStore.getOptionsByType('storage'))
+
+const formData = ref<ResourceSpu>({
+  id: undefined,
+  name: undefined,
+  cpu: undefined,
+  gpu: undefined,
+  ram: undefined,
+  storage: undefined,
+  ip: undefined,
+  initUsername: undefined,
+  initPassword: undefined,
+  intro: undefined,
+  categoryId: undefined,
+  picUrl: undefined,
+  sliderPicUrls: undefined,
+  stock: undefined,
+  sales: undefined,
+  location: undefined,
+  status: undefined
+})
+
+const formRules = reactive({
+  name: [{ required: true, message: '算力资源名称不能为空', trigger: 'blur' }],
+  cpu: [{ required: true, message: 'CPU配置不能为空', trigger: 'blur' }],
+  gpu: [{ required: true, message: 'GPU配置不能为空', trigger: 'blur' }],
+  ram: [{ required: true, message: '内存配置不能为空', trigger: 'blur' }],
+  storage: [{ required: true, message: '存储配置不能为空', trigger: 'blur' }],
+  ip: [{ required: true, message: '服务器ip不能为空', trigger: 'blur' }],
+  initUsername: [{ required: true, message: '初始用户名不能为空', trigger: 'blur' }],
+  initPassword: [{ required: true, message: '初始密码不能为空', trigger: 'blur' }],
+  categoryId: [{ required: true, message: '算力资源分类编号不能为空', trigger: 'blur' }],
+  picUrl: [{ required: true, message: '商品封面图不能为空', trigger: 'blur' }],
+  stock: [{ required: true, message: '总库存数量不能为空', trigger: 'blur' }],
+  sales: [{ required: true, message: '商品销量不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+})
+
+
+/** 提交表单 */
+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 (isEditMode.value) {
+      // 编辑
+      await ResourceSpuApi.updateResourceSpu(data)
+      message.success(t('common.updateSuccess'))
+    } else {
+      // 新增
+      await ResourceSpuApi.createResourceSpu(data)
+      message.success(t('common.createSuccess'))
+    }
+    close()
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 返回列表 */
+const close = () => {
+  delView(unref(currentRoute))
+  push('/compute/resource-spu')
+}
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    // 并行加载分类列表和硬件配置选项
+    const [categoryResponse] = await Promise.all([
+      ResourceSpuApi.listSimpleCategory(),
+      resourceConfigStore.loadConfigOptions()
+    ])
+    categoryList.value = categoryResponse
+
+    // 编辑模式或详情模式需要获取数据
+    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

+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="资源名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入算力资源名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="CPU" prop="cpu">
+        <el-select
+          v-model="queryParams.cpu"
+          placeholder="请选择CPU配置"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="option in resourceConfigStore.getOptionsByType('cpu')"
+            :key="option.id"
+            :label="option.configOption"
+            :value="option.configOption"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="GPU" prop="gpu">
+        <el-select
+          v-model="queryParams.gpu"
+          placeholder="请选择GPU配置"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="option in resourceConfigStore.getOptionsByType('gpu')"
+            :key="option.id"
+            :label="option.configOption"
+            :value="option.configOption"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="内存" prop="ram">
+        <el-select
+          v-model="queryParams.ram"
+          placeholder="请选择内存配置"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="option in resourceConfigStore.getOptionsByType('ram')"
+            :key="option.id"
+            :label="option.configOption"
+            :value="option.configOption"
+          />
+        </el-select>
+      </el-form-item>
+        <el-form-item label="存储" prop="storage">
+          <el-select
+            v-model="queryParams.storage"
+            placeholder="请选择存储配置"
+            clearable
+            class="!w-240px"
+          >
+            <el-option
+              v-for="option in resourceConfigStore.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"-->
+<!--          placeholder="请输入初始用户名"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="初始密码" prop="initPassword">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.initPassword"-->
+<!--          placeholder="请输入初始密码"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="商品简介" prop="intro">
+        <el-input
+          v-model="queryParams.intro"
+          placeholder="请输入商品简介"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="资源分类" prop="categoryId">
+        <el-select
+          v-model="queryParams.categoryId"
+          placeholder="请选择资源分类"
+          clearable
+          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="location">
+        <el-select
+          v-model="queryParams.location"
+          placeholder="请选择服务器所在地"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="option in resourceConfigStore.getOptionsByType('location')"
+            :key="option.id"
+            :label="option.configOption"
+            :value="option.configOption"
+          />
+        </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"-->
+<!--          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"
+          placeholder="请选择状态"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in statusOptions"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-220px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm(undefined)"
+          v-hasPermi="['compute:resource-spu:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['compute:resource-spu:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+        <el-button
+            type="danger"
+            plain
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-hasPermi="['compute:resource-spu:delete']"
+        >
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table
+        row-key="id"
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        @selection-change="handleRowCheckboxChange"
+    >
+    <el-table-column type="selection" width="55" />
+<!--      <el-table-column label="主键ID" align="center" prop="id" />-->
+      <el-table-column label="算力资源名称" min-width="200">
+        <template #default="{ row }">
+          <div class="flex">
+            <el-image
+              fit="cover"
+              :src="row.picUrl"
+              class="flex-none w-50px h-50px"
+              @click="imagePreview(row.picUrl)"
+            />
+            <div class="ml-4 overflow-hidden">
+              <el-tooltip effect="dark" :content="row.name" placement="top">
+                <div>{{ row.name }}</div>
+              </el-tooltip>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <!-- 硬件配置字段已隐藏 -->
+<!--      <el-table-column label="算力资源分类编号" align="center" prop="categoryId" />-->
+      <el-table-column label="算力资源分类" align="center" prop="categoryName" min-width="150" />
+      <el-table-column label="服务器所在地" align="center" prop="location" min-width="120" />
+      <el-table-column label="商品简介" align="center" prop="intro" min-width="200" />
+
+      <!-- 轮播图地址已隐藏 -->
+      <el-table-column label="总库存数量" align="center" prop="stock" />
+      <el-table-column label="商品销量" align="center" prop="sales" />
+      <el-table-column label="状态" align="center" width="80" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMPUTE_RESOURCE_SPU_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center" min-width="180px">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm(scope.row.id)"
+            v-hasPermi="['compute:resource-spu:update']"
+          >
+            编辑
+          </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']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, 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 { useResourceConfigStore } from '@/store/modules/compute/hardwareConfig'
+
+const { push } = useRouter()
+const resourceConfigStore = useResourceConfigStore()
+
+/** 算力资源SPU表（基础配置信息） 列表 */
+defineOptions({ name: 'ResourceSpu' })
+
+const message = useMessage() // 消息弹窗
+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,
+  name: undefined,
+  cpu: undefined,
+  gpu: undefined,
+  ram: undefined,
+  storage: undefined,
+  ip: undefined,
+  initUsername: undefined,
+  initPassword: undefined,
+  intro: undefined,
+  categoryId: undefined,
+  location: undefined,
+  picUrl: undefined,
+  sliderPicUrls: undefined,
+  stock: undefined,
+  sales: undefined,
+  status: undefined,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+
+const statusOptions = getIntDictOptions(DICT_TYPE.COMPUTE_RESOURCE_SPU_STATUS)
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ResourceSpuApi.getResourceSpuPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 新增或修改 */
+const openForm = (id?: number) => {
+  if (typeof id === 'number') {
+    // 修改
+    push({ name: 'ResourceSpuForm', params: { mode: 'edit', id } })
+  } else {
+    // 新增
+    push({ name: 'ResourceSpuForm', params: { mode: 'add' } })
+  }
+}
+
+/** 查看详情 */
+const openDetail = (id: number) => {
+  push({ name: 'ResourceSpuForm', params: { mode: 'detail', id } })
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ResourceSpuApi.deleteResourceSpu(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 批量删除算力资源SPU表（基础配置信息） */
+const handleDeleteBatch = async () => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    await ResourceSpuApi.deleteResourceSpuList(checkedIds.value);
+    message.success(t('common.delSuccess'))
+    await getList();
+  } catch {}
+}
+
+const checkedIds = ref<number[]>([])
+const handleRowCheckboxChange = (records: ResourceSpu[]) => {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 商品图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await ResourceSpuApi.exportResourceSpu(queryParams)
+    download.excel(data, '算力资源SPU表（基础配置信息）.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  try {
+    // 并行加载数据
+    const [categoryResponse] = await Promise.all([
+      ResourceSpuApi.listSimpleCategory(),
+      resourceConfigStore.loadConfigOptions()
+    ])
+    categoryList.value = categoryResponse
+
+    // 加载列表数据
+    getList()
+  } catch (error) {
+    console.error('初始化失败:', error)
+  }
+})
+
+// 监听路由变化，当从新增/编辑页面返回时刷新列表
+onActivated(() => {
+  getList()
+})
+</script>