From dd2c4b6b3ca8a3992b11535d1a12f2fe875fb4e7 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 11 May 2024 19:46:33 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=96=B0=E5=A2=9E=E3=80=91AI=EF=BC=9A?=
 =?UTF-8?q?API=20=E6=A8=A1=E5=9E=8B=E7=AE=A1=E7=90=86=EF=BC=88=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/ai/model/apiKey/index.ts              |  5 +++
 src/views/ai/model/apiKey/ApiKeyForm.vue      | 18 ++++----
 src/views/ai/model/apiKey/index.vue           |  9 ++--
 .../ai/model/chatModel/ChatModelForm.vue      | 41 +++++++++++++++----
 src/views/ai/model/chatModel/index.vue        | 37 ++++++++++-------
 5 files changed, 73 insertions(+), 37 deletions(-)

diff --git a/src/api/ai/model/apiKey/index.ts b/src/api/ai/model/apiKey/index.ts
index c96f2a66..60d8a46c 100644
--- a/src/api/ai/model/apiKey/index.ts
+++ b/src/api/ai/model/apiKey/index.ts
@@ -17,6 +17,11 @@ export const ApiKeyApi = {
     return await request.get({ url: `/ai/api-key/page`, params })
   },
 
+  // 获得 API 密钥列表
+  getApiKeyList: async () => {
+    return await request.get({ url: `/ai/api-key/simple-list` })
+  },
+
   // 查询 API 密钥详情
   getApiKey: async (id: number) => {
     return await request.get({ url: `/ai/api-key/get?id=` + id })
diff --git a/src/views/ai/model/apiKey/ApiKeyForm.vue b/src/views/ai/model/apiKey/ApiKeyForm.vue
index 2f9ba580..a8fc0128 100644
--- a/src/views/ai/model/apiKey/ApiKeyForm.vue
+++ b/src/views/ai/model/apiKey/ApiKeyForm.vue
@@ -7,13 +7,7 @@
       label-width="120px"
       v-loading="formLoading"
     >
-      <el-form-item label="名称" prop="name">
-        <el-input v-model="formData.name" placeholder="请输入名称" />
-      </el-form-item>
-      <el-form-item label="密钥" prop="apiKey">
-        <el-input v-model="formData.apiKey" placeholder="请输入密钥" />
-      </el-form-item>
-      <el-form-item label="平台" prop="platform">
+      <el-form-item label="所属平台" prop="platform">
         <el-select v-model="formData.platform" placeholder="请输入平台" clearable>
           <el-option
             v-for="dict in getStrDictOptions(DICT_TYPE.AI_PLATFORM)"
@@ -23,8 +17,14 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="自定义 API 地址" prop="url">
-        <el-input v-model="formData.url" placeholder="请输入自定义 API 地址" />
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名称" />
+      </el-form-item>
+      <el-form-item label="密钥" prop="apiKey">
+        <el-input v-model="formData.apiKey" placeholder="请输入密钥" />
+      </el-form-item>
+      <el-form-item label="自定义 API URL" prop="url">
+        <el-input v-model="formData.url" placeholder="请输入自定义 API URL" />
       </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-radio-group v-model="formData.status">
diff --git a/src/views/ai/model/apiKey/index.vue b/src/views/ai/model/apiKey/index.vue
index fcafc463..6daf6a7d 100644
--- a/src/views/ai/model/apiKey/index.vue
+++ b/src/views/ai/model/apiKey/index.vue
@@ -60,15 +60,14 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="名称" align="center" prop="name" />
-      <el-table-column label="密钥" align="center" prop="apiKey" />
-      <el-table-column label="平台" align="center" prop="platform">
+      <el-table-column label="所属平台" align="center" prop="platform">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.AI_PLATFORM" :value="scope.row.platform" />
         </template>
       </el-table-column>
-      <el-table-column label="自定义 API 地址" align="center" prop="url" />
+      <el-table-column label="名称" align="center" prop="name" />
+      <el-table-column label="密钥" align="center" prop="apiKey" />
+      <el-table-column label="自定义 API URL" align="center" prop="url" />
       <el-table-column label="状态" align="center" prop="status">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
diff --git a/src/views/ai/model/chatModel/ChatModelForm.vue b/src/views/ai/model/chatModel/ChatModelForm.vue
index 65374291..b8651d58 100644
--- a/src/views/ai/model/chatModel/ChatModelForm.vue
+++ b/src/views/ai/model/chatModel/ChatModelForm.vue
@@ -7,8 +7,25 @@
       label-width="120px"
       v-loading="formLoading"
     >
-      <el-form-item label="API 秘钥编号" prop="keyId">
-        <el-input v-model="formData.keyId" placeholder="请输入API 秘钥编号" />
+      <el-form-item label="所属平台" prop="platform">
+        <el-select v-model="formData.platform" placeholder="请输入平台" clearable>
+          <el-option
+            v-for="dict in getStrDictOptions(DICT_TYPE.AI_PLATFORM)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="API 秘钥" prop="keyId">
+        <el-select v-model="formData.keyId" placeholder="请选择 API 秘钥" clearable>
+          <el-option
+            v-for="apiKey in apiKeyList"
+            :key="apiKey.id"
+            :label="apiKey.name"
+            :value="apiKey.id"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="模型名字" prop="name">
         <el-input v-model="formData.name" placeholder="请输入模型名字" />
@@ -16,15 +33,18 @@
       <el-form-item label="模型标识" prop="model">
         <el-input v-model="formData.model" placeholder="请输入模型标识" />
       </el-form-item>
-      <el-form-item label="模型平台" prop="platform">
-        <el-input v-model="formData.platform" placeholder="请输入模型平台" />
-      </el-form-item>
       <el-form-item label="排序" prop="sort">
         <el-input v-model="formData.sort" placeholder="请输入排序" />
       </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-radio-group v-model="formData.status">
-          <el-radio label="1">请选择字典生成</el-radio>
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="温度参数" prop="temperature">
@@ -45,7 +65,9 @@
 </template>
 <script setup lang="ts">
 import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
+import { ApiKeyApi, ApiKeyVO } from '@/api/ai/model/apiKey'
 import { CommonStatusEnum } from '@/utils/constants'
+import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
 
 /** API 聊天模型 表单 */
 defineOptions({ name: 'ChatModelForm' })
@@ -70,14 +92,15 @@ const formData = ref({
   maxContexts: undefined
 })
 const formRules = reactive({
-  keyId: [{ required: true, message: 'API 秘钥编号不能为空', trigger: 'blur' }],
+  keyId: [{ required: true, message: 'API 秘钥不能为空', trigger: 'blur' }],
   name: [{ required: true, message: '模型名字不能为空', trigger: 'blur' }],
   model: [{ required: true, message: '模型标识不能为空', trigger: 'blur' }],
-  platform: [{ required: true, message: '模型平台不能为空', trigger: 'blur' }],
+  platform: [{ required: true, message: '所属平台不能为空', trigger: 'blur' }],
   sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const apiKeyList = ref([] as ApiKeyVO[]) // API 密钥列表
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -94,6 +117,8 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
+  // 获得下拉数据
+  apiKeyList.value = await ApiKeyApi.getApiKeyList(CommonStatusEnum.ENABLE)
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
diff --git a/src/views/ai/model/chatModel/index.vue b/src/views/ai/model/chatModel/index.vue
index d43051aa..30449ea6 100644
--- a/src/views/ai/model/chatModel/index.vue
+++ b/src/views/ai/model/chatModel/index.vue
@@ -53,23 +53,27 @@
   <!-- 列表 -->
   <ContentWrap>
     <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id" />
-      <el-table-column label="API 秘钥编号" align="center" prop="keyId" />
+      <el-table-column label="所属平台" align="center" prop="platform">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.AI_PLATFORM" :value="scope.row.platform" />
+        </template>
+      </el-table-column>
       <el-table-column label="模型名字" align="center" prop="name" />
       <el-table-column label="模型标识" align="center" prop="model" />
-      <el-table-column label="模型平台" align="center" prop="platform" />
+      <el-table-column label="API 秘钥" align="center" prop="keyId" min-width="140">
+        <template #default="scope">
+          <span>{{ apiKeyList.find((item) => item.id === scope.row.keyId)?.name }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="排序" align="center" prop="sort" />
-      <el-table-column label="状态" align="center" prop="status" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
       <el-table-column label="温度参数" align="center" prop="temperature" />
-      <el-table-column label="回复数 Token 数" align="center" prop="maxTokens" />
+      <el-table-column label="回复数 Token 数" align="center" prop="maxTokens" min-width="140" />
       <el-table-column label="上下文数量" align="center" prop="maxContexts" />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
       <el-table-column label="操作" align="center">
         <template #default="scope">
           <el-button
@@ -106,9 +110,10 @@
 
 <script setup lang="ts">
 import { dateFormatter } from '@/utils/formatTime'
-import download from '@/utils/download'
 import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
 import ChatModelForm from './ChatModelForm.vue'
+import { DICT_TYPE } from '@/utils/dict'
+import { ApiKeyApi, ApiKeyVO } from '@/api/ai/model/apiKey'
 
 /** API 聊天模型 列表 */
 defineOptions({ name: 'AiChatModel' })
@@ -127,7 +132,7 @@ const queryParams = reactive({
   platform: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const exportLoading = ref(false) // 导出的加载中
+const apiKeyList = ref([] as ApiKeyVO[]) // API 密钥列表
 
 /** 查询列表 */
 const getList = async () => {
@@ -173,7 +178,9 @@ const handleDelete = async (id: number) => {
 }
 
 /** 初始化 **/
-onMounted(() => {
+onMounted(async () => {
   getList()
+  // 获得下拉数据
+  apiKeyList.value = await ApiKeyApi.getApiKeyList()
 })
 </script>