【新增】AI：聊天角色管理（80%）

src/api/ai/model/apiKey/index.ts

@@ -18,7 +18,7 @@ export const ApiKeyApi = {
   },
 
   // 获得 API 密钥列表
-  getApiKeyList: async () => {
+  getApiKeySimpleList: async () => {
     return await request.get({ url: `/ai/api-key/simple-list` })
   },
 

src/api/ai/model/chatModel/index.ts

@@ -21,6 +21,16 @@ export const ChatModelApi = {
     return await request.get({ url: `/ai/chat-model/page`, params })
   },
 
+  // 获得聊天模型列表
+  getChatModelSimpleList: async (status?: number) => {
+    return await request.get({
+      url: `/ai/chat-model/simple-list`,
+      params: {
+        status
+      }
+    })
+  },
+
   // 查询聊天模型详情
   getChatModel: async (id: number) => {
     return await request.get({ url: `/ai/chat-model/get?id=` + id })

src/views/ai/model/chatModel/ChatModelForm.vue

@@ -33,10 +33,10 @@
       <el-form-item label="模型标识" prop="model">
         <el-input v-model="formData.model" placeholder="请输入模型标识" />
       </el-form-item>
-      <el-form-item label="排序" prop="sort">
-        <el-input v-model="formData.sort" placeholder="请输入排序" />
+      <el-form-item label="模型排序" prop="sort">
+        <el-input-number v-model="formData.sort" placeholder="请输入模型排序" class="!w-1/1" />
       </el-form-item>
-      <el-form-item label="状态" prop="status">
+      <el-form-item label="开启状态" prop="status">
         <el-radio-group v-model="formData.status">
           <el-radio
             v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
@@ -118,7 +118,7 @@ const open = async (type: string, id?: number) => {
     }
   }
   // 获得下拉数据
-  apiKeyList.value = await ApiKeyApi.getApiKeyList(CommonStatusEnum.ENABLE)
+  apiKeyList.value = await ApiKeyApi.getApiKeySimpleList(CommonStatusEnum.ENABLE)
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 

src/views/ai/model/chatModel/index.vue

@@ -109,7 +109,6 @@
 </template>
 
 <script setup lang="ts">
-import { dateFormatter } from '@/utils/formatTime'
 import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
 import ChatModelForm from './ChatModelForm.vue'
 import { DICT_TYPE } from '@/utils/dict'
@@ -181,6 +180,6 @@ const handleDelete = async (id: number) => {
 onMounted(async () => {
   getList()
   // 获得下拉数据
-  apiKeyList.value = await ApiKeyApi.getApiKeyList()
+  apiKeyList.value = await ApiKeyApi.getApiKeySimpleList()
 })
 </script>

src/views/ai/model/chatRole/ChatRoleForm.vue

@@ -7,29 +7,37 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-form-item label="模型编号" prop="modelId">
-        <el-input v-model="formData.modelId" placeholder="请输入模型编号" />
-      </el-form-item>
       <el-form-item label="角色名称" prop="name">
         <el-input v-model="formData.name" placeholder="请输入角色名称" />
       </el-form-item>
       <el-form-item label="角色头像" prop="avatar">
-        <el-input v-model="formData.avatar" placeholder="请输入角色头像" />
+        <UploadImg v-model="formData.avatar" height="60px" width="60px" />
+      </el-form-item>
+      <el-form-item label="绑定模型" prop="modelId">
+        <el-select v-model="formData.modelId" placeholder="请选择模型" clearable>
+          <el-option
+            v-for="chatModel in chatModelList"
+            :key="chatModel.id"
+            :label="chatModel.name"
+            :value="chatModel.id"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="角色类别" prop="category">
         <el-input v-model="formData.category" 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="description">
-        <Editor v-model="formData.description" height="150px" />
+        <el-input type="textarea" v-model="formData.description" placeholder="请输入角色描述" />
       </el-form-item>
       <el-form-item label="角色欢迎语" prop="welcomeMessage">
-        <el-input v-model="formData.welcomeMessage" placeholder="请输入角色欢迎语" />
+        <el-input
+          type="textarea"
+          v-model="formData.welcomeMessage"
+          placeholder="请输入角色欢迎语"
+        />
       </el-form-item>
       <el-form-item label="角色上下文" prop="systemMessage">
-        <el-input v-model="formData.systemMessage" placeholder="请输入角色上下文" />
+        <el-input type="textarea" v-model="formData.systemMessage" placeholder="请输入角色上下文" />
       </el-form-item>
       <el-form-item label="是否公开" prop="publicStatus">
         <el-radio-group v-model="formData.publicStatus">
@@ -42,7 +50,10 @@
           </el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="状态" prop="status">
+      <el-form-item label="角色排序" prop="sort">
+        <el-input-number v-model="formData.sort" placeholder="请输入角色排序" class="!w-1/1" />
+      </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_STATUS)"
@@ -63,6 +74,8 @@
 <script setup lang="ts">
 import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
 import { ChatRoleApi, ChatRoleVO } from '@/api/ai/model/chatRole'
+import { CommonStatusEnum } from '@/utils/constants'
+import { ChatModelApi, ChatModelVO } from '@/api/ai/model/chatModel'
 
 /** AI 聊天角色 表单 */
 defineOptions({ name: 'ChatRoleForm' })
@@ -84,8 +97,8 @@ const formData = ref({
   description: undefined,
   welcomeMessage: undefined,
   systemMessage: undefined,
-  publicStatus: undefined,
-  status: undefined
+  publicStatus: true,
+  status: CommonStatusEnum.ENABLE
 })
 const formRules = reactive({
   name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
@@ -98,6 +111,7 @@ const formRules = reactive({
   publicStatus: [{ required: true, message: '是否公开不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
+const chatModelList = ref([] as ChatModelVO[]) // 聊天模型列表
 
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
@@ -114,6 +128,8 @@ const open = async (type: string, id?: number) => {
       formLoading.value = false
     }
   }
+  // 获得下拉数据
+  chatModelList.value = await ChatModelApi.getChatModelSimpleList(CommonStatusEnum.ENABLE)
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -153,8 +169,8 @@ const resetForm = () => {
     description: undefined,
     welcomeMessage: undefined,
     systemMessage: undefined,
-    publicStatus: undefined,
-    status: undefined
+    publicStatus: true,
+    status: CommonStatusEnum.ENABLE
   }
   formRef.value?.resetFields()
 }

src/views/ai/model/chatRole/index.vue

@@ -59,13 +59,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="userId" />
-      <el-table-column label="模型编号" align="center" prop="modelId" />
       <el-table-column label="角色名称" align="center" prop="name" />
-      <el-table-column label="角色头像" align="center" prop="avatar" />
+      <el-table-column label="绑定模型" align="center" prop="modelName" />
+      <el-table-column label="角色头像" align="center" prop="avatar">
+        <template #default="scope">
+          <el-image :src="scope?.row.avatar" class="w-32px h-32px" />
+        </template>
+      </el-table-column>
       <el-table-column label="角色类别" align="center" prop="category" />
-      <el-table-column label="角色排序" align="center" prop="sort" />
       <el-table-column label="角色描述" align="center" prop="description" />
       <el-table-column label="角色欢迎语" align="center" prop="welcomeMessage" />
       <el-table-column label="角色上下文" align="center" prop="systemMessage" />
@@ -79,13 +80,7 @@
           <dict-tag :type="DICT_TYPE.COMMON_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" prop="sort" />
       <el-table-column label="操作" align="center">
         <template #default="scope">
           <el-button
@@ -122,7 +117,6 @@
 
 <script setup lang="ts">
 import { getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
-import { dateFormatter } from '@/utils/formatTime'
 import { ChatRoleApi, ChatRoleVO } from '@/api/ai/model/chatRole'
 import ChatRoleForm from './ChatRoleForm.vue'
 
@@ -140,7 +134,7 @@ const queryParams = reactive({
   pageSize: 10,
   name: undefined,
   category: undefined,
-  publicStatus: undefined
+  publicStatus: true
 })
 const queryFormRef = ref() // 搜索的表单