diff --git a/apps/web-antd/src/api/ai/mindmap/index.ts b/apps/web-antd/src/api/ai/mindmap/index.ts
index 69e437341..192b9950f 100644
--- a/apps/web-antd/src/api/ai/mindmap/index.ts
+++ b/apps/web-antd/src/api/ai/mindmap/index.ts
@@ -6,6 +6,7 @@ import { requestClient } from '#/api/request';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 const accessStore = useAccessStore();
+
 export namespace AiMindmapApi {
   // AI 思维导图
   export interface MindMap {
@@ -19,7 +20,7 @@ export namespace AiMindmapApi {
   }
 
   // AI 思维导图生成
-  export interface AiMindMapGenerateReq {
+  export interface AiMindMapGenerateReqVO {
     prompt: string;
   }
 }
@@ -32,7 +33,7 @@ export function generateMindMap({
   ctrl,
 }: {
   ctrl: AbortController;
-  data: AiMindmapApi.AiMindMapGenerateReq;
+  data: AiMindmapApi.AiMindMapGenerateReqVO;
   onClose?: (...args: any[]) => void;
   onError?: (...args: any[]) => void;
   onMessage?: (res: any) => void;
@@ -53,12 +54,12 @@ export function generateMindMap({
   });
 }
 
-// 查询思维导图分页
+/** 查询思维导图分页 */
 export function getMindMapPage(params: any) {
   return requestClient.get(`/ai/mind-map/page`, { params });
 }
 
-// 删除思维导图
+/** 删除思维导图 */
 export function deleteMindMap(id: number) {
   return requestClient.delete(`/ai/mind-map/delete?id=${id}`);
 }
diff --git a/apps/web-antd/src/api/ai/model/apiKey/index.ts b/apps/web-antd/src/api/ai/model/apiKey/index.ts
index 80dcbec1a..2ffc842d8 100644
--- a/apps/web-antd/src/api/ai/model/apiKey/index.ts
+++ b/apps/web-antd/src/api/ai/model/apiKey/index.ts
@@ -13,7 +13,7 @@ export namespace AiModelApiKeyApi {
   }
 }
 
-// 查询 API 密钥分页
+/** 查询 API 密钥分页 */
 export function getApiKeyPage(params: PageParam) {
   return requestClient.get<PageResult<AiModelApiKeyApi.ApiKey>>(
     '/ai/api-key/page',
@@ -21,28 +21,29 @@ export function getApiKeyPage(params: PageParam) {
   );
 }
 
-// 获得 API 密钥列表
+/** 获得 API 密钥列表 */
 export function getApiKeySimpleList() {
   return requestClient.get<AiModelApiKeyApi.ApiKey[]>(
     '/ai/api-key/simple-list',
   );
 }
 
-// 查询 API 密钥详情
+/** 查询 API 密钥详情 */
 export function getApiKey(id: number) {
   return requestClient.get<AiModelApiKeyApi.ApiKey>(`/ai/api-key/get?id=${id}`);
 }
-// 新增 API 密钥
+
+/** 新增 API 密钥 */
 export function createApiKey(data: AiModelApiKeyApi.ApiKey) {
   return requestClient.post('/ai/api-key/create', data);
 }
 
-// 修改 API 密钥
+/** 修改 API 密钥 */
 export function updateApiKey(data: AiModelApiKeyApi.ApiKey) {
   return requestClient.put('/ai/api-key/update', data);
 }
 
-// 删除 API 密钥
+/** 删除 API 密钥 */
 export function deleteApiKey(id: number) {
   return requestClient.delete(`/ai/api-key/delete?id=${id}`);
 }
diff --git a/apps/web-antd/src/api/ai/model/chatRole/index.ts b/apps/web-antd/src/api/ai/model/chatRole/index.ts
index d52dbfee5..266ca3474 100644
--- a/apps/web-antd/src/api/ai/model/chatRole/index.ts
+++ b/apps/web-antd/src/api/ai/model/chatRole/index.ts
@@ -20,7 +20,7 @@ export namespace AiModelChatRoleApi {
   }
 
   // AI 聊天角色 分页请求
-  export interface ChatRolePageReq {
+  export interface ChatRolePageReqVO {
     name?: string; // 角色名称
     category?: string; // 角色类别
     publicStatus: boolean; // 是否公开
@@ -29,7 +29,7 @@ export namespace AiModelChatRoleApi {
   }
 }
 
-// 查询聊天角色分页
+/** 查询聊天角色分页 */
 export function getChatRolePage(params: PageParam) {
   return requestClient.get<PageResult<AiModelChatRoleApi.ChatRole>>(
     '/ai/chat-role/page',
@@ -37,49 +37,49 @@ export function getChatRolePage(params: PageParam) {
   );
 }
 
-// 查询聊天角色详情
+/** 查询聊天角色详情 */
 export function getChatRole(id: number) {
   return requestClient.get<AiModelChatRoleApi.ChatRole>(
     `/ai/chat-role/get?id=${id}`,
   );
 }
-// 新增聊天角色
+
+/** 新增聊天角色 */
 export function createChatRole(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.post('/ai/chat-role/create', data);
 }
 
-// 修改聊天角色
+/** 修改聊天角色 */
 export function updateChatRole(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.put('/ai/chat-role/update', data);
 }
 
-// 删除聊天角色
+/** 删除聊天角色 */
 export function deleteChatRole(id: number) {
   return requestClient.delete(`/ai/chat-role/delete?id=${id}`);
 }
 
-// ======= chat 聊天
-// 获取 my role
-export function getMyPage(params: AiModelChatRoleApi.ChatRolePageReq) {
+/** 获取 my role */
+export function getMyPage(params: AiModelChatRoleApi.ChatRolePageReqVO) {
   return requestClient.get('/ai/chat-role/my-page', { params });
 }
 
-// 获取角色分类
+/** 获取角色分类 */
 export function getCategoryList() {
   return requestClient.get('/ai/chat-role/category-list');
 }
 
-// 创建角色
+/** 创建角色 */
 export function createMy(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.post('/ai/chat-role/create-my', data);
 }
 
-// 更新角色
+/** 更新角色 */
 export function updateMy(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.put('/ai/chat-role/update', data);
 }
 
-// 删除角色 my
+/** 删除角色 my */
 export function deleteMy(id: number) {
   return requestClient.delete(`/ai/chat-role/delete-my?id=${id}`);
 }
diff --git a/apps/web-antd/src/api/ai/model/model/index.ts b/apps/web-antd/src/api/ai/model/model/index.ts
index deafcee82..364327cc1 100644
--- a/apps/web-antd/src/api/ai/model/model/index.ts
+++ b/apps/web-antd/src/api/ai/model/model/index.ts
@@ -18,7 +18,7 @@ export namespace AiModelModelApi {
   }
 }
 
-// 查询模型分页
+/** 查询模型分页 */
 export function getModelPage(params: PageParam) {
   return requestClient.get<PageResult<AiModelModelApi.Model>>(
     '/ai/model/page',
@@ -26,7 +26,7 @@ export function getModelPage(params: PageParam) {
   );
 }
 
-// 获得模型列表
+/** 获得模型列表 */
 export function getModelSimpleList(type?: number) {
   return requestClient.get<AiModelModelApi.Model[]>('/ai/model/simple-list', {
     params: {
@@ -35,21 +35,22 @@ export function getModelSimpleList(type?: number) {
   });
 }
 
-// 查询模型详情
+/** 查询模型详情 */
 export function getModel(id: number) {
   return requestClient.get<AiModelModelApi.Model>(`/ai/model/get?id=${id}`);
 }
-// 新增模型
+
+/** 新增模型 */
 export function createModel(data: AiModelModelApi.Model) {
   return requestClient.post('/ai/model/create', data);
 }
 
-// 修改模型
+/** 修改模型 */
 export function updateModel(data: AiModelModelApi.Model) {
   return requestClient.put('/ai/model/update', data);
 }
 
-// 删除模型
+/** 删除模型 */
 export function deleteModel(id: number) {
   return requestClient.delete(`/ai/model/delete?id=${id}`);
 }
diff --git a/apps/web-antd/src/api/ai/model/tool/index.ts b/apps/web-antd/src/api/ai/model/tool/index.ts
index 6fac9d74b..03abc4e7b 100644
--- a/apps/web-antd/src/api/ai/model/tool/index.ts
+++ b/apps/web-antd/src/api/ai/model/tool/index.ts
@@ -11,33 +11,34 @@ export namespace AiModelToolApi {
   }
 }
 
-// 查询工具分页
+/** 查询工具分页 */
 export function getToolPage(params: PageParam) {
   return requestClient.get<PageResult<AiModelToolApi.Tool>>('/ai/tool/page', {
     params,
   });
 }
 
-// 查询工具详情
+/** 查询工具详情 */
 export function getTool(id: number) {
   return requestClient.get<AiModelToolApi.Tool>(`/ai/tool/get?id=${id}`);
 }
-// 新增工具
+
+/** 新增工具 */
 export function createTool(data: AiModelToolApi.Tool) {
   return requestClient.post('/ai/tool/create', data);
 }
 
-// 修改工具
+/** 修改工具 */
 export function updateTool(data: AiModelToolApi.Tool) {
   return requestClient.put('/ai/tool/update', data);
 }
 
-// 删除工具
+/** 删除工具 */
 export function deleteTool(id: number) {
   return requestClient.delete(`/ai/tool/delete?id=${id}`);
 }
 
-// 获取工具简单列表
+/** 获取工具简单列表 */
 export function getToolSimpleList() {
   return requestClient.get<AiModelToolApi.Tool[]>('/ai/tool/simple-list');
 }
diff --git a/apps/web-antd/src/api/ai/write/index.ts b/apps/web-antd/src/api/ai/write/index.ts
index 4ca1fc7aa..a9863d27d 100644
--- a/apps/web-antd/src/api/ai/write/index.ts
+++ b/apps/web-antd/src/api/ai/write/index.ts
@@ -9,8 +9,10 @@ import { requestClient } from '#/api/request';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 const accessStore = useAccessStore();
+
 export namespace AiWriteApi {
   export interface Write {
+    id?: number;
     type: AiWriteTypeEnum.REPLY | AiWriteTypeEnum.WRITING; // 1:撰写 2:回复
     prompt: string; // 写作内容提示 1。撰写 2回复
     originalContent: string; // 原文
@@ -26,29 +28,12 @@ export namespace AiWriteApi {
     createTime?: Date; // 创建时间
   }
 
-  export interface AiWritePageReq extends PageParam {
+  export interface AiWritePageReqVO extends PageParam {
     userId?: number; // 用户编号
     type?: AiWriteTypeEnum; //  写作类型
     platform?: string; // 平台
     createTime?: [string, string]; // 创建时间
   }
-
-  export interface AiWriteResp {
-    id: number;
-    userId: number;
-    type: number;
-    platform: string;
-    model: string;
-    prompt: string;
-    generatedContent: string;
-    originalContent: string;
-    length: number;
-    format: number;
-    tone: number;
-    language: number;
-    errorMessage: string;
-    createTime: string;
-  }
 }
 
 export function writeStream({
@@ -80,15 +65,14 @@ export function writeStream({
   });
 }
 
-// 获取写作列表
-export function getWritePage(params: any) {
-  return requestClient.get<PageResult<AiWriteApi.AiWritePageReq>>(
-    `/ai/write/page`,
-    { params },
-  );
+/** 获取写作列表 */
+export function getWritePage(params: AiWriteApi.AiWritePageReqVO) {
+  return requestClient.get<PageResult<AiWriteApi.Write>>(`/ai/write/page`, {
+    params,
+  });
 }
 
-// 删除音乐
+/** 删除写作记录 */
 export function deleteWrite(id: number) {
   return requestClient.delete(`/ai/write/delete`, { params: { id } });
 }
diff --git a/apps/web-antd/src/components/description/description.vue b/apps/web-antd/src/components/description/description.vue
index 057f9db03..3d341596e 100644
--- a/apps/web-antd/src/components/description/description.vue
+++ b/apps/web-antd/src/components/description/description.vue
@@ -133,6 +133,7 @@ export default defineComponent({
             >
               {() => {
                 if (item.slot) {
+                  // TODO @xingyu：这里要 inline 掉么？
                   const slotContent = getSlot(slots, item.slot, data);
                   return slotContent;
                 }
diff --git a/apps/web-antd/src/views/ai/chat/index/components/role/RoleRepository.vue b/apps/web-antd/src/views/ai/chat/index/components/role/RoleRepository.vue
index a4b0dc875..ea78237c0 100644
--- a/apps/web-antd/src/views/ai/chat/index/components/role/RoleRepository.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/role/RoleRepository.vue
@@ -55,7 +55,7 @@ async function handleTabsClick(tab: any) {
 
 /** 获取 my role 我的角色 */
 async function getMyRole(append?: boolean) {
-  const params: AiModelChatRoleApi.ChatRolePageReq = {
+  const params: AiModelChatRoleApi.ChatRolePageReqVO = {
     ...myRoleParams,
     name: search.value,
     publicStatus: false,
@@ -70,7 +70,7 @@ async function getMyRole(append?: boolean) {
 
 /** 获取 public role 公共角色 */
 async function getPublicRole(append?: boolean) {
-  const params: AiModelChatRoleApi.ChatRolePageReq = {
+  const params: AiModelChatRoleApi.ChatRolePageReqVO = {
     ...publicRoleParams,
     category: activeCategory.value === '全部' ? '' : activeCategory.value,
     name: search.value,
diff --git a/apps/web-antd/src/views/ai/chat/manager/data.ts b/apps/web-antd/src/views/ai/chat/manager/data.ts
index e9379d911..f8dcb1fa7 100644
--- a/apps/web-antd/src/views/ai/chat/manager/data.ts
+++ b/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',
diff --git a/apps/web-antd/src/views/ai/chat/manager/index.vue b/apps/web-antd/src/views/ai/chat/manager/index.vue
index 8eb294dd3..69c4e844b 100644
--- a/apps/web-antd/src/views/ai/chat/manager/index.vue
+++ b/apps/web-antd/src/views/ai/chat/manager/index.vue
@@ -3,10 +3,10 @@ import { ref } from 'vue';
 
 import { DocAlert, Page } from '@vben/common-ui';
 
-import { Card, Tabs } from 'ant-design-vue';
+import { 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,15 +16,14 @@ 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">
-          <ChatConversationList />
-        </Tabs.TabPane>
-        <Tabs.TabPane tab="消息列表" key="message">
-          <ChatMessageList />
-        </Tabs.TabPane>
-      </Tabs>
-    </Card>
+
+    <Tabs v-model:active-key="activeTabName">
+      <Tabs.TabPane tab="对话列表" key="conversation">
+        <ChatConversationList />
+      </Tabs.TabPane>
+      <Tabs.TabPane tab="消息列表" key="message">
+        <ChatMessageList />
+      </Tabs.TabPane>
+    </Tabs>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue b/apps/web-antd/src/views/ai/chat/manager/modules/conversation-list.vue
similarity index 73%
rename from apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue
rename to apps/web-antd/src/views/ai/chat/manager/modules/conversation-list.vue
index c605da518..6bfe70216 100644
--- a/apps/web-antd/src/views/ai/chat/manager/modules/ChatConversationList.vue
+++ b/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,32 +59,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>
-        <span v-if="row.userId === 0">系统</span>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue b/apps/web-antd/src/views/ai/chat/manager/modules/message-list.vue
similarity index 74%
rename from apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue
rename to apps/web-antd/src/views/ai/chat/manager/modules/message-list.vue
index 8fe714e5c..bf6bd5747 100644
--- a/apps/web-antd/src/views/ai/chat/manager/modules/ChatMessageList.vue
+++ b/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="[
diff --git a/apps/web-antd/src/views/ai/image/manager/data.ts b/apps/web-antd/src/views/ai/image/manager/data.ts
index 3145e9192..7bd63bb8a 100644
--- a/apps/web-antd/src/views/ai/image/manager/data.ts
+++ b/apps/web-antd/src/views/ai/image/manager/data.ts
@@ -26,6 +26,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
         api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户编号',
+        allowClear: true,
       },
     },
     {
@@ -33,6 +35,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '平台',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择平台',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
       },
@@ -42,6 +45,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '绘画状态',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择绘画状态',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.AI_IMAGE_STATUS, 'number'),
       },
@@ -51,8 +55,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '是否发布',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        placeholder: '请选择是否发布',
         allowClear: true,
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
       },
     },
     {
@@ -68,7 +73,12 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onPublicStatusChange?: (
+    newStatus: boolean,
+    row: any,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -118,7 +128,16 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       minWidth: 100,
       title: '是否发布',
-      slots: { default: 'publicStatus' },
+      field: 'publicStatus',
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onPublicStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: true,
+          unCheckedValue: false,
+        },
+      },
     },
     {
       field: 'prompt',
diff --git a/apps/web-antd/src/views/ai/image/manager/index.vue b/apps/web-antd/src/views/ai/image/manager/index.vue
index c252788d7..ad1ab7b02 100644
--- a/apps/web-antd/src/views/ai/image/manager/index.vue
+++ b/apps/web-antd/src/views/ai/image/manager/index.vue
@@ -3,9 +3,8 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiImageApi } from '#/api/ai/image';
 
 import { confirm, DocAlert, Page } from '@vben/common-ui';
-import { AiImageStatusEnum } from '@vben/constants';
 
-import { message, Switch } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteImage, getImagePage, updateImage } from '#/api/ai/image';
@@ -18,7 +17,7 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
+/** 删除图片 */
 async function handleDelete(row: AiImageApi.Image) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
@@ -26,36 +25,45 @@ async function handleDelete(row: AiImageApi.Image) {
   });
   try {
     await deleteImage(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
+
 /** 修改是否发布 */
-async function handleUpdatePublicStatusChange(row: AiImageApi.Image) {
-  try {
-    // 修改状态的二次确认
-    const text = row.publicStatus ? '公开' : '私有';
-    await confirm(`确认要"${text}"该图片吗?`).then(async () => {
-      await updateImage({
-        id: row.id,
-        publicStatus: row.publicStatus,
+async function handleUpdatePublicStatusChange(
+  newStatus: boolean,
+  row: AiImageApi.Image,
+): Promise<boolean | undefined> {
+  const text = newStatus ? '公开' : '私有';
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确认要将该图片切换为【${text}】吗？`,
+    })
+      .then(async () => {
+        // 更新图片状态
+        await updateImage({
+          id: row.id,
+          publicStatus: newStatus,
+        });
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
       });
-      handleRefresh();
-    });
-  } catch {
-    row.publicStatus = !row.publicStatus;
-  }
+  });
 }
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleUpdatePublicStatusChange),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -71,6 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -86,13 +95,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
       <DocAlert title="AI 绘图创作" url="https://doc.iocoder.cn/ai/image/" />
     </template>
     <Grid table-title="绘画管理列表">
-      <template #publicStatus="{ row }">
-        <Switch
-          v-model:checked="row.publicStatus"
-          @change="handleUpdatePublicStatusChange(row)"
-          :disabled="row.status !== AiImageStatusEnum.SUCCESS"
-        />
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/ai/mindmap/index/index.vue b/apps/web-antd/src/views/ai/mindmap/index/index.vue
index a859b663b..325268661 100644
--- a/apps/web-antd/src/views/ai/mindmap/index/index.vue
+++ b/apps/web-antd/src/views/ai/mindmap/index/index.vue
@@ -3,13 +3,15 @@ import type { AiMindmapApi } from '#/api/ai/mindmap';
 
 import { nextTick, onMounted, ref } from 'vue';
 
-import { alert, Page } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 import { MindMapContentExample } from '@vben/constants';
 
+import { message } from 'ant-design-vue';
+
 import { generateMindMap } from '#/api/ai/mindmap';
 
-import Left from './modules/Left.vue';
-import Right from './modules/Right.vue';
+import Left from './modules/left.vue';
+import Right from './modules/right.vue';
 
 const ctrl = ref<AbortController>(); // 请求控制
 const isGenerating = ref(false); // 是否正在生成思维导图
@@ -26,8 +28,9 @@ function directGenerate(existPrompt: string) {
   generatedContent.value = existPrompt;
   isEnd.value = true;
 }
+
 /** 提交生成 */
-function submit(data: AiMindmapApi.AiMindMapGenerateReq) {
+function handleSubmit(data: AiMindmapApi.AiMindMapGenerateReqVO) {
   isGenerating.value = true;
   isStart.value = true;
   isEnd.value = false;
@@ -38,8 +41,8 @@ function submit(data: AiMindmapApi.AiMindMapGenerateReq) {
     onMessage: async (res: any) => {
       const { code, data, msg } = JSON.parse(res.data);
       if (code !== 0) {
-        alert(`生成思维导图异常! ${msg}`);
-        stopStream();
+        message.error(`生成思维导图异常! ${msg}`);
+        handleStopStream();
         return;
       }
       generatedContent.value = generatedContent.value + data;
@@ -49,19 +52,20 @@ function submit(data: AiMindmapApi.AiMindMapGenerateReq) {
     onClose() {
       isEnd.value = true;
       leftRef.value?.setGeneratedContent(generatedContent.value);
-      stopStream();
+      handleStopStream();
     },
     onError(err) {
       console.error('生成思维导图失败', err);
-      stopStream();
+      handleStopStream();
       // 需要抛出异常，禁止重试
       throw err;
     },
     ctrl: ctrl.value,
   });
 }
+
 /** 停止 stream 生成 */
-function stopStream() {
+function handleStopStream() {
   isGenerating.value = false;
   isStart.value = false;
   ctrl.value?.abort();
@@ -80,7 +84,7 @@ onMounted(() => {
         ref="leftRef"
         class="mr-4"
         :is-generating="isGenerating"
-        @submit="submit"
+        @submit="handleSubmit"
         @direct-generate="directGenerate"
       />
       <Right
diff --git a/apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue b/apps/web-antd/src/views/ai/mindmap/index/modules/left.vue
similarity index 99%
rename from apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue
rename to apps/web-antd/src/views/ai/mindmap/index/modules/left.vue
index 7482f50d1..f6bb8226d 100644
--- a/apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue
+++ b/apps/web-antd/src/views/ai/mindmap/index/modules/left.vue
@@ -8,7 +8,9 @@ import { Button, Textarea } from 'ant-design-vue';
 defineProps<{
   isGenerating: boolean;
 }>();
+
 const emits = defineEmits(['submit', 'directGenerate']);
+
 const formData = reactive({
   prompt: '',
 });
diff --git a/apps/web-antd/src/views/ai/mindmap/index/modules/Right.vue b/apps/web-antd/src/views/ai/mindmap/index/modules/right.vue
similarity index 97%
rename from apps/web-antd/src/views/ai/mindmap/index/modules/Right.vue
rename to apps/web-antd/src/views/ai/mindmap/index/modules/right.vue
index 58dcb63e7..a2537f393 100644
--- a/apps/web-antd/src/views/ai/mindmap/index/modules/Right.vue
+++ b/apps/web-antd/src/views/ai/mindmap/index/modules/right.vue
@@ -18,6 +18,7 @@ const props = defineProps<{
   isGenerating: boolean; // 是否正在生成
   isStart: boolean; // 开始状态，开始时需要清除 html
 }>();
+
 const md = MarkdownIt();
 const contentRef = ref<HTMLDivElement>(); // 右侧出来 header 以下的区域
 const mdContainerRef = ref<HTMLDivElement>(); // markdown 的容器，用来滚动到底下的
@@ -30,12 +31,14 @@ let markMap: Markmap | null = null;
 const transformer = new Transformer();
 let resizeObserver: null | ResizeObserver = null;
 const initialized = false;
+
+/** 初始化 */
 onMounted(() => {
   resizeObserver = new ResizeObserver(() => {
     contentAreaHeight.value = contentRef.value?.clientHeight || 0;
     // 先更新高度，再更新思维导图
     if (contentAreaHeight.value && !initialized) {
-      /** 初始化思维导图 */
+      // 初始化思维导图
       try {
         if (!markMap) {
           markMap = Markmap.create(svgRef.value!);
@@ -52,11 +55,15 @@ onMounted(() => {
     resizeObserver.observe(contentRef.value);
   }
 });
+
+/** 卸载 */
 onBeforeUnmount(() => {
   if (resizeObserver && contentRef.value) {
     resizeObserver.unobserve(contentRef.value);
   }
 });
+
+/** 监听 props 变化 */
 watch(props, ({ generatedContent, isGenerating, isEnd, isStart }) => {
   // 开始生成的时候清空一下 markdown 的内容
   if (isStart) {
@@ -84,6 +91,7 @@ function update() {
     console.error(error);
   }
 }
+
 /** 处理内容 */
 function processContent(text: string) {
   const arr: string[] = [];
@@ -98,6 +106,7 @@ function processContent(text: string) {
   }
   return arr.join('\n');
 }
+
 /** 下载图片：download SVG to png file */
 function downloadImage() {
   const svgElement = mindMapRef.value;
@@ -112,6 +121,7 @@ function downloadImage() {
     drawWithImageSize: false,
   });
 }
+
 defineExpose({
   scrollBottom() {
     mdContainerRef.value?.scrollTo(0, mdContainerRef.value?.scrollHeight);
@@ -135,7 +145,6 @@ defineExpose({
       </div>
     </template>
     <div ref="contentRef" class="hide-scroll-bar box-border h-full">
-      <!--展示 markdown 的容器，最终生成的是 html 字符串，直接用 v-html 嵌入-->
       <div
         v-if="isGenerating"
         ref="mdContainerRef"
@@ -146,7 +155,6 @@ defineExpose({
           v-html="html"
         ></div>
       </div>
-
       <div ref="mindMapRef" class="wh-full">
         <svg
           ref="svgRef"
diff --git a/apps/web-antd/src/views/ai/mindmap/manager/data.ts b/apps/web-antd/src/views/ai/mindmap/manager/data.ts
index 18e3e442f..967981d40 100644
--- a/apps/web-antd/src/views/ai/mindmap/manager/data.ts
+++ b/apps/web-antd/src/views/ai/mindmap/manager/data.ts
@@ -5,12 +5,9 @@ import type { SystemUserApi } from '#/api/system/user';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
 let userList: SystemUserApi.User[] = [];
-async function getUserData() {
-  userList = await getSimpleUserList();
-}
-
-getUserData();
+getSimpleUserList().then((data) => (userList = data));
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -23,12 +20,18 @@ export function useGridFormSchema(): VbenFormSchema[] {
         api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户',
+        allowClear: true,
       },
     },
     {
       fieldName: 'prompt',
       label: '提示词',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入提示词',
+        clearable: true,
+      },
     },
     {
       fieldName: 'createTime',
diff --git a/apps/web-antd/src/views/ai/mindmap/manager/index.vue b/apps/web-antd/src/views/ai/mindmap/manager/index.vue
index ca4426a23..b952e87eb 100644
--- a/apps/web-antd/src/views/ai/mindmap/manager/index.vue
+++ b/apps/web-antd/src/views/ai/mindmap/manager/index.vue
@@ -2,8 +2,6 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiMindmapApi } from '#/api/ai/mindmap';
 
-import { nextTick, ref } from 'vue';
-
 import { DocAlert, Page, useVbenDrawer } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
@@ -12,21 +10,21 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteMindMap, getMindMapPage } from '#/api/ai/mindmap';
 import { $t } from '#/locales';
 
-import Right from '../index/modules/Right.vue';
+import Right from '../index/modules/right.vue';
 import { useGridColumns, useGridFormSchema } from './data';
 
-const previewContent = ref('');
 const [Drawer, drawerApi] = useVbenDrawer({
   header: false,
   footer: false,
   destroyOnClose: true,
 });
+
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
+/** 删除思维导图记录 */
 async function handleDelete(row: AiMindmapApi.MindMap) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
@@ -34,14 +32,18 @@ async function handleDelete(row: AiMindmapApi.MindMap) {
   });
   try {
     await deleteMindMap(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
+
+/** 预览思维导图 */
+async function openPreview(row: AiMindmapApi.MindMap) {
+  drawerApi.setData(row.generatedContent).open();
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -63,6 +65,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -70,11 +73,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<AiMindmapApi.MindMap>,
 });
-async function openPreview(row: AiMindmapApi.MindMap) {
-  previewContent.value = row.generatedContent;
-  drawerApi.open();
-  await nextTick();
-}
 </script>
 
 <template>
@@ -82,9 +80,10 @@ async function openPreview(row: AiMindmapApi.MindMap) {
     <template #doc>
       <DocAlert title="AI 思维导图" url="https://doc.iocoder.cn/ai/mindmap/" />
     </template>
+
     <Drawer class="w-3/5">
       <Right
-        :generated-content="previewContent"
+        :generated-content="drawerApi.getData() as any"
         :is-end="true"
         :is-generating="false"
         :is-start="false"
@@ -99,6 +98,7 @@ async function openPreview(row: AiMindmapApi.MindMap) {
               type: 'link',
               icon: ACTION_ICON.EDIT,
               auth: ['ai:api-key:update'],
+              disabled: !row.generatedContent,
               onClick: openPreview.bind(null, row),
             },
             {
diff --git a/apps/web-antd/src/views/ai/model/apiKey/data.ts b/apps/web-antd/src/views/ai/model/apiKey/data.ts
index cd78bfe38..47b36d59f 100644
--- a/apps/web-antd/src/views/ai/model/apiKey/data.ts
+++ b/apps/web-antd/src/views/ai/model/apiKey/data.ts
@@ -5,6 +5,7 @@ import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -25,24 +26,33 @@ export function useFormSchema(): VbenFormSchema[] {
         options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
         allowClear: true,
       },
-      rules: z.string().min(1, { message: '请输入平台' }),
+      rules: 'required',
     },
     {
       component: 'Input',
       fieldName: 'name',
       label: '名称',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入名称',
+      },
     },
     {
       component: 'Input',
       fieldName: 'apiKey',
       label: '密钥',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入密钥',
+      },
     },
     {
       component: 'Input',
       fieldName: 'url',
       label: '自定义 API URL',
+      componentProps: {
+        placeholder: '请输入自定义 API URL',
+      },
     },
     {
       fieldName: 'status',
@@ -65,6 +75,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'platform',
@@ -72,6 +86,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         allowClear: true,
+        placeholder: '请选择平台',
         options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
       },
     },
@@ -81,6 +96,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         allowClear: true,
+        placeholder: '请选择状态',
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       },
     },
@@ -97,18 +113,22 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         name: 'CellDict',
         props: { type: DICT_TYPE.AI_PLATFORM },
       },
+      minWidth: 100,
     },
     {
       field: 'name',
       title: '名称',
+      minWidth: 120,
     },
     {
       field: 'apiKey',
       title: '密钥',
+      minWidth: 140,
     },
     {
       field: 'url',
       title: '自定义 API URL',
+      minWidth: 180,
     },
     {
       field: 'status',
@@ -117,6 +137,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
+      minWidth: 80,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/ai/model/apiKey/index.vue b/apps/web-antd/src/views/ai/model/apiKey/index.vue
index aab147869..1746ba49e 100644
--- a/apps/web-antd/src/views/ai/model/apiKey/index.vue
+++ b/apps/web-antd/src/views/ai/model/apiKey/index.vue
@@ -23,27 +23,25 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建 */
+/** 创建 API 密钥 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑 */
+/** 编辑 API 密钥 */
 function handleEdit(row: AiModelApiKeyApi.ApiKey) {
   formModalApi.setData(row).open();
 }
 
-/** 删除 */
+/** 删除 API 密钥 */
 async function handleDelete(row: AiModelApiKeyApi.ApiKey) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteApiKey(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteApiKey(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/ai/model/apiKey/modules/form.vue b/apps/web-antd/src/views/ai/model/apiKey/modules/form.vue
index 85985ae83..21f21f305 100644
--- a/apps/web-antd/src/views/ai/model/apiKey/modules/form.vue
+++ b/apps/web-antd/src/views/ai/model/apiKey/modules/form.vue
@@ -27,7 +27,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 100,
+    labelWidth: 120,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/ai/model/chatRole/data.ts b/apps/web-antd/src/views/ai/model/chatRole/data.ts
index 668fe8254..28f809ca9 100644
--- a/apps/web-antd/src/views/ai/model/chatRole/data.ts
+++ b/apps/web-antd/src/views/ai/model/chatRole/data.ts
@@ -8,6 +8,7 @@ import { z } from '#/adapter/form';
 import { getSimpleKnowledgeList } from '#/api/ai/knowledge/knowledge';
 import { getModelSimpleList } from '#/api/ai/model/model';
 import { getToolSimpleList } from '#/api/ai/model/tool';
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -32,6 +33,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '角色名称',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入角色名称',
+      },
     },
     {
       component: 'ImageUpload',
@@ -62,6 +66,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'category',
       label: '角色类别',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入角色类别',
+      },
       dependencies: {
         triggerFields: ['formType'],
         show: (values) => {
@@ -113,6 +120,17 @@ export function useFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
+    {
+      fieldName: 'mcpClientNames',
+      label: '引用 MCP',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择 MCP',
+        options: getDictOptions(DICT_TYPE.AI_MCP_CLIENT_NAME, 'string'),
+        mode: 'multiple',
+        allowClear: true,
+      },
+    },
     {
       fieldName: 'publicStatus',
       label: '是否公开',
@@ -137,7 +155,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入角色排序',
-        class: 'w-full',
       },
       dependencies: {
         triggerFields: ['formType'],
@@ -254,6 +271,16 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
           : `引用${cellValue.length}个`;
       },
     },
+    {
+      title: 'MCP',
+      field: 'mcpClientNames',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return !cellValue || cellValue.length === 0
+          ? '-'
+          : `引用${cellValue.length}个`;
+      },
+    },
     {
       field: 'publicStatus',
       title: '是否公开',
diff --git a/apps/web-antd/src/views/ai/model/chatRole/index.vue b/apps/web-antd/src/views/ai/model/chatRole/index.vue
index a0441b94d..bbb940f70 100644
--- a/apps/web-antd/src/views/ai/model/chatRole/index.vue
+++ b/apps/web-antd/src/views/ai/model/chatRole/index.vue
@@ -23,27 +23,25 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建 */
+/** 创建聊天角色 */
 function handleCreate() {
   formModalApi.setData({ formType: 'create' }).open();
 }
 
-/** 编辑 */
+/** 编辑聊天角色 */
 function handleEdit(row: AiModelChatRoleApi.ChatRole) {
   formModalApi.setData({ formType: 'update', ...row }).open();
 }
 
-/** 删除 */
+/** 删除聊天角色 */
 async function handleDelete(row: AiModelChatRoleApi.ChatRole) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteChatRole(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteChatRole(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/ai/model/chatRole/modules/form.vue b/apps/web-antd/src/views/ai/model/chatRole/modules/form.vue
index f1d3ee481..8388f9740 100644
--- a/apps/web-antd/src/views/ai/model/chatRole/modules/form.vue
+++ b/apps/web-antd/src/views/ai/model/chatRole/modules/form.vue
@@ -82,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/ai/model/model/data.ts b/apps/web-antd/src/views/ai/model/model/data.ts
index cec6ae67e..1ef554c59 100644
--- a/apps/web-antd/src/views/ai/model/model/data.ts
+++ b/apps/web-antd/src/views/ai/model/model/data.ts
@@ -8,12 +8,9 @@ import { getDictOptions } from '@vben/hooks';
 import { z } from '#/adapter/form';
 import { getApiKeySimpleList } from '#/api/ai/model/apiKey';
 
+/** 关联数据 */
 let apiKeyList: AiModelApiKeyApi.ApiKey[] = [];
-async function getApiKeyList() {
-  apiKeyList = await getApiKeySimpleList();
-}
-
-getApiKeyList();
+getApiKeySimpleList().then((data) => (apiKeyList = data));
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -35,7 +32,7 @@ export function useFormSchema(): VbenFormSchema[] {
         options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
         allowClear: true,
       },
-      rules: z.string().min(1, { message: '请输入平台' }),
+      rules: 'required',
     },
     {
       fieldName: 'type',
@@ -56,7 +53,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: 'API 秘钥',
       component: 'ApiSelect',
       componentProps: {
-        placeholder: '请选择API 秘钥',
+        placeholder: '请选择 API 秘钥',
         api: getApiKeySimpleList,
         labelField: 'name',
         valueField: 'id',
@@ -69,12 +66,18 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '模型名字',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入模型名字',
+      },
     },
     {
       component: 'Input',
       fieldName: 'model',
       label: '模型标识',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入模型标识',
+      },
     },
     {
       fieldName: 'sort',
@@ -82,7 +85,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入模型排序',
-        class: 'w-full',
       },
       rules: 'required',
     },
@@ -103,7 +105,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入温度参数',
-        class: 'w-full',
         min: 0,
         max: 2,
       },
@@ -123,7 +124,6 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         max: 8192,
         placeholder: '请输入回复数 Token 数',
-        class: 'w-full',
       },
       dependencies: {
         triggerFields: ['type'],
@@ -141,7 +141,6 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         max: 20,
         placeholder: '请输入上下文数量',
-        class: 'w-full',
       },
       dependencies: {
         triggerFields: ['type'],
@@ -161,16 +160,28 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '模型名字',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入模型名字',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'model',
       label: '模型标识',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入模型标识',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'platform',
       label: '模型平台',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入模型平台',
+        allowClear: true,
+      },
     },
   ];
 }
@@ -233,7 +244,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'temperature',
       title: '温度参数',
-      minWidth: 80,
+      minWidth: 100,
     },
     {
       title: '回复数 Token 数',
@@ -243,7 +254,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       title: '上下文数量',
       field: 'maxContexts',
-      minWidth: 100,
+      minWidth: 120,
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/ai/model/model/index.vue b/apps/web-antd/src/views/ai/model/model/index.vue
index 546362ca7..158d7b43a 100644
--- a/apps/web-antd/src/views/ai/model/model/index.vue
+++ b/apps/web-antd/src/views/ai/model/model/index.vue
@@ -23,27 +23,25 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建 */
+/** 创建模型配置 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑 */
+/** 编辑模型配置 */
 function handleEdit(row: AiModelModelApi.Model) {
   formModalApi.setData(row).open();
 }
 
-/** 删除 */
+/** 删除模型配置 */
 async function handleDelete(row: AiModelModelApi.Model) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteModel(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteModel(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/ai/model/model/modules/form.vue b/apps/web-antd/src/views/ai/model/model/modules/form.vue
index 4baaf3b2b..1f5f9a8f1 100644
--- a/apps/web-antd/src/views/ai/model/model/modules/form.vue
+++ b/apps/web-antd/src/views/ai/model/model/modules/form.vue
@@ -77,7 +77,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/ai/model/tool/data.ts b/apps/web-antd/src/views/ai/model/tool/data.ts
index 1dd51850b..0c9f020f5 100644
--- a/apps/web-antd/src/views/ai/model/tool/data.ts
+++ b/apps/web-antd/src/views/ai/model/tool/data.ts
@@ -22,6 +22,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '工具名称',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入工具名称',
+      },
     },
     {
       component: 'Textarea',
@@ -52,6 +55,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '工具名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入工具名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
@@ -60,6 +67,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         allowClear: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
       },
     },
     {
@@ -80,14 +88,17 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '工具编号',
+      minWidth: 100,
     },
     {
       field: 'name',
       title: '工具名称',
+      minWidth: 120,
     },
     {
       field: 'description',
       title: '工具描述',
+      minWidth: 140,
     },
     {
       field: 'status',
@@ -96,6 +107,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
+      minWidth: 80,
     },
     {
       field: 'createTime',
diff --git a/apps/web-antd/src/views/ai/model/tool/index.vue b/apps/web-antd/src/views/ai/model/tool/index.vue
index 7521222f6..a6c27cd85 100644
--- a/apps/web-antd/src/views/ai/model/tool/index.vue
+++ b/apps/web-antd/src/views/ai/model/tool/index.vue
@@ -23,27 +23,25 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建 */
+/** 创建工具 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑 */
+/** 编辑工具 */
 function handleEdit(row: AiModelToolApi.Tool) {
   formModalApi.setData(row).open();
 }
 
-/** 删除 */
+/** 删除工具 */
 async function handleDelete(row: AiModelToolApi.Tool) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteTool(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteTool(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
diff --git a/apps/web-antd/src/views/ai/model/tool/modules/form.vue b/apps/web-antd/src/views/ai/model/tool/modules/form.vue
index eeb720d13..3e3c90e78 100644
--- a/apps/web-antd/src/views/ai/model/tool/modules/form.vue
+++ b/apps/web-antd/src/views/ai/model/tool/modules/form.vue
@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/ai/music/manager/data.ts b/apps/web-antd/src/views/ai/music/manager/data.ts
index 09ff1025d..68a96227e 100644
--- a/apps/web-antd/src/views/ai/music/manager/data.ts
+++ b/apps/web-antd/src/views/ai/music/manager/data.ts
@@ -8,12 +8,9 @@ import { getDictOptions } from '@vben/hooks';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
 let userList: SystemUserApi.User[] = [];
-async function getUserData() {
-  userList = await getSimpleUserList();
-}
-
-getUserData();
+getSimpleUserList().then((data) => (userList = data));
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -26,18 +23,25 @@ export function useGridFormSchema(): VbenFormSchema[] {
         api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户编号',
+        allowClear: true,
       },
     },
     {
       fieldName: 'title',
       label: '音乐名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入音乐名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
       label: '绘画状态',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择绘画状态',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.AI_MUSIC_STATUS, 'number'),
       },
@@ -47,6 +51,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '生成模式',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择生成模式',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.AI_GENERATE_MODE, 'number'),
       },
@@ -65,15 +70,21 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '是否发布',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        placeholder: '请选择是否发布',
         allowClear: true,
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
       },
     },
   ];
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onPublicStatusChange?: (
+    newStatus: boolean,
+    row: any,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -154,7 +165,16 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       minWidth: 100,
       title: '是否发布',
-      slots: { default: 'publicStatus' },
+      field: 'publicStatus',
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onPublicStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: true,
+          unCheckedValue: false,
+        },
+      },
     },
     {
       field: 'taskId',
diff --git a/apps/web-antd/src/views/ai/music/manager/index.vue b/apps/web-antd/src/views/ai/music/manager/index.vue
index ecab1778e..586ab19e1 100644
--- a/apps/web-antd/src/views/ai/music/manager/index.vue
+++ b/apps/web-antd/src/views/ai/music/manager/index.vue
@@ -3,9 +3,8 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiMusicApi } from '#/api/ai/music';
 
 import { confirm, DocAlert, Page } from '@vben/common-ui';
-import { AiMusicStatusEnum } from '@vben/constants';
 
-import { Button, message, Switch } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteMusic, getMusicPage, updateMusic } from '#/api/ai/music';
@@ -18,7 +17,7 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
+/** 删除音乐记录 */
 async function handleDelete(row: AiMusicApi.Music) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
@@ -26,36 +25,45 @@ async function handleDelete(row: AiMusicApi.Music) {
   });
   try {
     await deleteMusic(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
+
 /** 修改是否发布 */
-const handleUpdatePublicStatusChange = async (row: AiMusicApi.Music) => {
-  try {
-    // 修改状态的二次确认
-    const text = row.publicStatus ? '公开' : '私有';
-    await confirm(`确认要"${text}"该图片吗?`).then(async () => {
-      await updateMusic({
-        id: row.id,
-        publicStatus: row.publicStatus,
+async function handleUpdatePublicStatusChange(
+  newStatus: boolean,
+  row: AiMusicApi.Music,
+): Promise<boolean | undefined> {
+  const text = newStatus ? '公开' : '私有';
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确认要将该音乐切换为【${text}】吗？`,
+    })
+      .then(async () => {
+        // 更新音乐状态
+        await updateMusic({
+          id: row.id,
+          publicStatus: newStatus,
+        });
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
       });
-      handleRefresh();
-    });
-  } catch {
-    row.publicStatus = !row.publicStatus;
-  }
-};
+  });
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleUpdatePublicStatusChange),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -71,6 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -119,13 +128,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           封面
         </Button>
       </template>
-      <template #publicStatus="{ row }">
-        <Switch
-          v-model:checked="row.publicStatus"
-          @change="handleUpdatePublicStatusChange(row)"
-          :disabled="row.status !== AiMusicStatusEnum.SUCCESS"
-        />
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/ai/write/index/index.vue b/apps/web-antd/src/views/ai/write/index/index.vue
index b2355af0e..a907d0dfa 100644
--- a/apps/web-antd/src/views/ai/write/index/index.vue
+++ b/apps/web-antd/src/views/ai/write/index/index.vue
@@ -3,28 +3,24 @@ import type { AiWriteApi } from '#/api/ai/write';
 
 import { nextTick, ref } from 'vue';
 
-import { alert, Page } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 import { WriteExample } from '@vben/constants';
 
+import { message } from 'ant-design-vue';
+
 import { writeStream } from '#/api/ai/write';
 
-import Left from './components/Left.vue';
-import Right from './components/Right.vue';
+import Left from './modules/left.vue';
+import Right from './modules/right.vue';
 
 const writeResult = ref(''); // 写作结果
 const isWriting = ref(false); // 是否正在写作中
 const abortController = ref<AbortController>(); // // 写作进行中 abort 控制器(控制 stream 写作)
 
-/** 停止 stream 生成 */
-function stopStream() {
-  abortController.value?.abort();
-  isWriting.value = false;
-}
+const rightRef = ref<InstanceType<typeof Right>>(); // 写作面板
 
-/** 执行写作 */
-const rightRef = ref<InstanceType<typeof Right>>();
-
-function submit(data: Partial<AiWriteApi.Write>) {
+/** 提交写作 */
+function handleSubmit(data: Partial<AiWriteApi.Write>) {
   abortController.value = new AbortController();
   writeResult.value = '';
   isWriting.value = true;
@@ -33,8 +29,8 @@ function submit(data: Partial<AiWriteApi.Write>) {
     onMessage: async (res: any) => {
       const { code, data, msg } = JSON.parse(res.data);
       if (code !== 0) {
-        alert(`写作异常! ${msg}`);
-        stopStream();
+        message.error(`写作异常! ${msg}`);
+        handleStopStream();
         return;
       }
       writeResult.value = writeResult.value + data;
@@ -43,23 +39,29 @@ function submit(data: Partial<AiWriteApi.Write>) {
       rightRef.value?.scrollToBottom();
     },
     ctrl: abortController.value,
-    onClose: stopStream,
+    onClose: handleStopStream,
     onError: (error: any) => {
       console.error('写作异常', error);
-      stopStream();
+      handleStopStream();
       // 需要抛出异常，禁止重试
       throw error;
     },
   });
 }
 
+/** 停止 stream 生成 */
+function handleStopStream() {
+  abortController.value?.abort();
+  isWriting.value = false;
+}
+
 /** 点击示例触发 */
 function handleExampleClick(type: keyof typeof WriteExample) {
   writeResult.value = WriteExample[type].data;
 }
 
 /** 点击重置的时候清空写作的结果*/
-function reset() {
+function handleReset() {
   writeResult.value = '';
 }
 </script>
@@ -70,13 +72,13 @@ function reset() {
       <Left
         :is-writing="isWriting"
         class="mr-4 h-full rounded-lg"
-        @submit="submit"
-        @reset="reset"
+        @submit="handleSubmit"
+        @reset="handleReset"
         @example="handleExampleClick"
       />
       <Right
         :is-writing="isWriting"
-        @stop-stream="stopStream"
+        @stop-stream="handleStopStream"
         ref="rightRef"
         class="flex-grow"
         v-model:content="writeResult"
diff --git a/apps/web-antd/src/views/ai/write/index/components/Left.vue b/apps/web-antd/src/views/ai/write/index/modules/left.vue
similarity index 91%
rename from apps/web-antd/src/views/ai/write/index/components/Left.vue
rename to apps/web-antd/src/views/ai/write/index/modules/left.vue
index f6ae5f647..b84b6a1c0 100644
--- a/apps/web-antd/src/views/ai/write/index/components/Left.vue
+++ b/apps/web-antd/src/views/ai/write/index/modules/left.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// TODO @gjd：应该是 modules 模块，然后小写
 import type { AiWriteApi } from '#/api/ai/write';
 
 import { ref } from 'vue';
@@ -11,7 +10,7 @@ import { IconifyIcon } from '@vben/icons';
 import { createReusableTemplate } from '@vueuse/core';
 import { Button, message, Textarea } from 'ant-design-vue';
 
-import Tag from './Tag.vue';
+import Tag from './tag.vue';
 
 type TabType = AiWriteApi.Write['type'];
 
@@ -34,6 +33,7 @@ function omit(obj: Record<string, any>, keysToOmit: string[]) {
   }
   return result;
 }
+
 /** 点击示例的时候，将定义好的文章作为示例展示出来 */
 function example(type: 'reply' | 'write') {
   formData.value = {
@@ -79,13 +79,11 @@ const initData: AiWriteApi.Write = {
   length: 1,
   format: 1,
 };
-
 const formData = ref<AiWriteApi.Write>({ ...initData });
+const recordFormData = {} as Record<AiWriteTypeEnum, AiWriteApi.Write>; // 用来记录切换之前所填写的数据，切换的时候给赋值回来
 
-/** 用来记录切换之前所填写的数据，切换的时候给赋值回来 */
-const recordFormData = {} as Record<AiWriteTypeEnum, AiWriteApi.Write>;
-/** 切换tab */
-function switchTab(value: TabType) {
+/** 切换 tab */
+function handleSwitchTab(value: TabType) {
   if (value !== selectedTab.value) {
     // 保存之前的久数据
     recordFormData[selectedTab.value] = formData.value;
@@ -96,8 +94,11 @@ function switchTab(value: TabType) {
 }
 
 /** 提交写作 */
-function submit() {
-  if (selectedTab.value === 2 && !formData.value.originalContent) {
+function handleSubmit() {
+  if (
+    selectedTab.value === AiWriteTypeEnum.REPLY &&
+    !formData.value.originalContent
+  ) {
     message.warning('请输入原文');
     return;
   }
@@ -105,12 +106,13 @@ function submit() {
     message.warning(`请输入${selectedTab.value === 1 ? '写作' : '回复'}内容`);
     return;
   }
+
   emit('submit', {
-    /** 撰写的时候没有 originalContent 字段*/
+    // 撰写的时候没有 originalContent 字段
     ...(selectedTab.value === 1
       ? omit(formData.value, ['originalContent'])
       : formData.value),
-    /** 使用选中 tab 值覆盖当前的 type 类型 */
+    // 使用选中 tab 值覆盖当前的 type 类型
     type: selectedTab.value,
   });
 }
@@ -156,7 +158,7 @@ function submit() {
             v-for="tab in tabs"
             :key="tab.value"
             :active="tab.value === selectedTab"
-            :item-click="() => switchTab(tab.value)"
+            :item-click="() => handleSwitchTab(tab.value)"
             :text="tab.text"
             class="relative z-20"
           />
@@ -167,7 +169,7 @@ function submit() {
       class="bg-card box-border h-full w-96 flex-grow overflow-y-auto px-7 pb-2 lg:block"
     >
       <div>
-        <template v-if="selectedTab === 1">
+        <template v-if="selectedTab === AiWriteTypeEnum.WRITING">
           <ReuseLabel
             :hint-click="() => example('write')"
             hint="示例"
@@ -181,7 +183,6 @@ function submit() {
             show-count
           />
         </template>
-
         <template v-else>
           <ReuseLabel
             :hint-click="() => example('reply')"
@@ -195,7 +196,6 @@ function submit() {
             placeholder="请输入原文"
             show-count
           />
-
           <ReuseLabel label="回复内容" />
           <Textarea
             v-model:value="formData.prompt"
@@ -231,7 +231,7 @@ function submit() {
           <Button :disabled="isWriting" class="mr-2" @click="reset">
             重置
           </Button>
-          <Button type="primary" :loading="isWriting" @click="submit">
+          <Button type="primary" :loading="isWriting" @click="handleSubmit">
             生成
           </Button>
         </div>
diff --git a/apps/web-antd/src/views/ai/write/index/components/Right.vue b/apps/web-antd/src/views/ai/write/index/modules/right.vue
similarity index 89%
rename from apps/web-antd/src/views/ai/write/index/components/Right.vue
rename to apps/web-antd/src/views/ai/write/index/modules/right.vue
index bf80dfb56..44f97ef6e 100644
--- a/apps/web-antd/src/views/ai/write/index/components/Right.vue
+++ b/apps/web-antd/src/views/ai/write/index/modules/right.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// TODO @gjd：应该是 modules 模块，然后小写
 import { computed, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
@@ -9,16 +8,15 @@ import { Button, Card, message, Textarea } from 'ant-design-vue';
 
 const props = defineProps({
   content: {
-    // 生成的结果
     type: String,
     default: '',
-  },
+  }, // 生成的结果
   isWriting: {
-    // 是否正在生成文章
     type: Boolean,
     default: false,
-  },
+  }, // 是否正在生成文章
 });
+
 const emits = defineEmits(['update:content', 'stopStream']);
 const { copied, copy } = useClipboard();
 
@@ -58,7 +56,6 @@ watch(copied, (val) => {
     <template #title>
       <h3 class="m-0 flex shrink-0 items-center justify-between px-7">
         <span>预览</span>
-        <!-- 展示在右上角 -->
         <Button
           type="primary"
           v-show="showCopy"
@@ -75,12 +72,11 @@ watch(copied, (val) => {
       class="hide-scroll-bar box-border h-full overflow-y-auto"
     >
       <div
-        class="bg-card relative box-border min-h-full w-full flex-grow p-3 sm:p-7"
+        class="bg-card relative box-border min-h-full w-full flex-grow p-2 sm:p-5"
       >
-        <!-- 终止生成内容的按钮 -->
         <Button
           v-show="isWriting"
-          class="absolute bottom-2 left-1/2 z-40 flex -translate-x-1/2 sm:bottom-5"
+          class="absolute bottom-1 left-1/2 z-40 flex -translate-x-1/2 sm:bottom-2"
           @click="emits('stopStream')"
           size="small"
         >
@@ -94,7 +90,7 @@ watch(copied, (val) => {
         <Textarea
           id="inputId"
           v-model:value="compContent"
-          auto-size
+          :auto-size="true"
           :bordered="false"
           placeholder="生成的内容……"
         />
@@ -130,7 +126,7 @@ watch(copied, (val) => {
   }
 }
 
-// markmap的tool样式覆盖
+// markmap 的 tool 样式覆盖
 :deep(.markmap) {
   width: 100%;
 }
diff --git a/apps/web-antd/src/views/ai/write/index/components/Tag.vue b/apps/web-antd/src/views/ai/write/index/modules/tag.vue
similarity index 93%
rename from apps/web-antd/src/views/ai/write/index/components/Tag.vue
rename to apps/web-antd/src/views/ai/write/index/modules/tag.vue
index 3b1182d9a..f199a8dd1 100644
--- a/apps/web-antd/src/views/ai/write/index/components/Tag.vue
+++ b/apps/web-antd/src/views/ai/write/index/modules/tag.vue
@@ -1,6 +1,5 @@
 <!-- 标签选项 -->
 <script setup lang="ts">
-// TODO @gjd：应该是 modules 模块，然后小写
 const props = withDefaults(
   defineProps<{
     [k: string]: any;
diff --git a/apps/web-antd/src/views/ai/write/manager/data.ts b/apps/web-antd/src/views/ai/write/manager/data.ts
index a2b514416..02f39e8e5 100644
--- a/apps/web-antd/src/views/ai/write/manager/data.ts
+++ b/apps/web-antd/src/views/ai/write/manager/data.ts
@@ -8,12 +8,9 @@ import { getDictOptions } from '@vben/hooks';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
 let userList: SystemUserApi.User[] = [];
-async function getUserData() {
-  userList = await getSimpleUserList();
-}
-
-getUserData();
+getSimpleUserList().then((data) => (userList = data));
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -26,6 +23,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
         api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户',
+        allowClear: true,
       },
     },
     {
@@ -34,6 +33,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         allowClear: true,
+        placeholder: '请选择写作类型',
         options: getDictOptions(DICT_TYPE.AI_WRITE_TYPE, 'number'),
       },
     },
@@ -43,7 +43,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         allowClear: true,
-        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'number'),
+        placeholder: '请选择平台',
+        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
       },
     },
     {
@@ -78,7 +79,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'type',
       title: '写作类型',
-      minWidth: 100,
+      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.AI_WRITE_TYPE },
diff --git a/apps/web-antd/src/views/ai/write/manager/index.vue b/apps/web-antd/src/views/ai/write/manager/index.vue
index 4d3f509ea..6921f23bb 100644
--- a/apps/web-antd/src/views/ai/write/manager/index.vue
+++ b/apps/web-antd/src/views/ai/write/manager/index.vue
@@ -17,22 +17,21 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 删除 */
-async function handleDelete(row: AiWriteApi.AiWritePageReq) {
+/** 删除写作记录 */
+async function handleDelete(row: AiWriteApi.Write) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
     duration: 0,
   });
   try {
-    await deleteWrite(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    await deleteWrite(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -54,12 +53,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<AiWriteApi.AiWritePageReq>,
+  } as VxeTableGridOptions<AiWriteApi.Write>,
 });
 </script>
 
diff --git a/apps/web-antd/src/views/crm/clue/detail/index.vue b/apps/web-antd/src/views/crm/clue/detail/index.vue
index 788db526f..ddc813fd2 100644
--- a/apps/web-antd/src/views/crm/clue/detail/index.vue
+++ b/apps/web-antd/src/views/crm/clue/detail/index.vue
@@ -89,13 +89,11 @@ async function handleTransform(): Promise<boolean | undefined> {
       content: '确定将该线索转化为客户吗？',
     })
       .then(async () => {
-        const res = await transformClue(clueId.value);
-        if (res) {
-          message.success('转化客户成功');
-          resolve(true);
-        } else {
-          reject(new Error('转化失败'));
-        }
+        // 转化为客户
+        await transformClue(clueId.value);
+        // 提示并返回成功
+        message.success('转化客户成功');
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/crm/customer/detail/index.vue b/apps/web-antd/src/views/crm/customer/detail/index.vue
index df959a9a0..f8c74ec4b 100644
--- a/apps/web-antd/src/views/crm/customer/detail/index.vue
+++ b/apps/web-antd/src/views/crm/customer/detail/index.vue
@@ -107,13 +107,11 @@ function handleLock(lockStatus: boolean): Promise<boolean | undefined> {
       content: `确定锁定客户【${customer.value.name}】吗？`,
     })
       .then(async () => {
-        const res = await lockCustomer(customerId.value, lockStatus);
-        if (res) {
-          message.success(lockStatus ? '锁定客户成功' : '解锁客户成功');
-          resolve(true);
-        } else {
-          reject(new Error(lockStatus ? '锁定客户失败' : '解锁客户失败'));
-        }
+        // 锁定客户
+        await lockCustomer(customerId.value, lockStatus);
+        // 提示并返回成功
+        message.success(lockStatus ? '锁定客户成功' : '解锁客户成功');
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
@@ -128,13 +126,11 @@ function handleReceive(): Promise<boolean | undefined> {
       content: `确定领取客户【${customer.value.name}】吗？`,
     })
       .then(async () => {
-        const res = await receiveCustomer([customerId.value]);
-        if (res) {
-          message.success('领取客户成功');
-          resolve(true);
-        } else {
-          reject(new Error('领取客户失败'));
-        }
+        // 领取客户
+        await receiveCustomer([customerId.value]);
+        // 提示并返回成功
+        message.success('领取客户成功');
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
@@ -154,13 +150,11 @@ function handlePutPool(): Promise<boolean | undefined> {
       content: `确定将客户【${customer.value.name}】放入公海吗？`,
     })
       .then(async () => {
-        const res = await putCustomerPool(customerId.value);
-        if (res) {
-          message.success('放入公海成功');
-          resolve(true);
-        } else {
-          reject(new Error('放入公海失败'));
-        }
+        // 放入公海
+        await putCustomerPool(customerId.value);
+        // 提示并返回成功
+        message.success('放入公海成功');
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
@@ -176,16 +170,11 @@ async function handleUpdateDealStatus(): Promise<boolean | undefined> {
       content: `确定更新成交状态为【${dealStatus ? '已成交' : '未成交'}】吗？`,
     })
       .then(async () => {
-        const res = await updateCustomerDealStatus(
-          customerId.value,
-          dealStatus,
-        );
-        if (res) {
-          message.success('更新成交状态成功');
-          resolve(true);
-        } else {
-          reject(new Error('更新成交状态失败'));
-        }
+        // 更新成交状态
+        await updateCustomerDealStatus(customerId.value, dealStatus);
+        // 提示并返回成功
+        message.success('更新成交状态成功');
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/erp/finance/account/index.vue b/apps/web-antd/src/views/erp/finance/account/index.vue
index 55dd6e697..9ef8f3f60 100644
--- a/apps/web-antd/src/views/erp/finance/account/index.vue
+++ b/apps/web-antd/src/views/erp/finance/account/index.vue
@@ -73,6 +73,7 @@ async function handleDefaultStatusChange(
       .then(async () => {
         // 更新默认状态
         await updateAccountDefaultStatus(row.id!, newStatus);
+        // 提示并返回成功
         message.success(`${text}默认成功`);
         resolve(true);
       })
diff --git a/apps/web-antd/src/views/erp/stock/warehouse/index.vue b/apps/web-antd/src/views/erp/stock/warehouse/index.vue
index 58d931ed2..ea59edce1 100644
--- a/apps/web-antd/src/views/erp/stock/warehouse/index.vue
+++ b/apps/web-antd/src/views/erp/stock/warehouse/index.vue
@@ -71,6 +71,7 @@ async function handleDefaultStatusChange(
       .then(async () => {
         // 更新默认状态
         await updateWarehouseDefaultStatus(row.id!, newStatus);
+        // 提示并返回成功
         message.success(`${text}默认成功`);
         resolve(true);
       })
diff --git a/apps/web-antd/src/views/mall/product/comment/index.vue b/apps/web-antd/src/views/mall/product/comment/index.vue
index c9311af7d..8a5071615 100644
--- a/apps/web-antd/src/views/mall/product/comment/index.vue
+++ b/apps/web-antd/src/views/mall/product/comment/index.vue
@@ -70,17 +70,13 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateCommentVisible({
+        await updateCommentVisible({
           id: row.id!,
           visible: newStatus,
         });
-        if (res) {
-          // 提示并返回成功
-          message.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error($t('ui.actionMessage.operationFailed')));
-        }
+        // 提示并返回成功
+        message.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/mall/product/spu/index.vue b/apps/web-antd/src/views/mall/product/spu/index.vue
index 43b87cbe4..dbeefd6d7 100644
--- a/apps/web-antd/src/views/mall/product/spu/index.vue
+++ b/apps/web-antd/src/views/mall/product/spu/index.vue
@@ -115,17 +115,13 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateStatus({
+        await updateStatus({
           id: row.id!,
           status: newStatus,
         });
-        if (res) {
-          // 提示并返回成功
-          message.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error($t('ui.actionMessage.operationFailed')));
-        }
+        // 提示并返回成功
+        message.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
index 192dfab15..1ce5abf52 100644
--- a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { PREDEFINE_COLORS } from '@vben/constants';
+// import { PREDEFINE_COLORS } from '@vben/constants';
 
 import { Input, InputGroup } from 'ant-design-vue';
 
@@ -29,7 +29,9 @@ const color = computed({
 
 <template>
   <InputGroup compact>
+    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
     <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
+    -->
     <Input v-model:value="color" class="flex-1" />
   </InputGroup>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
index d6b5d4396..b193e8366 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
@@ -5,6 +5,8 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Image } from 'ant-design-vue';
+
 /** 弹窗广告 */
 defineOptions({ name: 'Popover' });
 // 定义属性
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
index 0612a37d2..89b74ad2e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
@@ -5,7 +5,7 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { message } from 'ant-design-vue';
+import { Image, message } from 'ant-design-vue';
 
 /** 悬浮按钮 */
 defineOptions({ name: 'FloatingActionButton' });
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
index edc7751fd..4f4702812 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -5,6 +5,8 @@ import { ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
 
+import { Button, Form, FormItem, Typography } from 'ant-design-vue';
+
 import UploadImg from '#/components/upload/image-upload.vue';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
@@ -28,8 +30,8 @@ const handleOpenEditDialog = () => {
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
-    <ElForm label-width="80px" :model="formData" class="mt-2">
-      <ElFormItem label="上传图片" prop="imgUrl">
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData" class="mt-2">
+      <FormItem label="上传图片" prop="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
           height="50px"
@@ -38,15 +40,15 @@ const handleOpenEditDialog = () => {
           :show-description="false"
         >
           <template #tip>
-            <ElText type="info" size="small"> 推荐宽度 750</ElText>
+            <Typography.Text type="secondary" class="text-xs"> 推荐宽度 750</Typography.Text>
           </template>
         </UploadImg>
-      </ElFormItem>
-    </ElForm>
+      </FormItem>
+    </Form>
 
-    <ElButton type="primary" plain class="w-full" @click="handleOpenEditDialog">
+    <Button type="primary" class="w-full" @click="handleOpenEditDialog">
       设置热区
-    </ElButton>
+    </Button>
   </ComponentContainerProperty>
   <!-- 热区编辑对话框 -->
   <HotZoneEditDialog
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
index 09e35204c..1b54f850c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
@@ -3,6 +3,8 @@ import type { ImageBarProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
+import { Form, FormItem } from 'ant-design-vue';
+
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput } from '#/views/mall/promotion/components';
 
@@ -18,8 +20,8 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <ElForm label-width="80px" :model="formData">
-      <ElFormItem label="上传图片" prop="imgUrl">
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+      <FormItem label="上传图片" prop="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
           draggable="false"
@@ -30,11 +32,11 @@ const formData = useVModel(props, 'modelValue', emit);
         >
           <template #tip> 建议宽度750 </template>
         </UploadImg>
-      </ElFormItem>
-      <ElFormItem label="链接" prop="url">
+      </FormItem>
+      <FormItem label="链接" prop="url">
         <AppLinkInput v-model="formData.url" />
-      </ElFormItem>
-    </ElForm>
+      </FormItem>
+    </Form>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
index 45a92daec..c1506a4ca 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
@@ -3,12 +3,13 @@ import type { MenuGridProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 import {
-  ElCard,
-  ElForm,
-  ElFormItem,
-  ElRadio,
-  ElRadioGroup,
-  ElSwitch,
+  Card,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Switch,
+} from 'ant-design-vue';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
@@ -27,21 +28,21 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
-    <ElForm label-width="80px" :model="formData" class="mt-2">
-      <ElFormItem label="每行数量" prop="column">
-        <ElRadioGroup v-model="formData.column">
-          <ElRadio :value="3">3个</ElRadio>
-          <ElRadio :value="4">4个</ElRadio>
-        </ElRadioGroup>
-      </ElFormItem>
+    <Form label-width="80px" :model="formData" class="mt-2">
+      <FormItem label="每行数量" prop="column">
+        <RadioGroup v-model="formData.column">
+          <Radio :value="3">3个</Radio>
+          <Radio :value="4">4个</Radio>
+        </RadioGroup>
+      </FormItem>
 
-      <ElCard header="菜单设置" class="property-group" shadow="never">
+      <Card header="菜单设置" class="property-group" shadow="never">
         <Draggable
           v-model="formData.list"
           :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
         >
           <template #default="{ element }">
-            <ElFormItem label="图标" prop="iconUrl">
+            <FormItem label="图标" prop="iconUrl">
               <UploadImg
                 v-model="element.iconUrl"
                 height="80px"
@@ -50,40 +51,40 @@ const formData = useVModel(props, 'modelValue', emit);
               >
                 <template #tip> 建议尺寸：44 * 44 </template>
               </UploadImg>
-            </ElFormItem>
-            <ElFormItem label="标题" prop="title">
+            </FormItem>
+            <FormItem label="标题" prop="title">
               <InputWithColor
                 v-model="element.title"
                 v-model:color="element.titleColor"
               />
-            </ElFormItem>
-            <ElFormItem label="副标题" prop="subtitle">
+            </FormItem>
+            <FormItem label="副标题" prop="subtitle">
               <InputWithColor
                 v-model="element.subtitle"
                 v-model:color="element.subtitleColor"
               />
-            </ElFormItem>
-            <ElFormItem label="链接" prop="url">
+            </FormItem>
+            <FormItem label="链接" prop="url">
               <AppLinkInput v-model="element.url" />
-            </ElFormItem>
-            <ElFormItem label="显示角标" prop="badge.show">
-              <ElSwitch v-model="element.badge.show" />
-            </ElFormItem>
+            </FormItem>
+            <FormItem label="显示角标" prop="badge.show">
+              <Switch v-model="element.badge.show" />
+            </FormItem>
             <template v-if="element.badge.show">
-              <ElFormItem label="角标内容" prop="badge.text">
+              <FormItem label="角标内容" prop="badge.text">
                 <InputWithColor
                   v-model="element.badge.text"
                   v-model:color="element.badge.textColor"
                 />
-              </ElFormItem>
-              <ElFormItem label="背景颜色" prop="badge.bgColor">
+              </FormItem>
+              <FormItem label="背景颜色" prop="badge.bgColor">
                 <ColorInput v-model="element.badge.bgColor" />
-              </ElFormItem>
+              </FormItem>
             </template>
           </template>
         </Draggable>
-      </ElCard>
-    </ElForm>
+      </Card>
+    </Form>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
index acfbb467f..2997b98dc 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
@@ -3,6 +3,8 @@ import type { MenuListProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Image } from 'ant-design-vue';
+
 /** 列表导航 */
 defineOptions({ name: 'MenuList' });
 defineProps<{ property: MenuListProperty }>();
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
index c71c2c528..d922eb64a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
@@ -1,4 +1,145 @@
 <script lang="ts" setup>
+import type { NavigationBarCellProperty } from '../config';
+
+import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/util';
+
+import { computed, ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import {
+  FormItem,
+  Input,
+  Radio,
+  RadioGroup,
+  Slider,
+} from 'ant-design-vue';
+
+import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  MagicCubeEditor,
+} from '#/views/mall/promotion/components';
+
+// 导航栏属性面板
+defineOptions({ name: 'NavigationBarCellProperty' });
+
+const props = defineProps({
+  isMp: {
+    type: Boolean,
+    default: true,
+  },
+  modelValue: {
+    type: Array as () => NavigationBarCellProperty[],
+    default: () => [],
+  },
+});
+const emit = defineEmits(['update:modelValue']);
+const cellList = useVModel(props, 'modelValue', emit);
+
+// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
+const cellCount = computed(() => (props.isMp ? 6 : 8));
+
+// 转换为Rect格式的数据
+const rectList = computed<Rect[]>(() => {
+  return cellList.value.map((cell) => ({
+    left: cell.left,
+    top: cell.top,
+    width: cell.width,
+    height: cell.height,
+    right: cell.left + cell.width,
+    bottom: cell.top + cell.height,
+  }));
+});
+
+// 选中的热区
+const selectedHotAreaIndex = ref(0);
+const handleHotAreaSelected = (
+  cellValue: NavigationBarCellProperty,
+  index: number,
+) => {
+  selectedHotAreaIndex.value = index;
+  if (!cellValue.type) {
+    cellValue.type = 'text';
+    cellValue.textColor = '#111111';
+  }
+};
+</script>
+
+<template>
+  <div class="h-40px flex items-center justify-center">
+    <MagicCubeEditor
+      v-model="rectList"
+      :cols="cellCount"
+      :cube-size="38"
+      :rows="1"
+      class="m-b-16px"
+      @hot-area-selected="handleHotAreaSelected"
+    />
+    <img
+      v-if="isMp"
+      alt=""
+      style="width: 76px; height: 30px"
+      :src="appNavBarMp"
+    />
+  </div>
+  <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
+    <template v-if="selectedHotAreaIndex === Number(cellIndex)">
+      <FormItem :label="`类型`">
+        <RadioGroup v-model:value="cell.type">
+          <Radio value="text">文字</Radio>
+          <Radio value="image">图片</Radio>
+          <Radio value="search">搜索框</Radio>
+        </RadioGroup>
+      </FormItem>
+      <!-- 1. 文字 -->
+      <template v-if="cell.type === 'text'">
+        <FormItem :label="`内容`">
+          <Input v-model:value="cell!.text" :maxlength="10" show-count />
+        </FormItem>
+        <FormItem :label="`颜色`">
+          <ColorInput v-model="cell!.textColor" />
+        </FormItem>
+        <FormItem :label="`链接`">
+          <AppLinkInput v-model="cell.url" />
+        </FormItem>
+      </template>
+      <!-- 2. 图片 -->
+      <template v-else-if="cell.type === 'image'">
+        <FormItem :label="`图片`">
+          <UploadImg
+            v-model="cell.imgUrl"
+            :limit="1"
+            height="56px"
+            width="56px"
+            :show-description="false"
+          >
+            <template #tip>建议尺寸 56*56</template>
+          </UploadImg>
+        </FormItem>
+        <FormItem :label="`链接`">
+          <AppLinkInput v-model="cell.url" />
+        </FormItem>
+      </template>
+      <!-- 3. 搜索框 -->
+      <template v-else>
+        <FormItem :label="`提示文字`">
+          <Input v-model:value="cell.placeholder" :maxlength="10" show-count />
+        </FormItem>
+        <FormItem :label="`圆角`">
+          <Slider
+            v-model:value="cell.borderRadius"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+      </template>
+    </template>
+  </template>
+</template>
+
+<style lang="scss" scoped></style>
 
 
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
index eef5a37d8..d74b741d4 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
@@ -1,12 +1,23 @@
 <script setup lang="ts">
 import type { NoticeBarProperty } from './config';
 
+import { ref } from 'vue';
+
 import { IconifyIcon } from '@vben/icons';
 
+import { Divider, Image } from 'ant-design-vue';
+
 /** 公告栏 */
 defineOptions({ name: 'NoticeBar' });
 
-defineProps<{ property: NoticeBarProperty }>();
+const props = defineProps<{ property: NoticeBarProperty }>();
+
+// 自动轮播
+const activeIndex = ref(0);
+setInterval(() => {
+  const contents = props.property.contents || [];
+  activeIndex.value = (activeIndex.value + 1) % (contents.length || 1);
+}, 3000);
 </script>
 
 <template>
@@ -17,18 +28,11 @@ defineProps<{ property: NoticeBarProperty }>();
       color: property.textColor,
     }"
   >
-    <ElImage :src="property.iconUrl" class="h-[18px]" />
-    <ElDivider direction="vertical" />
-    <ElCarousel
-      height="24px"
-      direction="vertical"
-      :autoplay="true"
-      class="flex-1 pr-2"
-    >
-      <ElCarouselItem v-for="(item, index) in property.contents" :key="index">
-        <div class="h-6 truncate leading-6">{{ item.text }}</div>
-      </ElCarouselItem>
-    </ElCarousel>
+    <Image :src="property.iconUrl" class="h-[18px]" :preview="false" />
+    <Divider type="vertical" />
+    <div class="flex-1 pr-2 h-6 truncate leading-6">
+      {{ property.contents?.[activeIndex]?.text }}
+    </div>
     <IconifyIcon icon="ep:arrow-right" />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
index 7f9e8b9d7..498f334be 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
@@ -3,6 +3,8 @@ import type { PageConfigProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
+import { Form, FormItem, Textarea } from 'ant-design-vue';
+
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
 
@@ -22,8 +24,8 @@ const formData = useVModel(props, 'modelValue', emit);
   <Form
     :model="formData"
     :rules="rules"
-    label-col="{ span: 6 }"
-    wrapper-col="{ span: 18 }"
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
   >
     <FormItem label="页面描述" name="description">
       <Textarea
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
index fb064c366..13f1c0fbc 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
@@ -7,6 +7,8 @@ import { ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
+import { Image } from 'ant-design-vue';
+
 import * as ProductSpuApi from '#/api/mall/product/spu';
 
 /** 商品卡片 */
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
index dfdc977bb..598f304d1 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
@@ -5,6 +5,18 @@ import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
 import UploadImg from '#/components/upload/image-upload.vue';
 import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
 
@@ -22,48 +34,48 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <ElForm label-width="80px" :model="formData">
-      <ElCard header="商品列表" class="property-group" shadow="never">
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+      <Card title="商品列表" class="property-group" :bordered="false">
         <!-- <SpuShowcase v-model="formData.spuIds" /> -->
-      </ElCard>
-      <ElCard header="商品样式" class="property-group" shadow="never">
-        <ElFormItem label="布局" prop="type">
-          <ElRadioGroup v-model="formData.layoutType">
-            <ElTooltip class="item" content="双列" placement="bottom">
-              <ElRadioButton value="twoCol">
+      </Card>
+      <Card title="商品样式" class="property-group" :bordered="false">
+        <FormItem label="布局" prop="type">
+          <RadioGroup v-model:value="formData.layoutType">
+            <Tooltip title="双列" placement="bottom">
+              <RadioButton value="twoCol">
                 <IconifyIcon icon="fluent:text-column-two-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>
-            <ElTooltip class="item" content="三列" placement="bottom">
-              <ElRadioButton value="threeCol">
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="三列" placement="bottom">
+              <RadioButton value="threeCol">
                 <IconifyIcon icon="fluent:text-column-three-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>
-            <ElTooltip class="item" content="水平滑动" placement="bottom">
-              <ElRadioButton value="horizSwiper">
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="水平滑动" placement="bottom">
+              <RadioButton value="horizSwiper">
                 <IconifyIcon icon="system-uicons:carousel" />
-              </ElRadioButton>
-            </ElTooltip>
-          </ElRadioGroup>
-        </ElFormItem>
-        <ElFormItem label="商品名称" prop="fields.name.show">
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="商品名称" prop="fields.name.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
-            <ElCheckbox v-model="formData.fields.name.show" />
+            <Checkbox v-model:checked="formData.fields.name.show" />
           </div>
-        </ElFormItem>
-        <ElFormItem label="商品价格" prop="fields.price.show">
+        </FormItem>
+        <FormItem label="商品价格" prop="fields.price.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
-            <ElCheckbox v-model="formData.fields.price.show" />
+            <Checkbox v-model:checked="formData.fields.price.show" />
           </div>
-        </ElFormItem>
-      </ElCard>
-      <ElCard header="角标" class="property-group" shadow="never">
-        <ElFormItem label="角标" prop="badge.show">
-          <ElSwitch v-model="formData.badge.show" />
-        </ElFormItem>
-        <ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+        </FormItem>
+      </Card>
+      <Card title="角标" class="property-group" :bordered="false">
+        <FormItem label="角标" prop="badge.show">
+          <Switch v-model:checked="formData.badge.show" />
+        </FormItem>
+        <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg
             v-model="formData.badge.imgUrl"
             height="44px"
@@ -72,41 +84,32 @@ const formData = useVModel(props, 'modelValue', emit);
           >
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
-        </ElFormItem>
-      </ElCard>
-      <ElCard header="商品样式" class="property-group" shadow="never">
-        <ElFormItem label="上圆角" prop="borderRadiusTop">
-          <ElSlider
-            v-model="formData.borderRadiusTop"
+        </FormItem>
+      </Card>
+      <Card title="商品样式" class="property-group" :bordered="false">
+        <FormItem label="上圆角" prop="borderRadiusTop">
+          <Slider
+            v-model:value="formData.borderRadiusTop"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
-        </ElFormItem>
-        <ElFormItem label="下圆角" prop="borderRadiusBottom">
-          <ElSlider
-            v-model="formData.borderRadiusBottom"
+        </FormItem>
+        <FormItem label="下圆角" prop="borderRadiusBottom">
+          <Slider
+            v-model:value="formData.borderRadiusBottom"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
-        </ElFormItem>
-        <ElFormItem label="间隔" prop="space">
-          <ElSlider
-            v-model="formData.space"
+        </FormItem>
+        <FormItem label="间隔" prop="space">
+          <Slider
+            v-model:value="formData.space"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
-        </ElFormItem>
-      </ElCard>
-    </ElForm>
+        </FormItem>
+      </Card>
+    </Form>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
index 9cd1df023..fb6852fb2 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -7,6 +7,8 @@ import { onMounted, ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
 
+import { Form, FormItem, Select } from 'ant-design-vue';
+
 import * as ArticleApi from '#/api/mall/promotion/article/index';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
@@ -42,26 +44,19 @@ onMounted(() => {
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <ElForm label-width="40px" :model="formData">
-      <ElFormItem label="文章" prop="id">
-        <ElSelect
-          v-model="formData.id"
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+      <FormItem label="文章" prop="id">
+        <Select
+          v-model:value="formData.id"
           placeholder="请选择文章"
           class="w-full"
           filterable
-          remote
-          :remote-method="queryArticleList"
           :loading="loading"
-        >
-          <ElOption
-            v-for="article in articles"
-            :key="article.id"
-            :label="article.title"
-            :value="article.id"
-          />
-        </ElSelect>
-      </ElFormItem>
-    </ElForm>
+          :options="articles.map((item) => ({ label: item.title, value: item.id }))"
+          @search="queryArticleList"
+        />
+      </FormItem>
+    </Form>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
index 566bb5d07..08ff86d1e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
@@ -8,6 +8,8 @@ import { ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
+import { Image } from 'ant-design-vue';
+
 import * as ProductSpuApi from '#/api/mall/product/spu';
 import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
index 37d37a9d1..3732af95a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
@@ -10,6 +10,20 @@ import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
 import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
 import UploadImg from '#/components/upload/image-upload.vue';
 import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
@@ -35,102 +49,97 @@ onMounted(async () => {
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <ElForm label-width="80px" :model="formData">
-      <ElCard header="拼团活动" class="property-group" shadow="never">
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+      <Card title="拼团活动" class="property-group" :bordered="false">
         <CombinationShowcase v-model="formData.activityIds" />
-      </ElCard>
-      <ElCard header="商品样式" class="property-group" shadow="never">
-        <ElFormItem label="布局" prop="type">
-          <ElRadioGroup v-model="formData.layoutType">
-            <ElTooltip class="item" content="单列大图" placement="bottom">
-              <ElRadioButton value="oneColBigImg">
+      </Card>
+      <Card title="商品样式" class="property-group" :bordered="false">
+        <FormItem label="布局" prop="type">
+          <RadioGroup v-model:value="formData.layoutType">
+            <Tooltip title="单列大图" placement="bottom">
+              <RadioButton value="oneColBigImg">
                 <IconifyIcon icon="fluent:text-column-one-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>
-            <ElTooltip class="item" content="单列小图" placement="bottom">
-              <ElRadioButton value="oneColSmallImg">
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="单列小图" placement="bottom">
+              <RadioButton value="oneColSmallImg">
                 <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>
-            <ElTooltip class="item" content="双列" placement="bottom">
-              <ElRadioButton value="twoCol">
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="双列" placement="bottom">
+              <RadioButton value="twoCol">
                 <IconifyIcon icon="fluent:text-column-two-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>
-            <!--<el-tooltip class="item" content="三列" placement="bottom">
-              <el-radio-button value="threeCol">
-                <IconifyIcon icon="fluent:text-column-three-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>-->
-          </ElRadioGroup>
-        </ElFormItem>
-        <ElFormItem label="商品名称" prop="fields.name.show">
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="商品名称" prop="fields.name.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
-            <ElCheckbox v-model="formData.fields.name.show" />
+            <Checkbox v-model:checked="formData.fields.name.show" />
           </div>
-        </ElFormItem>
-        <ElFormItem label="商品简介" prop="fields.introduction.show">
+        </FormItem>
+        <FormItem label="商品简介" prop="fields.introduction.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.introduction.color" />
-            <ElCheckbox v-model="formData.fields.introduction.show" />
+            <Checkbox v-model:checked="formData.fields.introduction.show" />
           </div>
-        </ElFormItem>
-        <ElFormItem label="商品价格" prop="fields.price.show">
+        </FormItem>
+        <FormItem label="商品价格" prop="fields.price.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
-            <ElCheckbox v-model="formData.fields.price.show" />
+            <Checkbox v-model:checked="formData.fields.price.show" />
           </div>
-        </ElFormItem>
-        <ElFormItem label="市场价" prop="fields.marketPrice.show">
+        </FormItem>
+        <FormItem label="市场价" prop="fields.marketPrice.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.marketPrice.color" />
-            <ElCheckbox v-model="formData.fields.marketPrice.show" />
+            <Checkbox v-model:checked="formData.fields.marketPrice.show" />
           </div>
-        </ElFormItem>
-        <ElFormItem label="商品销量" prop="fields.salesCount.show">
+        </FormItem>
+        <FormItem label="商品销量" prop="fields.salesCount.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.salesCount.color" />
-            <ElCheckbox v-model="formData.fields.salesCount.show" />
+            <Checkbox v-model:checked="formData.fields.salesCount.show" />
           </div>
-        </ElFormItem>
-        <ElFormItem label="商品库存" prop="fields.stock.show">
+        </FormItem>
+        <FormItem label="商品库存" prop="fields.stock.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.stock.color" />
-            <ElCheckbox v-model="formData.fields.stock.show" />
+            <Checkbox v-model:checked="formData.fields.stock.show" />
           </div>
-        </ElFormItem>
-      </ElCard>
-      <ElCard header="角标" class="property-group" shadow="never">
-        <ElFormItem label="角标" prop="badge.show">
-          <ElSwitch v-model="formData.badge.show" />
-        </ElFormItem>
-        <ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+        </FormItem>
+      </Card>
+      <Card title="角标" class="property-group" :bordered="false">
+        <FormItem label="角标" prop="badge.show">
+          <Switch v-model:checked="formData.badge.show" />
+        </FormItem>
+        <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
             <template #tip> 建议尺寸：36 * 22</template>
           </UploadImg>
-        </ElFormItem>
-      </ElCard>
-      <ElCard header="按钮" class="property-group" shadow="never">
-        <ElFormItem label="按钮类型" prop="btnBuy.type">
-          <ElRadioGroup v-model="formData.btnBuy.type">
-            <ElRadioButton value="text">文字</ElRadioButton>
-            <ElRadioButton value="img">图片</ElRadioButton>
-          </ElRadioGroup>
-        </ElFormItem>
+        </FormItem>
+      </Card>
+      <Card title="按钮" class="property-group" :bordered="false">
+        <FormItem label="按钮类型" prop="btnBuy.type">
+          <RadioGroup v-model:value="formData.btnBuy.type">
+            <RadioButton value="text">文字</RadioButton>
+            <RadioButton value="img">图片</RadioButton>
+          </RadioGroup>
+        </FormItem>
         <template v-if="formData.btnBuy.type === 'text'">
-          <ElFormItem label="按钮文字" prop="btnBuy.text">
-            <ElInput v-model="formData.btnBuy.text" />
-          </ElFormItem>
-          <ElFormItem label="左侧背景" prop="btnBuy.bgBeginColor">
+          <FormItem label="按钮文字" prop="btnBuy.text">
+            <Input v-model:value="formData.btnBuy.text" />
+          </FormItem>
+          <FormItem label="左侧背景" prop="btnBuy.bgBeginColor">
             <ColorInput v-model="formData.btnBuy.bgBeginColor" />
-          </ElFormItem>
-          <ElFormItem label="右侧背景" prop="btnBuy.bgEndColor">
+          </FormItem>
+          <FormItem label="右侧背景" prop="btnBuy.bgEndColor">
             <ColorInput v-model="formData.btnBuy.bgEndColor" />
-          </ElFormItem>
+          </FormItem>
         </template>
         <template v-else>
-          <ElFormItem label="图片" prop="btnBuy.imgUrl">
+          <FormItem label="图片" prop="btnBuy.imgUrl">
             <UploadImg
               v-model="formData.btnBuy.imgUrl"
               height="56px"
@@ -139,42 +148,33 @@ onMounted(async () => {
             >
               <template #tip> 建议尺寸：56 * 56</template>
             </UploadImg>
-          </ElFormItem>
+          </FormItem>
         </template>
-      </ElCard>
-      <ElCard header="商品样式" class="property-group" shadow="never">
-        <ElFormItem label="上圆角" prop="borderRadiusTop">
-          <ElSlider
-            v-model="formData.borderRadiusTop"
+      </Card>
+      <Card title="商品样式" class="property-group" :bordered="false">
+        <FormItem label="上圆角" prop="borderRadiusTop">
+          <Slider
+            v-model:value="formData.borderRadiusTop"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
-        </ElFormItem>
-        <ElFormItem label="下圆角" prop="borderRadiusBottom">
-          <ElSlider
-            v-model="formData.borderRadiusBottom"
+        </FormItem>
+        <FormItem label="下圆角" prop="borderRadiusBottom">
+          <Slider
+            v-model:value="formData.borderRadiusBottom"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
-        </ElFormItem>
-        <ElFormItem label="间隔" prop="space">
-          <ElSlider
-            v-model="formData.space"
+        </FormItem>
+        <FormItem label="间隔" prop="space">
+          <Slider
+            v-model:value="formData.space"
             :max="100"
             :min="0"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
-        </ElFormItem>
-      </ElCard>
-    </ElForm>
+        </FormItem>
+      </Card>
+    </Form>
   </ComponentContainerProperty>
 </template>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
index a33969044..174b20218 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
@@ -7,6 +7,8 @@ import { ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
+import { Image } from 'ant-design-vue';
+
 import * as ProductSpuApi from '#/api/mall/product/spu';
 import * as PointActivityApi from '#/api/mall/promotion/point';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
index 8a9eb5a00..0c1226df7 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
@@ -8,6 +8,8 @@ import { ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
+import { Image } from 'ant-design-vue';
+
 import * as ProductSpuApi from '#/api/mall/product/spu';
 import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
index 59fda8a81..827c7358d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
@@ -3,6 +3,8 @@ import type { TabBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Image } from 'ant-design-vue';
+
 /** 页面底部导航栏 */
 defineOptions({ name: 'TabBar' });
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
index c5f37404a..6eb9ac0ef 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
@@ -5,6 +5,16 @@ import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 
+import {
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Select,
+  SelectOption,
+} from 'ant-design-vue';
+
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
@@ -35,7 +45,7 @@ const handleThemeChange = () => {
 <template>
   <div class="tab-bar">
     <!-- 表单 -->
-    <Form :model="formData" label-col="{ span: 6 }" wrapper-col="{ span: 18 }">
+    <Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
       <FormItem label="主题" name="theme">
         <Select v-model:value="formData!.theme" @change="handleThemeChange">
           <SelectOption
@@ -109,8 +119,8 @@ const handleThemeChange = () => {
           <FormItem
             name="text"
             label="文字"
-            label-col="{ span: 4 }"
-            wrapper-col="{ span: 20 }"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
             class="mb-2"
           >
             <Input v-model:value="element.text" placeholder="请输入文字" />
@@ -118,8 +128,8 @@ const handleThemeChange = () => {
           <FormItem
             name="url"
             label="链接"
-            label-col="{ span: 4 }"
-            wrapper-col="{ span: 20 }"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
             class="mb-0"
           >
             <AppLinkInput v-model="element.url" />
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
index c3464c2b0..5bd0eb977 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
@@ -3,6 +3,8 @@ import type { TitleBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Image } from 'ant-design-vue';
+
 /** 标题栏 */
 defineOptions({ name: 'TitleBar' });
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
index b1846cc32..f7a105c4a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { VideoPlayerProperty } from './config';
 
+import { Image } from 'ant-design-vue';
+
 /** 视频播放 */
 defineOptions({ name: 'VideoPlayer' });
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
index 762f6193c..1e96e7364 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
@@ -3,6 +3,8 @@ import type { VideoPlayerProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
+import { Form, FormItem, Slider, Switch } from 'ant-design-vue';
+
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
@@ -23,7 +25,7 @@ const formData = useVModel(props, 'modelValue', emit);
         <Slider v-model:value="formData.style.height" :max="500" :min="100" />
       </FormItem>
     </template>
-    <Form :model="formData" label-col="{ span: 6 }" wrapper-col="{ span: 18 }">
+    <Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
       <FormItem label="上传视频" name="videoUrl">
         <UploadFile
           v-model="formData.videoUrl"
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
index 244762af8..a3ebac5ff 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
@@ -252,13 +252,13 @@ const handleDeleteComponent = (index: number) => {
   }
 };
 
-// 注入无感刷新页面函数
-const reload = inject<() => void>('reload'); // TODO @芋艿：是 vue3 + element-plus 独有的，可以清理掉。
-// 重置
-const handleReset = () => {
-  if (reload) reload();
-  emits('reset');
-};
+// // 注入无感刷新页面函数
+// const reload = inject<() => void>('reload'); // TODO @芋艿：是 vue3 + element-plus 独有的，可以清理掉。
+// // 重置
+// const handleReset = () => {
+//   if (reload) reload();
+//   emits('reset');
+// };
 
 // 预览
 const previewDialogVisible = ref(false);
diff --git a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
index 879ba756b..25b08a03e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PREDEFINE_COLORS } from '@vben/constants';
+// import { PREDEFINE_COLORS } from '@vben/constants';
 
 import { useVModels } from '@vueuse/core';
 import { Input, InputGroup } from 'ant-design-vue';
@@ -26,7 +26,9 @@ const { modelValue, color } = useVModels(props, emit);
 <template>
   <InputGroup compact>
     <Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" />
+    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
     <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
+    -->
   </InputGroup>
 </template>
 <style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue b/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue
index eee46b6a9..050a4fb6b 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/template/index.vue
@@ -66,14 +66,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新优惠券模板状态
-        const res = await updateCouponTemplateStatus(row.id!, newStatus);
-        if (res) {
-          // 提示并返回成功
-          message.success($t('ui.actionMessage.operationSuccess'));
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        await updateCouponTemplateStatus(row.id!, newStatus);
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue b/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue
index 185162a8a..932e0235f 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/config/index.vue
@@ -67,14 +67,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateSeckillConfigStatus(row.id, newStatus);
-        if (res) {
-          // 提示并返回成功
-          message.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error($t('ui.actionMessage.operationFailed')));
-        }
+        await updateSeckillConfigStatus(row.id, newStatus);
+        // 提示并返回成功
+        message.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue b/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue
index b0e4217ed..eb263d892 100644
--- a/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue
+++ b/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue
@@ -94,18 +94,14 @@ async function handleBrokerageEnabledChange(
     })
       .then(async () => {
         // 更新推广资格
-        const res = await updateBrokerageEnabled({
+        await updateBrokerageEnabled({
           id: row.id!,
           enabled: newEnabled,
         });
-        if (res) {
-          // 提示并返回成功
-          message.success($t('ui.actionMessage.operationSuccess'));
-          handleRefresh();
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        handleRefresh();
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/pay/app/index.vue b/apps/web-antd/src/views/pay/app/index.vue
index 8163d616c..671aa1aa1 100644
--- a/apps/web-antd/src/views/pay/app/index.vue
+++ b/apps/web-antd/src/views/pay/app/index.vue
@@ -72,17 +72,13 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateAppStatus({
+        await updateAppStatus({
           id: row.id!,
           status: newStatus,
         });
-        if (res) {
-          // 提示并返回成功
-          message.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        // 提示并返回成功
+        message.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-antd/src/views/system/user/index.vue b/apps/web-antd/src/views/system/user/index.vue
index 45cbe722e..5d1267a8f 100644
--- a/apps/web-antd/src/views/system/user/index.vue
+++ b/apps/web-antd/src/views/system/user/index.vue
@@ -144,14 +144,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新用户状态
-        const res = await updateUserStatus(row.id!, newStatus);
-        if (res) {
-          // 提示并返回成功
-          message.success($t('ui.actionMessage.operationSuccess'));
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        await updateUserStatus(row.id!, newStatus);
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-ele/src/api/ai/mindmap/index.ts b/apps/web-ele/src/api/ai/mindmap/index.ts
index 69e437341..192b9950f 100644
--- a/apps/web-ele/src/api/ai/mindmap/index.ts
+++ b/apps/web-ele/src/api/ai/mindmap/index.ts
@@ -6,6 +6,7 @@ import { requestClient } from '#/api/request';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 const accessStore = useAccessStore();
+
 export namespace AiMindmapApi {
   // AI 思维导图
   export interface MindMap {
@@ -19,7 +20,7 @@ export namespace AiMindmapApi {
   }
 
   // AI 思维导图生成
-  export interface AiMindMapGenerateReq {
+  export interface AiMindMapGenerateReqVO {
     prompt: string;
   }
 }
@@ -32,7 +33,7 @@ export function generateMindMap({
   ctrl,
 }: {
   ctrl: AbortController;
-  data: AiMindmapApi.AiMindMapGenerateReq;
+  data: AiMindmapApi.AiMindMapGenerateReqVO;
   onClose?: (...args: any[]) => void;
   onError?: (...args: any[]) => void;
   onMessage?: (res: any) => void;
@@ -53,12 +54,12 @@ export function generateMindMap({
   });
 }
 
-// 查询思维导图分页
+/** 查询思维导图分页 */
 export function getMindMapPage(params: any) {
   return requestClient.get(`/ai/mind-map/page`, { params });
 }
 
-// 删除思维导图
+/** 删除思维导图 */
 export function deleteMindMap(id: number) {
   return requestClient.delete(`/ai/mind-map/delete?id=${id}`);
 }
diff --git a/apps/web-ele/src/api/ai/model/apiKey/index.ts b/apps/web-ele/src/api/ai/model/apiKey/index.ts
index 80dcbec1a..2ffc842d8 100644
--- a/apps/web-ele/src/api/ai/model/apiKey/index.ts
+++ b/apps/web-ele/src/api/ai/model/apiKey/index.ts
@@ -13,7 +13,7 @@ export namespace AiModelApiKeyApi {
   }
 }
 
-// 查询 API 密钥分页
+/** 查询 API 密钥分页 */
 export function getApiKeyPage(params: PageParam) {
   return requestClient.get<PageResult<AiModelApiKeyApi.ApiKey>>(
     '/ai/api-key/page',
@@ -21,28 +21,29 @@ export function getApiKeyPage(params: PageParam) {
   );
 }
 
-// 获得 API 密钥列表
+/** 获得 API 密钥列表 */
 export function getApiKeySimpleList() {
   return requestClient.get<AiModelApiKeyApi.ApiKey[]>(
     '/ai/api-key/simple-list',
   );
 }
 
-// 查询 API 密钥详情
+/** 查询 API 密钥详情 */
 export function getApiKey(id: number) {
   return requestClient.get<AiModelApiKeyApi.ApiKey>(`/ai/api-key/get?id=${id}`);
 }
-// 新增 API 密钥
+
+/** 新增 API 密钥 */
 export function createApiKey(data: AiModelApiKeyApi.ApiKey) {
   return requestClient.post('/ai/api-key/create', data);
 }
 
-// 修改 API 密钥
+/** 修改 API 密钥 */
 export function updateApiKey(data: AiModelApiKeyApi.ApiKey) {
   return requestClient.put('/ai/api-key/update', data);
 }
 
-// 删除 API 密钥
+/** 删除 API 密钥 */
 export function deleteApiKey(id: number) {
   return requestClient.delete(`/ai/api-key/delete?id=${id}`);
 }
diff --git a/apps/web-ele/src/api/ai/model/chatRole/index.ts b/apps/web-ele/src/api/ai/model/chatRole/index.ts
index d52dbfee5..266ca3474 100644
--- a/apps/web-ele/src/api/ai/model/chatRole/index.ts
+++ b/apps/web-ele/src/api/ai/model/chatRole/index.ts
@@ -20,7 +20,7 @@ export namespace AiModelChatRoleApi {
   }
 
   // AI 聊天角色 分页请求
-  export interface ChatRolePageReq {
+  export interface ChatRolePageReqVO {
     name?: string; // 角色名称
     category?: string; // 角色类别
     publicStatus: boolean; // 是否公开
@@ -29,7 +29,7 @@ export namespace AiModelChatRoleApi {
   }
 }
 
-// 查询聊天角色分页
+/** 查询聊天角色分页 */
 export function getChatRolePage(params: PageParam) {
   return requestClient.get<PageResult<AiModelChatRoleApi.ChatRole>>(
     '/ai/chat-role/page',
@@ -37,49 +37,49 @@ export function getChatRolePage(params: PageParam) {
   );
 }
 
-// 查询聊天角色详情
+/** 查询聊天角色详情 */
 export function getChatRole(id: number) {
   return requestClient.get<AiModelChatRoleApi.ChatRole>(
     `/ai/chat-role/get?id=${id}`,
   );
 }
-// 新增聊天角色
+
+/** 新增聊天角色 */
 export function createChatRole(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.post('/ai/chat-role/create', data);
 }
 
-// 修改聊天角色
+/** 修改聊天角色 */
 export function updateChatRole(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.put('/ai/chat-role/update', data);
 }
 
-// 删除聊天角色
+/** 删除聊天角色 */
 export function deleteChatRole(id: number) {
   return requestClient.delete(`/ai/chat-role/delete?id=${id}`);
 }
 
-// ======= chat 聊天
-// 获取 my role
-export function getMyPage(params: AiModelChatRoleApi.ChatRolePageReq) {
+/** 获取 my role */
+export function getMyPage(params: AiModelChatRoleApi.ChatRolePageReqVO) {
   return requestClient.get('/ai/chat-role/my-page', { params });
 }
 
-// 获取角色分类
+/** 获取角色分类 */
 export function getCategoryList() {
   return requestClient.get('/ai/chat-role/category-list');
 }
 
-// 创建角色
+/** 创建角色 */
 export function createMy(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.post('/ai/chat-role/create-my', data);
 }
 
-// 更新角色
+/** 更新角色 */
 export function updateMy(data: AiModelChatRoleApi.ChatRole) {
   return requestClient.put('/ai/chat-role/update', data);
 }
 
-// 删除角色 my
+/** 删除角色 my */
 export function deleteMy(id: number) {
   return requestClient.delete(`/ai/chat-role/delete-my?id=${id}`);
 }
diff --git a/apps/web-ele/src/api/ai/model/model/index.ts b/apps/web-ele/src/api/ai/model/model/index.ts
index deafcee82..364327cc1 100644
--- a/apps/web-ele/src/api/ai/model/model/index.ts
+++ b/apps/web-ele/src/api/ai/model/model/index.ts
@@ -18,7 +18,7 @@ export namespace AiModelModelApi {
   }
 }
 
-// 查询模型分页
+/** 查询模型分页 */
 export function getModelPage(params: PageParam) {
   return requestClient.get<PageResult<AiModelModelApi.Model>>(
     '/ai/model/page',
@@ -26,7 +26,7 @@ export function getModelPage(params: PageParam) {
   );
 }
 
-// 获得模型列表
+/** 获得模型列表 */
 export function getModelSimpleList(type?: number) {
   return requestClient.get<AiModelModelApi.Model[]>('/ai/model/simple-list', {
     params: {
@@ -35,21 +35,22 @@ export function getModelSimpleList(type?: number) {
   });
 }
 
-// 查询模型详情
+/** 查询模型详情 */
 export function getModel(id: number) {
   return requestClient.get<AiModelModelApi.Model>(`/ai/model/get?id=${id}`);
 }
-// 新增模型
+
+/** 新增模型 */
 export function createModel(data: AiModelModelApi.Model) {
   return requestClient.post('/ai/model/create', data);
 }
 
-// 修改模型
+/** 修改模型 */
 export function updateModel(data: AiModelModelApi.Model) {
   return requestClient.put('/ai/model/update', data);
 }
 
-// 删除模型
+/** 删除模型 */
 export function deleteModel(id: number) {
   return requestClient.delete(`/ai/model/delete?id=${id}`);
 }
diff --git a/apps/web-ele/src/api/ai/model/tool/index.ts b/apps/web-ele/src/api/ai/model/tool/index.ts
index 6fac9d74b..03abc4e7b 100644
--- a/apps/web-ele/src/api/ai/model/tool/index.ts
+++ b/apps/web-ele/src/api/ai/model/tool/index.ts
@@ -11,33 +11,34 @@ export namespace AiModelToolApi {
   }
 }
 
-// 查询工具分页
+/** 查询工具分页 */
 export function getToolPage(params: PageParam) {
   return requestClient.get<PageResult<AiModelToolApi.Tool>>('/ai/tool/page', {
     params,
   });
 }
 
-// 查询工具详情
+/** 查询工具详情 */
 export function getTool(id: number) {
   return requestClient.get<AiModelToolApi.Tool>(`/ai/tool/get?id=${id}`);
 }
-// 新增工具
+
+/** 新增工具 */
 export function createTool(data: AiModelToolApi.Tool) {
   return requestClient.post('/ai/tool/create', data);
 }
 
-// 修改工具
+/** 修改工具 */
 export function updateTool(data: AiModelToolApi.Tool) {
   return requestClient.put('/ai/tool/update', data);
 }
 
-// 删除工具
+/** 删除工具 */
 export function deleteTool(id: number) {
   return requestClient.delete(`/ai/tool/delete?id=${id}`);
 }
 
-// 获取工具简单列表
+/** 获取工具简单列表 */
 export function getToolSimpleList() {
   return requestClient.get<AiModelToolApi.Tool[]>('/ai/tool/simple-list');
 }
diff --git a/apps/web-ele/src/api/ai/write/index.ts b/apps/web-ele/src/api/ai/write/index.ts
index 4ca1fc7aa..a9863d27d 100644
--- a/apps/web-ele/src/api/ai/write/index.ts
+++ b/apps/web-ele/src/api/ai/write/index.ts
@@ -9,8 +9,10 @@ import { requestClient } from '#/api/request';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 const accessStore = useAccessStore();
+
 export namespace AiWriteApi {
   export interface Write {
+    id?: number;
     type: AiWriteTypeEnum.REPLY | AiWriteTypeEnum.WRITING; // 1:撰写 2:回复
     prompt: string; // 写作内容提示 1。撰写 2回复
     originalContent: string; // 原文
@@ -26,29 +28,12 @@ export namespace AiWriteApi {
     createTime?: Date; // 创建时间
   }
 
-  export interface AiWritePageReq extends PageParam {
+  export interface AiWritePageReqVO extends PageParam {
     userId?: number; // 用户编号
     type?: AiWriteTypeEnum; //  写作类型
     platform?: string; // 平台
     createTime?: [string, string]; // 创建时间
   }
-
-  export interface AiWriteResp {
-    id: number;
-    userId: number;
-    type: number;
-    platform: string;
-    model: string;
-    prompt: string;
-    generatedContent: string;
-    originalContent: string;
-    length: number;
-    format: number;
-    tone: number;
-    language: number;
-    errorMessage: string;
-    createTime: string;
-  }
 }
 
 export function writeStream({
@@ -80,15 +65,14 @@ export function writeStream({
   });
 }
 
-// 获取写作列表
-export function getWritePage(params: any) {
-  return requestClient.get<PageResult<AiWriteApi.AiWritePageReq>>(
-    `/ai/write/page`,
-    { params },
-  );
+/** 获取写作列表 */
+export function getWritePage(params: AiWriteApi.AiWritePageReqVO) {
+  return requestClient.get<PageResult<AiWriteApi.Write>>(`/ai/write/page`, {
+    params,
+  });
 }
 
-// 删除音乐
+/** 删除写作记录 */
 export function deleteWrite(id: number) {
   return requestClient.delete(`/ai/write/delete`, { params: { id } });
 }
diff --git a/apps/web-ele/src/components/description/description.vue b/apps/web-ele/src/components/description/description.vue
index f4b420d86..527c886f2 100644
--- a/apps/web-ele/src/components/description/description.vue
+++ b/apps/web-ele/src/components/description/description.vue
@@ -10,6 +10,7 @@ import { get, getNestedValue, isFunction } from '@vben/utils';
 import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
 
 const props = {
+  // TODO @星语：bordered 不生效；之前好像是 border
   bordered: { default: true, type: Boolean },
   column: {
     default: () => {
@@ -127,6 +128,7 @@ export default defineComponent({
                 },
                 default: () => {
                   if (item.slot) {
+                    // TODO @xingyu：这里要 inline 掉么？
                     const slotContent = getSlot(slots, item.slot, data);
                     return slotContent;
                   }
diff --git a/apps/web-ele/src/components/summary-card/index.ts b/apps/web-ele/src/components/summary-card/index.ts
deleted file mode 100644
index 598d73d61..000000000
--- a/apps/web-ele/src/components/summary-card/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as SummaryCard } from './summary-card.vue';
-export type { SummaryCardProps } from './typing';
diff --git a/apps/web-ele/src/components/summary-card/summary-card.vue b/apps/web-ele/src/components/summary-card/summary-card.vue
deleted file mode 100644
index 55fe7d17d..000000000
--- a/apps/web-ele/src/components/summary-card/summary-card.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script lang="ts" setup>
-import type { SummaryCardProps } from './typing';
-
-import { CountTo } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
-
-import { ElTooltip } from 'element-plus';
-
-/** 统计卡片 */
-defineOptions({ name: 'SummaryCard' });
-
-defineProps<SummaryCardProps>();
-</script>
-<template>
-  <div
-    class="flex flex-row items-center gap-3 rounded bg-[var(--el-bg-color-overlay)] p-4"
-  >
-    <div
-      class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded"
-      :class="`${iconColor} ${iconBgColor}`"
-    >
-      <IconifyIcon v-if="icon" :icon="icon" class="!text-6" />
-    </div>
-    <div class="flex flex-col gap-1">
-      <div class="flex items-center gap-1">
-        <span class="text-base">{{ title }}</span>
-        <ElTooltip :content="tooltip" placement="topLeft" v-if="tooltip">
-          <IconifyIcon
-            icon="lucide:circle-alert"
-            class="item-center !text-3 flex"
-          />
-        </ElTooltip>
-      </div>
-      <div class="flex flex-row items-baseline gap-2">
-        <div class="text-lg">
-          <CountTo
-            :prefix="prefix"
-            :end-val="value ?? 0"
-            :decimals="decimals ?? 0"
-          />
-        </div>
-        <span
-          v-if="percent !== undefined"
-          :class="Number(percent) > 0 ? 'text-red-500' : 'text-green-500'"
-        >
-          <span class="text-sm">{{ Math.abs(Number(percent)) }}%</span>
-          <IconifyIcon
-            :icon="
-              Number(percent) > 0 ? 'lucide:chevron-up' : 'lucide:chevron-down'
-            "
-            class="ml-0.5 !text-sm"
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/apps/web-ele/src/components/summary-card/typing.ts b/apps/web-ele/src/components/summary-card/typing.ts
deleted file mode 100644
index 0ef1fdc6f..000000000
--- a/apps/web-ele/src/components/summary-card/typing.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface SummaryCardProps {
-  title: string;
-  tooltip?: string;
-  icon?: string;
-  iconColor?: string;
-  iconBgColor?: string;
-  prefix?: string;
-  value?: number;
-  decimals?: number;
-  percent?: number | string;
-}
diff --git a/apps/web-ele/src/views/ai/chat/manager/data.ts b/apps/web-ele/src/views/ai/chat/manager/data.ts
new file mode 100644
index 000000000..266d44ce6
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/manager/data.ts
@@ -0,0 +1,223 @@
+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 [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '聊天标题',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入聊天标题',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumnsConversation(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '对话编号',
+      fixed: 'left',
+      minWidth: 180,
+    },
+    {
+      field: 'title',
+      title: '对话标题',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      title: '用户',
+      minWidth: 180,
+      field: 'userId',
+      formatter: ({ cellValue }) => {
+        if (cellValue === 0) {
+          return '系统';
+        }
+        return userList.find((user) => user.id === cellValue)?.nickname || '-';
+      },
+    },
+    {
+      field: 'roleName',
+      title: '角色',
+      minWidth: 180,
+    },
+    {
+      field: 'model',
+      title: '模型标识',
+      minWidth: 180,
+    },
+    {
+      field: 'messageCount',
+      title: '消息数',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'temperature',
+      title: '温度参数',
+      minWidth: 80,
+    },
+    {
+      title: '回复数 Token 数',
+      field: 'maxTokens',
+      minWidth: 120,
+    },
+    {
+      title: '上下文数量',
+      field: 'maxContexts',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchemaMessage(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'conversationId',
+      label: '对话编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入对话编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择用户编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumnsMessage(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '消息编号',
+      fixed: 'left',
+      minWidth: 180,
+    },
+    {
+      field: 'conversationId',
+      title: '对话编号',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      title: '用户',
+      minWidth: 180,
+      field: 'userId',
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
+    },
+    {
+      field: 'roleName',
+      title: '角色',
+      minWidth: 180,
+    },
+    {
+      field: 'type',
+      title: '消息类型',
+      minWidth: 100,
+    },
+    {
+      field: 'model',
+      title: '模型标识',
+      minWidth: 180,
+    },
+    {
+      field: 'content',
+      title: '消息内容',
+      minWidth: 300,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'replyId',
+      title: '回复消息编号',
+      minWidth: 180,
+    },
+    {
+      title: '携带上下文',
+      field: 'useContext',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+      minWidth: 100,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/chat/manager/index.vue b/apps/web-ele/src/views/ai/chat/manager/index.vue
new file mode 100644
index 000000000..e87c3d30f
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/manager/index.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElTabs } from 'element-plus';
+
+import ChatConversationList from './modules/conversation-list.vue';
+import ChatMessageList from './modules/message-list.vue';
+
+const activeTabName = ref('conversation');
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 对话聊天" url="https://doc.iocoder.cn/ai/chat/" />
+    </template>
+
+    <ElTabs v-model:model-value="activeTabName">
+      <ElTabs.TabPane label="对话列表" name="conversation">
+        <ChatConversationList />
+      </ElTabs.TabPane>
+      <ElTabs.TabPane label="消息列表" name="message">
+        <ChatMessageList />
+      </ElTabs.TabPane>
+    </ElTabs>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/manager/modules/conversation-list.vue b/apps/web-ele/src/views/ai/chat/manager/modules/conversation-list.vue
new file mode 100644
index 000000000..b6ea3dcc9
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/manager/modules/conversation-list.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
+
+import { Page } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteChatConversationByAdmin,
+  getChatConversationPage,
+} from '#/api/ai/chat/conversation';
+import { $t } from '#/locales';
+
+import {
+  useGridColumnsConversation,
+  useGridFormSchemaConversation,
+} from '../data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除对话 */
+async function handleDelete(row: AiChatConversationApi.ChatConversation) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteChatConversationByAdmin(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchemaConversation(),
+  },
+  gridOptions: {
+    columns: useGridColumnsConversation(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getChatConversationPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiChatConversationApi.ChatConversation>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="对话列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:chat-conversation:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/chat/manager/modules/message-list.vue b/apps/web-ele/src/views/ai/chat/manager/modules/message-list.vue
new file mode 100644
index 000000000..f5682141b
--- /dev/null
+++ b/apps/web-ele/src/views/ai/chat/manager/modules/message-list.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
+
+import { Page } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteChatMessageByAdmin,
+  getChatMessagePage,
+} from '#/api/ai/chat/message';
+import { $t } from '#/locales';
+
+import { useGridColumnsMessage, useGridFormSchemaMessage } from '../data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除消息 */
+async function handleDelete(row: AiChatConversationApi.ChatConversation) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteChatMessageByAdmin(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchemaMessage(),
+  },
+  gridOptions: {
+    columns: useGridColumnsMessage(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getChatMessagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiChatConversationApi.ChatConversation>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="消息列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:chat-message:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/image/manager/data.ts b/apps/web-ele/src/views/ai/image/manager/data.ts
new file mode 100644
index 000000000..68cc3c4ee
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/manager/data.ts
@@ -0,0 +1,180 @@
+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 { getDictOptions } from '@vben/hooks';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+let userList: SystemUserApi.User[] = [];
+async function getUserData() {
+  userList = await getSimpleUserList();
+}
+
+getUserData();
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择用户编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'platform',
+      label: '平台',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择平台',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '绘画状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择绘画状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.AI_IMAGE_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'publicStatus',
+      label: '是否发布',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择是否发布',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onPublicStatusChange?: (
+    newStatus: boolean,
+    row: any,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      field: 'picUrl',
+      title: '图片',
+      minWidth: 110,
+      fixed: 'left',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'userId',
+      title: '用户',
+      minWidth: 180,
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
+    },
+    {
+      field: 'platform',
+      title: '平台',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_PLATFORM },
+      },
+    },
+    {
+      field: 'model',
+      title: '模型',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '绘画状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_IMAGE_STATUS },
+      },
+    },
+    {
+      minWidth: 100,
+      title: '是否发布',
+      field: 'publicStatus',
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onPublicStatusChange },
+        name: 'CellSwitch',
+        props: {
+          activeValue: true,
+          inactiveValue: false,
+        },
+      },
+    },
+    {
+      field: 'prompt',
+      title: '提示词',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'width',
+      title: '宽度',
+      minWidth: 180,
+    },
+    {
+      field: 'height',
+      title: '高度',
+      minWidth: 180,
+    },
+    {
+      field: 'errorMessage',
+      title: '错误信息',
+      minWidth: 180,
+    },
+    {
+      field: 'taskId',
+      title: '任务编号',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/image/manager/index.vue b/apps/web-ele/src/views/ai/image/manager/index.vue
new file mode 100644
index 000000000..576490053
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/manager/index.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiImageApi } from '#/api/ai/image';
+
+import { confirm, DocAlert, Page } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteImage, getImagePage, updateImage } from '#/api/ai/image';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除图片 */
+async function handleDelete(row: AiImageApi.Image) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteImage(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 修改是否发布 */
+async function handleUpdatePublicStatusChange(
+  newStatus: boolean,
+  row: AiImageApi.Image,
+): Promise<boolean | undefined> {
+  const text = newStatus ? '公开' : '私有';
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确认要将该图片切换为【${text}】吗？`,
+    })
+      .then(async () => {
+        // 更新图片状态
+        await updateImage({
+          id: row.id,
+          publicStatus: newStatus,
+        });
+        // 提示并返回成功
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleUpdatePublicStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getImagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiImageApi.Image>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 绘图创作" url="https://doc.iocoder.cn/ai/image/" />
+    </template>
+    <Grid table-title="绘画管理列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:image:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/mindmap/index/index.vue b/apps/web-ele/src/views/ai/mindmap/index/index.vue
new file mode 100644
index 000000000..0bdb46eca
--- /dev/null
+++ b/apps/web-ele/src/views/ai/mindmap/index/index.vue
@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { AiMindmapApi } from '#/api/ai/mindmap';
+
+import { nextTick, onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { MindMapContentExample } from '@vben/constants';
+
+import { ElMessage } from 'element-plus';
+
+import { generateMindMap } from '#/api/ai/mindmap';
+
+import Left from './modules/left.vue';
+import Right from './modules/right.vue';
+
+const ctrl = ref<AbortController>(); // 请求控制
+const isGenerating = ref(false); // 是否正在生成思维导图
+const isStart = ref(false); // 开始生成，用来清空思维导图
+const isEnd = ref(true); // 用来判断结束的时候渲染思维导图
+const generatedContent = ref(''); // 生成思维导图结果
+
+const leftRef = ref<InstanceType<typeof Left>>(); // 左边组件
+const rightRef = ref(); // 右边组件
+
+/** 使用已有内容直接生成 */
+function directGenerate(existPrompt: string) {
+  isEnd.value = false; // 先设置为 false 再设置为 true，让子组建的 watch 能够监听到
+  generatedContent.value = existPrompt;
+  isEnd.value = true;
+}
+
+/** 提交生成 */
+function handleSubmit(data: AiMindmapApi.AiMindMapGenerateReqVO) {
+  isGenerating.value = true;
+  isStart.value = true;
+  isEnd.value = false;
+  ctrl.value = new AbortController(); // 请求控制赋值
+  generatedContent.value = ''; // 清空生成数据
+  generateMindMap({
+    data,
+    onMessage: async (res: any) => {
+      const { code, data, msg } = JSON.parse(res.data);
+      if (code !== 0) {
+        ElMessage.error(`生成思维导图异常! ${msg}`);
+        handleStopStream();
+        return;
+      }
+      generatedContent.value = generatedContent.value + data;
+      await nextTick();
+      rightRef.value?.scrollBottom();
+    },
+    onClose() {
+      isEnd.value = true;
+      leftRef.value?.setGeneratedContent(generatedContent.value);
+      handleStopStream();
+    },
+    onError(err) {
+      console.error('生成思维导图失败', err);
+      handleStopStream();
+      // 需要抛出异常，禁止重试
+      throw err;
+    },
+    ctrl: ctrl.value,
+  });
+}
+
+/** 停止 stream 生成 */
+function handleStopStream() {
+  isGenerating.value = false;
+  isStart.value = false;
+  ctrl.value?.abort();
+}
+
+/** 初始化 */
+onMounted(() => {
+  generatedContent.value = MindMapContentExample;
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="absolute bottom-0 left-0 right-0 top-0 m-4 flex">
+      <Left
+        ref="leftRef"
+        class="mr-4"
+        :is-generating="isGenerating"
+        @submit="handleSubmit"
+        @direct-generate="directGenerate"
+      />
+      <Right
+        ref="rightRef"
+        :generated-content="generatedContent"
+        :is-end="isEnd"
+        :is-generating="isGenerating"
+        :is-start="isStart"
+      />
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/mindmap/index/modules/left.vue b/apps/web-ele/src/views/ai/mindmap/index/modules/left.vue
new file mode 100644
index 000000000..39fd218c8
--- /dev/null
+++ b/apps/web-ele/src/views/ai/mindmap/index/modules/left.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+
+import { MindMapContentExample } from '@vben/constants';
+
+import { ElButton, ElInput } from 'element-plus';
+
+defineProps<{
+  isGenerating: boolean;
+}>();
+
+const emits = defineEmits(['submit', 'directGenerate']);
+
+const formData = reactive({
+  prompt: '',
+});
+
+const generatedContent = ref(MindMapContentExample); // 已有的内容
+
+defineExpose({
+  setGeneratedContent(newContent: string) {
+    // 设置已有的内容，在生成结束的时候将结果赋值给该值
+    generatedContent.value = newContent;
+  },
+});
+</script>
+<template>
+  <div class="bg-card flex w-80 flex-col rounded-lg p-5">
+    <h3 class="text-primary h-7 w-full text-center text-xl leading-7">
+      思维导图创作中心
+    </h3>
+    <div class="mt-4 flex-grow overflow-y-auto">
+      <div>
+        <b>您的需求？</b>
+        <ElInput
+          v-model="formData.prompt"
+          type="textarea"
+          :maxlength="1024"
+          :rows="8"
+          class="mt-4 w-full"
+          placeholder="请输入提示词，让AI帮你完善"
+          show-word-limit
+        />
+        <ElButton
+          class="mt-4 !w-full"
+          type="primary"
+          :loading="isGenerating"
+          @click="emits('submit', formData)"
+        >
+          智能生成思维导图
+        </ElButton>
+      </div>
+      <div class="mt-7">
+        <b>使用已有内容生成？</b>
+        <ElInput
+          v-model="generatedContent"
+          type="textarea"
+          :maxlength="1024"
+          :rows="8"
+          class="mt-4 w-full"
+          placeholder="例如：童话里的小屋应该是什么样子？"
+          show-word-limit
+        />
+        <ElButton
+          class="mt-4 !w-full"
+          type="primary"
+          @click="emits('directGenerate', generatedContent)"
+          :disabled="isGenerating"
+        >
+          直接生成
+        </ElButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/mindmap/index/modules/right.vue b/apps/web-ele/src/views/ai/mindmap/index/modules/right.vue
new file mode 100644
index 000000000..5adc66aaf
--- /dev/null
+++ b/apps/web-ele/src/views/ai/mindmap/index/modules/right.vue
@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import {
+  MarkdownIt,
+  Markmap,
+  Toolbar,
+  Transformer,
+} from '@vben/plugins/markmap';
+import { downloadImageByCanvas } from '@vben/utils';
+
+import { ElButton, ElCard, ElMessage } from 'element-plus';
+
+const props = defineProps<{
+  generatedContent: string; // 生成结果
+  isEnd: boolean; // 是否结束
+  isGenerating: boolean; // 是否正在生成
+  isStart: boolean; // 开始状态，开始时需要清除 html
+}>();
+
+const md = MarkdownIt();
+const contentRef = ref<HTMLDivElement>(); // 右侧出来 header 以下的区域
+const mdContainerRef = ref<HTMLDivElement>(); // markdown 的容器，用来滚动到底下的
+const mindMapRef = ref<HTMLDivElement>(); // 思维导图的容器
+const svgRef = ref<SVGElement>(); // 思维导图的渲染 svg
+const toolBarRef = ref<HTMLDivElement>(); // 思维导图右下角的工具栏，缩放等
+const html = ref(''); // 生成过程中的文本
+const contentAreaHeight = ref(0); // 生成区域的高度，出去 header 部分
+let markMap: Markmap | null = null;
+const transformer = new Transformer();
+let resizeObserver: null | ResizeObserver = null;
+const initialized = false;
+
+/** 初始化 */
+onMounted(() => {
+  resizeObserver = new ResizeObserver(() => {
+    contentAreaHeight.value = contentRef.value?.clientHeight || 0;
+    // 先更新高度，再更新思维导图
+    if (contentAreaHeight.value && !initialized) {
+      // 初始化思维导图
+      try {
+        if (!markMap) {
+          markMap = Markmap.create(svgRef.value!);
+          const { el } = Toolbar.create(markMap);
+          toolBarRef.value?.append(el);
+        }
+        nextTick(update);
+      } catch {
+        ElMessage.error('思维导图初始化失败');
+      }
+    }
+  });
+  if (contentRef.value) {
+    resizeObserver.observe(contentRef.value);
+  }
+});
+
+/** 卸载 */
+onBeforeUnmount(() => {
+  if (resizeObserver && contentRef.value) {
+    resizeObserver.unobserve(contentRef.value);
+  }
+});
+
+/** 监听 props 变化 */
+watch(props, ({ generatedContent, isGenerating, isEnd, isStart }) => {
+  // 开始生成的时候清空一下 markdown 的内容
+  if (isStart) {
+    html.value = '';
+  }
+  // 生成内容的时候使用 markdown 来渲染
+  if (isGenerating) {
+    html.value = md.render(generatedContent);
+  }
+  // 生成结束时更新思维导图
+  if (isEnd) {
+    update();
+  }
+});
+
+/** 更新思维导图的展示 */
+function update() {
+  try {
+    const { root } = transformer.transform(
+      processContent(props.generatedContent),
+    );
+    markMap?.setData(root);
+    markMap?.fit();
+  } catch (error: any) {
+    console.error(error);
+  }
+}
+
+/** 处理内容 */
+function processContent(text: string) {
+  const arr: string[] = [];
+  const lines = text.split('\n');
+  for (let line of lines) {
+    if (line.includes('```')) {
+      continue;
+    }
+    // eslint-disable-next-line unicorn/prefer-string-replace-all
+    line = line.replace(/([*_~`>])|(\d+\.)\s/g, '');
+    arr.push(line);
+  }
+  return arr.join('\n');
+}
+
+/** 下载图片：download SVG to png file */
+function downloadImage() {
+  const svgElement = mindMapRef.value;
+  // 将 SVG 渲染到图片对象
+  const serializer = new XMLSerializer();
+  const source = `<?xml version="1.0" standalone="no"?>\r\n${serializer.serializeToString(svgRef.value!)}`;
+  const base64Url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(source)}`;
+  downloadImageByCanvas({
+    url: base64Url,
+    canvasWidth: svgElement?.offsetWidth,
+    canvasHeight: svgElement?.offsetHeight,
+    drawWithImageSize: false,
+  });
+}
+
+defineExpose({
+  scrollBottom() {
+    mdContainerRef.value?.scrollTo(0, mdContainerRef.value?.scrollHeight);
+  },
+});
+</script>
+
+<template>
+  <ElCard class="my-card flex h-full flex-grow flex-col">
+    <template #header>
+      <div class="m-0 flex shrink-0 items-center justify-between px-7">
+        <h3>思维导图预览</h3>
+        <ElButton
+          type="primary"
+          size="small"
+          class="flex"
+          @click="downloadImage"
+        >
+          <template #icon>
+            <div class="flex items-center justify-center">
+              <IconifyIcon icon="lucide:copy" />
+            </div>
+          </template>
+          下载图片
+        </ElButton>
+      </div>
+    </template>
+    <div ref="contentRef" class="hide-scroll-bar box-border h-full">
+      <div
+        v-if="isGenerating"
+        ref="mdContainerRef"
+        class="wh-full overflow-y-auto"
+      >
+        <div
+          class="flex flex-col items-center justify-center"
+          v-html="html"
+        ></div>
+      </div>
+      <div ref="mindMapRef" class="wh-full">
+        <svg
+          ref="svgRef"
+          :style="{ height: `${contentAreaHeight}px` }"
+          class="w-full"
+        />
+        <div ref="toolBarRef" class="absolute bottom-2.5 right-5"></div>
+      </div>
+    </div>
+  </ElCard>
+</template>
+
+<style lang="scss" scoped>
+// 定义一个 mixin 替代 extend
+@mixin hide-scroll-bar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+.hide-scroll-bar {
+  @include hide-scroll-bar;
+}
+
+.my-card {
+  :deep(.el-card__body) {
+    box-sizing: border-box;
+    flex-grow: 1;
+    padding: 0;
+    overflow-y: auto;
+
+    @include hide-scroll-bar;
+  }
+}
+
+// markmap的tool样式覆盖
+:deep(.markmap) {
+  width: 100%;
+}
+
+:deep(.mm-toolbar-brand) {
+  display: none;
+}
+
+:deep(.mm-toolbar) {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/apps/web-ele/src/views/ai/mindmap/manager/data.ts b/apps/web-ele/src/views/ai/mindmap/manager/data.ts
new file mode 100644
index 000000000..967981d40
--- /dev/null
+++ b/apps/web-ele/src/views/ai/mindmap/manager/data.ts
@@ -0,0 +1,97 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择用户',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'prompt',
+      label: '提示词',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入提示词',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      field: 'userId',
+      title: '用户',
+      minWidth: 180,
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
+    },
+    {
+      field: 'prompt',
+      title: '提示词',
+      minWidth: 180,
+    },
+    {
+      field: 'generatedContent',
+      title: '思维导图',
+      minWidth: 300,
+    },
+    {
+      field: 'model',
+      title: '模型',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'errorMessage',
+      title: '错误信息',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/mindmap/manager/index.vue b/apps/web-ele/src/views/ai/mindmap/manager/index.vue
new file mode 100644
index 000000000..3241dc59b
--- /dev/null
+++ b/apps/web-ele/src/views/ai/mindmap/manager/index.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiMindmapApi } from '#/api/ai/mindmap';
+
+import { DocAlert, Page, useVbenDrawer } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMindMap, getMindMapPage } from '#/api/ai/mindmap';
+import { $t } from '#/locales';
+
+import Right from '../index/modules/right.vue';
+import { useGridColumns, useGridFormSchema } from './data';
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  header: false,
+  footer: false,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除思维导图记录 */
+async function handleDelete(row: AiMindmapApi.MindMap) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteMindMap(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 预览思维导图 */
+async function openPreview(row: AiMindmapApi.MindMap) {
+  drawerApi.setData(row.generatedContent).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMindMapPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiMindmapApi.MindMap>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 思维导图" url="https://doc.iocoder.cn/ai/mindmap/" />
+    </template>
+
+    <Drawer class="w-3/5">
+      <Right
+        :generated-content="drawerApi.getData() as any"
+        :is-end="true"
+        :is-generating="false"
+        :is-start="false"
+      />
+    </Drawer>
+    <Grid table-title="思维导图管理列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.cropper.preview'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:api-key:update'],
+              disabled: !row.generatedContent,
+              onClick: openPreview.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:mind-map:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/apiKey/data.ts b/apps/web-ele/src/views/ai/model/apiKey/data.ts
new file mode 100644
index 000000000..1c307ed55
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/apiKey/data.ts
@@ -0,0 +1,147 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'platform',
+      label: '所属平台',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择所属平台',
+        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入名称',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'apiKey',
+      label: '密钥',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入密钥',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'url',
+      label: '自定义 API URL',
+      componentProps: {
+        placeholder: '请输入自定义 API URL',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'platform',
+      label: '平台',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请选择平台',
+        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请选择状态',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'platform',
+      title: '所属平台',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_PLATFORM },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '名称',
+      minWidth: 120,
+    },
+    {
+      field: 'apiKey',
+      title: '密钥',
+      minWidth: 140,
+    },
+    {
+      field: 'url',
+      title: '自定义 API URL',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+      minWidth: 80,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/model/apiKey/index.vue b/apps/web-ele/src/views/ai/model/apiKey/index.vue
new file mode 100644
index 000000000..a6b5181ad
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/apiKey/index.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiModelApiKeyApi } from '#/api/ai/model/apiKey';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteApiKey, getApiKeyPage } from '#/api/ai/model/apiKey';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建 API 密钥 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑 API 密钥 */
+function handleEdit(row: AiModelApiKeyApi.ApiKey) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除 API 密钥 */
+async function handleDelete(row: AiModelApiKeyApi.ApiKey) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteApiKey(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getApiKeyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiModelApiKeyApi.ApiKey>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 手册" url="https://doc.iocoder.cn/ai/build/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="API  密钥列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['API  密钥']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['ai:api-key:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:api-key:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:api-key:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/apiKey/modules/form.vue b/apps/web-ele/src/views/ai/model/apiKey/modules/form.vue
new file mode 100644
index 000000000..c7e5388ea
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/apiKey/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { AiModelApiKeyApi } from '#/api/ai/model/apiKey';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createApiKey, getApiKey, updateApiKey } from '#/api/ai/model/apiKey';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<AiModelApiKeyApi.ApiKey>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['API  密钥'])
+    : $t('ui.actionTitle.create', ['API  密钥']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as AiModelApiKeyApi.ApiKey;
+    try {
+      await (formData.value?.id ? updateApiKey(data) : createApiKey(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<AiModelApiKeyApi.ApiKey>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getApiKey(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/chatRole/data.ts b/apps/web-ele/src/views/ai/model/chatRole/data.ts
new file mode 100644
index 000000000..21dc394de
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/chatRole/data.ts
@@ -0,0 +1,312 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { AiModelTypeEnum, CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getSimpleKnowledgeList } from '#/api/ai/knowledge/knowledge';
+import { getModelSimpleList } from '#/api/ai/model/model';
+import { getToolSimpleList } from '#/api/ai/model/tool';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'formType',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '角色名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入角色名称',
+      },
+    },
+    {
+      component: 'ImageUpload',
+      fieldName: 'avatar',
+      label: '角色头像',
+      rules: 'required',
+    },
+    {
+      fieldName: 'modelId',
+      label: '绑定模型',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择绑定模型',
+        api: () => getModelSimpleList(AiModelTypeEnum.CHAT),
+        labelField: 'name',
+        valueField: 'id',
+        allowClear: true,
+      },
+      dependencies: {
+        triggerFields: ['formType'],
+        show: (values) => {
+          return values.formType === 'create' || values.formType === 'update';
+        },
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'category',
+      label: '角色类别',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入角色类别',
+      },
+      dependencies: {
+        triggerFields: ['formType'],
+        show: (values) => {
+          return values.formType === 'create' || values.formType === 'update';
+        },
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'description',
+      label: '角色描述',
+      componentProps: {
+        placeholder: '请输入角色描述',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'systemMessage',
+      label: '角色设定',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入角色设定',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'knowledgeIds',
+      label: '引用知识库',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择引用知识库',
+        api: getSimpleKnowledgeList,
+        labelField: 'name',
+        mode: 'multiple',
+        valueField: 'id',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'toolIds',
+      label: '引用工具',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择引用工具',
+        api: getToolSimpleList,
+        mode: 'multiple',
+        labelField: 'name',
+        valueField: 'id',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'mcpClientNames',
+      label: '引用 MCP',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择 MCP',
+        options: getDictOptions(DICT_TYPE.AI_MCP_CLIENT_NAME, 'string'),
+        mode: 'multiple',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'publicStatus',
+      label: '是否公开',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+      defaultValue: true,
+      dependencies: {
+        triggerFields: ['formType'],
+        show: (values) => {
+          return values.formType === 'create' || values.formType === 'update';
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '角色排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入角色排序',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      dependencies: {
+        triggerFields: ['formType'],
+        show: (values) => {
+          return values.formType === 'create' || values.formType === 'update';
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      dependencies: {
+        triggerFields: ['formType'],
+        show: (values) => {
+          return values.formType === 'create' || values.formType === 'update';
+        },
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '角色名称',
+      component: 'Input',
+    },
+    {
+      fieldName: 'category',
+      label: '角色类别',
+      component: 'Input',
+    },
+    {
+      fieldName: 'publicStatus',
+      label: '是否公开',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择是否公开',
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        allowClear: true,
+      },
+      defaultValue: true,
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '角色名称',
+      minWidth: 100,
+    },
+    {
+      title: '绑定模型',
+      field: 'modelName',
+      minWidth: 100,
+    },
+    {
+      title: '角色头像',
+      field: 'avatar',
+      minWidth: 140,
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          width: 40,
+          height: 40,
+        },
+      },
+    },
+    {
+      title: '角色类别',
+      field: 'category',
+      minWidth: 100,
+    },
+    {
+      title: '角色描述',
+      field: 'description',
+      minWidth: 100,
+    },
+    {
+      title: '角色设定',
+      field: 'systemMessage',
+      minWidth: 100,
+    },
+    {
+      title: '知识库',
+      field: 'knowledgeIds',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return !cellValue || cellValue.length === 0
+          ? '-'
+          : `引用${cellValue.length}个`;
+      },
+    },
+    {
+      title: '工具',
+      field: 'toolIds',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return !cellValue || cellValue.length === 0
+          ? '-'
+          : `引用${cellValue.length}个`;
+      },
+    },
+    {
+      title: 'MCP',
+      field: 'mcpClientNames',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return !cellValue || cellValue.length === 0
+          ? '-'
+          : `引用${cellValue.length}个`;
+      },
+    },
+    {
+      field: 'publicStatus',
+      title: '是否公开',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+      minWidth: 80,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+      minWidth: 80,
+    },
+    {
+      title: '角色排序',
+      field: 'sort',
+      minWidth: 80,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/model/chatRole/index.vue b/apps/web-ele/src/views/ai/model/chatRole/index.vue
new file mode 100644
index 000000000..16e784047
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/chatRole/index.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiModelChatRoleApi } from '#/api/ai/model/chatRole';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteChatRole, getChatRolePage } from '#/api/ai/model/chatRole';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建聊天角色 */
+function handleCreate() {
+  formModalApi.setData({ formType: 'create' }).open();
+}
+
+/** 编辑聊天角色 */
+function handleEdit(row: AiModelChatRoleApi.ChatRole) {
+  formModalApi.setData({ formType: 'update', ...row }).open();
+}
+
+/** 删除聊天角色 */
+async function handleDelete(row: AiModelChatRoleApi.ChatRole) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteChatRole(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getChatRolePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiModelChatRoleApi.ChatRole>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 对话聊天" url="https://doc.iocoder.cn/ai/chat/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="聊天角色列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['聊天角色']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['ai:chat-role:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:chat-role:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:chat-role:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/chatRole/modules/form.vue b/apps/web-ele/src/views/ai/model/chatRole/modules/form.vue
new file mode 100644
index 000000000..11b9e0eb9
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/chatRole/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { AiModelChatRoleApi } from '#/api/ai/model/chatRole';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createChatRole,
+  getChatRole,
+  updateChatRole,
+} from '#/api/ai/model/chatRole';
+import {} from '#/api/bpm/model';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<AiModelChatRoleApi.ChatRole>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['聊天角色'])
+    : $t('ui.actionTitle.create', ['聊天角色']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as AiModelChatRoleApi.ChatRole;
+    try {
+      await (formData.value?.id ? updateChatRole(data) : createChatRole(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<AiModelChatRoleApi.ChatRole>();
+    if (!data || !data.id) {
+      await formApi.setValues(data);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getChatRole(data.id);
+      // 设置到 values
+      await formApi.setValues({ ...data, ...formData.value });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/model/data.ts b/apps/web-ele/src/views/ai/model/model/data.ts
new file mode 100644
index 000000000..2d798bbdf
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/model/data.ts
@@ -0,0 +1,272 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiModelApiKeyApi } from '#/api/ai/model/apiKey';
+
+import { AiModelTypeEnum, CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getApiKeySimpleList } from '#/api/ai/model/apiKey';
+
+/** 关联数据 */
+let apiKeyList: AiModelApiKeyApi.ApiKey[] = [];
+getApiKeySimpleList().then((data) => (apiKeyList = data));
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'platform',
+      label: '所属平台',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择所属平台',
+        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '模型类型',
+      component: 'Select',
+      componentProps: (values) => {
+        return {
+          placeholder: '请输入模型类型',
+          disabled: !!values.id,
+          options: getDictOptions(DICT_TYPE.AI_MODEL_TYPE, 'number'),
+          allowClear: true,
+        };
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'keyId',
+      label: 'API 秘钥',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择 API 秘钥',
+        api: getApiKeySimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '模型名字',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入模型名字',
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'model',
+      label: '模型标识',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入模型标识',
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '模型排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入模型排序',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'temperature',
+      label: '温度参数',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入温度参数',
+        controlsPosition: 'right',
+        class: '!w-full',
+        min: 0,
+        max: 2,
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [AiModelTypeEnum.CHAT].includes(values.type);
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'maxTokens',
+      label: '回复数 Token 数',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 8192,
+        placeholder: '请输入回复数 Token 数',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [AiModelTypeEnum.CHAT].includes(values.type);
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'maxContexts',
+      label: '上下文数量',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 20,
+        placeholder: '请输入上下文数量',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [AiModelTypeEnum.CHAT].includes(values.type);
+        },
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '模型名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模型名字',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'model',
+      label: '模型标识',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模型标识',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'platform',
+      label: '模型平台',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模型平台',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'platform',
+      title: '所属平台',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_PLATFORM },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'type',
+      title: '模型类型',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_MODEL_TYPE },
+      },
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '模型名字',
+      minWidth: 180,
+    },
+    {
+      title: '模型标识',
+      field: 'model',
+      minWidth: 180,
+    },
+    {
+      title: 'API 秘钥',
+      field: 'keyId',
+      formatter: ({ cellValue }) => {
+        return (
+          apiKeyList.find((apiKey) => apiKey.id === cellValue)?.name || '-'
+        );
+      },
+      minWidth: 140,
+    },
+    {
+      title: '排序',
+      field: 'sort',
+      minWidth: 80,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+      minWidth: 80,
+    },
+    {
+      field: 'temperature',
+      title: '温度参数',
+      minWidth: 100,
+    },
+    {
+      title: '回复数 Token 数',
+      field: 'maxTokens',
+      minWidth: 140,
+    },
+    {
+      title: '上下文数量',
+      field: 'maxContexts',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/model/model/index.vue b/apps/web-ele/src/views/ai/model/model/index.vue
new file mode 100644
index 000000000..04488099c
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/model/index.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiModelModelApi } from '#/api/ai/model/model';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteModel, getModelPage } from '#/api/ai/model/model';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建模型配置 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑模型配置 */
+function handleEdit(row: AiModelModelApi.Model) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除模型配置 */
+async function handleDelete(row: AiModelModelApi.Model) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteModel(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getModelPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiModelModelApi.Model>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 手册" url="https://doc.iocoder.cn/ai/build/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="模型配置列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['模型配置']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['ai:model:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:model:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:model:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/model/modules/form.vue b/apps/web-ele/src/views/ai/model/model/modules/form.vue
new file mode 100644
index 000000000..14a1bdc43
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/model/modules/form.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { AiModelModelApi } from '#/api/ai/model/model';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createModel, getModel, updateModel } from '#/api/ai/model/model';
+import {} from '#/api/bpm/model';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<AiModelModelApi.Model>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['模型配置'])
+    : $t('ui.actionTitle.create', ['模型配置']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as AiModelModelApi.Model;
+    try {
+      await (formData.value?.id ? updateModel(data) : createModel(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<AiModelModelApi.Model>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getModel(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/tool/data.ts b/apps/web-ele/src/views/ai/model/tool/data.ts
new file mode 100644
index 000000000..d8897ed70
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/tool/data.ts
@@ -0,0 +1,123 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '工具名称',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入工具名称',
+      },
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'description',
+      label: '工具描述',
+      componentProps: {
+        placeholder: '请输入工具描述',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      defaultValue: CommonStatusEnum.ENABLE,
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '工具名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工具名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '工具编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '工具名称',
+      minWidth: 120,
+    },
+    {
+      field: 'description',
+      title: '工具描述',
+      minWidth: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+      minWidth: 80,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/model/tool/index.vue b/apps/web-ele/src/views/ai/model/tool/index.vue
new file mode 100644
index 000000000..18c2dd3bb
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/tool/index.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiModelToolApi } from '#/api/ai/model/tool';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteTool, getToolPage } from '#/api/ai/model/tool';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建工具 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑工具 */
+function handleEdit(row: AiModelToolApi.Tool) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除工具 */
+async function handleDelete(row: AiModelToolApi.Tool) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteTool(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getToolPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiModelToolApi.Tool>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="AI 工具调用（function calling）"
+        url="https://doc.iocoder.cn/ai/tool/"
+      />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="工具列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['工具']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['ai:tool:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:tool:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:tool:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/model/tool/modules/form.vue b/apps/web-ele/src/views/ai/model/tool/modules/form.vue
new file mode 100644
index 000000000..afe7c21d4
--- /dev/null
+++ b/apps/web-ele/src/views/ai/model/tool/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { AiModelToolApi } from '#/api/ai/model/tool';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createTool, getTool, updateTool } from '#/api/ai/model/tool';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<AiModelToolApi.Tool>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['工具'])
+    : $t('ui.actionTitle.create', ['工具']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as AiModelToolApi.Tool;
+    try {
+      await (formData.value?.id ? updateTool(data) : createTool(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<AiModelToolApi.Tool>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTool(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/ai/music/manager/data.ts b/apps/web-ele/src/views/ai/music/manager/data.ts
new file mode 100644
index 000000000..7b5c63a32
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/manager/data.ts
@@ -0,0 +1,202 @@
+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 { getDictOptions } from '@vben/hooks';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择用户编号',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '音乐名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入音乐名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '绘画状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择绘画状态',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.AI_MUSIC_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'generateMode',
+      label: '生成模式',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择生成模式',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.AI_GENERATE_MODE, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'publicStatus',
+      label: '是否发布',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择是否发布',
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onPublicStatusChange?: (
+    newStatus: boolean,
+    row: any,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      title: '音乐名称',
+      minWidth: 180,
+      fixed: 'left',
+      field: 'title',
+    },
+    {
+      minWidth: 180,
+      title: '用户',
+      field: 'userId',
+      formatter: ({ cellValue }) => {
+        return userList.find((user) => user.id === cellValue)?.nickname || '-';
+      },
+    },
+    {
+      field: 'status',
+      title: '音乐状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_MUSIC_STATUS },
+      },
+    },
+    {
+      field: 'model',
+      title: '模型',
+      minWidth: 180,
+    },
+    {
+      title: '内容',
+      minWidth: 180,
+      slots: { default: 'content' },
+    },
+    {
+      field: 'duration',
+      title: '时长（秒）',
+      minWidth: 100,
+    },
+    {
+      field: 'prompt',
+      title: '提示词',
+      minWidth: 180,
+    },
+    {
+      field: 'lyric',
+      title: '歌词',
+      minWidth: 180,
+    },
+    {
+      field: 'gptDescriptionPrompt',
+      title: '描述',
+      minWidth: 180,
+    },
+    {
+      field: 'generateMode',
+      title: '生成模式',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_GENERATE_MODE },
+      },
+    },
+    {
+      field: 'tags',
+      title: '风格标签',
+      minWidth: 180,
+      cellRender: {
+        name: 'CellTags',
+      },
+    },
+    {
+      minWidth: 100,
+      title: '是否发布',
+      field: 'publicStatus',
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onPublicStatusChange },
+        name: 'CellSwitch',
+        props: {
+          activeValue: true,
+          inactiveValue: false,
+        },
+      },
+    },
+    {
+      field: 'taskId',
+      title: '任务编号',
+      minWidth: 180,
+    },
+    {
+      field: 'errorMessage',
+      title: '错误信息',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/music/manager/index.vue b/apps/web-ele/src/views/ai/music/manager/index.vue
new file mode 100644
index 000000000..2c27074b0
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/manager/index.vue
@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiMusicApi } from '#/api/ai/music';
+
+import { confirm, DocAlert, Page } from '@vben/common-ui';
+import { AiMusicStatusEnum } from '@vben/constants';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMusic, getMusicPage, updateMusic } from '#/api/ai/music';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除音乐记录 */
+async function handleDelete(row: AiMusicApi.Music) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteMusic(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 修改是否发布 */
+async function handleUpdatePublicStatusChange(
+  newStatus: boolean,
+  row: AiMusicApi.Music,
+): Promise<boolean | undefined> {
+  const text = newStatus ? '公开' : '私有';
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `确认要将该音乐切换为【${text}】吗？`,
+    })
+      .then(async () => {
+        // 更新音乐状态
+        await updateMusic({
+          id: row.id,
+          publicStatus: newStatus,
+        });
+        // 提示并返回成功
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleUpdatePublicStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMusicPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiMusicApi.Music>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 音乐创作" url="https://doc.iocoder.cn/ai/music/" />
+    </template>
+    <Grid table-title="音乐管理列表">
+      <template #toolbar-tools>
+        <TableAction :actions="[]" />
+      </template>
+
+      <template #content="{ row }">
+        <ElButton
+          type="primary"
+          link
+          v-if="row.audioUrl?.length > 0"
+          :href="row.audioUrl"
+          target="_blank"
+          class="p-0"
+        >
+          音乐
+        </ElButton>
+        <ElButton
+          type="primary"
+          link
+          v-if="row.videoUrl?.length > 0"
+          :href="row.videoUrl"
+          target="_blank"
+          class="p-0 !pl-1"
+        >
+          视频
+        </ElButton>
+        <ElButton
+          type="primary"
+          link
+          v-if="row.imageUrl?.length > 0"
+          :href="row.imageUrl"
+          target="_blank"
+          class="p-0 !pl-1"
+        >
+          封面
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:music:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/write/index/index.vue b/apps/web-ele/src/views/ai/write/index/index.vue
new file mode 100644
index 000000000..04b55144b
--- /dev/null
+++ b/apps/web-ele/src/views/ai/write/index/index.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { AiWriteApi } from '#/api/ai/write';
+
+import { nextTick, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { WriteExample } from '@vben/constants';
+
+import { ElMessage } from 'element-plus';
+
+import { writeStream } from '#/api/ai/write';
+
+import Left from './modules/left.vue';
+import Right from './modules/right.vue';
+
+const writeResult = ref(''); // 写作结果
+const isWriting = ref(false); // 是否正在写作中
+const abortController = ref<AbortController>(); // // 写作进行中 abort 控制器(控制 stream 写作)
+
+const rightRef = ref<InstanceType<typeof Right>>(); // 写作面板
+
+/** 提交写作 */
+function handleSubmit(data: Partial<AiWriteApi.Write>) {
+  abortController.value = new AbortController();
+  writeResult.value = '';
+  isWriting.value = true;
+  writeStream({
+    data,
+    onMessage: async (res: any) => {
+      const { code, data, msg } = JSON.parse(res.data);
+      if (code !== 0) {
+        ElMessage.error(`写作异常! ${msg}`);
+        handleStopStream();
+        return;
+      }
+      writeResult.value = writeResult.value + data;
+      // 滚动到底部
+      await nextTick();
+      rightRef.value?.scrollToBottom();
+    },
+    ctrl: abortController.value,
+    onClose: handleStopStream,
+    onError: (error: any) => {
+      console.error('写作异常', error);
+      handleStopStream();
+      // 需要抛出异常，禁止重试
+      throw error;
+    },
+  });
+}
+
+/** 停止 stream 生成 */
+function handleStopStream() {
+  abortController.value?.abort();
+  isWriting.value = false;
+}
+
+/** 点击示例触发 */
+function handleExampleClick(type: keyof typeof WriteExample) {
+  writeResult.value = WriteExample[type].data;
+}
+
+/** 点击重置的时候清空写作的结果*/
+function handleReset() {
+  writeResult.value = '';
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="absolute bottom-0 left-0 right-0 top-0 m-4 flex">
+      <Left
+        :is-writing="isWriting"
+        class="mr-4 h-full rounded-lg"
+        @submit="handleSubmit"
+        @reset="handleReset"
+        @example="handleExampleClick"
+      />
+      <Right
+        :is-writing="isWriting"
+        @stop-stream="handleStopStream"
+        ref="rightRef"
+        class="flex-grow"
+        v-model:content="writeResult"
+      />
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/write/index/modules/left.vue b/apps/web-ele/src/views/ai/write/index/modules/left.vue
new file mode 100644
index 000000000..7d69a277b
--- /dev/null
+++ b/apps/web-ele/src/views/ai/write/index/modules/left.vue
@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import type { AiWriteApi } from '#/api/ai/write';
+
+import { ref } from 'vue';
+
+import { AiWriteTypeEnum, DICT_TYPE, WriteExample } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import { createReusableTemplate } from '@vueuse/core';
+import { ElButton, ElInput, ElMessage } from 'element-plus';
+
+import Tag from './tag.vue';
+
+type TabType = AiWriteApi.Write['type'];
+
+defineProps<{
+  isWriting: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'example', param: 'reply' | 'write'): void;
+  (e: 'reset'): void;
+  (e: 'submit', params: Partial<AiWriteApi.Write>): void;
+}>();
+
+function omit(obj: Record<string, any>, keysToOmit: string[]) {
+  const result: Record<string, any> = {};
+  for (const key in obj) {
+    if (!keysToOmit.includes(key)) {
+      result[key] = obj[key];
+    }
+  }
+  return result;
+}
+
+/** 点击示例的时候，将定义好的文章作为示例展示出来 */
+function example(type: 'reply' | 'write') {
+  formData.value = {
+    ...initData,
+    ...omit(WriteExample[type], ['data']),
+  };
+  emit('example', type);
+}
+
+/** 重置，将表单值作为初选值 */
+function reset() {
+  formData.value = { ...initData };
+  emit('reset');
+}
+
+const selectedTab = ref<TabType>(AiWriteTypeEnum.WRITING);
+const tabs: {
+  text: string;
+  value: TabType;
+}[] = [
+  { text: '撰写', value: AiWriteTypeEnum.WRITING },
+  { text: '回复', value: AiWriteTypeEnum.REPLY },
+];
+const [DefineTab, ReuseTab] = createReusableTemplate<{
+  active?: boolean;
+  itemClick: () => void;
+  text: string;
+}>();
+
+const [DefineLabel, ReuseLabel] = createReusableTemplate<{
+  class?: string;
+  hint?: string;
+  hintClick?: () => void;
+  label: string;
+}>();
+
+const initData: AiWriteApi.Write = {
+  type: 1,
+  prompt: '',
+  originalContent: '',
+  tone: 1,
+  language: 1,
+  length: 1,
+  format: 1,
+};
+const formData = ref<AiWriteApi.Write>({ ...initData });
+const recordFormData = {} as Record<AiWriteTypeEnum, AiWriteApi.Write>; // 用来记录切换之前所填写的数据，切换的时候给赋值回来
+
+/** 切换 tab */
+function handleSwitchTab(value: TabType) {
+  if (value !== selectedTab.value) {
+    // 保存之前的久数据
+    recordFormData[selectedTab.value] = formData.value;
+    selectedTab.value = value;
+    // 将之前的旧数据赋值回来
+    formData.value = { ...initData, ...recordFormData[value] };
+  }
+}
+
+/** 提交写作 */
+function handleSubmit() {
+  if (
+    selectedTab.value === AiWriteTypeEnum.REPLY &&
+    !formData.value.originalContent
+  ) {
+    ElMessage.warning('请输入原文');
+    return;
+  }
+  if (!formData.value.prompt) {
+    ElMessage.warning(`请输入${selectedTab.value === 1 ? '写作' : '回复'}内容`);
+    return;
+  }
+
+  emit('submit', {
+    // 撰写的时候没有 originalContent 字段
+    ...(selectedTab.value === 1
+      ? omit(formData.value, ['originalContent'])
+      : formData.value),
+    // 使用选中 tab 值覆盖当前的 type 类型
+    type: selectedTab.value,
+  });
+}
+</script>
+
+<template>
+  <DefineTab v-slot="{ active, text, itemClick }">
+    <span
+      :class="
+        active ? 'bg-primary-600 text-white shadow-md' : 'hover:bg-primary-200'
+      "
+      class="relative z-10 inline-block w-1/2 cursor-pointer rounded-full text-center leading-7 hover:text-black"
+      @click="itemClick"
+    >
+      {{ text }}
+    </span>
+  </DefineTab>
+  <!-- 定义 label 组件：长度/格式/语气/语言等 -->
+  <DefineLabel v-slot="{ label, hint, hintClick }">
+    <h3 class="mb-3 mt-5 flex items-center justify-between text-sm">
+      <span>{{ label }}</span>
+      <span
+        v-if="hint"
+        class="text-primary-500 flex cursor-pointer select-none items-center text-xs"
+        @click="hintClick"
+      >
+        <IconifyIcon icon="lucide:circle-help" />
+        {{ hint }}
+      </span>
+    </h3>
+  </DefineLabel>
+  <div class="flex flex-col" v-bind="$attrs">
+    <div class="bg-card flex w-full justify-center pt-2">
+      <div class="bg-card z-10 w-72 rounded-full p-1">
+        <div
+          :class="
+            selectedTab === AiWriteTypeEnum.REPLY &&
+            'after:translate-x-[100%] after:transform'
+          "
+          class="after:bg-card relative flex items-center after:absolute after:left-0 after:top-0 after:block after:h-7 after:w-1/2 after:rounded-full after:transition-transform after:content-['']"
+        >
+          <ReuseTab
+            v-for="tab in tabs"
+            :key="tab.value"
+            :active="tab.value === selectedTab"
+            :item-click="() => handleSwitchTab(tab.value)"
+            :text="tab.text"
+            class="relative z-20"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="bg-card box-border h-full w-96 flex-grow overflow-y-auto px-7 pb-2 lg:block"
+    >
+      <div>
+        <template v-if="selectedTab === AiWriteTypeEnum.WRITING">
+          <ReuseLabel
+            :hint-click="() => example('write')"
+            hint="示例"
+            label="写作内容"
+          />
+          <ElInput
+            v-model="formData.prompt"
+            type="textarea"
+            :maxlength="500"
+            :rows="5"
+            :input-style="{ boxShadow: 'none' }"
+            resize="none"
+            placeholder="请输入写作内容"
+            show-word-limit
+          />
+        </template>
+        <template v-else>
+          <ReuseLabel
+            :hint-click="() => example('reply')"
+            hint="示例"
+            label="原文"
+          />
+          <ElInput
+            v-model="formData.originalContent"
+            type="textarea"
+            :maxlength="500"
+            :rows="5"
+            :input-style="{ boxShadow: 'none' }"
+            resize="none"
+            placeholder="请输入原文"
+            show-word-limit
+          />
+          <ReuseLabel label="回复内容" />
+          <ElInput
+            v-model="formData.prompt"
+            type="textarea"
+            :maxlength="500"
+            :rows="5"
+            :input-style="{ boxShadow: 'none' }"
+            resize="none"
+            placeholder="请输入回复内容"
+            show-word-limit
+          />
+        </template>
+
+        <ReuseLabel label="长度" />
+        <Tag
+          v-model="formData.length"
+          :tags="getDictOptions(DICT_TYPE.AI_WRITE_LENGTH, 'number')"
+        />
+        <ReuseLabel label="格式" />
+        <Tag
+          v-model="formData.format"
+          :tags="getDictOptions(DICT_TYPE.AI_WRITE_FORMAT, 'number')"
+        />
+        <ReuseLabel label="语气" />
+        <Tag
+          v-model="formData.tone"
+          :tags="getDictOptions(DICT_TYPE.AI_WRITE_TONE, 'number')"
+        />
+        <ReuseLabel label="语言" />
+        <Tag
+          v-model="formData.language"
+          :tags="getDictOptions(DICT_TYPE.AI_WRITE_LANGUAGE, 'number')"
+        />
+
+        <div class="mt-3 flex items-center justify-center">
+          <ElButton :disabled="isWriting" class="mr-2" @click="reset">
+            重置
+          </ElButton>
+          <ElButton type="primary" :loading="isWriting" @click="handleSubmit">
+            生成
+          </ElButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/write/index/modules/right.vue b/apps/web-ele/src/views/ai/write/index/modules/right.vue
new file mode 100644
index 000000000..262a33554
--- /dev/null
+++ b/apps/web-ele/src/views/ai/write/index/modules/right.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useClipboard } from '@vueuse/core';
+import { ElButton, ElCard, ElInput, ElMessage } from 'element-plus';
+
+const props = defineProps({
+  content: {
+    type: String,
+    default: '',
+  }, // 生成的结果
+  isWriting: {
+    type: Boolean,
+    default: false,
+  }, // 是否正在生成文章
+});
+
+const emits = defineEmits(['update:content', 'stopStream']);
+const { copied, copy } = useClipboard();
+
+/** 通过计算属性，双向绑定，更改生成的内容，考虑到用户想要更改生成文章的情况 */
+const compContent = computed({
+  get() {
+    return props.content;
+  },
+  set(val) {
+    emits('update:content', val);
+  },
+});
+
+/** 滚动 */
+const contentRef = ref<HTMLDivElement>();
+defineExpose({
+  scrollToBottom() {
+    contentRef.value?.scrollTo(0, contentRef.value?.scrollHeight);
+  },
+});
+
+/** 点击复制的时候复制内容 */
+const showCopy = computed(() => props.content && !props.isWriting); // 是否展示复制按钮，在生成内容完成的时候展示
+function copyContent() {
+  copy(props.content);
+}
+
+/** 复制成功的时候 copied.value 为 true */
+watch(copied, (val) => {
+  if (val) {
+    ElMessage.success('复制成功');
+  }
+});
+</script>
+<template>
+  <ElCard class="flex h-full flex-col">
+    <template #header>
+      <h3 class="m-0 flex shrink-0 items-center justify-between px-7">
+        <span>预览</span>
+        <ElButton
+          type="primary"
+          v-show="showCopy"
+          @click="copyContent"
+          size="small"
+        >
+          <IconifyIcon icon="lucide:copy" />
+          复制
+        </ElButton>
+      </h3>
+    </template>
+    <div
+      ref="contentRef"
+      class="hide-scroll-bar box-border h-full overflow-y-auto"
+    >
+      <div
+        class="bg-card relative box-border min-h-full w-full flex-grow p-2 sm:p-5"
+      >
+        <ElButton
+          v-show="isWriting"
+          class="absolute bottom-1 left-1/2 z-40 flex -translate-x-1/2 sm:bottom-2"
+          @click="emits('stopStream')"
+          size="small"
+        >
+          <template #icon>
+            <div class="flex items-center justify-center">
+              <IconifyIcon icon="lucide:ban" />
+            </div>
+          </template>
+          终止生成
+        </ElButton>
+        <ElInput
+          id="inputId"
+          v-model="compContent"
+          type="textarea"
+          autosize
+          :input-style="{ boxShadow: 'none' }"
+          resize="none"
+          placeholder="生成的内容……"
+        />
+      </div>
+    </div>
+  </ElCard>
+</template>
+
+<style lang="scss" scoped>
+// 定义一个 mixin 替代 extend
+@mixin hide-scroll-bar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+}
+
+.hide-scroll-bar {
+  @include hide-scroll-bar;
+}
+
+.my-card {
+  :deep(.el-card__body) {
+    box-sizing: border-box;
+    flex-grow: 1;
+    padding: 0;
+    overflow-y: auto;
+
+    @include hide-scroll-bar;
+  }
+}
+
+// markmap 的 tool 样式覆盖
+:deep(.markmap) {
+  width: 100%;
+}
+
+:deep(.mm-toolbar-brand) {
+  display: none;
+}
+
+:deep(.mm-toolbar) {
+  display: flex;
+  flex-direction: row;
+}
+</style>
diff --git a/apps/web-ele/src/views/ai/write/index/modules/tag.vue b/apps/web-ele/src/views/ai/write/index/modules/tag.vue
new file mode 100644
index 000000000..f199a8dd1
--- /dev/null
+++ b/apps/web-ele/src/views/ai/write/index/modules/tag.vue
@@ -0,0 +1,33 @@
+<!-- 标签选项 -->
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    [k: string]: any;
+    modelValue: string;
+    tags?: { label: string; value: string }[];
+  }>(),
+  {
+    tags: () => [],
+  },
+);
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-2">
+    <span
+      v-for="tag in props.tags"
+      :key="tag.value"
+      class="bg-card border-card-100 mb-2 cursor-pointer rounded border-2 border-solid px-1 text-xs leading-6"
+      :class="
+        modelValue === tag.value && '!border-primary-500 !text-primary-500'
+      "
+      @click="emits('update:modelValue', tag.value)"
+    >
+      {{ tag.label }}
+    </span>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/write/manager/data.ts b/apps/web-ele/src/views/ai/write/manager/data.ts
new file mode 100644
index 000000000..02f39e8e5
--- /dev/null
+++ b/apps/web-ele/src/views/ai/write/manager/data.ts
@@ -0,0 +1,171 @@
+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 { getDictOptions } from '@vben/hooks';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择用户',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '写作类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请选择写作类型',
+        options: getDictOptions(DICT_TYPE.AI_WRITE_TYPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'platform',
+      label: '平台',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请选择平台',
+        options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 180,
+      fixed: 'left',
+    },
+    {
+      minWidth: 180,
+      title: '用户',
+      field: 'userId',
+      formatter: ({ cellValue }) => {
+        return userList.find((user) => user.id === cellValue)?.nickname || '-';
+      },
+    },
+    {
+      field: 'type',
+      title: '写作类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_WRITE_TYPE },
+      },
+    },
+    {
+      field: 'platform',
+      title: '平台',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_WRITE_TYPE },
+      },
+    },
+    {
+      field: 'model',
+      title: '模型',
+      minWidth: 180,
+    },
+    {
+      field: 'prompt',
+      title: '生成内容提示',
+      minWidth: 180,
+    },
+    {
+      field: 'generatedContent',
+      title: '生成的内容',
+      minWidth: 180,
+    },
+    {
+      field: 'originalContent',
+      title: '原文',
+      minWidth: 180,
+    },
+    {
+      field: 'length',
+      title: '长度',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_WRITE_LENGTH },
+      },
+    },
+    {
+      field: 'format',
+      title: '格式',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_WRITE_FORMAT },
+      },
+    },
+    {
+      field: 'tone',
+      title: '语气',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_WRITE_TONE },
+      },
+    },
+    {
+      field: 'language',
+      title: '语言',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.AI_WRITE_LANGUAGE },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'errorMessage',
+      title: '错误信息',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/write/manager/index.vue b/apps/web-ele/src/views/ai/write/manager/index.vue
new file mode 100644
index 000000000..fa73240a4
--- /dev/null
+++ b/apps/web-ele/src/views/ai/write/manager/index.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiWriteApi } from '#/api/ai/write';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteWrite, getWritePage } from '#/api/ai/write';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除写作记录 */
+async function handleDelete(row: AiWriteApi.Write) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteWrite(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWritePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiWriteApi.Write>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 写作助手" url="https://doc.iocoder.cn/ai/write/" />
+    </template>
+    <Grid table-title="写作管理列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:write:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/comment/index.vue b/apps/web-ele/src/views/mall/product/comment/index.vue
index 3297dd47a..373dbe7c0 100644
--- a/apps/web-ele/src/views/mall/product/comment/index.vue
+++ b/apps/web-ele/src/views/mall/product/comment/index.vue
@@ -71,17 +71,13 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateCommentVisible({
+        await updateCommentVisible({
           id: row.id!,
           visible: newStatus,
         });
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error($t('ui.actionMessage.operationFailed')));
-        }
+        // 提示并返回成功
+        ElMessage.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-ele/src/views/mall/product/spu/index.vue b/apps/web-ele/src/views/mall/product/spu/index.vue
index 6151bb088..61ae8d8d0 100644
--- a/apps/web-ele/src/views/mall/product/spu/index.vue
+++ b/apps/web-ele/src/views/mall/product/spu/index.vue
@@ -136,17 +136,13 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateStatus({
+        await updateStatus({
           id: row.id as number,
           status: newStatus,
         });
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error($t('ui.actionMessage.operationFailed')));
-        }
+        // 提示并返回成功
+        ElMessage.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
index 0b937b980..a3181d594 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../util';
+import type { ComponentStyle, DiyComponent } from '../util';
 
 import { computed } from 'vue';
 
@@ -10,9 +7,10 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElButton, ElTooltip } from 'element-plus';
 
-import { components } from './mobile';
 import { VerticalButtonGroup } from '#/views/mall/promotion/components';
 
+import { components } from './mobile';
+
 /**
  * 组件容器：目前在中间部分
  * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index b4635a763..4220ad08b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  DiyComponent,
-  DiyComponentLibrary,
-} from '../util';
+import type { DiyComponent, DiyComponentLibrary } from '../util';
 
 import { reactive, watch } from 'vue';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
index 514f45e89..f63a0bcb6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 轮播图属性 */
 export interface CarouselProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
index ad75bf3c7..1e23b0e32 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
@@ -16,11 +16,12 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 轮播图属性面板
 defineOptions({ name: 'CarouselProperty' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
index 89cc71703..4392494d3 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品卡片属性 */
 export interface CouponCardProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
index f2ae0146e..9778fdd62 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
@@ -24,9 +24,10 @@ import {
 } from 'element-plus';
 
 import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 // TODO: 添加组件
 // import CouponSelect from '#/views/mall/promotion/coupon/components/coupon-select.vue';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
index b20a14b55..f59459a3f 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import type { HotZoneItemProperty } from '../../config';
 import type { ControlDot } from './controller';
 
-import type { HotZoneItemProperty } from '../../config';
 import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
 
 import { ref } from 'vue';
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
index fdb06b983..464881740 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 热区属性 */
 export interface HotZoneProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
index 9c16c1a14..bb3ebb667 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -6,9 +6,9 @@ import { ref } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { ElButton, ElForm, ElFormItem, ElText } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
 
 /** 热区属性面板 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
index 1d2c4ac01..0025ff4db 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 图片展示属性 */
 export interface ImageBarProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
index 14ee9ad13..a379a8613 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
@@ -4,10 +4,11 @@ import type { ImageBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 图片展示属性面板
 defineOptions({ name: 'ImageBarProperty' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
index ff9cbb8f0..ef03fc9a6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 广告魔方属性 */
 export interface MagicCubeProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
index 7dad8a3f8..1f23095c6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -6,13 +6,14 @@ import { ref } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElSlider, ElText } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
   MagicCubeEditor,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 /** 广告魔方属性面板 */
 defineOptions({ name: 'MagicCubeProperty' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
index 65bc9f4ca..db6b55264 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
index ef2df4ae7..9db7ac2ad 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
@@ -11,10 +11,10 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
 
 /** 宫格导航属性面板 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
index 389982595..6567c553d 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
index e31b02e77..c5b076936 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
@@ -4,7 +4,6 @@ import type { MenuListProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElText } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
@@ -12,6 +11,7 @@ import {
   InputWithColor,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
 
 /** 列表导航属性面板 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
index b73213ac7..27138ebee 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
index e8e1637e7..54f58eae5 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
@@ -13,7 +13,6 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
@@ -22,6 +21,7 @@ import {
   InputWithColor,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
 
 /** 菜单导航属性面板 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
index 28376f73e..9e3b17a07 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import type { StyleValue } from 'vue';
 
+import type { SearchProperty } from '../search-bar/config';
 import type {
   NavigationBarCellProperty,
   NavigationBarProperty,
 } from './config';
 
-import type { SearchProperty } from '../search-bar/config';
-
 import { computed } from 'vue';
 
 import appNavbarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
+
 import SearchBar from '../search-bar/index.vue';
 
 /** 页面顶部导航栏 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
index 9eb1ca8e1..2d4acffb2 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 公告栏属性 */
 export interface NoticeBarProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
index e6fef5313..055aa2e10 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
@@ -4,7 +4,6 @@ import type { NoticeBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
@@ -12,6 +11,8 @@ import {
   Draggable,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 通知栏属性面板
 defineOptions({ name: 'NoticeBarProperty' });
 const props = defineProps<{ modelValue: NoticeBarProperty }>();
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
index 1dd88d7b8..d165b01f6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品卡片属性 */
 export interface ProductCardProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
index 069dcabdc..20b4d37af 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品栏属性 */
 export interface ProductListProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
index 55b0cf03c..8e941b599 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
@@ -15,9 +15,10 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
 // TODO: 添加组件
 // import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
index c477994aa..9a1fc4194 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 营销文章属性 */
 export interface PromotionArticleProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
index eb53a3072..7a701c54f 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -9,6 +9,7 @@ import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElOption, ElSelect } from 'element-plus';
 
 import * as ArticleApi from '#/api/mall/promotion/article/index';
+
 import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 营销文章属性面板
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
index 3860ccd56..f0497dc19 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 拼团属性 */
 export interface PromotionCombinationProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
index bdb5cacc4..738ca3b31 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 积分商城属性 */
 export interface PromotionPointProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
index 289fc4e80..a38d9455b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 秒杀属性 */
 export interface PromotionSeckillProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
index d30952a02..01d5894d1 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 搜索框属性 */
 export interface SearchProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
index 5aa4da7c1..5e1822078 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
@@ -18,9 +18,10 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import { Draggable } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 /** 搜索框属性面板 */
 defineOptions({ name: 'SearchProperty' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
index 71a61cef8..f442e7dc5 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 标题栏属性 */
 export interface TitleBarProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
index 97d78c16c..1fdafb90a 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
@@ -16,13 +16,14 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import {
   AppLinkInput,
   InputWithColor,
 } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 导航栏属性面板
 defineOptions({ name: 'TitleBarProperty' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
index 7cb187c28..2dae34da2 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡片属性 */
 export interface UserCardProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
index 5b5728185..7e5dcd1f9 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡券属性 */
 export interface UserCouponProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
index 5cea121ac..25ca85065 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户订单属性 */
 export interface UserOrderProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
index dd9c56d31..2b10d32fb 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户资产属性 */
 export interface UserWalletProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
index ec160c0bc..bc9195575 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 视频播放属性 */
 export interface VideoPlayerProperty {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
index cb2e8e4bd..67c355905 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
@@ -4,10 +4,11 @@ import type { VideoPlayerProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElSlider, ElSwitch } from 'element-plus';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 视频播放属性面板
 defineOptions({ name: 'VideoPlayerProperty' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
index f9f7d9c89..5afc427a9 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
@@ -10,7 +10,6 @@ import { cloneDeep, isEmpty, isString } from '@vben/utils';
 import { useQRCode } from '@vueuse/integrations/useQRCode';
 import {
   ElAside,
-  ElButtonGroup,
   ElCard,
   ElContainer,
   ElDialog,
@@ -20,18 +19,14 @@ import {
   ElText,
   ElTooltip,
 } from 'element-plus';
-import draggable from 'vuedraggable';
 
 import statusBarImg from '#/assets/imgs/diy/statusBar.png';
-import {
-  componentConfigs,
-  components,
-} from './components/mobile';
-import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 
 import ComponentContainer from './components/component-container.vue';
 import ComponentLibrary from './components/component-library.vue';
+import { componentConfigs, components } from './components/mobile';
 import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
+import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
 /** 页面装修详情页 */
 defineOptions({
@@ -266,13 +261,13 @@ const handleDeleteComponent = (index: number) => {
   }
 };
 
-// 注入无感刷新页面函数
-const reload = inject<() => void>('reload'); // TODO @芋艿：是 vue3 + element-plus 独有的，可以清理掉。
-// 重置
-const handleReset = () => {
-  if (reload) reload();
-  emits('reset');
-};
+// // 注入无感刷新页面函数
+// const reload = inject<() => void>('reload'); // TODO @芋艿：是 vue3 + element-plus 独有的，可以清理掉。
+// // 重置
+// const handleReset = () => {
+//   if (reload) reload();
+//   emits('reset');
+// };
 
 // 预览
 const previewDialogVisible = ref(false);
@@ -312,35 +307,40 @@ onMounted(() => {
           <span>{{ title }}</span>
         </div>
         <!-- 右侧操作区 -->
-        <ElButtonGroup class="header-right">
-          <ElTooltip content="重置">
+        <div class="header-right">
+          <ElTooltip title="重置">
             <ElButton @click="handleReset">
               <IconifyIcon :size="24" icon="system-uicons:reset-alt" />
             </ElButton>
           </ElTooltip>
-          <ElTooltip v-if="previewUrl" content="预览">
+          <ElTooltip v-if="previewUrl" title="预览">
             <ElButton @click="handlePreview">
               <IconifyIcon :size="24" icon="ep:view" />
             </ElButton>
           </ElTooltip>
-          <ElTooltip content="保存">
+          <ElTooltip title="保存">
             <ElButton @click="handleSave">
               <IconifyIcon :size="24" icon="ep:check" />
             </ElButton>
           </ElTooltip>
-        </ElButtonGroup>
+        </div>
       </ElHeader>
 
       <!-- 中心区域 -->
       <ElContainer class="editor-container">
         <!-- 左侧：组件库（ComponentLibrary） -->
-        <ComponentLibrary
-          v-if="libs && libs.length > 0"
-          ref="componentLibrary"
-          :list="libs"
-        />
+        <ElAside width="200px" class="editor-left">
+          <ComponentLibrary
+            v-if="libs && libs.length > 0"
+            ref="componentLibrary"
+            :list="libs"
+          />
+        </ElAside>
         <!-- 中心：设计区域（ComponentContainer） -->
-        <div class="editor-center page-prop-area" @click="handlePageSelected">
+        <ElContainer
+          class="editor-center page-prop-area"
+          @click="handlePageSelected"
+        >
           <!-- 手机顶部 -->
           <div class="editor-design-top">
             <!-- 手机顶部状态栏 -->
@@ -371,15 +371,7 @@ onMounted(() => {
             />
           </div>
           <!-- 手机页面编辑区域 -->
-          <ElScrollbar
-            :view-style="{
-              backgroundColor: pageConfigComponent.property.backgroundColor,
-              backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
-            }"
-            view-class="phone-container"
-            wrap-class="editor-design-center page-prop-area"
-            style="height: calc(100vh - 135px - 120px)"
-          >
+          <ElScrollbar class="phone-container">
             <draggable
               v-model="pageComponents"
               :animation="200"
@@ -424,42 +416,36 @@ onMounted(() => {
           <div class="fixed-component-action-group gap-2">
             <ElTag
               v-if="showPageConfig"
-              :effect="
+              :color="
                 selectedComponent?.uid === pageConfigComponent.uid
-                  ? 'dark'
-                  : 'plain'
-              "
-              :type="
-                selectedComponent?.uid === pageConfigComponent.uid
-                  ? 'primary'
-                  : 'info'
+                  ? 'blue'
+                  : 'default'
               "
+              :bordered="false"
               size="large"
               @click="handleComponentSelected(pageConfigComponent)"
             >
               <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
-              <span>{{ pageConfigComponent.name }}</span>
+              <ElText>{{ pageConfigComponent.name }}</ElText>
             </ElTag>
             <template v-for="(component, index) in pageComponents" :key="index">
               <ElTag
                 v-if="component.position === 'fixed'"
-                :effect="
-                  selectedComponent?.uid === component.uid ? 'dark' : 'plain'
-                "
-                :type="
-                  selectedComponent?.uid === component.uid ? 'primary' : 'info'
+                :color="
+                  selectedComponent?.uid === component.uid ? 'blue' : 'default'
                 "
+                :bordered="false"
                 closable
                 size="large"
                 @click="handleComponentSelected(component)"
                 @close="handleDeleteComponent(index)"
               >
                 <IconifyIcon :icon="component.icon" :size="12" />
-                <span>{{ component.name }}</span>
+                <ElText>{{ component.name }}</ElText>
               </ElTag>
             </template>
           </div>
-        </div>
+        </ElContainer>
         <!-- 右侧：属性面板（ComponentContainerProperty） -->
         <ElAside
           v-if="selectedComponent?.property"
@@ -469,13 +455,13 @@ onMounted(() => {
           <ElCard
             body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
             class="h-full"
-            shadow="never"
+            :bordered="false"
           >
             <!-- 组件名称 -->
             <template #header>
               <div class="flex items-center gap-2">
                 <IconifyIcon :icon="selectedComponent?.icon" color="gray" />
-                <span>{{ selectedComponent?.name }}</span>
+                <ElText>{{ selectedComponent?.name }}</ElText>
               </div>
             </template>
             <ElScrollbar
@@ -494,7 +480,7 @@ onMounted(() => {
     </ElContainer>
 
     <!-- 预览弹框 -->
-    <ElDialog v-model="previewDialogVisible" title="预览" width="700">
+    <ElDialog v-model:open="previewDialogVisible" title="预览" width="700">
       <div class="flex justify-around">
         <IFrame
           :src="previewUrl"
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/template/index.vue b/apps/web-ele/src/views/mall/promotion/coupon/template/index.vue
index 95be66c76..cbe999341 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/template/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/template/index.vue
@@ -65,14 +65,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新优惠券模板状态
-        const res = await updateCouponTemplateStatus(row.id!, newStatus);
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success($t('ui.actionMessage.operationSuccess'));
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        await updateCouponTemplateStatus(row.id!, newStatus);
+        // 提示并返回成功
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue b/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue
index 3cd551129..073c763c2 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/seckill/config/index.vue
@@ -64,14 +64,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateSeckillConfigStatus(row.id, newStatus);
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error($t('ui.actionMessage.operationFailed')));
-        }
+        await updateSeckillConfigStatus(row.id, newStatus);
+        // 提示并返回成功
+        ElMessage.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-ele/src/views/pay/app/index.vue b/apps/web-ele/src/views/pay/app/index.vue
index 6dfe7f8e5..57920fe12 100644
--- a/apps/web-ele/src/views/pay/app/index.vue
+++ b/apps/web-ele/src/views/pay/app/index.vue
@@ -71,17 +71,13 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新状态
-        const res = await updateAppStatus({
+        await updateAppStatus({
           id: row.id!,
           status: newStatus,
         });
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success(`${text}成功`);
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        // 提示并返回成功
+        ElMessage.success(`${text}成功`);
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-ele/src/views/system/user/index.vue b/apps/web-ele/src/views/system/user/index.vue
index 8eedb7023..e56a89878 100644
--- a/apps/web-ele/src/views/system/user/index.vue
+++ b/apps/web-ele/src/views/system/user/index.vue
@@ -142,14 +142,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新用户状态
-        const res = await updateUserStatus(row.id!, newStatus);
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success($t('ui.actionMessage.operationSuccess'));
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        await updateUserStatus(row.id!, newStatus);
+        // 提示并返回成功
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-naive/src/views/system/user/index.vue b/apps/web-naive/src/views/system/user/index.vue
index 0dd926595..29c5a28a0 100644
--- a/apps/web-naive/src/views/system/user/index.vue
+++ b/apps/web-naive/src/views/system/user/index.vue
@@ -144,14 +144,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新用户状态
-        const res = await updateUserStatus(row.id!, newStatus);
-        if (res) {
-          // 提示并返回成功
-          message.success($t('ui.actionMessage.operationSuccess'));
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        await updateUserStatus(row.id!, newStatus);
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/packages/constants/src/dict-enum.ts b/packages/constants/src/dict-enum.ts
index 7ced37eb7..c2ffca955 100644
--- a/packages/constants/src/dict-enum.ts
+++ b/packages/constants/src/dict-enum.ts
@@ -143,6 +143,7 @@ const AI_DICT = {
   AI_WRITE_LENGTH: 'ai_write_length', // AI 写作长度
   AI_WRITE_TONE: 'ai_write_tone', // AI 写作语气
   AI_WRITE_TYPE: 'ai_write_type', // AI 写作类型
+  AI_MCP_CLIENT_NAME: 'ai_mcp_client_name', // AI MCP Client 名字
 } as const;
 
 /** ========== IOT - 物联网模块 ========== */
diff --git a/packages/effects/common-ui/src/components/statistic-card/index.ts b/packages/effects/common-ui/src/components/card/statistic-card/index.ts
similarity index 99%
rename from packages/effects/common-ui/src/components/statistic-card/index.ts
rename to packages/effects/common-ui/src/components/card/statistic-card/index.ts
index d27e5db66..7305e5e68 100644
--- a/packages/effects/common-ui/src/components/statistic-card/index.ts
+++ b/packages/effects/common-ui/src/components/card/statistic-card/index.ts
@@ -1,4 +1,3 @@
 // add by 芋艿：统计卡片，目前 mall 模块在使用
 export { default as StatisticCard } from './statistic-card.vue';
 export * from './types';
-
diff --git a/packages/effects/common-ui/src/components/statistic-card/statistic-card.vue b/packages/effects/common-ui/src/components/card/statistic-card/statistic-card.vue
similarity index 94%
rename from packages/effects/common-ui/src/components/statistic-card/statistic-card.vue
rename to packages/effects/common-ui/src/components/card/statistic-card/statistic-card.vue
index 1315597aa..d48b40d62 100644
--- a/packages/effects/common-ui/src/components/statistic-card/statistic-card.vue
+++ b/packages/effects/common-ui/src/components/card/statistic-card/statistic-card.vue
@@ -59,7 +59,9 @@ withDefaults(defineProps<StatisticCardProps>(), {
           {{ Math.abs(Number(percent ?? 0)).toFixed(2) }}%
           <VbenIcon
             :icon="
-              Number(percent) > 0 ? 'lucide:trending-up' : 'lucide:trending-down'
+              Number(percent) > 0
+                ? 'lucide:trending-up'
+                : 'lucide:trending-down'
             "
             class="size-3"
           />
@@ -68,4 +70,3 @@ withDefaults(defineProps<StatisticCardProps>(), {
     </CardContent>
   </Card>
 </template>
-
diff --git a/packages/effects/common-ui/src/components/statistic-card/types.ts b/packages/effects/common-ui/src/components/card/statistic-card/types.ts
similarity index 99%
rename from packages/effects/common-ui/src/components/statistic-card/types.ts
rename to packages/effects/common-ui/src/components/card/statistic-card/types.ts
index 2fe168151..acc36a57b 100644
--- a/packages/effects/common-ui/src/components/statistic-card/types.ts
+++ b/packages/effects/common-ui/src/components/card/statistic-card/types.ts
@@ -14,4 +14,3 @@ export interface StatisticCardProps {
   /** 环比标签文本 */
   percentLabel?: string;
 }
-
diff --git a/packages/effects/common-ui/src/components/summary-card/index.ts b/packages/effects/common-ui/src/components/card/summary-card/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/components/summary-card/index.ts
rename to packages/effects/common-ui/src/components/card/summary-card/index.ts
diff --git a/packages/effects/common-ui/src/components/summary-card/summary-card.vue b/packages/effects/common-ui/src/components/card/summary-card/summary-card.vue
similarity index 100%
rename from packages/effects/common-ui/src/components/summary-card/summary-card.vue
rename to packages/effects/common-ui/src/components/card/summary-card/summary-card.vue
diff --git a/packages/effects/common-ui/src/components/summary-card/types.ts b/packages/effects/common-ui/src/components/card/summary-card/types.ts
similarity index 100%
rename from packages/effects/common-ui/src/components/summary-card/types.ts
rename to packages/effects/common-ui/src/components/card/summary-card/types.ts
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
index 7fcd97199..45409d5f9 100644
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -11,8 +11,8 @@ export * from './json-viewer';
 export * from './loading';
 export * from './page';
 export * from './resize';
-export * from './statistic-card';
-export * from './summary-card';
+export * from './card/statistic-card';
+export * from './card/summary-card';
 export * from './tippy';
 export * from './tree';
 export * from '@vben-core/form-ui';