feat：【antd】【ai】chat/manager 的代码优化

apps/web-antd/src/views/ai/chat/manager/data.ts

@@ -1,11 +1,16 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
 
 import { DICT_TYPE } from '@vben/constants';
 
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
 /** 列表的搜索表单 */
 export function useGridFormSchemaConversation(): VbenFormSchema[] {
   return [
@@ -13,11 +18,19 @@ export function useGridFormSchemaConversation(): VbenFormSchema[] {
       fieldName: 'userId',
       label: '用户编号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户编号',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'title',
       label: '聊天标题',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入聊天标题',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'createTime',
@@ -49,7 +62,13 @@ export function useGridColumnsConversation(): VxeTableGridOptions['columns'] {
     {
       title: '用户',
       minWidth: 180,
-      slots: { default: 'userId' },
+      field: 'userId',
+      formatter: ({ cellValue }) => {
+        if (cellValue === 0) {
+          return '系统';
+        }
+        return userList.find((user) => user.id === cellValue)?.nickname || '-';
+      },
     },
     {
       field: 'roleName',
@@ -103,6 +122,10 @@ export function useGridFormSchemaMessage(): VbenFormSchema[] {
       fieldName: 'conversationId',
       label: '对话编号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入对话编号',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'userId',
@@ -112,6 +135,8 @@ export function useGridFormSchemaMessage(): VbenFormSchema[] {
         api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户编号',
+        allowClear: true,
       },
     },
     {
@@ -144,7 +169,9 @@ export function useGridColumnsMessage(): VxeTableGridOptions['columns'] {
     {
       title: '用户',
       minWidth: 180,
-      slots: { default: 'userId' },
+      field: 'userId',
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
     },
     {
       field: 'roleName',

apps/web-antd/src/views/ai/chat/manager/index.vue

@@ -5,8 +5,8 @@ import { DocAlert, Page } from '@vben/common-ui';
 
 import { Card, Tabs } from 'ant-design-vue';
 
-import ChatConversationList from './modules/ChatConversationList.vue';
-import ChatMessageList from './modules/ChatMessageList.vue';
+import ChatConversationList from './modules/conversation-list.vue';
+import ChatMessageList from './modules/message-list.vue';
 
 const activeTabName = ref('conversation');
 </script>
@@ -16,6 +16,7 @@ const activeTabName = ref('conversation');
     <template #doc>
       <DocAlert title="AI 对话聊天" url="https://doc.iocoder.cn/ai/chat/" />
     </template>
+
     <Card>
       <Tabs v-model:active-key="activeTabName">
         <Tabs.TabPane tab="对话列表" key="conversation">

apps/web-antd/src/views/ai/chat/manager/modules/conversation-list.vue

@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
-import type { SystemUserApi } from '#/api/system/user';
-
-import { onMounted, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
@@ -14,7 +11,6 @@ import {
   deleteChatConversationByAdmin,
   getChatConversationPage,
 } from '#/api/ai/chat/conversation';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
 import {
@@ -22,23 +18,20 @@ import {
   useGridFormSchemaConversation,
 } from '../data';
 
-const userList = ref<SystemUserApi.User[]>([]); // 用户列表
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
+/** 删除消息 */
 async function handleDelete(row: AiChatConversationApi.ChatConversation) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
   });
   try {
-    await deleteChatConversationByAdmin(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    await deleteChatConversationByAdmin(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -66,17 +59,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiChatConversationApi.ChatConversation>,
-  separator: false,
-});
-onMounted(async () => {
-  // 获得用户列表
-  userList.value = await getSimpleUserList();
 });
 </script>
 
@@ -86,12 +75,6 @@ onMounted(async () => {
       <template #toolbar-tools>
         <TableAction :actions="[]" />
       </template>
-      <template #userId="{ row }">
-        <span>
-          {{ userList.find((item) => item.id === row.userId)?.nickname }}
-        </span>
-        <span v-if="row.userId === 0">系统</span>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[

apps/web-antd/src/views/ai/chat/manager/modules/message-list.vue

@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
-import type { SystemUserApi } from '#/api/system/user';
-
-import { onMounted, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
@@ -14,28 +11,24 @@ import {
   deleteChatMessageByAdmin,
   getChatMessagePage,
 } from '#/api/ai/chat/message';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
 import { useGridColumnsMessage, useGridFormSchemaMessage } from '../data';
 
-const userList = ref<SystemUserApi.User[]>([]); // 用户列表
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
+/** 删除消息 */
 async function handleDelete(row: AiChatConversationApi.ChatConversation) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
   });
   try {
-    await deleteChatMessageByAdmin(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    await deleteChatMessageByAdmin(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -63,31 +56,19 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<AiChatConversationApi.ChatConversation>,
-  separator: false,
-});
-onMounted(async () => {
-  // 获得用户列表
-  userList.value = await getSimpleUserList();
 });
 </script>
 
 <template>
   <Page auto-content-height>
     <Grid table-title="消息列表">
-      <template #toolbar-tools>
-        <TableAction :actions="[]" />
-      </template>
-      <template #userId="{ row }">
-        <span>
-          {{ userList.find((item) => item.id === row.userId)?.nickname }}
-        </span>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[