管理端-Api订单管理已完成（搜索未完成）

管理端-用户Api管理已完成
客户端-api订单已完成
客户端-api资源已完成

src/api/apihub/apiendpoint/index.ts

@@ -13,6 +13,13 @@ export interface ApiEndpoint {
           rateLimit: string; // 接口级限流规则，例如 100 QPS
           remark: string; // 备注
   }
+export interface IndustryApplication {
+  id: number; // 行业应用ID
+  title?: string; // 行业应用名称
+  image?: string; // 缩略图
+}
+
+
 
 // API 接口 API
 export const ApiEndpointApi = {
@@ -55,5 +62,10 @@ export const ApiEndpointApi = {
   /** 查询所有接口 */
   getEndpointList: async (): Promise<ApiEndpoint[]> => {
     return await request.get({ url: `/apihub/api-endpoint/list` })
+  },
+
+  // 查询行业应用
+  getAllIndustryApplication: async (): Promise<IndustryApplication[]> => {
+    return await request.get({ url: `/biz/industry-application/list` })
   }
 }

src/views/apihub/api/ApiForm.vue

@@ -238,7 +238,7 @@ const formData = ref({
 
 
 // 自定义校验器
-const validatePrice: FormItemRule['validator'] = (rule, value, callback) => {
+const validatePrice: FormItemRule['validator'] = (_rule, value, callback) => {
   if (value === undefined || value === null) {
     return callback(new Error('请填写套餐价格'))
   }
@@ -248,7 +248,7 @@ const validatePrice: FormItemRule['validator'] = (rule, value, callback) => {
   callback()
 }
 
-const validateTimes: FormItemRule['validator'] = (rule, value, callback) => {
+const validateTimes: FormItemRule['validator'] = (_rule,  value, callback) => {
   if (value === undefined || value === null) {
     return callback(new Error('请填写套餐次数'))
   }
@@ -322,7 +322,11 @@ const open = async (type: string, id?: number) => {
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await ApiApi.getApi(id)
+      // 调用 getApi 后做一次数据清洗
+      const res = await ApiApi.getApi(id)
+      res.detail = res.detail ?? ""
+      res.doc = res.doc ?? ""
+      formData.value = res
     } finally {
       formLoading.value = false
     }
@@ -425,6 +429,7 @@ const onApiSelected = (id: number, row: any) => {
     row.method = api.method
   }
 }
+// -----------------------------------------------添加接口End---------------------------------------------------------------------------------------
 
 </script>
 

src/views/apihub/apiendpoint/ApiEndpointForm.vue

@@ -16,7 +16,50 @@
       <el-form-item label="请求方式" prop="method">
         <el-input v-model="formData.method" placeholder="请输入请求方式" />
       </el-form-item>
-<!--      <el-form-item label="参数定义(JSON)" prop="params">-->
+
+      <el-form-item label="关联行业应用">
+        <!-- 添加接口按钮独占一行 -->
+        <div style="margin-bottom: 10px;">
+          <el-button type="primary" size="small" @click="addIndustryApplication">
+            添加行业应用
+          </el-button>
+        </div>
+
+        <!-- 接口表格，每个接口占一行 -->
+        <table class="table">
+          <thead>
+          <tr>
+            <th style="width: 80px">行业应用</th>
+            <th style="width: 40px">操作</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr v-for="(i, index) in formData.industryApplications" :key="index">
+            <td>
+              <el-select
+                v-model="i.id"
+                placeholder="请选择行业应用"
+                @change="(val) => onIndustryApplicationSelected(val, i)"
+              >
+                <el-option
+                  v-for="item in industryApplicationList"
+                  :key="item.id"
+                  :label="item.title"
+                  :value="item.id"
+                />
+              </el-select>
+            </td>
+            <td>
+              <el-button type="danger" size="small" @click="removeApiEndpoint(index)">
+                删除
+              </el-button>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </el-form-item>
+
+      <!--      <el-form-item label="参数定义(JSON)" prop="params">-->
 <!--        <el-input v-model="formData.params" placeholder="请输入参数定义(JSON)" />-->
 <!--      </el-form-item>-->
 <!--      <el-form-item label="返回结果示例" prop="response">-->
@@ -41,7 +84,7 @@
   </Dialog>
 </template>
 <script setup lang="ts">
-import { ApiEndpointApi, ApiEndpoint } from '@/api/apihub/apiendpoint'
+import { ApiEndpointApi, ApiEndpoint, IndustryApplication} from '@/api/apihub/apiendpoint'
 
 /** API 接口 表单 */
 defineOptions({ name: 'ApiEndpointForm' })
@@ -57,7 +100,10 @@ const formData = ref({
   id: undefined,
   name: undefined,
   path: undefined,
-  method: undefined
+  method: undefined,
+  industryApplications: [
+  { title: 'AI诗词', image: 'https://', id: null }
+]
   // params: undefined,
   // response: undefined,
   // authType: undefined,
@@ -77,11 +123,19 @@ const open = async (type: string, id?: number) => {
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
+
+  await getAllIndustryApplicationList()
+
   // 修改时，设置数据
   if (id) {
     formLoading.value = true
     try {
-      formData.value = await ApiEndpointApi.getApiEndpoint(id)
+      const res = await ApiEndpointApi.getApiEndpoint(id)
+      // 确保 industryApplications 至少有一行
+      if (!res.industryApplications || res.industryApplications.length === 0) {
+        res.industryApplications = [{ title: '', image: '', id: null }]
+      }
+      formData.value = res
     } finally {
       formLoading.value = false
     }
@@ -119,7 +173,10 @@ const resetForm = () => {
     id: undefined,
     name: undefined,
     path: undefined,
-    method: undefined
+    method: undefined,
+    industryApplications: [
+      { title: 'AI诗词', image: 'https://', id: null }
+    ]
     // params: undefined,
     // response: undefined,
     // authType: undefined,
@@ -128,4 +185,93 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+
+
+// -----------------------------------------------添加关联行业应用start----------------------------------------------------------------------------------------
+
+
+const industryApplicationList = ref<IndustryApplication[]>([])
+
+const getAllIndustryApplicationList = async () => {
+  try {
+    industryApplicationList.value = await ApiEndpointApi.getAllIndustryApplication()
+  } catch (e) {
+    console.error('加载行业应用失败', e)
+  }
+}
+
+// 添加一行
+const addIndustryApplication = () => {
+  formData.value.industryApplications.push({
+    id: null,
+    title: "",
+    image: "",
+  })
+}
+
+// 删除一行
+const removeApiEndpoint = (index: number) => {
+  formData.value.industryApplications.splice(index, 1)
+}
+
+// 选择接口时自动填充 name、path、method
+const onIndustryApplicationSelected = (id: number, row: any) => {
+  const industryApplication = industryApplicationList.value.find(item => item.id === id)
+  if (industryApplication) {
+    row.title = industryApplication.title
+    row.image = industryApplication.image
+  }
+}
+// -----------------------------------------------添加关联行业应用End---------------------------------------------------------------------------------------
+
 </script>
+
+
+<style scoped>
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed; /* 固定布局，按列宽分配 */
+}
+
+.table th,
+.table td {
+  text-align: center;
+  word-break: break-word; /* 自动换行，防止文字撑开 */
+}
+
+/* 资源包名称列 */
+.table th:first-child,
+.table td:first-child {
+  min-width: 200px; /* 至少 200px */
+  text-align: left;
+}
+
+/* 价格、数量、有效期列 */
+.table th:nth-child(2),
+.table td:nth-child(2),
+.table th:nth-child(3),
+.table td:nth-child(3),
+.table th:nth-child(4),
+.table td:nth-child(4) {
+  width: 100px;
+}
+
+/* 操作列 */
+.table th:last-child,
+.table td:last-child {
+  width: 160px; /* 缩小操作列 */
+}
+
+/* 表格行高度、上下间距 */
+.table tbody tr {
+  height: auto; /* 自适应高度 */
+}
+
+.table tbody td {
+  padding: 10px 5px;
+  vertical-align: middle;
+}
+
+</style>

src/views/apihub/apiorder/ApiOrderForm.vue

@@ -7,14 +7,11 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="下单用户ID" prop="userId">
-        <el-input v-model="formData.userId" placeholder="请输入下单用户ID" />
+      <el-form-item label="用户手机" prop="userId">
+        <el-input v-model="formData.userMobile" placeholder="请输入用户手机" />
       </el-form-item>
-      <el-form-item label="购买的API ID" prop="apiId">
-        <el-input v-model="formData.apiId" placeholder="请输入购买的API ID" />
-      </el-form-item>
-      <el-form-item label="购买的套餐ID" prop="packageId">
-        <el-input v-model="formData.packageId" placeholder="请输入购买的套餐ID" />
+      <el-form-item label="API应用" prop="apiId">
+        <el-input v-model="formData.apiName" placeholder="请输入API应用" />
       </el-form-item>
       <el-form-item label="订单编号" prop="orderNo">
         <el-input v-model="formData.orderNo" placeholder="请输入订单编号" />

src/views/apihub/apiorder/index.vue

@@ -8,33 +8,33 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="下单用户ID" prop="userId">
+      <el-form-item label="用户手机号" prop="userId">
         <el-input
           v-model="queryParams.userId"
-          placeholder="请输入下单用户ID"
+          placeholder="请输入用户手机号"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="购买的API ID" prop="apiId">
+      <el-form-item label="API应用" prop="apiName">
         <el-input
-          v-model="queryParams.apiId"
-          placeholder="请输入购买的API ID"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="购买的套餐ID" prop="packageId">
-        <el-input
-          v-model="queryParams.packageId"
-          placeholder="请输入购买的套餐ID"
+          v-model="queryParams.apiName"
+          placeholder="请输入API应用"
           clearable
           @keyup.enter="handleQuery"
           class="!w-240px"
         />
       </el-form-item>
+<!--      <el-form-item label="套餐名称" prop="packageId">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.packageId"-->
+<!--          placeholder="请输入套餐名称"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
       <el-form-item label="订单编号" prop="orderNo">
         <el-input
           v-model="queryParams.orderNo"
@@ -44,7 +44,7 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="订单状态：0=待支付,1=已支付,2=已取消" prop="status">
+      <el-form-item label="订单状态" prop="status">
         <el-select
           v-model="queryParams.status"
           placeholder="请选择订单状态：0=待支付,1=已支付,2=已取消"
@@ -54,46 +54,46 @@
           <el-option label="请选择字典生成" value="" />
         </el-select>
       </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="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 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="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>
@@ -138,13 +138,17 @@
         @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="购买的API ID" align="center" prop="apiId" />
-      <el-table-column label="购买的套餐ID" align="center" prop="packageId" />
+<!--      <el-table-column label="订单ID" align="center" prop="id" />-->
+      <el-table-column label="用户手机号" align="center" prop="userMobile" />
+      <el-table-column label="API应用" align="center" prop="apiName" />
+      <el-table-column label="套餐名称" align="center" prop="packageName" />
       <el-table-column label="订单编号" align="center" prop="orderNo" />
-      <el-table-column label="订单金额（元）" align="center" prop="amount" />
-      <el-table-column label="订单状态：0=待支付,1=已支付,2=已取消" align="center" prop="status" />
+      <el-table-column label="订单金额（元）" align="center" prop="costPrice">
+        <template #default="scope">
+          {{ (scope.row.costPrice / 100).toFixed(2) }}元
+        </template>
+      </el-table-column>
+      <el-table-column label="订单状态" align="center" prop="statusName" />
       <el-table-column label="支付订单编号" align="center" prop="payOrderId" />
       <el-table-column
         label="订单支付时间"
@@ -153,7 +157,7 @@
         :formatter="dateFormatter"
         width="180px"
       />
-      <el-table-column label="支付成功的支付渠道" align="center" prop="payChannelCode" />
+      <el-table-column label="支付状态" align="center" prop="payStatusName" />
       <el-table-column
         label="订单完成时间"
         align="center"

src/views/apihub/userapiusage/index.vue

@@ -76,8 +76,11 @@
       <el-table-column label="api名称" align="center" prop="apiName" width="150px" />
       <el-table-column label="套餐名称" align="center" prop="packageName" width="150px" />
       <el-table-column label="套餐总量" align="center" prop="packageTimes" />
-      <el-table-column label="有效时长" align="center" prop="packageValidDays" />
-      <el-table-column label="已使用次数" align="center" prop="usedTimes" width="150px" />
+      <el-table-column label="有效时长" align="center" prop="packageValidDays">
+        <template #default="scope">
+          {{ scope.row.packageValidDays }} 天
+        </template>
+      </el-table-column>      <el-table-column label="已使用次数" align="center" prop="usedTimes" width="150px" />
       <el-table-column
         label="过期时间"
         align="center"
@@ -85,13 +88,13 @@
         :formatter="dateFormatter"
         width="180px"
       />
-<!--      <el-table-column-->
-<!--        label="购买时间"-->
-<!--        align="center"-->
-<!--        prop="createTime"-->
-<!--        :formatter="dateFormatter"-->
-<!--        width="180px"-->
-<!--      />-->
+      <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