Merge remote-tracking branch 'yudao/dev' into dev

2025-11-15 22:02:48 +08:00
parent 22c1d5b2ec 1aa15ae62a
commit aa76dd09e7
619 changed files with 48454 additions and 4138 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -189,10 +189,7 @@
  ],

  "github.copilot.enable": {
-    "*": true,
-    "markdown": true,
-    "plaintext": false,
-    "yaml": false
+    "*": false
  },

  "cssVariables.lookupFiles": ["packages/core/base/design/src/**/*.css"],
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@

 ## 🐶 新手必读

- nodejs > 20.10.0 && pnpm > 10.14.0 (强制使用pnpm)
+- nodejs > 20.12.0 && pnpm > 10.14.0 (强制使用pnpm)
 - 演示地址【Vue3 + element-plus】：<http://dashboard-vue3.yudao.iocoder.cn>
 - 演示地址【Vue3 + vben5(ant-design-vue)】：<http://dashboard-vben.yudao.iocoder.cn>
 - 演示地址【Vue2 + element-ui】：<http://dashboard.yudao.iocoder.cn>
@@ -21,7 +21,7 @@
 **芋道**，以开发者为中心，打造中国第一流的快速开发平台，全部开源，个人与企业可 100% 免费使用。

 - 采用最新 [vue-vben-admin](https://github.com/vbenjs/vue-vben-admin) v5 实现
- 支持 [Ant Design Vue](https://www.antdv.com/) | [Element Plus](https://element-plus.org/zh-CN/) | [Naive UI](https://www.naiveui.com/) 多种免费开源的中后台模版，具备如下特性：
+- 支持 [Ant Design Vue](https://www.antdv.com/) | [Element Plus](https://element-plus.org/zh-CN/) | [Naive UI](https://www.naiveui.com/) | [TDesign](https://tdesign.tencent.com/) 多种免费开源的中后台模版，具备如下特性：

 ![首页](.image/demo/vben.png)

@@ -46,12 +46,14 @@
 | [Ant Design Vue](https://www.antdv.com/) | Ant Design Vue | 4.2.6 |
 | [Element Plus](https://element-plus.org/zh-CN/) | Element Plus | 2.10.2 |
 | [Naive UI](https://www.naiveui.com/) | Naive UI | 2.42.0 |
+| [TDesign](https://tdesign.tencent.com/) | TDesign | 1.17.1 |
 | [TypeScript](https://www.typescriptlang.org/docs/) | JavaScript 超集 | 5.8.3 |
 | [pinia](https://pinia.vuejs.org/) | Vue 存储库替代 vuex5 | 3.0.3 |
 | [vueuse](https://vueuse.org/) | 常用工具集 | 13.4.0 |
 | [vue-i18n](https://kazupon.github.io/vue-i18n/zh/introduction.html/) | 国际化 | 11.1.7 |
 | [vue-router](https://router.vuejs.org/) | Vue 路由 | 4.5.1 |
 | [Tailwind CSS](https://tailwindcss.com/) | 原子 CSS | 3.4.17 |
+| [Iconify](https://iconify.design/) | 图标组件 | 5.0.0 |
 | [Iconify](https://icon-sets.iconify.design/) | 在线图标库 | 2.2.354 |
 | [TinyMCE](https://www.tiny.cloud/) | 富文本编辑器 | 6.1.0 |
 | [Echarts](https://echarts.apache.org/) | 图表库 | 5.6.0 |
--- a/apps/web-antd/src/api/ai/chat/message/index.ts
+++ b/apps/web-antd/src/api/ai/chat/message/index.ts
@@ -8,6 +8,7 @@ import { requestClient } from '#/api/request';

 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
 const accessStore = useAccessStore();
+
 export namespace AiChatMessageApi {
  export interface ChatMessage {
    id: number; // 编号
@@ -18,6 +19,7 @@ export namespace AiChatMessageApi {
    model: number; // 模型标志
    modelId: number; // 模型编号
    content: string; // 聊天内容
+    reasoningContent?: string; // 推理内容（深度思考）
    tokens: number; // 消耗 Token 数量
    segmentIds?: number[]; // 段落编号
    segments?: {
@@ -26,10 +28,22 @@ export namespace AiChatMessageApi {
      documentName: string; // 文档名称
      id: number; // 段落编号
    }[];
+    webSearchPages?: WebSearchPage[]; // 联网搜索结果
+    attachmentUrls?: string[]; // 附件 URL 数组
    createTime: Date; // 创建时间
    roleAvatar: string; // 角色头像
    userAvatar: string; // 用户头像
  }
+
+  /** 联网搜索页面接口 */
+  export interface WebSearchPage {
+    name: string; // 网站名称
+    icon: string; // 网站图标 URL
+    title: string; // 页面标题
+    url: string; // 页面 URL
+    snippet: string; // 简短描述
+    summary: string; // 内容摘要
+  }
 }

 // 消息列表
@@ -47,9 +61,11 @@ export function sendChatMessageStream(
  content: string,
  ctrl: any,
  enableContext: boolean,
+  enableWebSearch: boolean,
  onMessage: any,
  onError: any,
  onClose: any,
+  attachmentUrls?: string[],
 ) {
  const token = accessStore.accessToken;
  return fetchEventSource(`${apiURL}/ai/chat/message/send-stream`, {
@@ -63,6 +79,8 @@ export function sendChatMessageStream(
      conversationId,
      content,
      useContext: enableContext,
+      useSearch: enableWebSearch,
+      attachmentUrls: attachmentUrls || [],
    }),
    onmessage: onMessage,
    onerror: onError,
--- a/apps/web-antd/src/api/ai/image/index.ts
+++ b/apps/web-antd/src/api/ai/image/index.ts
@@ -9,7 +9,8 @@ export namespace AiImageApi {
    label: string; // Make Variations 文本
    style: number; // 样式: 2（Primary）、3（Green）
  }
-  // AI 绘图
+
+  /** AI 绘图 */
  export interface Image {
    id: number; // 编号
    userId: number;
@@ -83,6 +84,7 @@ export function deleteImageMy(id: number) {
 }

 // ================ midjourney 专属 ================
+
 // 【Midjourney】生成图片
 export function midjourneyImagine(data: AiImageApi.ImageMidjourneyImagineReq) {
  return requestClient.post(`/ai/image/midjourney/imagine`, data);
@@ -94,6 +96,7 @@ export function midjourneyAction(data: AiImageApi.ImageMidjourneyAction) {
 }

 // ================ 绘图管理 ================
+
 // 查询绘画分页
 export function getImagePage(params: any) {
  return requestClient.get<AiImageApi.Image[]>(`/ai/image/page`, { params });
--- a/apps/web-antd/src/api/ai/knowledge/document/index.ts
+++ b/apps/web-antd/src/api/ai/knowledge/document/index.ts
@@ -26,10 +26,12 @@ export function getKnowledgeDocumentPage(params: PageParam) {
 export function getKnowledgeDocument(id: number) {
  return requestClient.get(`/ai/knowledge/document/get?id=${id}`);
 }
+
 // 新增知识库文档（单个）
 export function createKnowledge(data: any) {
  return requestClient.post('/ai/knowledge/document/create', data);
 }
+
 // 新增知识库文档（多个）
 export function createKnowledgeDocumentList(data: any) {
  return requestClient.post('/ai/knowledge/document/create-list', data);
@@ -44,6 +46,7 @@ export function updateKnowledgeDocument(data: any) {
 export function updateKnowledgeDocumentStatus(data: any) {
  return requestClient.put('/ai/knowledge/document/update-status', data);
 }
+
 // 删除知识库文档
 export function deleteKnowledgeDocument(id: number) {
  return requestClient.delete(`/ai/knowledge/document/delete?id=${id}`);
--- a/apps/web-antd/src/api/ai/knowledge/knowledge/index.ts
+++ b/apps/web-antd/src/api/ai/knowledge/knowledge/index.ts
@@ -27,6 +27,7 @@ export function getKnowledge(id: number) {
    `/ai/knowledge/get?id=${id}`,
  );
 }
+
 // 新增知识库
 export function createKnowledge(data: AiKnowledgeKnowledgeApi.Knowledge) {
  return requestClient.post('/ai/knowledge/create', data);
--- a/apps/web-antd/src/api/ai/knowledge/segment/index.ts
+++ b/apps/web-antd/src/api/ai/knowledge/segment/index.ts
@@ -32,6 +32,7 @@ export function getKnowledgeSegment(id: number) {
    `/ai/knowledge/segment/get?id=${id}`,
  );
 }
+
 // 新增知识库分段
 export function createKnowledgeSegment(
  data: AiKnowledgeSegmentApi.KnowledgeSegment,
@@ -47,9 +48,13 @@ export function updateKnowledgeSegment(
 }

 // 修改知识库分段状态
-export function updateKnowledgeSegmentStatus(data: any) {
-  return requestClient.put('/ai/knowledge/segment/update-status', data);
+export function updateKnowledgeSegmentStatus(id: number, status: number) {
+  return requestClient.put('/ai/knowledge/segment/update-status', {
+    id,
+    status,
+  });
 }
+
 // 删除知识库分段
 export function deleteKnowledgeSegment(id: number) {
  return requestClient.delete(`/ai/knowledge/segment/delete?id=${id}`);
--- a/apps/web-antd/src/api/ai/workflow/index.ts
+++ b/apps/web-antd/src/api/ai/workflow/index.ts
@@ -2,28 +2,48 @@ import type { PageParam, PageResult } from '@vben/request';

 import { requestClient } from '#/api/request';

-export function getWorkflowPage(params: PageParam) {
-  return requestClient.get<PageResult<any>>('/ai/workflow/page', {
-    params,
-  });
+export namespace AiWorkflowApi {
+  /** 工作流 */
+  export interface Workflow {
+    id?: number; // 编号
+    name: string; // 工作流名称
+    code: string; // 工作流标识
+    graph: string; // 工作流模型 JSON 数据
+    remark?: string; // 备注
+    status: number; // 状态
+    createTime?: Date; // 创建时间
+  }
 }

-export const getWorkflow = (id: number | string) => {
-  return requestClient.get(`/ai/workflow/get?id=${id}`);
-};
+/** 查询工作流管理列表 */
+export function getWorkflowPage(params: PageParam) {
+  return requestClient.get<PageResult<AiWorkflowApi.Workflow>>(
+    '/ai/workflow/page',
+    { params },
+  );
+}

-export const createWorkflow = (data: any) => {
+/** 查询工作流详情 */
+export function getWorkflow(id: number) {
+  return requestClient.get<AiWorkflowApi.Workflow>(`/ai/workflow/get?id=${id}`);
+}
+
+/** 新增工作流 */
+export function createWorkflow(data: AiWorkflowApi.Workflow) {
  return requestClient.post('/ai/workflow/create', data);
-};
+}

-export const updateWorkflow = (data: any) => {
+/** 修改工作流 */
+export function updateWorkflow(data: AiWorkflowApi.Workflow) {
  return requestClient.put('/ai/workflow/update', data);
-};
+}

-export const deleteWorkflow = (id: number | string) => {
+/** 删除工作流 */
+export function deleteWorkflow(id: number) {
  return requestClient.delete(`/ai/workflow/delete?id=${id}`);
-};
+}

-export const testWorkflow = (data: any) => {
+/** 测试工作流 */
+export function testWorkflow(data: any) {
  return requestClient.post('/ai/workflow/test', data);
-};
+}
--- a/apps/web-antd/src/api/mall/promotion/kefu/conversation/index.ts
+++ b/apps/web-antd/src/api/mall/promotion/kefu/conversation/index.ts
@@ -1,5 +1,3 @@
-import type { PageResult } from '@vben/request';
-
 import { requestClient } from '#/api/request';

 export namespace MallKefuConversationApi {
@@ -28,7 +26,7 @@ export namespace MallKefuConversationApi {

 /** 获得客服会话列表 */
 export function getConversationList() {
-  return requestClient.get<PageResult<MallKefuConversationApi.Conversation>>(
+  return requestClient.get<MallKefuConversationApi.Conversation[]>(
    '/promotion/kefu-conversation/list',
  );
 }
--- a/apps/web-antd/src/api/mp/account/index.ts
+++ b/apps/web-antd/src/api/mp/account/index.ts
@@ -5,18 +5,19 @@ import { requestClient } from '#/api/request';
 export namespace MpAccountApi {
  /** 公众号账号信息 */
  export interface Account {
-    id?: number;
+    id: number;
    name: string;
-    account: string;
-    appId: string;
-    appSecret: string;
-    token: string;
+    account?: string;
+    appId?: string;
+    appSecret?: string;
+    token?: string;
    aesKey?: string;
    qrCodeUrl?: string;
    remark?: string;
    createTime?: Date;
  }

+  // TODO @dylan：这个直接使用 Account，简化一点；
  export interface AccountSimple {
    id: number;
    name: string;
--- a/apps/web-antd/src/components/table-action/icons.ts
+++ b/apps/web-antd/src/components/table-action/icons.ts
@@ -11,4 +11,5 @@ export const ACTION_ICON = {
  VIEW: 'lucide:eye',
  COPY: 'lucide:copy',
  CLOSE: 'lucide:x',
+  BOOK: 'lucide:book',
 };
--- a/apps/web-antd/src/locales/langs/en-US/page.json
+++ b/apps/web-antd/src/locales/langs/en-US/page.json
@@ -29,5 +29,11 @@
  "tenant": {
    "placeholder": "Please select tenant",
    "success": "Switch tenant success"
+  },
+  "mp": {
+    "upload": {
+      "invalidFormat": "Invalid {0} format!",
+      "maxSize": "{0} size cannot exceed {1}M!"
+    }
  }
 }
--- a/apps/web-antd/src/locales/langs/zh-CN/page.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/page.json
@@ -29,5 +29,11 @@
  "tenant": {
    "placeholder": "请选择租户",
    "success": "切换租户成功"
+  },
+  "mp": {
+    "upload": {
+      "invalidFormat": "上传{0}格式不对!",
+      "maxSize": "上传{0}大小不能超过{1}M!"
+    }
  }
 }
--- a/apps/web-antd/src/plugins/form-create/index.ts
+++ b/apps/web-antd/src/plugins/form-create/index.ts
@@ -96,7 +96,6 @@ export function setupFormCreate(app: App) {
  components.forEach((component) => {
    app.component(component.name as string, component);
  });
-  // TODO @xingyu：这里为啥 app.component('AMessage', message); 看官方是没有的； 需要额外引入
  app.component('AMessage', message);
  formCreate.use(install);
  app.use(formCreate);
--- a/apps/web-antd/src/store/mall/kefu.ts
+++ b/apps/web-antd/src/store/mall/kefu.ts
@@ -5,7 +5,10 @@ import { isEmpty } from '@vben/utils';

 import { acceptHMRUpdate, defineStore } from 'pinia';

-import * as KeFuConversationApi from '#/api/mall/promotion/kefu/conversation';
+import {
+  getConversation,
+  getConversationList,
+} from '#/api/mall/promotion/kefu/conversation';

 interface MallKefuInfoVO {
  conversationList: MallKefuConversationApi.Conversation[]; // 会话列表
@@ -41,9 +44,7 @@ export const useMallKefuStore = defineStore('mall-kefu', {
    // ======================= 会话相关 =======================
    /** 加载会话缓存列表 */
    async setConversationList() {
-      // TODO @jave：idea linter 告警，修复下；
-      // TODO @jave：不使用 KeFuConversationApi.，直接用 getConversationList
-      this.conversationList = await KeFuConversationApi.getConversationList();
+      this.conversationList = await getConversationList();
      this.conversationSort();
    },
    /** 更新会话缓存已读 */
@@ -51,8 +52,11 @@ export const useMallKefuStore = defineStore('mall-kefu', {
      if (isEmpty(this.conversationList)) {
        return;
      }
-      const conversation = this.conversationList.find(
-        (item) => item.id === conversationId,
+      const conversationList = this
+        .conversationList as MallKefuConversationApi.Conversation[];
+      const conversation = conversationList.find(
+        (item: MallKefuConversationApi.Conversation) =>
+          item.id === conversationId,
      );
      conversation && (conversation.adminUnreadMessageCount = 0);
    },
@@ -62,10 +66,16 @@ export const useMallKefuStore = defineStore('mall-kefu', {
        return;
      }

-      const conversation =
-        await KeFuConversationApi.getConversation(conversationId);
+      const conversation = await getConversation(conversationId);
      this.deleteConversation(conversationId);
-      conversation && this.conversationList.push(conversation);
+      if (conversation && this.conversationList) {
+        const conversationList = this
+          .conversationList as MallKefuConversationApi.Conversation[];
+        this.conversationList = [
+          ...conversationList,
+          conversation as MallKefuConversationApi.Conversation,
+        ];
+      }
      this.conversationSort();
    },
    /** 删除会话缓存 */
--- a/apps/web-antd/src/views/ai/chat/index/index.vue
+++ b/apps/web-antd/src/views/ai/chat/index/index.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// TODO @gjd：https://t.zsxq.com/pmNb1 AI 对话、绘图底部没对齐，特别是样式方面
 import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
 import type { AiChatMessageApi } from '#/api/ai/chat/message';

@@ -18,12 +17,13 @@ import {
  sendChatMessageStream,
 } from '#/api/ai/chat/message';

-import ConversationList from './components/conversation/ConversationList.vue';
-import ConversationUpdateForm from './components/conversation/ConversationUpdateForm.vue';
-import MessageList from './components/message/MessageList.vue';
-import MessageListEmpty from './components/message/MessageListEmpty.vue';
-import MessageLoading from './components/message/MessageLoading.vue';
-import MessageNewConversation from './components/message/MessageNewConversation.vue';
+import ConversationList from './modules/conversation/list.vue';
+import ConversationUpdateForm from './modules/conversation/update-form.vue';
+import MessageFileUpload from './modules/message/file-upload.vue';
+import MessageListEmpty from './modules/message/list-empty.vue';
+import MessageList from './modules/message/list.vue';
+import MessageLoading from './modules/message/loading.vue';
+import MessageNewConversation from './modules/message/new-conversation.vue';

 /** AI 聊天对话 列表 */
 defineOptions({ name: 'AiChat' });
@@ -33,6 +33,7 @@ const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: ConversationUpdateForm,
  destroyOnClose: true,
 });
+
 // 聊天对话
 const conversationListRef = ref();
 const activeConversationId = ref<null | number>(null); // 选中的对话编号
@@ -56,6 +57,8 @@ const conversationInAbortController = ref<any>(); // 对话进行中 abort 控
 const inputTimeout = ref<any>(); // 处理输入中回车的定时器
 const prompt = ref<string>(); // prompt
 const enableContext = ref<boolean>(true); // 是否开启上下文
+const enableWebSearch = ref<boolean>(false); // 是否开启联网搜索
+const uploadFiles = ref<string[]>([]); // 上传的文件 URL 列表
 // 接收 Stream 消息
 const receiveMessageFullText = ref('');
 const receiveMessageDisplayedText = ref('');
@@ -87,7 +90,7 @@ async function handleConversationClick(
 ) {
  // 对话进行中，不允许切换
  if (conversationInProgress.value) {
-    alert('对话中，不允许切换!');
+    await alert('对话中，不允许切换!');
    return false;
  }

@@ -97,9 +100,12 @@ async function handleConversationClick(
  // 刷新 message 列表
  await getMessageList();
  // 滚动底部
-  scrollToBottom(true);
+  await scrollToBottom(true);
+  prompt.value = '';
  // 清空输入框
  prompt.value = '';
+  // 清空文件列表
+  uploadFiles.value = [];
  return true;
 }

@@ -117,19 +123,23 @@ async function handlerConversationDelete(
 async function handleConversationClear() {
  // 对话进行中，不允许切换
  if (conversationInProgress.value) {
-    alert('对话中，不允许切换!');
+    await alert('对话中，不允许切换!');
    return false;
  }
  activeConversationId.value = null;
  activeConversation.value = null;
  activeMessageList.value = [];
+  // 清空输入框和文件列表
+  prompt.value = '';
+  uploadFiles.value = [];
 }

 async function openChatConversationUpdateForm() {
  formModalApi.setData({ id: activeConversationId.value }).open();
 }
+
+/** 对话更新成功，刷新最新信息 */
 async function handleConversationUpdateSuccess() {
-  // 对话更新成功，刷新最新信息
  await getConversation(activeConversationId.value);
 }

@@ -138,10 +148,13 @@ async function handleConversationCreate() {
  // 创建对话
  await conversationListRef.value.createConversation();
 }
+
 /** 处理聊天对话的创建成功 */
 async function handleConversationCreateSuccess() {
  // 创建新的对话，清空输入框
  prompt.value = '';
+  // 清空文件列表
+  uploadFiles.value = [];
 }

 // =========== 【消息列表】相关 ===========
@@ -228,6 +241,7 @@ function handleGoTopMessage() {
 }

 // =========== 【发送消息】相关 ===========
+
 /** 处理来自 keydown 的发送消息 */
 async function handleSendByKeydown(event: any) {
  // 判断用户是否在输入
@@ -282,7 +296,6 @@ function onCompositionstart() {
 }

 function onCompositionend() {
-  // console.log('输入结束...')
  setTimeout(() => {
    isComposing.value = false;
  }, 200);
@@ -299,12 +312,19 @@ async function doSendMessage(content: string) {
    message.error('还没创建对话，不能发送!');
    return;
  }
-  // 清空输入框
+
+  // 准备附件 URL 数组
+  const attachmentUrls = [...uploadFiles.value];
+
+  // 清空输入框和文件列表
  prompt.value = '';
+  uploadFiles.value = [];
+
  // 执行发送
  await doSendMessageStream({
    conversationId: activeConversationId.value,
    content,
+    attachmentUrls,
  } as AiChatMessageApi.ChatMessage);
 }

@@ -325,6 +345,7 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
        conversationId: activeConversationId.value,
        type: 'user',
        content: userMessage.content,
+        attachmentUrls: userMessage.attachmentUrls || [],
        createTime: new Date(),
      } as AiChatMessageApi.ChatMessage,
      {
@@ -332,6 +353,7 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
        conversationId: activeConversationId.value,
        type: 'assistant',
        content: '思考中...',
+        reasoningContent: '',
        createTime: new Date(),
      } as AiChatMessageApi.ChatMessage,
    );
@@ -339,7 +361,7 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
    await nextTick();
    await scrollToBottom(); // 底部
    // 1.3 开始滚动
-    textRoll();
+    textRoll().then();

    // 2. 发送 event stream
    let isFirstChunk = true; // 是否是第一个 chunk 消息段
@@ -348,17 +370,23 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
      userMessage.content,
      conversationInAbortController.value,
      enableContext.value,
+      enableWebSearch.value,
      async (res: any) => {
        const { code, data, msg } = JSON.parse(res.data);
        if (code !== 0) {
-          alert(`对话异常! ${msg}`);
+          await alert(`对话异常! ${msg}`);
+          // 如果未接收到消息，则进行删除
+          if (receiveMessageFullText.value === '') {
+            activeMessageList.value.pop();
+          }
          return;
        }

-        // 如果内容为空，就不处理。
-        if (data.receive.content === '') {
+        // 如果内容和推理内容都为空，就不处理
+        if (data.receive.content === '' && !data.receive.reasoningContent) {
          return;
        }
+
        // 首次返回需要添加一个 message 到页面，后面的都是更新
        if (isFirstChunk) {
          isFirstChunk = false;
@@ -367,15 +395,31 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
          activeMessageList.value.pop();
          // 更新返回的数据
          activeMessageList.value.push(data.send, data.receive);
+          data.send.attachmentUrls = userMessage.attachmentUrls;
        }
-        // debugger
-        receiveMessageFullText.value =
-          receiveMessageFullText.value + data.receive.content;
+
+        // 处理 reasoningContent
+        if (data.receive.reasoningContent) {
+          const lastMessage =
+            activeMessageList.value[activeMessageList.value.length - 1];
+          // 累加推理内容
+          lastMessage.reasoningContent =
+            (lastMessage.reasoningContent || '') +
+            data.receive.reasoningContent;
+        }
+
+        // 处理正常内容
+        if (data.receive.content !== '') {
+          receiveMessageFullText.value =
+            receiveMessageFullText.value + data.receive.content;
+        }
+
        // 滚动到最下面
        await scrollToBottom();
      },
      (error: any) => {
-        alert(`对话异常! ${error}`);
+        // 异常提示，并停止流
+        alert(`对话异常!`);
        stopStream();
        // 需要抛出异常，禁止重试
        throw error;
@@ -383,6 +427,7 @@ async function doSendMessageStream(userMessage: AiChatMessageApi.ChatMessage) {
      () => {
        stopStream();
      },
+      userMessage.attachmentUrls,
    );
  } catch {}
 }
@@ -490,11 +535,6 @@ onMounted(async () => {
  activeMessageListLoading.value = true;
  await getMessageList();
 });
-// TODO @芋艿：深度思考
-// TODO @芋艿：联网搜索
-// TODO @芋艿：附件支持
-// TODO @芋艿：mcp 相关
-// TODO @芋艿：异常消息的处理
 </script>

 <template>
@@ -514,7 +554,7 @@ onMounted(async () => {
      <!-- 右侧：详情部分 -->
      <Layout class="bg-card mx-4">
        <Layout.Header
-          class="!bg-card border-border flex !h-12 items-center justify-between border-b"
+          class="!bg-card border-border flex !h-12 items-center justify-between border-b !px-4"
        >
          <div class="text-lg font-bold">
            {{ activeConversation?.title ? activeConversation?.title : '对话' }}
@@ -573,8 +613,10 @@ onMounted(async () => {
          </div>
        </Layout.Content>

-        <Layout.Footer class="!bg-card m-0 flex flex-col p-0">
-          <form class="border-border m-2 flex flex-col rounded-xl border p-2">
+        <Layout.Footer class="!bg-card flex flex-col !p-0">
+          <form
+            class="border-border mx-4 mb-8 mt-2 flex flex-col rounded-xl border p-2"
+          >
            <textarea
              class="box-border h-24 resize-none overflow-auto rounded-md p-2 focus:outline-none"
              v-model="prompt"
@@ -585,9 +627,19 @@ onMounted(async () => {
              placeholder="问我任何问题...（Shift+Enter 换行，按下 Enter 发送）"
            ></textarea>
            <div class="flex justify-between pb-0 pt-1">
-              <div class="flex items-center">
-                <Switch v-model:checked="enableContext" />
-                <span class="ml-1 text-sm text-gray-400">上下文</span>
+              <div class="flex items-center gap-3">
+                <MessageFileUpload
+                  v-model="uploadFiles"
+                  :disabled="conversationInProgress"
+                />
+                <div class="flex items-center">
+                  <Switch v-model:checked="enableContext" size="small" />
+                  <span class="ml-1 text-sm text-gray-400">上下文</span>
+                </div>
+                <div class="flex items-center">
+                  <Switch v-model:checked="enableWebSearch" size="small" />
+                  <span class="ml-1 text-sm text-gray-400">联网搜索</span>
+                </div>
              </div>
              <Button
                type="primary"
--- a/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue
@@ -19,9 +19,8 @@ import {
 } from '#/api/ai/chat/conversation';
 import { $t } from '#/locales';

-import RoleRepository from '../role/RoleRepository.vue';
+import RoleRepository from '../role/repository.vue';

-// 定义组件 props
 const props = defineProps({
  activeId: {
    type: [Number, null] as PropType<null | number>,
@@ -29,7 +28,6 @@ const props = defineProps({
  },
 });

-// 定义钩子
 const emits = defineEmits([
  'onConversationCreate',
  'onConversationClick',
@@ -41,7 +39,6 @@ const [Drawer, drawerApi] = useVbenDrawer({
  connectedComponent: RoleRepository,
 });

-// 定义属性
 const searchName = ref<string>(''); // 对话搜索
 const activeConversationId = ref<null | number>(null); // 选中的对话，默认为 null
 const hoverConversationId = ref<null | number>(null); // 悬浮上去的对话
@@ -180,7 +177,7 @@ async function updateConversationTitle(
  conversation: AiChatConversationApi.ChatConversation,
 ) {
  // 1. 二次确认
-  prompt({
+  await prompt({
    async beforeClose(scope) {
      if (scope.isConfirm) {
        if (scope.value) {
@@ -202,8 +199,7 @@ async function updateConversationTitle(
            if (
              filterConversationList.length > 0 &&
              filterConversationList[0] && // tip：避免切换对话
-              activeConversationId.value ===
-                (filterConversationList[0].id as number)
+              activeConversationId.value === filterConversationList[0].id!
            ) {
              emits('onConversationClick', filterConversationList[0]);
            }
@@ -252,9 +248,9 @@ async function handleClearConversation() {
    await confirm('确认后对话会全部清空，置顶的对话除外。');
    await deleteChatConversationMyByUnpinned();
    message.success($t('ui.actionMessage.operationSuccess'));
-    // 清空 对话 和 对话内容
+    // 清空对话、对话内容
    activeConversationId.value = null;
-    // 获取 对话列表
+    // 获取对话列表
    await getChatConversationList();
    // 回调 方法
    emits('onConversationClear');
@@ -283,7 +279,6 @@ watch(activeId, async (newValue) => {
  activeConversationId.value = newValue;
 });

-// 定义 public 方法
 defineExpose({ createConversation });

 /** 初始化 */
@@ -298,7 +293,7 @@ onMounted(async () => {
    if (conversationList.value.length > 0 && conversationList.value[0]) {
      activeConversationId.value = conversationList.value[0].id;
      // 回调 onConversationClick
-      await emits('onConversationClick', conversationList.value[0]);
+      emits('onConversationClick', conversationList.value[0]);
    }
  }
 });
@@ -357,17 +352,20 @@ onMounted(async () => {
            class="mt-1"
          >
            <div
-              class="mb-2 flex cursor-pointer flex-row items-center justify-between rounded-lg px-2 leading-10"
+              class="mb-2 flex cursor-pointer flex-row items-center justify-between rounded-lg px-2 leading-10 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
              :class="[
-                conversation.id === activeConversationId ? 'bg-success' : '',
+                conversation.id === activeConversationId
+                  ? 'bg-primary/10 dark:bg-primary/20'
+                  : '',
              ]"
            >
              <div class="flex items-center">
                <Avatar
                  v-if="conversation.roleAvatar"
                  :src="conversation.roleAvatar"
+                  :size="28"
                />
-                <SvgGptIcon v-else class="size-8" />
+                <SvgGptIcon v-else class="size-6" />
                <span
                  class="max-w-32 overflow-hidden text-ellipsis whitespace-nowrap p-2 text-sm font-normal"
                >
--- a/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationUpdateForm.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationUpdateForm.vue
@@ -25,7 +25,7 @@ const [Form, formApi] = useVbenForm({
      class: 'w-full',
    },
    formItemClass: 'col-span-2',
-    labelWidth: 140,
+    labelWidth: 110,
  },
  layout: 'horizontal',
  schema: useFormSchema(),
--- a/apps/web-antd/src/views/ai/chat/index/modules/message/file-upload.vue
+++ b/apps/web-antd/src/views/ai/chat/index/modules/message/file-upload.vue
@@ -0,0 +1,304 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { formatFileSize, getFileIcon } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { useUpload } from '#/components/upload/use-upload';
+
+export interface FileItem {
+  name: string;
+  size: number;
+  url?: string;
+  uploading?: boolean;
+  progress?: number;
+  raw?: File;
+}
+
+const props = withDefaults(
+  defineProps<{
+    acceptTypes?: string;
+    disabled?: boolean;
+    limit?: number;
+    maxSize?: number;
+    modelValue?: string[];
+  }>(),
+  {
+    modelValue: () => [],
+    limit: 5,
+    maxSize: 10,
+    acceptTypes:
+      '.jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.txt,.xls,.xlsx,.ppt,.pptx,.csv,.md',
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string[]];
+  uploadError: [error: any];
+  uploadSuccess: [file: FileItem];
+}>();
+
+const fileInputRef = ref<HTMLInputElement>();
+const fileList = ref<FileItem[]>([]);
+const uploadedUrls = ref<string[]>([]);
+const showTooltip = ref(false);
+const hideTimer = ref<NodeJS.Timeout | null>(null);
+const { httpRequest } = useUpload();
+
+/** 监听 v-model 变化 */
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    uploadedUrls.value = [...newVal];
+    if (newVal.length === 0) {
+      fileList.value = [];
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+/** 是否有文件 */
+const hasFiles = computed(() => fileList.value.length > 0);
+
+/** 是否达到上传限制 */
+const isLimitReached = computed(() => fileList.value.length >= props.limit);
+
+/** 触发文件选择 */
+function triggerFileInput() {
+  fileInputRef.value?.click();
+}
+
+/** 显示 tooltip */
+function showTooltipHandler() {
+  if (hideTimer.value) {
+    clearTimeout(hideTimer.value);
+    hideTimer.value = null;
+  }
+  showTooltip.value = true;
+}
+
+/** 隐藏 tooltip */
+function hideTooltipHandler() {
+  hideTimer.value = setTimeout(() => {
+    showTooltip.value = false;
+    hideTimer.value = null;
+  }, 300);
+}
+
+/** 处理文件选择 */
+async function handleFileSelect(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const files = [...(target.files || [])];
+  if (files.length === 0) {
+    return;
+  }
+
+  if (files.length + fileList.value.length > props.limit) {
+    message.error(`最多只能上传 ${props.limit} 个文件`);
+    target.value = '';
+    return;
+  }
+
+  for (const file of files) {
+    if (file.size > props.maxSize * 1024 * 1024) {
+      message.error(`文件 ${file.name} 大小超过 ${props.maxSize}MB`);
+      continue;
+    }
+
+    const fileItem: FileItem = {
+      name: file.name,
+      size: file.size,
+      uploading: true,
+      progress: 0,
+      raw: file,
+    };
+    fileList.value.push(fileItem);
+    await uploadFile(fileItem);
+  }
+
+  target.value = '';
+}
+
+/** 上传文件 */
+async function uploadFile(fileItem: FileItem) {
+  try {
+    const progressInterval = setInterval(() => {
+      if (fileItem.progress! < 90) {
+        fileItem.progress = (fileItem.progress || 0) + Math.random() * 10;
+      }
+    }, 100);
+
+    const response = await httpRequest(fileItem.raw!);
+    clearInterval(progressInterval);
+
+    fileItem.uploading = false;
+    fileItem.progress = 100;
+
+    // 调试日志
+    console.log('上传响应:', response);
+
+    // 兼容不同的返回格式：{ url: '...' } 或 { data: '...' } 或直接是字符串
+    const fileUrl =
+      (response as any)?.url || (response as any)?.data || response;
+    fileItem.url = fileUrl;
+
+    console.log('提取的文件 URL:', fileUrl);
+
+    // 只有当 URL 有效时才添加到列表
+    if (fileUrl && typeof fileUrl === 'string') {
+      uploadedUrls.value.push(fileUrl);
+      emit('uploadSuccess', fileItem);
+      updateModelValue();
+    } else {
+      throw new Error('上传返回的 URL 无效');
+    }
+  } catch (error) {
+    fileItem.uploading = false;
+    message.error(`文件 ${fileItem.name} 上传失败`);
+    emit('uploadError', error);
+
+    const index = fileList.value.indexOf(fileItem);
+    if (index !== -1) {
+      removeFile(index);
+    }
+  }
+}
+
+/** 删除文件 */
+function removeFile(index: number) {
+  const removedFile = fileList.value[index];
+  fileList.value.splice(index, 1);
+  if (removedFile?.url) {
+    const urlIndex = uploadedUrls.value.indexOf(removedFile.url);
+    if (urlIndex !== -1) {
+      uploadedUrls.value.splice(urlIndex, 1);
+    }
+  }
+  updateModelValue();
+}
+
+/** 更新 v-model */
+function updateModelValue() {
+  emit('update:modelValue', [...uploadedUrls.value]);
+}
+
+/** 清空文件 */
+function clearFiles() {
+  fileList.value = [];
+  uploadedUrls.value = [];
+  updateModelValue();
+}
+
+defineExpose({
+  triggerFileInput,
+  clearFiles,
+});
+
+onUnmounted(() => {
+  if (hideTimer.value) {
+    clearTimeout(hideTimer.value);
+  }
+});
+</script>
+
+<template>
+  <div
+    v-if="!disabled"
+    class="relative inline-block"
+    @mouseenter="showTooltipHandler"
+    @mouseleave="hideTooltipHandler"
+  >
+    <!-- 文件上传按钮 -->
+    <button
+      type="button"
+      class="relative flex h-8 w-8 items-center justify-center rounded-full border-0 bg-transparent text-gray-600 transition-all duration-200 hover:bg-gray-100"
+      :class="{ 'text-blue-500 hover:bg-blue-50': hasFiles }"
+      :disabled="isLimitReached"
+      @click="triggerFileInput"
+    >
+      <IconifyIcon icon="lucide:paperclip" :size="16" />
+      <!-- 文件数量徽章 -->
+      <span
+        v-if="hasFiles"
+        class="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-medium leading-none text-white"
+      >
+        {{ fileList.length }}
+      </span>
+    </button>
+
+    <!-- 隐藏的文件输入框 -->
+    <input
+      ref="fileInputRef"
+      type="file"
+      multiple
+      style="display: none"
+      :accept="acceptTypes"
+      @change="handleFileSelect"
+    />
+
+    <!-- Hover 显示的文件列表 -->
+    <div
+      v-if="hasFiles && showTooltip"
+      class="animate-in fade-in slide-in-from-bottom-1 absolute bottom-[calc(100%+8px)] left-1/2 z-[1000] min-w-[240px] max-w-[320px] -translate-x-1/2 rounded-lg border border-gray-200 bg-white p-2 shadow-lg duration-200"
+      @mouseenter="showTooltipHandler"
+      @mouseleave="hideTooltipHandler"
+    >
+      <!-- Tooltip 箭头 -->
+      <div
+        class="absolute -bottom-[5px] left-1/2 h-0 w-0 -translate-x-1/2 border-l-[5px] border-r-[5px] border-t-[5px] border-l-transparent border-r-transparent border-t-gray-200"
+      >
+        <div
+          class="absolute bottom-[1px] left-1/2 h-0 w-0 -translate-x-1/2 border-l-[4px] border-r-[4px] border-t-[4px] border-l-transparent border-r-transparent border-t-white"
+        ></div>
+      </div>
+      <!-- 文件列表 -->
+      <div
+        class="scrollbar-thin scrollbar-track-transparent scrollbar-thumb-gray-300 hover:scrollbar-thumb-gray-400 scrollbar-thumb-rounded-sm max-h-[200px] overflow-y-auto"
+      >
+        <div
+          v-for="(file, index) in fileList"
+          :key="index"
+          class="mb-1 flex items-center justify-between rounded-md bg-gray-50 p-2 text-xs transition-all duration-200 last:mb-0 hover:bg-gray-100"
+          :class="{ 'opacity-70': file.uploading }"
+        >
+          <div class="flex min-w-0 flex-1 items-center">
+            <IconifyIcon
+              :icon="getFileIcon(file.name)"
+              class="mr-2 flex-shrink-0 text-blue-500"
+            />
+            <span
+              class="mr-1 flex-1 overflow-hidden text-ellipsis whitespace-nowrap font-medium text-gray-900"
+            >
+              {{ file.name }}
+            </span>
+            <span class="flex-shrink-0 text-[11px] text-gray-500">
+              ({{ formatFileSize(file.size) }})
+            </span>
+          </div>
+          <div class="ml-2 flex flex-shrink-0 items-center gap-1">
+            <div
+              v-if="file.uploading"
+              class="h-1 w-[60px] overflow-hidden rounded-full bg-gray-200"
+            >
+              <div
+                class="h-full bg-blue-500 transition-all duration-300"
+                :style="{ width: `${file.progress || 0}%` }"
+              ></div>
+            </div>
+            <button
+              v-else-if="!disabled"
+              type="button"
+              class="flex h-5 w-5 items-center justify-center rounded text-red-500 hover:bg-red-50"
+              @click="removeFile(index)"
+            >
+              <IconifyIcon icon="lucide:x" :size="12" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/ai/chat/index/modules/message/files.vue
+++ b/apps/web-antd/src/views/ai/chat/index/modules/message/files.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { getFileIcon, getFileNameFromUrl, getFileTypeClass } from '@vben/utils';
+
+const props = defineProps<{
+  attachmentUrls?: string[];
+}>();
+
+/** 过滤掉空值的附件列表 */
+const validAttachmentUrls = computed(() => {
+  return (props.attachmentUrls || []).filter((url) => url && url.trim());
+});
+
+/** 点击文件 */
+function handleFileClick(url: string) {
+  window.open(url, '_blank');
+}
+</script>
+
+<template>
+  <div v-if="validAttachmentUrls.length > 0" class="mt-2">
+    <div class="flex flex-wrap gap-2">
+      <div
+        v-for="(url, index) in validAttachmentUrls"
+        :key="index"
+        class="max-w-70 flex min-w-40 cursor-pointer items-center rounded-lg border border-transparent bg-gray-100 p-3 transition-all duration-200 hover:-translate-y-1 hover:bg-gray-200 hover:shadow-lg"
+        @click="handleFileClick(url)"
+      >
+        <div class="mr-3 flex-shrink-0">
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-br font-bold text-white"
+            :class="getFileTypeClass(getFileNameFromUrl(url))"
+          >
+            <IconifyIcon
+              :icon="getFileIcon(getFileNameFromUrl(url))"
+              :size="20"
+            />
+          </div>
+        </div>
+        <div class="min-w-0 flex-1">
+          <div
+            class="mb-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-tight text-gray-800"
+            :title="getFileNameFromUrl(url)"
+          >
+            {{ getFileNameFromUrl(url) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/ai/chat/index/components/message/MessageKnowledge.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/message/MessageKnowledge.vue
--- a/apps/web-antd/src/views/ai/chat/index/components/message/MessageListEmpty.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/message/MessageListEmpty.vue
@@ -1,8 +1,7 @@
 <!-- 消息列表为空时，展示 prompt 列表 -->
 <script setup lang="ts">
-// prompt 列表
-
 const emits = defineEmits(['onPrompt']);
+
 const promptList = [
  {
    prompt: '今天气怎么样?',
@@ -10,7 +9,9 @@ const promptList = [
  {
    prompt: '写一首好听的诗歌?',
  },
-]; /** 选中 prompt 点击 */
+]; // prompt 列表
+
+/** 选中 prompt 点击 */
 async function handlerPromptClick(prompt: any) {
  emits('onPrompt', prompt.prompt);
 }
--- a/apps/web-antd/src/views/ai/chat/index/components/message/MessageList.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/message/MessageList.vue
@@ -9,7 +9,7 @@ import { computed, nextTick, onMounted, ref, toRefs } from 'vue';
 import { IconifyIcon, SvgGptIcon } from '@vben/icons';
 import { preferences } from '@vben/preferences';
 import { useUserStore } from '@vben/stores';
-import { formatDate } from '@vben/utils';
+import { formatDateTime } from '@vben/utils';

 import { useClipboard } from '@vueuse/core';
 import { Avatar, Button, message } from 'ant-design-vue';
@@ -17,8 +17,11 @@ import { Avatar, Button, message } from 'ant-design-vue';
 import { deleteChatMessage } from '#/api/ai/chat/message';
 import { MarkdownView } from '#/components/markdown-view';

-import MessageKnowledge from './MessageKnowledge.vue';
-// 定义 props
+import MessageFiles from './files.vue';
+import MessageKnowledge from './knowledge.vue';
+import MessageReasoning from './reasoning.vue';
+import MessageWebSearch from './web-search.vue';
+
 const props = defineProps({
  conversation: {
    type: Object as PropType<AiChatConversationApi.ChatConversation>,
@@ -29,7 +32,6 @@ const props = defineProps({
    required: true,
  },
 });
-// 消息列表

 const emits = defineEmits(['onDeleteSuccess', 'onRefresh', 'onEdit']);
 const { copy } = useClipboard(); // 初始化 copy 到粘贴板
@@ -48,14 +50,15 @@ const { list } = toRefs(props); // 定义 emits
 // ============ 处理对话滚动 ==============

 /** 滚动到底部 */
-const scrollToBottom = async (isIgnore?: boolean) => {
+async function scrollToBottom(isIgnore?: boolean) {
  // 注意要使用 nextTick 以免获取不到 dom
  await nextTick();
  if (isIgnore || !isScrolling.value) {
    messageContainer.value.scrollTop =
      messageContainer.value.scrollHeight - messageContainer.value.offsetHeight;
  }
-};
+}
+
 function handleScroll() {
  const scrollContainer = messageContainer.value;
  const scrollTop = scrollContainer.scrollTop;
@@ -122,21 +125,31 @@ onMounted(async () => {
          <Avatar
            v-if="conversation.roleAvatar"
            :src="conversation.roleAvatar"
+            :size="28"
          />
-          <SvgGptIcon v-else class="size-8" />
+          <SvgGptIcon v-else class="size-7" />
        </div>
        <div class="mx-4 flex flex-col text-left">
          <div class="text-left leading-10">
-            {{ formatDate(item.createTime) }}
+            {{ formatDateTime(item.createTime) }}
          </div>
          <div
            class="relative flex flex-col break-words rounded-lg bg-gray-100 p-2.5 pb-1 pt-2.5 shadow-sm"
          >
+            <MessageReasoning
+              :reasoning-content="item.reasoningContent || ''"
+              :content="item.content || ''"
+            />
            <MarkdownView
              class="text-sm text-gray-600"
              :content="item.content"
            />
+            <MessageFiles :attachment-urls="item.attachmentUrls" />
            <MessageKnowledge v-if="item.segments" :segments="item.segments" />
+            <MessageWebSearch
+              v-if="item.webSearchPages"
+              :web-search-pages="item.webSearchPages"
+            />
          </div>
          <div class="mt-2 flex flex-row">
            <Button
@@ -161,14 +174,21 @@ onMounted(async () => {
      <!-- 右侧消息：user -->
      <div v-else class="flex flex-row-reverse justify-start">
        <div class="avatar">
-          <Avatar :src="userAvatar" />
+          <Avatar :src="userAvatar" :size="28" />
        </div>
        <div class="mx-4 flex flex-col text-left">
          <div class="text-left leading-8">
-            {{ formatDate(item.createTime) }}
+            {{ formatDateTime(item.createTime) }}
+          </div>
+          <div
+            v-if="item.attachmentUrls && item.attachmentUrls.length > 0"
+            class="mb-2 flex flex-row-reverse"
+          >
+            <MessageFiles :attachment-urls="item.attachmentUrls" />
          </div>
          <div class="flex flex-row-reverse">
            <div
+              v-if="item.content && item.content.trim()"
              class="inline w-auto whitespace-pre-wrap break-words rounded-lg bg-blue-500 p-2.5 text-sm text-white shadow-sm"
            >
              {{ item.content }}
--- a/apps/web-antd/src/views/ai/chat/index/components/message/MessageLoading.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/message/MessageLoading.vue
--- a/apps/web-antd/src/views/ai/chat/index/components/message/MessageNewConversation.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/message/MessageNewConversation.vue
--- a/apps/web-antd/src/views/ai/chat/index/modules/message/reasoning.vue
+++ b/apps/web-antd/src/views/ai/chat/index/modules/message/reasoning.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { MarkdownView } from '#/components/markdown-view';
+
+const props = defineProps<{
+  content?: string;
+  reasoningContent?: string;
+}>();
+
+const isExpanded = ref(true); // 默认展开
+
+/** 判断是否应该显示组件 */
+const shouldShowComponent = computed(() => {
+  return props.reasoningContent && props.reasoningContent.trim() !== '';
+});
+
+/** 标题文本 */
+const titleText = computed(() => {
+  const hasReasoningContent =
+    props.reasoningContent && props.reasoningContent.trim() !== '';
+  const hasContent = props.content && props.content.trim() !== '';
+  if (hasReasoningContent && !hasContent) {
+    return '深度思考中';
+  }
+  return '已深度思考';
+});
+
+/** 切换展开/收起 */
+function toggleExpanded() {
+  isExpanded.value = !isExpanded.value;
+}
+</script>
+
+<template>
+  <div v-if="shouldShowComponent" class="mt-2.5">
+    <!-- 标题栏 -->
+    <div
+      class="flex cursor-pointer items-center justify-between rounded-t-lg border border-b-0 border-gray-200/60 bg-gradient-to-r from-blue-50 to-purple-50 p-2 transition-all duration-200 hover:from-blue-100 hover:to-purple-100"
+      @click="toggleExpanded"
+    >
+      <div class="flex items-center gap-1.5 text-sm font-medium text-gray-700">
+        <IconifyIcon icon="lucide:brain" class="text-blue-600" :size="16" />
+        <span>{{ titleText }}</span>
+      </div>
+      <IconifyIcon
+        icon="lucide:chevron-down"
+        class="text-gray-500 transition-transform duration-200"
+        :class="{ 'rotate-180': isExpanded }"
+        :size="14"
+      />
+    </div>
+    <!-- 内容区 -->
+    <div
+      v-show="isExpanded"
+      class="scrollbar-thin max-h-[300px] overflow-y-auto rounded-b-lg border border-t-0 border-gray-200/60 bg-white/70 p-3 shadow-sm backdrop-blur-sm"
+    >
+      <MarkdownView
+        v-if="props.reasoningContent"
+        class="text-sm leading-relaxed text-gray-700"
+        :content="props.reasoningContent"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 自定义滚动条 */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+}
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  @apply rounded-sm bg-gray-400/40;
+}
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-400/60;
+}
+</style>
--- a/apps/web-antd/src/views/ai/chat/index/modules/message/web-search.vue
+++ b/apps/web-antd/src/views/ai/chat/index/modules/message/web-search.vue
@@ -0,0 +1,173 @@
+<script setup lang="ts">
+import type { AiChatMessageApi } from '#/api/ai/chat/message';
+
+import { ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+defineProps<{
+  webSearchPages?: AiChatMessageApi.WebSearchPage[];
+}>();
+
+const isExpanded = ref(false); // 默认收起
+const selectedResult = ref<AiChatMessageApi.WebSearchPage | null>(null); // 选中的搜索结果
+const iconLoadError = ref<Record<number, boolean>>({}); // 记录图标加载失败
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: '联网搜索详情',
+  closable: true,
+  footer: true,
+  onCancel() {
+    drawerApi.close();
+  },
+  onConfirm() {
+    if (selectedResult.value?.url) {
+      window.open(selectedResult.value.url, '_blank');
+    }
+    drawerApi.close();
+  },
+});
+
+/** 切换展开/收起 */
+function toggleExpanded() {
+  isExpanded.value = !isExpanded.value;
+}
+
+/** 点击搜索结果 */
+function handleClick(result: AiChatMessageApi.WebSearchPage) {
+  selectedResult.value = result;
+  drawerApi.open();
+}
+
+/** 图标加载失败处理 */
+function handleIconError(index: number) {
+  iconLoadError.value[index] = true;
+}
+</script>
+
+<template>
+  <div v-if="webSearchPages && webSearchPages.length > 0" class="mt-2.5">
+    <!-- 标题栏：可点击展开/收起 -->
+    <div
+      class="mb-2 flex cursor-pointer items-center justify-between text-sm text-gray-600 transition-colors hover:text-blue-500"
+      @click="toggleExpanded"
+    >
+      <div class="flex items-center gap-1.5">
+        <IconifyIcon icon="lucide:search" :size="14" />
+        <span>联网搜索结果 ({{ webSearchPages.length }} 条)</span>
+      </div>
+      <IconifyIcon
+        :icon="isExpanded ? 'lucide:chevron-up' : 'lucide:chevron-down'"
+        class="text-xs transition-transform duration-200"
+        :size="12"
+      />
+    </div>
+
+    <!-- 可展开的搜索结果列表 -->
+    <div
+      v-show="isExpanded"
+      class="flex flex-col gap-2 transition-all duration-200 ease-in-out"
+    >
+      <div
+        v-for="(page, index) in webSearchPages"
+        :key="index"
+        class="cursor-pointer rounded-md bg-white p-2.5 transition-all hover:bg-blue-50"
+        @click="handleClick(page)"
+      >
+        <div class="flex items-start gap-2">
+          <!-- 网站图标 -->
+          <div class="mt-0.5 h-4 w-4 flex-shrink-0">
+            <img
+              v-if="page.icon && !iconLoadError[index]"
+              :src="page.icon"
+              :alt="page.name"
+              class="h-full w-full rounded-sm object-contain"
+              @error="handleIconError(index)"
+            />
+            <IconifyIcon
+              v-else
+              icon="lucide:link"
+              class="h-full w-full text-gray-600"
+            />
+          </div>
+          <!-- 内容区域 -->
+          <div class="min-w-0 flex-1">
+            <!-- 网站名称 -->
+            <div class="mb-1 truncate text-xs text-gray-400">
+              {{ page.name }}
+            </div>
+            <!-- 主标题 -->
+            <div
+              class="mb-1 line-clamp-2 text-sm font-medium leading-snug text-blue-600"
+            >
+              {{ page.title }}
+            </div>
+            <!-- 描述 -->
+            <div class="mb-1 line-clamp-2 text-xs leading-snug text-gray-600">
+              {{ page.snippet }}
+            </div>
+            <!-- URL -->
+            <div class="truncate text-xs text-green-700">
+              {{ page.url }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 联网搜索详情 Drawer -->
+    <Drawer class="w-[600px]" cancel-text="关闭" confirm-text="访问原文">
+      <div v-if="selectedResult">
+        <!-- 标题区域 -->
+        <div class="mb-4 flex items-start gap-3">
+          <div class="mt-0.5 h-6 w-6 flex-shrink-0">
+            <img
+              v-if="selectedResult.icon"
+              :src="selectedResult.icon"
+              :alt="selectedResult.name"
+              class="h-full w-full rounded-sm object-contain"
+            />
+            <IconifyIcon
+              v-else
+              icon="lucide:link"
+              class="h-full w-full text-gray-600"
+            />
+          </div>
+          <div class="min-w-0 flex-1">
+            <div class="mb-2 text-lg font-bold text-gray-900">
+              {{ selectedResult.title }}
+            </div>
+            <div class="mb-1 text-sm text-gray-500">
+              {{ selectedResult.name }}
+            </div>
+            <div class="break-all text-sm text-green-700">
+              {{ selectedResult.url }}
+            </div>
+          </div>
+        </div>
+        <!-- 内容区域 -->
+        <div class="space-y-4">
+          <!-- 简短描述 -->
+          <div>
+            <div class="mb-2 text-sm font-semibold text-gray-900">简短描述</div>
+            <div
+              class="rounded-lg bg-gray-50 p-3 text-sm leading-relaxed text-gray-700"
+            >
+              {{ selectedResult.snippet }}
+            </div>
+          </div>
+          <!-- 内容摘要 -->
+          <div v-if="selectedResult.summary">
+            <div class="mb-2 text-sm font-semibold text-gray-900">内容摘要</div>
+            <div
+              class="max-h-[50vh] overflow-y-auto whitespace-pre-wrap rounded-lg bg-gray-50 p-3 text-sm leading-relaxed text-gray-900"
+            >
+              {{ selectedResult.summary }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Drawer>
+  </div>
+</template>
--- a/apps/web-antd/src/views/ai/chat/index/components/role/RoleCategoryList.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/role/RoleCategoryList.vue
@@ -2,7 +2,7 @@
 import type { PropType } from 'vue';

 import { Button } from 'ant-design-vue';
-// 定义属性
+
 defineProps({
  categoryList: {
    type: Array as PropType<string[]>,
@@ -15,8 +15,7 @@ defineProps({
  },
 });

-// 定义回调
-const emits = defineEmits(['onCategoryClick']);
+const emits = defineEmits(['onCategoryClick']); // 定义回调

 /** 处理分类点击事件 */
 async function handleCategoryClick(category: string) {
--- a/apps/web-antd/src/views/ai/chat/index/components/role/RoleList.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/role/RoleList.vue
@@ -9,9 +9,6 @@ import { IconifyIcon } from '@vben/icons';

 import { Avatar, Button, Card, Dropdown, Menu } from 'ant-design-vue';

-// tabs ref
-
-// 定义属性
 const props = defineProps({
  loading: {
    type: Boolean,
@@ -28,8 +25,8 @@ const props = defineProps({
  },
 });

-// 定义钩子
 const emits = defineEmits(['onDelete', 'onEdit', 'onUse', 'onPage']);
+
 const tabsRef = ref<any>();

 /** 操作：编辑、删除 */
@@ -53,7 +50,7 @@ async function handleTabsScroll() {
  if (tabsRef.value) {
    const { scrollTop, scrollHeight, clientHeight } = tabsRef.value;
    if (scrollTop + clientHeight >= scrollHeight - 20 && !props.loading) {
-      await emits('onPage');
+      emits('onPage');
    }
  }
 }
--- 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
@@ -14,10 +14,11 @@ import { createChatConversationMy } from '#/api/ai/chat/conversation';
 import { deleteMy, getCategoryList, getMyPage } from '#/api/ai/model/chatRole';

 import Form from '../../../../model/chatRole/modules/form.vue';
-import RoleCategoryList from './RoleCategoryList.vue';
-import RoleList from './RoleList.vue';
+import RoleCategoryList from './category-list.vue';
+import RoleList from './list.vue';

 const router = useRouter();
+
 const [Drawer] = useVbenDrawer({
  title: '角色管理',
  footer: false,
@@ -28,7 +29,7 @@ const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
 });
-// 属性定义
+
 const loading = ref<boolean>(false); // 加载中
 const activeTab = ref<string>('my-role'); // 选中的角色 Tab
 const search = ref<string>(''); // 加载中
--- a/apps/web-antd/src/views/ai/image/index/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/index.vue
@@ -11,11 +11,11 @@ import { Segmented } from 'ant-design-vue';

 import { getModelSimpleList } from '#/api/ai/model/model';

-import Common from './components/common/index.vue';
-import Dall3 from './components/dall3/index.vue';
-import ImageList from './components/ImageList.vue';
-import Midjourney from './components/midjourney/index.vue';
-import StableDiffusion from './components/stableDiffusion/index.vue';
+import Common from './modules/common/index.vue';
+import Dall3 from './modules/dall3/index.vue';
+import ImageList from './modules/list.vue';
+import Midjourney from './modules/midjourney/index.vue';
+import StableDiffusion from './modules/stable-diffusion/index.vue';

 const imageListRef = ref<any>(); // image 列表 ref
 const dall3Ref = ref<any>(); // dall3(openai) ref
@@ -23,7 +23,6 @@ const midjourneyRef = ref<any>(); // midjourney ref
 const stableDiffusionRef = ref<any>(); // stable diffusion ref
 const commonRef = ref<any>(); // stable diffusion ref

-// 定义属性
 const selectPlatform = ref('common'); // 选中的平台
 const platformOptions = [
  {
@@ -43,7 +42,6 @@ const platformOptions = [
    value: AiPlatformEnum.STABLE_DIFFUSION,
  },
 ];
-
 const models = ref<AiModelModelApi.Model[]>([]); // 模型列表

 /** 绘画 start  */
--- a/apps/web-antd/src/views/ai/image/index/components/ImageCard.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/ImageCard.vue
@@ -11,8 +11,6 @@ import { IconifyIcon } from '@vben/icons';

 import { Button, Card, Image, message } from 'ant-design-vue';

-// 消息
-
 const props = defineProps({
  detail: {
    type: Object as PropType<AiImageApi.Image>,
@@ -32,7 +30,6 @@ async function handleButtonClick(type: string, detail: AiImageApi.Image) {
 async function handleMidjourneyBtnClick(
  button: AiImageApi.ImageMidjourneyButtons,
 ) {
-  // 确认窗体
  await confirm(`确认操作 "${button.label} ${button.emoji}" ?`);
  emits('onMjBtnClick', button, props.detail);
 }
@@ -43,6 +40,7 @@ watch(detail, async (newVal) => {
  await handleLoading(newVal.status);
 });
 const loading = ref();
+
 /** 处理加载状态 */
 async function handleLoading(status: number) {
  // 情况一：如果是生成中，则设置加载中的 loading
@@ -50,10 +48,11 @@ async function handleLoading(status: number) {
    loading.value = message.loading({
      content: `生成中...`,
    });
-
-    // 情况二：如果已经生成结束，则移除 loading
  } else {
-    if (loading.value) setTimeout(loading.value, 100);
+    // 情况二：如果已经生成结束，则移除 loading
+    if (loading.value) {
+      setTimeout(loading.value, 100);
+    }
  }
 }

@@ -78,6 +77,7 @@ onMounted(async () => {
        </Button>
      </div>
      <div class="flex">
+        <!-- TODO @AI：居右对齐 -->
        <Button
          class="m-0 p-2"
          type="text"
--- a/apps/web-antd/src/views/ai/image/index/components/common/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/common/index.vue
@@ -16,21 +16,17 @@ import { Button, InputNumber, Select, Space, Textarea } from 'ant-design-vue';

 import { drawImage } from '#/api/ai/image';

-// 消息弹窗
-
-// 接收父组件传入的模型列表
 const props = defineProps({
  models: {
    type: Array<AiModelModelApi.Model>,
    default: () => [] as AiModelModelApi.Model[],
  },
-});
+}); // 接收父组件传入的模型列表
 const emits = defineEmits(['onDrawStart', 'onDrawComplete']);

-// 定义属性
 const drawIn = ref<boolean>(false); // 生成中
 const selectHotWord = ref<string>(''); // 选中的热词
-// 表单
+
 const prompt = ref<string>(''); // 提示词
 const width = ref<number>(512); // 图片宽度
 const height = ref<number>(512); // 图片高度
@@ -45,7 +41,6 @@ async function handleHotWordClick(hotWord: string) {
    selectHotWord.value = '';
    return;
  }
-
  // 情况二：选中
  selectHotWord.value = hotWord; // 选中
  prompt.value = hotWord; // 替换提示词
@@ -91,11 +86,11 @@ async function handlerPlatformChange(platform: any) {
  platformModels.value = props.models.filter(
    (item: AiModelModelApi.Model) => item.platform === platform,
  );
+  // 切换平台，默认选择一个模型
  modelId.value =
    platformModels.value.length > 0 && platformModels.value[0]
      ? platformModels.value[0].id
      : undefined;
-  // 切换平台，默认选择一个模型
 }

 /** 监听 models 变化 */
@@ -106,7 +101,7 @@ watch(
  },
  { immediate: true, deep: true },
 );
-/** 暴露组件方法 */
+
 defineExpose({ settingValues });
 </script>
 <template>
--- a/apps/web-antd/src/views/ai/image/index/components/dall3/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/dall3/index.vue
@@ -20,16 +20,14 @@ import { Button, Image, message, Space, Textarea } from 'ant-design-vue';

 import { drawImage } from '#/api/ai/image';

-// 接收父组件传入的模型列表
 const props = defineProps({
  models: {
    type: Array<AiModelModelApi.Model>,
    default: () => [] as AiModelModelApi.Model[],
  },
-});
+}); // 接收父组件传入的模型列表
 const emits = defineEmits(['onDrawStart', 'onDrawComplete']);

-// 定义属性
 const prompt = ref<string>(''); // 提示词
 const drawIn = ref<boolean>(false); // 生成中
 const selectHotWord = ref<string>(''); // 选中的热词
@@ -44,7 +42,6 @@ async function handleHotWordClick(hotWord: string) {
    selectHotWord.value = '';
    return;
  }
-
  // 情况二：选中
  selectHotWord.value = hotWord;
  prompt.value = hotWord;
@@ -141,7 +138,6 @@ async function settingValues(detail: AiImageApi.Image) {
  await handleSizeClick(imageSize);
 }

-/** 暴露组件方法 */
 defineExpose({ settingValues });
 </script>
 <template>
--- a/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
@@ -10,22 +10,22 @@ import {
  StableDiffusionSamplers,
  StableDiffusionStylePresets,
 } from '@vben/constants';
-import { formatDate } from '@vben/utils';
+import { formatDateTime } from '@vben/utils';

 import { Image } from 'ant-design-vue';

 import { getImageMy } from '#/api/ai/image';

-// 图片详细信息
 const props = defineProps({
  id: {
    type: Number,
    required: true,
  },
 });
-const detail = ref<AiImageApi.Image>({} as AiImageApi.Image);

-/**  获取图片详情  */
+const detail = ref<AiImageApi.Image>({} as AiImageApi.Image); // 图片详细信息
+
+/** 获取图片详情  */
 async function getImageDetail(id: number) {
  detail.value = await getImageMy(id);
 }
@@ -53,12 +53,8 @@ watch(
  <div class="mb-5 w-full overflow-hidden break-words">
    <div class="text-lg font-bold">时间</div>
    <div class="mt-2">
-      <div>
-        提交时间：{{ formatDate(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}
-      </div>
-      <div>
-        生成时间：{{ formatDate(detail.finishTime, 'yyyy-MM-dd HH:mm:ss') }}
-      </div>
+      <div>提交时间：{{ formatDateTime(detail.createTime) }}</div>
+      <div>生成时间：{{ formatDateTime(detail.finishTime) }}</div>
    </div>
  </div>

--- a/apps/web-antd/src/views/ai/image/index/components/ImageList.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/ImageList.vue
@@ -18,10 +18,8 @@ import {
  midjourneyAction,
 } from '#/api/ai/image';

-import ImageCard from './ImageCard.vue';
-import ImageDetail from './ImageDetail.vue';
-
-// 暴露组件方法
+import ImageCard from './card.vue';
+import ImageDetail from './detail.vue';

 const emits = defineEmits(['onRegeneration']);
 const router = useRouter();
@@ -29,15 +27,14 @@ const [Drawer, drawerApi] = useVbenDrawer({
  title: '图片详情',
  footer: false,
 });
-// 图片分页相关的参数
 const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
-});
+}); // 图片分页相关的参数
 const pageTotal = ref<number>(0); // page size
 const imageList = ref<AiImageApi.Image[]>([]); // image 列表
 const imageListRef = ref<any>(); // ref
-// 图片轮询相关的参数（正在生成中的）
+
 const inProgressImageMap = ref<{}>({}); // 监听的 image 映射，一般是生成中（需要轮询），key 为 image 编号，value 为 image
 const inProgressTimer = ref<any>(); // 生成中的 image 定时器，轮询生成进展
 const showImageDetailId = ref<number>(0); // 图片详情的图片编号
@@ -60,7 +57,6 @@ async function getImageList() {
  });
  try {
    // 1. 加载图片列表
-
    const { list, total } = await getImagePageMy(queryParams);
    imageList.value = list;
    pageTotal.value = total;
@@ -78,6 +74,7 @@ async function getImageList() {
    loading();
  }
 }
+
 const debounceGetImageList = useDebounceFn(getImageList, 80);
 /** 轮询生成中的 image 列表 */
 async function refreshWatchImages() {
@@ -132,7 +129,7 @@ async function handleImageButtonClick(
  }
  // 重新生成
  if (type === 'regeneration') {
-    await emits('onRegeneration', imageDetail);
+    emits('onRegeneration', imageDetail);
  }
 }

@@ -152,7 +149,9 @@ async function handleImageMidjourneyButtonClick(
  await getImageList();
 }

-defineExpose({ getImageList }); /** 组件挂在的时候 */
+defineExpose({ getImageList });
+
+/** 组件挂在的时候 */
 onMounted(async () => {
  // 获取 image 列表
  await getImageList();
@@ -190,7 +189,7 @@ onUnmounted(async () => {
    </template>

    <div
-      class="flex flex-1 flex-wrap content-start overflow-y-auto p-5 pb-28 pt-5"
+      class="flex flex-1 flex-wrap content-start overflow-y-auto p-3 pb-28 pt-5"
      ref="imageListRef"
    >
      <ImageCard
@@ -199,7 +198,7 @@ onUnmounted(async () => {
        :detail="image"
        @on-btn-click="handleImageButtonClick"
        @on-mj-btn-click="handleImageMidjourneyButtonClick"
-        class="mb-5 mr-5"
+        class="mb-3 mr-3"
      />
    </div>

--- a/apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue
@@ -29,21 +29,17 @@ import {
 import { midjourneyImagine } from '#/api/ai/image';
 import { ImageUpload } from '#/components/upload';

-// 消息弹窗
-
-// 接收父组件传入的模型列表
 const props = defineProps({
  models: {
    type: Array<AiModelModelApi.Model>,
    default: () => [] as AiModelModelApi.Model[],
  },
-});
+}); // 接收父组件传入的模型列表
 const emits = defineEmits(['onDrawStart', 'onDrawComplete']);

-// 定义属性
 const drawIn = ref<boolean>(false); // 生成中
 const selectHotWord = ref<string>(''); // 选中的热词
-// 表单
+
 const prompt = ref<string>(''); // 提示词
 const referImageUrl = ref<any>(); // 参考图
 const selectModel = ref<string>('midjourney'); // 选中的模型
@@ -58,7 +54,6 @@ async function handleHotWordClick(hotWord: string) {
    selectHotWord.value = '';
    return;
  }
-
  // 情况二：选中
  selectHotWord.value = hotWord; // 选中
  prompt.value = hotWord; // 设置提示次
@@ -140,7 +135,6 @@ async function settingValues(detail: AiImageApi.Image) {
  referImageUrl.value = detail.options.referImageUrl;
 }

-/** 暴露组件方法 */
 defineExpose({ settingValues });
 </script>
 <template>
--- a/apps/web-antd/src/views/ai/image/index/components/stableDiffusion/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/stableDiffusion/index.vue
@@ -25,14 +25,12 @@ import {

 import { drawImage } from '#/api/ai/image';

-// 接收父组件传入的模型列表
 const props = defineProps({
  models: {
    type: Array<AiModelModelApi.Model>,
    default: () => [] as AiModelModelApi.Model[],
  },
-});
-
+}); // 接收父组件传入的模型列表
 const emits = defineEmits(['onDrawStart', 'onDrawComplete']);

 function hasChinese(str: string) {
@@ -60,7 +58,6 @@ async function handleHotWordClick(hotWord: string) {
    selectHotWord.value = '';
    return;
  }
-
  // 情况二：选中
  selectHotWord.value = hotWord; // 选中
  prompt.value = hotWord; // 替换提示词
@@ -82,7 +79,7 @@ async function handleGenerateImage() {

  // 二次确认
  if (hasChinese(prompt.value)) {
-    alert('暂不支持中文！');
+    await alert('暂不支持中文！');
    return;
  }
  await confirm(`确认生成内容?`);
@@ -129,7 +126,6 @@ async function settingValues(detail: AiImageApi.Image) {
  stylePreset.value = detail.options?.stylePreset;
 }

-/** 暴露组件方法 */
 defineExpose({ settingValues });
 </script>
 <template>
@@ -228,6 +224,7 @@ defineExpose({ settingValues });
  </div>

  <!-- 图片尺寸 -->
+  <!-- TODO @AI：同 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/ai/image/index/modules/common/index.vue 的问题 -->
  <div class="mt-8">
    <div><b>图片尺寸</b></div>
    <Space wrap class="mt-4 w-full">
--- a/apps/web-antd/src/views/ai/image/manager/index.vue
+++ b/apps/web-antd/src/views/ai/image/manager/index.vue
@@ -24,7 +24,7 @@ async function handleDelete(row: AiImageApi.Image) {
    duration: 0,
  });
  try {
-    await deleteImage(row.id as number);
+    await deleteImage(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
    handleRefresh();
  } finally {
--- a/apps/web-antd/src/views/ai/image/square/index.vue
+++ b/apps/web-antd/src/views/ai/image/square/index.vue
@@ -31,7 +31,9 @@ async function getList() {
    loading.value = false;
  }
 }
+
 const debounceGetList = useDebounceFn(getList, 80);
+
 /** 搜索按钮操作 */
 function handleQuery() {
  queryParams.pageNo = 1;
--- a/apps/web-antd/src/views/ai/knowledge/document/data.ts
+++ b/apps/web-antd/src/views/ai/knowledge/document/data.ts
@@ -1,11 +1,13 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiKnowledgeDocumentApi } from '#/api/ai/knowledge/document';

 import { AiModelTypeEnum, CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';

 import { z } from '#/adapter/form';
 import { getModelSimpleList } from '#/api/ai/model/model';
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
  return [
@@ -51,7 +53,6 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入检索 topK',
-        class: 'w-full',
        min: 0,
        max: 10,
      },
@@ -63,7 +64,6 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入检索相似度阈值',
-        class: 'w-full',
        min: 0,
        max: 1,
        step: 0.01,
@@ -92,12 +92,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
      fieldName: 'name',
      label: '文件名称',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文件名称',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'status',
      label: '是否启用',
      component: 'Select',
      componentProps: {
+        placeholder: '请选择是否启用',
        allowClear: true,
        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
      },
@@ -106,45 +111,66 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }

 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: AiKnowledgeDocumentApi.KnowledgeDocument,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'id',
      title: '文档编号',
+      minWidth: 100,
    },
    {
      field: 'name',
      title: '文件名称',
+      minWidth: 200,
    },
    {
      field: 'contentLength',
      title: '字符数',
+      minWidth: 100,
    },
    {
      field: 'tokens',
      title: 'Token 数',
+      minWidth: 100,
    },
    {
      field: 'segmentMaxTokens',
      title: '分片最大 Token 数',
+      minWidth: 150,
    },
    {
      field: 'retrievalCount',
      title: '召回次数',
+      minWidth: 100,
    },
    {
      field: 'status',
      title: '是否启用',
-      slots: { default: 'status' },
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
+        },
+      },
    },
    {
      field: 'createTime',
      title: '上传时间',
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
      title: '操作',
-      width: 150,
+      minWidth: 150,
      fixed: 'right',
      slots: { default: 'actions' },
    },
--- a/apps/web-antd/src/views/ai/knowledge/document/form/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/form/index.vue
@@ -16,14 +16,13 @@ import { Card } from 'ant-design-vue';

 import { getKnowledgeDocument } from '#/api/ai/knowledge/document';

-import ProcessStep from './ProcessStep.vue';
-import SplitStep from './SplitStep.vue';
-import UploadStep from './UploadStep.vue';
+import ProcessStep from './modules/process-step.vue';
+import SplitStep from './modules/split-step.vue';
+import UploadStep from './modules/upload-step.vue';

 const route = useRoute();
 const router = useRouter();

-// 组件引用
 const uploadDocumentRef = ref();
 const documentSegmentRef = ref();
 const processCompleteRef = ref();
@@ -59,9 +58,9 @@ const tabs = useTabs();
 function handleBack() {
  // 关闭当前页签
  tabs.closeCurrentTab();
-  // 跳转到列表页，使用路径， 目前后端的路由 name： 'name'+ menuId
+  // 跳转到列表页
  router.push({
-    path: `/ai/knowledge/document`,
+    name: 'AiKnowledgeDocument',
    query: {
      knowledgeId: route.query.knowledgeId,
    },
@@ -92,6 +91,7 @@ async function initData() {
    goToNextStep();
  }
 }
+
 /** 切换到下一步 */
 function goToNextStep() {
  if (currentStep.value < steps.length - 1) {
@@ -106,11 +106,6 @@ function goToPrevStep() {
  }
 }

-/** 初始化 */
-onMounted(async () => {
-  await initData();
-});
-
 /** 添加组件卸载前的清理代码 */
 onBeforeUnmount(() => {
  // 清理所有的引用
@@ -118,12 +113,18 @@ onBeforeUnmount(() => {
  documentSegmentRef.value = null;
  processCompleteRef.value = null;
 });
+
 /** 暴露方法给子组件使用 */
 defineExpose({
  goToNextStep,
  goToPrevStep,
  handleBack,
 });
+
+/** 初始化 */
+onMounted(async () => {
+  await initData();
+});
 </script>

 <template>
@@ -168,13 +169,14 @@ defineExpose({
              >
                {{ index + 1 }}
              </div>
-              <span class="whitespace-nowrap text-base font-bold">{{
-                step.title
-              }}</span>
+              <span class="whitespace-nowrap text-base font-bold">
+                {{ step.title }}
+              </span>
            </div>
          </div>
        </div>
      </div>
+
      <!-- 主体内容 -->
      <Card :body-style="{ padding: '10px' }" class="mb-4">
        <div class="mt-12">
--- a/apps/web-antd/src/views/ai/knowledge/document/form/modules/process-step.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/form/modules/process-step.vue
--- a/apps/web-antd/src/views/ai/knowledge/document/form/modules/split-step.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/form/modules/split-step.vue
@@ -67,6 +67,7 @@ async function splitContentFile(file: any) {
    splitLoading.value = false;
  }
 }
+
 /** 处理预览分段 */
 async function handleAutoSegment() {
  // 如果没有选中文件，默认选中第一个
@@ -228,7 +229,7 @@ onMounted(async () => {
              >
                {{ file.name }}
                <span v-if="file.segments" class="ml-1 text-sm text-gray-500">
-                  ({{ file.segments.length }}个分片)
+                  ({{ file.segments.length }} 个分片)
                </span>
              </Menu.Item>
            </Menu>
--- a/apps/web-antd/src/views/ai/knowledge/document/form/modules/upload-step.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/form/modules/upload-step.vue
@@ -9,7 +9,6 @@ import type { AxiosProgressEvent } from '#/api/infra/file';
 import { computed, getCurrentInstance, inject, onMounted, ref } from 'vue';

 import { IconifyIcon } from '@vben/icons';
-import { $t } from '@vben/locales';
 import { generateAcceptedFileTypes } from '@vben/utils';

 import { Button, Form, message, UploadDragger } from 'ant-design-vue';
@@ -31,7 +30,6 @@ const { uploadUrl, httpRequest } = useUpload(); // 使用上传组件的钩子
 const fileList = ref<UploadProps['fileList']>([]); // 文件列表
 const uploadingCount = ref(0); // 上传中的文件数量

-// 支持的文件类型和大小限制
 const supportedFileTypes = [
  'TXT',
  'MARKDOWN',
@@ -51,16 +49,14 @@ const supportedFileTypes = [
  'PPT',
  'MD',
  'HTM',
-];
+]; // 支持的文件类型和大小限制
 const allowedExtensions = new Set(
  supportedFileTypes.map((ext) => ext.toLowerCase()),
 ); // 小写的扩展名列表
 const maxFileSize = 15; // 最大文件大小(MB)
-
-// 构建 accept 属性值，用于限制文件选择对话框中可见的文件类型
 const acceptedFileTypes = computed(() =>
  generateAcceptedFileTypes(supportedFileTypes),
-);
+); // 构建 accept 属性值，用于限制文件选择对话框中可见的文件类型

 /** 表单数据 */
 const modelData = computed({
@@ -69,6 +65,7 @@ const modelData = computed({
  },
  set: (val) => emit('update:modelValue', val),
 });
+
 /** 确保 list 属性存在 */
 function ensureListExists() {
  if (!props.modelValue.list) {
@@ -78,6 +75,7 @@ function ensureListExists() {
    });
  }
 }
+
 /** 是否所有文件都已上传完成 */
 const isAllUploaded = computed(() => {
  return (
@@ -113,7 +111,8 @@ function beforeUpload(file: any) {
  uploadingCount.value++;
  return true;
 }
-async function customRequest(info: UploadRequestOption<any>) {
+
+async function customRequest(info: UploadRequestOption) {
  const file = info.file as File;
  const name = file?.name;
  try {
@@ -124,7 +123,7 @@ async function customRequest(info: UploadRequestOption<any>) {
    };
    const res = await httpRequest(info.file as File, progressEvent);
    info.onSuccess!(res);
-    message.success($t('ui.upload.uploadSuccess'));
+    message.success('上传成功');
    ensureListExists();
    emit('update:modelValue', {
      ...props.modelValue,
@@ -143,6 +142,7 @@ async function customRequest(info: UploadRequestOption<any>) {
    uploadingCount.value = Math.max(0, uploadingCount.value - 1);
  }
 }
+
 /**
 * 从列表中移除文件
 *
@@ -232,9 +232,9 @@ onMounted(() => {
          >
            <div class="flex items-center">
              <IconifyIcon icon="lucide:file-text" class="mr-2 text-blue-500" />
-              <span class="break-all text-sm text-gray-600">{{
-                file.name
-              }}</span>
+              <span class="break-all text-sm text-gray-600">
+                {{ file.name }}
+              </span>
            </div>
            <Button
              danger
--- a/apps/web-antd/src/views/ai/knowledge/document/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/document/index.vue
@@ -5,11 +5,11 @@ import type { AiKnowledgeDocumentApi } from '#/api/ai/knowledge/document';
 import { onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';

-import { useAccess } from '@vben/access';
 import { confirm, Page } from '@vben/common-ui';
-import { CommonStatusEnum } from '@vben/constants';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';

-import { message, Switch } from 'ant-design-vue';
+import { message } from 'ant-design-vue';

 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -21,18 +21,18 @@ import { $t } from '#/locales';

 import { useGridColumns, useGridFormSchema } from './data';

-/** AI 知识库文档 列表 */
+/** AI 知识库文档列表 */
 defineOptions({ name: 'AiKnowledgeDocument' });
-const { hasAccessByCodes } = useAccess();

 const route = useRoute();
 const router = useRouter();
+
 /** 刷新表格 */
 function handleRefresh() {
  gridApi.query();
 }

-/** 创建 */
+/** 创建知识库文档 */
 function handleCreate() {
  router.push({
    name: 'AiKnowledgeDocumentCreate',
@@ -40,7 +40,7 @@ function handleCreate() {
  });
 }

-/** 编辑 */
+/** 编辑知识库文档 */
 function handleEdit(id: number) {
  router.push({
    name: 'AiKnowledgeDocumentUpdate',
@@ -48,22 +48,21 @@ function handleEdit(id: number) {
  });
 }

-/** 删除 */
+/** 删除知识库文档 */
 async function handleDelete(row: AiKnowledgeDocumentApi.KnowledgeDocument) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.name]),
    duration: 0,
  });
  try {
-    await deleteKnowledgeDocument(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteKnowledgeDocument(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } finally {
    hideLoading();
  }
 }
+
 /** 跳转到知识库分段页面 */
 function handleSegment(id: number) {
  router.push({
@@ -71,33 +70,38 @@ function handleSegment(id: number) {
    query: { documentId: id },
  });
 }
-/** 修改是否发布 */
+
+/** 更新文档状态 */
 async function handleStatusChange(
+  newStatus: number,
  row: AiKnowledgeDocumentApi.KnowledgeDocument,
-) {
-  try {
-    // 修改状态的二次确认
-    const text = row.status ? '启用' : '禁用';
-    await confirm(`确认要"${text}"${row.name}文档吗?`).then(async () => {
-      await updateKnowledgeDocumentStatus({
-        id: row.id,
-        status: row.status,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将${row.name}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+    })
+      .then(async () => {
+        // 更新文档状态
+        await updateKnowledgeDocumentStatus({
+          id: row.id,
+          status: newStatus,
+        });
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
      });
-      handleRefresh();
-    });
-  } catch {
-    row.status =
-      row.status === CommonStatusEnum.ENABLE
-        ? CommonStatusEnum.DISABLE
-        : CommonStatusEnum.ENABLE;
-  }
+  });
 }
+
 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
  gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleStatusChange),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
@@ -114,6 +118,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@@ -121,6 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
  } as VxeTableGridOptions<AiKnowledgeDocumentApi.KnowledgeDocument>,
 });
+
 /** 初始化 */
 onMounted(() => {
  // 如果知识库 ID 不存在，显示错误提示并关闭页面
@@ -148,15 +154,6 @@ onMounted(() => {
          ]"
        />
      </template>
-      <template #status="{ row }">
-        <Switch
-          v-model:checked="row.status"
-          :checked-value="0"
-          :un-checked-value="1"
-          @change="handleStatusChange(row)"
-          :disabled="!hasAccessByCodes(['ai:knowledge:update'])"
-        />
-      </template>
      <template #actions="{ row }">
        <TableAction
          :actions="[
@@ -167,17 +164,18 @@ onMounted(() => {
              auth: ['ai:knowledge:update'],
              onClick: handleEdit.bind(null, row.id),
            },
-          ]"
-          :drop-down-actions="[
            {
              label: '分段',
              type: 'link',
+              icon: ACTION_ICON.BOOK,
              auth: ['ai:knowledge:query'],
              onClick: handleSegment.bind(null, row.id),
            },
            {
              label: $t('common.delete'),
              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
              auth: ['ai:knowledge:delete'],
              popConfirm: {
                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
--- a/apps/web-antd/src/views/ai/knowledge/knowledge/data.ts
+++ b/apps/web-antd/src/views/ai/knowledge/knowledge/data.ts
@@ -23,6 +23,9 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'Input',
      fieldName: 'name',
      label: '知识库名称',
+      componentProps: {
+        placeholder: '请输入知识库名称',
+      },
      rules: 'required',
    },
    {
@@ -53,7 +56,6 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入检索 topK',
-        class: 'w-full',
        min: 0,
        max: 10,
      },
@@ -65,7 +67,6 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入检索相似度阈值',
-        class: 'w-full',
        min: 0,
        max: 1,
        step: 0.01,
@@ -94,14 +95,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
      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: '请选择是否启用',
+        allowClear: true,
      },
    },
    {
@@ -122,22 +128,27 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'id',
      title: '编号',
+      minWidth: 100,
    },
    {
      field: 'name',
      title: '知识库名称',
+      minWidth: 150,
    },
    {
      field: 'description',
      title: '知识库描述',
+      minWidth: 200,
    },
    {
      field: 'embeddingModel',
      title: '向量化模型',
+      minWidth: 150,
    },
    {
      field: 'status',
      title: '是否启用',
+      minWidth: 100,
      cellRender: {
        name: 'CellDict',
        props: { type: DICT_TYPE.COMMON_STATUS },
@@ -146,11 +157,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'createTime',
      title: '创建时间',
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
      title: '操作',
-      width: 150,
+      width: 280,
      fixed: 'right',
      slots: { default: 'actions' },
    },
--- a/apps/web-antd/src/views/ai/knowledge/knowledge/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/knowledge/index.vue
@@ -28,33 +28,32 @@ function handleRefresh() {
  gridApi.query();
 }

-/** 创建 */
+/** 创建知识库 */
 function handleCreate() {
  formModalApi.setData(null).open();
 }

-/** 编辑 */
+/** 编辑知识库 */
 function handleEdit(row: AiKnowledgeKnowledgeApi.Knowledge) {
  formModalApi.setData(row).open();
 }

-/** 删除 */
+/** 删除知识库 */
 async function handleDelete(row: AiKnowledgeKnowledgeApi.Knowledge) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.name]),
    duration: 0,
  });
  try {
-    await deleteKnowledge(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteKnowledge(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } finally {
    hideLoading();
  }
 }
-/** 文档按钮操作 */
+
+/** 跳转到知识库文档页面 */
 const router = useRouter();
 function handleDocument(id: number) {
  router.push({
@@ -92,6 +91,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@@ -131,23 +131,25 @@ const [Grid, gridApi] = useVbenVxeGrid({
              auth: ['ai:knowledge:update'],
              onClick: handleEdit.bind(null, row),
            },
-          ]"
-          :drop-down-actions="[
            {
              label: $t('ui.widgets.document'),
              type: 'link',
+              icon: ACTION_ICON.BOOK,
              auth: ['ai:knowledge:query'],
              onClick: handleDocument.bind(null, row.id),
            },
            {
              label: '召回测试',
              type: 'link',
+              icon: ACTION_ICON.SEARCH,
              auth: ['ai:knowledge:query'],
              onClick: handleRetrieval.bind(null, row.id),
            },
            {
              label: $t('common.delete'),
              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
              auth: ['ai:knowledge:delete'],
              popConfirm: {
                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
--- a/apps/web-antd/src/views/ai/knowledge/knowledge/modules/form.vue
+++ b/apps/web-antd/src/views/ai/knowledge/knowledge/modules/form.vue
@@ -83,7 +83,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>
--- a/apps/web-antd/src/views/ai/knowledge/knowledge/retrieval/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/knowledge/retrieval/index.vue
@@ -17,7 +17,7 @@ import {
 import { getKnowledge } from '#/api/ai/knowledge/knowledge';
 import { searchKnowledgeSegment } from '#/api/ai/knowledge/segment';

-/** 文档召回测试 */
+/** 知识库文档召回测试 */
 defineOptions({ name: 'KnowledgeDocumentRetrieval' });

 const route = useRoute();
@@ -32,7 +32,7 @@ const queryParams = reactive({
  similarityThreshold: 0.5,
 });

-/** 调用文档召回测试接口 */
+/** 执行召回测试 */
 async function getRetrievalResult() {
  if (!queryParams.content) {
    message.warning('请输入查询文本');
@@ -50,19 +50,17 @@ async function getRetrievalResult() {
      similarityThreshold: queryParams.similarityThreshold,
    });
    segments.value = data || [];
-  } catch (error) {
-    console.error(error);
  } finally {
    loading.value = false;
  }
 }

-/** 展开/收起段落内容 */
+/** 切换段落展开状态 */
 function toggleExpand(segment: any) {
  segment.expanded = !segment.expanded;
 }

-/** 获取知识库信息 */
+/** 获取知识库配置信息 */
 async function getKnowledgeInfo(id: number) {
  try {
    const knowledge = await getKnowledge(id);
@@ -157,43 +155,44 @@ onMounted(() => {
            <div
              v-for="(segment, index) in segments"
              :key="index"
-              class="p-15 mb-20 rounded border border-solid border-gray-200"
+              class="mt-2 rounded border border-solid border-gray-200 px-2 py-2"
            >
-              <div class="mb-5 flex justify-between text-sm text-gray-500">
+              <div
+                class="mb-2 flex items-center justify-between gap-8 text-sm text-gray-500"
+              >
                <span>
                  分段({{ segment.id }}) · {{ segment.contentLength }} 字符数 ·
                  {{ segment.tokens }} Token
                </span>
                <span
-                  class="rounded-full bg-blue-50 py-4 text-sm font-bold text-blue-500"
+                  class="whitespace-nowrap rounded-full bg-blue-50 px-2 py-1 text-sm text-blue-500"
                >
                  score: {{ segment.score }}
                </span>
              </div>
              <div
-                class="mb-10 overflow-hidden whitespace-pre-wrap rounded bg-gray-50 p-10 text-sm transition-all duration-100"
+                class="mb-2 overflow-hidden whitespace-pre-wrap rounded bg-gray-50 text-sm transition-all duration-100"
                :class="{
-                  'max-h-50 line-clamp-2': !segment.expanded,
+                  'line-clamp-2 max-h-40': !segment.expanded,
                  'max-h-[1500px]': segment.expanded,
                }"
              >
                {{ segment.content }}
              </div>
-              <div class="flex items-center justify-between">
-                <div class="flex items-center text-sm text-gray-500">
-                  <IconifyIcon icon="lucide:file-text" class="mr-5" />
+              <div class="flex items-center justify-between gap-8">
+                <div class="flex items-center gap-1 text-sm text-gray-500">
+                  <IconifyIcon icon="lucide:file-text" />
                  <span>{{ segment.documentName || '未知文档' }}</span>
                </div>
                <Button size="small" @click="toggleExpand(segment)">
                  {{ segment.expanded ? '收起' : '展开' }}
-                  <span
-                    class="mr-5"
-                    :class="
+                  <IconifyIcon
+                    :icon="
                      segment.expanded
                        ? 'lucide:chevron-up'
                        : 'lucide:chevron-down'
                    "
-                  ></span>
+                  />
                </Button>
              </div>
            </div>
--- a/apps/web-antd/src/views/ai/knowledge/segment/data.ts
+++ b/apps/web-antd/src/views/ai/knowledge/segment/data.ts
@@ -1,7 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';

-import { DICT_TYPE } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';

 /** 新增/修改的表单 */
@@ -43,12 +44,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
      fieldName: 'documentId',
      label: '文档编号',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文档编号',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'status',
      label: '是否启用',
      component: 'Select',
      componentProps: {
+        placeholder: '请选择是否启用',
        allowClear: true,
        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
      },
@@ -57,11 +63,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }

 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: AiKnowledgeSegmentApi.KnowledgeSegment,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'id',
      title: '分段编号',
+      minWidth: 100,
    },
    {
      type: 'expand',
@@ -76,23 +88,36 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'contentLength',
      title: '字符数',
+      minWidth: 100,
    },
    {
      field: 'tokens',
      title: 'token 数量',
+      minWidth: 120,
    },
    {
      field: 'retrievalCount',
      title: '召回次数',
+      minWidth: 100,
    },
    {
      field: 'status',
-      title: '是否启用',
-      slots: { default: 'status' },
+      title: '状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
+        },
+      },
    },
    {
      field: 'createTime',
      title: '创建时间',
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
--- a/apps/web-antd/src/views/ai/knowledge/segment/index.vue
+++ b/apps/web-antd/src/views/ai/knowledge/segment/index.vue
@@ -5,11 +5,11 @@ import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';
 import { onMounted } from 'vue';
 import { useRoute } from 'vue-router';

-import { useAccess } from '@vben/access';
 import { confirm, Page, useVbenModal } from '@vben/common-ui';
-import { CommonStatusEnum } from '@vben/constants';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';

-import { message, Switch } from 'ant-design-vue';
+import { message } from 'ant-design-vue';

 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -23,7 +23,7 @@ import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';

 const route = useRoute();
-const { hasAccessByCodes } = useAccess();
+
 const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
@@ -34,39 +34,59 @@ function handleRefresh() {
  gridApi.query();
 }

-/** 创建 */
+/** 创建知识库片段 */
 function handleCreate() {
  formModalApi.setData({ documentId: route.query.documentId }).open();
 }

-/** 编辑 */
+/** 编辑知识库片段 */
 function handleEdit(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
  formModalApi.setData(row).open();
 }

-/** 删除 */
+/** 删除知识库片段 */
 async function handleDelete(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.id]),
    duration: 0,
  });
  try {
-    await deleteKnowledgeSegment(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    await deleteKnowledgeSegment(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
    handleRefresh();
  } finally {
    hideLoading();
  }
 }

+/** 更新知识库片段状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: AiKnowledgeSegmentApi.KnowledgeSegment,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将片段 ${row.id} 的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+    })
+      .then(async () => {
+        // 更新片段状态
+        await updateKnowledgeSegmentStatus(row.id!, newStatus);
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
  },
  gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleStatusChange),
    height: 'auto',
    keepSource: true,
    proxyConfig: {
@@ -82,6 +102,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@@ -90,26 +111,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
  } as VxeTableGridOptions<AiKnowledgeSegmentApi.KnowledgeSegment>,
 });

-/** 修改是否发布 */
-async function handleStatusChange(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
-  try {
-    // 修改状态的二次确认
-    const text = row.status ? '启用' : '禁用';
-    await confirm(`确认要"${text}"该分段吗?`).then(async () => {
-      await updateKnowledgeSegmentStatus({
-        id: row.id,
-        status: row.status,
-      });
-      gridApi.reload();
-    });
-  } catch {
-    row.status =
-      row.status === CommonStatusEnum.ENABLE
-        ? CommonStatusEnum.DISABLE
-        : CommonStatusEnum.ENABLE;
-  }
-}
-
+/** 初始化 */
 onMounted(() => {
  gridApi.formApi.setFieldValue('documentId', route.query.documentId);
 });
@@ -132,15 +134,6 @@ onMounted(() => {
          ]"
        />
      </template>
-      <template #status="{ row }">
-        <Switch
-          v-model:checked="row.status"
-          :checked-value="0"
-          :un-checked-value="1"
-          @change="handleStatusChange(row)"
-          :disabled="!hasAccessByCodes(['ai:knowledge:update'])"
-        />
-      </template>
      <template #expand_content="{ row }">
        <div
          class="whitespace-pre-wrap border-l-4 border-blue-500 px-2.5 py-5 leading-5"
--- a/apps/web-antd/src/views/ai/knowledge/segment/modules/form.vue
+++ b/apps/web-antd/src/views/ai/knowledge/segment/modules/form.vue
@@ -68,7 +68,6 @@ const [Modal, modalApi] = useVbenModal({
    // 加载数据
    const data = modalApi.getData<AiKnowledgeSegmentApi.KnowledgeSegment>();
    if (!data || !data.id) {
-      await formApi.setValues(data);
      return;
    }
    modalApi.lock();
--- a/apps/web-antd/src/views/ai/mindmap/manager/index.vue
+++ b/apps/web-antd/src/views/ai/mindmap/manager/index.vue
@@ -31,7 +31,7 @@ async function handleDelete(row: AiMindmapApi.MindMap) {
    duration: 0,
  });
  try {
-    await deleteMindMap(row.id as number);
+    await deleteMindMap(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
    handleRefresh();
  } finally {
--- a/apps/web-antd/src/views/ai/music/index/list/audioBar/index.vue
+++ b/apps/web-antd/src/views/ai/music/index/list/audioBar/index.vue
@@ -11,7 +11,6 @@ defineOptions({ name: 'AiMusicAudioBarIndex' });
 const currentSong = inject<any>('currentSong', {});

 const audioRef = ref<HTMLAudioElement | null>(null);
-// 音频相关属性https://www.runoob.com/tags/ref-av-dom.html
 const audioProps = reactive<any>({
  autoplay: true,
  paused: false,
@@ -19,7 +18,7 @@ const audioProps = reactive<any>({
  duration: '00:00',
  muted: false,
  volume: 50,
-});
+}); // 音频相关属性https://www.runoob.com/tags/ref-av-dom.html

 function toggleStatus(type: string) {
  audioProps[type] = !audioProps[type];
@@ -32,7 +31,7 @@ function toggleStatus(type: string) {
  }
 }

-// 更新播放位置
+/** 更新播放位置 */
 function audioTimeUpdate(args: any) {
  audioProps.currentTime = formatPast(new Date(args.timeStamp), 'mm:ss');
 }
--- a/apps/web-antd/src/views/ai/music/index/list/index.vue
+++ b/apps/web-antd/src/views/ai/music/index/list/index.vue
@@ -12,19 +12,11 @@ import songInfo from './songInfo/index.vue';
 defineOptions({ name: 'AiMusicListIndex' });

 const currentType = ref('mine');
-// loading 状态
-const loading = ref(false);
-// 当前音乐
-const currentSong = ref({});
-
+const loading = ref(false); // loading 状态
+const currentSong = ref({}); // 当前音乐
 const mySongList = ref<Recordable<any>[]>([]);
 const squareSongList = ref<Recordable<any>[]>([]);

-/*
- *@Description: 调接口生成音乐列表
- *@MethodAuthor: xiaohong
- *@Date: 2024-06-27 17:06:44
- */
 function generateMusic(formData: Recordable<any>) {
  loading.value = true;
  setTimeout(() => {
@@ -53,11 +45,6 @@ function generateMusic(formData: Recordable<any>) {
  }, 3000);
 }

-/*
- *@Description: 设置当前播放的音乐
- *@MethodAuthor: xiaohong
- *@Date: 2024-07-19 11:22:33
- */
 function setCurrentSong(music: Recordable<any>) {
  currentSong.value = music;
 }
--- a/apps/web-antd/src/views/ai/music/index/mode/index.vue
+++ b/apps/web-antd/src/views/ai/music/index/mode/index.vue
@@ -16,11 +16,6 @@ const generateMode = ref('lyric');

 const modeRef = ref<Nullable<{ formData: Recordable<any> }>>(null);

-/*
- *@Description: 根据信息生成音乐
- *@MethodAuthor: xiaohong
- *@Date: 2024-06-27 16:40:16
- */
 function generateMusic() {
  emits('generateMusic', { formData: unref(modeRef)?.formData });
 }
--- a/apps/web-antd/src/views/ai/music/manager/index.vue
+++ b/apps/web-antd/src/views/ai/music/manager/index.vue
@@ -24,7 +24,7 @@ async function handleDelete(row: AiMusicApi.Music) {
    duration: 0,
  });
  try {
-    await deleteMusic(row.id as number);
+    await deleteMusic(row.id!);
    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
    handleRefresh();
  } finally {
--- a/apps/web-antd/src/views/ai/workflow/data.ts
+++ b/apps/web-antd/src/views/ai/workflow/data.ts
@@ -13,19 +13,28 @@ export function useGridFormSchema(): VbenFormSchema[] {
      fieldName: 'code',
      label: '流程标识',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程标识',
+        allowClear: true,
+      },
    },
    {
      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: '请选择状态',
+        allowClear: true,
      },
    },
    {
@@ -46,27 +55,33 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'id',
      title: '编号',
+      minWidth: 100,
    },
    {
      field: 'code',
      title: '流程标识',
+      minWidth: 150,
    },
    {
      field: 'name',
      title: '流程名称',
+      minWidth: 200,
    },
    {
      field: 'createTime',
      title: '创建时间',
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
      field: 'remark',
      title: '备注',
+      minWidth: 200,
    },
    {
      field: 'status',
      title: '状态',
+      minWidth: 100,
      cellRender: {
        name: 'CellDict',
        props: { type: DICT_TYPE.COMMON_STATUS },
--- a/apps/web-antd/src/views/ai/workflow/form/index.vue
+++ b/apps/web-antd/src/views/ai/workflow/form/index.vue
@@ -25,10 +25,27 @@ const route = useRoute();
 const workflowId = ref<string>('');
 const actionType = ref<string>('');

-// 基础信息组件引用
-const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
-// 工作流设计组件引用
-const workflowDesignRef = ref<InstanceType<typeof WorkflowDesign>>();
+const basicInfoRef = ref<InstanceType<typeof BasicInfo>>(); // 基础信息组件引用
+const workflowDesignRef = ref<InstanceType<typeof WorkflowDesign>>(); // 工作流设计组件引用
+
+const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
+const steps = [
+  { title: '基本信息', validator: validateBasic },
+  { title: '工作流设计', validator: validateWorkflow },
+];
+
+const formData: any = ref({
+  id: undefined,
+  name: '',
+  code: '',
+  remark: '',
+  graph: '',
+  status: CommonStatusEnum.ENABLE,
+}); // 表单数据
+
+const llmProvider = ref<any>([]);
+const workflowData = ref<any>({});
+provide('workflowData', workflowData);

 /** 步骤校验函数 */
 async function validateBasic() {
@@ -40,30 +57,9 @@ async function validateWorkflow() {
  await workflowDesignRef.value?.validate();
 }

-const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
-
-const steps = [
-  { title: '基本信息', validator: validateBasic },
-  { title: '工作流设计', validator: validateWorkflow },
-];
-
-// 表单数据
-const formData: any = ref({
-  id: undefined,
-  name: '',
-  code: '',
-  remark: '',
-  graph: '',
-  status: CommonStatusEnum.ENABLE,
-});
-
-const llmProvider = ref<any>([]);
-const workflowData = ref<any>({});
-provide('workflowData', workflowData);
-
 async function initData() {
  if (actionType.value === 'update' && workflowId.value) {
-    formData.value = await getWorkflow(workflowId.value);
+    formData.value = await getWorkflow(workflowId.value as any);
    workflowData.value = JSON.parse(formData.value.graph);
  }
  const models = await getModelSimpleList(AiModelTypeEnum.CHAT);
--- a/apps/web-antd/src/views/ai/workflow/form/modules/basic-info.vue
+++ b/apps/web-antd/src/views/ai/workflow/form/modules/basic-info.vue
@@ -8,10 +8,8 @@ import { getDictOptions } from '@vben/hooks';

 import { Form, Input, Select } from 'ant-design-vue';

-// 创建本地数据副本
-const modelData = defineModel<any>();
-// 表单引用
-const formRef = ref();
+const modelData = defineModel<any>(); // 创建本地数据副本
+const formRef = ref(); // 表单引用
 const rules: Record<string, Rule[]> = {
  code: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
--- a/apps/web-antd/src/views/ai/workflow/form/modules/workflow-design.vue
+++ b/apps/web-antd/src/views/ai/workflow/form/modules/workflow-design.vue
@@ -28,43 +28,52 @@ const [Drawer, drawerApi] = useVbenDrawer({
  footer: false,
  closeOnClickModal: false,
  modal: false,
+  onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    try {
+      // 查找 start 节点
+      const startNode = getStartNode();
+      // 获取参数定义
+      const parameters: any[] = (startNode.data?.parameters as any[]) || [];
+      const paramDefinitions: Record<string, any> = {};
+      // 加入参数选项方便用户添加非必须参数
+      parameters.forEach((param: any) => {
+        paramDefinitions[param.name] = param;
+      });
+      // 自动装载需必填的参数
+      function mergeIfRequiredButNotSet(target: any[]) {
+        const needPushList = [];
+        for (const key in paramDefinitions) {
+          const param = paramDefinitions[key];
+
+          if (param.required) {
+            const item = target.find((item: any) => item.key === key);
+
+            if (!item) {
+              needPushList.push({
+                key: param.name,
+                value: param.defaultValue || '',
+              });
+            }
+          }
+        }
+        target.push(...needPushList);
+      }
+      mergeIfRequiredButNotSet(params4Test.value);
+
+      // 设置参数
+      paramsOfStartNode.value = paramDefinitions;
+    } catch (error) {
+      console.error('加载参数失败:', error);
+    }
+  },
 });
+
 /** 展示工作流测试抽屉 */
 function testWorkflowModel() {
  drawerApi.open();
-  const startNode = getStartNode();
-
-  // 获取参数定义
-  const parameters: any[] = (startNode.data?.parameters as any[]) || [];
-  const paramDefinitions: Record<string, any> = {};
-
-  // 加入参数选项方便用户添加非必须参数
-  parameters.forEach((param: any) => {
-    paramDefinitions[param.name] = param;
-  });
-
-  function mergeIfRequiredButNotSet(target: any) {
-    const needPushList = [];
-    for (const key in paramDefinitions) {
-      const param = paramDefinitions[key];
-
-      if (param.required) {
-        const item = target.find((item: any) => item.key === key);
-
-        if (!item) {
-          needPushList.push({
-            key: param.name,
-            value: param.defaultValue || '',
-          });
-        }
-      }
-    }
-    target.push(...needPushList);
-  }
-  // 自动装载需必填的参数
-  mergeIfRequiredButNotSet(params4Test.value);
-
-  paramsOfStartNode.value = paramDefinitions;
 }

 /** 运行流程 */
@@ -74,27 +83,26 @@ async function goRun() {
    loading.value = true;
    error.value = null;
    testResult.value = null;
-    // / 查找start节点
-    const startNode = getStartNode();

+    // 查找start节点
+    const startNode = getStartNode();
    // 获取参数定义
    const parameters: any[] = (startNode.data?.parameters as any[]) || [];
    const paramDefinitions: Record<string, any> = {};
    parameters.forEach((param: any) => {
      paramDefinitions[param.name] = param.dataType;
    });
-
    // 参数类型转换
    const convertedParams: Record<string, any> = {};
    for (const { key, value } of params4Test.value) {
      const paramKey = key.trim();
-      if (!paramKey) continue;
-
+      if (!paramKey) {
+        continue;
+      }
      let dataType = paramDefinitions[paramKey];
      if (!dataType) {
        dataType = 'String';
      }
-
      try {
        convertedParams[paramKey] = convertParamValue(value, dataType);
      } catch (error: any) {
@@ -102,13 +110,11 @@ async function goRun() {
      }
    }

-    const data = {
+    // 执行测试请求
+    testResult.value = await testWorkflow({
      graph: JSON.stringify(val),
      params: convertedParams,
-    };
-
-    const response = await testWorkflow(data);
-    testResult.value = response;
+    });
  } catch (error: any) {
    error.value =
      error.response?.data?.message || '运行失败，请检查参数和网络连接';
@@ -120,6 +126,7 @@ async function goRun() {
 /** 获取开始节点 */
 function getStartNode() {
  if (tinyflowRef.value) {
+    // TODO @xingyu：不确定是不是这里封装了 Tinyflow，现在 .getData() 会报错；
    const val = tinyflowRef.value.getData();
    const startNode = val!.nodes.find((node: any) => node.type === 'startNode');
    if (!startNode) {
@@ -142,8 +149,9 @@ function removeParam(index: number) {

 /** 类型转换函数 */
 function convertParamValue(value: string, dataType: string) {
-  if (value === '') return null; // 空值处理
-
+  if (value === '') {
+    return null;
+  }
  switch (dataType) {
    case 'Number': {
      const num = Number(value);
@@ -154,8 +162,12 @@ function convertParamValue(value: string, dataType: string) {
      return String(value);
    }
    case 'Boolean': {
-      if (value.toLowerCase() === 'true') return true;
-      if (value.toLowerCase() === 'false') return false;
+      if (value.toLowerCase() === 'true') {
+        return true;
+      }
+      if (value.toLowerCase() === 'false') {
+        return false;
+      }
      throw new Error('必须为 true/false');
    }
    case 'Array':
@@ -171,9 +183,9 @@ function convertParamValue(value: string, dataType: string) {
    }
  }
 }
+
 /** 表单校验 */
 async function validate() {
-  // 获取最新的流程数据
  if (!workflowData.value || !tinyflowRef.value) {
    throw new Error('请设计流程');
  }
--- a/apps/web-antd/src/views/ai/workflow/index.vue
+++ b/apps/web-antd/src/views/ai/workflow/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiWorkflowApi } from '#/api/ai/workflow';

 import { Page } from '@vben/common-ui';

@@ -17,14 +18,14 @@ function handleRefresh() {
  gridApi.query();
 }

-/** 创建 */
+/** 创建工作流 */
 function handleCreate() {
  router.push({
    name: 'AiWorkflowCreate',
  });
 }

-/** 编辑 */
+/** 编辑工作流 */
 function handleEdit(row: any) {
  router.push({
    name: 'AiWorkflowCreate',
@@ -32,17 +33,15 @@ function handleEdit(row: any) {
  });
 }

-/** 删除 */
+/** 删除工作流 */
 async function handleDelete(row: any) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.name]),
    duration: 0,
  });
  try {
-    await deleteWorkflow(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteWorkflow(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } finally {
    hideLoading();
@@ -70,12 +69,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
      search: true,
    },
-  } as VxeTableGridOptions<any>,
+  } as VxeTableGridOptions<AiWorkflowApi.Workflow>,
 });
 </script>

--- a/apps/web-antd/src/views/mall/product/category/components/index.ts
+++ b/apps/web-antd/src/views/mall/product/category/components/index.ts
@@ -0,0 +1 @@
+export { default as ProductCategorySelect } from './select.vue';
--- a/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue
+++ b/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue
@@ -11,26 +11,25 @@ import { getCategoryList } from '#/api/mall/product/category';
 defineOptions({ name: 'ProductCategorySelect' });

 const props = defineProps({
-  // 选中的ID
  modelValue: {
    type: [Number, Array<Number>],
    default: undefined,
-  },
-  // 是否多选
+  }, // 选中的 ID
  multiple: {
    type: Boolean,
    default: false,
-  },
-  // 上级品类的编号
+  }, // 是否多选
  parentId: {
    type: Number,
    default: undefined,
-  },
+  }, // 上级品类的编号
 });

 /** 分类选择 */
 const emit = defineEmits(['update:modelValue']);

+const categoryList = ref<any[]>([]); // 分类树
+
 /** 选中的分类 ID */
 const selectCategoryId = computed({
  get: () => {
@@ -42,7 +41,6 @@ const selectCategoryId = computed({
 });

 /** 初始化 */
-const categoryList = ref<any[]>([]); // 分类树
 onMounted(async () => {
  const data = await getCategoryList({
    parentId: props.parentId,
@@ -61,7 +59,7 @@ onMounted(async () => {
    }"
    :multiple="multiple"
    :tree-checkable="multiple"
-    class="w-1/1"
+    class="w-full"
    placeholder="请选择商品分类"
    allow-clear
    tree-default-expand-all
--- a/apps/web-antd/src/views/mall/promotion/combination/components/index.ts
+++ b/apps/web-antd/src/views/mall/promotion/combination/components/index.ts
@@ -0,0 +1,2 @@
+export { default as CombinationShowcase } from './showcase.vue';
+
--- a/apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue
@@ -0,0 +1,146 @@
+<!-- 拼团活动橱窗组件：用于展示和选择拼团活动 -->
+<script lang="ts" setup>
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { computed, ref, watch } from 'vue';
+
+import { CloseCircleFilled, PlusOutlined } from '@vben/icons';
+
+import { Image, Tooltip } from 'ant-design-vue';
+
+import { getCombinationActivityListByIds } from '#/api/mall/promotion/combination/combinationActivity';
+
+import CombinationTableSelect from './table-select.vue';
+
+interface CombinationShowcaseProps {
+  modelValue?: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<CombinationShowcaseProps>(), {
+  modelValue: undefined,
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]); // 已选择的活动列表
+const combinationTableSelectRef =
+  ref<InstanceType<typeof CombinationTableSelect>>(); // 活动选择表格组件引用
+const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
+
+/** 计算是否可以添加 */
+const canAdd = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.limit) {
+    return true;
+  }
+  return activityList.value.length < props.limit;
+});
+
+/** 监听 modelValue 变化，加载活动详情 */
+watch(
+  () => props.modelValue,
+  async (newValue) => {
+    // eslint-disable-next-line unicorn/no-nested-ternary
+    const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
+    if (ids.length === 0) {
+      activityList.value = [];
+      return;
+    }
+    // 只有活动发生变化时才重新查询
+    if (
+      activityList.value.length === 0 ||
+      activityList.value.some((activity) => !ids.includes(activity.id!))
+    ) {
+      activityList.value = await getCombinationActivityListByIds(ids);
+    }
+  },
+  { immediate: true },
+);
+
+/** 打开活动选择对话框 */
+function handleOpenActivitySelect() {
+  combinationTableSelectRef.value?.open(activityList.value);
+}
+
+/** 选择活动后触发 */
+function handleActivitySelected(
+  activities:
+    | MallCombinationActivityApi.CombinationActivity
+    | MallCombinationActivityApi.CombinationActivity[],
+) {
+  activityList.value = Array.isArray(activities) ? activities : [activities];
+  emitActivityChange();
+}
+
+/** 删除活动 */
+function handleRemoveActivity(index: number) {
+  activityList.value.splice(index, 1);
+  emitActivityChange();
+}
+
+/** 触发变更事件 */
+function emitActivityChange() {
+  if (props.limit === 1) {
+    const activity =
+      activityList.value.length > 0 ? activityList.value[0] : null;
+    emit('update:modelValue', activity?.id || 0);
+    emit('change', activity);
+  } else {
+    emit(
+      'update:modelValue',
+      activityList.value.map((activity) => activity.id!),
+    );
+    emit('change', activityList.value);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 已选活动列表 -->
+    <div
+      v-for="(activity, index) in activityList"
+      :key="activity.id"
+      class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
+    >
+      <Tooltip :title="activity.name">
+        <div class="relative h-full w-full">
+          <Image
+            :src="activity.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+          />
+          <!-- 删除按钮 -->
+          <CloseCircleFilled
+            v-if="!disabled"
+            class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </Tooltip>
+    </div>
+
+    <!-- 添加活动按钮 -->
+    <Tooltip v-if="canAdd" title="选择活动">
+      <div
+        class="hover:border-primary hover:bg-primary/5 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
+        @click="handleOpenActivitySelect"
+      >
+        <PlusOutlined class="text-xl text-gray-400" />
+      </div>
+    </Tooltip>
+  </div>
+
+  <!-- 活动选择对话框 -->
+  <CombinationTableSelect
+    ref="combinationTableSelectRef"
+    :multiple="isMultiple"
+    @change="handleActivitySelected"
+  />
+</template>
+
--- a/apps/web-antd/src/views/mall/promotion/combination/components/table-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/components/table-select.vue
@@ -0,0 +1,285 @@
+<!-- 拼团活动选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallCategoryApi } from '#/api/mall/product/category';
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { fenToYuan, formatDate, handleTree } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getCombinationActivityPage } from '#/api/mall/promotion/combination/combinationActivity';
+
+interface CombinationTableSelectProps {
+  multiple?: boolean; // 是否多选：true - checkbox；false - radio
+}
+
+const props = withDefaults(defineProps<CombinationTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [
+    activity:
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[],
+  ];
+}>();
+
+const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
+const categoryTreeList = ref<any[]>([]); // 分类树
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow =
+    gridApi.grid.getRadioRecord() as MallCombinationActivityApi.CombinationActivity;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+/**
+ * 格式化拼团价格
+ * @param products
+ */
+const formatCombinationPrice = (
+  products: MallCombinationActivityApi.CombinationProduct[],
+) => {
+  if (!products || products.length === 0) return '-';
+  const combinationPrice = Math.min(
+    ...products.map((item) => item.combinationPrice || 0),
+  );
+  return `￥${fenToYuan(combinationPrice)}`;
+};
+
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'name',
+    label: '活动名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入活动名称',
+      clearable: true,
+    },
+  },
+  {
+    fieldName: 'status',
+    label: '活动状态',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择活动状态',
+      clearable: true,
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+  },
+]);
+
+/** 表格列配置 */
+const gridColumns = computed<VxeGridProps['columns']>(() => {
+  const columns: VxeGridProps['columns'] = [];
+  if (props.multiple) {
+    columns.push({ type: 'checkbox', width: 55 });
+  } else {
+    columns.push({ type: 'radio', width: 55 });
+  }
+  columns.push(
+    {
+      field: 'id',
+      title: '活动编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '活动名称',
+      minWidth: 140,
+    },
+    {
+      field: 'activityTime',
+      title: '活动时间',
+      minWidth: 210,
+      formatter: ({ row }) => {
+        return `${formatDate(row.startTime, 'YYYY-MM-DD')} ~ ${formatDate(row.endTime, 'YYYY-MM-DD')}`;
+      },
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      width: 100,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return cellValue ? `￥${fenToYuan(cellValue)}` : '-';
+      },
+    },
+    {
+      field: 'products',
+      title: '拼团价',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return formatCombinationPrice(cellValue);
+      },
+    },
+    {
+      field: 'groupCount',
+      title: '开团组数',
+      minWidth: 100,
+    },
+    {
+      field: 'groupSuccessCount',
+      title: '成团组数',
+      minWidth: 100,
+    },
+    {
+      field: 'recordCount',
+      title: '购买次数',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  );
+  return columns;
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    checkboxConfig: {
+      reserve: true,
+    },
+    radioConfig: {
+      reserve: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          return await getCombinationActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
+  onConfirm: () => {
+    const selectedRows =
+      gridApi.grid.getCheckboxRecords() as MallCombinationActivityApi.CombinationActivity[];
+    emit('change', selectedRows);
+    modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      gridApi.grid.clearCheckboxRow();
+      gridApi.grid.clearRadioRow();
+      return;
+    }
+
+    // 1. 先查询数据
+    await gridApi.query();
+    // 2. 设置已选中行
+    const data = modalApi.getData<
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[]
+    >();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((activity) => {
+          const row = tableData.find(
+            (item: MallCombinationActivityApi.CombinationActivity) =>
+              item.id === activity.id,
+          );
+          if (row) {
+            gridApi.grid.setCheckboxRow(row, true);
+          }
+        });
+      }, 300);
+    } else if (!props.multiple && data && !Array.isArray(data)) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        const row = tableData.find(
+          (item: MallCombinationActivityApi.CombinationActivity) =>
+            item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (
+    data?:
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[],
+  ) => {
+    modalApi.setData(data).open();
+  },
+});
+
+/** 初始化分类数据 */
+onMounted(async () => {
+  categoryList.value = await getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+</script>
+
+<template>
+  <Modal title="选择活动" class="w-[950px]">
+    <Grid />
+  </Modal>
+</template>
--- a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
@@ -3,7 +3,7 @@ import { ref, watch } from 'vue';

 import { Button, Input } from 'ant-design-vue';

-import AppLinkSelectDialog from './app-link-select-dialog.vue';
+import AppLinkSelectDialog from './select-dialog.vue';

 /** APP 链接输入框 */
 defineOptions({ name: 'AppLinkInput' });
@@ -56,5 +56,6 @@ watch(
      </Button>
    </template>
  </Input>
+
  <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
 </template>
--- a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
@@ -3,11 +3,12 @@ import type { AppLink } from './data';

 import { nextTick, ref } from 'vue';

+import { useVbenModal } from '@vben/common-ui';
 import { getUrlNumberValue } from '@vben/utils';

-import { Button, Form, FormItem, Modal, Tooltip } from 'ant-design-vue';
+import { Button, Form, FormItem, Tooltip } from 'ant-design-vue';

-import ProductCategorySelect from '#/views/mall/product/category/components/product-category-select.vue';
+import { ProductCategorySelect } from '#/views/mall/product/category/components/';

 import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM } from './data';

@@ -30,21 +31,31 @@ const groupBtnRefs = ref<HTMLButtonElement[]>([]); // 分组引用列表
 const detailSelectDialog = ref<{
  id?: number;
  type?: APP_LINK_TYPE_ENUM;
-  visible: boolean;
 }>({
-  visible: false,
  id: undefined,
  type: undefined,
 }); // 详情选择对话框

-const dialogVisible = ref(false);
+const [Modal, modalApi] = useVbenModal({
+  onConfirm() {
+    emit('change', activeAppLink.value.path);
+    emit('appLinkChange', activeAppLink.value);
+    modalApi.close();
+  },
+});
+
+const [DetailSelectModal, detailSelectModalApi] = useVbenModal({
+  onConfirm() {
+    detailSelectModalApi.close();
+  },
+});

 defineExpose({ open });

 /** 打开弹窗 */
 async function open(link: string) {
  activeAppLink.value.path = link;
-  dialogVisible.value = true;
+  modalApi.open();
  // 滚动到当前的链接
  const group = APP_LINK_GROUP_LIST.find((group) =>
    group.links.some((linkItem) => {
@@ -76,7 +87,7 @@ function handleAppLinkSelected(appLink: AppLink) {
          'id',
          `http://127.0.0.1${activeAppLink.value.path}`,
        ) || undefined;
-      detailSelectDialog.value.visible = true;
+      detailSelectModalApi.open();
      break;
    }
    default: {
@@ -85,13 +96,6 @@ function handleAppLinkSelected(appLink: AppLink) {
  }
 }

-/** 处理确认提交 */
-function handleSubmit() {
-  emit('change', activeAppLink.value.path);
-  emit('appLinkChange', activeAppLink.value);
-  dialogVisible.value = false;
-}
-
 /**
 * 处理右侧链接列表滚动
 *
@@ -138,7 +142,7 @@ function scrollToGroupBtn(group: string) {

 /** 是否为相同的链接（不比较参数，只比较链接） */
 function isSameLink(link1: string, link2: string) {
-  return link2 ? link1.split('?')[0] === link2.split('?')[0] : false;
+  return link2 ? link1?.split('?')[0] === link2.split('?')[0] : false;
 }

 /** 处理详情选择 */
@@ -149,17 +153,12 @@ function handleProductCategorySelected(id: number) {
  activeAppLink.value.path = `${url.pathname}${url.search}`;

  // 关闭对话框，并重置 id
-  detailSelectDialog.value.visible = false;
+  detailSelectModalApi.close();
  detailSelectDialog.value.id = undefined;
 }
 </script>
 <template>
-  <Modal
-    v-model:open="dialogVisible"
-    title="选择链接"
-    width="65%"
-    @ok="handleSubmit"
-  >
+  <Modal title="选择链接" class="w-[65%]">
    <div class="flex h-[500px] gap-2">
      <!-- 左侧分组列表 -->
      <div
@@ -218,7 +217,7 @@ function handleProductCategorySelected(id: number) {
    </div>
  </Modal>

-  <Modal v-model:open="detailSelectDialog.visible" title="选择分类" width="65%">
+  <DetailSelectModal title="选择分类" class="w-[65%]">
    <Form class="min-h-[200px]">
      <FormItem
        label="选择分类"
@@ -233,11 +232,5 @@ function handleProductCategorySelected(id: number) {
        />
      </FormItem>
    </Form>
-  </Modal>
+  </DetailSelectModal>
 </template>
-
-<style lang="scss" scoped>
-:deep(.ant-btn + .ant-btn) {
-  margin-left: 0 !important;
-}
-</style>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@@ -133,11 +133,16 @@ function handleSliderChange(prop: string) {
    </TabPane>

    <!-- 每个组件的通用内容 -->
+    <!-- TODO @xingyu：这里的样式，貌似没 ele 版本的好看。 -->
    <TabPane tab="样式" key="style" force-render>
      <p class="text-lg font-bold">组件样式：</p>
      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
        <Form :model="formData">
-          <FormItem label="组件背景" name="bgType">
+          <FormItem
+            label="组件背景"
+            name="bgType"
+            :label-col="{ style: { width: '109px' } }"
+          >
            <RadioGroup v-model:value="formData.bgType">
              <Radio value="color">纯色</Radio>
              <Radio value="img">图片</Radio>
@@ -146,11 +151,17 @@ function handleSliderChange(prop: string) {
          <FormItem
            label="选择颜色"
            name="bgColor"
+            :label-col="{ style: { width: '109px' } }"
            v-if="formData.bgType === 'color'"
          >
            <ColorInput v-model="formData.bgColor" />
          </FormItem>
-          <FormItem label="上传图片" name="bgImg" v-else>
+          <FormItem
+            label="上传图片"
+            name="bgImg"
+            :label-col="{ style: { width: '109px' } }"
+            v-else
+          >
            <UploadImg
              v-model="formData.bgImg"
              :limit="1"
@@ -164,14 +175,13 @@ function handleSliderChange(prop: string) {
              <FormItem
                :label="dataRef.label"
                :name="dataRef.prop"
-                :label-col="
-                  dataRef.children ? { span: 6 } : { span: 5, offset: 1 }
-                "
-                :wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }"
+                :label-col="{
+                  style: { width: dataRef.children ? '80px' : '58px' },
+                }"
                class="mb-0 w-full"
              >
                <Row>
-                  <Col :span="12">
+                  <Col :span="11">
                    <Slider
                      v-model:value="
                        formData[dataRef.prop as keyof ComponentStyle]
@@ -179,9 +189,10 @@ function handleSliderChange(prop: string) {
                      :max="100"
                      :min="0"
                      @change="handleSliderChange(dataRef.prop)"
+                      class="mr-[16px]"
                    />
                  </Col>
-                  <Col :span="4">
+                  <Col :span="2">
                    <InputNumber
                      :max="100"
                      :min="0"
@@ -200,23 +211,3 @@ function handleSliderChange(prop: string) {
    </TabPane>
  </Tabs>
 </template>
-
-<style scoped lang="scss">
-:deep(.ant-slider) {
-  margin-right: 16px;
-}
-
-:deep(.ant-input-number) {
-  width: 50px;
-}
-
-:deep(.ant-tree) {
-  .ant-tree-node-content-wrapper {
-    flex: 1;
-  }
-
-  .ant-form-item {
-    margin-bottom: 0;
-  }
-}
-</style>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -49,6 +49,7 @@ const emits = defineEmits<{
 type DiyComponentWithStyle = DiyComponent<any> & {
  property: { style?: ComponentStyle };
 };
+
 /** 组件样式 */
 const style = computed(() => {
  const componentStyle = props.component.property.style;
@@ -108,6 +109,8 @@ const handleDeleteComponent = () => {
        class="component-toolbar"
        v-if="showToolbar && component.name && active"
      >
+        <!-- TODO @xingyu：按钮少的时候，会存在遮住的情况； -->
+        <!-- TODO @xingyu：貌似中间的选中框框，没全部框柱。上面多了点，下面少了点。 -->
        <VerticalButtonGroup size="small">
          <Button
            :disabled="!canMoveUp"
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -19,6 +19,7 @@ const props = defineProps<{
  list: DiyComponentLibrary[];
 }>();

+// TODO @xingyu：要不要换成 reactive，和 ele 一致
 const groups = ref<any[]>([]); // 组件分组
 const extendGroups = ref<string[]>([]); // 展开的折叠面板

@@ -99,4 +100,5 @@ function handleCloneComponent(component: DiyComponent<any>) {
      </Collapse.Panel>
    </Collapse>
  </div>
+  <!-- TODO @xingyu：ele 里面有一些 style，看看是不是都迁移完了；特别是 drag-area 是全局样式； -->
 </template>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { CarouselProperty } from './config';
-
-import { ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { Carousel, Image } from 'ant-design-vue';
-
-/** 轮播图 */
-defineOptions({ name: 'Carousel' });
-
-defineProps<{ property: CarouselProperty }>();
-
-const currentIndex = ref(0);
-const handleIndexChange = (index: number) => {
-  currentIndex.value = index + 1;
-};
-</script>
-<template>
-  <div>
-    <!-- 无图片 -->
-    <div
-      class="bg-card flex h-64 items-center justify-center"
-      v-if="property.items.length === 0"
-    >
-      <IconifyIcon icon="tdesign:image" class="size-6 text-gray-800" />
-    </div>
-    <div v-else class="relative">
-      <Carousel
-        :autoplay="property.autoplay"
-        :autoplay-speed="property.interval * 1000"
-        :dots="property.indicator !== 'number'"
-        @change="handleIndexChange"
-        class="h-44"
-      >
-        <div v-for="(item, index) in property.items" :key="index">
-          <Image
-            class="h-full w-full object-cover"
-            :src="item.imgUrl"
-            :preview="false"
-          />
-        </div>
-      </Carousel>
-      <div
-        v-if="property.indicator === 'number'"
-        class="absolute bottom-2.5 right-2.5 rounded-xl bg-black px-2 py-1 text-xs text-white opacity-40"
-      >
-        {{ currentIndex }} / {{ property.items.length }}
-      </div>
-    </div>
-  </div>
-</template>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/config.ts
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/index.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { CarouselProperty } from './config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Carousel, Image } from 'ant-design-vue';
+
+/** 轮播图 */
+defineOptions({ name: 'Carousel' });
+
+defineProps<{ property: CarouselProperty }>();
+
+const currentIndex = ref(0); // 当前索引
+
+/** 处理索引变化 */
+const handleIndexChange = (index: number) => {
+  currentIndex.value = index + 1;
+};
+</script>
+<template>
+  <!-- 无图片 -->
+  <div
+    class="flex items-center justify-center bg-gray-300"
+    :style="{
+      height: property.items.length === 0 ? '250px' : `${property.height}px`,
+    }"
+    v-if="property.items.length === 0"
+  >
+    <IconifyIcon icon="tdesign:image" class="text-[120px] text-gray-800" />
+  </div>
+  <div v-else class="relative">
+    <Carousel
+      :autoplay="property.autoplay"
+      :autoplay-speed="property.interval * 1000"
+      :dots="property.indicator !== 'number'"
+      @change="handleIndexChange"
+      :style="{ height: `${property.height}px` }"
+    >
+      <div v-for="(item, index) in property.items" :key="index">
+        <Image
+          class="h-full w-full object-cover"
+          :src="item.imgUrl"
+          :preview="false"
+        />
+      </div>
+    </Carousel>
+    <div
+      v-if="property.indicator === 'number'"
+      class="absolute bottom-[10px] right-[10px] rounded-xl bg-black px-[8px] py-[2px] text-[10px] text-white opacity-40"
+    >
+      {{ currentIndex }} / {{ property.items.length }}
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
@@ -7,6 +7,7 @@ import { useVModel } from '@vueuse/core';
 import {
  Form,
  FormItem,
+  InputNumber,
  Radio,
  RadioButton,
  RadioGroup,
@@ -21,51 +22,61 @@ import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';

 import ComponentContainerProperty from '../../component-container-property.vue';

-// 轮播图属性面板
+/** 轮播图属性面板 */
 defineOptions({ name: 'CarouselProperty' });

 const props = defineProps<{ modelValue: CarouselProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>

 <template>
  <ComponentContainerProperty v-model="formData.style">
-    <Form label-width="80px" :model="formData">
+    <Form
+      :model="formData"
+      :label-col="{ style: { width: '80px' } }"
+      label-align="right"
+    >
      <p class="text-base font-bold">样式设置：</p>
      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
-        <FormItem label="样式" prop="type">
-          <RadioGroup v-model="formData.type">
-            <Tooltip class="item" content="默认" placement="bottom">
+        <FormItem label="样式">
+          <RadioGroup v-model:value="formData.type">
+            <Tooltip class="item" title="默认" placement="bottom">
              <RadioButton value="default">
                <IconifyIcon icon="system-uicons:carousel" class="size-6" />
              </RadioButton>
            </Tooltip>
-            <Tooltip class="item" content="卡片" placement="bottom">
+            <Tooltip class="item" title="卡片" placement="bottom">
              <RadioButton value="card">
                <IconifyIcon icon="ic:round-view-carousel" class="size-6" />
              </RadioButton>
            </Tooltip>
          </RadioGroup>
        </FormItem>
-        <FormItem label="指示器" prop="indicator">
-          <RadioGroup v-model="formData.indicator">
+        <FormItem label="高度">
+          <InputNumber
+            v-model:value="formData.height"
+            class="mr-[10px] !w-1/2"
+          />
+          px
+        </FormItem>
+        <FormItem label="指示器">
+          <RadioGroup v-model:value="formData.indicator">
            <Radio value="dot">小圆点</Radio>
            <Radio value="number">数字</Radio>
          </RadioGroup>
        </FormItem>
-        <FormItem label="是否轮播" prop="autoplay">
-          <Switch v-model="formData.autoplay" />
+        <FormItem label="是否轮播">
+          <Switch v-model:checked="formData.autoplay" />
        </FormItem>
-        <FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
+        <FormItem label="播放间隔" v-if="formData.autoplay">
          <Slider
-            v-model="formData.interval"
+            v-model:value="formData.interval"
            :max="10"
            :min="0.5"
            :step="0.5"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
          />
          <p class="text-info">单位：秒</p>
        </FormItem>
@@ -74,18 +85,13 @@ const formData = useVModel(props, 'modelValue', emit);
      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
        <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
          <template #default="{ element }">
-            <FormItem label="类型" prop="type" class="mb-2" label-width="40px">
-              <RadioGroup v-model="element.type">
+            <FormItem label="类型" name="type">
+              <RadioGroup v-model:value="element.type">
                <Radio value="img">图片</Radio>
                <Radio value="video">视频</Radio>
              </RadioGroup>
            </FormItem>
-            <FormItem
-              label="图片"
-              class="mb-2"
-              label-width="40px"
-              v-if="element.type === 'img'"
-            >
+            <FormItem label="图片" v-if="element.type === 'img'">
              <UploadImg
                v-model="element.imgUrl"
                draggable="false"
@@ -96,7 +102,7 @@ const formData = useVModel(props, 'modelValue', emit);
              />
            </FormItem>
            <template v-else>
-              <FormItem label="封面" class="mb-2" label-width="40px">
+              <FormItem label="封面">
                <UploadImg
                  v-model="element.imgUrl"
                  draggable="false"
@@ -106,7 +112,7 @@ const formData = useVModel(props, 'modelValue', emit);
                  class="min-w-20"
                />
              </FormItem>
-              <FormItem label="视频" class="mb-2" label-width="40px">
+              <FormItem label="视频">
                <UploadFile
                  v-model="element.videoUrl"
                  :file-type="['mp4']"
@@ -116,7 +122,7 @@ const formData = useVModel(props, 'modelValue', emit);
                />
              </FormItem>
            </template>
-            <FormItem label="链接" class="mb-2" label-width="40px">
+            <FormItem label="链接">
              <AppLinkInput v-model="element.url" />
            </FormItem>
          </template>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
@@ -1,4 +1,87 @@
-// 导出所有优惠券相关组件
-export { CouponDiscount } from './coupon-discount';
-export { CouponDiscountDesc } from './coupon-discount-desc';
-export { CouponValidTerm } from './coupon-validTerm';
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import {
+  CouponTemplateValidityTypeEnum,
+  PromotionDiscountTypeEnum,
+} from '@vben/constants';
+import { floatToFixed2, formatDate } from '@vben/utils';
+
+/** 有效期 */
+export const CouponValidTerm = defineComponent({
+  name: 'CouponValidTerm',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    const text =
+      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
+        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
+            coupon.validEndTime,
+            'YYYY-MM-DD',
+          )}`
+        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
+    return () => <div>{text}</div>;
+  },
+});
+
+/** 优惠值 */
+export const CouponDiscount = defineComponent({
+  name: 'CouponDiscount',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 折扣
+    let value = `${(coupon.discountPercent ?? 0) / 10}`;
+    let suffix = ' 折';
+    // 满减
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      value = floatToFixed2(coupon.discountPrice);
+      suffix = ' 元';
+    }
+    return () => (
+      <div>
+        <span class={'text-20px font-bold'}>{value}</span>
+        <span>{suffix}</span>
+      </div>
+    );
+  },
+});
+
+/** 优惠描述 */
+export const CouponDiscountDesc = defineComponent({
+  name: 'CouponDiscountDesc',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 使用条件
+    const useCondition =
+      coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
+    // 优惠描述
+    const discountDesc =
+      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+        ? `减${floatToFixed2(coupon.discountPrice)}元`
+        : `打${(coupon.discountPercent ?? 0) / 10}折`;
+    return () => (
+      <div>
+        <span>{useCondition}</span>
+        <span>{discountDesc}</span>
+      </div>
+    );
+  },
+});
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
@@ -1,34 +0,0 @@
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { defineComponent } from 'vue';
-
-import { PromotionDiscountTypeEnum } from '@vben/constants';
-import { floatToFixed2 } from '@vben/utils';
-
-// 优惠描述
-export const CouponDiscountDesc = defineComponent({
-  name: 'CouponDiscountDesc',
-  props: {
-    coupon: {
-      type: Object as () => MallCouponTemplateApi.CouponTemplate,
-      required: true,
-    },
-  },
-  setup(props) {
-    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
-    // 使用条件
-    const useCondition =
-      coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
-    // 优惠描述
-    const discountDesc =
-      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
-        ? `减${floatToFixed2(coupon.discountPrice)}元`
-        : `打${(coupon.discountPercent ?? 0) / 10}折`;
-    return () => (
-      <div>
-        <span>{useCondition}</span>
-        <span>{discountDesc}</span>
-      </div>
-    );
-  },
-});
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
@@ -1,34 +0,0 @@
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { defineComponent } from 'vue';
-
-import { PromotionDiscountTypeEnum } from '@vben/constants';
-import { floatToFixed2 } from '@vben/utils';
-
-// 优惠值
-export const CouponDiscount = defineComponent({
-  name: 'CouponDiscount',
-  props: {
-    coupon: {
-      type: Object as () => MallCouponTemplateApi.CouponTemplate,
-      required: true,
-    },
-  },
-  setup(props) {
-    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
-    // 折扣
-    let value = `${(coupon.discountPercent ?? 0) / 10}`;
-    let suffix = ' 折';
-    // 满减
-    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
-      value = floatToFixed2(coupon.discountPrice);
-      suffix = ' 元';
-    }
-    return () => (
-      <div>
-        <span class={'text-20px font-bold'}>{value}</span>
-        <span>{suffix}</span>
-      </div>
-    );
-  },
-});
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
@@ -1,28 +0,0 @@
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { defineComponent } from 'vue';
-
-import { CouponTemplateValidityTypeEnum } from '@vben/constants';
-import { formatDate } from '@vben/utils';
-
-// 有效期
-export const CouponValidTerm = defineComponent({
-  name: 'CouponValidTerm',
-  props: {
-    coupon: {
-      type: Object as () => MallCouponTemplateApi.CouponTemplate,
-      required: true,
-    },
-  },
-  setup(props) {
-    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
-    const text =
-      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
-        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
-            coupon.validEndTime,
-            'YYYY-MM-DD',
-          )}`
-        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
-    return () => <div>{text}</div>;
-  },
-});
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
@@ -13,12 +13,19 @@ import {
  CouponValidTerm,
 } from './component';

-/** 商品卡片 */
+/** 优惠劵卡片 */
 defineOptions({ name: 'CouponCard' });
-// 定义属性
+
+/** 定义属性 */
 const props = defineProps<{ property: CouponCardProperty }>();
-// 商品列表
-const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]);
+
+const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 优惠劵列表
+const phoneWidth = ref(375); // 手机宽度
+const containerRef = ref(); // 容器引用
+const scrollbarWidth = ref('100%'); // 滚动条宽度
+const couponWidth = ref(375); // 优惠券宽度
+
+/** 监听优惠券 ID 变化，加载优惠券列表 */
 watch(
  () => props.property.couponIds,
  async () => {
@@ -32,15 +39,7 @@ watch(
  },
 );

-// 手机宽度
-const phoneWidth = ref(384);
-// 容器
-const containerRef = ref();
-// 滚动条宽度
-const scrollbarWidth = ref('100%');
-// 优惠券的宽度
-const couponWidth = ref(384);
-// 计算布局参数
+/** 计算布局参数 */
 watch(
  () => [props.property, phoneWidth, couponList.value.length],
  () => {
@@ -56,13 +55,14 @@ watch(
  },
  { immediate: true, deep: true },
 );
+
+/** 初始化 */
 onMounted(() => {
-  // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
+  phoneWidth.value = containerRef.value?.offsetWidth || 375;
 });
 </script>
 <template>
-  <div class="z-10 min-h-8" wrap-class="w-full" ref="containerRef">
+  <div class="z-10 min-h-8 overflow-x-auto" ref="containerRef">
    <div
      class="flex flex-row text-xs"
      :style="{
@@ -82,17 +82,14 @@ onMounted(() => {
        v-for="(coupon, index) in couponList"
        :key="index"
      >
-        <!-- 布局1：1列-->
+        <!-- 布局 1：1 列-->
        <div
          v-if="property.columns === 1"
          class="ml-4 flex flex-row justify-between p-2"
        >
          <div class="flex flex-col justify-evenly gap-1">
-            <!-- 优惠值 -->
            <CouponDiscount :coupon="coupon" />
-            <!-- 优惠描述 -->
            <CouponDiscountDesc :coupon="coupon" />
-            <!-- 有效期 -->
            <CouponValidTerm :coupon="coupon" />
          </div>
          <div class="flex flex-col justify-evenly">
@@ -107,17 +104,14 @@ onMounted(() => {
            </div>
          </div>
        </div>
-        <!-- 布局2：2列-->
+        <!-- 布局 2：2 列-->
        <div
          v-else-if="property.columns === 2"
          class="ml-4 flex flex-row justify-between p-2"
        >
          <div class="flex flex-col justify-evenly gap-1">
-            <!-- 优惠值 -->
            <CouponDiscount :coupon="coupon" />
-            <!-- 优惠描述 -->
            <CouponDiscountDesc :coupon="coupon" />
-            <!-- 领取说明 -->
            <div v-if="coupon.totalCount >= 0">
              仅剩：{{ coupon.totalCount - coupon.takeCount }}张
            </div>
@@ -135,11 +129,9 @@ onMounted(() => {
            </div>
          </div>
        </div>
-        <!-- 布局3：3列-->
+        <!-- 布局 3：3 列-->
        <div v-else class="flex flex-col items-center justify-around gap-1 p-1">
-          <!-- 优惠值 -->
          <CouponDiscount :coupon="coupon" />
-          <!-- 优惠描述 -->
          <CouponDiscountDesc :coupon="coupon" />
          <div
            class="rounded-full px-2 py-0.5"
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
@@ -25,7 +25,7 @@ import {
  Typography,
 } from 'ant-design-vue';

-import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
 import CouponSelect from '#/views/mall/promotion/coupon/components/select.vue';
@@ -66,9 +66,7 @@ watch(
  () => formData.value.couponIds,
  async () => {
    if (formData.value.couponIds?.length > 0) {
-      couponList.value = await CouponTemplateApi.getCouponTemplateList(
-        formData.value.couponIds,
-      );
+      couponList.value = await getCouponTemplateList(formData.value.couponIds);
    }
  },
  {
@@ -103,7 +101,7 @@ watch(
              >
                减{{ floatToFixed2(coupon.discountPrice) }}元
              </span>
-              <span v-else> 打{{ (coupon.discountPercent ?? 0) / 10 }}折 </span>
+              <span v-else> 打{{ coupon.discountPercent }}折 </span>
            </Typography.Text>
          </Typography>
        </div>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/divider/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/divider/config.ts
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/divider/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/divider/index.vue
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/divider/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/divider/property.vue
--- 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,23 +5,20 @@ import { ref } from 'vue';

 import { IconifyIcon } from '@vben/icons';

-import { Button, Image, message } from 'ant-design-vue';
+import { Button, Image } from 'ant-design-vue';

 /** 悬浮按钮 */
 defineOptions({ name: 'FloatingActionButton' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: FloatingActionButtonProperty }>();

-// 是否展开
-const expanded = ref(false);
-// 处理展开/折叠
-const handleToggleFab = () => {
-  expanded.value = !expanded.value;
-};
+const expanded = ref(false); // 是否展开

-const handleActive = (index: number) => {
-  message.success(`点击了${index}`);
-};
+/** 处理展开/折叠 */
+function handleToggleFab() {
+  expanded.value = !expanded.value;
+}
 </script>
 <template>
  <div
@@ -38,9 +35,8 @@ const handleActive = (index: number) => {
        v-for="(item, index) in property.list"
        :key="index"
        class="flex flex-col items-center"
-        @click="handleActive(index)"
      >
-        <Image :src="item.imgUrl" fit="contain" class="h-7 w-7">
+        <Image :src="item.imgUrl" :width="28" :height="28" :preview="false">
          <template #error>
            <div class="flex h-full w-full items-center justify-center">
              <IconifyIcon
@@ -61,36 +57,18 @@ const handleActive = (index: number) => {
      </div>
    </template>
    <!-- todo: @owen 使用APP主题色 -->
-    <Button type="primary" size="large" circle @click="handleToggleFab">
+    <Button type="primary" size="large" shape="circle" @click="handleToggleFab">
      <IconifyIcon
        icon="lucide:plus"
-        class="fab-icon"
-        :class="[{ active: expanded }]"
+        class="transition-transform duration-300"
+        :class="expanded ? 'rotate-[135deg]' : 'rotate-0'"
      />
    </Button>
  </div>
  <!-- 模态背景：展开时显示，点击后折叠 -->
-  <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
+  <div
+    v-if="expanded"
+    class="absolute left-[calc(50%-375px/2)] top-0 z-[11] h-full w-[375px] bg-black/40"
+    @click="handleToggleFab"
+  ></div>
 </template>
-
-<style scoped lang="scss">
-/* 模态背景 */
-.modal-bg {
-  position: absolute;
-  top: 0;
-  left: calc(50% - 384px / 2);
-  z-index: 11;
-  width: 384px;
-  height: 100%;
-  background-color: rgb(0 0 0 / 40%);
-}
-
-.fab-icon {
-  transform: rotate(0deg);
-  transition: transform 0.3s;
-
-  &.active {
-    transform: rotate(135deg);
-  }
-}
-</style>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
@@ -2,10 +2,9 @@ import type { StyleValue } from 'vue';

 import type { HotZoneItemProperty } from '../../config';

-// 热区的最小宽高
-export const HOT_ZONE_MIN_SIZE = 100;
+export const HOT_ZONE_MIN_SIZE = 100; // 热区的最小宽高

-// 控制的类型
+/** 控制的类型 */
 export enum CONTROL_TYPE_ENUM {
  LEFT,
  TOP,
@@ -13,14 +12,14 @@ export enum CONTROL_TYPE_ENUM {
  HEIGHT,
 }

-// 定义热区的控制点
+/** 定义热区的控制点 */
 export interface ControlDot {
  position: string;
  types: CONTROL_TYPE_ENUM[];
  style: StyleValue;
 }

-// 热区的8个控制点
+/** 热区的 8 个控制点 */
 export const CONTROL_DOT_LIST = [
  {
    position: '左上角',
@@ -98,10 +97,10 @@ export const CONTROL_DOT_LIST = [
 ] as ControlDot[];

 // region 热区的缩放
-// 热区的缩放比例
-export const HOT_ZONE_SCALE_RATE = 2;
-// 缩小：缩回适合手机屏幕的大小
-export const zoomOut = (list?: HotZoneItemProperty[]) => {
+export const HOT_ZONE_SCALE_RATE = 2; // 热区的缩放比例
+
+/** 缩小：缩回适合手机屏幕的大小 */
+export function zoomOut(list?: HotZoneItemProperty[]) {
  return (
    list?.map((hotZone) => ({
      ...hotZone,
@@ -111,9 +110,10 @@ export const zoomOut = (list?: HotZoneItemProperty[]) => {
      height: (hotZone.height /= HOT_ZONE_SCALE_RATE),
    })) || []
  );
-};
-// 放大：作用是为了方便在电脑屏幕上编辑
-export const zoomIn = (list?: HotZoneItemProperty[]) => {
+}
+
+/** 放大：作用是为了方便在电脑屏幕上编辑 */
+export function zoomIn(list?: HotZoneItemProperty[]) {
  return (
    list?.map((hotZone) => ({
      ...hotZone,
@@ -123,7 +123,8 @@ export const zoomIn = (list?: HotZoneItemProperty[]) => {
      height: (hotZone.height *= HOT_ZONE_SCALE_RATE),
    })) || []
  );
-};
+}
+
 // endregion

 /**
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
@@ -11,7 +11,7 @@ import { IconifyIcon } from '@vben/icons';

 import { Button, Image } from 'ant-design-vue';

-import AppLinkSelectDialog from '#/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue';
+import { AppLinkSelectDialog } from '#/views/mall/promotion/components';

 import {
  CONTROL_DOT_LIST,
@@ -213,8 +213,9 @@ const handleAppLinkChange = (appLink: AppLink) => {
        </span>
        <IconifyIcon
          icon="lucide:x"
-          class="absolute inset-0 right-0 top-0 hidden size-6 cursor-pointer items-center rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
+          class="absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
          :style="{ backgroundColor: 'hsl(var(--primary))' }"
+          :size="14"
          @click="handleRemove(item)"
        />

@@ -230,9 +231,7 @@ const handleAppLinkChange = (appLink: AppLink) => {
    </div>
    <template #prepend-footer>
      <Button @click="handleAdd" type="primary" ghost>
-        <template #icon>
-          <IconifyIcon icon="lucide:plus" />
-        </template>
+        <IconifyIcon icon="lucide:plus" class="mr-5px" />
        添加热区
      </Button>
    </template>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
@@ -2,8 +2,10 @@
 import type { HotZoneProperty } from './config';

 import { Image } from 'ant-design-vue';
+
 /** 热区 */
 defineOptions({ name: 'HotZone' });
+
 const props = defineProps<{ property: HotZoneProperty }>();
 </script>

@@ -12,21 +14,23 @@ const props = defineProps<{ property: HotZoneProperty }>();
    <Image
      :src="props.property.imgUrl"
      class="pointer-events-none h-full w-full select-none"
+      :preview="false"
    />
    <div
      v-for="(item, index) in props.property.list"
      :key="index"
-      class="bg-primary-700 absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
+      class="absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
      :style="{
        width: `${item.width}px`,
        height: `${item.height}px`,
        top: `${item.top}px`,
        left: `${item.left}px`,
+        color: 'hsl(var(--primary))',
+        background: 'color-mix(in srgb, hsl(var(--primary)) 30%, transparent)',
+        borderColor: 'hsl(var(--primary))',
      }"
    >
-      <p class="text-primary">
-        {{ item.name }}
-      </p>
+      {{ item.name }}
    </div>
  </div>
 </template>
--- 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
@@ -15,42 +15,46 @@ import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
 defineOptions({ name: 'HotZoneProperty' });

 const props = defineProps<{ modelValue: HotZoneProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);

-// 热区编辑对话框
-const editDialogRef = ref();
-// 打开热区编辑对话框
-const handleOpenEditDialog = () => {
+const editDialogRef = ref(); // 热区编辑对话框
+
+/** 打开热区编辑对话框 */
+function handleOpenEditDialog() {
  editDialogRef.value.open();
-};
+}
 </script>

 <template>
  <ComponentContainerProperty v-model="formData.style">
    <!-- 表单 -->
    <Form
-      :label-col="{ span: 6 }"
-      :wrapper-col="{ span: 18 }"
+      :label-col="{ style: { width: '80px' } }"
      :model="formData"
      class="mt-2"
    >
-      <FormItem label="上传图片" prop="imgUrl">
+      <FormItem label="上传图片" name="imgUrl">
        <UploadImg
          v-model="formData.imgUrl"
          height="50px"
          width="auto"
-          class="min-w-20"
+          class="min-w-[80px]"
          :show-description="false"
-        />
+        >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
+          <template #tip> 推荐宽度 750 </template>
+        </UploadImg>
      </FormItem>
-      <p class="text-center text-sm text-gray-500">推荐宽度 750</p>
    </Form>

-    <Button type="primary" class="mt-4 w-full" @click="handleOpenEditDialog">
+    <Button type="primary" ghost class="w-full" @click="handleOpenEditDialog">
      设置热区
    </Button>
  </ComponentContainerProperty>
+
  <!-- 热区编辑对话框 -->
  <HotZoneEditDialog
    ref="editDialogRef"
@@ -58,26 +62,3 @@ const handleOpenEditDialog = () => {
    :img-url="formData.imgUrl"
  />
 </template>
-
-<style scoped lang="scss">
-.hot-zone {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  color: hsl(var(--text-color));
-  cursor: move;
-  background: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
-  border: 1px solid hsl(var(--primary));
-
-  /* 控制点 */
-  .ctrl-dot {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    background-color: #fff;
-    border-radius: 50%;
-  }
-}
-</style>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
@@ -11,7 +11,6 @@ defineOptions({ name: 'ImageBar' });
 defineProps<{ property: ImageBarProperty }>();
 </script>
 <template>
-  <!-- 无图片 -->
  <div
    class="bg-card flex h-12 items-center justify-center"
    v-if="!property.imgUrl"
--- 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
@@ -9,11 +9,13 @@ import { AppLinkInput } from '#/views/mall/promotion/components';

 import ComponentContainerProperty from '../../component-container-property.vue';

-// 图片展示属性面板
+/** 图片展示属性面板 */
 defineOptions({ name: 'ImageBarProperty' });

 const props = defineProps<{ modelValue: ImageBarProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>

@@ -24,7 +26,7 @@ const formData = useVModel(props, 'modelValue', emit);
      :wrapper-col="{ span: 18 }"
      :model="formData"
    >
-      <FormItem label="上传图片" prop="imgUrl">
+      <FormItem label="上传图片" name="imgUrl">
        <UploadImg
          v-model="formData.imgUrl"
          draggable="false"
@@ -32,9 +34,12 @@ const formData = useVModel(props, 'modelValue', emit);
          width="100%"
          class="min-w-20"
          :show-description="false"
-        />
+        >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
+          <template #tip> 建议宽度750 </template>
+        </UploadImg>
      </FormItem>
-      <FormItem label="链接" prop="url">
+      <FormItem label="链接" name="url">
        <AppLinkInput v-model="formData.url" />
      </FormItem>
    </Form>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
@@ -9,9 +9,11 @@ import { Image } from 'ant-design-vue';

 /** 广告魔方 */
 defineOptions({ name: 'MagicCube' });
+
 const props = defineProps<{ property: MagicCubeProperty }>();
-// 一个方块的大小
-const CUBE_SIZE = 93.75;
+
+const CUBE_SIZE = 93.75; // 一个方块的大小
+
 /**
 * 计算方块的行数
 * 行数用于计算魔方的总体高度，存在以下情况：
@@ -53,9 +55,9 @@ const rowCount = computed(() => {
      }"
    >
      <Image
-        class="h-full w-full"
-        fit="cover"
+        class="h-full w-full object-cover"
        :src="item.imgUrl"
+        :preview="false"
        :style="{
          borderTopLeftRadius: `${property.borderRadiusTop}px`,
          borderTopRightRadius: `${property.borderRadiusTop}px`,
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -33,30 +33,36 @@ const handleHotAreaSelected = (_: any, index: number) => {

 <template>
  <ComponentContainerProperty v-model="formData.style">
-    <Form :model="formData" class="mt-2">
+    <Form
+      :model="formData"
+      :label-col="{ style: { width: '80px' } }"
+      label-align="right"
+    >
      <p class="text-base font-bold">魔方设置：</p>
-      <MagicCubeEditor
-        class="my-4"
-        v-model="formData.list"
-        :rows="4"
-        :cols="4"
-        @hot-area-selected="handleHotAreaSelected"
-      />
-      <template v-for="(hotArea, index) in formData.list" :key="index">
-        <template v-if="selectedHotAreaIndex === index">
-          <FormItem label="上传图片" :name="`list[${index}].imgUrl`">
-            <UploadImg
-              v-model="hotArea.imgUrl"
-              height="80px"
-              width="80px"
-              :show-description="false"
-            />
-          </FormItem>
-          <FormItem label="链接" :name="`list[${index}].url`">
-            <AppLinkInput v-model="hotArea.url" />
-          </FormItem>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+        <p class="text-xs text-gray-500">每格尺寸 187 * 187</p>
+        <MagicCubeEditor
+          v-model="formData.list"
+          :rows="4"
+          :cols="4"
+          @hot-area-selected="handleHotAreaSelected"
+        />
+        <template v-for="(hotArea, index) in formData.list" :key="index">
+          <template v-if="selectedHotAreaIndex === index">
+            <FormItem label="上传图片" :name="`list[${index}].imgUrl`">
+              <UploadImg
+                v-model="hotArea.imgUrl"
+                height="80px"
+                width="80px"
+                :show-description="false"
+              />
+            </FormItem>
+            <FormItem label="链接" :name="`list[${index}].url`">
+              <AppLinkInput v-model="hotArea.url" />
+            </FormItem>
+          </template>
        </template>
-      </template>
+      </div>
      <FormItem label="上圆角" name="borderRadiusTop">
        <Slider v-model:value="formData.borderRadiusTop" :max="100" :min="0" />
      </FormItem>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
@@ -5,6 +5,7 @@ import { Image } from 'ant-design-vue';

 /** 宫格导航 */
 defineOptions({ name: 'MenuGrid' });
+
 defineProps<{ property: MenuGridProperty }>();
 </script>

--- 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
@@ -9,6 +9,7 @@ import {
  AppLinkInput,
  ColorInput,
  Draggable,
+  InputWithColor,
 } from '#/views/mall/promotion/components';

 import ComponentContainerProperty from '../../component-container-property.vue';
@@ -18,21 +19,26 @@ import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
 defineOptions({ name: 'MenuGridProperty' });

 const props = defineProps<{ modelValue: MenuGridProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>

 <template>
  <ComponentContainerProperty v-model="formData.style">
    <!-- 表单 -->
-    <Form label-width="80px" :model="formData" class="mt-2">
-      <FormItem label="每行数量" prop="column">
-        <RadioGroup v-model="formData.column">
+    <Form
+      :label-col="{ style: { width: '80px' } }"
+      :model="formData"
+      class="mt-2"
+    >
+      <FormItem label="每行数量" name="column">
+        <RadioGroup v-model:value="formData.column">
          <Radio :value="3">3个</Radio>
          <Radio :value="4">4个</Radio>
        </RadioGroup>
      </FormItem>
-
      <p class="text-base font-bold">菜单设置</p>
      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
        <Draggable
@@ -40,42 +46,43 @@ const formData = useVModel(props, 'modelValue', emit);
          :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
        >
          <template #default="{ element }">
-            <FormItem label="图标" prop="iconUrl">
+            <FormItem label="图标" name="iconUrl">
              <UploadImg
                v-model="element.iconUrl"
                height="80px"
                width="80px"
                :show-description="false"
              >
-                <template #tip> 建议尺寸：44 * 44 </template>
+                <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
+                <template #tip> 建议尺寸：44 * 44</template>
              </UploadImg>
            </FormItem>
-            <FormItem label="标题" prop="title">
-              <ColorInput
+            <FormItem label="标题" name="title">
+              <InputWithColor
                v-model="element.title"
                v-model:color="element.titleColor"
              />
            </FormItem>
-            <FormItem label="副标题" prop="subtitle">
-              <ColorInput
+            <FormItem label="副标题" name="subtitle">
+              <InputWithColor
                v-model="element.subtitle"
                v-model:color="element.subtitleColor"
              />
            </FormItem>
-            <FormItem label="链接" prop="url">
+            <FormItem label="链接" name="url">
              <AppLinkInput v-model="element.url" />
            </FormItem>
-            <FormItem label="显示角标" prop="badge.show">
-              <Switch v-model="element.badge.show" />
+            <FormItem label="显示角标" name="badge.show">
+              <Switch v-model:checked="element.badge.show" />
            </FormItem>
            <template v-if="element.badge.show">
-              <FormItem label="角标内容" prop="badge.text">
-                <ColorInput
+              <FormItem label="角标内容" name="badge.text">
+                <InputWithColor
                  v-model="element.badge.text"
                  v-model:color="element.badge.textColor"
                />
              </FormItem>
-              <FormItem label="背景颜色" prop="badge.bgColor">
+              <FormItem label="背景颜色" name="badge.bgColor">
                <ColorInput v-model="element.badge.bgColor" />
              </FormItem>
            </template>
--- 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
@@ -7,6 +7,7 @@ import { Image } from 'ant-design-vue';

 /** 列表导航 */
 defineOptions({ name: 'MenuList' });
+
 defineProps<{ property: MenuListProperty }>();
 </script>

@@ -18,7 +19,12 @@ defineProps<{ property: MenuListProperty }>();
      class="flex h-10 flex-row items-center justify-between gap-1 border-t border-gray-200 px-3 first:border-t-0"
    >
      <div class="flex flex-1 flex-row items-center gap-2">
-        <Image v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
+        <Image
+          v-if="item.iconUrl"
+          class="h-4 w-4"
+          :src="item.iconUrl"
+          :preview="false"
+        />
        <span class="text-base" :style="{ color: item.titleColor }">
          {{ item.title }}
        </span>
@@ -27,7 +33,7 @@ defineProps<{ property: MenuListProperty }>();
        <span class="text-xs" :style="{ color: item.subtitleColor }">
          {{ item.subtitle }}
        </span>
-        <IconifyIcon icon="lucide:arrow-right" class="size-4" />
+        <IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
      </div>
    </div>
  </div>
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
@@ -27,7 +27,12 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
  <ComponentContainerProperty v-model="formData.style">
    <p class="text-base font-bold">菜单设置</p>
-    <Form :model="formData" class="mt-2">
+    <p class="text-xs text-gray-500">拖动左侧的小圆点可以调整顺序</p>
+    <Form
+      :label-col="{ style: { width: '60px' } }"
+      :model="formData"
+      class="mt-2"
+    >
      <Draggable
        v-model="formData.list"
        :empty-item="EMPTY_MENU_LIST_ITEM_PROPERTY"
@@ -39,8 +44,10 @@ const formData = useVModel(props, 'modelValue', emit);
              height="80px"
              width="80px"
              :show-description="false"
-            />
-            <p class="text-sm text-gray-500">建议尺寸：44 * 44</p>
+            >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
+              <template #tip> 建议尺寸：44 * 44 </template>
+            </UploadImg>
          </FormItem>
          <FormItem label="标题" name="title">
            <InputWithColor
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
@@ -3,26 +3,23 @@ import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';

 import { ref, watch } from 'vue';

-import { Image } from 'ant-design-vue';
+import { Carousel, Image } from 'ant-design-vue';

 /** 菜单导航 */
 defineOptions({ name: 'MenuSwiper' });
-const props = defineProps<{ property: MenuSwiperProperty }>();
-// 标题的高度
-const TITLE_HEIGHT = 20;
-// 图标的高度
-const ICON_SIZE = 32;
-// 垂直间距：一行上下的间距
-const SPACE_Y = 16;

-// 分页
-const pages = ref<MenuSwiperItemProperty[][]>([]);
-// 轮播图高度
-const carouselHeight = ref(0);
-// 行高
-const rowHeight = ref(0);
-// 列宽
-const columnWidth = ref('');
+const props = defineProps<{ property: MenuSwiperProperty }>();
+
+const TITLE_HEIGHT = 20; // 标题的高度
+const ICON_SIZE = 32; // 图标的高度
+const SPACE_Y = 16; // 垂直间距：一行上下的间距
+
+const pages = ref<MenuSwiperItemProperty[][]>([]); // 分页
+const carouselHeight = ref(0); // 轮播图高度
+
+const rowHeight = ref(0); // 行高
+const columnWidth = ref(''); // 列宽
+
 watch(
  () => props.property,
  () => {
@@ -75,9 +72,7 @@ watch(
          class="relative flex flex-col items-center justify-center"
          :style="{ width: columnWidth, height: `${rowHeight}px` }"
        >
-          <!-- 图标 + 角标 -->
          <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`">
-            <!-- 右上角角标 -->
            <span
              v-if="item.badge?.show"
              class="absolute -right-2.5 -top-2.5 z-10 h-5 rounded-[10px] px-1.5 text-center text-xs leading-5"
@@ -95,7 +90,6 @@ watch(
              :preview="false"
            />
          </div>
-          <!-- 标题 -->
          <span
            v-if="property.layout === 'iconText'"
            class="text-xs"
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { default as ProductCategorySelect } from './select.vue';`
				`@@ -0,0 +1,2 @@`
				`export { default as CombinationShowcase } from './showcase.vue';`