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

c16bcef5 · YunaiV · 9e99807b · c16bcef5 · c16bcef5 · c16bcef5
Commit c16bcef5 authored May 13, 2024 by YunaiV
6 changed files
--- a/src/api/ai/model/apiKey/index.ts
+++ b/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` })
  },

--- a/src/api/ai/model/chatModel/index.ts
+++ b/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 })

--- a/src/views/ai/model/chatModel/ChatModelForm.vue
+++ b/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-form-item label="模型排序" prop="sort">
-        <el-input v-model="formData.sort" placeholder="请输入排序" />
+        <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 方法，用于打开弹窗

--- a/src/views/ai/model/chatModel/index.vue
+++ b/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>
--- a/src/views/ai/model/chatRole/ChatRoleForm.vue
+++ b/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,
+  publicStatus: true,
-  status: undefined
+  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,
+    publicStatus: true,
-    status: undefined
+    status: CommonStatusEnum.ENABLE
  }
  formRef.value?.resetFields()
 }

--- a/src/views/ai/model/chatRole/index.vue
+++ b/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
+      <el-table-column label="角色排序" align="center" prop="sort" />
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
      <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() // 搜索的表单