diff --git a/.vscode/settings.json b/.vscode/settings.json
index dc371b9b0..a45451b07 100644
--- 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"],
diff --git a/README.md b/README.md
index 86995df85..f3da9a925 100644
--- 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 |
diff --git a/apps/web-antd/src/api/ai/chat/message/index.ts b/apps/web-antd/src/api/ai/chat/message/index.ts
index 9de927023..d2677ad55 100644
--- 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,
diff --git a/apps/web-antd/src/api/ai/image/index.ts b/apps/web-antd/src/api/ai/image/index.ts
index 6af33f1d0..c4c278ce6 100644
--- 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 });
diff --git a/apps/web-antd/src/api/ai/knowledge/document/index.ts b/apps/web-antd/src/api/ai/knowledge/document/index.ts
index a26e80e76..6c754d53e 100644
--- 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}`);
diff --git a/apps/web-antd/src/api/ai/knowledge/knowledge/index.ts b/apps/web-antd/src/api/ai/knowledge/knowledge/index.ts
index 7140d8b48..03f70bd9a 100644
--- 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);
diff --git a/apps/web-antd/src/api/ai/knowledge/segment/index.ts b/apps/web-antd/src/api/ai/knowledge/segment/index.ts
index 63ea4e752..e9baf662e 100644
--- 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}`);
diff --git a/apps/web-antd/src/api/ai/workflow/index.ts b/apps/web-antd/src/api/ai/workflow/index.ts
index a383d0cd0..676d6337c 100644
--- 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);
-};
+}
diff --git a/apps/web-antd/src/api/mall/promotion/kefu/conversation/index.ts b/apps/web-antd/src/api/mall/promotion/kefu/conversation/index.ts
index 6510dc0ec..497bd1a50 100644
--- 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',
   );
 }
diff --git a/apps/web-antd/src/api/mp/account/index.ts b/apps/web-antd/src/api/mp/account/index.ts
index c5ee331b0..5bd402230 100644
--- 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;
diff --git a/apps/web-antd/src/components/table-action/icons.ts b/apps/web-antd/src/components/table-action/icons.ts
index df5bf1a77..d474a6a25 100644
--- 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',
 };
diff --git a/apps/web-antd/src/locales/langs/en-US/page.json b/apps/web-antd/src/locales/langs/en-US/page.json
index 00a8c90b2..409137ee3 100644
--- 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!"
+    }
   }
 }
diff --git a/apps/web-antd/src/locales/langs/zh-CN/page.json b/apps/web-antd/src/locales/langs/zh-CN/page.json
index eefc4924b..f56160a6a 100644
--- 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!"
+    }
   }
 }
diff --git a/apps/web-antd/src/plugins/form-create/index.ts b/apps/web-antd/src/plugins/form-create/index.ts
index e13f1c1f7..db60c0f51 100644
--- 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);
diff --git a/apps/web-antd/src/store/mall/kefu.ts b/apps/web-antd/src/store/mall/kefu.ts
index 85f4023e7..6fe0b6c25 100644
--- 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();
     },
     /** 删除会话缓存 */
diff --git a/apps/web-antd/src/views/ai/chat/index/index.vue b/apps/web-antd/src/views/ai/chat/index/index.vue
index 9e6cc2559..5f09fbc6c 100644
--- 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"
diff --git a/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue b/apps/web-antd/src/views/ai/chat/index/modules/conversation/list.vue
similarity index 95%
rename from apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue
rename to apps/web-antd/src/views/ai/chat/index/modules/conversation/list.vue
index 91a8281de..2f1374cda 100644
--- a/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue
+++ b/apps/web-antd/src/views/ai/chat/index/modules/conversation/list.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"
                 >
diff --git a/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationUpdateForm.vue b/apps/web-antd/src/views/ai/chat/index/modules/conversation/update-form.vue
similarity index 98%
rename from apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationUpdateForm.vue
rename to apps/web-antd/src/views/ai/chat/index/modules/conversation/update-form.vue
index 399e88984..fda49d734 100644
--- a/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationUpdateForm.vue
+++ b/apps/web-antd/src/views/ai/chat/index/modules/conversation/update-form.vue
@@ -25,7 +25,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 140,
+    labelWidth: 110,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
diff --git 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
new file mode 100644
index 000000000..d0de7fdc4
--- /dev/null
+++ 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>
diff --git 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
new file mode 100644
index 000000000..ed163a026
--- /dev/null
+++ 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>
diff --git a/apps/web-antd/src/views/ai/chat/index/components/message/MessageKnowledge.vue b/apps/web-antd/src/views/ai/chat/index/modules/message/knowledge.vue
similarity index 100%
rename from apps/web-antd/src/views/ai/chat/index/components/message/MessageKnowledge.vue
rename to apps/web-antd/src/views/ai/chat/index/modules/message/knowledge.vue
diff --git a/apps/web-antd/src/views/ai/chat/index/components/message/MessageListEmpty.vue b/apps/web-antd/src/views/ai/chat/index/modules/message/list-empty.vue
similarity index 95%
rename from apps/web-antd/src/views/ai/chat/index/components/message/MessageListEmpty.vue
rename to apps/web-antd/src/views/ai/chat/index/modules/message/list-empty.vue
index 9ccb028e3..b8ac0a3e4 100644
--- a/apps/web-antd/src/views/ai/chat/index/components/message/MessageListEmpty.vue
+++ b/apps/web-antd/src/views/ai/chat/index/modules/message/list-empty.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);
 }
diff --git a/apps/web-antd/src/views/ai/chat/index/components/message/MessageList.vue b/apps/web-antd/src/views/ai/chat/index/modules/message/list.vue
similarity index 85%
rename from apps/web-antd/src/views/ai/chat/index/components/message/MessageList.vue
rename to apps/web-antd/src/views/ai/chat/index/modules/message/list.vue
index 5f29add0e..3c78b849e 100644
--- a/apps/web-antd/src/views/ai/chat/index/components/message/MessageList.vue
+++ b/apps/web-antd/src/views/ai/chat/index/modules/message/list.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 }}
diff --git a/apps/web-antd/src/views/ai/chat/index/components/message/MessageLoading.vue b/apps/web-antd/src/views/ai/chat/index/modules/message/loading.vue
similarity index 100%
rename from apps/web-antd/src/views/ai/chat/index/components/message/MessageLoading.vue
rename to apps/web-antd/src/views/ai/chat/index/modules/message/loading.vue
diff --git a/apps/web-antd/src/views/ai/chat/index/components/message/MessageNewConversation.vue b/apps/web-antd/src/views/ai/chat/index/modules/message/new-conversation.vue
similarity index 100%
rename from apps/web-antd/src/views/ai/chat/index/components/message/MessageNewConversation.vue
rename to apps/web-antd/src/views/ai/chat/index/modules/message/new-conversation.vue
diff --git 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
new file mode 100644
index 000000000..99390fbfc
--- /dev/null
+++ 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>
diff --git 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
new file mode 100644
index 000000000..d48a94c24
--- /dev/null
+++ 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>
diff --git a/apps/web-antd/src/views/ai/chat/index/components/role/RoleCategoryList.vue b/apps/web-antd/src/views/ai/chat/index/modules/role/category-list.vue
similarity index 91%
rename from apps/web-antd/src/views/ai/chat/index/components/role/RoleCategoryList.vue
rename to apps/web-antd/src/views/ai/chat/index/modules/role/category-list.vue
index 748fa13b4..87a59bf7b 100644
--- a/apps/web-antd/src/views/ai/chat/index/components/role/RoleCategoryList.vue
+++ b/apps/web-antd/src/views/ai/chat/index/modules/role/category-list.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) {
diff --git a/apps/web-antd/src/views/ai/chat/index/components/role/RoleList.vue b/apps/web-antd/src/views/ai/chat/index/modules/role/list.vue
similarity index 97%
rename from apps/web-antd/src/views/ai/chat/index/components/role/RoleList.vue
rename to apps/web-antd/src/views/ai/chat/index/modules/role/list.vue
index e6deabe31..c1e35998b 100644
--- a/apps/web-antd/src/views/ai/chat/index/components/role/RoleList.vue
+++ b/apps/web-antd/src/views/ai/chat/index/modules/role/list.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');
     }
   }
 }
diff --git a/apps/web-antd/src/views/ai/chat/index/components/role/RoleRepository.vue b/apps/web-antd/src/views/ai/chat/index/modules/role/repository.vue
similarity index 98%
rename from apps/web-antd/src/views/ai/chat/index/components/role/RoleRepository.vue
rename to apps/web-antd/src/views/ai/chat/index/modules/role/repository.vue
index ea78237c0..d3f1a5653 100644
--- a/apps/web-antd/src/views/ai/chat/index/components/role/RoleRepository.vue
+++ b/apps/web-antd/src/views/ai/chat/index/modules/role/repository.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>(''); // 加载中
diff --git a/apps/web-antd/src/views/ai/image/index/index.vue b/apps/web-antd/src/views/ai/image/index/index.vue
index 00c313b1d..c96dcfe5e 100644
--- 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  */
diff --git a/apps/web-antd/src/views/ai/image/index/components/ImageCard.vue b/apps/web-antd/src/views/ai/image/index/modules/card.vue
similarity index 97%
rename from apps/web-antd/src/views/ai/image/index/components/ImageCard.vue
rename to apps/web-antd/src/views/ai/image/index/modules/card.vue
index 6e738d9a2..57b12e655 100644
--- a/apps/web-antd/src/views/ai/image/index/components/ImageCard.vue
+++ b/apps/web-antd/src/views/ai/image/index/modules/card.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"
diff --git a/apps/web-antd/src/views/ai/image/index/components/common/index.vue b/apps/web-antd/src/views/ai/image/index/modules/common/index.vue
similarity index 97%
rename from apps/web-antd/src/views/ai/image/index/components/common/index.vue
rename to apps/web-antd/src/views/ai/image/index/modules/common/index.vue
index 81775b457..6cf53c82b 100644
--- a/apps/web-antd/src/views/ai/image/index/components/common/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/modules/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>
diff --git a/apps/web-antd/src/views/ai/image/index/components/dall3/index.vue b/apps/web-antd/src/views/ai/image/index/modules/dall3/index.vue
similarity index 98%
rename from apps/web-antd/src/views/ai/image/index/components/dall3/index.vue
rename to apps/web-antd/src/views/ai/image/index/modules/dall3/index.vue
index 6733b957d..bcd2f9f66 100644
--- a/apps/web-antd/src/views/ai/image/index/components/dall3/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/modules/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>
diff --git a/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue b/apps/web-antd/src/views/ai/image/index/modules/detail.vue
similarity index 92%
rename from apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
rename to apps/web-antd/src/views/ai/image/index/modules/detail.vue
index fa5918d32..30a8c4f7d 100644
--- a/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
+++ b/apps/web-antd/src/views/ai/image/index/modules/detail.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>
 
diff --git a/apps/web-antd/src/views/ai/image/index/components/ImageList.vue b/apps/web-antd/src/views/ai/image/index/modules/list.vue
similarity index 94%
rename from apps/web-antd/src/views/ai/image/index/components/ImageList.vue
rename to apps/web-antd/src/views/ai/image/index/modules/list.vue
index 706a6ff9b..41244ec5d 100644
--- a/apps/web-antd/src/views/ai/image/index/components/ImageList.vue
+++ b/apps/web-antd/src/views/ai/image/index/modules/list.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>
 
diff --git a/apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue b/apps/web-antd/src/views/ai/image/index/modules/midjourney/index.vue
similarity index 98%
rename from apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue
rename to apps/web-antd/src/views/ai/image/index/modules/midjourney/index.vue
index bd753d6cd..d4f9e0cf3 100644
--- a/apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/modules/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>
diff --git a/apps/web-antd/src/views/ai/image/index/components/stableDiffusion/index.vue b/apps/web-antd/src/views/ai/image/index/modules/stable-diffusion/index.vue
similarity index 97%
rename from apps/web-antd/src/views/ai/image/index/components/stableDiffusion/index.vue
rename to apps/web-antd/src/views/ai/image/index/modules/stable-diffusion/index.vue
index 03c826016..fc166cc9e 100644
--- a/apps/web-antd/src/views/ai/image/index/components/stableDiffusion/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/modules/stable-diffusion/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">
diff --git a/apps/web-antd/src/views/ai/image/manager/index.vue b/apps/web-antd/src/views/ai/image/manager/index.vue
index ad1ab7b02..62087c743 100644
--- 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 {
diff --git a/apps/web-antd/src/views/ai/image/square/index.vue b/apps/web-antd/src/views/ai/image/square/index.vue
index f813e7445..04e49b8a8 100644
--- 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;
diff --git a/apps/web-antd/src/views/ai/knowledge/document/data.ts b/apps/web-antd/src/views/ai/knowledge/document/data.ts
index a6433040a..46f251a18 100644
--- 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' },
     },
diff --git a/apps/web-antd/src/views/ai/knowledge/document/form/index.vue b/apps/web-antd/src/views/ai/knowledge/document/form/index.vue
index 4e0bf6de2..83f53806b 100644
--- 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">
diff --git a/apps/web-antd/src/views/ai/knowledge/document/form/ProcessStep.vue b/apps/web-antd/src/views/ai/knowledge/document/form/modules/process-step.vue
similarity index 100%
rename from apps/web-antd/src/views/ai/knowledge/document/form/ProcessStep.vue
rename to apps/web-antd/src/views/ai/knowledge/document/form/modules/process-step.vue
diff --git a/apps/web-antd/src/views/ai/knowledge/document/form/SplitStep.vue b/apps/web-antd/src/views/ai/knowledge/document/form/modules/split-step.vue
similarity index 99%
rename from apps/web-antd/src/views/ai/knowledge/document/form/SplitStep.vue
rename to apps/web-antd/src/views/ai/knowledge/document/form/modules/split-step.vue
index ae18c5699..340f27da1 100644
--- a/apps/web-antd/src/views/ai/knowledge/document/form/SplitStep.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>
diff --git a/apps/web-antd/src/views/ai/knowledge/document/form/UploadStep.vue b/apps/web-antd/src/views/ai/knowledge/document/form/modules/upload-step.vue
similarity index 94%
rename from apps/web-antd/src/views/ai/knowledge/document/form/UploadStep.vue
rename to apps/web-antd/src/views/ai/knowledge/document/form/modules/upload-step.vue
index b7e317370..8ee05655c 100644
--- a/apps/web-antd/src/views/ai/knowledge/document/form/UploadStep.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
diff --git a/apps/web-antd/src/views/ai/knowledge/document/index.vue b/apps/web-antd/src/views/ai/knowledge/document/index.vue
index 16062f1ee..e1dd551fa 100644
--- 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]),
diff --git a/apps/web-antd/src/views/ai/knowledge/knowledge/data.ts b/apps/web-antd/src/views/ai/knowledge/knowledge/data.ts
index 9bdbf5b25..fcfa96da2 100644
--- 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' },
     },
diff --git a/apps/web-antd/src/views/ai/knowledge/knowledge/index.vue b/apps/web-antd/src/views/ai/knowledge/knowledge/index.vue
index 04d6cb950..6f9d1fdf9 100644
--- 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]),
diff --git a/apps/web-antd/src/views/ai/knowledge/knowledge/modules/form.vue b/apps/web-antd/src/views/ai/knowledge/knowledge/modules/form.vue
index 2ad52ed83..73211ebd3 100644
--- 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>
diff --git a/apps/web-antd/src/views/ai/knowledge/knowledge/retrieval/index.vue b/apps/web-antd/src/views/ai/knowledge/knowledge/retrieval/index.vue
index a9c9d2aef..f7b4e4fab 100644
--- 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>
diff --git a/apps/web-antd/src/views/ai/knowledge/segment/data.ts b/apps/web-antd/src/views/ai/knowledge/segment/data.ts
index 0f4a8cdbe..109adda2c 100644
--- 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',
     },
     {
diff --git a/apps/web-antd/src/views/ai/knowledge/segment/index.vue b/apps/web-antd/src/views/ai/knowledge/segment/index.vue
index e5797dce8..363e6b1ad 100644
--- 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"
diff --git a/apps/web-antd/src/views/ai/knowledge/segment/modules/form.vue b/apps/web-antd/src/views/ai/knowledge/segment/modules/form.vue
index 01a12b54b..9b656fa0c 100644
--- 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();
diff --git a/apps/web-antd/src/views/ai/mindmap/manager/index.vue b/apps/web-antd/src/views/ai/mindmap/manager/index.vue
index b952e87eb..5cfc0d1c4 100644
--- 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 {
diff --git 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
index 3a2b7df9a..1fed73a75 100644
--- 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');
 }
diff --git a/apps/web-antd/src/views/ai/music/index/list/index.vue b/apps/web-antd/src/views/ai/music/index/list/index.vue
index b67b3898f..1975973db 100644
--- 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;
 }
diff --git a/apps/web-antd/src/views/ai/music/index/mode/index.vue b/apps/web-antd/src/views/ai/music/index/mode/index.vue
index a76fce27e..35df306da 100644
--- 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 });
 }
diff --git a/apps/web-antd/src/views/ai/music/manager/index.vue b/apps/web-antd/src/views/ai/music/manager/index.vue
index 586ab19e1..bfd4d4502 100644
--- 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 {
diff --git a/apps/web-antd/src/views/ai/workflow/data.ts b/apps/web-antd/src/views/ai/workflow/data.ts
index 625ec0a23..5decf9f3f 100644
--- 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 },
diff --git a/apps/web-antd/src/views/ai/workflow/form/index.vue b/apps/web-antd/src/views/ai/workflow/form/index.vue
index 91f3a7778..87473798d 100644
--- 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);
diff --git 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
index 90ac727b7..a691defaa 100644
--- 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' }],
diff --git 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
index becc5505f..2875dbf9a 100644
--- 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('请设计流程');
   }
diff --git a/apps/web-antd/src/views/ai/workflow/index.vue b/apps/web-antd/src/views/ai/workflow/index.vue
index a1f6eff11..60e1281bb 100644
--- 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>
 
diff --git a/apps/web-antd/src/views/mall/product/category/components/index.ts b/apps/web-antd/src/views/mall/product/category/components/index.ts
new file mode 100644
index 000000000..c3196cb27
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/category/components/index.ts
@@ -0,0 +1 @@
+export { default as ProductCategorySelect } from './select.vue';
diff --git a/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue b/apps/web-antd/src/views/mall/product/category/components/select.vue
similarity index 93%
rename from apps/web-antd/src/views/mall/product/category/components/product-category-select.vue
rename to apps/web-antd/src/views/mall/product/category/components/select.vue
index a55a66a43..5ef706228 100644
--- a/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue
+++ b/apps/web-antd/src/views/mall/product/category/components/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
diff --git a/apps/web-antd/src/views/mall/promotion/combination/components/index.ts b/apps/web-antd/src/views/mall/promotion/combination/components/index.ts
new file mode 100644
index 000000000..91676dbc0
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/combination/components/index.ts
@@ -0,0 +1,2 @@
+export { default as CombinationShowcase } from './showcase.vue';
+
diff --git a/apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue b/apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue
new file mode 100644
index 000000000..27b972ef5
--- /dev/null
+++ 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>
+
diff --git 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
new file mode 100644
index 000000000..f36a2b588
--- /dev/null
+++ 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>
diff --git 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
index 3391a41cf..b4125104b 100644
--- 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>
diff --git 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/select-dialog.vue
similarity index 87%
rename from apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
rename to apps/web-antd/src/views/mall/promotion/components/app-link-input/select-dialog.vue
index 949087212..27405557b 100644
--- 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/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>
diff --git 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
index 38c475f75..37cc1ac46 100644
--- 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>
diff --git 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
index 6f05d921a..26fac3f7c 100644
--- 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"
diff --git 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
index add6ecc4a..2be2df270 100644
--- 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>
diff --git 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
deleted file mode 100644
index 9b4dd5c16..000000000
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
+++ /dev/null
@@ -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>
diff --git 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
similarity index 100%
rename from apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/config.ts
diff --git 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
new file mode 100644
index 000000000..6b89b4c41
--- /dev/null
+++ 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>
diff --git 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
similarity index 71%
rename from apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
index 9cace5f26..bebf71f72 100644
--- 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>
diff --git 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
index d4dbfee44..b09a30966 100644
--- 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>
+    );
+  },
+});
diff --git 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
deleted file mode 100644
index 89f360564..000000000
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
+++ /dev/null
@@ -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>
-    );
-  },
-});
diff --git 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
deleted file mode 100644
index 15a95887c..000000000
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
+++ /dev/null
@@ -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>
-    );
-  },
-});
diff --git 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
deleted file mode 100644
index 7b2e373b2..000000000
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
+++ /dev/null
@@ -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>;
-  },
-});
diff --git 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
index 25b37ec8c..2cb2f1348 100644
--- 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"
diff --git 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
index 40b2513d3..3d0412309 100644
--- 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>
diff --git 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
similarity index 100%
rename from apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/divider/config.ts
diff --git 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
similarity index 100%
rename from apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/divider/index.vue
diff --git 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
similarity index 100%
rename from apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/divider/property.vue
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
index c22f62839..7451e8d87 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
@@ -5,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>
diff --git 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
index 2bac4c39e..b4000eccc 100644
--- 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
 
 /**
diff --git 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
index 27d20bada..2f7136ffd 100644
--- 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>
diff --git 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
index bd7af2d9a..0d289f17f 100644
--- 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>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
index ca8927c19..cb669fe17 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -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>
diff --git 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
index b61ca641e..dcdbd45e9 100644
--- 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"
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
index f62d06fac..179b0134c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
@@ -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>
diff --git 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
index c5d9ead5b..bd91a7f31 100644
--- 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`,
diff --git 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
index 2fc781939..a6df2228d 100644
--- 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>
diff --git 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
index a572b74ae..38336f5a9 100644
--- 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>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
index de92c23c8..eac0f2ce9 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
@@ -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>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
index e7f67ee25..e0e3c8496 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
@@ -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>
diff --git 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
index 33bc46ac7..cc771fb2b 100644
--- 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
diff --git 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
index 0dcd9d468..4f382957d 100644
--- 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"
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
index caaa091e9..5f1e581de 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
@@ -69,6 +69,7 @@ const formData = useVModel(props, 'modelValue', emit);
                 width="80px"
                 :show-description="false"
               >
+                <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
                 <template #tip> 建议尺寸：98 * 98 </template>
               </UploadImg>
             </FormItem>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
index 410d555c4..966bb0156 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
@@ -1,18 +1,20 @@
 <script lang="ts" setup>
 import type { NavigationBarCellProperty } from '../config';
 
-import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/util';
-
 import { computed, ref } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+
 import { useVModel } from '@vueuse/core';
 import {
   FormItem,
-  Image,
   Input,
   Radio,
+  RadioButton,
   RadioGroup,
   Slider,
+  Switch,
+  Tooltip,
 } from 'ant-design-vue';
 
 import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
@@ -23,7 +25,7 @@ import {
   MagicCubeEditor,
 } from '#/views/mall/promotion/components';
 
-// 导航栏属性面板
+/** 导航栏单元格属性面板 */
 defineOptions({ name: 'NavigationBarCellProperty' });
 
 const props = defineProps({
@@ -36,54 +38,64 @@ const props = defineProps({
     default: () => [],
   },
 });
+
 const emit = defineEmits(['update:modelValue']);
+
 const cellList = useVModel(props, 'modelValue', emit);
 
-// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
+/**
+ * 计算单元格数量
+ * 1. 小程序：6 个（因为右侧有胶囊按钮占据 2 个格子的空间）
+ * 2. 其它平台：8 个（全部空间可用）
+ */
 const cellCount = computed(() => (props.isMp ? 6 : 8));
 
-// 转换为Rect格式的数据
-const rectList = computed<Rect[]>(() => {
-  return cellList.value.map((cell) => ({
-    left: cell.left,
-    top: cell.top,
-    width: cell.width,
-    height: cell.height,
-    right: cell.left + cell.width,
-    bottom: cell.top + cell.height,
-  }));
-});
+const selectedHotAreaIndex = ref(0); // 选中的热区
 
-// 选中的热区
-const selectedHotAreaIndex = ref(0);
-const handleHotAreaSelected = (
+/** 处理热区被选中事件 */
+function handleHotAreaSelected(
   cellValue: NavigationBarCellProperty,
   index: number,
-) => {
+) {
   selectedHotAreaIndex.value = index;
+  // 默认设置为选中文字，并设置属性
   if (!cellValue.type) {
     cellValue.type = 'text';
     cellValue.textColor = '#111111';
   }
-};
+  // 如果点击的是搜索框，则初始化搜索框的属性
+  if (cellValue.type === 'search') {
+    cellValue.placeholderPosition = 'left';
+    cellValue.backgroundColor = '#EEEEEE';
+    cellValue.textColor = '#969799';
+  }
+}
 </script>
 
 <template>
   <div class="h-40px flex items-center justify-center">
     <MagicCubeEditor
-      v-model="rectList"
+      v-model="cellList as any"
       :cols="cellCount"
       :cube-size="38"
       :rows="1"
       class="m-b-16px"
       @hot-area-selected="handleHotAreaSelected"
     />
-    <Image v-if="isMp" alt="" class="w-19 h-8" :src="appNavBarMp" />
+    <img
+      v-if="isMp"
+      alt=""
+      style="width: 76px; height: 30px"
+      :src="appNavBarMp"
+    />
   </div>
   <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
     <template v-if="selectedHotAreaIndex === Number(cellIndex)">
-      <FormItem label="类型">
-        <RadioGroup v-model:value="cell.type">
+      <FormItem :name="`cell[${cellIndex}].type`" label="类型">
+        <RadioGroup
+          v-model:value="cell.type"
+          @change="handleHotAreaSelected(cell, cellIndex)"
+        >
           <Radio value="text">文字</Radio>
           <Radio value="image">图片</Radio>
           <Radio value="search">搜索框</Radio>
@@ -91,37 +103,61 @@ const handleHotAreaSelected = (
       </FormItem>
       <!-- 1. 文字 -->
       <template v-if="cell.type === 'text'">
-        <FormItem label="内容">
+        <FormItem :name="`cell[${cellIndex}].text`" label="内容">
           <Input v-model:value="cell!.text" :maxlength="10" show-count />
         </FormItem>
-        <FormItem label="颜色">
+        <FormItem :name="`cell[${cellIndex}].text`" label="颜色">
           <ColorInput v-model="cell!.textColor" />
         </FormItem>
-        <FormItem label="链接">
+        <FormItem :name="`cell[${cellIndex}].url`" label="链接">
           <AppLinkInput v-model="cell.url" />
         </FormItem>
       </template>
       <!-- 2. 图片 -->
       <template v-else-if="cell.type === 'image'">
-        <FormItem label="图片">
+        <FormItem :name="`cell[${cellIndex}].imgUrl`" label="图片">
           <UploadImg
             v-model="cell.imgUrl"
             :limit="1"
+            height="56px"
+            width="56px"
             :show-description="false"
-            class="size-14"
           />
           <span class="text-xs text-gray-500">建议尺寸 56*56</span>
         </FormItem>
-        <FormItem label="链接">
+        <FormItem :name="`cell[${cellIndex}].url`" label="链接">
           <AppLinkInput v-model="cell.url" />
         </FormItem>
       </template>
       <!-- 3. 搜索框 -->
       <template v-else>
-        <FormItem label="提示文字">
+        <FormItem label="框体颜色" name="backgroundColor">
+          <ColorInput v-model="cell.backgroundColor" />
+        </FormItem>
+        <FormItem class="lef" label="文本颜色" name="textColor">
+          <ColorInput v-model="cell.textColor" />
+        </FormItem>
+        <FormItem :name="`cell[${cellIndex}].placeholder`" label="提示文字">
           <Input v-model:value="cell.placeholder" :maxlength="10" show-count />
         </FormItem>
-        <FormItem label="圆角">
+        <FormItem label="文本位置" name="placeholderPosition">
+          <RadioGroup v-model:value="cell!.placeholderPosition">
+            <Tooltip title="居左" placement="top">
+              <RadioButton value="left">
+                <IconifyIcon icon="ant-design:align-left-outlined" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="居中" placement="top">
+              <RadioButton value="center">
+                <IconifyIcon icon="ant-design:align-center-outlined" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="扫一扫" name="showScan">
+          <Switch v-model:checked="cell!.showScan" />
+        </FormItem>
+        <FormItem :name="`cell[${cellIndex}].borderRadius`" label="圆角">
           <Slider v-model:value="cell.borderRadius" :max="100" :min="0" />
         </FormItem>
       </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
index 2fca3af61..923e65d5e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
@@ -18,7 +18,7 @@ defineOptions({ name: 'NavigationBar' });
 
 const props = defineProps<{ property: NavigationBarProperty }>();
 
-// 背景
+/** 计算背景样式 */
 const bgStyle = computed(() => {
   const background =
     props.property.bgType === 'img' && props.property.bgImg
@@ -26,27 +26,31 @@ const bgStyle = computed(() => {
       : props.property.bgColor;
   return { background };
 });
-// 单元格列表
+
+/** 获取当前预览的单元格列表 */
 const cellList = computed(() =>
   props.property._local?.previewMp
     ? props.property.mpCells
     : props.property.otherCells,
 );
-// 单元格宽度
+
+/** 计算单元格宽度 */
 const cellWidth = computed(() => {
   return props.property._local?.previewMp
-    ? (384 - 80 - 86) / 6
-    : (384 - 90) / 8;
+    ? (375 - 80 - 86) / 6
+    : (375 - 90) / 8;
 });
-// 获得单元格样式
-const getCellStyle = (cell: NavigationBarCellProperty) => {
+
+/** 获取单元格样式 */
+function getCellStyle(cell: NavigationBarCellProperty) {
   return {
     width: `${cell.width * cellWidth.value + (cell.width - 1) * 10}px`,
     left: `${cell.left * cellWidth.value + (cell.left + 1) * 10}px`,
     position: 'absolute',
   } as StyleValue;
-};
-// 获得搜索框属性
+}
+
+/** 获取搜索框属性配置 */
 const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
   return {
     height: 30,
@@ -57,7 +61,10 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
 });
 </script>
 <template>
-  <div class="navigation-bar" :style="bgStyle">
+  <div
+    class="flex h-[50px] items-center justify-between bg-white px-[6px]"
+    :style="bgStyle"
+  >
     <div class="flex h-full w-full items-center">
       <div
         v-for="(cell, cellIndex) in cellList"
@@ -78,35 +85,7 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
       v-if="property._local?.previewMp"
       :src="appNavbarMp"
       alt=""
-      class="w-22 h-8"
+      style="width: 86px; height: 30px"
     />
   </div>
 </template>
-<style lang="scss" scoped>
-.navigation-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 50px;
-  padding: 0 6px;
-  background: #fff;
-
-  /* 左边 */
-  .left {
-    margin-left: 8px;
-  }
-
-  .center {
-    flex: 1;
-    font-size: 14px;
-    line-height: 35px;
-    color: #333;
-    text-align: center;
-  }
-
-  /* 右边 */
-  .right {
-    margin-right: 8px;
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
index 860ba178b..3603c46a0 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
@@ -17,16 +17,16 @@ import { ColorInput } from '#/views/mall/promotion/components';
 
 import NavigationBarCellProperty from './components/cell-property.vue';
 
-// 导航栏属性面板
+/** 导航栏属性面板 */
 defineOptions({ name: 'NavigationBarProperty' });
+
 const props = defineProps<{ modelValue: NavigationBarProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-// 表单校验
 const rules: Record<string, any> = {
   name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
-};
+}; // 表单校验
 
 const formData = useVModel(props, 'modelValue', emit);
 if (!formData.value._local) {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
index a8fd24c02..bc5605562 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
@@ -1,23 +1,14 @@
 <script setup lang="ts">
 import type { NoticeBarProperty } from './config';
 
-import { ref } from 'vue';
-
 import { IconifyIcon } from '@vben/icons';
 
-import { Divider, Image } from 'ant-design-vue';
+import { Carousel, Divider, Image } from 'ant-design-vue';
 
 /** 公告栏 */
 defineOptions({ name: 'NoticeBar' });
 
-const props = defineProps<{ property: NoticeBarProperty }>();
-
-// 自动轮播
-const activeIndex = ref(0);
-setInterval(() => {
-  const contents = props.property.contents || [];
-  activeIndex.value = (activeIndex.value + 1) % (contents.length || 1);
-}, 3000);
+defineProps<{ property: NoticeBarProperty }>();
 </script>
 
 <template>
@@ -30,11 +21,17 @@ setInterval(() => {
   >
     <Image :src="property.iconUrl" class="h-[18px]" :preview="false" />
     <Divider type="vertical" />
-    <div class="h-6 flex-1 truncate pr-2 leading-6">
-      {{ property.contents?.[activeIndex]?.text }}
-    </div>
+    <Carousel
+      :autoplay="true"
+      :dots="false"
+      vertical
+      class="flex-1 pr-2"
+      style="height: 24px"
+    >
+      <div v-for="(item, index) in property.contents" :key="index">
+        <div class="h-6 truncate leading-6">{{ item.text }}</div>
+      </div>
+    </Carousel>
     <IconifyIcon icon="lucide:arrow-right" />
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
index fef33c016..f32b63410 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
@@ -35,6 +35,7 @@ const rules = {
           height="48px"
           :show-description="false"
         >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
           <template #tip>建议尺寸：24 * 24</template>
         </UploadImg>
       </FormItem>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
index 135d303d2..5c06402ef 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
@@ -7,25 +7,18 @@ import { Form, FormItem, Textarea } from 'ant-design-vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
 
-// 导航栏属性面板
+/** 导航栏属性面板 */
 defineOptions({ name: 'PageConfigProperty' });
+
 const props = defineProps<{ modelValue: PageConfigProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-// 表单校验
-const rules = {};
-
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
-  <Form
-    :model="formData"
-    :rules="rules"
-    :label-col="{ span: 6 }"
-    :wrapper-col="{ span: 18 }"
-  >
+  <Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
     <FormItem label="页面描述" name="description">
       <Textarea
         v-model:value="formData!.description"
@@ -42,10 +35,9 @@ const formData = useVModel(props, 'modelValue', emit);
         :limit="1"
         :show-description="false"
       >
+        <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
         <template #tip>建议宽度 750px</template>
       </UploadImg>
     </FormItem>
   </Form>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/popover/config.ts
similarity index 100%
rename from apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/popover/config.ts
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue
similarity index 73%
rename from apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue
index 709b62a6c..4d8cd9e40 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue
@@ -9,18 +9,19 @@ import { Image } from 'ant-design-vue';
 
 /** 弹窗广告 */
 defineOptions({ name: 'Popover' });
-// 定义属性
-defineProps<{ property: PopoverProperty }>();
 
-// 处理选中
-const activeIndex = ref(0);
-const handleActive = (index: number) => {
+const props = defineProps<{ property: PopoverProperty }>();
+
+const activeIndex = ref(0); // 选中 index
+
+/** 处理选中 */
+function handleActive(index: number) {
   activeIndex.value = index;
-};
+}
 </script>
 <template>
   <div
-    v-for="(item, index) in property.list"
+    v-for="(item, index) in props.property.list"
     :key="index"
     class="absolute bottom-1/2 right-1/2 h-[454px] w-[292px] rounded border border-gray-300 bg-white p-0.5"
     :style="{
@@ -30,7 +31,11 @@ const handleActive = (index: number) => {
     }"
     @click="handleActive(index)"
   >
-    <Image :src="item.imgUrl" fit="contain" class="h-full w-full">
+    <Image
+      :src="item.imgUrl"
+      :preview="false"
+      class="h-full w-full object-contain"
+    >
       <template #error>
         <div class="flex h-full w-full items-center justify-center">
           <IconifyIcon icon="lucide:image" />
@@ -40,5 +45,3 @@ const handleActive = (index: number) => {
     <div class="absolute right-1 top-1 text-xs">{{ index + 1 }}</div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/popover/property.vue
similarity index 95%
rename from apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
rename to apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/popover/property.vue
index bd40e4330..1f29e08df 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/popover/property.vue
@@ -18,7 +18,7 @@ const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
-  <Form :model="formData">
+  <Form :label-col="{ style: { width: '80px' } }" :model="formData">
     <Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
       <template #default="{ element, index }">
         <FormItem label="图片" :name="`list[${index}].imgUrl`">
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
index 950e8776f..0eb3b26bb 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
@@ -13,10 +13,11 @@ import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品卡片 */
 defineOptions({ name: 'ProductCard' });
-// 定义属性
+
 const props = defineProps<{ property: ProductCardProperty }>();
-// 商品列表
-const spuList = ref<MallSpuApi.Spu[]>([]);
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
+
 watch(
   () => props.property.spuIds,
   async () => {
@@ -28,28 +29,21 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
+/** 计算商品的间距 */
 function calculateSpace(index: number) {
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
   return { marginLeft, marginTop };
 }
 
-// 容器
-const containerRef = ref();
-// 计算商品的宽度
+const containerRef = ref(); // 容器
+
+/** 计算商品的宽度 */
 function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
@@ -61,7 +55,7 @@ function calculateWidth() {
     ref="containerRef"
   >
     <div
-      class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
+      class="relative box-content flex flex-row flex-wrap overflow-hidden"
       :style="{
         ...calculateSpace(index),
         ...calculateWidth(),
@@ -78,7 +72,11 @@ function calculateWidth() {
         v-if="property.badge.show && property.badge.imgUrl"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
+        <Image
+          :src="property.badge.imgUrl"
+          :preview="false"
+          class="h-6 w-8 object-cover"
+        />
       </div>
       <!-- 商品封面图 -->
       <div
@@ -90,7 +88,11 @@ function calculateWidth() {
           },
         ]"
       >
-        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+        <Image
+          class="h-full w-full object-cover"
+          :src="spu.picUrl"
+          :preview="false"
+        />
       </div>
       <div
         class="box-border flex flex-col gap-2 p-2"
@@ -174,9 +176,9 @@ function calculateWidth() {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="size-7 rounded-full"
-          fit="cover"
+          class="size-7 rounded-full object-cover"
           :src="property.btnBuy.imgUrl"
+          :preview="false"
         />
       </div>
     </div>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
index 701b9f694..e15f975fe 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
@@ -116,6 +116,7 @@ const formData = useVModel(props, 'modelValue', emit);
             width="72px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </FormItem>
@@ -146,6 +147,7 @@ const formData = useVModel(props, 'modelValue', emit);
               width="56px"
               :show-description="false"
             >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
               <template #tip> 建议尺寸：56 * 56 </template>
             </UploadImg>
           </FormItem>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
index 446b78b61..39a3887f0 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
@@ -13,10 +13,11 @@ import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品栏 */
 defineOptions({ name: 'ProductList' });
-// 定义属性
+
 const props = defineProps<{ property: ProductListProperty }>();
-// 商品列表
+
 const spuList = ref<MallSpuApi.Spu[]>([]);
+
 watch(
   () => props.property.spuIds,
   async () => {
@@ -27,19 +28,15 @@ watch(
     deep: true,
   },
 );
-// 手机宽度
-const phoneWidth = ref(384);
-// 容器
-const containerRef = ref();
-// 商品的列数
-const columns = ref(2);
-// 滚动条宽度
-const scrollbarWidth = ref('100%');
-// 商品图大小
-const imageSize = ref('0');
-// 商品网络列数
-const gridTemplateColumns = ref('');
-// 计算布局参数
+
+const phoneWidth = ref(375); // 手机宽度
+const containerRef = ref(); // 容器
+const columns = ref(2); // 商品的列数
+const scrollbarWidth = ref('100%'); // 滚动条宽度
+const imageSize = ref('0'); // 商品图大小
+const gridTemplateColumns = ref(''); // 商品网络列数
+
+/** 计算布局参数 */
 watch(
   () => [props.property, phoneWidth, spuList.value.length],
   () => {
@@ -69,13 +66,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-[30px]" wrap-class="w-full" ref="containerRef">
+  <div class="z-10 min-h-[30px] w-full" ref="containerRef">
     <!-- 商品网格 -->
     <div
       class="grid overflow-x-auto"
@@ -103,16 +101,16 @@ onMounted(() => {
           class="absolute left-0 top-0 z-10 items-center justify-center"
         >
           <Image
-            fit="cover"
             :src="property.badge.imgUrl"
-            class="h-[26px] w-[38px]"
+            :preview="false"
+            class="h-[26px] w-[38px] object-cover"
           />
         </div>
         <!-- 商品封面图 -->
         <Image
-          fit="cover"
           :src="spu.picUrl"
-          :style="{ width: imageSize, height: imageSize }"
+          :style="{ width: imageSize, height: imageSize, objectFit: 'cover' }"
+          :preview="false"
         />
         <div
           class="box-border flex flex-col gap-2 p-2"
@@ -146,5 +144,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
index 6b069e07c..ed3985b97 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
@@ -17,17 +17,18 @@ import {
 } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
-import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
-// TODO: 添加组件
-// import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 
-// 商品栏属性面板
+/** 商品栏属性面板 */
 defineOptions({ name: 'ProductListProperty' });
 
 const props = defineProps<{ modelValue: ProductListProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -39,10 +40,10 @@ const formData = useVModel(props, 'modelValue', emit);
       :model="formData"
     >
       <Card title="商品列表" class="property-group" :bordered="false">
-        <!-- <SpuShowcase v-model="formData.spuIds" /> -->
+        <SpuShowcase v-model="formData.spuIds" />
       </Card>
       <Card title="商品样式" class="property-group" :bordered="false">
-        <FormItem label="布局" prop="type">
+        <FormItem label="布局" name="type">
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="双列" placement="bottom">
               <RadioButton value="twoCol">
@@ -67,13 +68,13 @@ const formData = useVModel(props, 'modelValue', emit);
             </Tooltip>
           </RadioGroup>
         </FormItem>
-        <FormItem label="商品名称" prop="fields.name.show">
+        <FormItem label="商品名称" name="fields.name.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
             <Checkbox v-model:checked="formData.fields.name.show" />
           </div>
         </FormItem>
-        <FormItem label="商品价格" prop="fields.price.show">
+        <FormItem label="商品价格" name="fields.price.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
             <Checkbox v-model:checked="formData.fields.price.show" />
@@ -81,41 +82,40 @@ const formData = useVModel(props, 'modelValue', emit);
         </FormItem>
       </Card>
       <Card title="角标" class="property-group" :bordered="false">
-        <FormItem label="角标" prop="badge.show">
+        <FormItem label="角标" name="badge.show">
           <Switch v-model:checked="formData.badge.show" />
         </FormItem>
-        <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+        <FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg
             v-model="formData.badge.imgUrl"
             height="44px"
             width="72px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </FormItem>
       </Card>
       <Card title="商品样式" class="property-group" :bordered="false">
-        <FormItem label="上圆角" prop="borderRadiusTop">
+        <FormItem label="上圆角" name="borderRadiusTop">
           <Slider
             v-model:value="formData.borderRadiusTop"
             :max="100"
             :min="0"
           />
         </FormItem>
-        <FormItem label="下圆角" prop="borderRadiusBottom">
+        <FormItem label="下圆角" name="borderRadiusBottom">
           <Slider
             v-model:value="formData.borderRadiusBottom"
             :max="100"
             :min="0"
           />
         </FormItem>
-        <FormItem label="间隔" prop="space">
+        <FormItem label="间隔" name="space">
           <Slider v-model:value="formData.space" :max="100" :min="0" />
         </FormItem>
       </Card>
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
index 1d94558eb..cb90e63f2 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
@@ -9,10 +9,10 @@ import { getArticle } from '#/api/mall/promotion/article';
 
 /** 营销文章 */
 defineOptions({ name: 'PromotionArticle' });
-// 定义属性
-const props = defineProps<{ property: PromotionArticleProperty }>();
-// 商品列表
-const article = ref<MallArticleApi.Article>();
+
+const props = defineProps<{ property: PromotionArticleProperty }>(); // 定义属性
+
+const article = ref<MallArticleApi.Article>(); // 商品列表
 
 watch(
   () => props.property.id,
@@ -27,5 +27,5 @@ watch(
 );
 </script>
 <template>
-  <div class="min-h-8" v-dompurify-html="article?.content"></div>
+  <div class="min-h-[30px]" v-dompurify-html="article?.content"></div>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
index 6a24d9b02..2024181b9 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -12,18 +12,18 @@ import { getArticlePage } from '#/api/mall/promotion/article';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 营销文章属性面板
+/** 营销文章属性面板 */
 defineOptions({ name: 'PromotionArticleProperty' });
 
 const props = defineProps<{ modelValue: PromotionArticleProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
 const formData = useVModel(props, 'modelValue', emit);
-// 文章列表
-const articles = ref<MallArticleApi.Article[]>([]);
 
-// 加载中
-const loading = ref(false);
-// 查询文章列表
+const articles = ref<MallArticleApi.Article[]>([]); // 文章列表
+const loading = ref(false); // 加载中
+
+/** 查询文章列表 */
 const queryArticleList = async (title?: string) => {
   loading.value = true;
   const { list } = await getArticlePage({
@@ -35,7 +35,7 @@ const queryArticleList = async (title?: string) => {
   loading.value = false;
 };
 
-// 初始化
+/** 初始化 */
 onMounted(() => {
   queryArticleList();
 });
@@ -48,12 +48,12 @@ onMounted(() => {
       :wrapper-col="{ span: 18 }"
       :model="formData"
     >
-      <FormItem label="文章" prop="id">
+      <FormItem label="文章" name="id">
         <Select
           v-model:value="formData.id"
           placeholder="请选择文章"
           class="w-full"
-          filterable
+          :show-search="true"
           :loading="loading"
           :options="
             articles.map((item: any) => ({ label: item.title, value: item.id }))
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
index 86133ac70..713d226f9 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
@@ -15,10 +15,10 @@ import { getCombinationActivityListByIds } from '#/api/mall/promotion/combinatio
 
 /** 拼团卡片 */
 defineOptions({ name: 'PromotionCombination' });
-// 定义属性
+
 const props = defineProps<{ property: PromotionCombinationProperty }>();
-// 商品列表
-const spuList = ref<MallSpuApi.Spu[]>([]);
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const combinationActivityList = ref<
   MallCombinationActivityApi.CombinationActivity[]
@@ -30,7 +30,7 @@ watch(
     try {
       // 新添加的拼团组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取拼团活动详情列表
         combinationActivityList.value =
@@ -68,32 +68,25 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
-const calculateSpace = (index: number) => {
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
+/** 计算商品的间距 */
+function calculateSpace(index: number) {
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
   return { marginLeft, marginTop };
-};
+}
 
-// 容器
-const containerRef = ref();
-// 计算商品的宽度
-const calculateWidth = () => {
+const containerRef = ref(); // 容器
+
+/** 计算商品的宽度 */
+function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div
@@ -118,26 +111,34 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
+        <Image
+          :src="property.badge.imgUrl"
+          class="h-6 w-8 object-cover"
+          :preview="false"
+        />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-36"
+        class="h-[140px]"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-36': property.layoutType === 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
-        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+        <Image
+          class="h-full w-full object-cover"
+          :src="spu.picUrl"
+          :preview="false"
+        />
       </div>
       <div
         class="box-border flex flex-col gap-2 p-2"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100vw-36px-16px)]':
+            'w-[calc(100%-140px-16px)]':
               property.layoutType === 'oneColSmallImg',
           },
         ]"
@@ -215,9 +216,9 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="size-7 rounded-full"
-          fit="cover"
+          class="size-7 rounded-full object-cover"
           :src="property.btnBuy.imgUrl"
+          :preview="false"
         />
       </div>
     </div>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
index 0efe4e4d7..709d6063d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import type { PromotionCombinationProperty } from './config';
 
-import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
-
-import { onMounted, ref } from 'vue';
-
-import { CommonStatusEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
@@ -22,27 +17,20 @@ import {
   Tooltip,
 } from 'ant-design-vue';
 
-import { getCombinationActivityPage } from '#/api/mall/promotion/combination/combinationActivity';
 import UploadImg from '#/components/upload/image-upload.vue';
-// import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
+import { CombinationShowcase } from '#/views/mall/promotion/combination/components';
 import { ColorInput } from '#/views/mall/promotion/components';
 
-// 拼团属性面板
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 拼团属性面板 */
 defineOptions({ name: 'PromotionCombinationProperty' });
 
 const props = defineProps<{ modelValue: PromotionCombinationProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
-// 活动列表
-const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
-onMounted(async () => {
-  const { list } = await getCombinationActivityPage({
-    pageNo: 1,
-    pageSize: 10,
-    status: CommonStatusEnum.ENABLE,
-  });
-  activityList.value = list;
-});
 </script>
 
 <template>
@@ -56,7 +44,7 @@ onMounted(async () => {
         <CombinationShowcase v-model="formData.activityIds" />
       </Card>
       <Card title="商品样式" class="property-group" :bordered="false">
-        <FormItem label="布局" prop="type">
+        <FormItem label="布局" name="type">
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="单列大图" placement="bottom">
               <RadioButton value="oneColBigImg">
@@ -84,37 +72,37 @@ onMounted(async () => {
             </Tooltip>
           </RadioGroup>
         </FormItem>
-        <FormItem label="商品名称" prop="fields.name.show">
+        <FormItem label="商品名称" name="fields.name.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
             <Checkbox v-model:checked="formData.fields.name.show" />
           </div>
         </FormItem>
-        <FormItem label="商品简介" prop="fields.introduction.show">
+        <FormItem label="商品简介" name="fields.introduction.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.introduction.color" />
             <Checkbox v-model:checked="formData.fields.introduction.show" />
           </div>
         </FormItem>
-        <FormItem label="商品价格" prop="fields.price.show">
+        <FormItem label="商品价格" name="fields.price.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
             <Checkbox v-model:checked="formData.fields.price.show" />
           </div>
         </FormItem>
-        <FormItem label="市场价" prop="fields.marketPrice.show">
+        <FormItem label="市场价" name="fields.marketPrice.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.marketPrice.color" />
             <Checkbox v-model:checked="formData.fields.marketPrice.show" />
           </div>
         </FormItem>
-        <FormItem label="商品销量" prop="fields.salesCount.show">
+        <FormItem label="商品销量" name="fields.salesCount.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.salesCount.color" />
             <Checkbox v-model:checked="formData.fields.salesCount.show" />
           </div>
         </FormItem>
-        <FormItem label="商品库存" prop="fields.stock.show">
+        <FormItem label="商品库存" name="fields.stock.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.stock.color" />
             <Checkbox v-model:checked="formData.fields.stock.show" />
@@ -122,67 +110,67 @@ onMounted(async () => {
         </FormItem>
       </Card>
       <Card title="角标" class="property-group" :bordered="false">
-        <FormItem label="角标" prop="badge.show">
+        <FormItem label="角标" name="badge.show">
           <Switch v-model:checked="formData.badge.show" />
         </FormItem>
-        <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+        <FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22</template>
           </UploadImg>
         </FormItem>
       </Card>
       <Card title="按钮" class="property-group" :bordered="false">
-        <FormItem label="按钮类型" prop="btnBuy.type">
+        <FormItem label="按钮类型" name="btnBuy.type">
           <RadioGroup v-model:value="formData.btnBuy.type">
             <RadioButton value="text">文字</RadioButton>
             <RadioButton value="img">图片</RadioButton>
           </RadioGroup>
         </FormItem>
         <template v-if="formData.btnBuy.type === 'text'">
-          <FormItem label="按钮文字" prop="btnBuy.text">
+          <FormItem label="按钮文字" name="btnBuy.text">
             <Input v-model:value="formData.btnBuy.text" />
           </FormItem>
-          <FormItem label="左侧背景" prop="btnBuy.bgBeginColor">
+          <FormItem label="左侧背景" name="btnBuy.bgBeginColor">
             <ColorInput v-model="formData.btnBuy.bgBeginColor" />
           </FormItem>
-          <FormItem label="右侧背景" prop="btnBuy.bgEndColor">
+          <FormItem label="右侧背景" name="btnBuy.bgEndColor">
             <ColorInput v-model="formData.btnBuy.bgEndColor" />
           </FormItem>
         </template>
         <template v-else>
-          <FormItem label="图片" prop="btnBuy.imgUrl">
+          <FormItem label="图片" name="btnBuy.imgUrl">
             <UploadImg
               v-model="formData.btnBuy.imgUrl"
               height="56px"
               width="56px"
               :show-description="false"
             >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
               <template #tip> 建议尺寸：56 * 56</template>
             </UploadImg>
           </FormItem>
         </template>
       </Card>
       <Card title="商品样式" class="property-group" :bordered="false">
-        <FormItem label="上圆角" prop="borderRadiusTop">
+        <FormItem label="上圆角" name="borderRadiusTop">
           <Slider
             v-model:value="formData.borderRadiusTop"
             :max="100"
             :min="0"
           />
         </FormItem>
-        <FormItem label="下圆角" prop="borderRadiusBottom">
+        <FormItem label="下圆角" name="borderRadiusBottom">
           <Slider
             v-model:value="formData.borderRadiusBottom"
             :max="100"
             :min="0"
           />
         </FormItem>
-        <FormItem label="间隔" prop="space">
+        <FormItem label="间隔" name="space">
           <Slider v-model:value="formData.space" :max="100" :min="0" />
         </FormItem>
       </Card>
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
index 60ac6a8a8..75ca01b2c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
@@ -14,10 +14,10 @@ import { getPointActivityListByIds } from '#/api/mall/promotion/point';
 
 /** 积分商城卡片 */
 defineOptions({ name: 'PromotionPoint' });
-// 定义属性
+
 const props = defineProps<{ property: PromotionPointProperty }>();
-// 商品列表
-const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]);
+
+const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
 
@@ -27,7 +27,7 @@ watch(
     try {
       // 新添加的积分商城组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取积分商城活动详情列表
         pointActivityList.value = await getPointActivityListByIds(activityIds);
@@ -65,37 +65,30 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
-const calculateSpace = (index: number) => {
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
+/** 计算商品的间距 */
+function calculateSpace(index: number) {
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
   return { marginLeft, marginTop };
-};
+}
 
-// 容器
-const containerRef = ref();
-// 计算商品的宽度
-const calculateWidth = () => {
+const containerRef = ref(); // 容器
+
+/** 计算商品的宽度 */
+function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div
     ref="containerRef"
-    class="box-content flex min-h-9 w-full flex-row flex-wrap"
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
   >
     <div
       v-for="(spu, index) in spuList"
@@ -115,19 +108,27 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image :src="property.badge.imgUrl" class="h-6 w-10" fit="cover" />
+        <Image
+          :src="property.badge.imgUrl"
+          class="h-6 w-10 object-cover"
+          :preview="false"
+        />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-36"
+        class="h-[140px]"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-36': property.layoutType === 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
-        <Image :src="spu.picUrl" class="h-full w-full" fit="cover" />
+        <Image
+          :src="spu.picUrl"
+          class="h-full w-full object-cover"
+          :preview="false"
+        />
       </div>
       <div
         class="box-border flex flex-col gap-2 p-2"
@@ -218,8 +219,8 @@ const calculateWidth = () => {
         <Image
           v-else
           :src="property.btnBuy.imgUrl"
-          class="size-7 rounded-full"
-          fit="cover"
+          class="size-7 rounded-full object-cover"
+          :preview="false"
         />
       </div>
     </div>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
index dd01a66b0..4a729e956 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
@@ -33,7 +33,11 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :model="formData">
+    <Form
+      :model="formData"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
       <Card title="积分商城活动" class="property-group">
         <PointShowcase v-model="formData.activityIds" />
       </Card>
@@ -114,6 +118,7 @@ const formData = useVModel(props, 'modelValue', emit);
             width="72px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </FormItem>
@@ -144,6 +149,7 @@ const formData = useVModel(props, 'modelValue', emit);
               width="56px"
               :show-description="false"
             >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
               <template #tip> 建议尺寸：56 * 56 </template>
             </UploadImg>
           </FormItem>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
index 2b22f7646..bc0b2fc5f 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
@@ -15,10 +15,9 @@ import { getSeckillActivityListByIds } from '#/api/mall/promotion/seckill/seckil
 
 /** 秒杀卡片 */
 defineOptions({ name: 'PromotionSeckill' });
-// 定义属性
 const props = defineProps<{ property: PromotionSeckillProperty }>();
-// 商品列表
-const spuList = ref<MallSpuApi.Spu[]>([]);
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const seckillActivityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
 
@@ -28,7 +27,7 @@ watch(
     try {
       // 新添加的秒杀组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取秒杀活动详情列表
         seckillActivityList.value =
@@ -66,36 +65,29 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
-const calculateSpace = (index: number) => {
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
+/** 计算商品的间距 */
+function calculateSpace(index: number) {
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
   return { marginLeft, marginTop };
-};
+}
 
-// 容器
-const containerRef = ref();
-// 计算商品的宽度
-const calculateWidth = () => {
+const containerRef = ref(); // 容器
+
+/** 计算商品的宽度 */
+function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div
-    class="box-content flex min-h-9 w-full flex-row flex-wrap"
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
     ref="containerRef"
   >
     <div
@@ -116,26 +108,34 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
+        <Image
+          :src="property.badge.imgUrl"
+          class="h-6 w-8 object-cover"
+          :preview="false"
+        />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-36"
+        class="h-[140px]"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-36': property.layoutType === 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
-        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+        <Image
+          class="h-full w-full object-cover"
+          :src="spu.picUrl"
+          :preview="false"
+        />
       </div>
       <div
         class="box-border flex flex-col gap-2 p-2"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100vw-140px-16px)]':
+            'w-[calc(100%-140px-16px)]':
               property.layoutType === 'oneColSmallImg',
           },
         ]"
@@ -213,9 +213,9 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="size-7 rounded-full"
-          fit="cover"
+          class="size-7 rounded-full object-cover"
           :src="property.btnBuy.imgUrl"
+          :preview="false"
         />
       </div>
     </div>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
index 989581dbf..0ab48b76d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
@@ -19,8 +19,7 @@ import {
 
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
-// TODO: 添加组件
-// import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
+import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
@@ -36,7 +35,11 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :model="formData">
+    <Form
+      :model="formData"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
       <Card title="秒杀活动" class="property-group">
         <SeckillShowcase v-model="formData.activityIds" />
       </Card>
@@ -117,6 +120,7 @@ const formData = useVModel(props, 'modelValue', emit);
             width="72px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </FormItem>
@@ -147,6 +151,7 @@ const formData = useVModel(props, 'modelValue', emit);
               width="56px"
               :show-description="false"
             >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
               <template #tip> 建议尺寸：56 * 56</template>
             </UploadImg>
           </FormItem>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
index 2a3ec9bce..8d44dd79e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
@@ -5,19 +5,19 @@ import { IconifyIcon } from '@vben/icons';
 
 /** 搜索框 */
 defineOptions({ name: 'SearchBar' });
+
 defineProps<{ property: SearchProperty }>();
 </script>
 
 <template>
   <div
-    class="search-bar"
     :style="{
       color: property.textColor,
     }"
   >
     <!-- 搜索框 -->
     <div
-      class="inner"
+      class="relative flex min-h-7 items-center text-sm"
       :style="{
         height: `${property.height}px`,
         background: property.backgroundColor,
@@ -25,7 +25,7 @@ defineProps<{ property: SearchProperty }>();
       }"
     >
       <div
-        class="placeholder"
+        class="flex w-full items-center gap-0.5 overflow-hidden text-ellipsis whitespace-nowrap break-all px-2"
         :style="{
           justifyContent: property.placeholderPosition,
         }"
@@ -33,7 +33,7 @@ defineProps<{ property: SearchProperty }>();
         <IconifyIcon icon="lucide:search" />
         <span>{{ property.placeholder || '搜索商品' }}</span>
       </div>
-      <div class="right">
+      <div class="absolute right-2 flex items-center justify-center gap-2">
         <!-- 搜索热词 -->
         <span v-for="(keyword, index) in property.hotKeywords" :key="index">
           {{ keyword }}
@@ -44,37 +44,3 @@ defineProps<{ property: SearchProperty }>();
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.search-bar {
-  /* 搜索框 */
-  .inner {
-    position: relative;
-    display: flex;
-    align-items: center;
-    min-height: 28px;
-    font-size: 14px;
-
-    .placeholder {
-      display: flex;
-      gap: 2px;
-      align-items: center;
-      width: 100%;
-      padding: 0 8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: break-all;
-      white-space: nowrap;
-    }
-
-    .right {
-      position: absolute;
-      right: 8px;
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
index eca8a0d33..82dc8e6a8 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
@@ -48,7 +48,7 @@ watch(
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :model="formData">
+    <Form :model="formData" :label-col="{ style: { width: '80px' } }">
       <Card title="搜索热词" class="property-group">
         <Draggable
           v-model="formData.hotKeywords"
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
index 90747a4ed..0d2466917 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
@@ -11,9 +11,9 @@ defineOptions({ name: 'TabBar' });
 defineProps<{ property: TabBarProperty }>();
 </script>
 <template>
-  <div class="tab-bar">
+  <div class="z-[2] w-full">
     <div
-      class="tab-bar-bg"
+      class="flex flex-row items-center justify-around py-2"
       :style="{
         background:
           property.style.bgType === 'color'
@@ -26,12 +26,19 @@ defineProps<{ property: TabBarProperty }>();
       <div
         v-for="(item, index) in property.items"
         :key="index"
-        class="tab-bar-item"
+        class="flex w-full flex-col items-center justify-center text-xs"
       >
-        <Image :src="index === 0 ? item.activeIconUrl : item.iconUrl">
+        <Image
+          :src="index === 0 ? item.activeIconUrl : item.iconUrl"
+          class="!h-[26px] w-[26px] rounded"
+          :preview="false"
+        >
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
-              <IconifyIcon icon="lucide:image" />
+              <IconifyIcon
+                icon="lucide:image"
+                class="h-[26px] w-[26px] rounded"
+              />
             </div>
           </template>
         </Image>
@@ -47,33 +54,3 @@ defineProps<{ property: TabBarProperty }>();
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-.tab-bar {
-  z-index: 2;
-  width: 100%;
-
-  .tab-bar-bg {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    padding: 8px 0;
-
-    .tab-bar-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      font-size: 12px;
-
-      :deep(img),
-      .el-icon {
-        width: 26px;
-        height: 26px;
-        border-radius: 4px;
-      }
-    }
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
index ec0cb01c7..6248ddc51 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
@@ -22,7 +22,8 @@ import {
 } from '#/views/mall/promotion/components';
 
 import { component, THEME_LIST } from './config';
-// 底部导航栏
+
+/** 底部导航栏 */
 defineOptions({ name: 'TabBarProperty' });
 
 const props = defineProps<{ modelValue: TabBarProperty }>();
@@ -32,7 +33,7 @@ const formData = useVModel(props, 'modelValue', emit);
 // 将数据库的值更新到右侧属性栏
 component.property.items = formData.value.items;
 
-// 要的主题
+/** 处理主题变更 */
 const handleThemeChange = () => {
   const theme = THEME_LIST.find((theme) => theme.id === formData.value.theme);
   if (theme?.color) {
@@ -42,7 +43,7 @@ const handleThemeChange = () => {
 </script>
 
 <template>
-  <div class="tab-bar">
+  <div>
     <!-- 表单 -->
     <Form
       :model="formData"
@@ -87,6 +88,7 @@ const handleThemeChange = () => {
           class="min-w-[200px]"
           :show-description="false"
         >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
           <template #tip> 建议尺寸 375 * 50 </template>
         </UploadImg>
       </FormItem>
@@ -142,5 +144,3 @@ const handleThemeChange = () => {
     </Form>
   </div>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
index e7daeb927..cf0fee121 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
@@ -11,12 +11,15 @@ defineOptions({ name: 'TitleBar' });
 defineProps<{ property: TitleBarProperty }>();
 </script>
 <template>
-  <div class="title-bar" :style="{ height: `${property.height}px` }">
+  <div
+    class="relative box-border min-h-[20px] w-full"
+    :style="{ height: `${property.height}px` }"
+  >
     <Image
       v-if="property.bgImgUrl"
       :src="property.bgImgUrl"
-      fit="cover"
-      class="w-full"
+      :preview="false"
+      class="w-full object-cover"
     />
     <div
       class="absolute left-0 top-0 flex h-full w-full flex-col justify-center"
@@ -51,7 +54,7 @@ defineProps<{ property: TitleBarProperty }>();
     </div>
     <!-- 更多 -->
     <div
-      class="more"
+      class="absolute bottom-0 right-2 top-0 m-auto flex items-center justify-center text-[10px] text-[#969799]"
       v-show="property.more.show"
       :style="{
         color: property.descriptionColor,
@@ -67,25 +70,3 @@ defineProps<{ property: TitleBarProperty }>();
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.title-bar {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 20px;
-
-  /* 更多 */
-  .more {
-    position: absolute;
-    top: 0;
-    right: 8px;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: auto;
-    font-size: 10px;
-    color: #969799;
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
index 63a28ae6f..4dc06495c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
@@ -47,6 +47,7 @@ const rules = {}; // 表单校验
             height="40px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip>建议尺寸 750*80</template>
           </UploadImg>
         </FormItem>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
index baa5ca21e..8c4b68a18 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
@@ -14,12 +14,12 @@ defineProps<{ property: UserCardProperty }>();
   <div class="flex flex-col">
     <div class="flex items-center justify-between px-4 py-6">
       <div class="flex flex-1 items-center gap-4">
-        <Avatar class="size-14">
-          <IconifyIcon icon="lucide:user" class="size-14" />
+        <Avatar :size="60">
+          <IconifyIcon icon="ep:avatar" :size="60" />
         </Avatar>
-        <span class="text-lg font-bold">芋道源码</span>
+        <span class="text-[18px] font-bold">芋道源码</span>
       </div>
-      <IconifyIcon icon="lucide:qr-code" class="size-5" />
+      <IconifyIcon icon="tdesign:qrcode" :size="20" />
     </div>
     <div class="bg-card flex items-center justify-between px-5 py-2 text-xs">
       <span class="text-orange-500">点击绑定手机号</span>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
index bad6c2e53..46a0e16c5 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
@@ -5,11 +5,13 @@ import { useVModel } from '@vueuse/core';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 用户卡片属性面板
+/** 用户卡片属性面板 */
 defineOptions({ name: 'UserCardProperty' });
 
 const props = defineProps<{ modelValue: UserCardProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
index c81926481..4666980ea 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡券属性 */
 export interface UserCouponProperty {
-  // 组件样式
-  style: ComponentStyle;
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserCoupon',
   name: '用户卡券',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
index 6fbe90bd9..a990140e9 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
@@ -11,5 +11,6 @@ defineProps<{ property: UserCouponProperty }>();
 <template>
   <Image
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
+    :preview="false"
   />
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
index 1451ac12d..af6f888c7 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
@@ -5,11 +5,13 @@ import { Image } from 'ant-design-vue';
 
 /** 用户订单 */
 defineOptions({ name: 'UserOrder' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserOrderProperty }>();
 </script>
 <template>
   <Image
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
+    :preview="false"
   />
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
index 66c6cfdd1..e670a1e44 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
@@ -5,11 +5,13 @@ import { useVModel } from '@vueuse/core';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 用户订单属性面板
+/** 用户订单属性面板 */
 defineOptions({ name: 'UserOrderProperty' });
 
 const props = defineProps<{ modelValue: UserOrderProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
index 9e7aa4891..8104d8fe6 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
@@ -5,11 +5,13 @@ import { Image } from 'ant-design-vue';
 
 /** 用户资产 */
 defineOptions({ name: 'UserWallet' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserWalletProperty }>();
 </script>
 <template>
   <Image
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
+    :preview="false"
   />
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
index f82113728..fc7adf438 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
@@ -5,11 +5,13 @@ import { useVModel } from '@vueuse/core';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 用户资产属性面板
+/** 用户资产属性面板 */
 defineOptions({ name: 'UserWalletProperty' });
 
 const props = defineProps<{ modelValue: UserWalletProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
index b89331eec..08118a30b 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
@@ -14,6 +14,7 @@ defineProps<{ property: VideoPlayerProperty }>();
       class="h-full w-full"
       :src="property.posterUrl"
       v-if="property.posterUrl"
+      :preview="false"
     />
     <video
       v-else
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
index aa3445b8e..ba4896181 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
@@ -9,11 +9,13 @@ import UploadImg from '#/components/upload/image-upload.vue';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 视频播放属性面板
+/** 视频播放属性面板 */
 defineOptions({ name: 'VideoPlayerProperty' });
 
 const props = defineProps<{ modelValue: VideoPlayerProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -47,6 +49,7 @@ const formData = useVModel(props, 'modelValue', emit);
           class="min-w-[80px]"
           :show-description="false"
         >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
           <template #tip> 建议宽度750 </template>
         </UploadImg>
       </FormItem>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
index ec1ea1594..32ec03daa 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
@@ -38,6 +38,12 @@ const props = defineProps({
 
 const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏操作
 
+// TODO @xingyu：要不要加这个？
+// const qrcode = useQRCode(props.previewUrl, {
+//   errorCorrectionLevel: 'H',
+//   margin: 4,
+// }); // 预览二维码
+
 const componentLibrary = ref(); // 左侧组件库
 const pageConfigComponent = ref<DiyComponent<any>>(
   cloneDeep(PAGE_CONFIG_COMPONENT),
@@ -169,6 +175,7 @@ function handleComponentSelected(
   index: number = -1,
 ) {
   // 使用深拷贝避免响应式追踪循环警告
+  // TODO @xingyu：这个是必须的么？ele 没有哈。
   selectedComponent.value = cloneDeep(component);
   selectedComponentIndex.value = index;
 }
@@ -308,17 +315,17 @@ onMounted(() => {
         >
           <Tooltip title="重置">
             <Button @click="handleReset">
-              <IconifyIcon class="size-6" icon="lucide:refresh-cw" />
+              <IconifyIcon class="size-5" icon="lucide:refresh-cw" />
             </Button>
           </Tooltip>
           <Tooltip v-if="previewUrl" title="预览">
             <Button @click="handlePreview">
-              <IconifyIcon class="size-6" icon="lucide:eye" />
+              <IconifyIcon class="size-5" icon="lucide:eye" />
             </Button>
           </Tooltip>
           <Tooltip title="保存">
             <Button @click="handleSave">
-              <IconifyIcon class="size-6" icon="lucide:check" />
+              <IconifyIcon class="size-5" icon="lucide:check" />
             </Button>
           </Tooltip>
         </Button.Group>
@@ -501,4 +508,5 @@ onMounted(() => {
       </div>
     </PreviewModal>
   </Page>
+  <!-- TODO @xingyu：这里改造完后，类似 web-ele/src/views/mall/promotion/components/diy-editor/index.vue 里的全局样式（递推到子组件）里的就没没了，类似 property-group -->
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
index a8f33d2fa..8926ca581 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
@@ -27,14 +27,11 @@ export interface DiyComponentLibrary {
   components: string[]; // 组件列表
 }
 
-// 组件样式
+/** 组件样式 */
 export interface ComponentStyle {
-  // 背景类型
-  bgType: 'color' | 'img';
-  // 背景颜色
-  bgColor: string;
-  // 背景图片
-  bgImg: string;
+  bgType: 'color' | 'img'; // 背景类型
+  bgColor: string; // 背景颜色
+  bgImg: string; // 背景图片
   // 外边距
   margin: number;
   marginTop: number;
diff --git a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
index 95c5a396d..30f3e0196 100644
--- a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
@@ -66,10 +66,11 @@ const handleDelete = function (index: number) {
               class="drag-icon cursor-move text-gray-500"
             />
           </Tooltip>
-          <Tooltip v-if="formData.length > min" title="删除">
+          <Tooltip title="删除">
             <IconifyIcon
-              icon="lucide:trash-2"
-              class="cursor-pointer text-red-500 hover:text-red-600"
+              icon="ep:delete"
+              class="cursor-pointer text-red-500"
+              v-if="formData.length > min"
               @click="handleDelete(index)"
             />
           </Tooltip>
@@ -79,11 +80,7 @@ const handleDelete = function (index: number) {
       </div>
     </template>
   </VueDraggable>
-  <Tooltip
-    :title="
-      limit > 0 && limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined
-    "
-  >
+  <Tooltip :title="limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined">
     <Button
       type="primary"
       ghost
@@ -98,5 +95,3 @@ const handleDelete = function (index: number) {
     </Button>
   </Tooltip>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/index.ts b/apps/web-antd/src/views/mall/promotion/components/index.ts
index a088806e2..6dbe001fe 100644
--- a/apps/web-antd/src/views/mall/promotion/components/index.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/index.ts
@@ -1,4 +1,5 @@
 export { default as AppLinkInput } from './app-link-input/index.vue';
+export { default as AppLinkSelectDialog } from './app-link-input/select-dialog.vue';
 export { default as ColorInput } from './color-input/index.vue';
 export { default as DiyEditor } from './diy-editor/index.vue';
 export { type DiyComponentLibrary, PAGE_LIBS } from './diy-editor/util';
diff --git a/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
index 7372ec5b4..c15424605 100644
--- a/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
@@ -29,7 +29,6 @@ const props = defineProps({
     type: Number,
     default: 4,
   }, // 行数，默认 4 行
-
   cols: {
     type: Number,
     default: 4,
@@ -167,9 +166,7 @@ function handleHotAreaSelected(hotArea: Rect, index: number) {
   emit('hotAreaSelected', hotArea, index);
 }
 
-/**
- * 结束热区选择模式
- */
+/** 结束热区选择模式 */
 function exitHotAreaSelectMode() {
   // 移除方块激活标记
   eachCube((_, __, cube) => {
diff --git a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
index 99d7d194c..e68caa6d0 100644
--- a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { Space } from 'ant-design-vue';
+
+// TODO @芋艿、@xingyu：貌似上下移动的按钮，被遮住了！
 /**
  * 垂直按钮组
- * Ant Design Vue 的按钮组只支持水平显示，通过重写样式实现垂直布局
+ * Ant Design Vue 的按钮组，通过 Space 实现垂直布局
  */
 defineOptions({ name: 'VerticalButtonGroup' });
 </script>
diff --git a/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue b/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
index 283708d10..aadc5bd9a 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
@@ -26,35 +26,28 @@ defineOptions({ name: 'DiyTemplateDecorate' });
 const route = useRoute();
 const { refreshTab } = useTabs();
 
-/** 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复 */
-const DIY_PAGE_INDEX_KEY = 'diy_page_index';
+const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
 
 const selectedTemplateItem = ref(0);
-/** 左上角工具栏操作按钮 */
 const templateItems = ref([
   { name: '基础设置', icon: 'lucide:settings' },
   { name: '首页', icon: 'lucide:home' },
   { name: '我的', icon: 'lucide:user' },
-]);
+]); // 左上角工具栏操作按钮
 
 const formData = ref<MallDiyTemplateApi.DiyTemplateProperty>();
-/** 当前编辑的属性 */
 const currentFormData = ref<
   MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty
 >({
   property: '',
-} as MallDiyPageApi.DiyPage);
-/** templateItem 对应的缓存 */
+} as MallDiyPageApi.DiyPage); // 当前编辑的属性
 const currentFormDataMap = ref<
   Map<string, MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty>
->(new Map());
+>(new Map()); // templateItem 对应的缓存
 
-/** 商城 H5 预览地址 */
-const previewUrl = ref('');
+const previewUrl = ref(''); // 商城 H5 预览地址
 
-/** 模板组件库 */
-const templateLibs = [] as DiyComponentLibrary[];
-/** 当前组件库 */
+const templateLibs = [] as DiyComponentLibrary[]; // 模板组件库
 const libs = ref<DiyComponentLibrary[]>(templateLibs); // 当前组件库
 
 /** 获取详情 */
@@ -76,6 +69,7 @@ async function getPageDetail(id: any) {
 }
 
 /** 模板选项切换 */
+// TODO @xingyu：貌似切换不对；“个人中心”切换不过去；
 function handleTemplateItemChange(event: any) {
   // 从事件对象中获取值
   const val = event.target?.value ?? event;
@@ -227,7 +221,7 @@ onMounted(async () => {
           >
             <IconifyIcon
               :icon="item.icon"
-              class="mt-2 flex size-6 items-center"
+              class="mt-2 flex size-5 items-center"
             />
           </Radio.Button>
         </template>
diff --git a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue b/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
index 9531557c0..e15176ef7 100644
--- a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
@@ -1,7 +1,5 @@
-<!-- eslint-disable unicorn/no-nested-ternary -->
-<!-- 积分活动橱窗组件 - 用于装修时展示和选择积分活动 -->
+<!-- 积分商城活动橱窗组件：用于展示和选择积分商城活动 -->
 <script lang="ts" setup>
-// TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 
 import { computed, ref, watch } from 'vue';
@@ -15,128 +13,113 @@ import { getPointActivityListByIds } from '#/api/mall/promotion/point';
 import PointTableSelect from './point-table-select.vue';
 
 interface PointShowcaseProps {
-  modelValue: number | number[];
+  modelValue?: number | number[];
   limit?: number;
   disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<PointShowcaseProps>(), {
+  modelValue: undefined,
   limit: Number.MAX_VALUE,
   disabled: false,
 });
 
-const emit = defineEmits<{
-  change: [value: any];
-  'update:modelValue': [value: number | number[]];
-}>();
+const emit = defineEmits(['update:modelValue', 'change']);
 
-// 积分活动列表
-const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
+const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]); // 已选择的活动列表
+const pointTableSelectRef = ref<InstanceType<typeof PointTableSelect>>(); // 活动选择表格组件引用
+const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
 
-// 计算是否可以添加
+/** 计算是否可以添加 */
 const canAdd = computed(() => {
-  if (props.disabled) return false;
-  if (!props.limit) return true;
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.limit) {
+    return true;
+  }
   return pointActivityList.value.length < props.limit;
 });
 
-// 积分活动选择器引用
-const pointActivityTableSelectRef = ref();
-
-/**
- * 打开积分活动选择器
- */
-function openPointActivityTableSelect() {
-  pointActivityTableSelectRef.value.open(pointActivityList.value);
-}
-
-/**
- * 选择活动后触发
- */
-function handleActivitySelected(
-  activityList:
-    | MallPointActivityApi.PointActivity
-    | MallPointActivityApi.PointActivity[],
-) {
-  pointActivityList.value = Array.isArray(activityList)
-    ? activityList
-    : [activityList];
-  emitActivityChange();
-}
-
-/**
- * 删除活动
- */
-function handleRemoveActivity(index: number) {
-  pointActivityList.value.splice(index, 1);
-  emitActivityChange();
-}
-
-/**
- * 发送变更事件
- */
-function emitActivityChange() {
-  if (props.limit === 1) {
-    const pointActivity =
-      pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
-    emit('update:modelValue', pointActivity?.id || 0);
-    emit('change', pointActivity);
-  } else {
-    emit(
-      'update:modelValue',
-      pointActivityList.value.map((pointActivity) => pointActivity.id),
-    );
-    emit('change', pointActivityList.value);
-  }
-}
-
-// 监听 modelValue 变化
+/** 监听 modelValue 变化，加载活动详情 */
 watch(
   () => props.modelValue,
-  async () => {
-    const ids = Array.isArray(props.modelValue)
-      ? props.modelValue
-      : props.modelValue
-        ? [props.modelValue]
-        : [];
-
-    // 不需要返显
+  async (newValue) => {
+    // eslint-disable-next-line unicorn/no-nested-ternary
+    const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
     if (ids.length === 0) {
       pointActivityList.value = [];
       return;
     }
-
-    // 只有活动发生变化之后，才会查询活动
+    // 只有活动发生变化时才重新查询
     if (
       pointActivityList.value.length === 0 ||
-      pointActivityList.value.some(
-        (pointActivity) => !ids.includes(pointActivity.id!),
-      )
+      pointActivityList.value.some((activity) => !ids.includes(activity.id!))
     ) {
       pointActivityList.value = await getPointActivityListByIds(ids);
     }
   },
   { immediate: true },
 );
+
+/** 打开活动选择对话框 */
+function handleOpenActivitySelect() {
+  pointTableSelectRef.value?.open(pointActivityList.value);
+}
+
+/** 选择活动后触发 */
+function handleActivitySelected(
+  activities:
+    | MallPointActivityApi.PointActivity
+    | MallPointActivityApi.PointActivity[],
+) {
+  pointActivityList.value = Array.isArray(activities)
+    ? activities
+    : [activities];
+  emitActivityChange();
+}
+
+/** 删除活动 */
+function handleRemoveActivity(index: number) {
+  pointActivityList.value.splice(index, 1);
+  emitActivityChange();
+}
+
+/** 触发变更事件 */
+function emitActivityChange() {
+  if (props.limit === 1) {
+    const activity =
+      pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
+    emit('update:modelValue', activity?.id || 0);
+    emit('change', activity);
+  } else {
+    emit(
+      'update:modelValue',
+      pointActivityList.value.map((activity) => activity.id!),
+    );
+    emit('change', pointActivityList.value);
+  }
+}
 </script>
 
 <template>
   <div class="flex flex-wrap items-center gap-2">
-    <!-- 活动图片列表 -->
+    <!-- 已选活动列表 -->
     <div
-      v-for="(pointActivity, index) in pointActivityList"
-      :key="pointActivity.id"
-      class="relative flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300"
+      v-for="(activity, index) in pointActivityList"
+      :key="activity.id"
+      class="relative h-[60px] w-[60px] overflow-hidden rounded-lg border border-dashed border-gray-300"
     >
-      <Tooltip :title="pointActivity.spuName">
+      <Tooltip :title="activity.spuName">
         <div class="relative h-full w-full">
           <Image
             :preview="true"
-            :src="pointActivity.picUrl"
+            :src="activity.picUrl"
             class="h-full w-full rounded-lg object-cover"
           />
+          <!-- 删除按钮 -->
           <IconifyIcon
-            v-show="!disabled"
+            v-if="!disabled"
             icon="lucide:x"
             class="absolute -right-2 -top-2 z-10 h-5 w-5 cursor-pointer text-red-500 hover:text-red-600"
             @click="handleRemoveActivity(index)"
@@ -145,21 +128,21 @@ watch(
       </Tooltip>
     </div>
 
-    <!-- 添加按钮 -->
+    <!-- 添加活动按钮 -->
     <Tooltip v-if="canAdd" title="选择活动">
       <div
-        class="flex h-14 w-14 cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
-        @click="openPointActivityTableSelect"
+        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
+        @click="handleOpenActivitySelect"
       >
-        <IconifyIcon icon="lucide:plus" class="text-lg text-gray-400" />
+        <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
       </div>
     </Tooltip>
   </div>
 
-  <!-- 积分活动选择对话框 -->
+  <!-- 活动选择对话框 -->
   <PointTableSelect
-    ref="pointActivityTableSelectRef"
-    :multiple="limit !== 1"
+    ref="pointTableSelectRef"
+    :multiple="isMultiple"
     @change="handleActivitySelected"
   />
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue b/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
index 018fe48d5..eff545cba 100644
--- a/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
@@ -1,23 +1,21 @@
-<!-- 积分活动表格选择器 -->
+<!-- 积分商城活动选择弹窗组件 -->
 <script lang="ts" setup>
-// TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
-
-import { Checkbox, Radio } from 'ant-design-vue';
+import { dateFormatter, fenToYuanFormat } from '@vben/utils';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getPointActivityPage } from '#/api/mall/promotion/point';
 
 interface PointTableSelectProps {
-  multiple?: boolean;
+  multiple?: boolean; // 是否单选：true - checkbox；false - radio
 }
 
 const props = withDefaults(defineProps<PointTableSelectProps>(), {
@@ -26,90 +24,75 @@ const props = withDefaults(defineProps<PointTableSelectProps>(), {
 
 const emit = defineEmits<{
   change: [
-    value:
+    activity:
       | MallPointActivityApi.PointActivity
       | MallPointActivityApi.PointActivity[],
   ];
 }>();
 
-// 单选：选中的活动 ID
-const selectedActivityId = ref<number>();
-// 多选：选中状态映射
-const checkedStatus = ref<Record<number, boolean>>({});
-// 多选：选中的活动列表
-const checkedActivities = ref<MallPointActivityApi.PointActivity[]>([]);
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow =
+    gridApi.grid.getRadioRecord() as MallPointActivityApi.PointActivity;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
 
-// 全选状态
-const isCheckAll = ref(false);
-const isIndeterminate = ref(false);
+/** 计算已兑换数量 */
+const getRedeemedQuantity = (row: MallPointActivityApi.PointActivity) =>
+  (row.totalStock || 0) - (row.stock || 0);
 
-// 搜索表单配置
-const formSchema = computed<VbenFormSchema[]>(() => {
-  return [
-    {
-      fieldName: 'status',
-      label: '活动状态',
-      component: 'Select',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        placeholder: '请选择活动状态',
-        allowClear: true,
-      },
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'status',
+    label: '活动状态',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      placeholder: '请选择活动状态',
+      clearable: true,
     },
-  ];
-});
+  },
+]);
 
-// 列配置
+/** 表格列配置 */
 const gridColumns = computed<VxeGridProps['columns']>(() => {
   const columns: VxeGridProps['columns'] = [];
-
-  // 多选模式
   if (props.multiple) {
-    columns.push({
-      field: 'checkbox',
-      title: '',
-      width: 55,
-      align: 'center',
-      slots: { default: 'checkbox-column', header: 'checkbox-header' },
-    });
+    columns.push({ type: 'checkbox', width: 55 });
   } else {
-    // 单选模式
-    columns.push({
-      field: 'radio',
-      title: '#',
-      width: 55,
-      align: 'center',
-      slots: { default: 'radio-column' },
-    });
+    columns.push({ type: 'radio', width: 55 });
   }
-
   columns.push(
     {
       field: 'id',
       title: '活动编号',
-      minWidth: 80,
+      minWidth: 100,
+      align: 'center',
     },
     {
       field: 'picUrl',
       title: '商品图片',
-      minWidth: 80,
+      width: 100,
+      align: 'center',
       cellRender: {
         name: 'CellImage',
-        props: {
-          height: 40,
-        },
       },
     },
     {
       field: 'spuName',
       title: '商品标题',
-      minWidth: 300,
+      minWidth: 200,
     },
     {
       field: 'marketPrice',
       title: '原价',
       minWidth: 100,
-      formatter: 'formatAmount2',
+      align: 'center',
+      formatter: ({ cellValue }) => fenToYuanFormat(cellValue),
     },
     {
       field: 'status',
@@ -118,9 +101,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
       align: 'center',
       cellRender: {
         name: 'CellDict',
-        props: {
-          type: DICT_TYPE.COMMON_STATUS,
-        },
+        props: { type: DICT_TYPE.COMMON_STATUS },
       },
     },
     {
@@ -140,216 +121,119 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
       title: '已兑换数量',
       minWidth: 100,
       align: 'center',
-      formatter: ({ row }) => (row.totalStock || 0) - (row.stock || 0),
+      formatter: ({ row }) => getRedeemedQuantity(row),
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
+      width: 180,
       align: 'center',
-      formatter: 'formatDateTime',
+      formatter: ({ cellValue }) => dateFormatter(cellValue),
     },
   );
-
   return columns;
 });
 
-// 初始化表格
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
   },
   gridOptions: {
     columns: gridColumns.value,
     height: 500,
     border: true,
-    showOverflow: true,
+    checkboxConfig: {
+      reserve: true,
+    },
+    radioConfig: {
+      reserve: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
     proxyConfig: {
       ajax: {
         async query({ page }: any, formValues: any) {
-          try {
-            const params: any = {
-              pageNo: page.currentPage,
-              pageSize: page.pageSize,
-            };
-            if (formValues.status !== undefined) {
-              params.status = formValues.status;
-            }
-            const data = await getPointActivityPage(params);
-            const list = data.list || [];
-
-            // 初始化 checkbox 绑定
-            list.forEach(
-              (activityVO) =>
-                (checkedStatus.value[activityVO.id] =
-                  checkedStatus.value[activityVO.id] || false),
-            );
-
-            // 计算全选框状态
-            calculateIsCheckAll(list);
-
-            return {
-              items: list,
-              total: data.total || 0,
-            };
-          } catch (error) {
-            console.error('加载积分活动数据失败:', error);
-            return { items: [], total: 0 };
-          }
+          return await getPointActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
         },
       },
     },
   },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
 });
 
-/**
- * 单选：处理选中
- */
-function handleSingleSelected(row: MallPointActivityApi.PointActivity) {
-  selectedActivityId.value = row.id;
-  emit('change', row);
-  modalApi.close();
-}
-
-/**
- * 多选：全选/全不选
- */
-function handleCheckAll(e: any) {
-  const checked = e.target.checked;
-  isCheckAll.value = checked;
-  isIndeterminate.value = false;
-
-  const list = gridApi.grid.getData();
-  list.forEach((pointActivity) =>
-    handleCheckOne(checked, pointActivity, false),
-  );
-}
-
-/**
- * 多选：选中一行
- */
-function handleCheckOne(
-  checked: boolean,
-  pointActivity: MallPointActivityApi.PointActivity,
-  isCalcCheckAll: boolean,
-) {
-  if (checked) {
-    checkedActivities.value.push(pointActivity);
-    checkedStatus.value[pointActivity.id] = true;
-  } else {
-    const index = findCheckedIndex(pointActivity);
-    if (index > -1) {
-      checkedActivities.value.splice(index, 1);
-      checkedStatus.value[pointActivity.id] = false;
-      isCheckAll.value = false;
-    }
-  }
-
-  // 计算全选框状态
-  if (isCalcCheckAll) {
-    const list = gridApi.grid.getData();
-    calculateIsCheckAll(list);
-  }
-}
-
-/**
- * 查找活动在已选中列表中的索引
- */
-function findCheckedIndex(activityVO: MallPointActivityApi.PointActivity) {
-  return checkedActivities.value.findIndex((item) => item.id === activityVO.id);
-}
-
-/**
- * 计算全选框状态
- */
-function calculateIsCheckAll(list: MallPointActivityApi.PointActivity[]) {
-  isCheckAll.value = list.every(
-    (activityVO) => checkedStatus.value[activityVO.id],
-  );
-  isIndeterminate.value =
-    !isCheckAll.value &&
-    list.some((activityVO) => checkedStatus.value[activityVO.id]);
-}
-
-/**
- * 多选：确认选择
- */
-function handleConfirm() {
-  emit('change', [...checkedActivities.value]);
-  modalApi.close();
-}
-
-/**
- * 打开对话框
- */
-function open(pointList?: MallPointActivityApi.PointActivity[]) {
-  // 重置
-  checkedActivities.value = [];
-  checkedStatus.value = {};
-  isCheckAll.value = false;
-  isIndeterminate.value = false;
-
-  // 处理已选中
-  if (pointList && pointList.length > 0) {
-    checkedActivities.value = [...pointList];
-    checkedStatus.value = Object.fromEntries(
-      pointList.map((activityVO) => [activityVO.id, true]),
-    );
-  }
-
-  modalApi.open();
-}
-
-// 暴露 open 方法
-defineExpose({ open });
-
-// 初始化弹窗
 const [Modal, modalApi] = useVbenModal({
-  onConfirm: props.multiple ? handleConfirm : undefined,
+  destroyOnClose: true,
+  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
+  onConfirm: () => {
+    const selectedRows =
+      gridApi.grid.getCheckboxRecords() as MallPointActivityApi.PointActivity[];
+    emit('change', selectedRows);
+    modalApi.close();
+  },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      // 关闭时清理状态
-      if (!props.multiple) {
-        selectedActivityId.value = undefined;
-      }
+      await gridApi.grid.clearCheckboxRow();
+      await gridApi.grid.clearRadioRow();
       return;
     }
 
-    // 打开时触发查询
+    // 1. 先查询数据
     await gridApi.query();
+    // 2. 设置已选中行
+    const data = modalApi.getData<
+      MallPointActivityApi.PointActivity | MallPointActivityApi.PointActivity[]
+    >();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((activity) => {
+          const row = tableData.find(
+            (item: MallPointActivityApi.PointActivity) =>
+              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: MallPointActivityApi.PointActivity) => item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (
+    data?:
+      | MallPointActivityApi.PointActivity
+      | MallPointActivityApi.PointActivity[],
+  ) => {
+    modalApi.setData(data).open();
   },
 });
 </script>
 
 <template>
-  <Modal class="w-[70%]" title="选择活动">
-    <Grid>
-      <!-- 多选：表头 checkbox -->
-      <template v-if="props.multiple" #checkbox-header>
-        <Checkbox
-          v-model:checked="isCheckAll"
-          :indeterminate="isIndeterminate"
-          @change="handleCheckAll"
-        />
-      </template>
-
-      <!-- 多选：行 checkbox -->
-      <template v-if="props.multiple" #checkbox-column="{ row }">
-        <Checkbox
-          v-model:checked="checkedStatus[row.id]"
-          @change="(e: any) => handleCheckOne(e.target.checked, row, true)"
-        />
-      </template>
-
-      <!-- 单选：行 radio -->
-      <template v-if="!props.multiple" #radio-column="{ row }">
-        <Radio
-          :checked="selectedActivityId === row.id"
-          :value="row.id"
-          class="cursor-pointer"
-          @click="handleSingleSelected(row)"
-        />
-      </template>
-    </Grid>
+  <Modal title="选择活动" class="w-[950px]">
+    <Grid />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/components/index.ts b/apps/web-antd/src/views/mall/promotion/seckill/components/index.ts
new file mode 100644
index 000000000..dd452161c
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/seckill/components/index.ts
@@ -0,0 +1 @@
+export { default as SeckillShowcase } from './showcase.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/components/showcase.vue b/apps/web-antd/src/views/mall/promotion/seckill/components/showcase.vue
new file mode 100644
index 000000000..9de0df553
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/seckill/components/showcase.vue
@@ -0,0 +1,148 @@
+<!-- 秒杀活动橱窗组件：用于展示和选择秒杀活动 -->
+<script lang="ts" setup>
+import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Image, Tooltip } from 'ant-design-vue';
+
+import { getSeckillActivityListByIds } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import SeckillTableSelect from './table-select.vue';
+
+interface SeckillShowcaseProps {
+  modelValue?: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<SeckillShowcaseProps>(), {
+  modelValue: undefined,
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const activityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]); // 已选择的活动列表
+const seckillTableSelectRef = ref<InstanceType<typeof SeckillTableSelect>>(); // 活动选择表格组件引用
+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 getSeckillActivityListByIds(ids as number[]);
+    }
+  },
+  { immediate: true },
+);
+
+/** 打开活动选择对话框 */
+function handleOpenActivitySelect() {
+  seckillTableSelectRef.value?.open(activityList.value);
+}
+
+/** 选择活动后触发 */
+function handleActivitySelected(
+  activities:
+    | MallSeckillActivityApi.SeckillActivity
+    | MallSeckillActivityApi.SeckillActivity[],
+) {
+  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="relative h-[60px] w-[60px] overflow-hidden rounded-lg border border-dashed border-gray-300"
+    >
+      <Tooltip :title="activity.name">
+        <div class="relative h-full w-full">
+          <Image
+            :preview="true"
+            :src="activity.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+          />
+          <!-- 删除按钮 -->
+          <!-- TODO @芋艿：等待和 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue 进一步统一 -->
+          <IconifyIcon
+            v-if="!disabled"
+            icon="lucide:x"
+            class="absolute -right-2 -top-2 z-10 h-5 w-5 cursor-pointer text-red-500 hover:text-red-600"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </Tooltip>
+    </div>
+
+    <!-- 添加活动按钮 -->
+    <Tooltip v-if="canAdd" title="选择活动">
+      <div
+        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
+        @click="handleOpenActivitySelect"
+      >
+        <!-- TODO @芋艿：等待和 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue 进一步统一 -->
+        <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
+      </div>
+    </Tooltip>
+  </div>
+
+  <!-- 活动选择对话框 -->
+  <SeckillTableSelect
+    ref="seckillTableSelectRef"
+    :multiple="isMultiple"
+    @change="handleActivitySelected"
+  />
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/components/table-select.vue b/apps/web-antd/src/views/mall/promotion/seckill/components/table-select.vue
new file mode 100644
index 000000000..ec3315b1a
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/seckill/components/table-select.vue
@@ -0,0 +1,277 @@
+<!-- 秒杀活动选择弹窗组件 -->
+<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 { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+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 { getSeckillActivityPage } from '#/api/mall/promotion/seckill/seckillActivity';
+
+interface SeckillTableSelectProps {
+  multiple?: boolean; // 是否多选：true - checkbox；false - radio
+}
+
+const props = withDefaults(defineProps<SeckillTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [
+    activity:
+      | MallSeckillActivityApi.SeckillActivity
+      | MallSeckillActivityApi.SeckillActivity[],
+  ];
+}>();
+
+const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
+const categoryTreeList = ref<any[]>([]); // 分类树
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow =
+    gridApi.grid.getRadioRecord() as MallSeckillActivityApi.SeckillActivity;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+/**
+ * 格式化秒杀价格
+ * @param products
+ */
+const formatSeckillPrice = (
+  products: MallSeckillActivityApi.SeckillProduct[],
+) => {
+  if (!products || products.length === 0) return '-';
+  const seckillPrice = Math.min(
+    ...products.map((item) => item.seckillPrice || 0),
+  );
+  return `￥${fenToYuan(seckillPrice)}`;
+};
+
+/** 搜索表单 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,
+      align: 'center',
+    },
+    {
+      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,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return cellValue ? `￥${fenToYuan(cellValue)}` : '-';
+      },
+    },
+    {
+      field: 'products',
+      title: '秒杀价',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return formatSeckillPrice(cellValue);
+      },
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      align: 'center',
+      cellRender: {
+        name: 'CellDatetime',
+      },
+    },
+  );
+  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 getSeckillActivityPage({
+            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 MallSeckillActivityApi.SeckillActivity[];
+    emit('change', selectedRows);
+    modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      await gridApi.grid.clearCheckboxRow();
+      await gridApi.grid.clearRadioRow();
+      return;
+    }
+
+    // 1. 先查询数据
+    await gridApi.query();
+    // 2. 设置已选中行
+    const data = modalApi.getData<
+      | MallSeckillActivityApi.SeckillActivity
+      | MallSeckillActivityApi.SeckillActivity[]
+    >();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((activity) => {
+          const row = tableData.find(
+            (item: MallSeckillActivityApi.SeckillActivity) =>
+              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: MallSeckillActivityApi.SeckillActivity) => item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (
+    data?:
+      | MallSeckillActivityApi.SeckillActivity
+      | MallSeckillActivityApi.SeckillActivity[],
+  ) => {
+    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>
diff --git a/apps/web-antd/src/views/member/level/index.vue b/apps/web-antd/src/views/member/level/index.vue
index b18b53caa..f3032f835 100644
--- a/apps/web-antd/src/views/member/level/index.vue
+++ b/apps/web-antd/src/views/member/level/index.vue
@@ -82,10 +82,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <DocAlert
-      title="会员等级、积分、签到"
-      url="https://doc.iocoder.cn/member/level/"
-    />
+    <template #doc>
+      <DocAlert
+        title="会员等级、积分、签到"
+        url="https://doc.iocoder.cn/member/level/"
+      />
+    </template>
 
     <FormModal @success="handleRefresh" />
     <Grid table-title="等级列表">
diff --git a/apps/web-antd/src/views/member/point/record/index.vue b/apps/web-antd/src/views/member/point/record/index.vue
index 921f0df6d..cbc15c614 100644
--- a/apps/web-antd/src/views/member/point/record/index.vue
+++ b/apps/web-antd/src/views/member/point/record/index.vue
@@ -42,10 +42,12 @@ const [Grid] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <DocAlert
-      title="会员等级、积分、签到"
-      url="https://doc.iocoder.cn/member/level/"
-    />
+    <template #doc>
+      <DocAlert
+        title="会员等级、积分、签到"
+        url="https://doc.iocoder.cn/member/level/"
+      />
+    </template>
 
     <Grid table-title="积分记录列表" />
   </Page>
diff --git a/apps/web-antd/src/views/member/user/detail/modules/favorite-list.vue b/apps/web-antd/src/views/member/user/detail/modules/favorite-list.vue
index f91a2c3e0..7fa7231c7 100644
--- a/apps/web-antd/src/views/member/user/detail/modules/favorite-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/favorite-list.vue
@@ -5,7 +5,7 @@ import type { MallFavoriteApi } from '#/api/mall/product/favorite';
 import { DICT_TYPE } from '@vben/constants';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as FavoriteApi from '#/api/mall/product/favorite';
+import { getFavoritePage } from '#/api/mall/product/favorite';
 
 const props = defineProps<{
   userId: number;
@@ -72,7 +72,7 @@ const [Grid] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await FavoriteApi.getFavoritePage({
+          return await getFavoritePage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             userId: props.userId,
diff --git a/apps/web-antd/src/views/mp/account/index.vue b/apps/web-antd/src/views/mp/account/index.vue
index cd3434189..27bd9b496 100644
--- a/apps/web-antd/src/views/mp/account/index.vue
+++ b/apps/web-antd/src/views/mp/account/index.vue
@@ -71,7 +71,7 @@ async function handleGenerateQrCode(row: MpAccountApi.Account) {
 /** 清空 API 配额 */
 async function handleCleanQuota(row: MpAccountApi.Account) {
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.processing', ['清空 API 配额']),
+    content: '正在清空 API 配额',
     duration: 0,
   });
   try {
diff --git a/apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue b/apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue
index d90e51a34..0b4cd6b11 100644
--- a/apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue
+++ b/apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Rule } from 'ant-design-vue/es/form';
 
-import type { Reply } from '#/views/mp/modules/wx-reply';
+import type { Reply } from '#/views/mp/components';
 
 import { computed, ref } from 'vue';
 
@@ -10,7 +10,7 @@ import { getDictOptions } from '@vben/hooks';
 
 import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
 
-import { WxReplySelect } from '#/views/mp/modules/wx-reply';
+import { WxReply } from '#/views/mp/components';
 
 import { MsgType } from './types';
 
@@ -131,7 +131,7 @@ defineExpose({
         />
       </FormItem>
       <FormItem label="回复消息">
-        <WxReplySelect v-model="reply" />
+        <WxReply v-model="reply" />
       </FormItem>
     </Form>
   </div>
diff --git a/apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue b/apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue
index 5948a91cc..d17873042 100644
--- a/apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue
+++ b/apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
-import { WxMusic } from '#/views/mp/modules/wx-music';
-import { WxNews } from '#/views/mp/modules/wx-news';
-import { WxVideoPlayer } from '#/views/mp/modules/wx-video-play';
-import { WxVoicePlayer } from '#/views/mp/modules/wx-voice-play';
+import {
+  WxMusic,
+  WxNews,
+  WxVideoPlayer,
+  WxVoicePlayer,
+} from '#/views/mp/components';
 // TODO @hw：迁移到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
 defineOptions({ name: 'ReplyContentCell' });
 
diff --git a/apps/web-antd/src/views/mp/autoReply/data.ts b/apps/web-antd/src/views/mp/autoReply/data.ts
index e3cbef345..727e50de7 100644
--- a/apps/web-antd/src/views/mp/autoReply/data.ts
+++ b/apps/web-antd/src/views/mp/autoReply/data.ts
@@ -5,7 +5,7 @@ import { markRaw } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 
-import { WxAccountSelect } from '#/views/mp/modules/wx-account-select';
+import { WxAccountSelect } from '#/views/mp/components';
 
 import { MsgType } from './components/types';
 
diff --git a/apps/web-antd/src/views/mp/autoReply/index.vue b/apps/web-antd/src/views/mp/autoReply/index.vue
index 504f79dd7..05c531d86 100644
--- a/apps/web-antd/src/views/mp/autoReply/index.vue
+++ b/apps/web-antd/src/views/mp/autoReply/index.vue
@@ -3,19 +3,17 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { computed, nextTick, onMounted, ref } from 'vue';
 
-import {
-  confirm,
-  ContentWrap,
-  DocAlert,
-  Page,
-  useVbenModal,
-} from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import { message, Row, Tabs } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import {
+  deleteAutoReply,
+  getAutoReply,
+  getAutoReplyPage,
+} from '#/api/mp/autoReply';
 import { $t } from '#/locales';
 
 import ReplyContentCell from './components/ReplyTable.vue';
@@ -25,10 +23,17 @@ import Form from './modules/form.vue';
 
 defineOptions({ name: 'MpAutoReply' });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query().then(() => {
+    updateTableDataLength();
+  });
+}
+
 const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
 
 /** 切换回复类型 */
-async function onTabChange(tabName: string) {
+async function onTabChange(tabName: any) {
   msgType.value = tabName;
   await nextTick();
   // 更新 columns
@@ -58,7 +63,7 @@ async function handleCreate() {
 
 /** 修改按钮操作 */
 async function handleEdit(row: any) {
-  const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
+  const data = (await getAutoReply(row.id)) as any;
   formModalApi
     .setData({
       isCreating: false,
@@ -76,7 +81,7 @@ async function handleDelete(row: any) {
     duration: 0,
   });
   try {
-    await MpAutoReplyApi.deleteAutoReply(row.id);
+    await deleteAutoReply(row.id);
     message.success('删除成功');
     await gridApi.query();
     // 查询完成后更新数据长度
@@ -98,12 +103,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
   },
   gridOptions: {
     columns: useGridColumns(Number(msgType.value) as MsgType),
-    height: 'calc(100vh - 300px)',
+    height: 'auto',
     keepSource: true,
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await MpAutoReplyApi.getAutoReplyPage({
+          return await getAutoReplyPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             type: Number(msgType.value) as MsgType,
@@ -171,91 +176,83 @@ onMounted(async () => {
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
+    <template #doc>
+      <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
+    </template>
 
-    <!-- tab 切换 -->
-    <!-- TODO @hw：貌似 tabs 里面套 table 的样式在 vben 里有点丑，要不我们按照 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/trade/afterSale/index.vue：1）第一层是公众号的选择；2）第二层是 tab；3）第三层是 table -->
-    <ContentWrap>
-      <Tabs
-        v-model:active-key="msgType"
-        @change="(activeKey) => onTabChange(activeKey as string)"
-      >
-        <!-- tab 项 -->
-        <Tabs.TabPane :key="String(MsgType.Follow)">
-          <template #tab>
-            <Row align="middle">
-              <IconifyIcon icon="ep:star" class="mr-2px" /> 关注时回复
-            </Row>
-          </template>
-        </Tabs.TabPane>
-        <Tabs.TabPane :key="String(MsgType.Message)">
-          <template #tab>
-            <Row align="middle">
-              <IconifyIcon icon="ep:chat-line-round" class="mr-2px" /> 消息回复
-            </Row>
-          </template>
-        </Tabs.TabPane>
-        <Tabs.TabPane :key="String(MsgType.Keyword)">
-          <template #tab>
-            <Row align="middle">
-              <IconifyIcon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
-            </Row>
-          </template>
-        </Tabs.TabPane>
-      </Tabs>
-      <!-- 列表 -->
-      <FormModal
-        @success="
-          () => {
-            gridApi.query().then(() => {
-              updateTableDataLength();
-            });
-          }
-        "
-      />
-      <Grid table-title="自动回复列表">
-        <template #toolbar-tools>
-          <TableAction
-            v-if="showCreateButton"
-            :actions="[
-              {
-                label: $t('ui.actionTitle.create', ['自动回复']),
-                type: 'primary',
-                icon: ACTION_ICON.ADD,
-                auth: ['mp:auto-reply:create'],
-                onClick: handleCreate,
+    <FormModal @success="handleRefresh" />
+
+    <Grid>
+      <template #toolbar-actions>
+        <!-- tab 切换 -->
+        <Tabs v-model:active-key="msgType" class="w-full" @change="onTabChange">
+          <!-- tab 项 -->
+          <Tabs.TabPane :key="String(MsgType.Follow)">
+            <template #tab>
+              <Row align="middle">
+                <IconifyIcon icon="lucide:star" class="mr-2px" /> 关注时回复
+              </Row>
+            </template>
+          </Tabs.TabPane>
+          <Tabs.TabPane :key="String(MsgType.Message)">
+            <template #tab>
+              <Row align="middle">
+                <IconifyIcon icon="lucide:message-circle" class="mr-2px" />
+                消息回复
+              </Row>
+            </template>
+          </Tabs.TabPane>
+          <Tabs.TabPane :key="String(MsgType.Keyword)">
+            <template #tab>
+              <Row align="middle">
+                <IconifyIcon icon="lucide:newspaper" class="mr-2px" />
+                关键词回复
+              </Row>
+            </template>
+          </Tabs.TabPane>
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          v-if="showCreateButton"
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['自动回复']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mp:auto-reply:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #replyContent="{ row }">
+        <ReplyContentCell :row="row" />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:auto-reply:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:auto-reply:delete'],
+              popConfirm: {
+                title: '是否确认删除此数据?',
+                confirm: handleDelete.bind(null, row),
               },
-            ]"
-          />
-        </template>
-        <template #replyContent="{ row }">
-          <ReplyContentCell :row="row" />
-        </template>
-        <template #actions="{ row }">
-          <TableAction
-            :actions="[
-              {
-                label: $t('common.edit'),
-                type: 'link',
-                icon: ACTION_ICON.EDIT,
-                auth: ['mp:auto-reply:update'],
-                onClick: handleEdit.bind(null, row),
-              },
-              {
-                label: $t('common.delete'),
-                type: 'link',
-                danger: true,
-                icon: ACTION_ICON.DELETE,
-                auth: ['mp:auto-reply:delete'],
-                popConfirm: {
-                  title: '是否确认删除此数据?',
-                  confirm: handleDelete.bind(null, row),
-                },
-              },
-            ]"
-          />
-        </template>
-      </Grid>
-    </ContentWrap>
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/mp/autoReply/modules/form.vue b/apps/web-antd/src/views/mp/autoReply/modules/form.vue
index 2e2aee192..38d5fa386 100644
--- a/apps/web-antd/src/views/mp/autoReply/modules/form.vue
+++ b/apps/web-antd/src/views/mp/autoReply/modules/form.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Reply } from '#/views/mp/modules/wx-reply';
+import type { Reply } from '#/views/mp/components';
 
 import { computed, ref } from 'vue';
 
@@ -9,11 +9,10 @@ import { message } from 'ant-design-vue';
 
 import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
 import { $t } from '#/locales';
-import { ReplyType } from '#/views/mp/modules/wx-reply/types';
+import { ReplyType } from '#/views/mp/components';
 
 import ReplyForm from '../components/ReplyForm.vue';
 import { MsgType } from '../components/types';
-import Form from '#/views/system/user/modules/form.vue';
 
 const emit = defineEmits(['success']);
 
diff --git a/apps/web-antd/src/views/mp/components/constants.ts b/apps/web-antd/src/views/mp/components/constants.ts
new file mode 100644
index 000000000..c129d61f0
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/constants.ts
@@ -0,0 +1,32 @@
+export enum ReplyType {
+  Image = 'image',
+  Music = 'music',
+  News = 'news',
+  Text = 'text',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+export enum NewsType {
+  Draft = '2',
+  Published = '1',
+}
+
+export enum MaterialType {
+  Image = 'image',
+  News = 'news',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+export enum MsgType {
+  Event = 'event',
+  Image = 'image',
+  Link = 'link',
+  Location = 'location',
+  Music = 'music',
+  News = 'news',
+  Text = 'text',
+  Video = 'video',
+  Voice = 'voice',
+}
diff --git a/apps/web-antd/src/views/mp/components/index.ts b/apps/web-antd/src/views/mp/components/index.ts
new file mode 100644
index 000000000..a2af7a046
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/index.ts
@@ -0,0 +1,11 @@
+export * from './constants';
+
+export * from './wx-account-select';
+export * from './wx-location';
+export * from './wx-material-select';
+export * from './wx-msg';
+export * from './wx-music';
+export * from './wx-news';
+export * from './wx-reply';
+export * from './wx-video-play';
+export * from './wx-voice-play';
diff --git a/apps/web-antd/src/views/mp/components/wx-account-select/account-select.vue b/apps/web-antd/src/views/mp/components/wx-account-select/account-select.vue
new file mode 100644
index 000000000..bb327270d
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-account-select/account-select.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { SelectValue } from 'ant-design-vue/es/select';
+
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { message, Select } from 'ant-design-vue';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+defineOptions({ name: 'WxAccountSelect' });
+
+const emit = defineEmits<{
+  (e: 'change', id: number, name: string): void;
+}>();
+
+const { push } = useRouter();
+
+const account = ref<MpAccountApi.Account>({
+  id: -1,
+  name: '',
+}); // 当前选中的公众号
+const accountList = ref<MpAccountApi.Account[]>([]); // 公众号列表
+
+/** 查询公众号列表 */
+async function handleQuery() {
+  accountList.value = await getSimpleAccountList();
+  if (accountList.value.length === 0) {
+    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
+    await push({ name: 'MpAccount' });
+    return;
+  }
+
+  // 默认选中第一个，如无数据则不执行
+  const first = accountList.value[0];
+  if (first) {
+    account.value.id = first.id;
+    account.value.name = first.name;
+    emit('change', account.value.id, account.value.name);
+  }
+}
+
+/** 切换选中公众号 */
+function onChanged(id: SelectValue) {
+  const found = accountList.value.find((v) => v.id === id);
+  if (found) {
+    account.value.name = found.name;
+    emit('change', account.value.id, account.value.name);
+  }
+}
+
+/** 初始化 */
+onMounted(handleQuery);
+</script>
+
+<template>
+  <Select
+    v-model:value="account.id"
+    placeholder="请选择公众号"
+    class="!w-[240px]"
+    @change="onChanged"
+  >
+    <Select.Option v-for="item in accountList" :key="item.id" :value="item.id">
+      {{ item.name }}
+    </Select.Option>
+  </Select>
+</template>
diff --git a/apps/web-antd/src/views/mp/components/wx-account-select/index.ts b/apps/web-antd/src/views/mp/components/wx-account-select/index.ts
new file mode 100644
index 000000000..9792c0b8a
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-account-select/index.ts
@@ -0,0 +1 @@
+export { default as WxAccountSelect } from './account-select.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-location/index.ts b/apps/web-antd/src/views/mp/components/wx-location/index.ts
similarity index 70%
rename from apps/web-antd/src/views/mp/modules/wx-location/index.ts
rename to apps/web-antd/src/views/mp/components/wx-location/index.ts
index 029a666a9..c4d525c22 100644
--- a/apps/web-antd/src/views/mp/modules/wx-location/index.ts
+++ b/apps/web-antd/src/views/mp/components/wx-location/index.ts
@@ -1 +1,2 @@
+export * from './types';
 export { default as WxLocation } from './wx-location.vue';
diff --git a/apps/web-antd/src/views/mp/components/wx-location/types.ts b/apps/web-antd/src/views/mp/components/wx-location/types.ts
new file mode 100644
index 000000000..9566c2a6c
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-location/types.ts
@@ -0,0 +1,6 @@
+export interface WxLocationProps {
+  label: string;
+  locationX: number;
+  locationY: number;
+  qqMapKey?: string;
+}
diff --git a/apps/web-antd/src/views/mp/components/wx-location/wx-location.vue b/apps/web-antd/src/views/mp/components/wx-location/wx-location.vue
new file mode 100644
index 000000000..ac0c4affe
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-location/wx-location.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import type { WxLocationProps } from './types';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Col, Row } from 'ant-design-vue';
+
+defineOptions({ name: 'WxLocation' });
+
+// TODO @dylan：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
+const props = withDefaults(defineProps<WxLocationProps>(), {
+  qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
+});
+
+const mapUrl = computed(() => {
+  return `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${props.locationY}&pointy=${props.locationX}&name=${props.label}&ref=yudao`;
+});
+
+const mapImageUrl = computed(() => {
+  return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${props.qqMapKey}&size=250*180`;
+});
+
+defineExpose({
+  locationX: props.locationX,
+  locationY: props.locationY,
+  label: props.label,
+  qqMapKey: props.qqMapKey,
+});
+</script>
+
+<template>
+  <!-- 微信消息 - 定位 -->
+  <div>
+    <a :href="mapUrl" target="_blank" class="text-primary">
+      <Col>
+        <Row>
+          <img :src="mapImageUrl" alt="地图位置" />
+        </Row>
+        <Row class="mt-2">
+          <IconifyIcon icon="lucide:map-pin" class="mr-1" />
+          {{ label }}
+        </Row>
+      </Col>
+    </a>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-material-select/index.ts b/apps/web-antd/src/views/mp/components/wx-material-select/index.ts
similarity index 73%
rename from apps/web-antd/src/views/mp/modules/wx-material-select/index.ts
rename to apps/web-antd/src/views/mp/components/wx-material-select/index.ts
index 27cf66886..e3d9b109c 100644
--- a/apps/web-antd/src/views/mp/modules/wx-material-select/index.ts
+++ b/apps/web-antd/src/views/mp/components/wx-material-select/index.ts
@@ -1,3 +1 @@
-export * from './types';
-
 export { default as WxMaterialSelect } from './wx-material-select.vue';
diff --git a/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue b/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
new file mode 100644
index 000000000..dee3c82c7
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
@@ -0,0 +1,446 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { reactive, ref, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Pagination, Row, Spin } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDraftPage } from '#/api/mp/draft';
+import { getFreePublishPage } from '#/api/mp/freePublish';
+import { getMaterialPage } from '#/api/mp/material';
+import { WxNews, WxVideoPlayer, WxVoicePlayer } from '#/views/mp/components';
+
+import { NewsType } from '../constants';
+
+defineOptions({ name: 'WxMaterialSelect' });
+
+const props = withDefaults(
+  defineProps<{
+    accountId: number;
+    newsType?: NewsType;
+    type: string;
+  }>(),
+  {
+    newsType: NewsType.Published,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'selectMaterial', item: any): void;
+}>();
+
+const loading = ref(false); // 遮罩层
+const total = ref(0); // 总条数
+const list = ref<any[]>([]); // 数据列表
+const queryParams = reactive({
+  accountId: props.accountId,
+  pageNo: 1,
+  pageSize: 10,
+}); // 查询参数
+
+const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
+  // TODO @dylan：any 有 linter 告警；看看别的模块哈
+  {
+    field: 'mediaId',
+    title: '编号',
+    align: 'center',
+    minWidth: 160,
+  },
+  {
+    field: 'name',
+    title: '文件名',
+    minWidth: 200,
+  },
+  {
+    field: 'voice',
+    title: '语音',
+    minWidth: 200,
+    align: 'center',
+    slots: { default: 'voice' },
+  },
+  {
+    field: 'createTime',
+    title: '上传时间',
+    width: 180,
+    formatter: 'formatDateTime',
+  },
+  {
+    title: '操作',
+    width: 140,
+    fixed: 'right',
+    align: 'center',
+    slots: { default: 'actions' },
+  },
+];
+
+const videoGridColumns: VxeTableGridOptions<any>['columns'] = [
+  // TODO @dylan：any 有 linter 告警；看看别的模块哈
+  {
+    field: 'mediaId',
+    title: '编号',
+    minWidth: 160,
+  },
+  {
+    field: 'name',
+    title: '文件名',
+    minWidth: 200,
+  },
+  {
+    field: 'title',
+    title: '标题',
+    minWidth: 200,
+  },
+  {
+    field: 'introduction',
+    title: '介绍',
+    minWidth: 220,
+  },
+  {
+    field: 'video',
+    title: '视频',
+    minWidth: 220,
+    align: 'center',
+    slots: { default: 'video' },
+  },
+  {
+    field: 'createTime',
+    title: '上传时间',
+    width: 180,
+    formatter: 'formatDateTime',
+  },
+  {
+    title: '操作',
+    width: 140,
+    fixed: 'right',
+    align: 'center',
+    slots: { default: 'actions' },
+  },
+];
+
+const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: voiceGridColumns,
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? queryParams.accountId;
+          // TODO @dylan 这里简化成 !finalAccountId 是不是可以哈。
+          if (finalAccountId === undefined || finalAccountId === null) {
+            return { list: [], total: 0 };
+          }
+          // TODO @dylan：不要带 MpMaterialApi；
+          return await getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: finalAccountId,
+            type: 'voice',
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<any>, // TODO @dylan：这里有 linter 告警；看看别的模块哈
+});
+
+const [VideoGrid, videoGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: videoGridColumns,
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? queryParams.accountId;
+          if (finalAccountId === undefined || finalAccountId === null) {
+            return { list: [], total: 0 };
+          }
+          return await getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: finalAccountId,
+            type: 'video',
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+function selectMaterialFun(item: any) {
+  emit('selectMaterial', item);
+}
+
+async function getMaterialPageFun() {
+  const data = await getMaterialPage({
+    ...queryParams,
+    type: props.type,
+  });
+  list.value = data.list;
+  total.value = data.total;
+}
+
+async function getFreePublishPageFun() {
+  const data = await getFreePublishPage(queryParams);
+  data.list.forEach((item: any) => {
+    const articles = item.content.newsItem;
+    articles.forEach((article: any) => {
+      article.picUrl = article.thumbUrl;
+    });
+  });
+  list.value = data.list;
+  total.value = data.total;
+}
+
+async function getDraftPageFun() {
+  const data = await getDraftPage(queryParams);
+  data.list.forEach((draft: any) => {
+    const articles = draft.content.newsItem;
+    articles.forEach((article: any) => {
+      article.picUrl = article.thumbUrl;
+    });
+  });
+  list.value = data.list;
+  total.value = data.total;
+}
+
+async function getPage() {
+  if (props.type === 'voice') {
+    await voiceGridApi.reload({ accountId: queryParams.accountId });
+    return;
+  }
+  if (props.type === 'video') {
+    await videoGridApi.reload({ accountId: queryParams.accountId });
+    return;
+  }
+
+  loading.value = true;
+  try {
+    if (props.type === 'news' && props.newsType === NewsType.Published) {
+      await getFreePublishPageFun();
+    } else if (props.type === 'news' && props.newsType === NewsType.Draft) {
+      await getDraftPageFun();
+    } else {
+      await getMaterialPageFun();
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => props.accountId,
+  (accountId) => {
+    queryParams.accountId = accountId;
+    queryParams.pageNo = 1;
+    getPage();
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.type,
+  () => {
+    queryParams.pageNo = 1;
+    getPage();
+  },
+);
+
+watch(
+  () => props.newsType,
+  () => {
+    if (props.type === 'news') {
+      queryParams.pageNo = 1;
+      getPage();
+    }
+  },
+);
+</script>
+
+<template>
+  <Page :bordered="false" class="pb-8">
+    <!-- 类型：image -->
+    <!-- TODO @dylan：看看图片的小卡片，是不是可以整齐点，类似微信公众号，图片的高度是一致的哈；https://mp.weixin.qq.com/cgi-bin/filepage?type=2&begin=0&count=12&token=1646383362&lang=zh_CN -->
+    <template v-if="props.type === 'image'">
+      <Spin :spinning="loading">
+        <div class="waterfall">
+          <div v-for="item in list" :key="item.mediaId" class="waterfall-item">
+            <img class="material-img" :src="item.url" alt="素材图片" />
+            <p class="item-name">{{ item.name }}</p>
+            <Row class="ope-row">
+              <Button type="primary" @click="selectMaterialFun(item)">
+                选择
+                <template #icon>
+                  <IconifyIcon icon="lucide:circle-check" />
+                </template>
+              </Button>
+            </Row>
+          </div>
+        </div>
+      </Spin>
+      <Pagination
+        v-model:current="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        :total="total"
+        class="mt-4"
+        @change="getPage"
+        @show-size-change="getPage"
+      />
+    </template>
+
+    <!-- 类型：voice -->
+    <template v-else-if="props.type === 'voice'">
+      <VoiceGrid>
+        <template #voice="{ row }">
+          <WxVoicePlayer :url="row.url" />
+        </template>
+        <template #actions="{ row }">
+          <Button type="link" @click="selectMaterialFun(row)">
+            选择
+            <template #icon>
+              <IconifyIcon icon="lucide:plus" />
+            </template>
+          </Button>
+        </template>
+      </VoiceGrid>
+    </template>
+
+    <!-- 类型：video -->
+    <template v-else-if="props.type === 'video'">
+      <VideoGrid>
+        <template #video="{ row }">
+          <WxVideoPlayer :url="row.url" />
+        </template>
+        <template #actions="{ row }">
+          <Button type="link" @click="selectMaterialFun(row)">
+            选择
+            <template #icon>
+              <IconifyIcon icon="lucide:circle-plus" />
+            </template>
+          </Button>
+        </template>
+      </VideoGrid>
+    </template>
+
+    <!-- 类型：news -->
+    <template v-else-if="props.type === 'news'">
+      <Spin :spinning="loading">
+        <div class="waterfall">
+          <div v-for="item in list" :key="item.mediaId" class="waterfall-item">
+            <div v-if="item.content && item.content.newsItem">
+              <WxNews :articles="item.content.newsItem" />
+              <Row class="ope-row">
+                <Button type="primary" @click="selectMaterialFun(item)">
+                  选择
+                  <template #icon>
+                    <IconifyIcon icon="lucide:circle-check" />
+                  </template>
+                </Button>
+              </Row>
+            </div>
+          </div>
+        </div>
+      </Spin>
+      <Pagination
+        v-model:current="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        :total="total"
+        class="mt-4"
+        @change="getPage"
+        @show-size-change="getPage"
+      />
+    </template>
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+@media (width >= 992px) and (width <= 1300px) {
+  .waterfall {
+    column-count: 3;
+  }
+
+  p {
+    color: red;
+  }
+}
+
+@media (width >= 768px) and (width <= 991px) {
+  .waterfall {
+    column-count: 2;
+  }
+
+  p {
+    color: orange;
+  }
+}
+
+@media (width <= 767px) {
+  .waterfall {
+    column-count: 1;
+  }
+}
+
+.waterfall {
+  column-count: 5;
+  column-gap: 10px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.waterfall-item {
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #eaeaea;
+  break-inside: avoid;
+}
+
+.material-img {
+  width: 100%;
+}
+
+p {
+  line-height: 30px;
+}
+
+.ope-row {
+  padding-top: 10px;
+  text-align: center;
+}
+
+.item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  text-align: center;
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/card.scss b/apps/web-antd/src/views/mp/components/wx-msg/card.scss
similarity index 96%
rename from apps/web-antd/src/views/mp/modules/wx-msg/card.scss
rename to apps/web-antd/src/views/mp/components/wx-msg/card.scss
index 58fde79fd..639f4ca8e 100644
--- a/apps/web-antd/src/views/mp/modules/wx-msg/card.scss
+++ b/apps/web-antd/src/views/mp/components/wx-msg/card.scss
@@ -1,4 +1,4 @@
-.avue-card {
+.mp-card {
   &__item {
     box-sizing: border-box;
     height: 200px;
@@ -99,18 +99,18 @@
 }
 
 /** joolun 额外加的 */
-.avue-comment__main {
+.mp-comment__main {
   flex: unset !important;
   margin: 0 8px !important;
   border-radius: 5px !important;
 }
 
-.avue-comment__header {
+.mp-comment__header {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
 }
 
-.avue-comment__body {
+.mp-comment__body {
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
 }
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/comment.scss b/apps/web-antd/src/views/mp/components/wx-msg/comment.scss
similarity index 98%
rename from apps/web-antd/src/views/mp/modules/wx-msg/comment.scss
rename to apps/web-antd/src/views/mp/components/wx-msg/comment.scss
index 219e2e5d4..98e137d4b 100644
--- a/apps/web-antd/src/views/mp/modules/wx-msg/comment.scss
+++ b/apps/web-antd/src/views/mp/components/wx-msg/comment.scss
@@ -1,5 +1,5 @@
 /* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
-.avue-comment {
+.mp-comment {
   display: flex;
   align-items: flex-start;
   margin-bottom: 30px;
@@ -7,7 +7,7 @@
   &--reverse {
     flex-direction: row-reverse;
 
-    .avue-comment__main {
+    .mp-comment__main {
       &::before,
       &::after {
         right: -8px;
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/index.ts b/apps/web-antd/src/views/mp/components/wx-msg/index.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/wx-msg/index.ts
rename to apps/web-antd/src/views/mp/components/wx-msg/index.ts
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue b/apps/web-antd/src/views/mp/components/wx-msg/msg-event.vue
similarity index 85%
rename from apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue
rename to apps/web-antd/src/views/mp/components/wx-msg/msg-event.vue
index 780e97d5c..24b039ebf 100644
--- a/apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/msg-event.vue
@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { Tag } from 'ant-design-vue';
 
-const props = defineProps<{
+defineOptions({ name: 'MsgEvent' });
+
+defineProps<{
   item: any;
 }>();
-
-const item = ref(props.item);
 </script>
 
 <template>
@@ -18,7 +16,6 @@ const item = ref(props.item);
     <div v-else-if="item.event === 'unsubscribe'">
       <Tag color="error">取消关注</Tag>
     </div>
-    <!-- @hw：看看能不能处理下 linter 报错哈； -->
     <div v-else-if="item.event === 'CLICK'">
       <Tag>点击菜单</Tag>
       【{{ item.eventKey }}】
@@ -47,9 +44,6 @@ const item = ref(props.item);
     <div v-else-if="item.event === 'location_select'">
       <Tag>选择地理位置</Tag>
     </div>
-    <div v-else-if="item.event === 'SCAN'">
-      <Tag>扫码</Tag>
-    </div>
     <div v-else>
       <Tag color="error">未知事件类型</Tag>
     </div>
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue b/apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
new file mode 100644
index 000000000..605c38103
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import type { User } from './types';
+
+import { preferences } from '@vben/preferences';
+import { formatDateTime } from '@vben/utils';
+
+import Msg from './msg.vue';
+
+defineOptions({ name: 'MsgList' });
+
+const props = defineProps<{
+  accountId: number;
+  list: any[];
+  user: User;
+}>();
+
+const SendFrom = {
+  MpBot: 2,
+  User: 1,
+} as const;
+
+function getAvatar(sendFrom: number) {
+  return sendFrom === SendFrom.User
+    ? props.user.avatar
+    : preferences.app.defaultAvatar;
+}
+
+function getNickname(sendFrom: number) {
+  return sendFrom === SendFrom.User ? props.user.nickname : '公众号';
+}
+</script>
+<template>
+  <div class="execution" v-for="item in props.list" :key="item.id">
+    <div
+      class="mp-comment"
+      :class="{ 'mp-comment--reverse': item.sendFrom === SendFrom.MpBot }"
+    >
+      <div class="avatar-div">
+        <img :src="getAvatar(item.sendFrom)" class="mp-comment__avatar" />
+        <div class="mp-comment__author">
+          {{ getNickname(item.sendFrom) }}
+        </div>
+      </div>
+      <div class="mp-comment__main">
+        <div class="mp-comment__header">
+          <div class="mp-comment__create_time">
+            {{ formatDateTime(item.createTime) }}
+          </div>
+        </div>
+        <div
+          class="mp-comment__body"
+          :style="
+            item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
+          "
+        >
+          <Msg :item="item" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
+
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+
+@import url('./comment.scss');
+@import url('./card.scss');
+
+.avatar-div {
+  width: 80px;
+  text-align: center;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/msg.vue b/apps/web-antd/src/views/mp/components/wx-msg/msg.vue
similarity index 58%
rename from apps/web-antd/src/views/mp/modules/wx-msg/msg.vue
rename to apps/web-antd/src/views/mp/components/wx-msg/msg.vue
index a46f81dd5..1649775c4 100644
--- a/apps/web-antd/src/views/mp/modules/wx-msg/msg.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/msg.vue
@@ -1,24 +1,22 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-
 import { IconifyIcon } from '@vben/icons';
 
-import { WxLocation } from '#/views/mp/modules/wx-location';
-import { WxMusic } from '#/views/mp/modules/wx-music';
-import { WxNews } from '#/views/mp/modules/wx-news';
-import { WxVideoPlayer } from '#/views/mp/modules/wx-video-play';
-import { WxVoicePlayer } from '#/views/mp/modules/wx-voice-play';
+import {
+  WxLocation,
+  WxMusic,
+  WxNews,
+  WxVideoPlayer,
+  WxVoicePlayer,
+} from '#/views/mp/components';
 
+import { MsgType } from '../constants';
 import MsgEvent from './msg-event.vue';
-import { MsgType } from './types';
 
 defineOptions({ name: 'Msg' });
 
-const props = defineProps<{
+defineProps<{
   item: any;
 }>();
-
-const item = ref<any>(props.item);
 </script>
 
 <template>
@@ -32,8 +30,8 @@ const item = ref<any>(props.item);
     </div>
 
     <div v-else-if="item.type === MsgType.Image">
-      <a target="_blank" :href="item.mediaUrl">
-        <img :src="item.mediaUrl" class="w-[100px]" />
+      <a :href="item.mediaUrl" target="_blank">
+        <img :src="item.mediaUrl" class="w-[100px]" alt="图片消息" />
       </a>
     </div>
 
@@ -44,20 +42,14 @@ const item = ref<any>(props.item);
       <WxVideoPlayer :url="item.mediaUrl" />
     </div>
 
-    <div v-else-if="item.type === MsgType.Link" class="flex-1">
-      <a target="_blank" :href="item.url">
-        <div
-          class="mb-3 text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]"
-        >
-          <IconifyIcon icon="lucide:link" />{{ item.title }}
+    <div v-else-if="item.type === MsgType.Link" class="flex flex-col gap-2">
+      <a :href="item.url" target="_blank" class="text-success no-underline">
+        <div class="flex items-center text-sm font-medium text-[#52c41a]">
+          <IconifyIcon icon="lucide:link" class="mr-1" />
+          {{ item.title }}
         </div>
       </a>
-      <div
-        class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
-        style="height: unset"
-      >
-        {{ item.description }}
-      </div>
+      <div class="text-xs text-[#666]">{{ item.description }}</div>
     </div>
 
     <div v-else-if="item.type === MsgType.Location">
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/types.ts b/apps/web-antd/src/views/mp/components/wx-msg/types.ts
new file mode 100644
index 000000000..c0f82a8d8
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-msg/types.ts
@@ -0,0 +1,5 @@
+export interface User {
+  accountId: number;
+  avatar: string;
+  nickname: string;
+}
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue b/apps/web-antd/src/views/mp/components/wx-msg/wx-msg.vue
similarity index 64%
rename from apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue
rename to apps/web-antd/src/views/mp/components/wx-msg/wx-msg.vue
index a08347caf..874d372fc 100644
--- a/apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/wx-msg.vue
@@ -1,72 +1,56 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  芋道源码：
-  ① 移除暂时用不到的 websocket
-  ② 代码优化，补充注释，提升阅读性
--->
 <script lang="ts" setup>
 import type { User } from './types';
 
-import type { Reply } from '#/views/mp/modules/wx-reply';
-
 import { nextTick, onMounted, reactive, ref, unref } from 'vue';
 
+import { preferences } from '@vben/preferences';
+
 import { Button, message, Spin } from 'ant-design-vue';
 
 import { getMessagePage, sendMessage } from '#/api/mp/message';
 import { getUser } from '#/api/mp/user';
-import profile from '#/assets/imgs/profile.jpg';
-import { ReplyType, WxReplySelect } from '#/views/mp/modules/wx-reply';
+import { WxReply } from '#/views/mp/components';
 
 import MsgList from './msg-list.vue';
 
 defineOptions({ name: 'WxMsg' });
 
-const props = defineProps({
-  userId: {
-    type: Number,
-    required: true,
-  },
-});
+const props = defineProps<{
+  userId: number;
+}>();
 
 const accountId = ref(-1); // 公众号ID，需要通过userId初始化
 const loading = ref(false); // 消息列表是否正在加载中
 const hasMore = ref(true); // 是否可以加载更多
 const list = ref<any[]>([]); // 消息列表
 const queryParams = reactive({
+  accountId,
   pageNo: 1, // 当前页数
   pageSize: 14, // 每页显示多少条
-  accountId,
 });
 
 const user: User = reactive({
-  nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
-  avatar: profile,
   accountId, // 公众号账号编号
+  avatar: preferences.app.defaultAvatar,
+  nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
 });
 
 // ========= 消息发送 =========
 const sendLoading = ref(false); // 发送消息是否加载中
-const reply = ref<Reply>({
-  type: ReplyType.Text,
+const reply = ref<any>({
   accountId: -1,
   articles: [],
+  type: 'text',
 }); // 微信发送消息
 
-const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null); // WxReplySelect组件ref，用于消息发送成功后清除内容
+const replySelectRef = ref<InstanceType<typeof WxReply> | null>(null); // WxReply组件ref，用于消息发送成功后清除内容
 const msgDivRef = ref<HTMLDivElement | null>(null); // 消息显示窗口ref，用于滚动到底部
 
 /** 完成加载 */
 onMounted(async () => {
   const data = await getUser(props.userId);
   user.nickname = data.nickname?.length > 0 ? data.nickname : user.nickname;
-  // API 返回的数据可能包含 headImageUrl，但类型定义中没有，使用类型断言
-  const userData = data as typeof data & { headImageUrl?: string };
-  user.avatar =
-    userData.headImageUrl && userData.headImageUrl.length > 0
-      ? userData.headImageUrl
-      : user.avatar;
+  user.avatar = data.avatar?.length > 0 ? data.avatar : user.avatar;
   accountId.value = data.accountId;
   reply.value.accountId = data.accountId;
 
@@ -80,7 +64,7 @@ async function sendMsg() {
   }
   // 公众号限制：客服消息，公众号只允许发送一条
   if (
-    reply.value.type === ReplyType.News &&
+    reply.value.type === 'news' &&
     reply.value.articles &&
     reply.value.articles.length > 1
   ) {
@@ -88,11 +72,9 @@ async function sendMsg() {
     message.success('图文消息条数限制在 1 条以内，已默认发送第一条');
   }
 
-  // 注意：sendMessage API 需要 openid，但这里传入的是 userId
-  // 这可能是后端 API 的特殊处理，使用类型断言绕过类型检查
   const data = await sendMessage({
-    userId: props.userId,
     ...reply.value,
+    userId: props.userId,
   } as any);
   sendLoading.value = false;
 
@@ -103,22 +85,20 @@ async function sendMsg() {
   replySelectRef.value?.clear();
 }
 
-/** 加载更多 */
 function loadMore() {
   queryParams.pageNo++;
   getPage(queryParams, null);
 }
 
-/** 获取分页数据 */
 async function getPage(page: any, params: any = null) {
   loading.value = true;
   const dataTemp = await getMessagePage(
     Object.assign(
       {
+        accountId: page.accountId,
         pageNo: page.pageNo,
         pageSize: page.pageSize,
         userId: props.userId,
-        accountId: page.accountId,
       },
       params,
     ),
@@ -148,7 +128,6 @@ async function getPage(page: any, params: any = null) {
   }
 }
 
-/** 刷新消息 */
 function refreshChange() {
   getPage(queryParams);
 }
@@ -163,35 +142,37 @@ async function scrollToBottom() {
 </script>
 
 <template>
-  <ContentWrap>
-    <Spin :spinning="loading">
-      <div class="bg-background ml-2 mr-2 h-12 overflow-auto" ref="msgDivRef">
-        <!-- 加载更多 -->
-        <div v-if="!loading">
-          <div
-            class="cursor-pointer py-5 text-center"
-            v-if="hasMore"
-            @click="loadMore"
-          >
-            <span class="text-foreground">点击加载更多</span>
-          </div>
-          <div class="py-5 text-center" v-if="!hasMore">
-            <span class="text-foreground">没有更多了</span>
-          </div>
+  <div class="flex h-full flex-col">
+    <div ref="msgDivRef" class="mx-2.5 flex-1 overflow-auto bg-[#eaeaea]">
+      <!-- 加载更多 -->
+      <Spin :spinning="loading" />
+      <div v-if="!loading">
+        <div
+          v-if="hasMore"
+          class="cursor-pointer rounded p-3 text-center text-sm text-[#409eff] transition-colors duration-300 hover:bg-[#f5f7fa]"
+          @click="loadMore"
+        >
+          <span>点击加载更多</span>
+        </div>
+        <div
+          v-else
+          class="cursor-not-allowed rounded p-3 text-center text-sm text-[#909399] hover:bg-transparent"
+        >
+          <span>没有更多了</span>
         </div>
-
-        <!-- 消息列表 -->
-        <MsgList :list="list" :account-id="accountId" :user="user" />
       </div>
-    </Spin>
 
-    <Spin :spinning="sendLoading">
-      <div class="p-[10px]">
+      <!-- 消息列表 -->
+      <MsgList :list="list" :account-id="accountId" :user="user" />
+    </div>
+
+    <div class="p-2.5">
+      <Spin :spinning="sendLoading">
         <WxReplySelect ref="replySelectRef" v-model="reply" />
         <Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
           发送(S)
         </Button>
-      </div>
-    </Spin>
-  </ContentWrap>
+      </Spin>
+    </div>
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-music/index.ts b/apps/web-antd/src/views/mp/components/wx-music/index.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/wx-music/index.ts
rename to apps/web-antd/src/views/mp/components/wx-music/index.ts
diff --git a/apps/web-antd/src/views/mp/components/wx-music/types.ts b/apps/web-antd/src/views/mp/components/wx-music/types.ts
new file mode 100644
index 000000000..5164f5319
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-music/types.ts
@@ -0,0 +1,7 @@
+export interface WxMusicProps {
+  title?: string;
+  description?: string;
+  musicUrl?: string;
+  hqMusicUrl?: string;
+  thumbMediaUrl: string;
+}
diff --git a/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue b/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
new file mode 100644
index 000000000..3c304afc3
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { WxMusicProps } from './types';
+
+import { computed } from 'vue';
+
+defineOptions({ name: 'WxMusic' });
+
+const props = withDefaults(defineProps<WxMusicProps>(), {
+  title: '',
+  description: '',
+  musicUrl: '',
+  hqMusicUrl: '',
+  thumbMediaUrl: '',
+});
+
+const href = computed(() => props.hqMusicUrl || props.musicUrl);
+
+defineExpose({
+  musicUrl: props.musicUrl,
+});
+</script>
+
+<template>
+  <!-- 微信消息 - 音乐 -->
+  <div>
+    <a :href="href" target="_blank" class="text-success no-underline">
+      <div class="music-card">
+        <div class="music-avatar">
+          <img :src="thumbMediaUrl" alt="音乐封面" />
+        </div>
+        <div class="music-detail">
+          <div class="music-title">{{ title }}</div>
+          <div class="music-description">{{ description }}</div>
+        </div>
+      </div>
+    </a>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+
+.music-card {
+  display: flex;
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 5px;
+}
+
+.music-avatar {
+  flex-shrink: 0;
+  width: 60px;
+  height: 60px;
+  margin-right: 12px;
+  overflow: hidden;
+  border-radius: 4px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.music-detail {
+  flex: 1;
+  overflow: hidden;
+}
+
+.music-title {
+  margin-bottom: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  white-space: nowrap;
+}
+
+.music-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: #666;
+  white-space: nowrap;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-news/index.ts b/apps/web-antd/src/views/mp/components/wx-news/index.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/wx-news/index.ts
rename to apps/web-antd/src/views/mp/components/wx-news/index.ts
diff --git a/apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue b/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
similarity index 81%
rename from apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue
rename to apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
index 0c8daa6ab..092425965 100644
--- a/apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue
+++ b/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
@@ -1,10 +1,3 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  【微信消息 - 图文】
-  芋道源码：
-  ① 代码优化，补充注释，提升阅读性
--->
 <script lang="ts" setup>
 import { Image } from 'ant-design-vue';
 
@@ -25,6 +18,7 @@ defineExpose({
 </script>
 
 <template>
+  <!-- 微信消息 - 图文 -->
   <div class="news-home">
     <div v-for="(article, index) in articles" :key="index" class="news-div">
       <!-- 头条 -->
@@ -32,10 +26,9 @@ defineExpose({
         <div class="news-main">
           <div class="news-content">
             <Image
-              :src="article.picUrl || article.thumbUrl"
-              class="material-img"
+              :src="article.picUrl"
               :preview="false"
-              style="width: 100%; height: 120px"
+              class="material-img"
             />
             <div class="news-content-title">
               <span>{{ article.title }}</span>
@@ -49,11 +42,7 @@ defineExpose({
           <div class="news-content-item">
             <div class="news-content-item-title">{{ article.title }}</div>
             <div class="news-content-item-img">
-              <img
-                :src="article.picUrl || article.thumbUrl"
-                class="material-img"
-                height="100%"
-              />
+              <img :src="article.picUrl" class="material-img" alt="文章图片" />
             </div>
           </div>
         </div>
@@ -63,7 +52,8 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-/** TODO @hw：tindwind 替代 */
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+
 .news-home {
   width: 100%;
   margin: auto;
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/index.ts b/apps/web-antd/src/views/mp/components/wx-reply/index.ts
new file mode 100644
index 000000000..d24ef72f3
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-reply/index.ts
@@ -0,0 +1,3 @@
+export * from './types';
+
+export { default as WxReply } from './wx-reply.vue';
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
new file mode 100644
index 000000000..a65001efa
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
@@ -0,0 +1,220 @@
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
+
+import { WxMaterialSelect } from '#/views/mp/components';
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+defineOptions({ name: 'TabImage' });
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+const accessStore = useAccessStore();
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
+
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const showDialog = ref(false);
+const fileList = ref([]);
+const uploadData = reactive({
+  accountId: reply.value.accountId,
+  introduction: '',
+  title: '',
+  type: 'image',
+});
+
+function beforeImageUpload(rawFile: UploadRawFile) {
+  return useBeforeUpload(UploadType.Image, 2)(rawFile);
+}
+
+/** 自定义上传请求 */
+async function customRequest(options: any) {
+  const { file, onSuccess, onError } = options;
+
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('accountId', String(uploadData.accountId));
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      method: 'POST',
+      headers: HEADERS,
+      body: formData,
+    });
+
+    const result = await response.json();
+
+    if (result.code === 0) {
+      // 清空上传时的各种数据
+      fileList.value = [];
+      uploadData.title = '';
+      uploadData.introduction = '';
+
+      // 上传好的文件，本质是个素材，所以可以进行选中
+      selectMaterial(result.data);
+      message.success('上传成功');
+      onSuccess(result, file);
+    } else {
+      message.error(result.msg || '上传出错');
+      onError(new Error(result.msg || '上传失败'));
+    }
+  } catch (error) {
+    message.error('上传失败，请重试');
+    onError(error);
+  }
+}
+
+function onDelete() {
+  reply.value.mediaId = null;
+  reply.value.url = null;
+  reply.value.name = null;
+}
+
+function selectMaterial(item: any) {
+  showDialog.value = false;
+  reply.value.mediaId = item.mediaId;
+  reply.value.url = item.url;
+  reply.value.name = item.name;
+}
+</script>
+
+<template>
+  <div>
+    <!-- 情况一：已经选择好素材、或者上传好图片 -->
+    <div v-if="reply.url" class="select-item">
+      <img class="material-img" :src="reply.url" alt="图片素材" />
+      <p v-if="reply.name" class="item-name">{{ reply.name }}</p>
+      <Row class="ope-row" justify="center">
+        <Button danger shape="circle" @click="onDelete">
+          <template #icon>
+            <IconifyIcon icon="lucide:trash-2" />
+          </template>
+        </Button>
+      </Row>
+    </div>
+
+    <!-- 情况二：未做完上述操作 -->
+    <Row v-else class="text-center" align="middle">
+      <!-- 选择素材 -->
+      <Col :span="12" class="col-select">
+        <Button type="primary" @click="showDialog = true">
+          素材库选择
+          <template #icon>
+            <IconifyIcon icon="lucide:circle-check" />
+          </template>
+        </Button>
+        <Modal
+          v-model:open="showDialog"
+          title="选择图片"
+          :width="1200"
+          :footer="null"
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="image"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </Modal>
+      </Col>
+
+      <!-- 文件上传 -->
+      <Col :span="12" class="col-add">
+        <Upload
+          :custom-request="customRequest"
+          :multiple="true"
+          :max-count="1"
+          :file-list="fileList"
+          :before-upload="beforeImageUpload"
+          :show-upload-list="false"
+        >
+          <Button type="primary">
+            上传图片
+            <template #icon>
+              <IconifyIcon icon="lucide:upload" />
+            </template>
+          </Button>
+        </Upload>
+        <div class="upload-tip">
+          支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+.select-item {
+  width: 280px;
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+}
+
+.material-img {
+  width: 100%;
+}
+
+.item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.ope-row {
+  padding-top: 10px;
+  text-align: center;
+}
+
+.col-select,
+.col-add {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 160px;
+  padding: 50px 0;
+  border: 1px solid rgb(234 234 234);
+}
+
+.col-select {
+  width: 49.5%;
+}
+
+.col-add {
+  float: right;
+  width: 49.5%;
+}
+
+.upload-tip {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 18px;
+  color: #666;
+  text-align: center;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-music.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-music.vue
new file mode 100644
index 000000000..b887c1d26
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-music.vue
@@ -0,0 +1,222 @@
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import {
+  Button,
+  Col,
+  Input,
+  message,
+  Modal,
+  Row,
+  Upload,
+} from 'ant-design-vue';
+
+import { WxMaterialSelect } from '#/views/mp/components';
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+defineOptions({ name: 'TabMusic' });
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+const accessStore = useAccessStore();
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
+
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const showDialog = ref(false);
+const fileList = ref([]);
+const uploadData = reactive({
+  accountId: reply.value.accountId,
+  introduction: '',
+  title: '',
+  type: 'thumb', // 音乐类型为thumb
+});
+
+function beforeImageUpload(rawFile: UploadRawFile) {
+  return useBeforeUpload(UploadType.Image, 2)(rawFile);
+}
+
+/** 自定义上传请求 */
+async function customRequest(options: any) {
+  const { file, onSuccess, onError } = options;
+
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('accountId', String(uploadData.accountId));
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      method: 'POST',
+      headers: HEADERS,
+      body: formData,
+    });
+
+    const result = await response.json();
+
+    if (result.code === 0) {
+      // 清空上传时的各种数据
+      fileList.value = [];
+      uploadData.title = '';
+      uploadData.introduction = '';
+
+      // 上传好的文件，本质是个素材，所以可以进行选中
+      selectMaterial(result.data);
+      message.success('上传成功');
+      onSuccess(result, file);
+    } else {
+      message.error(result.msg || '上传出错');
+      onError(new Error(result.msg || '上传失败'));
+    }
+  } catch (error) {
+    message.error('上传失败，请重试');
+    onError(error);
+  }
+}
+
+function selectMaterial(item: any) {
+  showDialog.value = false;
+  reply.value.thumbMediaId = item.mediaId;
+  reply.value.thumbMediaUrl = item.url;
+}
+</script>
+
+<template>
+  <div>
+    <Row align="middle" justify="center">
+      <Col :span="6">
+        <div class="thumb-container">
+          <div class="thumb-preview">
+            <img
+              v-if="reply.thumbMediaUrl"
+              :src="reply.thumbMediaUrl"
+              alt="音乐封面"
+              class="thumb-img"
+            />
+            <IconifyIcon
+              v-else
+              icon="lucide:plus"
+              :size="40"
+              class="text-gray-400"
+            />
+          </div>
+          <div class="thumb-actions">
+            <Upload
+              :custom-request="customRequest"
+              :multiple="true"
+              :max-count="1"
+              :file-list="fileList"
+              :before-upload="beforeImageUpload"
+              :show-upload-list="false"
+            >
+              <Button type="link">本地上传</Button>
+            </Upload>
+            <Button type="link" class="ml-2" @click="showDialog = true">
+              素材库选择
+            </Button>
+          </div>
+        </div>
+        <!-- TODO @dylan：这里应该不是图片哇？ -->
+        <Modal
+          v-model:open="showDialog"
+          title="选择图片"
+          :width="1200"
+          :footer="null"
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="image"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </Modal>
+      </Col>
+      <Col :span="18">
+        <!-- TODO @dylan：input 两个之间的间距可以调整下。现在和左侧的图片，距离有点远了。 -->
+        <div class="input-group">
+          <Input
+            :value="reply.title || undefined"
+            placeholder="请输入标题"
+            class="mb-5"
+            @update:value="(val) => (reply.title = val || null)"
+          />
+          <Input
+            :value="reply.description || undefined"
+            placeholder="请输入描述"
+            @update:value="(val) => (reply.description = val || null)"
+          />
+        </div>
+      </Col>
+    </Row>
+    <div class="mt-5">
+      <Input
+        :value="reply.musicUrl || undefined"
+        placeholder="请输入音乐链接"
+        class="mb-5"
+        @update:value="(val) => (reply.musicUrl = val || null)"
+      />
+      <Input
+        :value="reply.hqMusicUrl || undefined"
+        placeholder="请输入高质量音乐链接"
+        @update:value="(val) => (reply.hqMusicUrl = val || null)"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+.thumb-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+
+.thumb-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumb-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-news.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue
similarity index 66%
rename from apps/web-antd/src/views/mp/modules/wx-reply/tab-news.vue
rename to apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue
index fbc4eed64..00e59a02b 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-news.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue
@@ -7,18 +7,21 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Button, Col, Modal, Row } from 'ant-design-vue';
 
-import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
-import { WxNews } from '#/views/mp/modules/wx-news';
+import { WxMaterialSelect, WxNews } from '#/views/mp/components';
 
-import { NewsType } from './types';
+import { NewsType } from '../constants';
+
+defineOptions({ name: 'TabNews' });
 
 const props = defineProps<{
   modelValue: Reply;
   newsType: NewsType;
 }>();
+
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
+
 const reply = computed<Reply>({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
@@ -26,13 +29,11 @@ const reply = computed<Reply>({
 
 const showDialog = ref(false);
 
-/** 选择素材 */
 function selectMaterial(item: any) {
   showDialog.value = false;
   reply.value.articles = item.content.newsItem;
 }
 
-/** 删除图文 */
 function onDelete() {
   reply.value.articles = [];
 }
@@ -42,18 +43,21 @@ function onDelete() {
   <div>
     <Row>
       <div
-        class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
         v-if="reply.articles && reply.articles.length > 0"
+        class="select-item"
       >
         <WxNews :articles="reply.articles" />
-        <Col class="pt-[10px] text-center">
-          <Button type="primary" danger shape="circle" @click="onDelete">
-            <IconifyIcon icon="ep:delete" />
+        <Col class="ope-row">
+          <Button danger shape="circle" @click="onDelete">
+            <template #icon>
+              <IconifyIcon icon="lucide:trash-2" />
+            </template>
           </Button>
         </Col>
       </div>
+
       <!-- 选择素材 -->
-      <Col :span="24" v-if="!reply.content">
+      <Col v-if="!reply.content" :span="24">
         <Row class="text-center" align="middle">
           <Col :span="24">
             <Button type="primary" @click="showDialog = true">
@@ -62,15 +66,19 @@ function onDelete() {
                   ? '选择已发布图文'
                   : '选择草稿箱图文'
               }}
-              <IconifyIcon icon="ep:circle-check" />
+              <template #icon>
+                <IconifyIcon icon="lucide:circle-check" />
+              </template>
             </Button>
           </Col>
         </Row>
       </Col>
+
       <Modal
-        title="选择图文"
         v-model:open="showDialog"
-        width="90%"
+        title="选择图文"
+        :width="1200"
+        :footer="null"
         destroy-on-close
       >
         <WxMaterialSelect
@@ -83,3 +91,18 @@ function onDelete() {
     </Row>
   </div>
 </template>
+
+<style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+.select-item {
+  width: 280px;
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+}
+
+.ope-row {
+  padding-top: 10px;
+  text-align: center;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-text.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-text.vue
similarity index 52%
rename from apps/web-antd/src/views/mp/modules/wx-reply/tab-text.vue
rename to apps/web-antd/src/views/mp/components/wx-reply/tab-text.vue
index cb96dbf60..914d943a6 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-text.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-text.vue
@@ -1,31 +1,26 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import { Input } from 'ant-design-vue';
+import { Textarea } from 'ant-design-vue';
 
 const props = defineProps<{
   modelValue?: null | string;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', v: null | string): void;
   (e: 'input', v: null | string): void;
+  (e: 'update:modelValue', v: null | string): void;
 }>();
 
 const content = computed({
-  get: () => props.modelValue,
-  set: (val: null | string) => {
-    emit('update:modelValue', val);
-    emit('input', val);
+  get: () => props.modelValue ?? '',
+  set: (val: string) => {
+    emit('update:modelValue', val || null);
+    emit('input', val || null);
   },
 });
 </script>
 
 <template>
-  <Input.TextArea
-    :rows="5"
-    placeholder="请输入内容"
-    v-model:value="content as string"
-    class="w-full"
-  />
+  <Textarea v-model:value="content" :rows="5" placeholder="请输入内容" />
 </template>
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-video.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-video.vue
new file mode 100644
index 000000000..0e4eea1c5
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-video.vue
@@ -0,0 +1,192 @@
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import {
+  Button,
+  Col,
+  Input,
+  message,
+  Modal,
+  Row,
+  Upload,
+} from 'ant-design-vue';
+
+import { WxMaterialSelect, WxVideoPlayer } from '#/views/mp/components';
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+defineOptions({ name: 'TabVideo' });
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+const accessStore = useAccessStore();
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
+
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const showDialog = ref(false);
+const fileList = ref([]);
+const uploadData = reactive({
+  accountId: reply.value.accountId,
+  introduction: '',
+  title: '',
+  type: 'video',
+});
+
+function beforeVideoUpload(rawFile: UploadRawFile) {
+  return useBeforeUpload(UploadType.Video, 10)(rawFile);
+}
+
+/** 自定义上传请求 */
+async function customRequest(options: any) {
+  const { file, onSuccess, onError } = options;
+
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('accountId', String(uploadData.accountId));
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      method: 'POST',
+      headers: HEADERS,
+      body: formData,
+    });
+
+    const result = await response.json();
+
+    if (result.code === 0) {
+      // 清空上传时的各种数据
+      fileList.value = [];
+      uploadData.title = '';
+      uploadData.introduction = '';
+
+      // 选择素材
+      selectMaterial(result.data);
+      message.success('上传成功');
+      onSuccess(result, file);
+    } else {
+      message.error(result.msg || '上传出错');
+      onError(new Error(result.msg || '上传失败'));
+    }
+  } catch (error) {
+    message.error('上传失败，请重试');
+    onError(error);
+  }
+}
+
+/** 选择素材后设置 */
+function selectMaterial(item: any) {
+  showDialog.value = false;
+
+  reply.value.mediaId = item.mediaId;
+  reply.value.url = item.url;
+  reply.value.name = item.name;
+
+  // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
+  if (item.title) {
+    reply.value.title = item.title || '';
+  }
+  if (item.introduction) {
+    reply.value.description = item.introduction || '';
+  }
+}
+</script>
+
+<template>
+  <div>
+    <Row :gutter="[0, 16]">
+      <Col :span="24">
+        <Input
+          :value="reply.title || undefined"
+          placeholder="请输入标题"
+          @update:value="(val) => (reply.title = val || null)"
+        />
+      </Col>
+      <Col :span="24">
+        <Input
+          :value="reply.description || undefined"
+          placeholder="请输入描述"
+          @update:value="(val) => (reply.description = val || null)"
+        />
+      </Col>
+      <Col :span="24">
+        <Row class="ope-row" justify="center">
+          <WxVideoPlayer v-if="reply.url" :url="reply.url" />
+        </Row>
+      </Col>
+      <Col :span="24">
+        <Row class="text-center" align="middle">
+          <!-- 选择素材 -->
+          <Col :span="12">
+            <Button type="primary" @click="showDialog = true">
+              素材库选择
+              <template #icon>
+                <IconifyIcon icon="lucide:circle-check" />
+              </template>
+            </Button>
+            <Modal
+              v-model:open="showDialog"
+              title="选择视频"
+              :width="1200"
+              :footer="null"
+              destroy-on-close
+            >
+              <WxMaterialSelect
+                type="video"
+                :account-id="reply.accountId"
+                @select-material="selectMaterial"
+              />
+            </Modal>
+          </Col>
+
+          <!-- 文件上传 -->
+          <Col :span="12">
+            <Upload
+              :custom-request="customRequest"
+              :multiple="true"
+              :max-count="1"
+              :file-list="fileList"
+              :before-upload="beforeVideoUpload"
+              :show-upload-list="false"
+            >
+              <Button type="primary">
+                新建视频
+                <template #icon>
+                  <IconifyIcon icon="lucide:upload" />
+                </template>
+              </Button>
+            </Upload>
+          </Col>
+        </Row>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+.ope-row {
+  width: 100%;
+  padding-top: 10px;
+  text-align: center;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-voice.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-voice.vue
new file mode 100644
index 000000000..ccab2d71d
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-voice.vue
@@ -0,0 +1,216 @@
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
+
+import { WxMaterialSelect, WxVoicePlayer } from '#/views/mp/components';
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+defineOptions({ name: 'TabVoice' });
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+const accessStore = useAccessStore();
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
+
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const showDialog = ref(false);
+const fileList = ref([]);
+const uploadData = reactive({
+  accountId: reply.value.accountId,
+  introduction: '',
+  title: '',
+  type: 'voice',
+});
+
+function beforeVoiceUpload(rawFile: UploadRawFile) {
+  return useBeforeUpload(UploadType.Voice, 10)(rawFile);
+}
+
+/** 自定义上传请求 */
+async function customRequest(options: any) {
+  const { file, onSuccess, onError } = options;
+
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('accountId', String(uploadData.accountId));
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      method: 'POST',
+      headers: HEADERS,
+      body: formData,
+    });
+
+    const result = await response.json();
+
+    if (result.code === 0) {
+      // 清空上传时的各种数据
+      fileList.value = [];
+      uploadData.title = '';
+      uploadData.introduction = '';
+
+      // 上传好的文件，本质是个素材，所以可以进行选中
+      selectMaterial(result.data);
+      message.success('上传成功');
+      onSuccess(result, file);
+    } else {
+      message.error(result.msg || '上传出错');
+      onError(new Error(result.msg || '上传失败'));
+    }
+  } catch (error) {
+    message.error('上传失败，请重试');
+    onError(error);
+  }
+}
+
+function onDelete() {
+  reply.value.mediaId = null;
+  reply.value.url = null;
+  reply.value.name = null;
+}
+
+function selectMaterial(item: Reply) {
+  showDialog.value = false;
+  reply.value.mediaId = item.mediaId;
+  reply.value.url = item.url;
+  reply.value.name = item.name;
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="reply.url" class="select-item">
+      <p class="item-name">{{ reply.name }}</p>
+      <Row class="ope-row" justify="center">
+        <WxVoicePlayer :url="reply.url" />
+      </Row>
+      <Row class="ope-row" justify="center">
+        <Button danger shape="circle" @click="onDelete">
+          <template #icon>
+            <IconifyIcon icon="lucide:trash-2" />
+          </template>
+        </Button>
+      </Row>
+    </div>
+
+    <Row v-else class="text-center">
+      <!-- 选择素材 -->
+      <Col :span="12" class="col-select">
+        <Button type="primary" @click="showDialog = true">
+          素材库选择
+          <template #icon>
+            <IconifyIcon icon="lucide:circle-check" />
+          </template>
+        </Button>
+        <Modal
+          v-model:open="showDialog"
+          title="选择语音"
+          :width="1200"
+          :footer="null"
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="voice"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </Modal>
+      </Col>
+
+      <!-- 文件上传 -->
+      <Col :span="12" class="col-add">
+        <Upload
+          :custom-request="customRequest"
+          :multiple="true"
+          :max-count="1"
+          :file-list="fileList"
+          :before-upload="beforeVoiceUpload"
+          :show-upload-list="false"
+        >
+          <Button type="primary">
+            点击上传
+            <template #icon>
+              <IconifyIcon icon="lucide:upload" />
+            </template>
+          </Button>
+        </Upload>
+        <div class="upload-tip">
+          格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+.select-item {
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+}
+
+.item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.ope-row {
+  width: 100%;
+  padding-top: 10px;
+  text-align: center;
+}
+
+.col-select,
+.col-add {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 160px;
+  padding: 50px 0;
+  border: 1px solid rgb(234 234 234);
+}
+
+.col-select {
+  width: 49.5%;
+}
+
+.col-add {
+  float: right;
+  width: 49.5%;
+}
+
+.upload-tip {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 18px;
+  color: #666;
+  text-align: center;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/types.ts b/apps/web-antd/src/views/mp/components/wx-reply/types.ts
similarity index 69%
rename from apps/web-antd/src/views/mp/modules/wx-reply/types.ts
rename to apps/web-antd/src/views/mp/components/wx-reply/types.ts
index 67571ef59..46a99418d 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/types.ts
+++ b/apps/web-antd/src/views/mp/components/wx-reply/types.ts
@@ -1,58 +1,42 @@
 import type { Ref } from 'vue';
 
+import type { ReplyType } from '../constants';
+
 import { unref } from 'vue';
 
-enum ReplyType {
-  Image = 'image',
-  Music = 'music',
-  News = 'news',
-  Text = 'text',
-  Video = 'video',
-  Voice = 'voice',
-}
-
-interface _Reply {
+export interface Reply {
   accountId: number;
-  type: ReplyType;
-  name?: null | string;
+  articles?: any[];
   content?: null | string;
-  mediaId?: null | string;
-  url?: null | string;
-  title?: null | string;
   description?: null | string;
-  thumbMediaId?: null | string;
-  thumbMediaUrl?: null | string;
-  musicUrl?: null | string;
   hqMusicUrl?: null | string;
   introduction?: null | string;
-  articles?: any[];
-}
-
-type Reply = _Reply; // Partial<_Reply>
-
-enum NewsType {
-  Draft = '2',
-  Published = '1',
+  mediaId?: null | string;
+  musicUrl?: null | string;
+  name?: null | string;
+  thumbMediaId?: null | string;
+  thumbMediaUrl?: null | string;
+  title?: null | string;
+  type: ReplyType;
+  url?: null | string;
 }
 
 /** 利用旧的reply[accountId, type]初始化新的Reply */
-const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
+export function createEmptyReply(old: Ref<Reply> | Reply): Reply {
   return {
     accountId: unref(old).accountId,
-    type: unref(old).type,
-    name: null,
+    articles: [],
     content: null,
-    mediaId: null,
-    url: null,
-    title: null,
     description: null,
-    thumbMediaId: null,
-    thumbMediaUrl: null,
-    musicUrl: null,
     hqMusicUrl: null,
     introduction: null,
-    articles: [],
+    mediaId: null,
+    musicUrl: null,
+    name: null,
+    thumbMediaId: null,
+    thumbMediaUrl: null,
+    title: null,
+    type: unref(old).type,
+    url: null,
   };
-};
-
-export { createEmptyReply, NewsType, type Reply, ReplyType };
+}
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/wx-reply.vue b/apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
similarity index 59%
rename from apps/web-antd/src/views/mp/modules/wx-reply/wx-reply.vue
rename to apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
index 225e8ab35..d2331f2d6 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/wx-reply.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
@@ -16,35 +16,36 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Row, Tabs } from 'ant-design-vue';
 
+import { NewsType, ReplyType } from '../constants';
 import TabImage from './tab-image.vue';
 import TabMusic from './tab-music.vue';
 import TabNews from './tab-news.vue';
 import TabText from './tab-text.vue';
 import TabVideo from './tab-video.vue';
 import TabVoice from './tab-voice.vue';
-import { createEmptyReply, NewsType, ReplyType } from './types';
+import { createEmptyReply } from './types';
 
 defineOptions({ name: 'WxReplySelect' });
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: Reply;
-    newsType?: NewsType;
-  }>(),
-  {
-    newsType: () => NewsType.Published,
-  },
-);
+const props = withDefaults(defineProps<Props>(), {
+  newsType: undefined,
+});
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
+
+interface Props {
+  modelValue: Reply;
+  newsType?: NewsType;
+}
+
 const reply = computed<Reply>({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 });
 
 const tabCache = new Map<ReplyType, Reply>(); // 作为多个标签保存各自 Reply 的缓存
-const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply进行赋值会产生了循环调用
+const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply 进行赋值会产生了循环调用
 
 watch(
   currentTab,
@@ -87,7 +88,10 @@ defineExpose({
     <!-- 类型 1：文本 -->
     <Tabs.TabPane :key="ReplyType.Text">
       <template #tab>
-        <Row align="middle"><IconifyIcon icon="ep:document" /> 文本</Row>
+        <Row align="middle">
+          <IconifyIcon icon="lucide:file-text" class="mr-1" />
+          文本
+        </Row>
       </template>
       <TabText v-model="reply.content" />
     </Tabs.TabPane>
@@ -96,7 +100,8 @@ defineExpose({
     <Tabs.TabPane :key="ReplyType.Image">
       <template #tab>
         <Row align="middle">
-          <IconifyIcon icon="ep:picture" class="mr-5px" /> 图片
+          <IconifyIcon icon="lucide:image" class="mr-1" />
+          图片
         </Row>
       </template>
       <TabImage v-model="reply" />
@@ -105,7 +110,10 @@ defineExpose({
     <!-- 类型 3：语音 -->
     <Tabs.TabPane :key="ReplyType.Voice">
       <template #tab>
-        <Row align="middle"><IconifyIcon icon="ep:phone" /> 语音</Row>
+        <Row align="middle">
+          <IconifyIcon icon="lucide:mic" class="mr-1" />
+          语音
+        </Row>
       </template>
       <TabVoice v-model="reply" />
     </Tabs.TabPane>
@@ -113,7 +121,10 @@ defineExpose({
     <!-- 类型 4：视频 -->
     <Tabs.TabPane :key="ReplyType.Video">
       <template #tab>
-        <Row align="middle"><IconifyIcon icon="ep:share" /> 视频</Row>
+        <Row align="middle">
+          <IconifyIcon icon="lucide:video" class="mr-1" />
+          视频
+        </Row>
       </template>
       <TabVideo v-model="reply" />
     </Tabs.TabPane>
@@ -121,7 +132,10 @@ defineExpose({
     <!-- 类型 5：图文 -->
     <Tabs.TabPane :key="ReplyType.News">
       <template #tab>
-        <Row align="middle"><IconifyIcon icon="ep:reading" /> 图文</Row>
+        <Row align="middle">
+          <IconifyIcon icon="lucide:newspaper" class="mr-1" />
+          图文
+        </Row>
       </template>
       <TabNews v-model="reply" :news-type="newsType" />
     </Tabs.TabPane>
@@ -129,9 +143,94 @@ defineExpose({
     <!-- 类型 6：音乐 -->
     <Tabs.TabPane :key="ReplyType.Music">
       <template #tab>
-        <Row align="middle"><IconifyIcon icon="ep:service" />音乐</Row>
+        <Row align="middle">
+          <IconifyIcon icon="lucide:music" class="mr-1" />
+          音乐
+        </Row>
       </template>
       <TabMusic v-model="reply" />
     </Tabs.TabPane>
   </Tabs>
 </template>
+
+<style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+.select-item {
+  width: 280px;
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+}
+
+.select-item2 {
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+}
+
+.ope-row {
+  padding-top: 10px;
+  text-align: center;
+}
+
+.input-margin-bottom {
+  margin-bottom: 2%;
+}
+
+.item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.el-form-item__content {
+  line-height: unset !important;
+}
+
+.col-select {
+  width: 49.5%;
+  height: 160px;
+  padding: 50px 0;
+  border: 1px solid rgb(234 234 234);
+}
+
+.col-select2 {
+  height: 160px;
+  padding: 50px 0;
+  border: 1px solid rgb(234 234 234);
+}
+
+.col-add {
+  float: right;
+  width: 49.5%;
+  height: 160px;
+  padding: 50px 0;
+  border: 1px solid rgb(234 234 234);
+}
+
+.avatar-uploader-icon {
+  width: 100px !important;
+  height: 100px !important;
+  font-size: 28px;
+  line-height: 100px !important;
+  color: #8c939d;
+  text-align: center;
+  border: 1px solid #d9d9d9;
+}
+
+.material-img {
+  width: 100%;
+}
+
+.thumb-div {
+  display: inline-block;
+  text-align: center;
+}
+
+.item-infos {
+  width: 30%;
+  margin: auto;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-video-play/index.ts b/apps/web-antd/src/views/mp/components/wx-video-play/index.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/wx-video-play/index.ts
rename to apps/web-antd/src/views/mp/components/wx-video-play/index.ts
diff --git a/apps/web-antd/src/views/mp/components/wx-video-play/wx-video-play.vue b/apps/web-antd/src/views/mp/components/wx-video-play/wx-video-play.vue
new file mode 100644
index 000000000..4a8b39ab4
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-video-play/wx-video-play.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { VideoPlayer } from '@videojs-player/vue';
+import { Modal } from 'ant-design-vue';
+
+import 'video.js/dist/video-js.css';
+
+defineOptions({ name: 'WxVideoPlayer' });
+
+const props = defineProps<{
+  url: string;
+}>();
+
+const dialogVideo = ref(false);
+
+function playVideo() {
+  dialogVideo.value = true;
+}
+</script>
+
+<template>
+  <!-- 微信消息 - 视频播放 -->
+  <div class="cursor-pointer" @click="playVideo()">
+    <!-- 提示 -->
+    <div class="flex items-center">
+      <IconifyIcon icon="lucide:circle-play" :size="32" class="mr-2" />
+      <p class="text-sm">点击播放视频</p>
+    </div>
+
+    <!-- 弹窗播放 -->
+    <Modal
+      v-model:open="dialogVideo"
+      title="视频播放"
+      :footer="null"
+      :width="850"
+      destroy-on-close
+    >
+      <VideoPlayer
+        v-if="dialogVideo"
+        class="video-player vjs-big-play-centered"
+        :src="props.url"
+        poster=""
+        crossorigin="anonymous"
+        controls
+        playsinline
+        :volume="0.6"
+        :width="800"
+        :playback-rates="[0.7, 1.0, 1.5, 2.0]"
+      />
+    </Modal>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-voice-play/index.ts b/apps/web-antd/src/views/mp/components/wx-voice-play/index.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/wx-voice-play/index.ts
rename to apps/web-antd/src/views/mp/components/wx-voice-play/index.ts
diff --git a/apps/web-antd/src/views/mp/components/wx-voice-play/wx-voice-play.vue b/apps/web-antd/src/views/mp/components/wx-voice-play/wx-voice-play.vue
new file mode 100644
index 000000000..995962878
--- /dev/null
+++ b/apps/web-antd/src/views/mp/components/wx-voice-play/wx-voice-play.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Tag } from 'ant-design-vue';
+import BenzAMRRecorder from 'benz-amr-recorder'; // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
+
+defineOptions({ name: 'WxVoicePlayer' });
+
+const props = withDefaults(
+  defineProps<{
+    content?: string; // 语音文本
+    url: string; // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
+  }>(),
+  {
+    content: '',
+  },
+);
+
+const amr = ref<any>();
+const playing = ref(false);
+const duration = ref<number>();
+
+/** 处理点击，播放或暂停 */
+function playVoice() {
+  // 情况一：未初始化，则创建 BenzAMRRecorder
+  if (amr.value === undefined) {
+    amrInit();
+    return;
+  }
+  // 情况二：已经初始化，则根据情况播放或暂时
+  if (amr.value.isPlaying()) {
+    amrStop();
+  } else {
+    amrPlay();
+  }
+}
+
+/** 音频初始化 */
+function amrInit() {
+  amr.value = new BenzAMRRecorder();
+  // 设置播放
+  amr.value.initWithUrl(props.url).then(() => {
+    amrPlay();
+    duration.value = amr.value.getDuration();
+  });
+  // 监听暂停
+  amr.value.onEnded(() => {
+    playing.value = false;
+  });
+}
+
+/** 音频播放 */
+function amrPlay() {
+  playing.value = true;
+  amr.value.play();
+}
+
+/** 音频暂停 */
+function amrStop() {
+  playing.value = false;
+  amr.value.stop();
+}
+</script>
+
+<template>
+  <!-- 微信消息 - 语音播放 -->
+  <div class="wx-voice-div cursor-pointer" @click="playVoice">
+    <div class="flex items-center">
+      <IconifyIcon
+        v-if="playing !== true"
+        icon="lucide:circle-play"
+        :size="32"
+      />
+      <IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
+      <span v-if="duration" class="amr-duration">{{ duration }} 秒</span>
+    </div>
+    <div v-if="content" class="mt-2">
+      <Tag color="success">语音识别</Tag>
+      {{ content }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+.wx-voice-div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 120px;
+  min-height: 50px;
+  padding: 8px 12px;
+  background-color: #eaeaea;
+  border-radius: 10px;
+}
+
+.amr-duration {
+  margin-left: 8px;
+  font-size: 12px;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/draft/components/cover-select.vue b/apps/web-antd/src/views/mp/draft/components/cover-select.vue
index 2958e18b9..cc977b8d4 100644
--- a/apps/web-antd/src/views/mp/draft/components/cover-select.vue
+++ b/apps/web-antd/src/views/mp/draft/components/cover-select.vue
@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
 import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
+import { WxMaterialSelect } from '#/views/mp/components';
 
 const props = defineProps<{
   isFirst: boolean;
@@ -53,8 +53,9 @@ function onMaterialSelected(item: any) {
   newsItem.value.thumbUrl = item.url;
 }
 // TODO @hw：注释都补充下哈；
-const onBeforeUpload = (file: UploadFile) =>
-  useBeforeUpload(UploadType.Image, 2)(file as any);
+function onBeforeUpload(file: UploadFile) {
+  return useBeforeUpload(UploadType.Image, 2)(file as any);
+}
 
 // TODO @hw：注释都补充下哈；
 function onUploadChange(info: any) {
diff --git a/apps/web-antd/src/views/mp/draft/components/draft-table.vue b/apps/web-antd/src/views/mp/draft/components/draft-table.vue
index 6e4f12af4..e2dfc0324 100644
--- a/apps/web-antd/src/views/mp/draft/components/draft-table.vue
+++ b/apps/web-antd/src/views/mp/draft/components/draft-table.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Article } from './types';
 
-import { WxNews } from '#/views/mp/modules/wx-news';
+import { WxNews } from '#/views/mp/components';
 
 defineOptions({ name: 'DraftTableCell' });
 
diff --git a/apps/web-antd/src/views/mp/draft/components/types.ts b/apps/web-antd/src/views/mp/draft/components/types.ts
index 43c6f60af..5a08e1919 100644
--- a/apps/web-antd/src/views/mp/draft/components/types.ts
+++ b/apps/web-antd/src/views/mp/draft/components/types.ts
@@ -23,7 +23,7 @@ interface Article {
   updateTime: number;
 }
 
-const createEmptyNewsItem = (): NewsItem => {
+function createEmptyNewsItem(): NewsItem {
   return {
     title: '',
     thumbMediaId: '',
@@ -36,7 +36,7 @@ const createEmptyNewsItem = (): NewsItem => {
     onlyFansCanComment: 0,
     thumbUrl: '',
   };
-};
+}
 
 export type { Article, NewsItem, NewsItemList };
 export { createEmptyNewsItem };
diff --git a/apps/web-antd/src/views/mp/draft/data.ts b/apps/web-antd/src/views/mp/draft/data.ts
index 2ee398fd1..8eccaa398 100644
--- a/apps/web-antd/src/views/mp/draft/data.ts
+++ b/apps/web-antd/src/views/mp/draft/data.ts
@@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { markRaw } from 'vue';
 
-import { WxAccountSelect } from '#/views/mp/modules/wx-account-select';
+import { WxAccountSelect } from '#/views/mp/components';
 
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
diff --git a/apps/web-antd/src/views/mp/draft/index.vue b/apps/web-antd/src/views/mp/draft/index.vue
index e1185adcc..52a353103 100644
--- a/apps/web-antd/src/views/mp/draft/index.vue
+++ b/apps/web-antd/src/views/mp/draft/index.vue
@@ -11,8 +11,8 @@ import { $t } from '@vben/locales';
 import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MpDraftApi from '#/api/mp/draft';
-import * as MpFreePublishApi from '#/api/mp/freePublish';
+import { deleteDraft, getDraftPage } from '#/api/mp/draft';
+import { submitFreePublish } from '#/api/mp/freePublish';
 import { createEmptyNewsItem } from '#/views/mp/draft/components/types';
 
 import DraftTableCell from './components/draft-table.vue';
@@ -21,6 +21,11 @@ import Form from './modules/form.vue';
 
 defineOptions({ name: 'MpDraft' });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
@@ -43,7 +48,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           if (formValues?.accountId) {
             accountId.value = formValues.accountId;
           }
-          const drafts = await MpDraftApi.getDraftPage({
+          const drafts = await getDraftPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
@@ -190,7 +195,7 @@ async function handlePublish(row: Article) {
   });
   // TODO @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
   try {
-    await MpFreePublishApi.submitFreePublish(accountId, row.mediaId);
+    await submitFreePublish(accountId, row.mediaId);
     message.success('发布成功');
     await gridApi.query();
   } finally {
@@ -212,7 +217,7 @@ async function handleDelete(row: Article) {
     duration: 0,
   });
   try {
-    await MpDraftApi.deleteDraft(accountId, row.mediaId);
+    await deleteDraft(accountId, row.mediaId);
     message.success('删除成功');
     await gridApi.query();
   } finally {
@@ -237,16 +242,11 @@ onMounted(async () => {
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+    <template #doc>
+      <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+    </template>
 
-    <!-- TODO @hw：参考别的模块 @success 调用 refresh 方法； -->
-    <FormModal
-      @success="
-        () => {
-          gridApi.query();
-        }
-      "
-    />
+    <FormModal @success="handleRefresh" />
 
     <Grid table-title="草稿列表">
       <template #toolbar-tools>
diff --git a/apps/web-antd/src/views/mp/hooks/useUpload.ts b/apps/web-antd/src/views/mp/hooks/useUpload.ts
new file mode 100644
index 000000000..ed6385a4b
--- /dev/null
+++ b/apps/web-antd/src/views/mp/hooks/useUpload.ts
@@ -0,0 +1,75 @@
+import { message } from 'ant-design-vue';
+
+import { $t } from '#/locales';
+
+export enum UploadType {
+  Image = 'image',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+interface UploadTypeConfig {
+  allowTypes: string[];
+  maxSizeMB: number;
+  name: string;
+}
+
+export interface UploadRawFile {
+  name: string;
+  size: number;
+  type: string;
+}
+
+const UPLOAD_CONFIGS: Record<UploadType, UploadTypeConfig> = {
+  [UploadType.Image]: {
+    allowTypes: [
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'image/bmp',
+      'image/jpg',
+    ],
+    maxSizeMB: 2,
+    name: '图片',
+  },
+  [UploadType.Video]: {
+    allowTypes: ['video/mp4'],
+    maxSizeMB: 10,
+    name: '视频',
+  },
+  [UploadType.Voice]: {
+    allowTypes: [
+      'audio/mp3',
+      'audio/mpeg',
+      'audio/wma',
+      'audio/wav',
+      'audio/amr',
+    ],
+    maxSizeMB: 2,
+    name: '语音',
+  },
+};
+
+export const useBeforeUpload = (type: UploadType, maxSizeMB?: number) => {
+  const fn = (rawFile: UploadRawFile): boolean => {
+    const config = UPLOAD_CONFIGS[type];
+    const finalMaxSize = maxSizeMB ?? config.maxSizeMB;
+
+    // 格式不正确
+    // TODO @dylan：貌似没国际化；
+    if (!config.allowTypes.includes(rawFile.type)) {
+      message.error($t('mp.upload.invalidFormat', [config.name]));
+      return false;
+    }
+
+    // 大小不正确
+    if (rawFile.size / 1024 / 1024 > finalMaxSize) {
+      message.error($t('mp.upload.maxSize', [config.name, finalMaxSize]));
+      return false;
+    }
+
+    return true;
+  };
+
+  return fn;
+};
diff --git a/apps/web-antd/src/views/mp/material/components/ImageTable.vue b/apps/web-antd/src/views/mp/material/components/ImageTable.vue
new file mode 100644
index 000000000..1e3a761f9
--- /dev/null
+++ b/apps/web-antd/src/views/mp/material/components/ImageTable.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { useAccess } from '@vben/access';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Spin } from 'ant-design-vue';
+
+// TODO @dylan：vue 组件名小写 + 中划线
+
+const props = defineProps<{
+  list: any[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  delete: [v: number];
+}>();
+
+const { hasAccessByCodes } = useAccess();
+</script>
+
+<template>
+  <Spin :spinning="props.loading">
+    <div class="waterfall">
+      <div v-for="item in props.list" :key="item.id" class="waterfall-item">
+        <a :href="item.url" target="_blank">
+          <!-- TODO @dylan：要不用 Image 组件？ -->
+          <img :src="item.url" class="material-img" />
+          <div class="item-name">{{ item.name }}</div>
+        </a>
+        <div class="flex justify-center">
+          <Button
+            v-if="hasAccessByCodes(['mp:material:delete'])"
+            danger
+            shape="circle"
+            type="primary"
+            @click="emit('delete', item.id)"
+          >
+            <template #icon>
+              <IconifyIcon icon="lucide:trash-2" />
+            </template>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </Spin>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+
+@media (width >= 992px) and (width <= 1300px) {
+  .waterfall {
+    column-count: 3;
+  }
+}
+
+@media (width >= 768px) and (width <= 991px) {
+  .waterfall {
+    column-count: 2;
+  }
+}
+
+@media (width <= 767px) {
+  .waterfall {
+    column-count: 1;
+  }
+}
+
+.waterfall {
+  column-gap: 10px;
+  width: 100%;
+  margin-top: 10px;
+  column-count: 5;
+}
+
+.waterfall-item {
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #eaeaea;
+  break-inside: avoid;
+}
+
+.material-img {
+  width: 100%;
+}
+
+.item-name {
+  line-height: 30px;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/material/components/UploadFile.vue b/apps/web-antd/src/views/mp/material/components/UploadFile.vue
new file mode 100644
index 000000000..213bb3ac5
--- /dev/null
+++ b/apps/web-antd/src/views/mp/material/components/UploadFile.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { UploadProps } from 'ant-design-vue';
+
+import type { UploadData } from './upload';
+
+import { inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, message, Upload } from 'ant-design-vue';
+
+import {
+  beforeImageUpload,
+  beforeVoiceUpload,
+  HEADERS,
+  UPLOAD_URL,
+  UploadType,
+} from './upload';
+
+const props = defineProps<{ type: UploadType }>();
+
+const emit = defineEmits<{
+  uploaded: [v: void];
+}>();
+
+const accountId = inject<number>('accountId');
+
+const fileList = ref<any[]>([]);
+const uploadData: UploadData = reactive({
+  accountId: accountId!,
+  introduction: '',
+  title: '',
+  type: props.type,
+});
+
+/** 上传前检查 */
+const onBeforeUpload =
+  props.type === UploadType.Image ? beforeImageUpload : beforeVoiceUpload;
+
+/** 自定义上传 */
+const customRequest: UploadProps['customRequest'] = async function (options) {
+  const { file, onError, onSuccess } = options;
+
+  const formData = new FormData();
+  formData.append('file', file as File);
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+  formData.append('accountId', String(uploadData.accountId));
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      body: formData,
+      headers: HEADERS,
+      method: 'POST',
+    });
+
+    const res = await response.json();
+
+    if (res.code !== 0) {
+      message.error(`上传出错：${res.msg}`);
+      onError?.(new Error(res.msg));
+      return;
+    }
+
+    // 清空上传时的各种数据
+    fileList.value = [];
+    uploadData.title = '';
+    uploadData.introduction = '';
+
+    message.success('上传成功');
+    onSuccess?.(res);
+    emit('uploaded');
+  } catch (error: any) {
+    message.error(`上传失败: ${error.message}`);
+    onError?.(error);
+  }
+};
+</script>
+
+<template>
+  <Upload
+    :action="UPLOAD_URL"
+    :before-upload="onBeforeUpload"
+    :custom-request="customRequest"
+    :file-list="fileList"
+    :headers="HEADERS"
+    :multiple="true"
+    class="mb-4"
+  >
+    <Button type="primary">
+      <IconifyIcon icon="lucide:upload" class="mr-1" />
+      点击上传
+    </Button>
+    <template #itemRender="{ file, actions }">
+      <div class="flex items-center">
+        <span>{{ file.name }}</span>
+        <Button type="link" size="small" @click="actions.remove"> 删除 </Button>
+      </div>
+    </template>
+  </Upload>
+  <div v-if="$slots.default" class="ml-1 text-sm text-gray-500">
+    <slot></slot>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mp/material/components/UploadVideo.vue b/apps/web-antd/src/views/mp/material/components/UploadVideo.vue
new file mode 100644
index 000000000..a2f4a09ee
--- /dev/null
+++ b/apps/web-antd/src/views/mp/material/components/UploadVideo.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { FormInstance, UploadProps } from 'ant-design-vue';
+
+import type { UploadData } from './upload';
+
+import { inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Divider,
+  Form,
+  Input,
+  message,
+  Modal,
+  Upload,
+} from 'ant-design-vue';
+
+import { beforeVideoUpload, HEADERS, UPLOAD_URL, UploadType } from './upload';
+
+withDefaults(
+  defineProps<{
+    open?: boolean;
+  }>(),
+  {
+    open: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:open': [v: boolean];
+  uploaded: [v: void];
+}>();
+
+const accountId = inject<number>('accountId');
+
+const uploadRules = {
+  introduction: [
+    { message: '请输入描述', required: true, trigger: 'blur' } as const,
+  ],
+  title: [{ message: '请输入标题', required: true, trigger: 'blur' } as const],
+};
+
+function handleCancel() {
+  emit('update:open', false);
+}
+
+const fileList = ref<any[]>([]);
+
+const uploadData: UploadData = reactive({
+  accountId: accountId!,
+  introduction: '',
+  title: '',
+  type: UploadType.Video,
+});
+
+const uploadFormRef = ref<FormInstance | null>(null);
+const uploadVideoRef = ref<any>(null);
+
+async function submitVideo() {
+  await uploadFormRef.value?.validate();
+  uploadVideoRef.value?.submit();
+}
+
+/** 自定义上传 */
+const customRequest: UploadProps['customRequest'] = async function (options) {
+  const { file, onError, onSuccess } = options;
+
+  const formData = new FormData();
+  formData.append('file', file as File);
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+  formData.append('accountId', String(uploadData.accountId));
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      body: formData,
+      headers: HEADERS,
+      method: 'POST',
+    });
+
+    const res = await response.json();
+
+    if (res.code !== 0) {
+      message.error(`上传出错：${res.msg}`);
+      onError?.(new Error(res.msg));
+      return;
+    }
+
+    // 清空上传时的各种数据
+    fileList.value = [];
+    uploadData.title = '';
+    uploadData.introduction = '';
+
+    emit('update:open', false);
+    message.success('上传成功');
+    onSuccess?.(res);
+    emit('uploaded');
+  } catch (error: any) {
+    message.error(`上传失败: ${error.message}`);
+    onError?.(error);
+  }
+};
+</script>
+
+<template>
+  <Modal
+    :open="open"
+    title="新建视频"
+    width="600px"
+    @cancel="handleCancel"
+    @ok="submitVideo"
+  >
+    <Upload
+      ref="uploadVideoRef"
+      :action="UPLOAD_URL"
+      :auto-upload="false"
+      :before-upload="beforeVideoUpload"
+      :custom-request="customRequest"
+      :file-list="fileList"
+      :headers="HEADERS"
+      :limit="1"
+      :multiple="true"
+      class="mb-4"
+    >
+      <Button type="primary">
+        <IconifyIcon icon="lucide:video" class="mr-1" />
+        选择视频
+      </Button>
+    </Upload>
+    <div class="mb-4 ml-1 text-sm text-gray-500">
+      格式支持 MP4，文件大小不超过 10MB
+    </div>
+
+    <Divider />
+
+    <Form
+      ref="uploadFormRef"
+      :model="uploadData"
+      :rules="uploadRules"
+      layout="vertical"
+    >
+      <Form.Item label="标题" name="title">
+        <Input
+          v-model:value="uploadData.title"
+          placeholder="标题将展示在相关播放页面，建议填写清晰、准确、生动的标题"
+        />
+      </Form.Item>
+      <Form.Item label="描述" name="introduction">
+        <Input.TextArea
+          v-model:value="uploadData.introduction"
+          :rows="3"
+          placeholder="介绍语将展示在相关播放页面，建议填写简洁明确、有信息量的内容"
+        />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mp/material/components/VideoTable.vue b/apps/web-antd/src/views/mp/material/components/VideoTable.vue
new file mode 100644
index 000000000..a8b89c5a2
--- /dev/null
+++ b/apps/web-antd/src/views/mp/material/components/VideoTable.vue
@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { IconifyIcon } from '@vben/icons';
+import { formatDate2, openWindow } from '@vben/utils';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { WxVideoPlayer } from '#/views/mp/components';
+
+// TODO @dylan：vue 组件名小写 + 中划线
+
+const props = defineProps<{
+  list: any[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  delete: [v: number];
+}>();
+
+const { hasAccessByCodes } = useAccess();
+
+// TODO @dylan：这里有个告警哈；
+// TODO @dylan：放到 data.ts 里；
+const columns: VxeTableGridOptions<any>['columns'] = [
+  {
+    field: 'mediaId',
+    title: '编号',
+    align: 'center',
+    width: 160,
+  },
+  {
+    field: 'name',
+    title: '文件名',
+    align: 'center',
+    minWidth: 200,
+  },
+  {
+    field: 'title',
+    title: '标题',
+    align: 'center',
+    minWidth: 200,
+  },
+  {
+    field: 'introduction',
+    title: '介绍',
+    align: 'center',
+    minWidth: 220,
+  },
+  // TODO @dylan：视频的样式，有点奇怪。
+  {
+    field: 'video',
+    title: '视频',
+    align: 'center',
+    width: 220,
+    slots: { default: 'video' },
+  },
+  {
+    field: 'createTime',
+    title: '上传时间',
+    align: 'center',
+    width: 180,
+    slots: { default: 'createTime' },
+  },
+  {
+    field: 'actions',
+    title: '操作',
+    align: 'center',
+    fixed: 'right',
+    width: 180,
+    slots: { default: 'actions' },
+  },
+];
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
+});
+
+watch(
+  () => props.list,
+  (list: any[]) => {
+    const data = Array.isArray(list) ? list : [];
+    if (gridApi.grid?.loadData) {
+      gridApi.grid.loadData(data);
+    } else {
+      gridApi.setGridOptions({ data });
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.loading,
+  (loading: boolean) => {
+    gridApi.setLoading(loading);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid class="mt-4">
+    <template #video="{ row }">
+      <WxVideoPlayer v-if="row.url" :url="row.url" />
+    </template>
+    <!-- TODO @dylan：应该 data.ts 里 formatDate 就好了。别的模块有的哈。 -->
+    <template #createTime="{ row }">
+      {{ formatDate2(row.createTime) }}
+    </template>
+    <!-- TODO @dylan：用 tableaction 哈：yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/index.vue -->
+    <template #actions="{ row }">
+      <Button type="link" @click="openWindow(row.url)">
+        <IconifyIcon icon="lucide:download" />
+        下载
+      </Button>
+      <Button
+        v-if="hasAccessByCodes(['mp:material:delete'])"
+        danger
+        type="link"
+        @click="emit('delete', row.id)"
+      >
+        <IconifyIcon icon="lucide:trash-2" />
+        删除
+      </Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/mp/material/components/VoiceTable.vue b/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
new file mode 100644
index 000000000..06a4798a5
--- /dev/null
+++ b/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { IconifyIcon } from '@vben/icons';
+import { formatDate2, openWindow } from '@vben/utils';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { WxVoicePlayer } from '#/views/mp/components';
+
+// TODO @dylan：vue 组件名小写 + 中划线
+
+// TODO @dylan：组件内，尽量用 modules 哈。只有对外共享，才用 components
+
+const props = defineProps<{
+  list: any[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  delete: [v: number];
+}>();
+
+const { hasAccessByCodes } = useAccess();
+
+// TODO @dylan：这里有个告警哈；
+// TODO @dylan：放到 data.ts 里；
+const columns: VxeTableGridOptions<any>['columns'] = [
+  {
+    field: 'mediaId',
+    title: '编号',
+    align: 'center',
+    width: 160,
+  },
+  {
+    field: 'name',
+    title: '文件名',
+    align: 'center',
+    minWidth: 200,
+  },
+  // TODO @dylan：语音的样式，有点奇怪。
+  {
+    field: 'voice',
+    title: '语音',
+    align: 'center',
+    width: 220,
+    slots: { default: 'voice' },
+  },
+  {
+    field: 'createTime',
+    title: '上传时间',
+    align: 'center',
+    width: 180,
+    slots: { default: 'createTime' },
+  },
+  {
+    field: 'actions',
+    title: '操作',
+    align: 'center',
+    fixed: 'right',
+    width: 160,
+    slots: { default: 'actions' },
+  },
+];
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
+});
+
+watch(
+  () => props.list,
+  (list: any[]) => {
+    const data = Array.isArray(list) ? list : [];
+    if (gridApi.grid?.loadData) {
+      gridApi.grid.loadData(data);
+    } else {
+      gridApi.setGridOptions({ data });
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.loading,
+  (loading: boolean) => {
+    gridApi.setLoading(loading);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid class="mt-4">
+    <template #voice="{ row }">
+      <WxVoicePlayer v-if="row.url" :url="row.url" />
+    </template>
+    <!-- TODO @dylan：应该 data.ts 里 formatDate 就好了。别的模块有的哈。 -->
+    <template #createTime="{ row }">
+      {{ formatDate2(row.createTime) }}
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="openWindow(row.url)">
+        <IconifyIcon icon="lucide:download" />
+        下载
+      </Button>
+      <Button
+        v-if="hasAccessByCodes(['mp:material:delete'])"
+        danger
+        type="link"
+        @click="emit('delete', row.id)"
+      >
+        <IconifyIcon icon="lucide:trash-2" />
+        删除
+      </Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/mp/material/components/upload.ts b/apps/web-antd/src/views/mp/material/components/upload.ts
new file mode 100644
index 000000000..5e6efdfca
--- /dev/null
+++ b/apps/web-antd/src/views/mp/material/components/upload.ts
@@ -0,0 +1,46 @@
+import type { UploadProps } from 'ant-design-vue';
+
+import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
+
+import { useAccessStore } from '@vben/stores';
+
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+const accessStore = useAccessStore();
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` }; // 请求头
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传地址
+
+interface UploadData {
+  accountId: number;
+  introduction: string;
+  title: string;
+  type: UploadType;
+}
+
+const beforeImageUpload: UploadProps['beforeUpload'] = function (
+  rawFile: UploadRawFile,
+) {
+  return useBeforeUpload(UploadType.Image, 2)(rawFile);
+};
+
+const beforeVoiceUpload: UploadProps['beforeUpload'] = function (
+  rawFile: UploadRawFile,
+) {
+  return useBeforeUpload(UploadType.Voice, 2)(rawFile);
+};
+
+const beforeVideoUpload: UploadProps['beforeUpload'] = function (
+  rawFile: UploadRawFile,
+) {
+  return useBeforeUpload(UploadType.Video, 10)(rawFile);
+};
+
+export {
+  beforeImageUpload,
+  beforeVideoUpload,
+  beforeVoiceUpload,
+  HEADERS,
+  UPLOAD_URL,
+  type UploadData,
+  UploadType,
+};
diff --git a/apps/web-antd/src/views/mp/material/index.vue b/apps/web-antd/src/views/mp/material/index.vue
index 2966b8983..768aa1d21 100644
--- a/apps/web-antd/src/views/mp/material/index.vue
+++ b/apps/web-antd/src/views/mp/material/index.vue
@@ -1,29 +1,225 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import { provide, reactive, ref } from 'vue';
 
-import { Button } from 'ant-design-vue';
+import { useAccess } from '@vben/access';
+import { DocAlert, Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Card,
+  Form,
+  message,
+  Modal,
+  Pagination,
+  Tabs,
+} from 'ant-design-vue';
+
+import { deletePermanentMaterial, getMaterialPage } from '#/api/mp/material';
+import { WxAccountSelect } from '#/views/mp/components';
+
+import ImageTable from './components/ImageTable.vue';
+import { UploadType } from './components/upload';
+import UploadFile from './components/UploadFile.vue';
+import UploadVideo from './components/UploadVideo.vue';
+import VideoTable from './components/VideoTable.vue';
+import VoiceTable from './components/VoiceTable.vue';
+
+defineOptions({ name: 'MpMaterial' });
+
+const { hasAccessByCodes } = useAccess();
+
+const type = ref<UploadType>(UploadType.Image); // 素材类型
+const loading = ref(false); // 遮罩层
+const list = ref<any[]>([]); // 数据列表
+const total = ref(0); // 总条数
+
+const accountId = ref(-1);
+provide('accountId', accountId);
+
+const queryParams = reactive({
+  accountId,
+  pageNo: 1,
+  pageSize: 10,
+  permanent: true,
+}); // 查询参数
+const showCreateVideo = ref(false); // 是否新建视频的弹窗
+
+/** 侦听公众号变化 */
+function onAccountChanged(id: number) {
+  accountId.value = id;
+  queryParams.accountId = id;
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const data = await getMaterialPage({
+      ...queryParams,
+      type: type.value,
+    });
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 处理 tab 切换 */
+function onTabChange() {
+  // 提前清空数据，避免 tab 切换后显示垃圾数据
+  list.value = [];
+  total.value = 0;
+  // 从第一页开始查询
+  handleQuery();
+}
+
+/** 处理删除操作 */
+async function handleDelete(id: number) {
+  // TODO @dylan：参考别的模块的  dylan 哈；
+  Modal.confirm({
+    content: '此操作将永久删除该文件, 是否继续?',
+    title: '提示',
+    async onOk() {
+      await deletePermanentMaterial(id);
+      message.success('删除成功');
+      await getList();
+    },
+  });
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert title="公众号素材" url="https://doc.iocoder.cn/mp/material/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/material/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/material/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="公众号素材" url="https://doc.iocoder.cn/mp/material/" />
+    </template>
+    <div class="h-full">
+      <!-- 搜索工作栏 -->
+      <Card class="h-[10%]" :bordered="false">
+        <Form :model="queryParams" layout="inline">
+          <Form.Item label="公众号">
+            <WxAccountSelect @change="onAccountChanged" />
+          </Form.Item>
+        </Form>
+      </Card>
+
+      <Card :bordered="false" class="mt-4 h-[88%]">
+        <Tabs v-model:active-key="type" @change="onTabChange">
+          <!-- tab 1：图片  -->
+          <Tabs.TabPane :key="UploadType.Image">
+            <template #tab>
+              <span class="flex items-center">
+                <IconifyIcon icon="lucide:image" class="mr-1" />
+                图片
+              </span>
+            </template>
+            <UploadFile
+              v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
+              :type="UploadType.Image"
+              @uploaded="getList"
+            >
+              支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
+            </UploadFile>
+            <!-- 列表 -->
+            <ImageTable
+              :list="list"
+              :loading="loading"
+              @delete="handleDelete"
+            />
+            <!-- 分页组件 -->
+            <div class="mt-4 flex justify-end">
+              <Pagination
+                v-model:current="queryParams.pageNo"
+                v-model:page-size="queryParams.pageSize"
+                :total="total"
+                show-size-changer
+                @change="getList"
+                @show-size-change="getList"
+              />
+            </div>
+          </Tabs.TabPane>
+
+          <!-- tab 2：语音  -->
+          <Tabs.TabPane :key="UploadType.Voice">
+            <template #tab>
+              <span class="flex items-center">
+                <IconifyIcon icon="lucide:mic" class="mr-1" />
+                语音
+              </span>
+            </template>
+            <UploadFile
+              v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
+              :type="UploadType.Voice"
+              @uploaded="getList"
+            >
+              格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
+            </UploadFile>
+            <!-- 列表 -->
+            <VoiceTable
+              :list="list"
+              :loading="loading"
+              @delete="handleDelete"
+            />
+            <!-- 分页组件 -->
+            <div class="mt-4 flex justify-end">
+              <Pagination
+                v-model:current="queryParams.pageNo"
+                v-model:page-size="queryParams.pageSize"
+                :total="total"
+                show-size-changer
+                @change="getList"
+                @show-size-change="getList"
+              />
+            </div>
+          </Tabs.TabPane>
+
+          <!-- tab 3：视频 -->
+          <Tabs.TabPane :key="UploadType.Video">
+            <template #tab>
+              <span class="flex items-center">
+                <IconifyIcon icon="lucide:video" class="mr-1" />
+                视频
+              </span>
+            </template>
+            <Button
+              v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
+              type="primary"
+              @click="showCreateVideo = true"
+            >
+              新建视频
+            </Button>
+            <!-- 新建视频的弹窗 -->
+            <UploadVideo v-model:open="showCreateVideo" @uploaded="getList" />
+            <!-- 列表 -->
+            <VideoTable
+              :list="list"
+              :loading="loading"
+              @delete="handleDelete"
+            />
+            <!-- 分页组件 -->
+            <div class="mt-4 flex justify-end">
+              <Pagination
+                v-model:current="queryParams.pageNo"
+                v-model:page-size="queryParams.pageSize"
+                :total="total"
+                show-size-changer
+                @change="getList"
+                @show-size-change="getList"
+              />
+            </div>
+          </Tabs.TabPane>
+        </Tabs>
+      </Card>
+    </div>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/mp/menu/components/menu-editor.vue b/apps/web-antd/src/views/mp/menu/components/menu-editor.vue
index 6044b520d..986e00ed7 100644
--- a/apps/web-antd/src/views/mp/menu/components/menu-editor.vue
+++ b/apps/web-antd/src/views/mp/menu/components/menu-editor.vue
@@ -14,9 +14,7 @@ import {
   Select,
 } from 'ant-design-vue';
 
-import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
-import { WxNews } from '#/views/mp/modules/wx-news';
-import { WxReplySelect } from '#/views/mp/modules/wx-reply';
+import { WxMaterialSelect, WxNews, WxReply } from '#/views/mp/components';
 
 import menuOptions from './menuOptions';
 
@@ -218,7 +216,7 @@ function deleteMaterial() {
           class="configur-content"
           v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
         >
-          <WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
+          <WxReply v-if="hackResetWxReplySelect" v-model="menu.reply" />
         </div>
         <!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； -->
       </div>
diff --git a/apps/web-antd/src/views/mp/menu/index.vue b/apps/web-antd/src/views/mp/menu/index.vue
index 91b20b332..fa1729797 100644
--- a/apps/web-antd/src/views/mp/menu/index.vue
+++ b/apps/web-antd/src/views/mp/menu/index.vue
@@ -9,9 +9,9 @@ import { handleTree } from '@vben/utils';
 import { Button, Form, message } from 'ant-design-vue';
 
 import { deleteMenu, getMenuList, saveMenu } from '#/api/mp/menu';
+import { WxAccountSelect } from '#/views/mp/components';
 import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/components';
 import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
-import { WxAccountSelect } from '#/views/mp/modules/wx-account-select';
 
 defineOptions({ name: 'MpMenu' });
 
@@ -249,19 +249,15 @@ function menuToBackend(menu: any) {
       <DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
     </template>
 
-    <!-- 搜索工作栏 -->
-    <!-- TODO @hw：是不是少了一个框子哈？ -->
-    <!-- <ContentWrap> -->
-    <Form layout="inline" class="-mb-15px w-240px">
-      <Form.Item label="公众号" prop="accountId" class="w-240px">
-        <WxAccountSelect @change="onAccountChanged" />
-      </Form.Item>
-    </Form>
-    <!-- </ContentWrap> -->
-
-    <!-- TODO @hw：貌似高度高了点。就是手机下面部分，空了一大块。 -->
     <ContentWrap>
-      <div class="clearfix public-account-management" v-loading="loading">
+      <!-- 搜索工作栏 -->
+      <Form class="mb-10 w-full">
+        <Form.Item label="公众号" prop="accountId" class="w-60">
+          <WxAccountSelect @change="onAccountChanged" />
+        </Form.Item>
+      </Form>
+
+      <div class="clearfix public-account-management mt-10" v-loading="loading">
         <!--左边配置菜单-->
         <div class="left">
           <div class="weixin-hd">
@@ -316,6 +312,7 @@ function menuToBackend(menu: any) {
 
 <style lang="scss" scoped>
 /** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
+
 /* 公共颜色变量 */
 .clearfix {
   *zoom: 1;
diff --git a/apps/web-antd/src/views/mp/message/MessageTable.vue b/apps/web-antd/src/views/mp/message/MessageTable.vue
new file mode 100644
index 000000000..6fc52aa2c
--- /dev/null
+++ b/apps/web-antd/src/views/mp/message/MessageTable.vue
@@ -0,0 +1,247 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { onMounted, watch } from 'vue';
+
+import { formatDate2 } from '@vben/utils';
+
+import { Button, Image, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  MsgType,
+  WxLocation,
+  WxMusic,
+  WxNews,
+  WxVideoPlayer,
+  WxVoicePlayer,
+} from '#/views/mp/components';
+
+// TODO @dylan：vue 组件名小写 + 中划线
+
+const props = withDefaults(
+  defineProps<{
+    list?: any[];
+    loading?: boolean;
+  }>(),
+  {
+    list() {
+      return [];
+    },
+    loading: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'send', userId: number): void;
+}>();
+
+const columns: VxeTableGridOptions<any>['columns'] = [
+  // TODO @dylan：any 有 linter 告警；看看别的模块哈
+  {
+    field: 'createTime',
+    title: '发送时间',
+    width: 180,
+    align: 'center',
+    slots: { default: 'createTime' },
+  },
+  {
+    field: 'type',
+    title: '消息类型',
+    width: 80,
+    align: 'center',
+  },
+  {
+    field: 'sendFrom',
+    title: '发送方',
+    width: 80,
+    align: 'center',
+    slots: { default: 'sendFrom' },
+  },
+  {
+    field: 'openid',
+    title: '用户标识',
+    width: 300,
+    align: 'center',
+  },
+  {
+    field: 'content',
+    title: '内容',
+    align: 'left',
+    minWidth: 320,
+    slots: { default: 'content' },
+  },
+  {
+    field: 'actions',
+    title: '操作',
+    width: 120,
+    align: 'center',
+    fixed: 'right',
+    slots: { default: 'actions' },
+  },
+];
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<any>,
+});
+
+function normalizeList(list?: any[]) {
+  return Array.isArray(list) ? list : [];
+}
+
+function updateGridData(data: any[]) {
+  if (gridApi.grid?.loadData) {
+    gridApi.grid.loadData(data);
+  } else {
+    gridApi.setGridOptions({ data });
+  }
+}
+
+watch(
+  () => props.list,
+  (list) => {
+    updateGridData(normalizeList(list));
+  },
+  { flush: 'post' },
+);
+
+watch(
+  () => props.loading,
+  (loading) => {
+    gridApi.setLoading(loading);
+  },
+);
+
+/** 初始化 */
+onMounted(() => {
+  updateGridData(normalizeList(props.list));
+  gridApi.setLoading(props.loading);
+});
+</script>
+
+<template>
+  <Grid>
+    <template #createTime="{ row }">
+      {{ formatDate2(row.createTime) }}
+    </template>
+
+    <template #sendFrom="{ row }">
+      <Tag v-if="row.sendFrom === 1" color="success">粉丝</Tag>
+      <Tag v-else color="default">公众号</Tag>
+    </template>
+
+    <template #content="{ row }">
+      <div v-if="row.type === MsgType.Event && row.event === 'subscribe'">
+        <Tag color="success">关注</Tag>
+      </div>
+      <div
+        v-else-if="row.type === MsgType.Event && row.event === 'unsubscribe'"
+      >
+        <Tag color="error">取消关注</Tag>
+      </div>
+      <div v-else-if="row.type === MsgType.Event && row.event === 'CLICK'">
+        <Tag>点击菜单</Tag>
+        【{{ row.eventKey }}】
+      </div>
+      <div v-else-if="row.type === MsgType.Event && row.event === 'VIEW'">
+        <Tag>点击菜单链接</Tag>
+        【{{ row.eventKey }}】
+      </div>
+      <div
+        v-else-if="
+          row.type === MsgType.Event && row.event === 'scancode_waitmsg'
+        "
+      >
+        <Tag>扫码结果</Tag>
+        【{{ row.eventKey }}】
+      </div>
+      <div
+        v-else-if="row.type === MsgType.Event && row.event === 'scancode_push'"
+      >
+        <Tag>扫码结果</Tag>
+        【{{ row.eventKey }}】
+      </div>
+      <div
+        v-else-if="row.type === MsgType.Event && row.event === 'pic_sysphoto'"
+      >
+        <Tag>系统拍照发图</Tag>
+      </div>
+      <div
+        v-else-if="
+          row.type === MsgType.Event && row.event === 'pic_photo_or_album'
+        "
+      >
+        <Tag>拍照或者相册</Tag>
+      </div>
+      <div v-else-if="row.type === MsgType.Event && row.event === 'pic_weixin'">
+        <Tag>微信相册</Tag>
+      </div>
+      <div
+        v-else-if="
+          row.type === MsgType.Event && row.event === 'location_select'
+        "
+      >
+        <Tag>选择地理位置</Tag>
+      </div>
+      <div v-else-if="row.type === MsgType.Event">
+        <Tag color="error">未知事件类型</Tag>
+      </div>
+
+      <div v-else-if="row.type === MsgType.Text">{{ row.content }}</div>
+      <div v-else-if="row.type === MsgType.Voice">
+        <WxVoicePlayer :url="row.mediaUrl" :content="row.recognition" />
+      </div>
+      <div v-else-if="row.type === MsgType.Image">
+        <a :href="row.mediaUrl" target="_blank">
+          <Image :src="row.mediaUrl" :width="100" :preview="false" />
+        </a>
+      </div>
+      <div v-else-if="row.type === MsgType.Video || row.type === 'shortvideo'">
+        <WxVideoPlayer :url="row.mediaUrl" class="mt-2" />
+      </div>
+      <div v-else-if="row.type === MsgType.Link">
+        <Tag>链接</Tag>
+        ：
+        <a :href="row.url" target="_blank">{{ row.title }}</a>
+      </div>
+      <div v-else-if="row.type === MsgType.Location">
+        <WxLocation
+          :label="row.label"
+          :location-y="row.locationY"
+          :location-x="row.locationX"
+        />
+      </div>
+      <div v-else-if="row.type === MsgType.Music">
+        <WxMusic
+          :title="row.title"
+          :description="row.description"
+          :thumb-media-url="row.thumbMediaUrl"
+          :music-url="row.musicUrl"
+          :hq-music-url="row.hqMusicUrl"
+        />
+      </div>
+      <div v-else-if="row.type === MsgType.News">
+        <WxNews :articles="row.articles" />
+      </div>
+      <div v-else>
+        <Tag color="error">未知消息类型</Tag>
+      </div>
+    </template>
+
+    <template #actions="{ row }">
+      <Button type="link" @click="emit('send', row.userId)"> 消息 </Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/mp/message/index.vue b/apps/web-antd/src/views/mp/message/index.vue
index 9f1028820..87c2b6380 100644
--- a/apps/web-antd/src/views/mp/message/index.vue
+++ b/apps/web-antd/src/views/mp/message/index.vue
@@ -1,28 +1,201 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { Dayjs } from 'dayjs';
 
-import { Button } from 'ant-design-vue';
+import { reactive, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  DatePicker,
+  Form,
+  FormItem,
+  Input,
+  Modal,
+  Pagination,
+  Select,
+} from 'ant-design-vue';
+
+import { getMessagePage } from '#/api/mp/message';
+import { MsgType, WxAccountSelect, WxMsg } from '#/views/mp/components';
+
+import MessageTable from './MessageTable.vue';
+
+defineOptions({ name: 'MpMessage' });
+
+const loading = ref(false);
+const total = ref(0); // 数据的总页数
+const list = ref<any[]>([]); // 当前页的列表数据
+
+// TODO @dylan：是不是参考别的模块简化哈。尽量使用 Grid
+const queryParams = reactive<{
+  accountId: number;
+  createTime: [Dayjs, Dayjs] | undefined;
+  openid: string;
+  pageNo: number;
+  pageSize: number;
+  type: string;
+}>({
+  accountId: -1,
+  createTime: undefined,
+  openid: '',
+  pageNo: 1,
+  pageSize: 10,
+  type: MsgType.Text,
+}); // 搜索参数
+
+const queryFormRef = ref(); // 搜索的表单
+
+// 消息对话框
+const messageBoxVisible = ref(false);
+const messageBoxUserId = ref(0);
+
+/** 侦听 accountId */
+function onAccountChanged(id: number) {
+  queryParams.accountId = id;
+  queryParams.pageNo = 1;
+  handleQuery();
+}
+
+/** 查询列表 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+async function getList() {
+  try {
+    loading.value = true;
+    const data = await getMessagePage(queryParams);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 重置按钮操作 */
+async function resetQuery() {
+  // 暂存 accountId，并在 reset 后恢复
+  const accountId = queryParams.accountId;
+  queryFormRef.value?.resetFields();
+  queryParams.accountId = accountId;
+  handleQuery();
+}
+
+/** 打开消息发送窗口 */
+async function handleSend(userId: number) {
+  messageBoxUserId.value = userId;
+  messageBoxVisible.value = true;
+}
+
+/** 分页改变事件 */
+function handlePageChange(page: number, pageSize: number) {
+  queryParams.pageNo = page;
+  queryParams.pageSize = pageSize;
+  getList();
+}
+
+/** 显示总条数 */
+function showTotal(total: number) {
+  return `共 ${total} 条`;
+}
 </script>
 
 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+  <Page auto-content-height class="flex flex-col">
+    <!-- 搜索工作栏 -->
+    <div class="bg-background mb-4 rounded-lg p-4">
+      <Form
+        ref="queryFormRef"
+        :model="queryParams"
+        layout="inline"
+        class="search-form"
+      >
+        <FormItem label="公众号" name="accountId">
+          <WxAccountSelect @change="onAccountChanged" />
+        </FormItem>
+        <FormItem label="消息类型" name="type">
+          <Select
+            v-model:value="queryParams.type"
+            placeholder="请选择消息类型"
+            class="!w-[240px]"
+          >
+            <Select.Option
+              v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </Select.Option>
+          </Select>
+        </FormItem>
+        <FormItem label="用户标识" name="openid">
+          <Input
+            v-model:value="queryParams.openid"
+            placeholder="请输入用户标识"
+            allow-clear
+            class="!w-[240px]"
+          />
+        </FormItem>
+        <FormItem label="创建时间" name="createTime">
+          <DatePicker.RangePicker
+            v-model:value="queryParams.createTime"
+            :show-time="true"
+            class="!w-[240px]"
+          />
+        </FormItem>
+        <FormItem>
+          <Button type="primary" @click="handleQuery">
+            <template #icon>
+              <IconifyIcon icon="mdi:magnify" />
+            </template>
+            搜索
+          </Button>
+          <Button class="ml-2" @click="resetQuery">
+            <template #icon>
+              <IconifyIcon icon="mdi:refresh" />
+            </template>
+            重置
+          </Button>
+        </FormItem>
+      </Form>
+    </div>
+
+    <!-- 列表 -->
+    <div class="bg-background flex-1 rounded-lg p-4">
+      <MessageTable :list="list" :loading="loading" @send="handleSend" />
+      <div v-show="total > 0" class="mt-4 flex justify-end">
+        <Pagination
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          :total="total"
+          show-size-changer
+          show-quick-jumper
+          :show-total="showTotal"
+          @change="handlePageChange"
+        />
+      </div>
+    </div>
+
+    <!-- 发送消息的弹窗 -->
+    <Modal
+      v-model:open="messageBoxVisible"
+      title="粉丝消息列表"
+      :width="800"
+      :footer="null"
+      destroy-on-close
     >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/message/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/message/index
-      代码，pull request 贡献给我们！
-    </Button>
+      <WxMsg :user-id="messageBoxUserId" />
+    </Modal>
   </Page>
 </template>
+
+<style scoped>
+.search-form :deep(.ant-form-item) {
+  margin-bottom: 16px;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-account-select/index.ts b/apps/web-antd/src/views/mp/modules/wx-account-select/index.ts
deleted file mode 100644
index 148f26872..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-account-select/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// TODO @hw：1）要不统一在 web-antd/src/views/mp/modules 下，搞个 index.ts 去 import 所有；2）这个包名，需要改成 componentns，不是 modules 哈；3）wx 前缀都可以去掉；例如说 account-select.vue
-export { default as WxAccountSelect } from './wx-account-select.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue b/apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue
deleted file mode 100644
index d4f66e74b..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script lang="ts" setup>
-import type { MpAccountApi } from '#/api/mp/account';
-
-import { computed, onMounted, reactive, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
-
-import { useTabs } from '@vben/hooks';
-
-import { message, Select, SelectOption } from 'ant-design-vue';
-
-import { getSimpleAccountList } from '#/api/mp/account';
-
-// TODO @hw：【可讨论】如果这个组件，有办法调整下，让接入的 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/draft/index.vue 判断简单点，也可以。
-
-defineOptions({ name: 'WxAccountSelect' });
-
-const props = defineProps<{
-  modelValue?: number;
-}>();
-
-const emit = defineEmits<{
-  (e: 'change', id: number, name: string): void;
-  (e: 'update:modelValue', id: number): void;
-}>();
-
-const { closeCurrentTab } = useTabs(); // 视图操作
-const { push } = useRouter();
-
-const account: MpAccountApi.AccountSimple = reactive({
-  id: -1,
-  name: '',
-});
-
-const accountList = ref<MpAccountApi.AccountSimple[]>([]);
-
-// 计算当前选中的 ID，优先使用 modelValue（表单绑定），否则使用内部 account.id
-const currentId = computed({
-  get: () => {
-    // 如果外部传入了 modelValue，优先使用外部的值
-    if (props.modelValue !== undefined && props.modelValue !== null) {
-      return props.modelValue;
-    }
-    return account.id;
-  },
-  set: (value: number) => {
-    // 更新内部状态
-    account.id = value;
-    // 同步到外部（表单系统）
-    emit('update:modelValue', value);
-    // 触发 change 事件（保持向后兼容）
-    const found = accountList.value.find(
-      (v: MpAccountApi.AccountSimple) => v.id === value,
-    );
-    if (found) {
-      account.name = found.name;
-      emit('change', value, found.name);
-    }
-  },
-});
-
-// 监听外部 modelValue 变化，同步到内部状态
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    if (
-      newValue !== undefined &&
-      newValue !== null &&
-      newValue !== account.id
-    ) {
-      account.id = newValue;
-      const found = accountList.value.find(
-        (v: MpAccountApi.AccountSimple) => v.id === newValue,
-      );
-      if (found) {
-        account.name = found.name;
-      }
-    }
-  },
-);
-
-/** 查询公众号列表 */
-async function handleQuery() {
-  accountList.value = await getSimpleAccountList();
-  if (accountList.value.length === 0) {
-    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
-    await closeCurrentTab();
-    await push({ name: 'MpAccount' });
-    return;
-  }
-
-  // 如果外部没有传入值（modelValue 为空），默认选中第一个
-  if (props.modelValue === undefined || props.modelValue === null) {
-    const firstAccount = accountList.value[0];
-    if (firstAccount) {
-      currentId.value = firstAccount.id;
-      account.name = firstAccount.name;
-      emit('change', firstAccount.id, firstAccount.name);
-    }
-  } else {
-    // 如果外部有值，同步到内部状态
-    const found = accountList.value.find(
-      (v: MpAccountApi.AccountSimple) => v.id === props.modelValue,
-    );
-    if (found) {
-      account.id = props.modelValue;
-      account.name = found.name;
-    }
-  }
-}
-
-/** 初始化 */
-onMounted(() => {
-  handleQuery();
-});
-</script>
-
-<template>
-  <Select v-model:value="currentId" placeholder="请选择公众号" class="w-full">
-    <SelectOption v-for="item in accountList" :key="item.id" :value="item.id">
-      {{ item.name }}
-    </SelectOption>
-  </Select>
-</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-location/wx-location.vue b/apps/web-antd/src/views/mp/modules/wx-location/wx-location.vue
deleted file mode 100644
index fd1b60bc2..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-location/wx-location.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<!--
-  【微信消息 - 定位】TODO @Dhb52 目前未启用；TODO @芋艿：需要测试下；
--->
-<script lang="ts" setup>
-import { IconifyIcon } from '@vben/icons';
-
-import { Col, Row } from 'ant-design-vue';
-
-defineOptions({ name: 'WxLocation' });
-
-const props = defineProps({
-  locationX: {
-    required: true,
-    type: Number,
-  },
-  locationY: {
-    required: true,
-    type: Number,
-  },
-  label: {
-    // 地名
-    required: true,
-    type: String,
-  },
-  qqMapKey: {
-    // TODO @芋艿：是不是要换成全局的读取？
-    // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
-    required: false,
-    type: String,
-    default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // 需要自定义
-  },
-});
-
-defineExpose({
-  locationX: props.locationX,
-  locationY: props.locationY,
-  label: props.label,
-  qqMapKey: props.qqMapKey,
-});
-</script>
-
-<template>
-  <div>
-    <a
-      target="_blank"
-      :href="`https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${
-        locationY
-      }&pointy=${locationX}&name=${label}&ref=yudao`"
-    >
-      <Col>
-        <Row>
-          <img
-            :src="`https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${
-              locationX
-            },${locationY}&key=${qqMapKey}&size=250*180`"
-          />
-        </Row>
-        <Row>
-          <IconifyIcon icon="lucide:map-pin" />
-          {{ label }}
-        </Row>
-      </Col>
-    </a>
-  </div>
-</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-material-select/types.ts b/apps/web-antd/src/views/mp/modules/wx-material-select/types.ts
deleted file mode 100644
index 2e4f8a8f5..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-material-select/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export enum NewsType {
-  Draft = '2',
-  Published = '1',
-}
-
-// TODO @hw：应该要用到？在 material-select.vue 里？
-export enum MaterialType {
-  Image = 'image',
-  News = 'news',
-  Video = 'video',
-  Voice = 'voice',
-}
diff --git a/apps/web-antd/src/views/mp/modules/wx-material-select/wx-material-select.vue b/apps/web-antd/src/views/mp/modules/wx-material-select/wx-material-select.vue
deleted file mode 100644
index fcd0b3cfb..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-material-select/wx-material-select.vue
+++ /dev/null
@@ -1,282 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, reactive, ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-import { formatTime } from '@vben/utils';
-
-import { Button, Pagination, Row, Spin, Table } from 'ant-design-vue';
-
-import { getDraftPage } from '#/api/mp/draft';
-import { getFreePublishPage } from '#/api/mp/freePublish';
-import { getMaterialPage } from '#/api/mp/material';
-import { WxNews } from '#/views/mp/modules/wx-news';
-import { WxVideoPlayer } from '#/views/mp/modules/wx-video-play';
-import { WxVoicePlayer } from '#/views/mp/modules/wx-voice-play';
-
-import { NewsType } from './types';
-
-defineOptions({ name: 'WxMaterialSelect' });
-
-const props = withDefaults(
-  defineProps<{
-    accountId: number;
-    newsType?: NewsType;
-    type: string;
-  }>(),
-  {
-    newsType: NewsType.Published,
-  },
-);
-
-const emit = defineEmits(['selectMaterial']);
-
-const loading = ref(false); // 遮罩层
-const total = ref(0); // 总条数
-const list = ref<any[]>([]); // 数据列表
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  accountId: props.accountId,
-}); // 查询参数
-
-/** 选择素材 */
-function selectMaterialFun(item: any) {
-  emit('selectMaterial', item);
-}
-
-/** 获取分页数据 */
-async function getPage() {
-  loading.value = true;
-  try {
-    if (props.type === 'news' && props.newsType === NewsType.Published) {
-      // 【图文】+ 【已发布】
-      await getFreePublishPageFun();
-    } else if (props.type === 'news' && props.newsType === NewsType.Draft) {
-      // 【图文】+ 【草稿】
-      await getDraftPageFun();
-    } else {
-      // 【素材】
-      await getMaterialPageFun();
-    }
-  } finally {
-    loading.value = false;
-  }
-}
-
-/** 获取素材分页 */
-async function getMaterialPageFun() {
-  const data = await getMaterialPage({
-    ...queryParams,
-    type: props.type,
-  });
-  list.value = data.list;
-  total.value = data.total;
-}
-
-/** 获取已发布图文分页 */
-async function getFreePublishPageFun() {
-  const data = await getFreePublishPage(queryParams);
-  data.list.forEach((item: any) => {
-    const articles = item.content.newsItem;
-    articles.forEach((article: any) => {
-      article.picUrl = article.thumbUrl;
-    });
-  });
-  list.value = data.list;
-  total.value = data.total;
-}
-
-/** 获取草稿图文分页 */
-async function getDraftPageFun() {
-  const data = await getDraftPage(queryParams);
-  data.list.forEach((draft: any) => {
-    const articles = draft.content.newsItem;
-    articles.forEach((article: any) => {
-      article.picUrl = article.thumbUrl;
-    });
-  });
-  list.value = data.list;
-  total.value = data.total;
-}
-
-// TODO @hw：改成 grid 风格；
-onMounted(async () => {
-  getPage();
-});
-</script>
-
-<template>
-  <div class="pb-30px">
-    <!-- 类型：image -->
-    <div v-if="props.type === 'image'">
-      <Spin :spinning="loading">
-        <div class="waterfall">
-          <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
-            <img class="material-img" :src="item.url" />
-            <p class="item-name">{{ item.name }}</p>
-            <Row class="ope-row">
-              <Button type="primary" @click="selectMaterialFun(item)">
-                选择
-                <IconifyIcon icon="lucide:circle-check" />
-              </Button>
-            </Row>
-          </div>
-        </div>
-      </Spin>
-      <!-- 分页组件 -->
-      <Pagination
-        :total="total"
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @change="getMaterialPageFun"
-      />
-    </div>
-    <!-- 类型：voice -->
-    <div v-else-if="props.type === 'voice'">
-      <!-- 列表 -->
-      <Spin :spinning="loading">
-        <Table :data-source="list">
-          <Table.Column title="编号" data-index="mediaId" align="center" />
-          <Table.Column title="文件名" data-index="name" align="center" />
-          <Table.Column title="语音" align="center">
-            <template #default="{ record }">
-              <WxVoicePlayer :url="record.url" />
-            </template>
-          </Table.Column>
-          <Table.Column title="上传时间" align="center" width="180">
-            <template #default="{ record }">
-              {{ formatTime(record.createTime, 'YYYY-MM-DD HH:mm:ss') }}
-            </template>
-          </Table.Column>
-          <Table.Column title="操作" align="center" fixed="right">
-            <template #default="{ record }">
-              <Button type="link" @click="selectMaterialFun(record)">
-                选择
-                <IconifyIcon icon="lucide:plus" />
-              </Button>
-            </template>
-          </Table.Column>
-        </Table>
-      </Spin>
-      <!-- 分页组件 -->
-      <Pagination
-        :total="total"
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @change="getPage"
-      />
-    </div>
-    <!-- 类型：video -->
-    <div v-else-if="props.type === 'video'">
-      <!-- 列表 -->
-      <Spin :spinning="loading">
-        <Table :data-source="list">
-          <Table.Column title="编号" data-index="mediaId" align="center" />
-          <Table.Column title="文件名" data-index="name" align="center" />
-          <Table.Column title="标题" data-index="title" align="center" />
-          <Table.Column title="介绍" data-index="introduction" align="center" />
-          <Table.Column title="视频" align="center">
-            <template #default="{ record }">
-              <WxVideoPlayer :url="record.url" />
-            </template>
-          </Table.Column>
-          <Table.Column title="上传时间" align="center" width="180">
-            <template #default="{ record }">
-              {{ formatTime(record.createTime, 'YYYY-MM-DD HH:mm:ss') }}
-            </template>
-          </Table.Column>
-          <Table.Column title="操作" align="center" fixed="right">
-            <template #default="{ record }">
-              <Button type="link" @click="selectMaterialFun(record)">
-                选择
-                <IconifyIcon icon="lucide:circle-plus" />
-              </Button>
-            </template>
-          </Table.Column>
-        </Table>
-      </Spin>
-      <!-- 分页组件 -->
-      <Pagination
-        :total="total"
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @change="getMaterialPageFun"
-      />
-    </div>
-    <!-- 类型：news -->
-    <div v-else-if="props.type === 'news'">
-      <Spin :spinning="loading">
-        <div class="waterfall">
-          <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
-            <div v-if="item.content && item.content.newsItem">
-              <WxNews :articles="item.content.newsItem" />
-              <Row class="ope-row">
-                <Button type="primary" @click="selectMaterialFun(item)">
-                  选择
-                  <IconifyIcon icon="lucide:circle-check" />
-                </Button>
-              </Row>
-            </div>
-          </div>
-        </div>
-      </Spin>
-      <!-- 分页组件 -->
-      <Pagination
-        :total="total"
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @change="getMaterialPageFun"
-      />
-    </div>
-  </div>
-</template>
-<style lang="scss" scoped>
-/** TODO @hw：tindwind 风格 */
-@media (width >= 992px) and (width <= 1300px) {
-  .waterfall {
-    column-count: 3;
-  }
-
-  p {
-    color: red;
-  }
-}
-
-@media (width >= 768px) and (width <= 991px) {
-  .waterfall {
-    column-count: 2;
-  }
-
-  p {
-    color: orange;
-  }
-}
-
-@media (width <= 767px) {
-  .waterfall {
-    column-count: 1;
-  }
-}
-
-.waterfall {
-  column-gap: 10px;
-  width: 100%;
-  margin: 0 auto;
-  column-count: 5;
-}
-
-.waterfall-item {
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #eaeaea;
-  break-inside: avoid;
-}
-
-.material-img {
-  width: 100%;
-}
-
-p {
-  line-height: 30px;
-}
-</style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/msg-list.vue b/apps/web-antd/src/views/mp/modules/wx-msg/msg-list.vue
deleted file mode 100644
index 6373dbb93..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-msg/msg-list.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script lang="ts" setup>
-import type { User } from './types';
-
-import { formatDateTime } from '@vben/utils';
-
-import avatarWechat from '#/assets/imgs/wechat.png';
-
-import Msg from './msg.vue';
-
-// 确保 User 类型被识别为已使用
-type PropsUser = User;
-
-defineOptions({ name: 'MsgList' });
-
-const props = defineProps<{
-  accountId: number;
-  list: any[];
-  user: PropsUser;
-}>();
-
-const SendFrom = {
-  MpBot: 2,
-  User: 1,
-} as const; // 使用常量对象替代枚举，避免 linter 误报
-
-type SendFromType = (typeof SendFrom)[keyof typeof SendFrom];
-
-// 显式引用枚举成员供模板使用
-const MpBotValue = SendFrom.MpBot;
-const UserValue = SendFrom.User;
-
-const getAvatar = (sendFrom: SendFromType) =>
-  sendFrom === UserValue ? props.user.avatar : avatarWechat;
-
-const getNickname = (sendFrom: SendFromType) =>
-  sendFrom === UserValue ? props.user.nickname : '公众号';
-</script>
-<template>
-  <div v-for="item in props.list" :key="item.id">
-    <div
-      class="mb-[30px] flex items-start"
-      :class="{ 'flex-row-reverse': item.sendFrom === MpBotValue }"
-    >
-      <div class="w-20 text-center">
-        <img
-          :src="getAvatar(item.sendFrom)"
-          class="box-border h-12 w-12 rounded-full border border-transparent align-middle"
-        />
-        <div class="text-sm font-bold text-[#999]">
-          {{ getNickname(item.sendFrom) }}
-        </div>
-      </div>
-      <div class="relative mx-5 flex-1 rounded-[5px] border border-[#dedede]">
-        <div
-          class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
-        >
-          <div class="avue-comment__create_time">
-            {{ formatDateTime(item.createTime) }}
-          </div>
-        </div>
-        <div
-          class="overflow-hidden rounded-b-[5px] bg-white px-[15px] py-[15px] text-sm text-[#333]"
-          :style="item.sendFrom === MpBotValue ? 'background: #6BED72;' : ''"
-        >
-          <Msg :item="item" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
-/** TODO @hw：这里有没办法重构掉哈。辛苦~~~ */
-@import url('../comment.scss');
-@import url('../card.scss');
-</style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/types.ts b/apps/web-antd/src/views/mp/modules/wx-msg/types.ts
deleted file mode 100644
index e988954ad..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-msg/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export enum MsgType {
-  Event = 'event',
-  Image = 'image',
-  Link = 'link',
-  Location = 'location',
-  Music = 'music',
-  News = 'news',
-  Text = 'text',
-  Video = 'video',
-  Voice = 'voice',
-}
-
-export interface User {
-  nickname: string;
-  avatar: string;
-  accountId: number;
-}
diff --git a/apps/web-antd/src/views/mp/modules/wx-music/wx-music.vue b/apps/web-antd/src/views/mp/modules/wx-music/wx-music.vue
deleted file mode 100644
index 381292e6f..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-music/wx-music.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<!--
-  【微信消息 - 音乐】
--->
-<script lang="ts" setup>
-defineOptions({ name: 'WxMusic' });
-
-const props = defineProps({
-  title: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  description: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  musicUrl: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  hqMusicUrl: {
-    required: false,
-    type: String,
-    default: '',
-  },
-  thumbMediaUrl: {
-    required: true,
-    type: String,
-  },
-});
-
-defineExpose({
-  musicUrl: props.musicUrl,
-});
-</script>
-
-<template>
-  <div>
-    <a
-      target="_blank"
-      :href="hqMusicUrl ? hqMusicUrl : musicUrl"
-      style="text-decoration: none"
-    >
-      <div
-        class="avue-card__body"
-        style="padding: 10px; background-color: #fff; border-radius: 5px"
-      >
-        <div class="avue-card__avatar">
-          <img :src="thumbMediaUrl" alt="" />
-        </div>
-        <div class="avue-card__detail">
-          <div class="avue-card__title" style="margin-bottom: unset">
-            {{ title }}
-          </div>
-          <div class="avue-card__info" style="height: unset">
-            {{ description }}
-          </div>
-        </div>
-      </div>
-    </a>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @hw：这里有没办法重构掉哈。辛苦~~~ */
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
-@import url('../wx-msg/card.scss');
-</style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/index.ts b/apps/web-antd/src/views/mp/modules/wx-reply/index.ts
deleted file mode 100644
index 9e0a3165f..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-reply/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './types';
-export { default as WxReplySelect } from './wx-reply.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-image.vue b/apps/web-antd/src/views/mp/modules/wx-reply/tab-image.vue
deleted file mode 100644
index b629f0902..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-image.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<script lang="ts" setup>
-import type { UploadFile } from 'ant-design-vue';
-
-import type { Reply } from './types';
-
-import { computed, reactive, ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-import { useAccessStore } from '@vben/stores';
-
-import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
-
-import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
-
-const props = defineProps<{
-  modelValue: Reply;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Reply): void;
-}>();
-
-const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
-const reply = computed<Reply>({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-});
-
-const showDialog = ref(false);
-const fileList = ref([]);
-const uploadData = reactive({
-  accountId: reply.value.accountId,
-  type: 'image',
-  title: '',
-  introduction: '',
-});
-
-/** 图片上传前校验 */
-function beforeImageUpload(file: UploadFile) {
-  return useBeforeUpload(UploadType.Image, 2)(file as any);
-}
-
-/** 上传成功 */
-function onUploadSuccess(info: any) {
-  const res = info.response || info;
-  if (res.code !== 0) {
-    message.error(`上传出错：${res.msg}`);
-    return false;
-  }
-
-  // 清空上传时的各种数据
-  fileList.value = [];
-  uploadData.title = '';
-  uploadData.introduction = '';
-
-  // 上传好的文件，本质是个素材，所以可以进行选中
-  selectMaterial(res.data);
-}
-
-/** 删除图片 */
-function onDelete() {
-  reply.value.mediaId = null;
-  reply.value.url = null;
-  reply.value.name = null;
-}
-
-/** 选择素材 */
-function selectMaterial(item: any) {
-  showDialog.value = false;
-
-  // reply.value.type = 'image'
-  reply.value.mediaId = item.mediaId;
-  reply.value.url = item.url;
-  reply.value.name = item.name;
-}
-</script>
-
-<template>
-  <div>
-    <!-- 情况一：已经选择好素材、或者上传好图片 -->
-    <div
-      class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
-      v-if="reply.url"
-    >
-      <img class="w-full" :src="reply.url" />
-      <p
-        class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
-        v-if="reply.name"
-      >
-        {{ reply.name }}
-      </p>
-      <Row class="pt-[10px] text-center" justify="center">
-        <Button type="primary" danger shape="circle" @click="onDelete">
-          <IconifyIcon icon="ep:delete" />
-        </Button>
-      </Row>
-    </div>
-    <!-- 情况二：未做完上述操作 -->
-    <Row v-else class="text-center" align="middle">
-      <!-- 选择素材 -->
-      <Col
-        :span="12"
-        class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
-      >
-        <Button type="primary" @click="showDialog = true">
-          素材库选择 <IconifyIcon icon="ep:circle-check" />
-        </Button>
-        <Modal
-          title="选择图片"
-          v-model:open="showDialog"
-          width="90%"
-          destroy-on-close
-        >
-          <WxMaterialSelect
-            type="image"
-            :account-id="reply.accountId"
-            @select-material="selectMaterial"
-          />
-        </Modal>
-      </Col>
-      <!-- 文件上传 -->
-      <Col
-        :span="12"
-        class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
-      >
-        <Upload
-          :action="UPLOAD_URL"
-          :headers="HEADERS"
-          :file-list="fileList"
-          :data="uploadData"
-          :before-upload="beforeImageUpload"
-          @change="
-            (info) => {
-              if (info.file.status === 'done') {
-                onUploadSuccess(info.file.response || info.file);
-              }
-            }
-          "
-        >
-          <Button type="primary">上传图片</Button>
-          <template #tip>
-            <span>
-              <div class="text-center leading-[18px]">
-                支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
-              </div>
-            </span>
-          </template>
-        </Upload>
-      </Col>
-    </Row>
-  </div>
-</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-music.vue b/apps/web-antd/src/views/mp/modules/wx-reply/tab-music.vue
deleted file mode 100644
index 5e9347b71..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-music.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<script lang="ts" setup>
-import type { UploadFile } from 'ant-design-vue';
-
-import type { Reply } from './types';
-
-import { computed, reactive, ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-import { useAccessStore } from '@vben/stores';
-
-import {
-  Button,
-  Col,
-  Input,
-  message,
-  Modal,
-  Row,
-  Upload,
-} from 'ant-design-vue';
-
-import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
-
-const props = defineProps<{
-  modelValue: Reply;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Reply): void;
-}>();
-
-const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
-const reply = computed<Reply>({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
-});
-
-const showDialog = ref(false);
-const fileList = ref([]);
-const uploadData = reactive({
-  accountId: reply.value.accountId,
-  type: 'thumb', // 音乐类型为thumb
-  title: '',
-  introduction: '',
-});
-
-/** 图片上传前校验 */
-function beforeImageUpload(file: UploadFile) {
-  return useBeforeUpload(UploadType.Image, 2)(file as any);
-}
-
-/** 上传成功 */
-function onUploadSuccess(info: any) {
-  const res = info.response || info;
-  if (res.code !== 0) {
-    message.error(`上传出错：${res.msg}`);
-    return false;
-  }
-
-  // 清空上传时的各种数据
-  fileList.value = [];
-  uploadData.title = '';
-  uploadData.introduction = '';
-
-  // 上传好的文件，本质是个素材，所以可以进行选中
-  selectMaterial(res.data);
-}
-
-/** 选择素材 */
-function selectMaterial(item: any) {
-  showDialog.value = false;
-
-  reply.value.thumbMediaId = item.mediaId;
-  reply.value.thumbMediaUrl = item.url;
-}
-</script>
-
-<template>
-  <div>
-    <Row align="middle" justify="center">
-      <Col :span="6">
-        <Row align="middle" justify="center" class="inline-block text-center">
-          <Col :span="24">
-            <Row align="middle" justify="center">
-              <img
-                class="w-[100px]"
-                v-if="reply.thumbMediaUrl"
-                :src="reply.thumbMediaUrl"
-              />
-              <IconifyIcon v-else icon="ep:plus" />
-            </Row>
-            <Row align="middle" justify="center" class="mt-[2%]">
-              <div>
-                <Upload
-                  :action="UPLOAD_URL"
-                  :headers="HEADERS"
-                  :file-list="fileList"
-                  :data="uploadData"
-                  :before-upload="beforeImageUpload"
-                  @change="
-                    (info) => {
-                      if (info.file.status === 'done') {
-                        onUploadSuccess(info.file.response || info.file);
-                      }
-                    }
-                  "
-                >
-                  <template #default>
-                    <Button type="link">本地上传</Button>
-                  </template>
-                </Upload>
-                <Button type="link" @click="showDialog = true" class="ml-[5px]">
-                  素材库选择
-                </Button>
-              </div>
-            </Row>
-          </Col>
-        </Row>
-        <Modal
-          title="选择图片"
-          v-model:open="showDialog"
-          width="80%"
-          destroy-on-close
-        >
-          <WxMaterialSelect
-            type="image"
-            :account-id="reply.accountId"
-            @select-material="selectMaterial"
-          />
-        </Modal>
-      </Col>
-      <Col :span="18">
-        <Input v-model:value="reply.title as string" placeholder="请输入标题" />
-        <div class="my-5"></div>
-        <Input
-          v-model:value="reply.description as string"
-          placeholder="请输入描述"
-        />
-      </Col>
-    </Row>
-    <div class="my-5"></div>
-    <Input
-      v-model:value="reply.musicUrl as string"
-      placeholder="请输入音乐链接"
-    />
-    <div class="my-5"></div>
-    <Input
-      v-model:value="reply.hqMusicUrl as string"
-      placeholder="请输入高质量音乐链接"
-    />
-  </div>
-</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-video.vue b/apps/web-antd/src/views/mp/modules/wx-reply/tab-video.vue
deleted file mode 100644
index 579a819c1..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-video.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<script lang="ts" setup>
-import type { UploadFile } from 'ant-design-vue';
-import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-
-import type { Reply } from './types';
-
-import { computed, reactive, ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-import { useAccessStore } from '@vben/stores';
-
-import {
-  Button,
-  Col,
-  Input,
-  message,
-  Modal,
-  Row,
-  Upload,
-} from 'ant-design-vue';
-
-import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
-import { WxVideoPlayer } from '#/views/mp/modules/wx-video-play';
-
-const props = defineProps<{
-  modelValue: Reply;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Reply): void;
-}>();
-
-const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
-
-const reply = computed<Reply>({
-  get: () => props.modelValue,
-  set: (val: Reply) => emit('update:modelValue', val),
-});
-
-const showDialog = ref(false);
-const fileList = ref([]);
-const uploadData = reactive({
-  accountId: reply.value.accountId,
-  type: 'video',
-  title: '',
-  introduction: '',
-});
-
-/** 视频上传前校验 */
-function beforeVideoUpload(file: UploadFile) {
-  return useBeforeUpload(UploadType.Video, 10)(file as any);
-}
-
-/** 自定义上传请求 */
-async function customRequest(info: UploadRequestOption) {
-  const formData = new FormData();
-  formData.append('file', info.file as File);
-  formData.append('accountId', String(uploadData.accountId));
-  formData.append('type', uploadData.type);
-  if (uploadData.title) {
-    formData.append('title', uploadData.title);
-  }
-  if (uploadData.introduction) {
-    formData.append('introduction', uploadData.introduction);
-  }
-
-  try {
-    const xhr = new XMLHttpRequest();
-
-    // 监听上传进度
-    xhr.upload.addEventListener('progress', (e) => {
-      if (e.lengthComputable) {
-        const percent = Math.round((e.loaded / e.total) * 100);
-        info.onProgress?.({ percent });
-      }
-    });
-
-    // 监听上传完成
-    xhr.addEventListener('load', () => {
-      if (xhr.status >= 200 && xhr.status < 300) {
-        try {
-          const res = JSON.parse(xhr.responseText);
-          onUploadSuccess(res);
-          info.onSuccess?.(res);
-        } catch {
-          info.onError?.(new Error('解析响应失败'));
-          message.error('上传失败：解析响应失败');
-        }
-      } else {
-        info.onError?.(new Error(`上传失败：HTTP ${xhr.status}`));
-        message.error('上传失败，请重试');
-      }
-    });
-
-    // 监听上传错误
-    xhr.addEventListener('error', () => {
-      info.onError?.(new Error('上传请求失败'));
-      message.error('上传失败，请重试');
-    });
-
-    // 发送请求
-    xhr.open('POST', UPLOAD_URL);
-    xhr.setRequestHeader('Authorization', HEADERS.Authorization);
-    xhr.send(formData);
-  } catch (error: any) {
-    info.onError?.(error);
-    message.error('上传失败，请重试');
-  }
-}
-
-/** 上传成功 */
-function onUploadSuccess(res: any) {
-  if (res.code !== 0) {
-    message.error(`上传出错：${res.msg}`);
-    return false;
-  }
-
-  // 清空上传时的各种数据
-  fileList.value = [];
-  uploadData.title = '';
-  uploadData.introduction = '';
-  selectMaterial(res.data);
-}
-
-/** 选择素材后设置 */
-function selectMaterial(item: any) {
-  showDialog.value = false;
-
-  reply.value.mediaId = item.mediaId;
-  reply.value.url = item.url;
-  reply.value.name = item.name;
-
-  // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
-  if (item.title) {
-    reply.value.title = item.title || '';
-  }
-  if (item.introduction) {
-    reply.value.description = item.introduction || '';
-  }
-}
-</script>
-
-<template>
-  <div>
-    <Row>
-      <Input
-        v-model:value="reply.title as string"
-        class="mb-[2%]"
-        placeholder="请输入标题"
-      />
-      <Input
-        class="mb-[2%]"
-        v-model:value="reply.description as string"
-        placeholder="请输入描述"
-      />
-      <Row class="w-full pt-[10px] text-center" justify="center">
-        <WxVideoPlayer v-if="reply.url" :url="reply.url" />
-      </Row>
-      <Col class="w-full">
-        <Row class="text-center" align="middle">
-          <!-- 选择素材 -->
-          <Col :span="12">
-            <Button type="primary" @click="showDialog = true">
-              素材库选择 <IconifyIcon icon="ep:circle-check" />
-            </Button>
-            <Modal
-              title="选择视频"
-              v-model:open="showDialog"
-              width="90%"
-              destroy-on-close
-            >
-              <WxMaterialSelect
-                type="video"
-                :account-id="reply.accountId"
-                @select-material="selectMaterial"
-              />
-            </Modal>
-          </Col>
-          <!-- 文件上传 -->
-          <Col :span="12">
-            <Upload
-              :file-list="fileList"
-              :before-upload="beforeVideoUpload"
-              :custom-request="customRequest"
-            >
-              <Button type="primary">
-                新建视频 <IconifyIcon icon="ep:upload" />
-              </Button>
-            </Upload>
-          </Col>
-        </Row>
-      </Col>
-    </Row>
-  </div>
-</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-voice.vue b/apps/web-antd/src/views/mp/modules/wx-reply/tab-voice.vue
deleted file mode 100644
index 420b56b27..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-voice.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script lang="ts" setup>
-import type { UploadFile } from 'ant-design-vue';
-
-import type { Reply } from './types';
-
-import { computed, reactive, ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-import { useAccessStore } from '@vben/stores';
-
-import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
-
-import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
-import { WxVoicePlayer } from '#/views/mp/modules/wx-voice-play';
-
-const props = defineProps<{
-  modelValue: Reply;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', v: Reply): void;
-}>();
-
-const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
-const reply = computed<Reply>({
-  get: () => props.modelValue,
-  set: (val: Reply) => emit('update:modelValue', val),
-});
-
-const showDialog = ref(false);
-const fileList = ref([]);
-const uploadData = reactive({
-  accountId: reply.value.accountId,
-  type: 'voice',
-  title: '',
-  introduction: '',
-});
-
-/** 语音上传前校验 */
-function beforeVoiceUpload(file: UploadFile) {
-  return useBeforeUpload(UploadType.Voice, 10)(file as any);
-}
-
-/** 上传成功 */
-function onUploadSuccess(info: any) {
-  const res = info.response || info;
-  if (res.code !== 0) {
-    message.error(`上传出错：${res.msg}`);
-    return false;
-  }
-
-  // 清空上传时的各种数据
-  fileList.value = [];
-  uploadData.title = '';
-  uploadData.introduction = '';
-
-  // 上传好的文件，本质是个素材，所以可以进行选中
-  selectMaterial(res.data);
-}
-
-/** 删除语音 */
-function onDelete() {
-  reply.value.mediaId = null;
-  reply.value.url = null;
-  reply.value.name = null;
-}
-
-/** 选择素材 */
-function selectMaterial(item: Reply) {
-  showDialog.value = false;
-
-  // reply.value.type = ReplyType.Voice
-  reply.value.mediaId = item.mediaId;
-  reply.value.url = item.url;
-  reply.value.name = item.name;
-}
-</script>
-<template>
-  <div>
-    <div
-      class="mx-auto mb-[10px] border border-[#eaeaea] p-[10px]"
-      v-if="reply.url"
-    >
-      <p
-        class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
-      >
-        {{ reply.name }}
-      </p>
-      <Row class="w-full pt-[10px] text-center" justify="center">
-        <WxVoicePlayer :url="reply.url" />
-      </Row>
-      <Row class="w-full pt-[10px] text-center" justify="center">
-        <Button type="primary" danger shape="circle" @click="onDelete">
-          <IconifyIcon icon="ep:delete" />
-        </Button>
-      </Row>
-    </div>
-    <Row v-else class="text-center">
-      <!-- 选择素材 -->
-      <Col
-        :span="12"
-        class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
-      >
-        <Button type="primary" @click="showDialog = true">
-          素材库选择<IconifyIcon icon="ep:circle-check" />
-        </Button>
-        <Modal
-          title="选择语音"
-          v-model:open="showDialog"
-          width="90%"
-          destroy-on-close
-        >
-          <WxMaterialSelect
-            type="voice"
-            :account-id="reply.accountId"
-            @select-material="selectMaterial"
-          />
-        </Modal>
-      </Col>
-      <!-- 文件上传 -->
-      <Col
-        :span="12"
-        class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
-      >
-        <Upload
-          :action="UPLOAD_URL"
-          :headers="HEADERS"
-          :file-list="fileList"
-          :data="uploadData"
-          :before-upload="beforeVoiceUpload"
-          @change="
-            (info) => {
-              if (info.file.status === 'done') {
-                onUploadSuccess(info.file.response || info.file);
-              }
-            }
-          "
-        >
-          <Button type="primary">点击上传</Button>
-          <template #tip>
-            <div class="text-center leading-[18px]">
-              格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
-            </div>
-          </template>
-        </Upload>
-      </Col>
-    </Row>
-  </div>
-</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-video-play/wx-video-play.vue b/apps/web-antd/src/views/mp/modules/wx-video-play/wx-video-play.vue
deleted file mode 100644
index dc1c1d642..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-video-play/wx-video-play.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  【微信消息 - 视频】
-  芋道源码：
-  ① bug 修复：
-    1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
-      存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
-    2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
-  ② 体验优化：弹窗关闭后，自动暂停视频的播放
-
--->
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { VideoPlayer } from '@videojs-player/vue';
-import { Modal } from 'ant-design-vue';
-
-import 'video.js/dist/video-js.css';
-
-defineOptions({ name: 'WxVideoPlayer' });
-
-const props = defineProps({
-  url: {
-    type: String,
-    required: true,
-  },
-});
-
-// TODO @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢
-const dialogVideo = ref(false);
-
-const playVideo = () => {
-  dialogVideo.value = true;
-};
-</script>
-
-<template>
-  <div @click="playVideo()">
-    <!-- 提示 -->
-    <div class="flex cursor-pointer flex-col items-center">
-      <IconifyIcon icon="ep:video-play" class="size-5" />
-      <p class="text-sm">点击播放视频</p>
-    </div>
-
-    <!-- 弹窗播放 -->
-    <Modal
-      v-model:open="dialogVideo"
-      title="视频播放"
-      width="900px"
-      :footer="null"
-    >
-      <VideoPlayer
-        v-if="dialogVideo"
-        class="video-player vjs-big-play-centered"
-        :src="props.url"
-        poster=""
-        controls
-        playsinline
-        :volume="0.6"
-        :width="800"
-        :playback-rates="[0.7, 1.0, 1.5, 2.0]"
-      />
-      <!--     事件，暫時沒用
-      @mounted="handleMounted"-->
-      <!--        @ready="handleEvent($event)"-->
-      <!--        @play="handleEvent($event)"-->
-      <!--        @pause="handleEvent($event)"-->
-      <!--        @ended="handleEvent($event)"-->
-      <!--        @loadeddata="handleEvent($event)"-->
-      <!--        @waiting="handleEvent($event)"-->
-      <!--        @playing="handleEvent($event)"-->
-      <!--        @canplay="handleEvent($event)"-->
-      <!--        @canplaythrough="handleEvent($event)"-->
-      <!--        @timeupdate="handleEvent(player?.currentTime())"-->
-    </Modal>
-  </div>
-</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-voice-play/wx-voice-play.vue b/apps/web-antd/src/views/mp/modules/wx-voice-play/wx-voice-play.vue
deleted file mode 100644
index 14a582b7e..000000000
--- a/apps/web-antd/src/views/mp/modules/wx-voice-play/wx-voice-play.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  【微信消息 - 语音】
-   芋道源码：
-  ① bug 修复：
-    1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
-      存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
-    2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
-  ② 代码优化：将 props 中的 reply 调成为 data 中对应的属性，并补充相关注释
--->
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { Tag } from 'ant-design-vue';
-// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
-import BenzAMRRecorder from 'benz-amr-recorder';
-
-defineOptions({ name: 'WxVoicePlayer' });
-
-const props = defineProps({
-  url: {
-    type: String, // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
-    required: true,
-  },
-  content: {
-    type: String, // 语音文本
-    required: false,
-    default: '',
-  },
-});
-
-const amr = ref();
-const playing = ref(false);
-const duration = ref();
-
-/** 处理点击，播放或暂停 */
-function playVoice() {
-  // 情况一：未初始化，则创建 BenzAMRRecorder
-  if (amr.value === undefined) {
-    amrInit();
-    return;
-  }
-  // 情况二：已经初始化，则根据情况播放或暂时
-  if (amr.value.isPlaying()) {
-    amrStop();
-  } else {
-    amrPlay();
-  }
-}
-
-/** 音频初始化 */
-function amrInit() {
-  amr.value = new BenzAMRRecorder();
-  // 设置播放
-  amr.value.initWithUrl(props.url).then(() => {
-    amrPlay();
-    duration.value = amr.value.getDuration();
-  });
-  // 监听暂停
-  amr.value.onEnded(() => {
-    playing.value = false;
-  });
-}
-
-/** 音频播放 */
-function amrPlay() {
-  playing.value = true;
-  amr.value.play();
-}
-
-/** 音频暂停 */
-function amrStop() {
-  playing.value = false;
-  amr.value.stop();
-}
-// TODO 芋艿：下面样式有点问题
-</script>
-
-<template>
-  <div class="wx-voice-div" @click="playVoice">
-    <IconifyIcon v-if="playing !== true" icon="lucide:circle-play" :size="32" />
-    <IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
-    <span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
-    <div v-if="content">
-      <Tag color="success" size="small">语音识别</Tag>
-      {{ content }}
-    </div>
-  </div>
-</template>
-<style lang="scss" scoped>
-/** TODO @hw：tindwind 替代 */
-.wx-voice-div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 120px;
-  height: 50px;
-  padding: 5px;
-  background-color: #eaeaea;
-  border-radius: 10px;
-}
-
-.amr-duration {
-  margin-left: 5px;
-  font-size: 11px;
-}
-</style>
diff --git a/apps/web-ele/public/static/imgs/ai/dall2.jpg b/apps/web-ele/public/static/imgs/ai/dall2.jpg
new file mode 100644
index 000000000..c07374dc1
Binary files /dev/null and b/apps/web-ele/public/static/imgs/ai/dall2.jpg differ
diff --git a/apps/web-ele/public/static/imgs/ai/dall3.jpg b/apps/web-ele/public/static/imgs/ai/dall3.jpg
new file mode 100644
index 000000000..7f45803ba
Binary files /dev/null and b/apps/web-ele/public/static/imgs/ai/dall3.jpg differ
diff --git a/apps/web-ele/public/static/imgs/ai/qingxi.jpg b/apps/web-ele/public/static/imgs/ai/qingxi.jpg
new file mode 100644
index 000000000..d76b81563
Binary files /dev/null and b/apps/web-ele/public/static/imgs/ai/qingxi.jpg differ
diff --git a/apps/web-ele/public/static/imgs/ai/ziran.jpg b/apps/web-ele/public/static/imgs/ai/ziran.jpg
new file mode 100644
index 000000000..62907242a
Binary files /dev/null and b/apps/web-ele/public/static/imgs/ai/ziran.jpg differ
diff --git a/apps/web-ele/src/api/ai/image/index.ts b/apps/web-ele/src/api/ai/image/index.ts
index 19970eeac..c4c278ce6 100644
--- a/apps/web-ele/src/api/ai/image/index.ts
+++ b/apps/web-ele/src/api/ai/image/index.ts
@@ -9,9 +9,11 @@ export namespace AiImageApi {
     label: string; // Make Variations 文本
     style: number; // 样式: 2（Primary）、3（Green）
   }
-  // AI 绘图
+
+  /** AI 绘图 */
   export interface Image {
     id: number; // 编号
+    userId: number;
     platform: string; // 平台
     model: string; // 模型
     prompt: string; // 提示词
@@ -82,6 +84,7 @@ export function deleteImageMy(id: number) {
 }
 
 // ================ midjourney 专属 ================
+
 // 【Midjourney】生成图片
 export function midjourneyImagine(data: AiImageApi.ImageMidjourneyImagineReq) {
   return requestClient.post(`/ai/image/midjourney/imagine`, data);
@@ -93,6 +96,7 @@ export function midjourneyAction(data: AiImageApi.ImageMidjourneyAction) {
 }
 
 // ================ 绘图管理 ================
+
 // 查询绘画分页
 export function getImagePage(params: any) {
   return requestClient.get<AiImageApi.Image[]>(`/ai/image/page`, { params });
diff --git a/apps/web-ele/src/api/ai/knowledge/knowledge/index.ts b/apps/web-ele/src/api/ai/knowledge/knowledge/index.ts
index 7140d8b48..03f70bd9a 100644
--- a/apps/web-ele/src/api/ai/knowledge/knowledge/index.ts
+++ b/apps/web-ele/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);
diff --git a/apps/web-ele/src/api/ai/knowledge/segment/index.ts b/apps/web-ele/src/api/ai/knowledge/segment/index.ts
index 2635c772f..e9baf662e 100644
--- a/apps/web-ele/src/api/ai/knowledge/segment/index.ts
+++ b/apps/web-ele/src/api/ai/knowledge/segment/index.ts
@@ -48,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}`);
diff --git a/apps/web-ele/src/api/ai/workflow/index.ts b/apps/web-ele/src/api/ai/workflow/index.ts
index a383d0cd0..676d6337c 100644
--- a/apps/web-ele/src/api/ai/workflow/index.ts
+++ b/apps/web-ele/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);
-};
+}
diff --git a/apps/web-ele/src/api/mall/promotion/kefu/conversation/index.ts b/apps/web-ele/src/api/mall/promotion/kefu/conversation/index.ts
index 6510dc0ec..497bd1a50 100644
--- a/apps/web-ele/src/api/mall/promotion/kefu/conversation/index.ts
+++ b/apps/web-ele/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',
   );
 }
diff --git a/apps/web-ele/src/api/mp/account/index.ts b/apps/web-ele/src/api/mp/account/index.ts
index c5ee331b0..5bd402230 100644
--- a/apps/web-ele/src/api/mp/account/index.ts
+++ b/apps/web-ele/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;
diff --git a/apps/web-ele/src/components/table-action/icons.ts b/apps/web-ele/src/components/table-action/icons.ts
index 985871956..e6722e155 100644
--- a/apps/web-ele/src/components/table-action/icons.ts
+++ b/apps/web-ele/src/components/table-action/icons.ts
@@ -10,4 +10,5 @@ export const ACTION_ICON = {
   MORE: 'lucide:ellipsis-vertical',
   VIEW: 'lucide:eye',
   COPY: 'lucide:copy',
+  BOOK: 'lucide:book',
 };
diff --git a/apps/web-ele/src/router/routes/modules/ai.ts b/apps/web-ele/src/router/routes/modules/ai.ts
new file mode 100644
index 000000000..dc66c4927
--- /dev/null
+++ b/apps/web-ele/src/router/routes/modules/ai.ts
@@ -0,0 +1,113 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/ai',
+    name: 'Ai',
+    meta: {
+      title: 'Ai',
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: 'image/square',
+        component: () => import('#/views/ai/image/square/index.vue'),
+        name: 'AiImageSquare',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '绘图作品',
+          activePath: '/ai/image',
+        },
+      },
+      {
+        path: 'knowledge/document',
+        component: () => import('#/views/ai/knowledge/document/index.vue'),
+        name: 'AiKnowledgeDocument',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '知识库文档',
+          activePath: '/ai/knowledge',
+        },
+      },
+      {
+        path: 'knowledge/document/create',
+        component: () => import('#/views/ai/knowledge/document/form/index.vue'),
+        name: 'AiKnowledgeDocumentCreate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '创建文档',
+          activePath: '/ai/knowledge',
+        },
+      },
+      {
+        path: 'knowledge/document/update',
+        component: () => import('#/views/ai/knowledge/document/form/index.vue'),
+        name: 'AiKnowledgeDocumentUpdate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '修改文档',
+          activePath: '/ai/knowledge',
+        },
+      },
+      {
+        path: 'knowledge/retrieval',
+        component: () =>
+          import('#/views/ai/knowledge/knowledge/retrieval/index.vue'),
+        name: 'AiKnowledgeRetrieval',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '文档召回测试',
+          activePath: '/ai/knowledge',
+        },
+      },
+      {
+        path: 'knowledge/segment',
+        component: () => import('#/views/ai/knowledge/segment/index.vue'),
+        name: 'AiKnowledgeSegment',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '知识库分段',
+          activePath: '/ai/knowledge',
+        },
+      },
+      {
+        path: String.raw`workflow/create/:id(\d+)/:type(update|create)`,
+        component: () => import('#/views/ai/workflow/form/index.vue'),
+        name: 'AiWorkflowCreate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '设计 AI 工作流',
+          activePath: '/ai/workflow',
+        },
+      },
+      {
+        path: 'console/workflow/:type/:id',
+        component: () => import('#/views/ai/workflow/form/index.vue'),
+        name: 'AiWorkflowUpdate',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '设计 AI 工作流',
+          activePath: '/ai/workflow',
+        },
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/web-ele/src/views/ai/image/index/index.vue b/apps/web-ele/src/views/ai/image/index/index.vue
new file mode 100644
index 000000000..03c9ade9d
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/index/index.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { AiImageApi } from '#/api/ai/image';
+import type { AiModelModelApi } from '#/api/ai/model/model';
+
+import { nextTick, onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { AiModelTypeEnum, AiPlatformEnum } from '@vben/constants';
+
+import { ElSegmented } from 'element-plus';
+
+import { getModelSimpleList } from '#/api/ai/model/model';
+
+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
+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 = [
+  {
+    label: '通用',
+    value: 'common',
+  },
+  {
+    label: 'DALL3 绘画',
+    value: AiPlatformEnum.OPENAI,
+  },
+  {
+    label: 'MJ 绘画',
+    value: AiPlatformEnum.MIDJOURNEY,
+  },
+  {
+    label: 'SD 绘图',
+    value: AiPlatformEnum.STABLE_DIFFUSION,
+  },
+];
+const models = ref<AiModelModelApi.Model[]>([]); // 模型列表
+
+/** 绘画 start  */
+async function handleDrawStart() {}
+
+/** 绘画 complete */
+async function handleDrawComplete() {
+  await imageListRef.value.getImageList();
+}
+
+/** 重新生成：将画图详情填充到对应平台 */
+async function handleRegeneration(image: AiImageApi.Image) {
+  // 切换平台
+  selectPlatform.value = image.platform;
+  // 根据不同平台填充 image
+  await nextTick();
+  switch (image.platform) {
+    case AiPlatformEnum.MIDJOURNEY: {
+      midjourneyRef.value.settingValues(image);
+
+      break;
+    }
+    case AiPlatformEnum.OPENAI: {
+      dall3Ref.value.settingValues(image);
+
+      break;
+    }
+    case AiPlatformEnum.STABLE_DIFFUSION: {
+      stableDiffusionRef.value.settingValues(image);
+
+      break;
+    }
+    // No default
+  }
+  // TODO @fan：貌似 other 重新设置不行？
+}
+
+/** 组件挂载的时候 */
+onMounted(async () => {
+  // 获取模型列表
+  models.value = await getModelSimpleList(AiModelTypeEnum.IMAGE);
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="absolute inset-0 m-4 flex h-full w-full flex-row">
+      <div class="bg-card left-0 mr-4 flex w-96 flex-col rounded-lg p-4">
+        <div class="flex justify-center">
+          <ElSegmented v-model="selectPlatform" :options="platformOptions" />
+        </div>
+        <div class="mt-8 h-full overflow-y-auto">
+          <Common
+            v-if="selectPlatform === 'common'"
+            ref="commonRef"
+            :models="models"
+            @on-draw-complete="handleDrawComplete"
+          />
+          <Dall3
+            v-if="selectPlatform === AiPlatformEnum.OPENAI"
+            ref="dall3Ref"
+            :models="models"
+            @on-draw-start="handleDrawStart"
+            @on-draw-complete="handleDrawComplete"
+          />
+          <Midjourney
+            v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY"
+            ref="midjourneyRef"
+            :models="models"
+          />
+          <StableDiffusion
+            v-if="selectPlatform === AiPlatformEnum.STABLE_DIFFUSION"
+            ref="stableDiffusionRef"
+            :models="models"
+            @on-draw-complete="handleDrawComplete"
+          />
+        </div>
+      </div>
+      <div class="bg-card flex-1">
+        <ImageList ref="imageListRef" @on-regeneration="handleRegeneration" />
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/image/index/modules/card.vue b/apps/web-ele/src/views/ai/image/index/modules/card.vue
new file mode 100644
index 000000000..91018c742
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/index/modules/card.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import type { AiImageApi } from '#/api/ai/image';
+
+import { onMounted, ref, toRefs, watch } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+import { AiImageStatusEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElCard, ElImage, ElMessage } from 'element-plus';
+
+const props = defineProps({
+  detail: {
+    type: Object as PropType<AiImageApi.Image>,
+    default: () => ({}),
+  },
+});
+const emits = defineEmits(['onBtnClick', 'onMjBtnClick']);
+
+const cardImageRef = ref<any>(); // 卡片 image ref
+
+/** 处理点击事件  */
+async function handleButtonClick(type: string, detail: AiImageApi.Image) {
+  emits('onBtnClick', type, detail);
+}
+
+/** 处理 Midjourney 按钮点击事件  */
+async function handleMidjourneyBtnClick(
+  button: AiImageApi.ImageMidjourneyButtons,
+) {
+  await confirm(`确认操作 "${button.label} ${button.emoji}" ?`);
+  emits('onMjBtnClick', button, props.detail);
+}
+
+/** 监听详情 */
+const { detail } = toRefs(props);
+watch(detail, async (newVal) => {
+  await handleLoading(newVal.status);
+});
+const loading = ref();
+
+/** 处理加载状态 */
+async function handleLoading(status: number) {
+  // 情况一：如果是生成中，则设置加载中的 loading
+  if (status === AiImageStatusEnum.IN_PROGRESS) {
+    loading.value = ElMessage({
+      message: `生成中...`,
+      type: 'info',
+    });
+  } else {
+    // 情况二：如果已经生成结束，则移除 loading
+    if (loading.value) {
+      setTimeout(() => loading.value.close(), 100);
+    }
+  }
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await handleLoading(props.detail.status);
+});
+</script>
+<template>
+  <ElCard class="relative flex h-auto w-80 flex-col rounded-lg">
+    <!-- 图片操作区 -->
+    <div class="flex flex-row justify-between">
+      <div>
+        <ElButton v-if="detail?.status === AiImageStatusEnum.IN_PROGRESS">
+          生成中
+        </ElButton>
+        <ElButton v-else-if="detail?.status === AiImageStatusEnum.SUCCESS">
+          已完成
+        </ElButton>
+        <ElButton
+          type="danger"
+          v-else-if="detail?.status === AiImageStatusEnum.FAIL"
+        >
+          异常
+        </ElButton>
+      </div>
+      <div class="flex">
+        <ElButton
+          class="m-0 p-2"
+          text
+          @click="handleButtonClick('download', detail)"
+        >
+          <IconifyIcon icon="lucide:download" />
+        </ElButton>
+        <ElButton
+          class="m-0 p-2"
+          text
+          @click="handleButtonClick('regeneration', detail)"
+        >
+          <IconifyIcon icon="lucide:refresh-cw" />
+        </ElButton>
+        <ElButton
+          class="m-0 p-2"
+          text
+          @click="handleButtonClick('delete', detail)"
+        >
+          <IconifyIcon icon="lucide:trash" />
+        </ElButton>
+        <ElButton
+          class="m-0 p-2"
+          text
+          @click="handleButtonClick('more', detail)"
+        >
+          <IconifyIcon icon="lucide:ellipsis-vertical" />
+        </ElButton>
+      </div>
+    </div>
+
+    <!-- 图片展示区域 -->
+    <div class="mt-5 h-72 flex-1 overflow-hidden" ref="cardImageRef">
+      <ElImage class="w-full rounded-lg" :src="detail?.picUrl" />
+      <div v-if="detail?.status === AiImageStatusEnum.FAIL">
+        {{ detail?.errorMessage }}
+      </div>
+    </div>
+
+    <!-- Midjourney 专属操作按钮 -->
+    <div class="mt-2 flex w-full flex-wrap justify-start">
+      <ElButton
+        size="small"
+        v-for="(button, index) in detail?.buttons"
+        :key="index"
+        class="m-2 ml-0 min-w-10"
+        @click="handleMidjourneyBtnClick(button)"
+      >
+        {{ button.label }}{{ button.emoji }}
+      </ElButton>
+    </div>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/ai/image/index/modules/common/index.vue b/apps/web-ele/src/views/ai/image/index/modules/common/index.vue
new file mode 100644
index 000000000..98a40863d
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/index/modules/common/index.vue
@@ -0,0 +1,226 @@
+<!-- dall3 -->
+<script setup lang="ts">
+import type { AiImageApi } from '#/api/ai/image';
+import type { AiModelModelApi } from '#/api/ai/model/model';
+
+import { ref, watch } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+import {
+  AiPlatformEnum,
+  ImageHotWords,
+  OtherPlatformEnum,
+} from '@vben/constants';
+
+import {
+  ElButton,
+  ElInputNumber,
+  ElOption,
+  ElSelect,
+  ElSpace,
+} from 'element-plus';
+
+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); // 图片高度
+const otherPlatform = ref<string>(AiPlatformEnum.TONG_YI); // 平台
+const platformModels = ref<AiModelModelApi.Model[]>([]); // 模型列表
+const modelId = ref<number>(); // 选中的模型
+
+/** 选择热词 */
+async function handleHotWordClick(hotWord: string) {
+  // 情况一：取消选中
+  if (selectHotWord.value === hotWord) {
+    selectHotWord.value = '';
+    return;
+  }
+  // 情况二：选中
+  selectHotWord.value = hotWord; // 选中
+  prompt.value = hotWord; // 替换提示词
+}
+
+/** 图片生成 */
+async function handleGenerateImage() {
+  // 二次确认
+  await confirm(`确认生成内容?`);
+  try {
+    // 加载中
+    drawIn.value = true;
+    // 回调
+    emits('onDrawStart', otherPlatform.value);
+    // 发送请求
+    const form = {
+      platform: otherPlatform.value,
+      modelId: modelId.value, // 模型
+      prompt: prompt.value, // 提示词
+      width: width.value, // 图片宽度
+      height: height.value, // 图片高度
+      options: {},
+    } as unknown as AiImageApi.ImageDrawReq;
+    await drawImage(form);
+  } finally {
+    // 回调
+    emits('onDrawComplete', otherPlatform.value);
+    // 加载结束
+    drawIn.value = false;
+  }
+}
+
+/** 填充值 */
+async function settingValues(detail: AiImageApi.Image) {
+  prompt.value = detail.prompt;
+  width.value = detail.width;
+  height.value = detail.height;
+}
+
+/** 平台切换 */
+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 变化 */
+watch(
+  () => props.models,
+  () => {
+    handlerPlatformChange(otherPlatform.value);
+  },
+  { immediate: true, deep: true },
+);
+
+defineExpose({ settingValues });
+</script>
+<template>
+  <div class="prompt">
+    <b>画面描述</b>
+    <p>建议使用"形容词 + 动词 + 风格"的格式，使用"，"隔开</p>
+    <el-input
+      v-model="prompt"
+      :maxlength="1024"
+      :rows="5"
+      type="textarea"
+      class="mt-4 w-full"
+      placeholder="例如：童话里的小屋应该是什么样子？"
+      show-word-limit
+    />
+  </div>
+
+  <div class="mt-8 flex flex-col">
+    <div>
+      <b>随机热词</b>
+    </div>
+    <ElSpace wrap class="mt-4 flex flex-wrap justify-start">
+      <ElButton
+        round
+        class="m-0"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
+      >
+        {{ hotWord }}
+      </ElButton>
+    </ElSpace>
+  </div>
+
+  <div class="mt-8">
+    <div>
+      <b>平台</b>
+    </div>
+    <ElSpace wrap class="mt-4 w-full">
+      <ElSelect
+        v-model="otherPlatform"
+        placeholder="Select"
+        size="large"
+        class="!w-80"
+        @change="handlerPlatformChange"
+      >
+        <ElOption
+          v-for="item in OtherPlatformEnum"
+          :key="item.key"
+          :value="item.key"
+          :label="item.name"
+        >
+          {{ item.name }}
+        </ElOption>
+      </ElSelect>
+    </ElSpace>
+  </div>
+
+  <div class="mt-8">
+    <div>
+      <b>模型</b>
+    </div>
+    <ElSpace wrap class="mt-4 w-full">
+      <ElSelect
+        v-model="modelId"
+        placeholder="Select"
+        size="large"
+        class="!w-80"
+      >
+        <ElOption
+          v-for="item in platformModels"
+          :key="item.id"
+          :value="item.id"
+          :label="item.name"
+        >
+          {{ item.name }}
+        </ElOption>
+      </ElSelect>
+    </ElSpace>
+  </div>
+
+  <div class="mt-8">
+    <div>
+      <b>图片尺寸</b>
+    </div>
+    <div class="mt-4 flex items-center gap-2">
+      <ElInputNumber
+        v-model="width"
+        placeholder="图片宽度"
+        controls-position="right"
+        class="!w-32"
+      />
+      <span class="mx-2">×</span>
+      <ElInputNumber
+        v-model="height"
+        placeholder="图片高度"
+        controls-position="right"
+        class="!w-32"
+      />
+    </div>
+  </div>
+
+  <div class="mt-12 flex justify-center">
+    <ElButton
+      type="primary"
+      size="large"
+      round
+      :loading="drawIn"
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </ElButton>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/image/index/modules/dall3/index.vue b/apps/web-ele/src/views/ai/image/index/modules/dall3/index.vue
new file mode 100644
index 000000000..e2fd3ea1a
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/index/modules/dall3/index.vue
@@ -0,0 +1,260 @@
+<!-- dall3 -->
+<script setup lang="ts">
+import type { ImageModel, ImageSize } from '@vben/constants';
+
+import type { AiImageApi } from '#/api/ai/image';
+import type { AiModelModelApi } from '#/api/ai/model/model';
+
+import { ref } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+import {
+  AiPlatformEnum,
+  Dall3Models,
+  Dall3SizeList,
+  Dall3StyleList,
+  ImageHotWords,
+} from '@vben/constants';
+
+import { ElButton, ElImage, ElMessage, ElSpace } from 'element-plus';
+
+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>(''); // 选中的热词
+const selectModel = ref<string>('dall-e-3'); // 模型
+const selectSize = ref<string>('1024x1024'); // 选中 size
+const style = ref<string>('vivid'); // style 样式
+
+/** 选择热词 */
+async function handleHotWordClick(hotWord: string) {
+  // 情况一：取消选中
+  if (selectHotWord.value === hotWord) {
+    selectHotWord.value = '';
+    return;
+  }
+  // 情况二：选中
+  selectHotWord.value = hotWord;
+  prompt.value = hotWord;
+}
+
+/** 选择 model 模型 */
+async function handleModelClick(model: ImageModel) {
+  selectModel.value = model.key;
+  // 可以在这里添加模型特定的处理逻辑
+  // 例如，如果未来需要根据不同模型设置不同参数
+  if (model.key === 'dall-e-3') {
+    // DALL-E-3 模型特定的处理
+    style.value = 'vivid'; // 默认设置vivid风格
+  } else if (model.key === 'dall-e-2') {
+    // DALL-E-2 模型特定的处理
+    style.value = 'natural'; // 如果有其他DALL-E-2适合的默认风格
+  }
+
+  // 更新其他相关参数
+  // 例如可以默认选择最适合当前模型的尺寸
+  const recommendedSize = Dall3SizeList.find(
+    (size) =>
+      (model.key === 'dall-e-3' && size.key === '1024x1024') ||
+      (model.key === 'dall-e-2' && size.key === '512x512'),
+  );
+
+  if (recommendedSize) {
+    selectSize.value = recommendedSize.key;
+  }
+}
+
+/** 选择 style 样式  */
+async function handleStyleClick(imageStyle: ImageModel) {
+  style.value = imageStyle.key;
+}
+
+/** 选择 size 大小  */
+async function handleSizeClick(imageSize: ImageSize) {
+  selectSize.value = imageSize.key;
+}
+
+/**  图片生产  */
+async function handleGenerateImage() {
+  // 从 models 中查找匹配的模型
+  const matchedModel = props.models.find(
+    (item) =>
+      item.model === selectModel.value &&
+      item.platform === AiPlatformEnum.OPENAI,
+  );
+  if (!matchedModel) {
+    ElMessage.error('该模型不可用，请选择其它模型');
+    return;
+  }
+
+  // 二次确认
+  await confirm(`确认生成内容?`);
+  try {
+    // 加载中
+    drawIn.value = true;
+    // 回调
+    emits('onDrawStart', AiPlatformEnum.OPENAI);
+    const imageSize = Dall3SizeList.find(
+      (item) => item.key === selectSize.value,
+    ) as ImageSize;
+    const form = {
+      platform: AiPlatformEnum.OPENAI,
+      prompt: prompt.value, // 提示词
+      modelId: matchedModel.id, // 使用匹配到的模型
+      style: style.value, // 图像生成的风格
+      width: imageSize.width, // size 不能为空
+      height: imageSize.height, // size 不能为空
+      options: {
+        style: style.value, // 图像生成的风格
+      },
+    } as AiImageApi.ImageDrawReq;
+    // 发送请求
+    await drawImage(form);
+  } finally {
+    // 回调
+    emits('onDrawComplete', AiPlatformEnum.OPENAI);
+    // 加载结束
+    drawIn.value = false;
+  }
+}
+
+/** 填充值 */
+async function settingValues(detail: AiImageApi.Image) {
+  prompt.value = detail.prompt;
+  selectModel.value = detail.model;
+  style.value = detail.options?.style;
+  const imageSize = Dall3SizeList.find(
+    (item) => item.key === `${detail.width}x${detail.height}`,
+  ) as ImageSize;
+  await handleSizeClick(imageSize);
+}
+
+/** 暴露组件方法 */
+defineExpose({ settingValues });
+</script>
+<template>
+  <div class="prompt">
+    <b>画面描述</b>
+    <p>建议使用"形容词 + 动词 + 风格"的格式，使用"，"隔开</p>
+    <el-input
+      v-model="prompt"
+      :maxlength="1024"
+      :rows="5"
+      type="textarea"
+      class="mt-4 w-full"
+      placeholder="例如：童话里的小屋应该是什么样子？"
+      show-word-limit
+    />
+  </div>
+
+  <div class="mt-8 flex flex-col">
+    <div><b>随机热词</b></div>
+    <ElSpace wrap class="mt-4 flex flex-wrap justify-start">
+      <ElButton
+        round
+        class="m-0"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
+      >
+        {{ hotWord }}
+      </ElButton>
+    </ElSpace>
+  </div>
+
+  <div class="mt-8">
+    <div><b>模型选择</b></div>
+    <ElSpace wrap class="mt-4 flex flex-wrap gap-2">
+      <div
+        class="flex w-28 cursor-pointer flex-col items-center overflow-hidden rounded-lg border-2"
+        :class="[
+          selectModel === model.key ? '!border-blue-500' : 'border-transparent',
+        ]"
+        v-for="model in Dall3Models"
+        :key="model.key"
+        @click="handleModelClick(model)"
+      >
+        <ElImage
+          :preview-src-list="[]"
+          :src="model.image"
+          fit="contain"
+          class="w-full"
+        />
+        <div class="text-sm font-bold text-gray-600">
+          {{ model.name }}
+        </div>
+      </div>
+    </ElSpace>
+  </div>
+
+  <div class="mt-8">
+    <div><b>风格选择</b></div>
+    <ElSpace wrap class="mt-4 flex flex-wrap gap-2">
+      <div
+        class="flex w-28 cursor-pointer flex-col items-center overflow-hidden rounded-lg border-2"
+        :class="[
+          style === imageStyle.key ? 'border-blue-500' : 'border-transparent',
+        ]"
+        v-for="imageStyle in Dall3StyleList"
+        :key="imageStyle.key"
+      >
+        <ElImage
+          :preview-src-list="[]"
+          :src="imageStyle.image"
+          fit="contain"
+          @click="handleStyleClick(imageStyle)"
+        />
+        <div class="text-sm font-bold text-gray-600">
+          {{ imageStyle.name }}
+        </div>
+      </div>
+    </ElSpace>
+  </div>
+
+  <div class="mt-8 w-full">
+    <div><b>画面比例</b></div>
+    <ElSpace wrap class="mt-5 flex w-full flex-wrap gap-2">
+      <div
+        class="flex cursor-pointer flex-col items-center"
+        v-for="imageSize in Dall3SizeList"
+        :key="imageSize.key"
+        @click="handleSizeClick(imageSize)"
+      >
+        <div
+          class="bg-card flex h-12 w-12 flex-col items-center justify-center rounded-lg border p-0"
+          :class="[
+            selectSize === imageSize.key ? 'border-blue-500' : 'border-white',
+          ]"
+        >
+          <div :style="imageSize.style"></div>
+        </div>
+        <div class="text-sm font-bold text-gray-600">
+          {{ imageSize.name }}
+        </div>
+      </div>
+    </ElSpace>
+  </div>
+
+  <div class="mt-12 flex justify-center">
+    <ElButton
+      type="primary"
+      size="large"
+      round
+      :loading="drawIn"
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </ElButton>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/image/index/modules/detail.vue b/apps/web-ele/src/views/ai/image/index/modules/detail.vue
new file mode 100644
index 000000000..7959a44c1
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/index/modules/detail.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import type { AiImageApi } from '#/api/ai/image';
+
+import { ref, toRefs, watch } from 'vue';
+
+import {
+  AiPlatformEnum,
+  Dall3StyleList,
+  StableDiffusionClipGuidancePresets,
+  StableDiffusionSamplers,
+  StableDiffusionStylePresets,
+} from '@vben/constants';
+import { formatDateTime } from '@vben/utils';
+
+import { ElImage } from 'element-plus';
+
+import { getImageMy } from '#/api/ai/image';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+});
+
+const detail = ref<AiImageApi.Image>({} as AiImageApi.Image); // 图片详细信息
+
+/** 获取图片详情  */
+async function getImageDetail(id: number) {
+  detail.value = await getImageMy(id);
+}
+
+const { id } = toRefs(props);
+watch(
+  id,
+  async (newVal) => {
+    if (newVal) {
+      await getImageDetail(newVal);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="mb-5 w-full overflow-hidden break-words">
+    <div class="mt-2">
+      <ElImage class="rounded-lg" :src="detail?.picUrl" />
+    </div>
+  </div>
+
+  <!-- 时间 -->
+  <div class="mb-5 w-full overflow-hidden break-words">
+    <div class="text-lg font-bold">时间</div>
+    <div class="mt-2">
+      <div>提交时间：{{ formatDateTime(detail.createTime) }}</div>
+      <div>生成时间：{{ formatDateTime(detail.finishTime) }}</div>
+    </div>
+  </div>
+
+  <!-- 模型 -->
+  <div class="mb-5 w-full overflow-hidden break-words">
+    <div class="text-lg font-bold">模型</div>
+    <div class="mt-2">
+      {{ detail.model }}({{ detail.height }}x{{ detail.width }})
+    </div>
+  </div>
+
+  <!-- 提示词 -->
+  <div class="mb-5 w-full overflow-hidden break-words">
+    <div class="text-lg font-bold">提示词</div>
+    <div class="mt-2">
+      {{ detail.prompt }}
+    </div>
+  </div>
+
+  <!-- 图片地址 -->
+  <div class="mb-5 w-full overflow-hidden break-words">
+    <div class="text-lg font-bold">图片地址</div>
+    <div class="mt-2">
+      {{ detail.picUrl }}
+    </div>
+  </div>
+
+  <!-- StableDiffusion 专属 -->
+  <div
+    v-if="
+      detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
+      detail?.options?.sampler
+    "
+    class="mb-5 w-full overflow-hidden break-words"
+  >
+    <div class="text-lg font-bold">采样方法</div>
+    <div class="mt-2">
+      {{
+        StableDiffusionSamplers.find(
+          (item) => item.key === detail?.options?.sampler,
+        )?.name
+      }}
+    </div>
+  </div>
+
+  <div
+    v-if="
+      detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
+      detail?.options?.clipGuidancePreset
+    "
+    class="mb-5 w-full overflow-hidden break-words"
+  >
+    <div class="text-lg font-bold">CLIP</div>
+    <div class="mt-2">
+      {{
+        StableDiffusionClipGuidancePresets.find(
+          (item) => item.key === detail?.options?.clipGuidancePreset,
+        )?.name
+      }}
+    </div>
+  </div>
+
+  <div
+    v-if="
+      detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
+      detail?.options?.stylePreset
+    "
+    class="mb-5 w-full overflow-hidden break-words"
+  >
+    <div class="text-lg font-bold">风格</div>
+    <div class="mt-2">
+      {{
+        StableDiffusionStylePresets.find(
+          (item) => item.key === detail?.options?.stylePreset,
+        )?.name
+      }}
+    </div>
+  </div>
+
+  <div
+    v-if="
+      detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
+      detail?.options?.steps
+    "
+    class="mb-5 w-full overflow-hidden break-words"
+  >
+    <div class="text-lg font-bold">迭代步数</div>
+    <div class="mt-2">{{ detail?.options?.steps }}</div>
+  </div>
+
+  <div
+    v-if="
+      detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
+      detail?.options?.scale
+    "
+    class="mb-5 w-full overflow-hidden break-words"
+  >
+    <div class="text-lg font-bold">引导系数</div>
+    <div class="mt-2">{{ detail?.options?.scale }}</div>
+  </div>
+
+  <div
+    v-if="
+      detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
+      detail?.options?.seed
+    "
+    class="mb-5 w-full overflow-hidden break-words"
+  >
+    <div class="text-lg font-bold">随机因子</div>
+    <div class="mt-2">{{ detail?.options?.seed }}</div>
+  </div>
+
+  <!-- Dall3 专属 -->
+  <div
+    v-if="detail.platform === AiPlatformEnum.OPENAI && detail?.options?.style"
+    class="mb-5 w-full overflow-hidden break-words"
+  >
+    <div class="text-lg font-bold">风格选择</div>
+    <div class="mt-2">
+      {{
+        Dall3StyleList.find((item) => item.key === detail?.options?.style)?.name
+      }}
+    </div>
+  </div>
+
+  <!-- Midjourney 专属 -->
+  <div
+    v-if="
+      detail.platform === AiPlatformEnum.MIDJOURNEY && detail?.options?.version
+    "
+    class="mb-5 w-full overflow-hidden break-words"
+  >
+    <div class="text-lg font-bold">模型版本</div>
+    <div class="mt-2">{{ detail?.options?.version }}</div>
+  </div>
+
+  <div
+    v-if="
+      detail.platform === AiPlatformEnum.MIDJOURNEY &&
+      detail?.options?.referImageUrl
+    "
+    class="mb-5 w-full overflow-hidden break-words"
+  >
+    <div class="text-lg font-bold">参考图</div>
+    <div class="mt-2">
+      <ElImage :src="detail.options.referImageUrl" />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/image/index/modules/list.vue b/apps/web-ele/src/views/ai/image/index/modules/list.vue
new file mode 100644
index 000000000..646622b52
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/index/modules/list.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import type { AiImageApi } from '#/api/ai/image';
+
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { confirm, useVbenDrawer } from '@vben/common-ui';
+import { AiImageStatusEnum } from '@vben/constants';
+import { downloadFileFromImageUrl } from '@vben/utils';
+
+import { useDebounceFn } from '@vueuse/core';
+import { ElButton, ElCard, ElMessage, ElPagination } from 'element-plus';
+
+import {
+  deleteImageMy,
+  getImageListMyByIds,
+  getImagePageMy,
+  midjourneyAction,
+} from '#/api/ai/image';
+
+import ImageCard from './card.vue';
+import ImageDetail from './detail.vue';
+
+const emits = defineEmits(['onRegeneration']);
+const router = useRouter();
+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); // 图片详情的图片编号
+
+/** 处理查看绘图作品 */
+function handleViewPublic() {
+  router.push({
+    name: 'AiImageSquare',
+  });
+}
+
+/** 查看图片的详情  */
+async function handleDetailOpen() {
+  drawerApi.open();
+}
+/** 获得 image 图片列表 */
+async function getImageList() {
+  const loading = ElMessage({
+    message: `加载中...`,
+    type: 'info',
+    duration: 0,
+  });
+  try {
+    // 1. 加载图片列表
+    const { list, total } = await getImagePageMy(queryParams);
+    imageList.value = list;
+    pageTotal.value = total;
+
+    // 2. 计算需要轮询的图片
+    const newWatImages: any = {};
+    imageList.value.forEach((item: any) => {
+      if (item.status === AiImageStatusEnum.IN_PROGRESS) {
+        newWatImages[item.id] = item;
+      }
+    });
+    inProgressImageMap.value = newWatImages;
+  } finally {
+    // 关闭正在"加载中"的 Loading
+    loading.close();
+  }
+}
+
+const debounceGetImageList = useDebounceFn(getImageList, 80);
+/** 轮询生成中的 image 列表 */
+async function refreshWatchImages() {
+  const imageIds = Object.keys(inProgressImageMap.value).map(Number);
+  if (imageIds.length === 0) {
+    return;
+  }
+  const list = (await getImageListMyByIds(imageIds)) as AiImageApi.Image[];
+  const newWatchImages: any = {};
+  list.forEach((image) => {
+    if (image.status === AiImageStatusEnum.IN_PROGRESS) {
+      newWatchImages[image.id] = image;
+    } else {
+      const index = imageList.value.findIndex(
+        (oldImage) => image.id === oldImage.id,
+      );
+      if (index !== -1) {
+        // 更新 imageList
+        imageList.value[index] = image;
+      }
+    }
+  });
+  inProgressImageMap.value = newWatchImages;
+}
+
+/** 图片的点击事件 */
+async function handleImageButtonClick(
+  type: string,
+  imageDetail: AiImageApi.Image,
+) {
+  // 详情
+  if (type === 'more') {
+    showImageDetailId.value = imageDetail.id;
+    await handleDetailOpen();
+    return;
+  }
+  // 删除
+  if (type === 'delete') {
+    await confirm(`是否删除照片?`);
+    await deleteImageMy(imageDetail.id);
+    await getImageList();
+    ElMessage.success('删除成功!');
+    return;
+  }
+  // 下载
+  if (type === 'download') {
+    await downloadFileFromImageUrl({
+      fileName: imageDetail.model,
+      source: imageDetail.picUrl,
+    });
+    return;
+  }
+  // 重新生成
+  if (type === 'regeneration') {
+    emits('onRegeneration', imageDetail);
+  }
+}
+
+/** 处理 Midjourney 按钮点击事件  */
+async function handleImageMidjourneyButtonClick(
+  button: AiImageApi.ImageMidjourneyButtons,
+  imageDetail: AiImageApi.Image,
+) {
+  // 1. 构建 params 参数
+  const data = {
+    id: imageDetail.id,
+    customId: button.customId,
+  } as AiImageApi.ImageMidjourneyAction;
+  // 2. 发送 action
+  await midjourneyAction(data);
+  // 3. 刷新列表
+  await getImageList();
+}
+
+defineExpose({ getImageList });
+
+/** 组件挂在的时候 */
+onMounted(async () => {
+  // 获取 image 列表
+  await getImageList();
+  // 自动刷新 image 列表
+  inProgressTimer.value = setInterval(async () => {
+    await refreshWatchImages();
+  }, 1000 * 3);
+});
+
+/** 组件取消挂在的时候 */
+onUnmounted(async () => {
+  if (inProgressTimer.value) {
+    clearInterval(inProgressTimer.value);
+  }
+});
+</script>
+
+<template>
+  <Drawer class="w-2/5">
+    <ImageDetail :id="showImageDetailId" />
+  </Drawer>
+  <ElCard
+    class="flex h-full w-full flex-col"
+    :body-style="{
+      margin: 0,
+      padding: 0,
+      height: '100%',
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+    }"
+  >
+    <template #header>
+      绘画任务
+      <ElButton @click="handleViewPublic">绘画作品</ElButton>
+    </template>
+
+    <div
+      class="flex flex-1 flex-wrap content-start overflow-y-auto p-3 pb-28 pt-5"
+      ref="imageListRef"
+    >
+      <ImageCard
+        v-for="image in imageList"
+        :key="image.id"
+        :detail="image"
+        @on-btn-click="handleImageButtonClick"
+        @on-mj-btn-click="handleImageMidjourneyButtonClick"
+        class="mb-3 mr-3"
+      />
+    </div>
+
+    <div
+      class="bg-card sticky bottom-0 z-50 flex h-16 items-center justify-center shadow-sm"
+    >
+      <ElPagination
+        :total="pageTotal"
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="debounceGetImageList"
+        @current-change="debounceGetImageList"
+      />
+    </div>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/ai/image/index/modules/midjourney/index.vue b/apps/web-ele/src/views/ai/image/index/modules/midjourney/index.vue
new file mode 100644
index 000000000..7e81facb5
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/index/modules/midjourney/index.vue
@@ -0,0 +1,257 @@
+<!-- dall3 -->
+<script setup lang="ts">
+import type { ImageModel, ImageSize } from '@vben/constants';
+
+import type { AiImageApi } from '#/api/ai/image';
+import type { AiModelModelApi } from '#/api/ai/model/model';
+
+import { ref } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+import {
+  AiPlatformEnum,
+  ImageHotWords,
+  MidjourneyModels,
+  MidjourneySizeList,
+  MidjourneyVersions,
+  NijiVersionList,
+} from '@vben/constants';
+
+import {
+  ElButton,
+  ElImage,
+  ElMessage,
+  ElOption,
+  ElSelect,
+  ElSpace,
+} from 'element-plus';
+
+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'); // 选中的模型
+const selectSize = ref<string>('1:1'); // 选中 size
+const selectVersion = ref<any>('6.0'); // 选中的 version
+const versionList = ref<any>(MidjourneyVersions); // version 列表
+
+/** 选择热词 */
+async function handleHotWordClick(hotWord: string) {
+  // 情况一：取消选中
+  if (selectHotWord.value === hotWord) {
+    selectHotWord.value = '';
+    return;
+  }
+  // 情况二：选中
+  selectHotWord.value = hotWord; // 选中
+  prompt.value = hotWord; // 设置提示次
+}
+
+/** 点击 size 尺寸 */
+async function handleSizeClick(imageSize: ImageSize) {
+  selectSize.value = imageSize.key;
+}
+
+/** 点击 model 模型 */
+async function handleModelClick(model: ImageModel) {
+  selectModel.value = model.key;
+  versionList.value =
+    model.key === 'niji' ? NijiVersionList : MidjourneyVersions;
+  selectVersion.value = versionList.value[0].value;
+}
+
+/** 图片生成 */
+async function handleGenerateImage() {
+  // 从 models 中查找匹配的模型
+  const matchedModel = props.models.find(
+    (item) =>
+      item.model === selectModel.value &&
+      item.platform === AiPlatformEnum.MIDJOURNEY,
+  );
+  if (!matchedModel) {
+    ElMessage.error('该模型不可用，请选择其它模型');
+    return;
+  }
+
+  // 二次确认
+  await confirm(`确认生成内容?`);
+  try {
+    // 加载中
+    drawIn.value = true;
+    // 回调
+    emits('onDrawStart', AiPlatformEnum.MIDJOURNEY);
+    // 发送请求
+    const imageSize = MidjourneySizeList.find(
+      (item) => selectSize.value === item.key,
+    ) as ImageSize;
+    const req = {
+      prompt: prompt.value,
+      modelId: matchedModel.id,
+      width: imageSize.width,
+      height: imageSize.height,
+      version: selectVersion.value,
+      referImageUrl: referImageUrl.value,
+    } as AiImageApi.ImageMidjourneyImagineReq;
+    await midjourneyImagine(req);
+  } finally {
+    // 回调
+    emits('onDrawComplete', AiPlatformEnum.MIDJOURNEY);
+    // 加载结束
+    drawIn.value = false;
+  }
+}
+
+/** 填充值 */
+async function settingValues(detail: AiImageApi.Image) {
+  // 提示词
+  prompt.value = detail.prompt;
+  // image size
+  const imageSize = MidjourneySizeList.find(
+    (item) => item.key === `${detail.width}:${detail.height}`,
+  ) as ImageSize;
+  selectSize.value = imageSize.key;
+  // 选中模型
+  const model = MidjourneyModels.find(
+    (item) => item.key === detail.options?.model,
+  ) as ImageModel;
+  await handleModelClick(model);
+  // 版本
+  selectVersion.value = versionList.value.find(
+    (item: any) => item.value === detail.options?.version,
+  ).value;
+  // image
+  referImageUrl.value = detail.options.referImageUrl;
+}
+
+/** 暴露组件方法 */
+defineExpose({ settingValues });
+</script>
+<template>
+  <div class="prompt">
+    <b>画面描述</b>
+    <p>建议使用"形容词+动词+风格"的格式，使用"，"隔开.</p>
+    <el-input
+      v-model="prompt"
+      :maxlength="1024"
+      :rows="5"
+      type="textarea"
+      class="mt-4 w-full"
+      placeholder="例如：童话里的小屋应该是什么样子？"
+      show-word-limit
+    />
+  </div>
+
+  <div class="mt-8 flex flex-col">
+    <div><b>随机热词</b></div>
+    <ElSpace wrap class="mt-4 flex flex-wrap gap-2">
+      <ElButton
+        round
+        class="m-0"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
+      >
+        {{ hotWord }}
+      </ElButton>
+    </ElSpace>
+  </div>
+
+  <div class="mt-8">
+    <div><b>尺寸</b></div>
+    <ElSpace wrap class="mt-4 flex w-full flex-wrap gap-2">
+      <div
+        class="flex cursor-pointer flex-col items-center overflow-hidden"
+        v-for="imageSize in MidjourneySizeList"
+        :key="imageSize.key"
+        @click="handleSizeClick(imageSize)"
+      >
+        <div
+          class="bg-card flex h-12 w-12 items-center justify-center rounded-lg border p-0"
+          :class="[
+            selectSize === imageSize.key ? 'border-blue-500' : 'border-white',
+          ]"
+        >
+          <div :style="imageSize.style"></div>
+        </div>
+        <div class="text-sm font-bold text-gray-600">{{ imageSize.key }}</div>
+      </div>
+    </ElSpace>
+  </div>
+
+  <div class="mt-8">
+    <div><b>模型</b></div>
+    <ElSpace wrap class="mt-4 flex flex-wrap gap-2">
+      <div
+        v-for="model in MidjourneyModels"
+        :key="model.key"
+        class="flex max-w-40 cursor-pointer flex-col items-center overflow-hidden"
+        :class="[
+          selectModel === model.key
+            ? 'rounded border-blue-500'
+            : 'border-transparent',
+        ]"
+      >
+        <ElImage
+          :preview-src-list="[]"
+          :src="model.image"
+          fit="contain"
+          @click="handleModelClick(model)"
+        />
+        <div class="text-sm font-bold text-gray-600">{{ model.name }}</div>
+      </div>
+    </ElSpace>
+  </div>
+
+  <div class="mt-8">
+    <div><b>版本</b></div>
+    <ElSpace wrap class="mt-5 flex w-full flex-wrap gap-2">
+      <ElSelect
+        v-model="selectVersion"
+        class="!w-80"
+        clearable
+        placeholder="请选择版本"
+      >
+        <ElOption
+          v-for="item in versionList"
+          :key="item.value"
+          :value="item.value"
+          :label="item.label"
+        >
+          {{ item.label }}
+        </ElOption>
+      </ElSelect>
+    </ElSpace>
+  </div>
+
+  <div class="mt-8">
+    <div><b>参考图</b></div>
+    <ElSpace wrap class="mt-4">
+      <ImageUpload v-model:value="referImageUrl" :show-description="false" />
+    </ElSpace>
+  </div>
+
+  <div class="mt-8 flex justify-center">
+    <ElButton
+      type="primary"
+      size="large"
+      round
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </ElButton>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/image/index/modules/stable-diffusion/index.vue b/apps/web-ele/src/views/ai/image/index/modules/stable-diffusion/index.vue
new file mode 100644
index 000000000..3ed1fc335
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/index/modules/stable-diffusion/index.vue
@@ -0,0 +1,309 @@
+<!-- dall3 -->
+<script setup lang="ts">
+import type { AiImageApi } from '#/api/ai/image';
+import type { AiModelModelApi } from '#/api/ai/model/model';
+
+import { ref } from 'vue';
+
+import { alert, confirm } from '@vben/common-ui';
+import {
+  AiPlatformEnum,
+  ImageHotEnglishWords,
+  StableDiffusionClipGuidancePresets,
+  StableDiffusionSamplers,
+  StableDiffusionStylePresets,
+} from '@vben/constants';
+
+import {
+  ElButton,
+  ElInputNumber,
+  ElMessage,
+  ElOption,
+  ElSelect,
+  ElSpace,
+} from 'element-plus';
+
+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) {
+  return /[\u4E00-\u9FA5]/.test(str);
+}
+
+// 定义属性
+const drawIn = ref<boolean>(false); // 生成中
+const selectHotWord = ref<string>(''); // 选中的热词
+// 表单
+const prompt = ref<string>(''); // 提示词
+const width = ref<number>(512); // 图片宽度
+const height = ref<number>(512); // 图片高度
+const sampler = ref<string>('DDIM'); // 采样方法
+const steps = ref<number>(20); // 迭代步数
+const seed = ref<number>(42); // 控制生成图像的随机性
+const scale = ref<number>(7.5); // 引导系数
+const clipGuidancePreset = ref<string>('NONE'); // 文本提示相匹配的图像(clip_guidance_preset) 简称 CLIP
+const stylePreset = ref<string>('3d-model'); // 风格
+
+/** 选择热词 */
+async function handleHotWordClick(hotWord: string) {
+  // 情况一：取消选中
+  if (selectHotWord.value === hotWord) {
+    selectHotWord.value = '';
+    return;
+  }
+  // 情况二：选中
+  selectHotWord.value = hotWord; // 选中
+  prompt.value = hotWord; // 替换提示词
+}
+
+/** 图片生成 */
+async function handleGenerateImage() {
+  // 从 models 中查找匹配的模型
+  const selectModel = 'stable-diffusion-v1-6';
+  const matchedModel = props.models.find(
+    (item) =>
+      item.model === selectModel &&
+      item.platform === AiPlatformEnum.STABLE_DIFFUSION,
+  );
+  if (!matchedModel) {
+    ElMessage.error('该模型不可用，请选择其它模型');
+    return;
+  }
+
+  // 二次确认
+  if (hasChinese(prompt.value)) {
+    await alert('暂不支持中文！');
+    return;
+  }
+  await confirm(`确认生成内容?`);
+
+  try {
+    // 加载中
+    drawIn.value = true;
+    // 回调
+    emits('onDrawStart', AiPlatformEnum.STABLE_DIFFUSION);
+    // 发送请求
+    const form = {
+      modelId: matchedModel.id,
+      prompt: prompt.value, // 提示词
+      width: width.value, // 图片宽度
+      height: height.value, // 图片高度
+      options: {
+        seed: seed.value, // 随机种子
+        steps: steps.value, // 图片生成步数
+        scale: scale.value, // 引导系数
+        sampler: sampler.value, // 采样算法
+        clipGuidancePreset: clipGuidancePreset.value, // 文本提示相匹配的图像 CLIP
+        stylePreset: stylePreset.value, // 风格
+      },
+    } as unknown as AiImageApi.ImageDrawReq;
+    await drawImage(form);
+  } finally {
+    // 回调
+    emits('onDrawComplete', AiPlatformEnum.STABLE_DIFFUSION);
+    // 加载结束
+    drawIn.value = false;
+  }
+}
+
+/** 填充值 */
+async function settingValues(detail: AiImageApi.Image) {
+  prompt.value = detail.prompt;
+  width.value = detail.width;
+  height.value = detail.height;
+  seed.value = detail.options?.seed;
+  steps.value = detail.options?.steps;
+  scale.value = detail.options?.scale;
+  sampler.value = detail.options?.sampler;
+  clipGuidancePreset.value = detail.options?.clipGuidancePreset;
+  stylePreset.value = detail.options?.stylePreset;
+}
+
+/** 暴露组件方法 */
+defineExpose({ settingValues });
+</script>
+<template>
+  <div class="prompt">
+    <b>画面描述</b>
+    <p>建议使用"形容词 + 动词 + 风格"的格式，使用"，"隔开</p>
+    <el-input
+      v-model="prompt"
+      :maxlength="1024"
+      :rows="5"
+      type="textarea"
+      class="mt-4 w-full"
+      placeholder="例如：童话里的小屋应该是什么样子？"
+      show-word-limit
+    />
+  </div>
+
+  <!-- 热词区域 -->
+  <div class="mt-8 flex flex-col">
+    <div><b>随机热词</b></div>
+    <ElSpace wrap class="mt-4 flex flex-wrap gap-2">
+      <ElButton
+        round
+        class="m-0"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotEnglishWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
+      >
+        {{ hotWord }}
+      </ElButton>
+    </ElSpace>
+  </div>
+
+  <!-- 参数项：采样方法 -->
+  <div class="mt-8">
+    <div><b>采样方法</b></div>
+    <ElSpace wrap class="mt-4 w-full">
+      <ElSelect
+        v-model="sampler"
+        placeholder="Select"
+        size="large"
+        class="!w-80"
+      >
+        <ElOption
+          v-for="item in StableDiffusionSamplers"
+          :key="item.key"
+          :value="item.key"
+          :label="item.name"
+        >
+          {{ item.name }}
+        </ElOption>
+      </ElSelect>
+    </ElSpace>
+  </div>
+
+  <!-- CLIP -->
+  <div class="mt-8">
+    <div><b>CLIP</b></div>
+    <ElSpace wrap class="mt-4 w-full">
+      <ElSelect
+        v-model="clipGuidancePreset"
+        placeholder="Select"
+        size="large"
+        class="!w-80"
+      >
+        <ElOption
+          v-for="item in StableDiffusionClipGuidancePresets"
+          :key="item.key"
+          :value="item.key"
+          :label="item.name"
+        >
+          {{ item.name }}
+        </ElOption>
+      </ElSelect>
+    </ElSpace>
+  </div>
+
+  <!-- 风格 -->
+  <div class="mt-8">
+    <div><b>风格</b></div>
+    <ElSpace wrap class="mt-4 w-full">
+      <ElSelect
+        v-model="stylePreset"
+        placeholder="Select"
+        size="large"
+        class="!w-80"
+      >
+        <ElOption
+          v-for="item in StableDiffusionStylePresets"
+          :key="item.key"
+          :label="item.name"
+          :value="item.key"
+        >
+          {{ item.name }}
+        </ElOption>
+      </ElSelect>
+    </ElSpace>
+  </div>
+
+  <!-- 图片尺寸 -->
+  <div class="mt-8">
+    <div><b>图片尺寸</b></div>
+    <ElSpace wrap class="mt-4 w-full">
+      <div class="flex items-center gap-2">
+        <ElInputNumber
+          v-model="width"
+          placeholder="图片宽度"
+          controls-position="right"
+          class="!w-32"
+        />
+      </div>
+      <span class="mx-2">×</span>
+      <div class="flex items-center gap-2">
+        <ElInputNumber
+          v-model="height"
+          placeholder="图片高度"
+          controls-position="right"
+          class="!w-32"
+        />
+      </div>
+    </ElSpace>
+  </div>
+
+  <!-- 迭代步数 -->
+  <div class="mt-8">
+    <div><b>迭代步数</b></div>
+    <ElSpace wrap class="mt-4 w-full">
+      <ElInputNumber
+        v-model="steps"
+        size="large"
+        class="!w-80"
+        placeholder="Please input"
+        controls-position="right"
+      />
+    </ElSpace>
+  </div>
+
+  <!-- 引导系数 -->
+  <div class="mt-8">
+    <div><b>引导系数</b></div>
+    <ElSpace wrap class="mt-4 w-full">
+      <ElInputNumber
+        v-model="scale"
+        size="large"
+        class="!w-80"
+        placeholder="Please input"
+        controls-position="right"
+      />
+    </ElSpace>
+  </div>
+
+  <!-- 随机因子 -->
+  <div class="mt-8">
+    <div><b>随机因子</b></div>
+    <ElSpace wrap class="mt-4 w-full">
+      <ElInputNumber
+        v-model="seed"
+        size="large"
+        class="!w-80"
+        placeholder="Please input"
+        controls-position="right"
+      />
+    </ElSpace>
+  </div>
+
+  <!-- 生成按钮 -->
+  <div class="mt-12 flex justify-center">
+    <ElButton
+      type="primary"
+      size="large"
+      round
+      :loading="drawIn"
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </ElButton>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/image/manager/index.vue b/apps/web-ele/src/views/ai/image/manager/index.vue
index 576490053..72830e7a9 100644
--- a/apps/web-ele/src/views/ai/image/manager/index.vue
+++ b/apps/web-ele/src/views/ai/image/manager/index.vue
@@ -23,7 +23,7 @@ async function handleDelete(row: AiImageApi.Image) {
     text: $t('ui.actionMessage.deleting', [row.id]),
   });
   try {
-    await deleteImage(row.id as number);
+    await deleteImage(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/ai/image/square/index.vue b/apps/web-ele/src/views/ai/image/square/index.vue
new file mode 100644
index 000000000..e837cbb66
--- /dev/null
+++ b/apps/web-ele/src/views/ai/image/square/index.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { AiImageApi } from '#/api/ai/image';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { useDebounceFn } from '@vueuse/core';
+import { ElImage, ElInput, ElPagination } from 'element-plus';
+
+import { getImagePageMy } from '#/api/ai/image';
+
+const loading = ref(true); // 列表的加载中
+const list = ref<AiImageApi.Image[]>([]); // 列表的数据
+const total = ref(0); // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  publicStatus: true,
+  prompt: undefined,
+});
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const data = await getImagePageMy(queryParams);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+const debounceGetList = useDebounceFn(getList, 80);
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await getList();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <div class="bg-card p-5">
+      <ElInput
+        v-model="queryParams.prompt"
+        class="mb-5 w-full"
+        size="large"
+        placeholder="请输入要搜索的内容"
+        @keyup.enter="handleQuery"
+      >
+        <template #suffix>
+          <IconifyIcon icon="lucide:search" class="cursor-pointer" />
+        </template>
+      </ElInput>
+      <div
+        class="bg-card grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2.5 shadow-sm"
+      >
+        <div
+          v-for="item in list"
+          :key="item.id"
+          class="bg-card relative cursor-pointer overflow-hidden transition-transform duration-300 hover:scale-105"
+        >
+          <ElImage
+            :src="item.picUrl"
+            class="block h-auto w-full transition-transform duration-300 hover:scale-110"
+          />
+        </div>
+      </div>
+      <!-- 分页 -->
+      <ElPagination
+        :total="total"
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="debounceGetList"
+        @current-change="debounceGetList"
+        class="mt-5"
+      />
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/knowledge/document/data.ts b/apps/web-ele/src/views/ai/knowledge/document/data.ts
new file mode 100644
index 000000000..668fb09c7
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/document/data.ts
@@ -0,0 +1,180 @@
+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 [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '知识库名称',
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '知识库描述',
+      component: 'Textarea',
+      componentProps: {
+        rows: 3,
+        placeholder: '请输入知识库描述',
+      },
+    },
+    {
+      component: 'ApiSelect',
+      fieldName: 'embeddingModelId',
+      label: '向量模型',
+      componentProps: {
+        api: () => getModelSimpleList(AiModelTypeEnum.EMBEDDING),
+        labelField: 'name',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择向量模型',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'topK',
+      label: '检索 topK',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入检索 topK',
+        min: 0,
+        max: 10,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'similarityThreshold',
+      label: '检索相似度阈值',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入检索相似度阈值',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '是否启用',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      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'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+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: '是否启用',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          activeValue: CommonStatusEnum.ENABLE,
+          inactiveValue: CommonStatusEnum.DISABLE,
+        },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      minWidth: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/knowledge/document/form/index.vue b/apps/web-ele/src/views/ai/knowledge/document/form/index.vue
new file mode 100644
index 000000000..bee03dc25
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/document/form/index.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import {
+  getCurrentInstance,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  ref,
+} from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElCard } from 'element-plus';
+
+import { getKnowledgeDocument } from '#/api/ai/knowledge/document';
+
+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();
+const currentStep = ref(0); // 步骤控制
+const steps = [
+  { title: '上传文档' },
+  { title: '文档分段' },
+  { title: '处理并完成' },
+];
+const formData = ref({
+  knowledgeId: undefined, // 知识库编号
+  id: undefined, // 编辑的文档编号(documentId)
+  segmentMaxTokens: 500, // 分段最大 token 数
+  list: [] as Array<{
+    count?: number; // 段落数量
+    id: number; // 文档编号
+    name: string; // 文档名称
+    process?: number; // 处理进度
+    segments: Array<{
+      content?: string;
+      contentLength?: number;
+      tokens?: number;
+    }>;
+    url: string; // 文档 URL
+  }>, // 用于存储上传的文件列表
+}); // 表单数据
+
+provide('parent', getCurrentInstance()); // 提供 parent 给子组件使用
+
+const tabs = useTabs();
+
+/** 返回列表页 */
+function handleBack() {
+  // 关闭当前页签
+  tabs.closeCurrentTab();
+  // 跳转到列表页
+  router.push({
+    name: 'AiKnowledgeDocument',
+    query: {
+      knowledgeId: route.query.knowledgeId,
+    },
+  });
+}
+
+/** 初始化数据 */
+async function initData() {
+  if (route.query.knowledgeId) {
+    formData.value.knowledgeId = route.query.knowledgeId as any;
+  }
+  // 【修改场景】从路由参数中获取文档 ID
+  const documentId = route.query.id;
+  if (documentId) {
+    // 获取文档信息
+    formData.value.id = documentId as any;
+    const document = await getKnowledgeDocument(documentId as any);
+    formData.value.segmentMaxTokens = document.segmentMaxTokens;
+    formData.value.list = [
+      {
+        id: document.id,
+        name: document.name,
+        url: document.url,
+        segments: [],
+      },
+    ];
+    // 进入下一步
+    goToNextStep();
+  }
+}
+
+/** 切换到下一步 */
+function goToNextStep() {
+  if (currentStep.value < steps.length - 1) {
+    currentStep.value++;
+  }
+}
+
+/** 切换到上一步 */
+function goToPrevStep() {
+  if (currentStep.value > 0) {
+    currentStep.value--;
+  }
+}
+
+/** 添加组件卸载前的清理代码 */
+onBeforeUnmount(() => {
+  // 清理所有的引用
+  uploadDocumentRef.value = null;
+  documentSegmentRef.value = null;
+  processCompleteRef.value = null;
+});
+
+/** 暴露方法给子组件使用 */
+defineExpose({
+  goToNextStep,
+  goToPrevStep,
+  handleBack,
+});
+
+/** 初始化 */
+onMounted(async () => {
+  await initData();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="mx-auto">
+      <!-- 头部导航栏 -->
+      <div
+        class="bg-card absolute left-0 right-0 top-0 z-10 flex h-12 items-center border-b px-4"
+      >
+        <!-- 左侧标题 -->
+        <div class="flex w-48 items-center overflow-hidden">
+          <IconifyIcon
+            icon="lucide:arrow-left"
+            class="size-5 flex-shrink-0 cursor-pointer"
+            @click="handleBack"
+          />
+          <span class="ml-2.5 truncate text-base">
+            {{ formData.id ? '编辑知识库文档' : '创建知识库文档' }}
+          </span>
+        </div>
+
+        <!-- 步骤条 -->
+        <div class="flex h-full flex-1 items-center justify-center">
+          <div class="flex h-full w-96 items-center justify-between">
+            <div
+              v-for="(step, index) in steps"
+              :key="index"
+              class="relative mx-4 flex h-full cursor-pointer items-center"
+              :class="[
+                currentStep === index
+                  ? 'border-b-2 border-solid border-blue-500 text-blue-500'
+                  : 'text-gray-500',
+              ]"
+            >
+              <div
+                class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-base"
+                :class="[
+                  currentStep === index
+                    ? 'border-blue-500 bg-blue-500 text-white'
+                    : 'border-gray-300 bg-white text-gray-500',
+                ]"
+              >
+                {{ index + 1 }}
+              </div>
+              <span class="whitespace-nowrap text-base font-bold">
+                {{ step.title }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 主体内容 -->
+      <ElCard :body-style="{ padding: '10px' }" class="mb-4">
+        <div class="mt-12">
+          <!-- 第一步：上传文档 -->
+          <div v-if="currentStep === 0" class="mx-auto w-[560px]">
+            <UploadStep v-model="formData" ref="uploadDocumentRef" />
+          </div>
+          <!-- 第二步：文档分段 -->
+          <div v-if="currentStep === 1" class="mx-auto w-[560px]">
+            <SplitStep v-model="formData" ref="documentSegmentRef" />
+          </div>
+
+          <!-- 第三步：处理并完成 -->
+          <div v-if="currentStep === 2" class="mx-auto w-[560px]">
+            <ProcessStep v-model="formData" ref="processCompleteRef" />
+          </div>
+        </div>
+      </ElCard>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/knowledge/document/form/modules/process-step.vue b/apps/web-ele/src/views/ai/knowledge/document/form/modules/process-step.vue
new file mode 100644
index 000000000..e790c7344
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/document/form/modules/process-step.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed, inject, onBeforeUnmount, onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElProgress } from 'element-plus';
+
+import { getKnowledgeSegmentProcessList } from '#/api/ai/knowledge/segment';
+
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const parent = inject('parent') as any;
+const pollingTimer = ref<null | number>(null); // 轮询定时器 ID，用于跟踪和清除轮询进程
+
+/** 判断文件处理是否完成 */
+function isProcessComplete(file: any) {
+  return file.progress === 100;
+}
+
+/** 判断所有文件是否都处理完成 */
+const allProcessComplete = computed(() => {
+  return props.modelValue.list.every((file: any) => isProcessComplete(file));
+});
+
+/** 完成按钮点击事件处理 */
+function handleComplete() {
+  if (parent?.exposed?.handleBack) {
+    parent.exposed.handleBack();
+  }
+}
+
+/** 获取文件处理进度 */
+async function getProcessList() {
+  try {
+    // 1. 调用 API 获取处理进度
+    const documentIds = props.modelValue.list
+      .filter((item: any) => item.id)
+      .map((item: any) => item.id);
+    if (documentIds.length === 0) {
+      return;
+    }
+    const result = await getKnowledgeSegmentProcessList(documentIds);
+
+    // 2.1更新进度
+    const updatedList = props.modelValue.list.map((file: any) => {
+      const processInfo = result.find(
+        (item: any) => item.documentId === file.id,
+      );
+      if (processInfo) {
+        // 计算进度百分比：已嵌入数量 / 总数量 * 100
+        const progress =
+          processInfo.embeddingCount && processInfo.count
+            ? Math.floor((processInfo.embeddingCount / processInfo.count) * 100)
+            : 0;
+        return {
+          ...file,
+          progress,
+          count: processInfo.count || 0,
+        };
+      }
+      return file;
+    });
+
+    // 2.2 更新数据
+    emit('update:modelValue', {
+      ...props.modelValue,
+      list: updatedList,
+    });
+
+    // 3. 如果未完成，继续轮询
+    if (!updatedList.every((file: any) => isProcessComplete(file))) {
+      pollingTimer.value = window.setTimeout(getProcessList, 3000);
+    }
+  } catch (error) {
+    // 出错后也继续轮询
+    console.error('获取处理进度失败:', error);
+    pollingTimer.value = window.setTimeout(getProcessList, 5000);
+  }
+}
+
+/** 组件挂载时开始轮询 */
+onMounted(() => {
+  // 1. 初始化进度为 0
+  const initialList = props.modelValue.list.map((file: any) => ({
+    ...file,
+    progress: 0,
+  }));
+
+  emit('update:modelValue', {
+    ...props.modelValue,
+    list: initialList,
+  });
+
+  // 2. 开始轮询获取进度
+  getProcessList();
+});
+
+/** 组件卸载前清除轮询 */
+onBeforeUnmount(() => {
+  // 1. 清除定时器
+  if (pollingTimer.value) {
+    clearTimeout(pollingTimer.value);
+    pollingTimer.value = null;
+  }
+});
+</script>
+
+<template>
+  <div>
+    <!-- 文件处理列表 -->
+    <div class="mt-4 grid grid-cols-1 gap-2">
+      <div
+        v-for="(file, index) in modelValue.list"
+        :key="index"
+        class="flex items-center rounded-sm border-l-4 border-l-blue-500 px-3 py-1 shadow-sm transition-all duration-300 hover:bg-blue-50"
+      >
+        <!-- 文件图标和名称 -->
+        <div class="mr-2 flex min-w-48 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>
+        </div>
+
+        <!-- 处理进度 -->
+        <div class="flex-1">
+          <ElProgress
+            :percentage="file.progress || 0"
+            :stroke-width="10"
+            :status="isProcessComplete(file) ? 'success' : undefined"
+          />
+        </div>
+
+        <!-- 分段数量 -->
+        <div class="ml-2 text-sm text-gray-400">
+          分段数量：{{ file.count ? file.count : '-' }}
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部完成按钮 -->
+    <div class="mt-5 flex justify-end">
+      <ElButton
+        :type="allProcessComplete ? 'primary' : 'default'"
+        :disabled="!allProcessComplete"
+        @click="handleComplete"
+      >
+        完成
+      </ElButton>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/knowledge/document/form/modules/split-step.vue b/apps/web-ele/src/views/ai/knowledge/document/form/modules/split-step.vue
new file mode 100644
index 000000000..65f4126a9
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/document/form/modules/split-step.vue
@@ -0,0 +1,286 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import { computed, getCurrentInstance, inject, onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElEmpty,
+  ElForm,
+  ElFormItem,
+  ElInputNumber,
+  ElMessage,
+  ElTooltip,
+} from 'element-plus';
+
+import {
+  createKnowledgeDocumentList,
+  updateKnowledgeDocument,
+} from '#/api/ai/knowledge/document';
+import { splitContent } from '#/api/ai/knowledge/segment';
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const parent = inject('parent', null); // 获取父组件实例
+
+const modelData = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+}); // 表单数据
+
+const splitLoading = ref(false); // 分段加载状态
+const currentFile = ref<any>(null); // 当前选中的文件
+const submitLoading = ref(false); // 提交按钮加载状态
+
+/** 选择文件 */
+async function selectFile(index: number) {
+  currentFile.value = modelData.value.list[index];
+  await splitContentFile(currentFile.value);
+}
+
+/** 获取文件分段内容 */
+async function splitContentFile(file: any) {
+  if (!file || !file.url) {
+    ElMessage.warning('文件 URL 不存在');
+    return;
+  }
+
+  splitLoading.value = true;
+  try {
+    // 调用后端分段接口，获取文档的分段内容、字符数和 Token 数
+    file.segments = await splitContent(
+      file.url,
+      modelData.value.segmentMaxTokens,
+    );
+  } catch (error) {
+    console.error('获取分段内容失败:', file, error);
+  } finally {
+    splitLoading.value = false;
+  }
+}
+
+/** 处理预览分段 */
+async function handleAutoSegment() {
+  // 如果没有选中文件，默认选中第一个
+  if (
+    !currentFile.value &&
+    modelData.value.list &&
+    modelData.value.list.length > 0
+  ) {
+    currentFile.value = modelData.value.list[0];
+  }
+  // 如果没有选中文件，提示请先选择文件
+  if (!currentFile.value) {
+    ElMessage.warning('请先选择文件');
+    return;
+  }
+
+  // 获取分段内容
+  await splitContentFile(currentFile.value);
+}
+
+/** 上一步按钮处理 */
+function handlePrevStep() {
+  const parentEl = parent || getCurrentInstance()?.parent;
+  if (parentEl && typeof parentEl.exposed?.goToPrevStep === 'function') {
+    parentEl.exposed.goToPrevStep();
+  }
+}
+
+/** 保存操作 */
+async function handleSave() {
+  // 保存前验证
+  if (
+    !currentFile?.value?.segments ||
+    currentFile.value.segments.length === 0
+  ) {
+    ElMessage.warning('请先预览分段内容');
+    return;
+  }
+
+  // 设置按钮加载状态
+  submitLoading.value = true;
+  try {
+    if (modelData.value.id) {
+      // 修改场景
+      await updateKnowledgeDocument({
+        id: modelData.value.id,
+        segmentMaxTokens: modelData.value.segmentMaxTokens,
+      });
+    } else {
+      // 新增场景
+      const data = await createKnowledgeDocumentList({
+        knowledgeId: modelData.value.knowledgeId,
+        segmentMaxTokens: modelData.value.segmentMaxTokens,
+        list: modelData.value.list.map((item: any) => ({
+          name: item.name,
+          url: item.url,
+        })),
+      });
+      modelData.value.list.forEach((document: any, index: number) => {
+        document.id = data[index];
+      });
+    }
+
+    // 进入下一步
+    const parentEl = parent || getCurrentInstance()?.parent;
+    if (parentEl && typeof parentEl.exposed?.goToNextStep === 'function') {
+      parentEl.exposed.goToNextStep();
+    }
+  } catch (error: any) {
+    console.error('保存失败:', modelData.value, error);
+  } finally {
+    // 关闭按钮加载状态
+    submitLoading.value = false;
+  }
+}
+
+/** 初始化 */
+onMounted(async () => {
+  // 确保 segmentMaxTokens 存在
+  if (!modelData.value.segmentMaxTokens) {
+    modelData.value.segmentMaxTokens = 500;
+  }
+  // 如果没有选中文件，默认选中第一个
+  if (
+    !currentFile.value &&
+    modelData.value.list &&
+    modelData.value.list.length > 0
+  ) {
+    currentFile.value = modelData.value.list[0];
+  }
+
+  // 如果有选中的文件，获取分段内容
+  if (currentFile.value) {
+    await splitContentFile(currentFile.value);
+  }
+});
+</script>
+
+<template>
+  <div>
+    <!-- 上部分段设置部分 -->
+    <div class="mb-5">
+      <div class="mb-5 flex items-center justify-between">
+        <div class="flex items-center text-base font-bold">
+          分段设置
+          <ElTooltip placement="top">
+            <template #content>
+              系统会自动将文档内容分割成多个段落，您可以根据需要调整分段方式和内容。
+            </template>
+            <IconifyIcon
+              icon="lucide:circle-alert"
+              class="ml-1 text-gray-400"
+            />
+          </ElTooltip>
+        </div>
+        <div>
+          <ElButton type="primary" size="small" @click="handleAutoSegment">
+            预览分段
+          </ElButton>
+        </div>
+      </div>
+      <div class="mb-5">
+        <ElForm :label-col="{ span: 5 }">
+          <ElFormItem label="最大 Token 数">
+            <ElInputNumber
+              v-model="modelData.segmentMaxTokens"
+              :min="1"
+              :max="2048"
+              controls-position="right"
+              class="!w-full"
+            />
+          </ElFormItem>
+        </ElForm>
+      </div>
+    </div>
+    <div class="mb-2.5">
+      <div class="mb-2.5 text-base font-bold">分段预览</div>
+      <!-- 文件选择器 -->
+      <div class="mb-2.5">
+        <ElDropdown
+          v-if="modelData.list && modelData.list.length > 0"
+          trigger="click"
+        >
+          <div class="flex cursor-pointer items-center">
+            <IconifyIcon icon="lucide:file-text" class="mr-1" />
+            <span>{{ currentFile?.name || '请选择文件' }}</span>
+            <span
+              v-if="currentFile?.segments"
+              class="ml-1 text-sm text-gray-500"
+            >
+              ({{ currentFile.segments.length }}个分片)
+            </span>
+            <IconifyIcon icon="lucide:chevron-down" class="ml-1" />
+          </div>
+          <template #dropdown>
+            <ElDropdownMenu>
+              <ElDropdownItem
+                v-for="(file, index) in modelData.list"
+                :key="index"
+                @click="selectFile(index)"
+              >
+                {{ file.name }}
+                <span v-if="file.segments" class="ml-1 text-sm text-gray-500">
+                  ({{ file.segments.length }} 个分片)
+                </span>
+              </ElDropdownItem>
+            </ElDropdownMenu>
+          </template>
+        </ElDropdown>
+        <div v-else class="text-gray-400">暂无上传文件</div>
+      </div>
+      <!-- 文件内容预览 -->
+      <div class="max-h-[600px] overflow-y-auto rounded-md p-4">
+        <div v-if="splitLoading" class="flex items-center justify-center py-5">
+          <IconifyIcon icon="lucide:loader" class="is-loading" />
+          <span class="ml-2.5">正在加载分段内容...</span>
+        </div>
+        <template
+          v-else-if="
+            currentFile &&
+            currentFile.segments &&
+            currentFile.segments.length > 0
+          "
+        >
+          <div
+            v-for="(segment, index) in currentFile.segments"
+            :key="index"
+            class="mb-2.5"
+          >
+            <div class="mb-1 text-sm text-gray-500">
+              分片-{{ index + 1 }} · {{ segment.contentLength || 0 }} 字符数 ·
+              {{ segment.tokens || 0 }} Token
+            </div>
+            <div class="bg-card rounded-md p-2">
+              {{ segment.content }}
+            </div>
+          </div>
+        </template>
+        <ElEmpty v-else description="暂无预览内容" />
+      </div>
+    </div>
+    <!-- 添加底部按钮 -->
+    <div class="mt-5 flex justify-between">
+      <div>
+        <ElButton v-if="!modelData.id" @click="handlePrevStep">上一步</ElButton>
+      </div>
+      <div>
+        <ElButton type="primary" :loading="submitLoading" @click="handleSave">
+          保存并处理
+        </ElButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/knowledge/document/form/modules/upload-step.vue b/apps/web-ele/src/views/ai/knowledge/document/form/modules/upload-step.vue
new file mode 100644
index 000000000..456aafd58
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/document/form/modules/upload-step.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import type { UploadProps, UploadRequestOptions } from 'element-plus';
+
+import type { PropType } from 'vue';
+
+import type { AxiosProgressEvent } from '#/api/infra/file';
+
+import { computed, getCurrentInstance, inject, onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { generateAcceptedFileTypes } from '@vben/utils';
+
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElMessage,
+  ElUpload,
+} from 'element-plus';
+
+import { useUpload } from '#/components/upload/use-upload';
+
+const props = defineProps({
+  modelValue: {
+    type: Object as PropType<any>,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const formRef = ref(); // 表单引用
+const uploadRef = ref(); // 上传组件引用
+const parent = inject('parent', null); // 获取父组件实例
+const { uploadUrl, httpRequest } = useUpload(); // 使用上传组件的钩子
+const fileList = ref<UploadProps['fileList']>([]); // 文件列表
+const uploadingCount = ref(0); // 上传中的文件数量
+
+const supportedFileTypes = [
+  'TXT',
+  'MARKDOWN',
+  'MDX',
+  'PDF',
+  'HTML',
+  'XLSX',
+  'XLS',
+  'DOC',
+  'DOCX',
+  'CSV',
+  'EML',
+  'MSG',
+  'PPTX',
+  'XML',
+  'EPUB',
+  'PPT',
+  'MD',
+  'HTM',
+]; // 支持的文件类型和大小限制
+const allowedExtensions = new Set(
+  supportedFileTypes.map((ext) => ext.toLowerCase()),
+); // 小写的扩展名列表
+const maxFileSize = 15; // 最大文件大小(MB)
+const acceptedFileTypes = computed(() =>
+  generateAcceptedFileTypes(supportedFileTypes),
+); // 构建 accept 属性值，用于限制文件选择对话框中可见的文件类型
+
+/** 表单数据 */
+const modelData = computed({
+  get: () => {
+    return props.modelValue;
+  },
+  set: (val) => emit('update:modelValue', val),
+});
+
+/** 确保 list 属性存在 */
+function ensureListExists() {
+  if (!props.modelValue.list) {
+    emit('update:modelValue', {
+      ...props.modelValue,
+      list: [],
+    });
+  }
+}
+
+/** 是否所有文件都已上传完成 */
+const isAllUploaded = computed(() => {
+  return (
+    modelData.value.list &&
+    modelData.value.list.length > 0 &&
+    uploadingCount.value === 0
+  );
+});
+
+/**
+ * 上传前检查文件类型和大小
+ *
+ * @param file 待上传的文件
+ * @returns 是否允许上传
+ */
+function beforeUpload(file: any) {
+  // 1.1 检查文件扩展名
+  const fileName = file.name.toLowerCase();
+  const fileExtension = fileName.slice(
+    Math.max(0, fileName.lastIndexOf('.') + 1),
+  );
+  if (!allowedExtensions.has(fileExtension)) {
+    ElMessage.error('不支持的文件类型！');
+    return false;
+  }
+  // 1.2 检查文件大小
+  if (!(file.size / 1024 / 1024 < maxFileSize)) {
+    ElMessage.error(`文件大小不能超过 ${maxFileSize} MB！`);
+    return false;
+  }
+
+  // 2. 增加上传中的文件计数
+  uploadingCount.value++;
+  return true;
+}
+
+async function customRequest(info: UploadRequestOptions) {
+  const file = info.file as File;
+  const name = file?.name;
+  try {
+    // 上传文件
+    const progressEvent: AxiosProgressEvent = (e) => {
+      const percent = Math.trunc((e.loaded / e.total!) * 100);
+      info.onProgress!({ percent });
+    };
+    const res = await httpRequest(info.file as File, progressEvent);
+    info.onSuccess!(res);
+    ElMessage.success('上传成功');
+    ensureListExists();
+    emit('update:modelValue', {
+      ...props.modelValue,
+      list: [
+        ...props.modelValue.list,
+        {
+          name,
+          url: res,
+        },
+      ],
+    });
+  } catch (error: any) {
+    console.error(error);
+    info.onError!(error);
+  } finally {
+    uploadingCount.value = Math.max(0, uploadingCount.value - 1);
+  }
+}
+
+/**
+ * 从列表中移除文件
+ *
+ * @param index 要移除的文件索引
+ */
+function removeFile(index: number) {
+  // 从列表中移除文件
+  const newList = [...props.modelValue.list];
+  newList.splice(index, 1);
+  // 更新表单数据
+  emit('update:modelValue', {
+    ...props.modelValue,
+    list: newList,
+  });
+}
+
+/** 下一步按钮处理 */
+function handleNextStep() {
+  // 1.1 检查是否有文件上传
+  if (!modelData.value.list || modelData.value.list.length === 0) {
+    ElMessage.warning('请上传至少一个文件');
+    return;
+  }
+  // 1.2 检查是否有文件正在上传
+  if (uploadingCount.value > 0) {
+    ElMessage.warning('请等待所有文件上传完成');
+    return;
+  }
+
+  // 2. 获取父组件的goToNextStep方法
+  const parentEl = parent || getCurrentInstance()?.parent;
+  if (parentEl && typeof parentEl.exposed?.goToNextStep === 'function') {
+    parentEl.exposed.goToNextStep();
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  ensureListExists();
+});
+</script>
+
+<template>
+  <ElForm ref="formRef" :model="modelData" label-width="0" class="mt-5">
+    <ElFormItem class="mb-5">
+      <div class="w-full">
+        <div
+          class="w-full rounded-md border-2 border-dashed border-gray-200 p-5 text-center hover:border-blue-500"
+        >
+          <ElUpload
+            ref="uploadRef"
+            class="upload-demo"
+            :action="uploadUrl"
+            v-model:file-list="fileList"
+            :accept="acceptedFileTypes"
+            :show-file-list="false"
+            :before-upload="beforeUpload"
+            :http-request="customRequest"
+            :multiple="true"
+            drag
+          >
+            <div class="flex flex-col items-center justify-center py-5">
+              <IconifyIcon
+                icon="ep:upload-filled"
+                class="mb-2.5 text-xs text-gray-400"
+              />
+              <div class="ant-upload-text text-base text-gray-400">
+                拖拽文件至此，或者
+                <em class="cursor-pointer not-italic text-blue-500">
+                  选择文件
+                </em>
+              </div>
+              <div class="mt-2.5 text-sm text-gray-400">
+                已支持 {{ supportedFileTypes.join('、') }}，每个文件不超过
+                {{ maxFileSize }} MB。
+              </div>
+            </div>
+          </ElUpload>
+        </div>
+        <div
+          v-if="modelData.list && modelData.list.length > 0"
+          class="mt-4 grid grid-cols-1 gap-2"
+        >
+          <div
+            v-for="(file, index) in modelData.list"
+            :key="index"
+            class="flex items-center justify-between rounded-sm border-l-4 border-l-blue-500 px-3 py-1 shadow-sm transition-all duration-300 hover:bg-blue-50"
+          >
+            <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>
+            </div>
+            <ElButton
+              type="danger"
+              text
+              link
+              @click="removeFile(index)"
+              class="ml-2"
+            >
+              <IconifyIcon icon="lucide:trash-2" />
+            </ElButton>
+          </div>
+        </div>
+      </div>
+    </ElFormItem>
+    <ElFormItem>
+      <div class="flex w-full justify-end">
+        <ElButton
+          type="primary"
+          @click="handleNextStep"
+          :disabled="!isAllUploaded"
+        >
+          下一步
+        </ElButton>
+      </div>
+    </ElFormItem>
+  </ElForm>
+</template>
diff --git a/apps/web-ele/src/views/ai/knowledge/document/index.vue b/apps/web-ele/src/views/ai/knowledge/document/index.vue
new file mode 100644
index 000000000..df0fc7142
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/document/index.vue
@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiKnowledgeDocumentApi } from '#/api/ai/knowledge/document';
+
+import { onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { confirm, Page } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteKnowledgeDocument,
+  getKnowledgeDocumentPage,
+  updateKnowledgeDocumentStatus,
+} from '#/api/ai/knowledge/document';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** AI 知识库文档列表 */
+defineOptions({ name: 'AiKnowledgeDocument' });
+
+const route = useRoute();
+const router = useRouter();
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建知识库文档 */
+function handleCreate() {
+  router.push({
+    name: 'AiKnowledgeDocumentCreate',
+    query: { knowledgeId: route.query.knowledgeId },
+  });
+}
+
+/** 编辑知识库文档 */
+function handleEdit(id: number) {
+  router.push({
+    name: 'AiKnowledgeDocumentUpdate',
+    query: { id, knowledgeId: route.query.knowledgeId },
+  });
+}
+
+/** 删除知识库文档 */
+async function handleDelete(row: AiKnowledgeDocumentApi.KnowledgeDocument) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteKnowledgeDocument(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 跳转到知识库分段页面 */
+function handleSegment(id: number) {
+  router.push({
+    name: 'AiKnowledgeSegment',
+    query: { documentId: id },
+  });
+}
+
+/** 更新文档状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: AiKnowledgeDocumentApi.KnowledgeDocument,
+): 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,
+        });
+        // 提示并返回成功
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getKnowledgeDocumentPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            knowledgeId: route.query.knowledgeId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiKnowledgeDocumentApi.KnowledgeDocument>,
+});
+
+/** 初始化 */
+onMounted(() => {
+  // 如果知识库 ID 不存在，显示错误提示并关闭页面
+  if (!route.query.knowledgeId) {
+    ElMessage.error('知识库 ID 不存在，无法查看文档列表');
+    // 关闭当前路由，返回到知识库列表页面
+    router.back();
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="知识库文档列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['知识库文档']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['ai:knowledge:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:knowledge:update'],
+              onClick: handleEdit.bind(null, row.id),
+            },
+            {
+              label: '分段',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.BOOK,
+              auth: ['ai:knowledge:query'],
+              onClick: handleSegment.bind(null, row.id),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:knowledge:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/knowledge/knowledge/data.ts b/apps/web-ele/src/views/ai/knowledge/knowledge/data.ts
new file mode 100644
index 000000000..1e69f2c85
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/knowledge/data.ts
@@ -0,0 +1,172 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { AiModelTypeEnum, CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getModelSimpleList } from '#/api/ai/model/model';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '知识库名称',
+      componentProps: {
+        placeholder: '请输入知识库名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '知识库描述',
+      component: 'Textarea',
+      componentProps: {
+        rows: 3,
+        placeholder: '请输入知识库描述',
+      },
+    },
+    {
+      component: 'ApiSelect',
+      fieldName: 'embeddingModelId',
+      label: '向量模型',
+      componentProps: {
+        api: () => getModelSimpleList(AiModelTypeEnum.EMBEDDING),
+        labelField: 'name',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择向量模型',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'topK',
+      label: '检索 topK',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入检索 topK',
+        min: 0,
+        max: 10,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'similarityThreshold',
+      label: '检索相似度阈值',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入检索相似度阈值',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        precision: 2,
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '是否启用',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '知识库名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入知识库名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '是否启用',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择是否启用',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      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 },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/knowledge/knowledge/index.vue b/apps/web-ele/src/views/ai/knowledge/knowledge/index.vue
new file mode 100644
index 000000000..55cfbccd0
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/knowledge/index.vue
@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiKnowledgeKnowledgeApi } from '#/api/ai/knowledge/knowledge';
+
+import { useRouter } from 'vue-router';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteKnowledge,
+  getKnowledgePage,
+} from '#/api/ai/knowledge/knowledge';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建知识库 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑知识库 */
+function handleEdit(row: AiKnowledgeKnowledgeApi.Knowledge) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除知识库 */
+async function handleDelete(row: AiKnowledgeKnowledgeApi.Knowledge) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteKnowledge(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 跳转到知识库文档页面 */
+const router = useRouter();
+function handleDocument(id: number) {
+  router.push({
+    name: 'AiKnowledgeDocument',
+    query: { knowledgeId: id },
+  });
+}
+
+/** 跳转到文档召回测试页面 */
+function handleRetrieval(id: number) {
+  router.push({
+    name: 'AiKnowledgeRetrieval',
+    query: { id },
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getKnowledgePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiKnowledgeKnowledgeApi.Knowledge>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="AI 手册" url="https://doc.iocoder.cn/ai/build/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="AI 知识库列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['AI 知识库']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['ai:knowledge:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:knowledge:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('ui.widgets.document'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.BOOK,
+              auth: ['ai:knowledge:query'],
+              onClick: handleDocument.bind(null, row.id),
+            },
+            {
+              label: '召回测试',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.SEARCH,
+              auth: ['ai:knowledge:query'],
+              onClick: handleRetrieval.bind(null, row.id),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:knowledge:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/knowledge/knowledge/modules/form.vue b/apps/web-ele/src/views/ai/knowledge/knowledge/modules/form.vue
new file mode 100644
index 000000000..5daf71447
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/knowledge/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { AiKnowledgeKnowledgeApi } from '#/api/ai/knowledge/knowledge';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createKnowledge,
+  getKnowledge,
+  updateKnowledge,
+} from '#/api/ai/knowledge/knowledge';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<AiKnowledgeKnowledgeApi.Knowledge>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['AI 知识库'])
+    : $t('ui.actionTitle.create', ['AI 知识库']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 140,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as AiKnowledgeKnowledgeApi.Knowledge;
+    try {
+      await (formData.value?.id
+        ? updateKnowledge(data)
+        : createKnowledge(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<AiKnowledgeKnowledgeApi.Knowledge>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getKnowledge(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/ai/knowledge/knowledge/retrieval/index.vue b/apps/web-ele/src/views/ai/knowledge/knowledge/retrieval/index.vue
new file mode 100644
index 000000000..1af68dfd4
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/knowledge/retrieval/index.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElCard,
+  ElEmpty,
+  ElInput,
+  ElInputNumber,
+  ElMessage,
+} from 'element-plus';
+
+import { getKnowledge } from '#/api/ai/knowledge/knowledge';
+import { searchKnowledgeSegment } from '#/api/ai/knowledge/segment';
+
+/** 知识库文档召回测试 */
+defineOptions({ name: 'KnowledgeDocumentRetrieval' });
+
+const route = useRoute();
+const router = useRouter();
+
+const loading = ref(false); // 加载状态
+const segments = ref<any[]>([]); // 召回结果
+const queryParams = reactive({
+  id: undefined,
+  content: '',
+  topK: 10,
+  similarityThreshold: 0.5,
+});
+
+/** 执行召回测试 */
+async function getRetrievalResult() {
+  if (!queryParams.content) {
+    ElMessage.warning('请输入查询文本');
+    return;
+  }
+
+  loading.value = true;
+  segments.value = [];
+
+  try {
+    const data = await searchKnowledgeSegment({
+      knowledgeId: queryParams.id,
+      content: queryParams.content,
+      topK: queryParams.topK,
+      similarityThreshold: queryParams.similarityThreshold,
+    });
+    segments.value = data || [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 切换段落展开状态 */
+function toggleExpand(segment: any) {
+  segment.expanded = !segment.expanded;
+}
+
+/** 获取知识库配置信息 */
+async function getKnowledgeInfo(id: number) {
+  try {
+    const knowledge = await getKnowledge(id);
+    if (knowledge) {
+      queryParams.topK = knowledge.topK || queryParams.topK;
+      queryParams.similarityThreshold =
+        knowledge.similarityThreshold || queryParams.similarityThreshold;
+    }
+  } catch {}
+}
+
+/** 初始化 */
+onMounted(() => {
+  // 如果知识库 ID 不存在，显示错误提示并关闭页面
+  if (!route.query.id) {
+    ElMessage.error('知识库 ID 不存在，无法进行召回测试');
+    router.back();
+    return;
+  }
+  queryParams.id = route.query.id as any;
+
+  // 获取知识库信息并设置默认值
+  getKnowledgeInfo(queryParams.id as any);
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <div class="flex w-full gap-4">
+      <ElCard class="w-3/4 flex-1">
+        <div class="mb-15">
+          <h3 class="m-2 text-lg font-semibold leading-none tracking-tight">
+            召回测试
+          </h3>
+          <div class="m-2 text-sm text-gray-500">
+            根据给定的查询文本测试召回效果。
+          </div>
+        </div>
+        <div>
+          <div class="relative m-2">
+            <ElInput
+              v-model="queryParams.content"
+              :rows="8"
+              type="textarea"
+              placeholder="请输入文本"
+            />
+            <div class="absolute bottom-2 right-2 text-sm text-gray-400">
+              {{ queryParams.content?.length }} / 200
+            </div>
+          </div>
+          <div class="m-2 flex items-center">
+            <span class="w-16 text-gray-500">topK:</span>
+            <ElInputNumber
+              v-model="queryParams.topK"
+              :min="1"
+              :max="20"
+              controls-position="right"
+              class="!w-full"
+            />
+          </div>
+          <div class="m-2 flex items-center">
+            <span class="w-16 text-gray-500">相似度:</span>
+            <ElInputNumber
+              v-model="queryParams.similarityThreshold"
+              class="!w-full"
+              controls-position="right"
+              :min="0"
+              :max="1"
+              :precision="2"
+              :step="0.01"
+            />
+          </div>
+          <div class="flex justify-end">
+            <ElButton
+              type="primary"
+              @click="getRetrievalResult"
+              :loading="loading"
+            >
+              测试
+            </ElButton>
+          </div>
+        </div>
+      </ElCard>
+      <ElCard class="min-w-300 flex-1">
+        <!-- 加载中状态 -->
+        <template v-if="loading">
+          <div class="flex h-72 items-center justify-center">
+            <ElEmpty description="正在检索中..." />
+          </div>
+        </template>
+
+        <!-- 有段落 -->
+        <template v-else-if="segments.length > 0">
+          <div class="mb-15 font-bold">{{ segments.length }} 个召回段落</div>
+          <div>
+            <div
+              v-for="(segment, index) in segments"
+              :key="index"
+              class="mt-2 rounded border border-solid border-gray-200 px-2 py-2"
+            >
+              <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="whitespace-nowrap rounded-full bg-blue-50 px-2 py-1 text-sm text-blue-500"
+                >
+                  score: {{ segment.score }}
+                </span>
+              </div>
+              <div
+                class="mb-2 overflow-hidden whitespace-pre-wrap rounded bg-gray-50 text-sm transition-all duration-100"
+                :class="{
+                  'line-clamp-2 max-h-40': !segment.expanded,
+                  'max-h-[1500px]': segment.expanded,
+                }"
+              >
+                {{ segment.content }}
+              </div>
+              <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>
+                <ElButton size="small" @click="toggleExpand(segment)">
+                  {{ segment.expanded ? '收起' : '展开' }}
+                  <IconifyIcon
+                    :icon="
+                      segment.expanded
+                        ? 'lucide:chevron-up'
+                        : 'lucide:chevron-down'
+                    "
+                  />
+                </ElButton>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <!-- 无召回结果 -->
+        <template v-else>
+          <div class="flex h-72 items-center justify-center">
+            <ElEmpty description="暂无召回结果" />
+          </div>
+        </template>
+      </ElCard>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/knowledge/segment/data.ts b/apps/web-ele/src/views/ai/knowledge/segment/data.ts
new file mode 100644
index 000000000..33cb64b01
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/segment/data.ts
@@ -0,0 +1,130 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'documentId',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'content',
+      label: '切片内容',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入切片内容',
+        rows: 6,
+        showCount: true,
+      },
+      rules: 'required',
+    },
+  ];
+}
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      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'),
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: AiKnowledgeSegmentApi.KnowledgeSegment,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '分段编号',
+      minWidth: 100,
+    },
+    {
+      type: 'expand',
+      width: 40,
+      slots: { content: 'expand_content' },
+    },
+    {
+      field: 'content',
+      title: '切片内容',
+      minWidth: 250,
+    },
+    {
+      field: 'contentLength',
+      title: '字符数',
+      minWidth: 100,
+    },
+    {
+      field: 'tokens',
+      title: 'token 数量',
+      minWidth: 120,
+    },
+    {
+      field: 'retrievalCount',
+      title: '召回次数',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          activeValue: CommonStatusEnum.ENABLE,
+          inactiveValue: CommonStatusEnum.DISABLE,
+        },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/knowledge/segment/index.vue b/apps/web-ele/src/views/ai/knowledge/segment/index.vue
new file mode 100644
index 000000000..980a904e4
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/segment/index.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';
+
+import { onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteKnowledgeSegment,
+  getKnowledgeSegmentPage,
+  updateKnowledgeSegmentStatus,
+} from '#/api/ai/knowledge/segment';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const route = useRoute();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+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 loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.id]),
+  });
+  try {
+    await deleteKnowledgeSegment(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 更新知识库片段状态 */
+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);
+        // 提示并返回成功
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getKnowledgeSegmentPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiKnowledgeSegmentApi.KnowledgeSegment>,
+});
+
+/** 初始化 */
+onMounted(() => {
+  gridApi.formApi.setFieldValue('documentId', route.query.documentId);
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="分段列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['分段']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['ai:knowledge:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #expand_content="{ row }">
+        <div
+          class="whitespace-pre-wrap border-l-4 border-blue-500 px-2.5 py-5 leading-5"
+        >
+          <div class="mb-2 text-sm font-bold text-gray-600">完整内容：</div>
+          {{ row.content }}
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:knowledge:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:knowledge:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/knowledge/segment/modules/form.vue b/apps/web-ele/src/views/ai/knowledge/segment/modules/form.vue
new file mode 100644
index 000000000..1b4b1354e
--- /dev/null
+++ b/apps/web-ele/src/views/ai/knowledge/segment/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createKnowledgeSegment,
+  getKnowledgeSegment,
+  updateKnowledgeSegment,
+} from '#/api/ai/knowledge/segment';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<AiKnowledgeSegmentApi.KnowledgeSegment>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['分段'])
+    : $t('ui.actionTitle.create', ['分段']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 140,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as AiKnowledgeSegmentApi.KnowledgeSegment;
+    try {
+      await (formData.value?.id
+        ? updateKnowledgeSegment(data)
+        : createKnowledgeSegment(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<AiKnowledgeSegmentApi.KnowledgeSegment>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getKnowledgeSegment(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/ai/mindmap/manager/index.vue b/apps/web-ele/src/views/ai/mindmap/manager/index.vue
index 3241dc59b..9684dfc51 100644
--- a/apps/web-ele/src/views/ai/mindmap/manager/index.vue
+++ b/apps/web-ele/src/views/ai/mindmap/manager/index.vue
@@ -30,7 +30,7 @@ async function handleDelete(row: AiMindmapApi.MindMap) {
     text: $t('ui.actionMessage.deleting', [row.id]),
   });
   try {
-    await deleteMindMap(row.id as number);
+    await deleteMindMap(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/ai/music/index/index.vue b/apps/web-ele/src/views/ai/music/index/index.vue
new file mode 100644
index 000000000..af00e1819
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/index/index.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { Nullable, Recordable } from '@vben/types';
+
+import { ref, unref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import List from './list/index.vue';
+import Mode from './mode/index.vue';
+
+defineOptions({ name: 'AiMusicIndex' });
+
+const listRef = ref<Nullable<{ generateMusic: (...args: any) => void }>>(null);
+
+function generateMusic(args: { formData: Recordable<any> }) {
+  unref(listRef)?.generateMusic(args.formData);
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full items-stretch">
+      <!-- 模式 -->
+      <Mode class="flex-none" @generate-music="generateMusic" />
+      <!-- 音频列表 -->
+      <List ref="listRef" class="flex-auto" />
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/music/index/list/audioBar/index.vue b/apps/web-ele/src/views/ai/music/index/list/audioBar/index.vue
new file mode 100644
index 000000000..4399afde6
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/index/list/audioBar/index.vue
@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import { inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { formatPast } from '@vben/utils';
+
+import { ElImage, ElSlider } from 'element-plus';
+
+defineOptions({ name: 'AiMusicAudioBarIndex' });
+
+const currentSong = inject<any>('currentSong', {});
+
+const audioRef = ref<HTMLAudioElement | null>(null);
+const audioProps = reactive<any>({
+  autoplay: true,
+  paused: false,
+  currentTime: '00:00',
+  duration: '00:00',
+  muted: false,
+  volume: 50,
+}); // 音频相关属性https://www.runoob.com/tags/ref-av-dom.html
+
+function toggleStatus(type: string) {
+  audioProps[type] = !audioProps[type];
+  if (type === 'paused' && audioRef.value) {
+    if (audioProps[type]) {
+      audioRef.value.pause();
+    } else {
+      audioRef.value.play();
+    }
+  }
+}
+
+/** 更新播放位置 */
+function audioTimeUpdate(args: any) {
+  audioProps.currentTime = formatPast(new Date(args.timeStamp), 'mm:ss');
+}
+</script>
+
+<template>
+  <div
+    class="b-1 b-l-none h-18 bg-card flex items-center justify-between border border-solid border-rose-100 px-2"
+  >
+    <!-- 歌曲信息 -->
+    <div class="flex gap-2.5">
+      <ElImage
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        class="!w-[45px]"
+      />
+      <div>
+        <div>{{ currentSong.name }}</div>
+        <div class="text-xs text-gray-400">{{ currentSong.singer }}</div>
+      </div>
+    </div>
+    <!-- 音频controls -->
+    <div class="flex items-center gap-3">
+      <IconifyIcon
+        icon="majesticons:back-circle"
+        class="size-5 cursor-pointer text-gray-300"
+      />
+      <IconifyIcon
+        :icon="
+          audioProps.paused
+            ? 'mdi:arrow-right-drop-circle'
+            : 'solar:pause-circle-bold'
+        "
+        class="size-7 cursor-pointer"
+        @click="toggleStatus('paused')"
+      />
+      <IconifyIcon
+        icon="majesticons:next-circle"
+        class="size-5 cursor-pointer text-gray-300"
+      />
+      <div class="flex items-center gap-4">
+        <span>{{ audioProps.currentTime }}</span>
+        <ElSlider v-model="audioProps.duration" color="#409eff" class="!w-40" />
+        <span>{{ audioProps.duration }}</span>
+      </div>
+      <!-- 音频 -->
+      <audio
+        v-bind="audioProps"
+        ref="audioRef"
+        controls
+        v-show="!audioProps"
+        @timeupdate="audioTimeUpdate"
+      >
+        <!-- <source :src="audioUrl" /> -->
+      </audio>
+    </div>
+    <div class="flex items-center gap-4">
+      <IconifyIcon
+        :icon="audioProps.muted ? 'tabler:volume-off' : 'tabler:volume'"
+        class="size-5 cursor-pointer"
+        @click="toggleStatus('muted')"
+      />
+      <ElSlider v-model="audioProps.volume" color="#409eff" class="!w-40" />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/music/index/list/index.vue b/apps/web-ele/src/views/ai/music/index/list/index.vue
new file mode 100644
index 000000000..50dbf3385
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/index/list/index.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { provide, ref } from 'vue';
+
+import { ElCol, ElEmpty, ElRow, ElTabPane, ElTabs } from 'element-plus';
+
+import audioBar from './audioBar/index.vue';
+import songCard from './songCard/index.vue';
+import songInfo from './songInfo/index.vue';
+
+defineOptions({ name: 'AiMusicListIndex' });
+
+const currentType = ref('mine');
+const loading = ref(false); // loading 状态
+const currentSong = ref({}); // 当前音乐
+const mySongList = ref<Recordable<any>[]>([]);
+const squareSongList = ref<Recordable<any>[]>([]);
+
+function generateMusic(formData: Recordable<any>) {
+  loading.value = true;
+  setTimeout(() => {
+    mySongList.value = Array.from({ length: 20 }, (_, index) => {
+      return {
+        id: index,
+        audioUrl: '',
+        videoUrl: '',
+        title: `我走后${index}`,
+        imageUrl:
+          'https://www.carsmp3.com/data/attachment/forum/201909/19/091020q5kgre20fidreqyt.jpg',
+        desc: 'Metal, symphony, film soundtrack, grand, majesticMetal, dtrack, grand, majestic',
+        date: '2024年04月30日 14:02:57',
+        lyric: `<div class="_words_17xen_66"><div>大江东去，浪淘尽，千古风流人物。
+          </div><div>故垒西边，人道是，三国周郎赤壁。
+          </div><div>乱石穿空，惊涛拍岸，卷起千堆雪。
+          </div><div>江山如画，一时多少豪杰。
+          </div><div>
+          </div><div>遥想公瑾当年，小乔初嫁了，雄姿英发。
+          </div><div>羽扇纶巾，谈笑间，樯橹灰飞烟灭。
+          </div><div>故国神游，多情应笑我，早生华发。
+          </div><div>人生如梦，一尊还酹江月。</div></div>`,
+      };
+    });
+    loading.value = false;
+  }, 3000);
+}
+
+function setCurrentSong(music: Recordable<any>) {
+  currentSong.value = music;
+}
+
+defineExpose({
+  generateMusic,
+});
+
+provide('currentSong', currentSong);
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-auto overflow-hidden">
+      <ElTabs
+        v-model="currentType"
+        class="flex-auto px-5"
+        tab-position="bottom"
+      >
+        <!-- 我的创作 -->
+        <ElTabPane name="mine" label="我的创作" v-loading="loading">
+          <ElRow v-if="mySongList.length > 0" :gutter="12">
+            <ElCol v-for="song in mySongList" :key="song.id" :span="24">
+              <songCard :song-info="song" @play="setCurrentSong(song)" />
+            </ElCol>
+          </ElRow>
+          <ElEmpty v-else description="暂无音乐" />
+        </ElTabPane>
+
+        <!-- 试听广场 -->
+        <ElTabPane name="square" label="试听广场" v-loading="loading">
+          <ElRow v-if="squareSongList.length > 0" :gutter="12">
+            <ElCol v-for="song in squareSongList" :key="song.id" :span="24">
+              <songCard :song-info="song" @play="setCurrentSong(song)" />
+            </ElCol>
+          </ElRow>
+          <ElEmpty v-else description="暂无音乐" />
+        </ElTabPane>
+      </ElTabs>
+      <!-- songInfo -->
+      <songInfo class="flex-none" />
+    </div>
+    <audioBar class="flex-none" />
+  </div>
+</template>
+<style lang="scss" scoped>
+:deep(.el-tabs) {
+  .el-tabs__content {
+    padding: 0 7px;
+    overflow: auto;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/ai/music/index/list/songCard/index.vue b/apps/web-ele/src/views/ai/music/index/list/songCard/index.vue
new file mode 100644
index 000000000..2d7bdb661
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/index/list/songCard/index.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { inject } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage } from 'element-plus';
+
+defineOptions({ name: 'AiMusicSongCardIndex' });
+
+defineProps({
+  songInfo: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emits = defineEmits(['play']);
+
+const currentSong = inject<any>('currentSong', {});
+
+function playSong() {
+  emits('play');
+}
+</script>
+
+<template>
+  <div class="mb-3 flex rounded p-3">
+    <div class="relative" @click="playSong">
+      <ElImage :src="songInfo.imageUrl" class="w-20 flex-none" />
+      <div
+        class="absolute left-0 top-0 flex h-full w-full cursor-pointer items-center justify-center bg-black bg-opacity-40"
+      >
+        <IconifyIcon
+          :icon="
+            currentSong.id === songInfo.id
+              ? 'solar:pause-circle-bold'
+              : 'mdi:arrow-right-drop-circle'
+          "
+          :size="30"
+        />
+      </div>
+    </div>
+    <div class="ml-2">
+      <div>{{ songInfo.title }}</div>
+      <div class="mt-2 line-clamp-2 text-xs">
+        {{ songInfo.desc }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/music/index/list/songInfo/index.vue b/apps/web-ele/src/views/ai/music/index/list/songInfo/index.vue
new file mode 100644
index 000000000..eb4fbc8ad
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/index/list/songInfo/index.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { inject } from 'vue';
+
+import { ElButton, ElCard, ElImage } from 'element-plus';
+
+defineOptions({ name: 'AiMusicSongInfoIndex' });
+
+const currentSong = inject<any>('currentSong', {});
+</script>
+
+<template>
+  <ElCard class="!mb-0 w-40 leading-6">
+    <ElImage :src="currentSong.imageUrl" class="h-full w-full" />
+
+    <div class="">{{ currentSong.title }}</div>
+    <div class="line-clamp-1 text-xs">
+      {{ currentSong.desc }}
+    </div>
+    <div class="text-xs">
+      {{ currentSong.date }}
+    </div>
+    <ElButton size="small" round class="my-2">信息复用</ElButton>
+    <div class="text-xs" v-html="currentSong.lyric"></div>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/ai/music/index/mode/desc.vue b/apps/web-ele/src/views/ai/music/index/mode/desc.vue
new file mode 100644
index 000000000..bcf9a01eb
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/index/mode/desc.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { reactive } from 'vue';
+
+import { ElInput, ElOption, ElSelect, ElSwitch } from 'element-plus';
+
+import Title from '../title/index.vue';
+
+defineOptions({ name: 'AiMusicModeDesc' });
+
+const formData = reactive({
+  desc: '',
+  pure: false,
+  version: '3',
+});
+
+defineExpose({
+  formData,
+});
+</script>
+
+<template>
+  <div>
+    <Title
+      title="音乐/歌词说明"
+      desc="描述您想要的音乐风格和主题，使用流派和氛围而不是特定的艺术家和歌曲"
+    >
+      <ElInput
+        v-model="formData.desc"
+        type="textarea"
+        :autosize="{ minRows: 6, maxRows: 6 }"
+        :maxlength="1200"
+        :show-word-limit="true"
+        placeholder="一首关于糟糕分手的欢快歌曲"
+      />
+    </Title>
+
+    <Title title="纯音乐" class="mt-5" desc="创建一首没有歌词的歌曲">
+      <template #extra>
+        <ElSwitch v-model="formData.pure" size="small" />
+      </template>
+    </Title>
+
+    <Title
+      title="版本"
+      desc="描述您想要的音乐风格和主题，使用流派和氛围而不是特定的艺术家和歌曲"
+    >
+      <ElSelect v-model="formData.version" class="w-full" placeholder="请选择">
+        <ElOption
+          v-for="item in [
+            {
+              value: '3',
+              label: 'V3',
+            },
+            {
+              value: '2',
+              label: 'V2',
+            },
+          ]"
+          :key="item.value"
+          :value="item.value"
+          :label="item.label"
+        />
+      </ElSelect>
+    </Title>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/music/index/mode/index.vue b/apps/web-ele/src/views/ai/music/index/mode/index.vue
new file mode 100644
index 000000000..813ea73ba
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/index/mode/index.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import type { Nullable, Recordable } from '@vben/types';
+
+import { ref, unref } from 'vue';
+
+import { ElButton, ElCard, ElRadioButton, ElRadioGroup } from 'element-plus';
+
+import desc from './desc.vue';
+import lyric from './lyric.vue';
+
+defineOptions({ name: 'AiMusicModeIndex' });
+
+const emits = defineEmits(['generateMusic']);
+
+const generateMode = ref('lyric');
+
+const modeRef = ref<Nullable<{ formData: Recordable<any> }>>(null);
+
+function generateMusic() {
+  emits('generateMusic', { formData: unref(modeRef)?.formData });
+}
+</script>
+
+<template>
+  <ElCard class="!mb-0 h-full w-80">
+    <ElRadioGroup v-model="generateMode" class="mb-4">
+      <ElRadioButton value="desc"> 描述模式 </ElRadioButton>
+      <ElRadioButton value="lyric"> 歌词模式 </ElRadioButton>
+    </ElRadioGroup>
+
+    <!-- 描述模式/歌词模式 切换 -->
+    <component :is="generateMode === 'desc' ? desc : lyric" ref="modeRef" />
+
+    <ElButton type="primary" round class="w-full" @click="generateMusic">
+      创作音乐
+    </ElButton>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/ai/music/index/mode/lyric.vue b/apps/web-ele/src/views/ai/music/index/mode/lyric.vue
new file mode 100644
index 000000000..c64f91564
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/index/mode/lyric.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+
+import {
+  ElButton,
+  ElInput,
+  ElOption,
+  ElSelect,
+  ElSpace,
+  ElTag,
+} from 'element-plus';
+
+import Title from '../title/index.vue';
+
+defineOptions({ name: 'AiMusicModeLyric' });
+
+const tags = ['rock', 'punk', 'jazz', 'soul', 'country', 'kidsmusic', 'pop'];
+
+const showCustom = ref(false);
+
+const formData = reactive({
+  lyric: '',
+  style: '',
+  name: '',
+  version: '',
+});
+
+defineExpose({
+  formData,
+});
+</script>
+
+<template>
+  <div class="">
+    <Title title="歌词" desc="自己编写歌词或使用Ai生成歌词，两节/8行效果最佳">
+      <ElInput
+        v-model="formData.lyric"
+        type="textarea"
+        :autosize="{ minRows: 6, maxRows: 6 }"
+        :maxlength="1200"
+        :show-word-limit="true"
+        placeholder="请输入您自己的歌词"
+      />
+    </Title>
+
+    <Title title="音乐风格">
+      <ElSpace class="flex-wrap">
+        <ElTag v-for="tag in tags" :key="tag" class="mb-2">
+          {{ tag }}
+        </ElTag>
+      </ElSpace>
+
+      <ElButton
+        :type="showCustom ? 'primary' : 'default'"
+        round
+        size="small"
+        class="mb-2"
+        @click="showCustom = !showCustom"
+      >
+        自定义风格
+      </ElButton>
+    </Title>
+
+    <Title
+      v-show="showCustom"
+      desc="描述您想要的音乐风格，Suno无法识别艺术家的名字，但可以理解流派和氛围"
+      class="mt-3"
+    >
+      <ElInput
+        v-model="formData.style"
+        type="textarea"
+        :autosize="{ minRows: 4, maxRows: 4 }"
+        :maxlength="256"
+        show-word-limit
+        placeholder="输入音乐风格(英文)"
+      />
+    </Title>
+
+    <Title title="音乐/歌曲名称">
+      <ElInput
+        class="w-full"
+        v-model="formData.name"
+        placeholder="请输入音乐/歌曲名称"
+      />
+    </Title>
+
+    <Title title="版本">
+      <ElSelect v-model="formData.version" class="w-full" placeholder="请选择">
+        <ElOption
+          v-for="item in [
+            {
+              value: '3',
+              label: 'V3',
+            },
+            {
+              value: '2',
+              label: 'V2',
+            },
+          ]"
+          :key="item.value"
+          :value="item.value"
+          :label="item.label"
+        />
+      </ElSelect>
+    </Title>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/music/index/title/index.vue b/apps/web-ele/src/views/ai/music/index/title/index.vue
new file mode 100644
index 000000000..04dc58bcc
--- /dev/null
+++ b/apps/web-ele/src/views/ai/music/index/title/index.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+defineOptions({ name: 'AiMusicTitleIndex' });
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  desc: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="mb-3">
+    <div class="flex items-center justify-between text-gray-600">
+      <span>{{ title }}</span>
+      <slot name="extra"></slot>
+    </div>
+    <div class="my-2 text-xs text-gray-400">
+      {{ desc }}
+    </div>
+    <slot></slot>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/music/manager/index.vue b/apps/web-ele/src/views/ai/music/manager/index.vue
index 9095e1b5f..d0e04cb57 100644
--- a/apps/web-ele/src/views/ai/music/manager/index.vue
+++ b/apps/web-ele/src/views/ai/music/manager/index.vue
@@ -23,7 +23,7 @@ async function handleDelete(row: AiMusicApi.Music) {
     text: $t('ui.actionMessage.deleting', [row.id]),
   });
   try {
-    await deleteMusic(row.id as number);
+    await deleteMusic(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/ai/workflow/data.ts b/apps/web-ele/src/views/ai/workflow/data.ts
new file mode 100644
index 000000000..5decf9f3f
--- /dev/null
+++ b/apps/web-ele/src/views/ai/workflow/data.ts
@@ -0,0 +1,97 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '流程标识',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程标识',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '流程名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入流程名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      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 },
+      },
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/ai/workflow/form/index.vue b/apps/web-ele/src/views/ai/workflow/form/index.vue
new file mode 100644
index 000000000..00e5a08d9
--- /dev/null
+++ b/apps/web-ele/src/views/ai/workflow/form/index.vue
@@ -0,0 +1,288 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, provide, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { confirm, Page } from '@vben/common-ui';
+import { AiModelTypeEnum, CommonStatusEnum } from '@vben/constants';
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElCard, ElMessage } from 'element-plus';
+
+import { getModelSimpleList } from '#/api/ai/model/model';
+import { createWorkflow, getWorkflow, updateWorkflow } from '#/api/ai/workflow';
+import { createModel, deployModel, updateModel } from '#/api/bpm/model';
+
+import BasicInfo from './modules/basic-info.vue';
+import WorkflowDesign from './modules/workflow-design.vue';
+
+defineOptions({ name: 'AiWorkflowCreate' });
+
+const router = useRouter();
+
+const route = useRoute();
+
+const workflowId = ref<string>('');
+const actionType = ref<string>('');
+
+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() {
+  await basicInfoRef.value?.validate();
+}
+
+/** 工作流设计校验 */
+async function validateWorkflow() {
+  await workflowDesignRef.value?.validate();
+}
+
+async function initData() {
+  if (actionType.value === 'update' && workflowId.value) {
+    formData.value = await getWorkflow(workflowId.value as any);
+    workflowData.value = JSON.parse(formData.value.graph);
+  }
+  const models = await getModelSimpleList(AiModelTypeEnum.CHAT);
+  llmProvider.value = {
+    llm: () =>
+      models.map(({ id, name }) => ({
+        value: id,
+        label: name,
+      })),
+    knowledge: () => [],
+    internal: () => [],
+  };
+
+  // 设置当前步骤
+  currentStep.value = 0;
+}
+
+/** 校验所有步骤数据是否完整 */
+async function validateAllSteps() {
+  // 基本信息校验
+  try {
+    await validateBasic();
+  } catch {
+    currentStep.value = 0;
+    throw new Error('请完善基本信息');
+  }
+
+  // 表单设计校验
+  try {
+    await validateWorkflow();
+  } catch {
+    currentStep.value = 1;
+    throw new Error('请完善工作流信息');
+  }
+  return true;
+}
+
+/** 保存操作 */
+async function handleSave() {
+  try {
+    // 保存前校验所有步骤的数据
+    await validateAllSteps();
+
+    // 更新表单数据
+    const data = {
+      ...formData.value,
+      graph: JSON.stringify(workflowData.value),
+    };
+    await (actionType.value === 'update'
+      ? updateWorkflow(data)
+      : createWorkflow(data));
+
+    // 保存成功，提示并跳转到列表页
+    ElMessage.success('保存成功');
+    await tabs.closeCurrentTab();
+    await router.push({ name: 'AiWorkflow' });
+  } catch (error: any) {
+    console.error('保存失败:', error);
+    ElMessage.warning(error.message || '请完善所有步骤的必填信息');
+  }
+}
+
+/** 发布操作 */
+async function handleDeploy() {
+  try {
+    // 修改场景下直接发布，新增场景下需要先确认
+    if (!formData.value.id) {
+      await confirm('是否确认发布该流程？');
+    }
+    // 校验所有步骤
+    await validateAllSteps();
+
+    // 更新表单数据
+    const modelData = {
+      ...formData.value,
+    };
+
+    // 先保存所有数据
+    if (formData.value.id) {
+      await updateModel(modelData);
+    } else {
+      const result = await createModel(modelData);
+      formData.value.id = result.id;
+    }
+
+    // 发布
+    await deployModel(formData.value.id);
+    ElMessage.success('发布成功');
+    // 返回列表页
+    await router.push({ name: 'AiWorkflow' });
+  } catch (error: any) {
+    console.error('发布失败:', error);
+    ElMessage.warning(error.message || '发布失败');
+  }
+}
+
+/** 步骤切换处理 */
+async function handleStepClick(index: number) {
+  try {
+    if (index !== 0) {
+      await validateBasic();
+    }
+    if (index !== 1) {
+      await validateWorkflow();
+    }
+
+    // 切换步骤
+    currentStep.value = index;
+  } catch (error) {
+    console.error('步骤切换失败:', error);
+    ElMessage.warning('请先完善当前步骤必填信息');
+  }
+}
+
+const tabs = useTabs();
+
+/** 返回列表页 */
+function handleBack() {
+  // 关闭当前页签
+  tabs.closeCurrentTab();
+  // 跳转到列表页，使用路径， 目前后端的路由 name： 'name'+ menuId
+  router.push({ path: '/ai/workflow' });
+}
+
+/** 初始化 */
+onMounted(async () => {
+  workflowId.value = route.params.id as string;
+  actionType.value = route.params.type as string;
+  await initData();
+});
+
+/** 添加组件卸载前的清理 */
+onBeforeUnmount(() => {
+  // 清理所有的引用
+  basicInfoRef.value = undefined;
+  workflowDesignRef.value = undefined;
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="mx-auto">
+      <!-- 头部导航栏 -->
+      <div
+        class="bg-card absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b px-5"
+      >
+        <!-- 左侧标题 -->
+        <div class="flex w-48 items-center overflow-hidden">
+          <IconifyIcon
+            icon="lucide:arrow-left"
+            class="size-5 flex-shrink-0 cursor-pointer"
+            @click="handleBack"
+          />
+          <span
+            class="ml-2.5 truncate text-base"
+            :title="formData.name || '创建AI 工作流'"
+          >
+            {{ formData.name || '创建AI 工作流' }}
+          </span>
+        </div>
+
+        <!-- 步骤条 -->
+        <div class="flex h-full flex-1 items-center justify-center">
+          <div class="flex h-full w-96 items-center justify-between">
+            <div
+              v-for="(step, index) in steps"
+              :key="index"
+              class="relative mx-4 flex h-full cursor-pointer items-center"
+              :class="[
+                currentStep === index
+                  ? 'border-b-2 border-solid border-blue-500 text-blue-500'
+                  : 'text-gray-500',
+              ]"
+              @click="handleStepClick(index)"
+            >
+              <div
+                class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-base"
+                :class="[
+                  currentStep === index
+                    ? 'border-blue-500 bg-blue-500 text-white'
+                    : 'border-gray-300 bg-white text-gray-500',
+                ]"
+              >
+                {{ index + 1 }}
+              </div>
+              <span class="whitespace-nowrap text-base font-bold">
+                {{ step.title }}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 右侧按钮 -->
+        <div class="flex w-48 items-center justify-end gap-2">
+          <ElButton
+            v-if="actionType === 'update'"
+            type="primary"
+            @click="handleDeploy"
+          >
+            发 布
+          </ElButton>
+          <ElButton type="primary" @click="handleSave">
+            <span v-if="actionType === 'definition'">恢 复</span>
+            <span v-else>保 存</span>
+          </ElButton>
+        </div>
+      </div>
+      <!-- 主体内容 -->
+      <ElCard class="mb-4 p-4">
+        <div class="mt-12">
+          <!-- 第一步：基本信息 -->
+          <div v-if="currentStep === 0" class="mx-auto w-4/6">
+            <BasicInfo v-model="formData" ref="basicInfoRef" />
+          </div>
+          <!-- 第二步：表单设计  -->
+          <WorkflowDesign
+            v-if="currentStep === 1"
+            v-model="formData"
+            :provider="llmProvider"
+            ref="workflowDesignRef"
+          />
+        </div>
+      </ElCard>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/ai/workflow/form/modules/basic-info.vue b/apps/web-ele/src/views/ai/workflow/form/modules/basic-info.vue
new file mode 100644
index 000000000..09f87253e
--- /dev/null
+++ b/apps/web-ele/src/views/ai/workflow/form/modules/basic-info.vue
@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import type { FormRules } from 'element-plus';
+
+import { ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+const modelData = defineModel<any>(); // 创建本地数据副本
+const formRef = ref(); // 表单引用
+const rules: FormRules = {
+  code: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
+};
+
+/** 表单校验 */
+async function validate() {
+  await formRef.value?.validate();
+}
+
+defineExpose({ validate });
+</script>
+
+<template>
+  <ElForm
+    ref="formRef"
+    :model="modelData"
+    :rules="rules"
+    label-width="120px"
+    label-position="right"
+    class="mt-5"
+  >
+    <ElFormItem label="流程标识" prop="code" class="mb-5">
+      <ElInput
+        class="w-full"
+        v-model="modelData.code"
+        clearable
+        placeholder="请输入流程标识"
+      />
+    </ElFormItem>
+    <ElFormItem label="流程名称" prop="name" class="mb-5">
+      <ElInput
+        v-model="modelData.name"
+        clearable
+        placeholder="请输入流程名称"
+      />
+    </ElFormItem>
+    <ElFormItem label="状态" prop="status" class="mb-5">
+      <ElSelect
+        class="w-full"
+        v-model="modelData.status"
+        clearable
+        placeholder="请选择状态"
+      >
+        <ElOption
+          v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS, 'number')"
+          :key="dict.value"
+          :value="dict.value"
+          :label="dict.label"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem label="流程描述" prop="description" class="mb-5">
+      <ElInput v-model="modelData.description" type="textarea" clearable />
+    </ElFormItem>
+  </ElForm>
+</template>
diff --git a/apps/web-ele/src/views/ai/workflow/form/modules/workflow-design.vue b/apps/web-ele/src/views/ai/workflow/form/modules/workflow-design.vue
new file mode 100644
index 000000000..8786e31cd
--- /dev/null
+++ b/apps/web-ele/src/views/ai/workflow/form/modules/workflow-design.vue
@@ -0,0 +1,286 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { inject, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { Tinyflow } from '@vben/plugins/tinyflow';
+import { isNumber } from '@vben/utils';
+
+import { ElButton, ElInput, ElOption, ElSelect } from 'element-plus';
+
+import { testWorkflow } from '#/api/ai/workflow';
+
+defineProps<{
+  provider: any;
+}>();
+
+const tinyflowRef = ref<InstanceType<typeof Tinyflow> | null>(null);
+const workflowData = inject('workflowData') as Ref;
+const params4Test = ref<any[]>([]);
+const paramsOfStartNode = ref<any>({});
+const testResult = ref(null);
+const loading = ref(false);
+const error = ref(null);
+
+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();
+}
+
+/** 运行流程 */
+async function goRun() {
+  try {
+    const val = tinyflowRef.value?.getData();
+    loading.value = true;
+    error.value = null;
+    testResult.value = null;
+
+    // 查找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;
+      }
+      let dataType = paramDefinitions[paramKey];
+      if (!dataType) {
+        dataType = 'String';
+      }
+      try {
+        convertedParams[paramKey] = convertParamValue(value, dataType);
+      } catch (error: any) {
+        throw new Error(`参数 ${paramKey} 转换失败: ${error.message}`);
+      }
+    }
+
+    // 执行测试请求
+    testResult.value = await testWorkflow({
+      graph: JSON.stringify(val),
+      params: convertedParams,
+    });
+  } catch (error: any) {
+    error.value =
+      error.response?.data?.message || '运行失败，请检查参数和网络连接';
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 获取开始节点 */
+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) {
+      throw new Error('流程缺少开始节点');
+    }
+    return startNode;
+  }
+  throw new Error('请设计流程');
+}
+
+/** 添加参数项 */
+function addParam() {
+  params4Test.value.push({ key: '', value: '' });
+}
+
+/** 删除参数项 */
+function removeParam(index: number) {
+  params4Test.value.splice(index, 1);
+}
+
+/** 类型转换函数 */
+function convertParamValue(value: string, dataType: string) {
+  if (value === '') {
+    return null;
+  }
+  switch (dataType) {
+    case 'Number': {
+      const num = Number(value);
+      if (!isNumber(num)) throw new Error('非数字格式');
+      return num;
+    }
+    case 'String': {
+      return String(value);
+    }
+    case 'Boolean': {
+      if (value.toLowerCase() === 'true') {
+        return true;
+      }
+      if (value.toLowerCase() === 'false') {
+        return false;
+      }
+      throw new Error('必须为 true/false');
+    }
+    case 'Array':
+    case 'Object': {
+      try {
+        return JSON.parse(value);
+      } catch (error: any) {
+        throw new Error(`JSON格式错误: ${error.message}`);
+      }
+    }
+    default: {
+      throw new Error(`不支持的类型: ${dataType}`);
+    }
+  }
+}
+
+/** 表单校验 */
+async function validate() {
+  if (!workflowData.value || !tinyflowRef.value) {
+    throw new Error('请设计流程');
+  }
+  workflowData.value = tinyflowRef.value.getData();
+  return true;
+}
+
+defineExpose({ validate });
+</script>
+
+<template>
+  <div class="relative h-[800px] w-full">
+    <Tinyflow
+      v-if="workflowData"
+      ref="tinyflowRef"
+      class-name="custom-class"
+      class="h-full w-full"
+      :data="workflowData"
+      :provider="provider"
+    />
+    <div class="absolute right-8 top-8">
+      <ElButton
+        @click="testWorkflowModel"
+        type="primary"
+        v-access:code="['ai:workflow:test']"
+      >
+        测试
+      </ElButton>
+    </div>
+
+    <Drawer title="工作流测试">
+      <fieldset
+        class="min-inline-size-auto m-0 rounded-lg border border-gray-200 px-3 py-4"
+      >
+        <legend class="ml-2 px-2.5 text-base font-semibold text-gray-600">
+          <h3>运行参数配置</h3>
+        </legend>
+        <div class="p-2">
+          <div
+            class="mb-1 flex items-center justify-around"
+            v-for="(param, index) in params4Test"
+            :key="index"
+          >
+            <ElSelect class="w-48" v-model="param.key" placeholder="参数名">
+              <ElOption
+                v-for="(value, key) in paramsOfStartNode"
+                :key="key"
+                :value="key"
+                :disabled="!!value?.disabled"
+                :label="value?.description || key"
+              />
+            </ElSelect>
+            <ElInput
+              class="mx-2 w-48"
+              v-model="param.value"
+              placeholder="参数值"
+            />
+            <ElButton type="danger" circle @click="removeParam(index)">
+              <template #icon>
+                <IconifyIcon icon="lucide:trash" />
+              </template>
+            </ElButton>
+          </div>
+          <ElButton type="primary" plain class="mt-2" @click="addParam">
+            添加参数
+          </ElButton>
+        </div>
+      </fieldset>
+
+      <fieldset
+        class="bg-card m-0 mt-10 rounded-lg border border-gray-200 px-3 py-4"
+      >
+        <legend class="ml-2 px-2.5 text-base font-semibold text-gray-600">
+          <h3>运行结果</h3>
+        </legend>
+        <div class="p-2">
+          <div v-if="loading" class="text-primary">执行中...</div>
+          <div v-else-if="error" class="text-danger">{{ error }}</div>
+          <pre
+            v-else-if="testResult"
+            class="max-h-80 overflow-auto whitespace-pre-wrap rounded-lg bg-white p-3 font-mono text-sm leading-5"
+          >
+            {{ JSON.stringify(testResult, null, 2) }}
+          </pre>
+          <div v-else class="text-gray-400">点击运行查看结果</div>
+        </div>
+      </fieldset>
+
+      <ElButton
+        size="large"
+        class="mt-2 w-full bg-green-500 text-white"
+        @click="goRun"
+      >
+        运行流程
+      </ElButton>
+    </Drawer>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/ai/workflow/index.vue b/apps/web-ele/src/views/ai/workflow/index.vue
new file mode 100644
index 000000000..ab31d4756
--- /dev/null
+++ b/apps/web-ele/src/views/ai/workflow/index.vue
@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiWorkflowApi } from '#/api/ai/workflow';
+
+import { Page } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteWorkflow, getWorkflowPage } from '#/api/ai/workflow';
+import { $t } from '#/locales';
+import { router } from '#/router';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建工作流 */
+function handleCreate() {
+  router.push({
+    name: 'AiWorkflowCreate',
+  });
+}
+
+/** 编辑工作流 */
+function handleEdit(row: any) {
+  router.push({
+    name: 'AiWorkflowCreate',
+    params: { id: row.id, type: 'update' },
+  });
+}
+
+/** 删除工作流 */
+async function handleDelete(row: any) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteWorkflow(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWorkflowPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AiWorkflowApi.Workflow>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="AI 工作流列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['AI 工作流']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['ai:workflow:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['ai:workflow:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['ai:workflow:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/category/components/index.ts b/apps/web-ele/src/views/mall/product/category/components/index.ts
index aa1424405..c3196cb27 100644
--- a/apps/web-ele/src/views/mall/product/category/components/index.ts
+++ b/apps/web-ele/src/views/mall/product/category/components/index.ts
@@ -1 +1 @@
-export { default as ProductCategorySelect } from './category-select.vue';
+export { default as ProductCategorySelect } from './select.vue';
diff --git a/apps/web-ele/src/views/mall/product/category/components/category-select.vue b/apps/web-ele/src/views/mall/product/category/components/select.vue
similarity index 100%
rename from apps/web-ele/src/views/mall/product/category/components/category-select.vue
rename to apps/web-ele/src/views/mall/product/category/components/select.vue
diff --git a/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue b/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue
index e1060efaa..9bb148551 100644
--- a/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// TODO @AI：一些 modal 是否使用 Modal 组件，而不是 el-modal？
 import { ref, watch } from 'vue';
 
 import { ElButton, ElInput } from 'element-plus';
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
index b94c10f7c..c9518654a 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@@ -27,7 +27,7 @@ const props = defineProps<{ modelValue: ComponentStyle }>();
 const emit = defineEmits(['update:modelValue']);
 const formData = useVModel(props, 'modelValue', emit);
 
-const treeData = [
+const treeData: any[] = [
   {
     label: '外部边距',
     prop: 'margin',
@@ -96,7 +96,7 @@ const treeData = [
   },
 ];
 
-const handleSliderChange = (prop: string) => {
+function handleSliderChange(prop: string) {
   switch (prop) {
     case 'borderRadius': {
       formData.value.borderTopLeftRadius = formData.value.borderRadius;
@@ -120,7 +120,7 @@ const handleSliderChange = (prop: string) => {
       break;
     }
   }
-};
+}
 </script>
 
 <template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index 2d73bfc58..a688e96dc 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -53,11 +53,11 @@ watch(
 );
 
 /** 克隆组件 */
-const handleCloneComponent = (component: DiyComponent<any>) => {
+function handleCloneComponent(component: DiyComponent<any>) {
   const instance = cloneDeep(component);
   instance.uid = Date.now();
   return instance;
-};
+}
 </script>
 
 <template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
index 73e559358..0924362c2 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
@@ -24,7 +24,7 @@ import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 轮播图属性面板
+/** 轮播图属性面板 */
 defineOptions({ name: 'CarouselProperty' });
 
 const props = defineProps<{ modelValue: CarouselProperty }>();
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
index 5f6bcbb32..a34392443 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
@@ -7,7 +7,7 @@ import { onMounted, ref, watch } from 'vue';
 
 import { ElScrollbar } from 'element-plus';
 
-import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
 
 import {
   CouponDiscount,
@@ -32,9 +32,7 @@ watch(
   () => props.property.couponIds,
   async () => {
     if (props.property.couponIds?.length > 0) {
-      couponList.value = await CouponTemplateApi.getCouponTemplateList(
-        props.property.couponIds,
-      );
+      couponList.value = await getCouponTemplateList(props.property.couponIds);
     }
   },
   {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
index 7a5986658..3d114b29c 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
@@ -39,7 +39,7 @@ function handleToggleFab() {
         <ElImage :src="item.imgUrl" fit="contain" class="h-7 w-7">
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
-              <IconifyIcon icon="ep:picture" :color="item.textColor" />
+              <IconifyIcon icon="lucide:image" :color="item.textColor" />
             </div>
           </template>
         </ElImage>
@@ -55,7 +55,7 @@ function handleToggleFab() {
     <!-- todo: @owen 使用APP主题色 -->
     <ElButton type="primary" size="large" circle @click="handleToggleFab">
       <IconifyIcon
-        icon="ep:plus"
+        icon="lucide:plus"
         class="transition-transform duration-300"
         :class="expanded ? 'rotate-[135deg]' : 'rotate-0'"
       />
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
index 47877b41e..30f5570d3 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -23,9 +23,9 @@ const formData = useVModel(props, 'modelValue', emit);
 const editDialogRef = ref(); // 热区编辑对话框
 
 /** 打开热区编辑对话框 */
-const handleOpenEditDialog = () => {
+function handleOpenEditDialog() {
   editDialogRef.value.open();
-};
+}
 </script>
 
 <template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
index ade9ad597..3b402822a 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
@@ -11,7 +11,7 @@ export interface ImageBarProperty {
 export const component = {
   id: 'ImageBar',
   name: '图片展示',
-  icon: 'ep:picture',
+  icon: 'lucide:image',
   property: {
     imgUrl: '',
     url: '',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
index 33da84290..e7d358f12 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
@@ -13,7 +13,9 @@ 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>
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
index 454e06a0b..5b2c4ccf9 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
@@ -1,32 +1,25 @@
-import { defineAsyncComponent } from 'vue';
-
-/*
+/**
  * 组件注册
  *
- * 组件规范：
- * 1. 每个子目录就是一个独立的组件，每个目录包括以下三个文件：
- * 2. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
- * 3. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可
- * 4. property.vue：组件属性表单，用于配置组件，必选，
+ * 组件规范：每个子目录就是一个独立的组件，每个目录包括以下三个文件：
+ *  1. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
+ *  2. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可
+ *  3. property.vue：组件属性表单，用于配置组件，必选，
  *
  * 注：
- * 组件ID以config.ts中配置的id为准，与组件目录的名称无关，但还是建议组件目录的名称与组件ID保持一致
+ * 组件 ID 以 config.ts 中配置的 id 为准，与组件目录的名称无关，但还是建议组件目录的名称与组件 ID 保持一致
  */
+import { defineAsyncComponent } from 'vue';
 
-// 导入组件界面模块
-const viewModules: Record<string, any> = import.meta.glob('./*/*.vue');
-// 导入配置模块
+const viewModules: Record<string, any> = import.meta.glob('./*/*.vue'); // 导入组件界面模块
 const configModules: Record<string, any> = import.meta.glob('./*/config.ts', {
   eager: true,
-});
+}); // 导入配置模块
 
-// 界面模块
-const components: Record<string, any> = {};
-// 组件配置模块
-const componentConfigs: Record<string, any> = {};
+const components: Record<string, any> = {}; // 界面模块
+const componentConfigs: Record<string, any> = {}; // 组件配置模块
 
-// 组件界面的类型
-type ViewType = 'index' | 'property';
+type ViewType = 'index' | 'property'; // 组件界面的类型
 
 /**
  * 注册组件的界面模块
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
index d9b68333e..b8fc2e910 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
@@ -19,7 +19,7 @@ export interface NoticeContentProperty {
 export const component = {
   id: 'NoticeBar',
   name: '公告栏',
-  icon: 'ep:bell',
+  icon: 'lucide:bell',
   property: {
     iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
     contents: [
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
index a00e6458b..79661b0f3 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
@@ -11,7 +11,7 @@ export interface PageConfigProperty {
 export const component = {
   id: 'PageConfig',
   name: '页面设置',
-  icon: 'ep:document',
+  icon: 'lucide:file-text',
   property: {
     description: '',
     backgroundColor: '#f5f5f5',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue
index 694f77ed2..a55c0e37c 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue
@@ -19,7 +19,6 @@ function handleActive(index: number) {
   activeIndex.value = index;
 }
 </script>
-
 <template>
   <div
     v-for="(item, index) in props.property.list"
@@ -35,7 +34,7 @@ function handleActive(index: number) {
     <ElImage :src="item.imgUrl" fit="contain" class="h-full w-full">
       <template #error>
         <div class="flex h-full w-full items-center justify-center">
-          <IconifyIcon icon="ep:picture" />
+          <IconifyIcon icon="lucide:image" />
         </div>
       </template>
     </ElImage>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
index a9e84977b..82009b6b7 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
@@ -39,7 +39,7 @@ export interface ProductCardFieldProperty {
 export const component = {
   id: 'ProductCard',
   name: '商品卡片',
-  icon: 'fluent:text-column-two-left-24-filled',
+  icon: 'lucide:grid-3x3',
   property: {
     layoutType: 'oneColBigImg',
     fields: {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
index b66c27c6a..1863e4b6f 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
@@ -9,19 +9,19 @@ import { fenToYuan } from '@vben/utils';
 
 import { ElImage } from 'element-plus';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
+import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品卡片 */
 defineOptions({ name: 'ProductCard' });
 
 const props = defineProps<{ property: ProductCardProperty }>();
 
-const spuList = ref<MallSpuApi.Spu[]>([]);
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
 
 watch(
   () => props.property.spuIds,
   async () => {
-    spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds);
+    spuList.value = await getSpuDetailList(props.property.spuIds);
   },
   {
     immediate: true,
@@ -37,17 +37,17 @@ function calculateSpace(index: number) {
   return { marginLeft, marginTop };
 }
 
-const containerRef = ref();
+const containerRef = ref(); // 容器
 
 /** 计算商品的宽度 */
-const calculateWidth = () => {
+function calculateWidth() {
   let width = '100%';
   if (props.property.layoutType === 'twoCol') {
     // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
index 54d795af0..fc6e391f5 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
@@ -9,7 +9,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { ElImage, ElScrollbar } from 'element-plus';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
+import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品栏 */
 defineOptions({ name: 'ProductList' });
@@ -21,7 +21,7 @@ const spuList = ref<MallSpuApi.Spu[]>([]);
 watch(
   () => props.property.spuIds,
   async () => {
-    spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds);
+    spuList.value = await getSpuDetailList(props.property.spuIds);
   },
   {
     immediate: true,
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
index 09f1ff673..cb90e63f2 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
@@ -5,7 +5,7 @@ import type { MallArticleApi } from '#/api/mall/promotion/article';
 
 import { ref, watch } from 'vue';
 
-import * as ArticleApi from '#/api/mall/promotion/article/index';
+import { getArticle } from '#/api/mall/promotion/article';
 
 /** 营销文章 */
 defineOptions({ name: 'PromotionArticle' });
@@ -18,7 +18,7 @@ watch(
   () => props.property.id,
   async () => {
     if (props.property.id) {
-      article.value = await ArticleApi.getArticle(props.property.id);
+      article.value = await getArticle(props.property.id);
     }
   },
   {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
index cb0659748..e553a6e5f 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
@@ -10,8 +10,8 @@ import { fenToYuan } from '@vben/utils';
 
 import { ElImage } from 'element-plus';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
-import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
+import { getSpuDetailList } from '#/api/mall/product/spu';
+import { getCombinationActivityListByIds } from '#/api/mall/promotion/combination/combinationActivity';
 
 /** 拼团卡片 */
 defineOptions({ name: 'PromotionCombination' });
@@ -34,9 +34,7 @@ watch(
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取拼团活动详情列表
         combinationActivityList.value =
-          await CombinationActivityApi.getCombinationActivityListByIds(
-            activityIds,
-          );
+          await getCombinationActivityListByIds(activityIds);
 
         // 获取拼团活动的 SPU 详情列表
         spuList.value = [];
@@ -44,7 +42,7 @@ watch(
           .map((activity) => activity.spuId)
           .filter((spuId): spuId is number => typeof spuId === 'number');
         if (spuIdList.value.length > 0) {
-          spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value);
+          spuList.value = await getSpuDetailList(spuIdList.value);
         }
 
         // 更新 SPU 的最低价格
@@ -78,7 +76,7 @@ function calculateSpace(index: number) {
   return { marginLeft, marginTop };
 }
 
-const containerRef = ref();
+const containerRef = ref(); // 容器
 
 /** 计算商品的宽度 */
 function calculateWidth() {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
index 139fc63d6..c7def4dff 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
@@ -74,7 +74,7 @@ function calculateSpace(index: number) {
   return { marginLeft, marginTop };
 }
 
-const containerRef = ref();
+const containerRef = ref(); // 容器
 
 /** 计算商品的宽度 */
 function calculateWidth() {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
index 69465b223..77c0b8b34 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
@@ -54,11 +54,6 @@ const formData = useVModel(props, 'modelValue', emit);
                 <IconifyIcon icon="fluent:text-column-two-24-filled" />
               </ElRadioButton>
             </ElTooltip>
-            <!--<ElTooltip class="item" content="三列" placement="bottom">
-              <ElRadioButton value="threeCol">
-                <IconifyIcon icon="fluent:text-column-three-24-filled" />
-              </ElRadioButton>
-            </ElTooltip>-->
           </ElRadioGroup>
         </ElFormItem>
         <ElFormItem label="商品名称" prop="fields.name.show">
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
index 207ecabcf..4ff3ff99d 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
@@ -10,8 +10,8 @@ import { fenToYuan } from '@vben/utils';
 
 import { ElImage } from 'element-plus';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
-import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
+import { getSpuDetailList } from '#/api/mall/product/spu';
+import { getSeckillActivityListByIds } from '#/api/mall/promotion/seckill/seckillActivity';
 
 /** 秒杀卡片 */
 defineOptions({ name: 'PromotionSeckill' });
@@ -31,7 +31,7 @@ watch(
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取秒杀活动详情列表
         seckillActivityList.value =
-          await SeckillActivityApi.getSeckillActivityListByIds(activityIds);
+          await getSeckillActivityListByIds(activityIds);
 
         // 获取秒杀活动的 SPU 详情列表
         spuList.value = [];
@@ -39,7 +39,7 @@ watch(
           .map((activity) => activity.spuId)
           .filter((spuId): spuId is number => typeof spuId === 'number');
         if (spuIdList.value.length > 0) {
-          spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value);
+          spuList.value = await getSpuDetailList(spuIdList.value);
         }
 
         // 更新 SPU 的最低价格
@@ -73,7 +73,7 @@ function calculateSpace(index: number) {
   return { marginLeft, marginTop };
 }
 
-const containerRef = ref();
+const containerRef = ref(); // 容器
 
 /** 计算商品的宽度 */
 function calculateWidth() {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
index c471780e1..a3c39aab7 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
@@ -20,7 +20,7 @@ export type PlaceholderPosition = 'center' | 'left';
 export const component = {
   id: 'SearchBar',
   name: '搜索框',
-  icon: 'ep:search',
+  icon: 'lucide:search',
   property: {
     height: 28,
     showScan: false,
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
index 7463d7db6..8d44dd79e 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
@@ -30,7 +30,7 @@ defineProps<{ property: SearchProperty }>();
           justifyContent: property.placeholderPosition,
         }"
       >
-        <IconifyIcon icon="ep:search" />
+        <IconifyIcon icon="lucide:search" />
         <span>{{ property.placeholder || '搜索商品' }}</span>
       </div>
       <div class="absolute right-2 flex items-center justify-center gap-2">
@@ -39,10 +39,7 @@ defineProps<{ property: SearchProperty }>();
           {{ keyword }}
         </span>
         <!-- 扫一扫 -->
-        <IconifyIcon
-          icon="ant-design:scan-outlined"
-          v-show="property.showScan"
-        />
+        <IconifyIcon icon="lucide:scan-barcode" v-show="property.showScan" />
       </div>
     </div>
   </div>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
index 520081790..bf2b43dc7 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
@@ -5,7 +5,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElImage } from 'element-plus';
 
-/** 底部导航 */
+/** 页面底部导航栏 */
 defineOptions({ name: 'TabBar' });
 
 defineProps<{ property: TabBarProperty }>();
@@ -26,7 +26,7 @@ defineProps<{ property: TabBarProperty }>();
       <div
         v-for="(item, index) in property.items"
         :key="index"
-        class="tab-bar-item flex w-full flex-col items-center justify-center text-xs"
+        class="flex w-full flex-col items-center justify-center text-xs"
       >
         <ElImage
           :src="index === 0 ? item.activeIconUrl : item.iconUrl"
@@ -35,7 +35,7 @@ defineProps<{ property: TabBarProperty }>();
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
               <IconifyIcon
-                icon="ep:picture"
+                icon="lucide:image"
                 class="h-[26px] w-[26px] rounded"
               />
             </div>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
index 6c3368618..451b2b165 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
@@ -44,7 +44,7 @@ const handleThemeChange = () => {
 </script>
 
 <template>
-  <div class="tab-bar">
+  <div>
     <ElForm :model="formData" label-width="80px">
       <ElFormItem label="主题" prop="theme">
         <ElSelect v-model="formData!.theme" @change="handleThemeChange">
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
index 21731b8a6..265b85e75 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
@@ -63,7 +63,10 @@ defineProps<{ property: TitleBarProperty }>();
       <span v-if="property.more.type !== 'icon'">
         {{ property.more.text }}
       </span>
-      <IconifyIcon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
+      <IconifyIcon
+        icon="lucide:arrow-right"
+        v-if="property.more.type !== 'text'"
+      />
     </div>
   </div>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
index 7e5dcd1f9..4666980ea 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
@@ -2,15 +2,14 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡券属性 */
 export interface UserCouponProperty {
-  // 组件样式
-  style: ComponentStyle;
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserCoupon',
   name: '用户卡券',
-  icon: 'ep:ticket',
+  icon: 'lucide:ticket',
   property: {
     style: {
       bgType: 'color',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
index e149b22f1..fcc4a6b53 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
@@ -9,7 +9,7 @@ export interface UserOrderProperty {
 export const component = {
   id: 'UserOrder',
   name: '用户订单',
-  icon: 'ep:list',
+  icon: 'lucide:clipboard-list',
   property: {
     style: {
       bgType: 'color',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
index 71d8d0245..ab48845d7 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
@@ -9,7 +9,7 @@ export interface UserWalletProperty {
 export const component = {
   id: 'UserWallet',
   name: '用户资产',
-  icon: 'ep:wallet-filled',
+  icon: 'lucide:wallet',
   property: {
     style: {
       bgType: 'color',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
index ab7ccd311..db001525a 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
@@ -17,7 +17,7 @@ export interface VideoPlayerStyle extends ComponentStyle {
 export const component = {
   id: 'VideoPlayer',
   name: '视频播放',
-  icon: 'ep:video-play',
+  icon: 'lucide:video',
   property: {
     videoUrl: '',
     posterUrl: '',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/util.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/util.ts
index a8f33d2fa..8926ca581 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/util.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/util.ts
@@ -27,14 +27,11 @@ export interface DiyComponentLibrary {
   components: string[]; // 组件列表
 }
 
-// 组件样式
+/** 组件样式 */
 export interface ComponentStyle {
-  // 背景类型
-  bgType: 'color' | 'img';
-  // 背景颜色
-  bgColor: string;
-  // 背景图片
-  bgImg: string;
+  bgType: 'color' | 'img'; // 背景类型
+  bgColor: string; // 背景颜色
+  bgImg: string; // 背景图片
   // 外边距
   margin: number;
   marginTop: number;
diff --git a/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue b/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
index 079cf2c7e..3c673a709 100644
--- a/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
@@ -63,9 +63,8 @@ const handleDelete = function (index: number) {
         >
           <ElTooltip content="拖动排序">
             <IconifyIcon
-              icon="ic:round-drag-indicator"
-              class="drag-icon cursor-move"
-              style="color: #8a909c"
+              icon="lucide:move"
+              class="drag-icon cursor-move text-gray-500"
             />
           </ElTooltip>
           <ElTooltip content="删除">
@@ -90,7 +89,7 @@ const handleDelete = function (index: number) {
       :disabled="limit > 0 && formData.length >= limit"
       @click="handleAdd"
     >
-      <IconifyIcon icon="ep:plus" /><span>添加</span>
+      <IconifyIcon icon="lucide:plus" /><span>添加</span>
     </ElButton>
   </ElTooltip>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
index 4c59d96fa..5f45238b8 100644
--- a/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
@@ -183,7 +183,7 @@ function exitHotAreaSelectMode() {
  * 迭代魔方矩阵
  * @param callback 回调
  */
-const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
+function eachCube(callback: (x: number, y: number, cube: Cube) => void) {
   for (const [x, row] of cubes.value.entries()) {
     if (!row) continue;
     for (const [y, cube] of row.entries()) {
@@ -192,7 +192,7 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
       }
     }
   }
-};
+}
 </script>
 <template>
   <div class="relative">
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue b/apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue
index d368f7e5e..6143063c8 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue
+++ b/apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue
@@ -133,7 +133,7 @@ function emitActivityChange() {
         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"
       >
-        <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
+        <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
       </div>
     </ElTooltip>
   </div>
diff --git a/apps/web-ele/src/views/member/level/index.vue b/apps/web-ele/src/views/member/level/index.vue
index de500e2c9..3284397f4 100644
--- a/apps/web-ele/src/views/member/level/index.vue
+++ b/apps/web-ele/src/views/member/level/index.vue
@@ -81,10 +81,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <DocAlert
-      title="会员等级、积分、签到"
-      url="https://doc.iocoder.cn/member/level/"
-    />
+    <template #doc>
+      <DocAlert
+        title="会员等级、积分、签到"
+        url="https://doc.iocoder.cn/member/level/"
+      />
+    </template>
 
     <FormModal @success="handleRefresh" />
     <Grid table-title="等级列表">
diff --git a/apps/web-ele/src/views/member/point/record/index.vue b/apps/web-ele/src/views/member/point/record/index.vue
index 921f0df6d..cbc15c614 100644
--- a/apps/web-ele/src/views/member/point/record/index.vue
+++ b/apps/web-ele/src/views/member/point/record/index.vue
@@ -42,10 +42,12 @@ const [Grid] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <DocAlert
-      title="会员等级、积分、签到"
-      url="https://doc.iocoder.cn/member/level/"
-    />
+    <template #doc>
+      <DocAlert
+        title="会员等级、积分、签到"
+        url="https://doc.iocoder.cn/member/level/"
+      />
+    </template>
 
     <Grid table-title="积分记录列表" />
   </Page>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/favorite-list.vue b/apps/web-ele/src/views/member/user/detail/modules/favorite-list.vue
index f91a2c3e0..7fa7231c7 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/favorite-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/favorite-list.vue
@@ -5,7 +5,7 @@ import type { MallFavoriteApi } from '#/api/mall/product/favorite';
 import { DICT_TYPE } from '@vben/constants';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as FavoriteApi from '#/api/mall/product/favorite';
+import { getFavoritePage } from '#/api/mall/product/favorite';
 
 const props = defineProps<{
   userId: number;
@@ -72,7 +72,7 @@ const [Grid] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await FavoriteApi.getFavoritePage({
+          return await getFavoritePage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             userId: props.userId,
diff --git a/apps/web-ele/src/views/mp/account/index.vue b/apps/web-ele/src/views/mp/account/index.vue
index dd3f4785e..ff779584a 100644
--- a/apps/web-ele/src/views/mp/account/index.vue
+++ b/apps/web-ele/src/views/mp/account/index.vue
@@ -69,7 +69,7 @@ async function handleGenerateQrCode(row: MpAccountApi.Account) {
 /** 清空 API 配额 */
 async function handleCleanQuota(row: MpAccountApi.Account) {
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.processing', ['清空 API 配额']),
+    text: '正在清空 API 配额',
   });
   try {
     await clearAccountQuota(row.id!);
@@ -155,6 +155,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: '生成二维码',
               type: 'primary',
               link: true,
+              icon: 'qrcode',
               auth: ['mp:account:qr-code'],
               onClick: handleGenerateQrCode.bind(null, row),
             },
@@ -162,6 +163,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: '清空 API 配额',
               type: 'danger',
               link: true,
+              icon: 'clear',
               auth: ['mp:account:clear-quota'],
               popConfirm: {
                 title: '你确认要清空 API 配额？',
diff --git a/apps/web-ele/src/views/mp/autoReply/index.vue b/apps/web-ele/src/views/mp/autoReply/index.vue
index fed1b9f6b..28f563e74 100644
--- a/apps/web-ele/src/views/mp/autoReply/index.vue
+++ b/apps/web-ele/src/views/mp/autoReply/index.vue
@@ -166,7 +166,9 @@ onMounted(async () => {
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
+    <template #doc>
+      <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
+    </template>
 
     <!-- tab 切换 -->
     <ContentWrap>
diff --git a/apps/web-ele/src/views/mp/draft/index.vue b/apps/web-ele/src/views/mp/draft/index.vue
index adca0ec51..4a0123824 100644
--- a/apps/web-ele/src/views/mp/draft/index.vue
+++ b/apps/web-ele/src/views/mp/draft/index.vue
@@ -239,7 +239,9 @@ onMounted(async () => {
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+    <template #doc>
+      <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+    </template>
 
     <FormModal
       @success="
diff --git a/apps/web-ele/src/views/mp/modules/wx-material-select/main.vue b/apps/web-ele/src/views/mp/modules/wx-material-select/main.vue
index 727132162..6d8c5033b 100644
--- a/apps/web-ele/src/views/mp/modules/wx-material-select/main.vue
+++ b/apps/web-ele/src/views/mp/modules/wx-material-select/main.vue
@@ -2,7 +2,6 @@
   - Copyright (C) 2018-2019
   - All rights reserved, Designed By www.joolun.com
   芋道源码：
-  ① 移除 avue 组件，使用 ElementUI 原生组件
 -->
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/card.scss b/apps/web-ele/src/views/mp/modules/wx-msg/card.scss
index 58fde79fd..639f4ca8e 100644
--- a/apps/web-ele/src/views/mp/modules/wx-msg/card.scss
+++ b/apps/web-ele/src/views/mp/modules/wx-msg/card.scss
@@ -1,4 +1,4 @@
-.avue-card {
+.mp-card {
   &__item {
     box-sizing: border-box;
     height: 200px;
@@ -99,18 +99,18 @@
 }
 
 /** joolun 额外加的 */
-.avue-comment__main {
+.mp-comment__main {
   flex: unset !important;
   margin: 0 8px !important;
   border-radius: 5px !important;
 }
 
-.avue-comment__header {
+.mp-comment__header {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
 }
 
-.avue-comment__body {
+.mp-comment__body {
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
 }
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/comment.scss b/apps/web-ele/src/views/mp/modules/wx-msg/comment.scss
index 219e2e5d4..98e137d4b 100644
--- a/apps/web-ele/src/views/mp/modules/wx-msg/comment.scss
+++ b/apps/web-ele/src/views/mp/modules/wx-msg/comment.scss
@@ -1,5 +1,5 @@
 /* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
-.avue-comment {
+.mp-comment {
   display: flex;
   align-items: flex-start;
   margin-bottom: 30px;
@@ -7,7 +7,7 @@
   &--reverse {
     flex-direction: row-reverse;
 
-    .avue-comment__main {
+    .mp-comment__main {
       &::before,
       &::after {
         right: -8px;
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-list.vue b/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-list.vue
index e1f86a43e..230f4485e 100644
--- a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-list.vue
+++ b/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-list.vue
@@ -55,7 +55,7 @@ const getNickname = (sendFrom: SendFromType) =>
         <div
           class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
         >
-          <div class="avue-comment__create_time">
+          <div class="mp-comment__create_time">
             {{ formatDateTime(item.createTime) }}
           </div>
         </div>
diff --git a/apps/web-ele/src/views/mp/modules/wx-music/main.vue b/apps/web-ele/src/views/mp/modules/wx-music/main.vue
index e097e1dfc..28688d785 100644
--- a/apps/web-ele/src/views/mp/modules/wx-music/main.vue
+++ b/apps/web-ele/src/views/mp/modules/wx-music/main.vue
@@ -44,18 +44,15 @@ defineExpose({
       target="_blank"
       :href="hqMusicUrl ? hqMusicUrl : musicUrl"
     >
-      <div
-        class="avue-card__body"
-        style="padding: 10px; background-color: #fff; border-radius: 5px"
-      >
-        <div class="avue-card__avatar">
+      <div class="mp-card__body bg-background rounded-sm p-2.5">
+        <div class="mp-card__avatar">
           <img :src="thumbMediaUrl" alt="" />
         </div>
-        <div class="avue-card__detail">
-          <div class="avue-card__title" style="margin-bottom: unset">
+        <div class="mp-card__detail">
+          <div class="mp-card__title" style="margin-bottom: unset">
             {{ title }}
           </div>
-          <div class="avue-card__info" style="height: unset">
+          <div class="mp-card__info" style="height: unset">
             {{ description }}
           </div>
         </div>
diff --git a/apps/web-tdesign/.env b/apps/web-tdesign/.env
index dae0149d4..50f5cdbba 100644
--- a/apps/web-tdesign/.env
+++ b/apps/web-tdesign/.env
@@ -1,8 +1,35 @@
 # 应用标题
-VITE_APP_TITLE=Vben Admin Tdesign
+VITE_APP_TITLE=芋道管理系统
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
-VITE_APP_NAMESPACE=vben-web-tdesign
+VITE_APP_NAMESPACE=yudao-vben-tdesign
 
 # 对store进行加密的密钥，在将store持久化到localStorage时会使用该密钥进行加密
 VITE_APP_STORE_SECURE_KEY=please-replace-me-with-your-own-key
+
+# 是否开启模拟数据
+VITE_NITRO_MOCK=false
+
+# 租户开关
+VITE_APP_TENANT_ENABLE=true
+
+# 验证码的开关
+VITE_APP_CAPTCHA_ENABLE=false
+
+# 文档地址的开关
+VITE_APP_DOCALERT_ENABLE=true
+
+# 百度统计
+VITE_APP_BAIDU_CODE = e98f2eab6ceb8688bc6d8fc5332ff093
+
+# GoView域名
+VITE_GOVIEW_URL='http://127.0.0.1:3000'
+
+# API 加解密
+VITE_APP_API_ENCRYPT_ENABLE = true
+VITE_APP_API_ENCRYPT_HEADER = X-Api-Encrypt
+VITE_APP_API_ENCRYPT_ALGORITHM = AES
+VITE_APP_API_ENCRYPT_REQUEST_KEY = 52549111389893486934626385991395
+VITE_APP_API_ENCRYPT_RESPONSE_KEY = 96103715984234343991809655248883
+# VITE_APP_API_ENCRYPT_REQUEST_KEY = MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCls2rIpnGdYnLFgz1XU13GbNQ5DloyPpvW00FPGjqn5Z6JpK+kDtVlnkhwR87iRrE5Vf2WNqRX6vzbLSgveIQY8e8oqGCb829myjf1MuI+ZzN4ghf/7tEYhZJGPI9AbfxFqBUzm+kR3/HByAI22GLT96WM26QiMK8n3tIP/yiLswIDAQAB
+# VITE_APP_API_ENCRYPT_RESPONSE_KEY = MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAOH8IfIFxL/MR9XIg1UDv5z1fGXQI93E8wrU4iPFovL/sEt9uSgSkjyidC2O7N+m7EKtoN6b1u7cEwXSkwf3kfK0jdWLSQaNpX5YshqXCBzbDfugDaxuyYrNA4/tIMs7mzZAk0APuRXB35Dmupou7Yw7TFW/7QhQmGfzeEKULQvnAgMBAAECgYAw8LqlQGyQoPv5p3gRxEMOCfgL0JzD3XBJKztiRd35RDh40Nx1ejgjW4dPioFwGiVWd2W8cAGHLzALdcQT2KDJh+T/tsd4SPmI6uSBBK6Ff2DkO+kFFcuYvfclQQKqxma5CaZOSqhgenacmgTMFeg2eKlY3symV6JlFNu/IKU42QJBAOhxAK/Eq3e61aYQV2JSguhMR3b8NXJJRroRs/QHEanksJtl+M+2qhkC9nQVXBmBkndnkU/l2tYcHfSBlAyFySMCQQD445tgm/J2b6qMQmuUGQAYDN8FIkHjeKmha+l/fv0igWm8NDlBAem91lNDIPBUzHL1X1+pcts5bjmq99YdOnhtAkAg2J8dN3B3idpZDiQbC8fd5bGPmdI/pSUudAP27uzLEjr2qrE/QPPGdwm2m7IZFJtK7kK1hKio6u48t/bg0iL7AkEAuUUs94h+v702Fnym+jJ2CHEkXvz2US8UDs52nWrZYiM1o1y4tfSHm8H8bv8JCAa9GHyriEawfBraILOmllFdLQJAQSRZy4wmlaG48MhVXodB85X+VZ9krGXZ2TLhz7kz9iuToy53l9jTkESt6L5BfBDCVdIwcXLYgK+8KFdHN5W7HQ==
diff --git a/apps/web-tdesign/.env.development b/apps/web-tdesign/.env.development
index f2b444287..5c71e36f2 100644
--- a/apps/web-tdesign/.env.development
+++ b/apps/web-tdesign/.env.development
@@ -3,14 +3,19 @@ VITE_PORT=5999
 
 VITE_BASE=/
 
+# 请求路径
+VITE_BASE_URL=http://127.0.0.1:48080
 # 接口地址
-VITE_GLOB_API_URL=/api
-
-# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
-VITE_NITRO_MOCK=true
-
+VITE_GLOB_API_URL=/admin-api
+# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
+VITE_UPLOAD_TYPE=server
 # 是否打开 devtools，true 为打开，false 为关闭
 VITE_DEVTOOLS=false
 
 # 是否注入全局loading
 VITE_INJECT_APP_LOADING=true
+
+# 默认登录用户名
+VITE_APP_DEFAULT_USERNAME=admin
+# 默认登录密码
+VITE_APP_DEFAULT_PASSWORD=admin123
diff --git a/apps/web-tdesign/.env.production b/apps/web-tdesign/.env.production
index 5375847a6..910fd64cc 100644
--- a/apps/web-tdesign/.env.production
+++ b/apps/web-tdesign/.env.production
@@ -1,7 +1,11 @@
 VITE_BASE=/
 
+# 请求路径
+VITE_BASE_URL=http://127.0.0.1:48080
 # 接口地址
-VITE_GLOB_API_URL=https://mock-napi.vben.pro/api
+VITE_GLOB_API_URL=http://127.0.0.1:48080/admin-api
+# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
+VITE_UPLOAD_TYPE=server
 
 # 是否开启压缩，可以设置为 none, brotli, gzip
 VITE_COMPRESS=none
diff --git a/apps/web-tdesign/package.json b/apps/web-tdesign/package.json
index fa364a330..6386cce56 100644
--- a/apps/web-tdesign/package.json
+++ b/apps/web-tdesign/package.json
@@ -26,6 +26,7 @@
     "#/*": "./src/*"
   },
   "dependencies": {
+    "@tinymce/tinymce-vue": "catalog:",
     "@vben/access": "workspace:*",
     "@vben/common-ui": "workspace:*",
     "@vben/constants": "workspace:*",
@@ -41,10 +42,12 @@
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
     "@vueuse/core": "catalog:",
+    "cropperjs": "catalog:",
     "dayjs": "catalog:",
     "lodash-es": "^4.17.21",
     "pinia": "catalog:",
     "tdesign-vue-next": "^1.17.1",
+    "tinymce": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
   },
diff --git a/apps/web-tdesign/src/adapter/vxe-table.ts b/apps/web-tdesign/src/adapter/vxe-table.ts
index 43bd68afd..24caaefb4 100644
--- a/apps/web-tdesign/src/adapter/vxe-table.ts
+++ b/apps/web-tdesign/src/adapter/vxe-table.ts
@@ -2,9 +2,24 @@ import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
 
 import { h } from 'vue';
 
-import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+import {
+  AsyncVxeColumn,
+  AsyncVxeTable,
+  createRequiredValidation,
+  setupVbenVxeTable,
+  useVbenVxeGrid,
+} from '@vben/plugins/vxe-table';
+import {
+  erpCountInputFormatter,
+  erpNumberFormatter,
+  fenToYuan,
+  formatPast2,
+} from '@vben/utils';
 
-import { Button, Image } from 'tdesign-vue-next';
+import { Button, Image, ImageViewer, Switch, Tag } from 'tdesign-vue-next';
+
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
 
 import { useVbenForm } from './form';
 
@@ -22,16 +37,32 @@ setupVbenVxeTable({
           // 全局禁用vxe-table的表单配置，使用formOptions
           enabled: false,
         },
+        toolbarConfig: {
+          import: false, // 是否导入
+          export: false, // 是否导出
+          refresh: true, // 是否刷新
+          print: false, // 是否打印
+          zoom: true, // 是否缩放
+          custom: true, // 是否自定义配置
+        },
+        customConfig: {
+          mode: 'modal',
+        },
         proxyConfig: {
           autoLoad: true,
           response: {
-            result: 'items',
+            result: 'list',
             total: 'total',
-            list: 'items',
           },
           showActiveMsg: true,
           showResponseMsg: false,
         },
+        pagerConfig: {
+          enabled: true,
+        },
+        sortConfig: {
+          multiple: true,
+        },
         round: true,
         showOverflow: true,
         size: 'small',
@@ -46,24 +77,156 @@ setupVbenVxeTable({
       },
     });
 
+    vxeUI.renderer.add('CellImages', {
+      renderTableDefault(_renderOpts, params) {
+        const { column, row } = params;
+        if (column && column.field && row[column.field]) {
+          return h(ImageViewer, {}, () => {
+            return row[column.field].map((item: any) =>
+              h(Image, { src: item }),
+            );
+          });
+        }
+        return '';
+      },
+    });
+
     // 表格配置项可以用 cellRender: { name: 'CellLink' },
     vxeUI.renderer.add('CellLink', {
       renderTableDefault(renderOpts) {
         const { props } = renderOpts;
         return h(
           Button,
-          { size: 'small', theme: 'primary', variant: 'text' },
+          { size: 'small', variant: 'text' },
           { default: () => props?.text },
         );
       },
     });
 
+    // 表格配置项可以用 cellRender: { name: 'CellTag' },
+    vxeUI.renderer.add('CellTag', {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
+        const { column, row } = params;
+        return h(Tag, { color: props?.color }, () => row[column.field]);
+      },
+    });
+
+    vxeUI.renderer.add('CellTags', {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
+        const { column, row } = params;
+        if (!row[column.field] || row[column.field].length === 0) {
+          return '';
+        }
+        return h(
+          'div',
+          { class: 'flex items-center justify-center' },
+          {
+            default: () =>
+              row[column.field].map((item: any) =>
+                h(Tag, { color: props?.color }, { default: () => item }),
+              ),
+          },
+        );
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellDict', props:{dictType: ''} },
+    vxeUI.renderer.add('CellDict', {
+      renderTableDefault(renderOpts, params) {
+        const { props } = renderOpts;
+        const { column, row } = params;
+        if (!props) {
+          return '';
+        }
+        // 使用 DictTag 组件替代原来的实现
+        return h(DictTag, {
+          type: props.type,
+          value: row[column.field]?.toString(),
+        });
+      },
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellSwitch', props: { beforeChange: () => {} } },
+    // add by 芋艿：from https://github.com/vbenjs/vue-vben-admin/blob/main/playground/src/adapter/vxe-table.ts#L97-L123
+    vxeUI.renderer.add('CellSwitch', {
+      renderTableDefault({ attrs, props }, { column, row }) {
+        const loadingKey = `__loading_${column.field}`;
+        const finallyProps = {
+          checkedChildren: $t('common.enabled'),
+          checkedValue: 1,
+          unCheckedChildren: $t('common.disabled'),
+          unCheckedValue: 0,
+          ...props,
+          checked: row[column.field],
+          loading: row[loadingKey] ?? false,
+          'onUpdate:checked': onChange,
+        };
+
+        async function onChange(newVal: any) {
+          row[loadingKey] = true;
+          try {
+            const result = await attrs?.beforeChange?.(newVal, row);
+            if (result !== false) {
+              row[column.field] = newVal;
+            }
+          } finally {
+            row[loadingKey] = false;
+          }
+        }
+
+        return h(Switch, finallyProps);
+      },
+    });
+
     // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
     // vxeUI.formats.add
+
+    vxeUI.formats.add('formatPast2', {
+      tableCellFormatMethod({ cellValue }) {
+        return formatPast2(cellValue);
+      },
+    });
+
+    // add by 星语：数量格式化，保留 3 位
+    vxeUI.formats.add('formatAmount3', {
+      tableCellFormatMethod({ cellValue }) {
+        return erpCountInputFormatter(cellValue);
+      },
+    });
+    // add by 星语：数量格式化，保留 2 位
+    vxeUI.formats.add('formatAmount2', {
+      tableCellFormatMethod({ cellValue }, digits = 2) {
+        return `${erpNumberFormatter(cellValue, digits)}`;
+      },
+    });
+
+    vxeUI.formats.add('formatFenToYuanAmount', {
+      tableCellFormatMethod({ cellValue }, digits = 2) {
+        return `${erpNumberFormatter(fenToYuan(cellValue), digits)}`;
+      },
+    });
+
+    // add by 星语：文件大小格式化
+    vxeUI.formats.add('formatFileSize', {
+      tableCellFormatMethod({ cellValue }, digits = 2) {
+        if (!cellValue) return '0 B';
+        const unitArr = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+        const index = Math.floor(Math.log(cellValue) / Math.log(1024));
+        const size = cellValue / 1024 ** index;
+        const formattedSize = size.toFixed(digits);
+        return `${formattedSize} ${unitArr[index]}`;
+      },
+    });
   },
   useVbenForm,
 });
 
-export { useVbenVxeGrid };
+export { createRequiredValidation, useVbenVxeGrid };
+
+export const [VxeTable, VxeColumn] = [AsyncVxeTable, AsyncVxeColumn];
+
+export * from '#/components/table-action';
 
 export type * from '@vben/plugins/vxe-table';
diff --git a/apps/web-tdesign/src/api/core/auth.ts b/apps/web-tdesign/src/api/core/auth.ts
index 71d9f9943..604644a1f 100644
--- a/apps/web-tdesign/src/api/core/auth.ts
+++ b/apps/web-tdesign/src/api/core/auth.ts
@@ -1,3 +1,5 @@
+import type { AuthPermissionInfo } from '@vben/types';
+
 import { baseRequestClient, requestClient } from '#/api/request';
 
 export namespace AuthApi {
@@ -5,47 +7,155 @@ export namespace AuthApi {
   export interface LoginParams {
     password?: string;
     username?: string;
+    captchaVerification?: string;
+    // 绑定社交登录时，需要传递如下参数
+    socialType?: number;
+    socialCode?: string;
+    socialState?: string;
   }
 
   /** 登录接口返回值 */
   export interface LoginResult {
     accessToken: string;
+    refreshToken: string;
+    userId: number;
+    expiresTime: number;
   }
 
-  export interface RefreshTokenResult {
-    data: string;
-    status: number;
+  /** 租户信息返回值 */
+  export interface TenantResult {
+    id: number;
+    name: string;
+  }
+
+  /** 手机验证码获取接口参数 */
+  export interface SmsCodeParams {
+    mobile: string;
+    scene: number;
+  }
+
+  /** 手机验证码登录接口参数 */
+  export interface SmsLoginParams {
+    mobile: string;
+    code: string;
+  }
+
+  /** 注册接口参数 */
+  export interface RegisterParams {
+    username: string;
+    password: string;
+    captchaVerification: string;
+  }
+
+  /** 重置密码接口参数 */
+  export interface ResetPasswordParams {
+    password: string;
+    mobile: string;
+    code: string;
+  }
+
+  /** 社交快捷登录接口参数 */
+  export interface SocialLoginParams {
+    type: number;
+    code: string;
+    state: string;
   }
 }
 
-/**
- * 登录
- */
+/** 登录 */
 export async function loginApi(data: AuthApi.LoginParams) {
-  return requestClient.post<AuthApi.LoginResult>('/auth/login', data);
-}
-
-/**
- * 刷新accessToken
- */
-export async function refreshTokenApi() {
-  return baseRequestClient.post<AuthApi.RefreshTokenResult>('/auth/refresh', {
-    withCredentials: true,
+  return requestClient.post<AuthApi.LoginResult>('/system/auth/login', data, {
+    headers: {
+      isEncrypt: false,
+    },
   });
 }
 
-/**
- * 退出登录
- */
-export async function logoutApi() {
-  return baseRequestClient.post('/auth/logout', {
-    withCredentials: true,
+/** 刷新 accessToken */
+export async function refreshTokenApi(refreshToken: string) {
+  return baseRequestClient.post(
+    `/system/auth/refresh-token?refreshToken=${refreshToken}`,
+  );
+}
+
+/** 退出登录 */
+export async function logoutApi(accessToken: string) {
+  return baseRequestClient.post(
+    '/system/auth/logout',
+    {},
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    },
+  );
+}
+
+/** 获取权限信息 */
+export async function getAuthPermissionInfoApi() {
+  return requestClient.get<AuthPermissionInfo>(
+    '/system/auth/get-permission-info',
+  );
+}
+
+/** 获取租户列表 */
+export async function getTenantSimpleList() {
+  return requestClient.get<AuthApi.TenantResult[]>(
+    `/system/tenant/simple-list`,
+  );
+}
+
+/** 使用租户域名，获得租户信息 */
+export async function getTenantByWebsite(website: string) {
+  return requestClient.get<AuthApi.TenantResult>(
+    `/system/tenant/get-by-website?website=${website}`,
+  );
+}
+
+/** 获取验证码 */
+export async function getCaptcha(data: any) {
+  return baseRequestClient.post('/system/captcha/get', data);
+}
+
+/** 校验验证码 */
+export async function checkCaptcha(data: any) {
+  return baseRequestClient.post('/system/captcha/check', data);
+}
+
+/** 获取登录验证码 */
+export async function sendSmsCode(data: AuthApi.SmsCodeParams) {
+  return requestClient.post('/system/auth/send-sms-code', data);
+}
+
+/** 短信验证码登录 */
+export async function smsLogin(data: AuthApi.SmsLoginParams) {
+  return requestClient.post('/system/auth/sms-login', data);
+}
+
+/** 注册 */
+export async function register(data: AuthApi.RegisterParams) {
+  return requestClient.post('/system/auth/register', data);
+}
+
+/** 通过短信重置密码 */
+export async function smsResetPassword(data: AuthApi.ResetPasswordParams) {
+  return requestClient.post('/system/auth/reset-password', data);
+}
+
+/** 社交授权的跳转 */
+export async function socialAuthRedirect(type: number, redirectUri: string) {
+  return requestClient.get('/system/auth/social-auth-redirect', {
+    params: {
+      type,
+      redirectUri,
+    },
   });
 }
 
-/**
- * 获取用户权限码
- */
-export async function getAccessCodesApi() {
-  return requestClient.get<string[]>('/auth/codes');
+/** 社交快捷登录 */
+export async function socialLogin(data: AuthApi.SocialLoginParams) {
+  return requestClient.post<AuthApi.LoginResult>(
+    '/system/auth/social-login',
+    data,
+  );
 }
diff --git a/apps/web-tdesign/src/api/core/index.ts b/apps/web-tdesign/src/api/core/index.ts
index 28a5aef47..269586ee8 100644
--- a/apps/web-tdesign/src/api/core/index.ts
+++ b/apps/web-tdesign/src/api/core/index.ts
@@ -1,3 +1 @@
 export * from './auth';
-export * from './menu';
-export * from './user';
diff --git a/apps/web-tdesign/src/api/core/menu.ts b/apps/web-tdesign/src/api/core/menu.ts
deleted file mode 100644
index 9ef60b11c..000000000
--- a/apps/web-tdesign/src/api/core/menu.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { RouteRecordStringComponent } from '@vben/types';
-
-import { requestClient } from '#/api/request';
-
-/**
- * 获取用户所有菜单
- */
-export async function getAllMenusApi() {
-  return requestClient.get<RouteRecordStringComponent[]>('/menu/all');
-}
diff --git a/apps/web-tdesign/src/api/core/user.ts b/apps/web-tdesign/src/api/core/user.ts
deleted file mode 100644
index 7e28ea848..000000000
--- a/apps/web-tdesign/src/api/core/user.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import type { UserInfo } from '@vben/types';
-
-import { requestClient } from '#/api/request';
-
-/**
- * 获取用户信息
- */
-export async function getUserInfoApi() {
-  return requestClient.get<UserInfo>('/user/info');
-}
diff --git a/apps/web-tdesign/src/api/infra/api-access-log/index.ts b/apps/web-tdesign/src/api/infra/api-access-log/index.ts
new file mode 100644
index 000000000..656e38084
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/api-access-log/index.ts
@@ -0,0 +1,44 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace InfraApiAccessLogApi {
+  /** API 访问日志信息 */
+  export interface ApiAccessLog {
+    id: number;
+    traceId: string;
+    userId: number;
+    userType: number;
+    applicationName: string;
+    requestMethod: string;
+    requestParams: string;
+    responseBody: string;
+    requestUrl: string;
+    userIp: string;
+    userAgent: string;
+    operateModule: string;
+    operateName: string;
+    operateType: number;
+    beginTime: string;
+    endTime: string;
+    duration: number;
+    resultCode: number;
+    resultMsg: string;
+    createTime: string;
+  }
+}
+
+/** 查询 API 访问日志列表 */
+export function getApiAccessLogPage(params: PageParam) {
+  return requestClient.get<PageResult<InfraApiAccessLogApi.ApiAccessLog>>(
+    '/infra/api-access-log/page',
+    { params },
+  );
+}
+
+/** 导出 API 访问日志 */
+export function exportApiAccessLog(params: any) {
+  return requestClient.download('/infra/api-access-log/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-tdesign/src/api/infra/api-error-log/index.ts b/apps/web-tdesign/src/api/infra/api-error-log/index.ts
new file mode 100644
index 000000000..863f73e9b
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/api-error-log/index.ts
@@ -0,0 +1,55 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace InfraApiErrorLogApi {
+  /** API 错误日志信息 */
+  export interface ApiErrorLog {
+    id: number;
+    traceId: string;
+    userId: number;
+    userType: number;
+    applicationName: string;
+    requestMethod: string;
+    requestParams: string;
+    requestUrl: string;
+    userIp: string;
+    userAgent: string;
+    exceptionTime: string;
+    exceptionName: string;
+    exceptionMessage: string;
+    exceptionRootCauseMessage: string;
+    exceptionStackTrace: string;
+    exceptionClassName: string;
+    exceptionFileName: string;
+    exceptionMethodName: string;
+    exceptionLineNumber: number;
+    processUserId: number;
+    processStatus: number;
+    processTime: string;
+    resultCode: number;
+    createTime: string;
+  }
+}
+
+/** 查询 API 错误日志列表 */
+export function getApiErrorLogPage(params: PageParam) {
+  return requestClient.get<PageResult<InfraApiErrorLogApi.ApiErrorLog>>(
+    '/infra/api-error-log/page',
+    { params },
+  );
+}
+
+/** 更新 API 错误日志的处理状态 */
+export function updateApiErrorLogStatus(id: number, processStatus: number) {
+  return requestClient.put(
+    `/infra/api-error-log/update-status?id=${id}&processStatus=${processStatus}`,
+  );
+}
+
+/** 导出 API 错误日志 */
+export function exportApiErrorLog(params: any) {
+  return requestClient.download('/infra/api-error-log/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-tdesign/src/api/infra/codegen/index.ts b/apps/web-tdesign/src/api/infra/codegen/index.ts
new file mode 100644
index 000000000..992d41d2d
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/codegen/index.ts
@@ -0,0 +1,168 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace InfraCodegenApi {
+  /** 代码生成表定义 */
+  export interface CodegenTable {
+    id: number;
+    tableId: number;
+    isParentMenuIdValid: boolean;
+    dataSourceConfigId: number;
+    scene: number;
+    tableName: string;
+    tableComment: string;
+    remark: string;
+    moduleName: string;
+    businessName: string;
+    className: string;
+    classComment: string;
+    author: string;
+    createTime: Date;
+    updateTime: Date;
+    templateType: number;
+    parentMenuId: number;
+  }
+
+  /** 代码生成字段定义 */
+  export interface CodegenColumn {
+    id: number;
+    tableId: number;
+    columnName: string;
+    dataType: string;
+    columnComment: string;
+    nullable: number;
+    primaryKey: number;
+    ordinalPosition: number;
+    javaType: string;
+    javaField: string;
+    dictType: string;
+    example: string;
+    createOperation: number;
+    updateOperation: number;
+    listOperation: number;
+    listOperationCondition: string;
+    listOperationResult: number;
+    htmlType: string;
+  }
+
+  /** 数据库表定义 */
+  export interface DatabaseTable {
+    name: string;
+    comment: string;
+  }
+
+  /** 代码生成详情 */
+  export interface CodegenDetail {
+    table: CodegenTable;
+    columns: CodegenColumn[];
+  }
+
+  /** 代码预览 */
+  export interface CodegenPreview {
+    filePath: string;
+    code: string;
+  }
+
+  /** 更新代码生成请求 */
+  export interface CodegenUpdateReqVO {
+    table: any | CodegenTable;
+    columns: CodegenColumn[];
+  }
+
+  /** 创建代码生成请求 */
+  export interface CodegenCreateListReqVO {
+    dataSourceConfigId?: number;
+    tableNames: string[];
+  }
+}
+
+/** 查询列表代码生成表定义 */
+export function getCodegenTableList(dataSourceConfigId: number) {
+  return requestClient.get<InfraCodegenApi.CodegenTable[]>(
+    '/infra/codegen/table/list?',
+    {
+      params: { dataSourceConfigId },
+    },
+  );
+}
+
+/** 查询列表代码生成表定义 */
+export function getCodegenTablePage(params: PageParam) {
+  return requestClient.get<PageResult<InfraCodegenApi.CodegenTable>>(
+    '/infra/codegen/table/page',
+    { params },
+  );
+}
+
+/** 查询详情代码生成表定义 */
+export function getCodegenTable(tableId: number) {
+  return requestClient.get<InfraCodegenApi.CodegenDetail>(
+    '/infra/codegen/detail',
+    {
+      params: { tableId },
+    },
+  );
+}
+
+/** 修改代码生成表定义 */
+export function updateCodegenTable(data: InfraCodegenApi.CodegenUpdateReqVO) {
+  return requestClient.put('/infra/codegen/update', data);
+}
+
+/** 基于数据库的表结构，同步数据库的表和字段定义 */
+export function syncCodegenFromDB(tableId: number) {
+  return requestClient.put(
+    '/infra/codegen/sync-from-db',
+    {},
+    {
+      params: { tableId },
+    },
+  );
+}
+
+/** 预览生成代码 */
+export function previewCodegen(tableId: number) {
+  return requestClient.get<InfraCodegenApi.CodegenPreview[]>(
+    '/infra/codegen/preview',
+    {
+      params: { tableId },
+    },
+  );
+}
+
+/** 下载生成代码 */
+export function downloadCodegen(tableId: number) {
+  return requestClient.download('/infra/codegen/download', {
+    params: { tableId },
+  });
+}
+
+/** 获得表定义 */
+export function getSchemaTableList(params: any) {
+  return requestClient.get<InfraCodegenApi.DatabaseTable[]>(
+    '/infra/codegen/db/table/list',
+    { params },
+  );
+}
+
+/** 基于数据库的表结构，创建代码生成器的表定义 */
+export function createCodegenList(
+  data: InfraCodegenApi.CodegenCreateListReqVO,
+) {
+  return requestClient.post('/infra/codegen/create-list', data);
+}
+
+/** 删除代码生成表定义 */
+export function deleteCodegenTable(tableId: number) {
+  return requestClient.delete('/infra/codegen/delete', {
+    params: { tableId },
+  });
+}
+
+/** 批量删除代码生成表定义 */
+export function deleteCodegenTableList(tableIds: number[]) {
+  return requestClient.delete(
+    `/infra/codegen/delete-list?tableIds=${tableIds.join(',')}`,
+  );
+}
diff --git a/apps/web-tdesign/src/api/infra/config/index.ts b/apps/web-tdesign/src/api/infra/config/index.ts
new file mode 100644
index 000000000..aa80bcbed
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/config/index.ts
@@ -0,0 +1,67 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace InfraConfigApi {
+  /** 参数配置信息 */
+  export interface Config {
+    id?: number;
+    category: string;
+    name: string;
+    key: string;
+    value: string;
+    type: number;
+    visible: boolean;
+    remark: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询参数列表 */
+export function getConfigPage(params: PageParam) {
+  return requestClient.get<PageResult<InfraConfigApi.Config>>(
+    '/infra/config/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询参数详情 */
+export function getConfig(id: number) {
+  return requestClient.get<InfraConfigApi.Config>(`/infra/config/get?id=${id}`);
+}
+
+/** 根据参数键名查询参数值 */
+export function getConfigKey(configKey: string) {
+  return requestClient.get<string>(
+    `/infra/config/get-value-by-key?key=${configKey}`,
+  );
+}
+
+/** 新增参数 */
+export function createConfig(data: InfraConfigApi.Config) {
+  return requestClient.post('/infra/config/create', data);
+}
+
+/** 修改参数 */
+export function updateConfig(data: InfraConfigApi.Config) {
+  return requestClient.put('/infra/config/update', data);
+}
+
+/** 删除参数 */
+export function deleteConfig(id: number) {
+  return requestClient.delete(`/infra/config/delete?id=${id}`);
+}
+
+/** 批量删除参数 */
+export function deleteConfigList(ids: number[]) {
+  return requestClient.delete(`/infra/config/delete-list?ids=${ids.join(',')}`);
+}
+
+/** 导出参数 */
+export function exportConfig(params: any) {
+  return requestClient.download('/infra/config/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-tdesign/src/api/infra/data-source-config/index.ts b/apps/web-tdesign/src/api/infra/data-source-config/index.ts
new file mode 100644
index 000000000..81a3b0e3d
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/data-source-config/index.ts
@@ -0,0 +1,53 @@
+import { requestClient } from '#/api/request';
+
+export namespace InfraDataSourceConfigApi {
+  /** 数据源配置信息 */
+  export interface DataSourceConfig {
+    id?: number;
+    name: string;
+    url: string;
+    username: string;
+    password: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询数据源配置列表 */
+export function getDataSourceConfigList() {
+  return requestClient.get<InfraDataSourceConfigApi.DataSourceConfig[]>(
+    '/infra/data-source-config/list',
+  );
+}
+
+/** 查询数据源配置详情 */
+export function getDataSourceConfig(id: number) {
+  return requestClient.get<InfraDataSourceConfigApi.DataSourceConfig>(
+    `/infra/data-source-config/get?id=${id}`,
+  );
+}
+
+/** 新增数据源配置 */
+export function createDataSourceConfig(
+  data: InfraDataSourceConfigApi.DataSourceConfig,
+) {
+  return requestClient.post('/infra/data-source-config/create', data);
+}
+
+/** 修改数据源配置 */
+export function updateDataSourceConfig(
+  data: InfraDataSourceConfigApi.DataSourceConfig,
+) {
+  return requestClient.put('/infra/data-source-config/update', data);
+}
+
+/** 删除数据源配置 */
+export function deleteDataSourceConfig(id: number) {
+  return requestClient.delete(`/infra/data-source-config/delete?id=${id}`);
+}
+
+/** 批量删除数据源配置 */
+export function deleteDataSourceConfigList(ids: number[]) {
+  return requestClient.delete(
+    `/infra/data-source-config/delete-list?ids=${ids.join(',')}`,
+  );
+}
diff --git a/apps/web-tdesign/src/api/infra/demo/demo01/index.ts b/apps/web-tdesign/src/api/infra/demo/demo01/index.ts
new file mode 100644
index 000000000..e180a76c4
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/demo/demo01/index.ts
@@ -0,0 +1,61 @@
+import type { Dayjs } from 'dayjs';
+
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace Demo01ContactApi {
+  /** 示例联系人信息 */
+  export interface Demo01Contact {
+    id: number; // 编号
+    name?: string; // 名字
+    sex?: number; // 性别
+    birthday?: Dayjs | string; // 出生年
+    description?: string; // 简介
+    avatar: string; // 头像
+  }
+}
+
+/** 查询示例联系人分页 */
+export function getDemo01ContactPage(params: PageParam) {
+  return requestClient.get<PageResult<Demo01ContactApi.Demo01Contact>>(
+    '/infra/demo01-contact/page',
+    { params },
+  );
+}
+
+/** 查询示例联系人详情 */
+export function getDemo01Contact(id: number) {
+  return requestClient.get<Demo01ContactApi.Demo01Contact>(
+    `/infra/demo01-contact/get?id=${id}`,
+  );
+}
+
+/** 新增示例联系人 */
+export function createDemo01Contact(data: Demo01ContactApi.Demo01Contact) {
+  return requestClient.post('/infra/demo01-contact/create', data);
+}
+
+/** 修改示例联系人 */
+export function updateDemo01Contact(data: Demo01ContactApi.Demo01Contact) {
+  return requestClient.put('/infra/demo01-contact/update', data);
+}
+
+/** 删除示例联系人 */
+export function deleteDemo01Contact(id: number) {
+  return requestClient.delete(`/infra/demo01-contact/delete?id=${id}`);
+}
+
+/** 批量删除示例联系人 */
+export function deleteDemo01ContactList(ids: number[]) {
+  return requestClient.delete(
+    `/infra/demo01-contact/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 导出示例联系人 */
+export function exportDemo01Contact(params: any) {
+  return requestClient.download('/infra/demo01-contact/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-tdesign/src/api/infra/demo/demo02/index.ts b/apps/web-tdesign/src/api/infra/demo/demo02/index.ts
new file mode 100644
index 000000000..b4edd746e
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/demo/demo02/index.ts
@@ -0,0 +1,48 @@
+import { requestClient } from '#/api/request';
+
+export namespace Demo02CategoryApi {
+  /** 示例分类信息 */
+  export interface Demo02Category {
+    id: number; // 编号
+    name?: string; // 名字
+    parentId?: number; // 父级编号
+    children?: Demo02Category[];
+  }
+}
+
+/** 查询示例分类列表 */
+export function getDemo02CategoryList(params: any) {
+  return requestClient.get<Demo02CategoryApi.Demo02Category[]>(
+    '/infra/demo02-category/list',
+    { params },
+  );
+}
+
+/** 查询示例分类详情 */
+export function getDemo02Category(id: number) {
+  return requestClient.get<Demo02CategoryApi.Demo02Category>(
+    `/infra/demo02-category/get?id=${id}`,
+  );
+}
+
+/** 新增示例分类 */
+export function createDemo02Category(data: Demo02CategoryApi.Demo02Category) {
+  return requestClient.post('/infra/demo02-category/create', data);
+}
+
+/** 修改示例分类 */
+export function updateDemo02Category(data: Demo02CategoryApi.Demo02Category) {
+  return requestClient.put('/infra/demo02-category/update', data);
+}
+
+/** 删除示例分类 */
+export function deleteDemo02Category(id: number) {
+  return requestClient.delete(`/infra/demo02-category/delete?id=${id}`);
+}
+
+/** 导出示例分类 */
+export function exportDemo02Category(params: any) {
+  return requestClient.download('/infra/demo02-category/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-tdesign/src/api/infra/demo/demo03/erp/index.ts b/apps/web-tdesign/src/api/infra/demo/demo03/erp/index.ts
new file mode 100644
index 000000000..6dc7e352a
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/demo/demo03/erp/index.ts
@@ -0,0 +1,168 @@
+import type { Dayjs } from 'dayjs';
+
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace Demo03StudentApi {
+  /** 学生课程信息 */
+  export interface Demo03Course {
+    id: number; // 编号
+    studentId?: number; // 学生编号
+    name?: string; // 名字
+    score?: number; // 分数
+  }
+
+  /** 学生班级信息 */
+  export interface Demo03Grade {
+    id: number; // 编号
+    studentId?: number; // 学生编号
+    name?: string; // 名字
+    teacher?: string; // 班主任
+  }
+
+  /** 学生信息 */
+  export interface Demo03Student {
+    id: number; // 编号
+    name?: string; // 名字
+    sex?: number; // 性别
+    birthday?: Dayjs | string; // 出生日期
+    description?: string; // 简介
+  }
+}
+
+/** 查询学生分页 */
+export function getDemo03StudentPage(params: PageParam) {
+  return requestClient.get<PageResult<Demo03StudentApi.Demo03Student>>(
+    '/infra/demo03-student-erp/page',
+    { params },
+  );
+}
+
+/** 查询学生详情 */
+export function getDemo03Student(id: number) {
+  return requestClient.get<Demo03StudentApi.Demo03Student>(
+    `/infra/demo03-student-erp/get?id=${id}`,
+  );
+}
+
+/** 新增学生 */
+export function createDemo03Student(data: Demo03StudentApi.Demo03Student) {
+  return requestClient.post('/infra/demo03-student-erp/create', data);
+}
+
+/** 修改学生 */
+export function updateDemo03Student(data: Demo03StudentApi.Demo03Student) {
+  return requestClient.put('/infra/demo03-student-erp/update', data);
+}
+
+/** 删除学生 */
+export function deleteDemo03Student(id: number) {
+  return requestClient.delete(`/infra/demo03-student-erp/delete?id=${id}`);
+}
+
+/** 批量删除学生 */
+export function deleteDemo03StudentList(ids: number[]) {
+  return requestClient.delete(
+    `/infra/demo03-student-erp/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 导出学生 */
+export function exportDemo03Student(params: any) {
+  return requestClient.download('/infra/demo03-student-erp/export-excel', {
+    params,
+  });
+}
+
+// ==================== 子表（学生课程） ====================
+
+/** 获得学生课程分页 */
+export function getDemo03CoursePage(params: PageParam) {
+  return requestClient.get<PageResult<Demo03StudentApi.Demo03Course>>(
+    `/infra/demo03-student-erp/demo03-course/page`,
+    { params },
+  );
+}
+/** 新增学生课程 */
+export function createDemo03Course(data: Demo03StudentApi.Demo03Course) {
+  return requestClient.post(
+    `/infra/demo03-student-erp/demo03-course/create`,
+    data,
+  );
+}
+
+/** 修改学生课程 */
+export function updateDemo03Course(data: Demo03StudentApi.Demo03Course) {
+  return requestClient.put(
+    `/infra/demo03-student-erp/demo03-course/update`,
+    data,
+  );
+}
+
+/** 删除学生课程 */
+export function deleteDemo03Course(id: number) {
+  return requestClient.delete(
+    `/infra/demo03-student-erp/demo03-course/delete?id=${id}`,
+  );
+}
+
+/** 批量删除学生课程 */
+export function deleteDemo03CourseList(ids: number[]) {
+  return requestClient.delete(
+    `/infra/demo03-student-erp/demo03-course/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 获得学生课程 */
+export function getDemo03Course(id: number) {
+  return requestClient.get<Demo03StudentApi.Demo03Course>(
+    `/infra/demo03-student-erp/demo03-course/get?id=${id}`,
+  );
+}
+
+// ==================== 子表（学生班级） ====================
+
+/** 获得学生班级分页 */
+export function getDemo03GradePage(params: PageParam) {
+  return requestClient.get<PageResult<Demo03StudentApi.Demo03Grade>>(
+    `/infra/demo03-student-erp/demo03-grade/page`,
+    { params },
+  );
+}
+/** 新增学生班级 */
+export function createDemo03Grade(data: Demo03StudentApi.Demo03Grade) {
+  return requestClient.post(
+    `/infra/demo03-student-erp/demo03-grade/create`,
+    data,
+  );
+}
+
+/** 修改学生班级 */
+export function updateDemo03Grade(data: Demo03StudentApi.Demo03Grade) {
+  return requestClient.put(
+    `/infra/demo03-student-erp/demo03-grade/update`,
+    data,
+  );
+}
+
+/** 删除学生班级 */
+export function deleteDemo03Grade(id: number) {
+  return requestClient.delete(
+    `/infra/demo03-student-erp/demo03-grade/delete?id=${id}`,
+  );
+}
+
+/** 批量删除学生班级 */
+export function deleteDemo03GradeList(ids: number[]) {
+  return requestClient.delete(
+    `/infra/demo03-student-erp/demo03-grade/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 获得学生班级 */
+export function getDemo03Grade(id: number) {
+  return requestClient.get<Demo03StudentApi.Demo03Grade>(
+    `/infra/demo03-student-erp/demo03-grade/get?id=${id}`,
+  );
+}
diff --git a/apps/web-tdesign/src/api/infra/demo/demo03/inner/index.ts b/apps/web-tdesign/src/api/infra/demo/demo03/inner/index.ts
new file mode 100644
index 000000000..02bfbcc66
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/demo/demo03/inner/index.ts
@@ -0,0 +1,96 @@
+import type { Dayjs } from 'dayjs';
+
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace Demo03StudentApi {
+  /** 学生课程信息 */
+  export interface Demo03Course {
+    id: number; // 编号
+    studentId?: number; // 学生编号
+    name?: string; // 名字
+    score?: number; // 分数
+  }
+
+  /** 学生班级信息 */
+  export interface Demo03Grade {
+    id: number; // 编号
+    studentId?: number; // 学生编号
+    name?: string; // 名字
+    teacher?: string; // 班主任
+  }
+
+  /** 学生信息 */
+  export interface Demo03Student {
+    id: number; // 编号
+    name?: string; // 名字
+    sex?: number; // 性别
+    birthday?: Dayjs | string; // 出生日期
+    description?: string; // 简介
+    demo03courses?: Demo03Course[];
+    demo03grade?: Demo03Grade;
+  }
+}
+
+/** 查询学生分页 */
+export function getDemo03StudentPage(params: PageParam) {
+  return requestClient.get<PageResult<Demo03StudentApi.Demo03Student>>(
+    '/infra/demo03-student-inner/page',
+    { params },
+  );
+}
+
+/** 查询学生详情 */
+export function getDemo03Student(id: number) {
+  return requestClient.get<Demo03StudentApi.Demo03Student>(
+    `/infra/demo03-student-inner/get?id=${id}`,
+  );
+}
+
+/** 新增学生 */
+export function createDemo03Student(data: Demo03StudentApi.Demo03Student) {
+  return requestClient.post('/infra/demo03-student-inner/create', data);
+}
+
+/** 修改学生 */
+export function updateDemo03Student(data: Demo03StudentApi.Demo03Student) {
+  return requestClient.put('/infra/demo03-student-inner/update', data);
+}
+
+/** 删除学生 */
+export function deleteDemo03Student(id: number) {
+  return requestClient.delete(`/infra/demo03-student-inner/delete?id=${id}`);
+}
+
+/** 批量删除学生 */
+export function deleteDemo03StudentList(ids: number[]) {
+  return requestClient.delete(
+    `/infra/demo03-student-inner/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 导出学生 */
+export function exportDemo03Student(params: any) {
+  return requestClient.download('/infra/demo03-student-inner/export-excel', {
+    params,
+  });
+}
+
+// ==================== 子表（学生课程） ====================
+
+/** 获得学生课程列表 */
+export function getDemo03CourseListByStudentId(studentId: number) {
+  return requestClient.get<Demo03StudentApi.Demo03Course[]>(
+    `/infra/demo03-student-inner/demo03-course/list-by-student-id?studentId=${studentId}`,
+  );
+}
+
+// ==================== 子表（学生班级） ====================
+
+/** 获得学生班级 */
+export function getDemo03GradeByStudentId(studentId: number) {
+  return requestClient.get<Demo03StudentApi.Demo03Grade>(
+    `/infra/demo03-student-inner/demo03-grade/get-by-student-id?studentId=${studentId}`,
+  );
+}
diff --git a/apps/web-tdesign/src/api/infra/demo/demo03/normal/index.ts b/apps/web-tdesign/src/api/infra/demo/demo03/normal/index.ts
new file mode 100644
index 000000000..2a085a153
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/demo/demo03/normal/index.ts
@@ -0,0 +1,96 @@
+import type { Dayjs } from 'dayjs';
+
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace Demo03StudentApi {
+  /** 学生课程信息 */
+  export interface Demo03Course {
+    id: number; // 编号
+    studentId?: number; // 学生编号
+    name?: string; // 名字
+    score?: number; // 分数
+  }
+
+  /** 学生班级信息 */
+  export interface Demo03Grade {
+    id: number; // 编号
+    studentId?: number; // 学生编号
+    name?: string; // 名字
+    teacher?: string; // 班主任
+  }
+
+  /** 学生信息 */
+  export interface Demo03Student {
+    id: number; // 编号
+    name?: string; // 名字
+    sex?: number; // 性别
+    birthday?: Dayjs | string; // 出生日期
+    description?: string; // 简介
+    demo03courses?: Demo03Course[];
+    demo03grade?: Demo03Grade;
+  }
+}
+
+/** 查询学生分页 */
+export function getDemo03StudentPage(params: PageParam) {
+  return requestClient.get<PageResult<Demo03StudentApi.Demo03Student>>(
+    '/infra/demo03-student-normal/page',
+    { params },
+  );
+}
+
+/** 查询学生详情 */
+export function getDemo03Student(id: number) {
+  return requestClient.get<Demo03StudentApi.Demo03Student>(
+    `/infra/demo03-student-normal/get?id=${id}`,
+  );
+}
+
+/** 新增学生 */
+export function createDemo03Student(data: Demo03StudentApi.Demo03Student) {
+  return requestClient.post('/infra/demo03-student-normal/create', data);
+}
+
+/** 修改学生 */
+export function updateDemo03Student(data: Demo03StudentApi.Demo03Student) {
+  return requestClient.put('/infra/demo03-student-normal/update', data);
+}
+
+/** 删除学生 */
+export function deleteDemo03Student(id: number) {
+  return requestClient.delete(`/infra/demo03-student-normal/delete?id=${id}`);
+}
+
+/** 批量删除学生 */
+export function deleteDemo03StudentList(ids: number[]) {
+  return requestClient.delete(
+    `/infra/demo03-student-normal/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 导出学生 */
+export function exportDemo03Student(params: any) {
+  return requestClient.download('/infra/demo03-student-normal/export-excel', {
+    params,
+  });
+}
+
+// ==================== 子表（学生课程） ====================
+
+/** 获得学生课程列表 */
+export function getDemo03CourseListByStudentId(studentId: number) {
+  return requestClient.get<Demo03StudentApi.Demo03Course[]>(
+    `/infra/demo03-student-normal/demo03-course/list-by-student-id?studentId=${studentId}`,
+  );
+}
+
+// ==================== 子表（学生班级） ====================
+
+/** 获得学生班级 */
+export function getDemo03GradeByStudentId(studentId: number) {
+  return requestClient.get<Demo03StudentApi.Demo03Grade>(
+    `/infra/demo03-student-normal/demo03-grade/get-by-student-id?studentId=${studentId}`,
+  );
+}
diff --git a/apps/web-tdesign/src/api/infra/file-config/index.ts b/apps/web-tdesign/src/api/infra/file-config/index.ts
new file mode 100644
index 000000000..1a2fb7707
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/file-config/index.ts
@@ -0,0 +1,83 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace InfraFileConfigApi {
+  /** 文件客户端配置 */
+  export interface FileClientConfig {
+    basePath: string;
+    host?: string;
+    port?: number;
+    username?: string;
+    password?: string;
+    mode?: string;
+    endpoint?: string;
+    bucket?: string;
+    accessKey?: string;
+    accessSecret?: string;
+    pathStyle?: boolean;
+    enablePublicAccess?: boolean;
+    domain: string;
+  }
+
+  /** 文件配置信息 */
+  export interface FileConfig {
+    id?: number;
+    name: string;
+    storage?: number;
+    master: boolean;
+    visible: boolean;
+    config: FileClientConfig;
+    remark: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询文件配置列表 */
+export function getFileConfigPage(params: PageParam) {
+  return requestClient.get<PageResult<InfraFileConfigApi.FileConfig>>(
+    '/infra/file-config/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 查询文件配置详情 */
+export function getFileConfig(id: number) {
+  return requestClient.get<InfraFileConfigApi.FileConfig>(
+    `/infra/file-config/get?id=${id}`,
+  );
+}
+
+/** 更新文件配置为主配置 */
+export function updateFileConfigMaster(id: number) {
+  return requestClient.put(`/infra/file-config/update-master?id=${id}`);
+}
+
+/** 新增文件配置 */
+export function createFileConfig(data: InfraFileConfigApi.FileConfig) {
+  return requestClient.post('/infra/file-config/create', data);
+}
+
+/** 修改文件配置 */
+export function updateFileConfig(data: InfraFileConfigApi.FileConfig) {
+  return requestClient.put('/infra/file-config/update', data);
+}
+
+/** 删除文件配置 */
+export function deleteFileConfig(id: number) {
+  return requestClient.delete(`/infra/file-config/delete?id=${id}`);
+}
+
+/** 批量删除文件配置 */
+export function deleteFileConfigList(ids: number[]) {
+  return requestClient.delete(
+    `/infra/file-config/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 测试文件配置 */
+export function testFileConfig(id: number) {
+  return requestClient.get(`/infra/file-config/test?id=${id}`);
+}
diff --git a/apps/web-tdesign/src/api/infra/file/index.ts b/apps/web-tdesign/src/api/infra/file/index.ts
new file mode 100644
index 000000000..edf06933b
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/file/index.ts
@@ -0,0 +1,78 @@
+import type { AxiosRequestConfig, PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+/** Axios 上传进度事件 */
+export type AxiosProgressEvent = AxiosRequestConfig['onUploadProgress'];
+
+export namespace InfraFileApi {
+  /** 文件信息 */
+  export interface File {
+    id?: number;
+    configId?: number;
+    path: string;
+    name?: string;
+    url?: string;
+    size?: number;
+    type?: string;
+    createTime?: Date;
+  }
+
+  /** 文件预签名地址 */
+  export interface FilePresignedUrlRespVO {
+    configId: number; // 文件配置编号
+    uploadUrl: string; // 文件上传 URL
+    url: string; // 文件 URL
+    path: string; // 文件路径
+  }
+
+  /** 上传文件 */
+  export interface FileUploadReqVO {
+    file: globalThis.File;
+    directory?: string;
+  }
+}
+
+/** 查询文件列表 */
+export function getFilePage(params: PageParam) {
+  return requestClient.get<PageResult<InfraFileApi.File>>('/infra/file/page', {
+    params,
+  });
+}
+
+/** 删除文件 */
+export function deleteFile(id: number) {
+  return requestClient.delete(`/infra/file/delete?id=${id}`);
+}
+
+/** 批量删除文件 */
+export function deleteFileList(ids: number[]) {
+  return requestClient.delete(`/infra/file/delete-list?ids=${ids.join(',')}`);
+}
+
+/** 获取文件预签名地址 */
+export function getFilePresignedUrl(name: string, directory?: string) {
+  return requestClient.get<InfraFileApi.FilePresignedUrlRespVO>(
+    '/infra/file/presigned-url',
+    {
+      params: { name, directory },
+    },
+  );
+}
+
+/** 创建文件 */
+export function createFile(data: InfraFileApi.File) {
+  return requestClient.post('/infra/file/create', data);
+}
+
+/** 上传文件 */
+export function uploadFile(
+  data: InfraFileApi.FileUploadReqVO,
+  onUploadProgress?: AxiosProgressEvent,
+) {
+  // 特殊：由于 upload 内部封装，即使 directory 为 undefined，也会传递给后端
+  if (!data.directory) {
+    delete data.directory;
+  }
+  return requestClient.upload('/infra/file/upload', data, { onUploadProgress });
+}
diff --git a/apps/web-tdesign/src/api/infra/job-log/index.ts b/apps/web-tdesign/src/api/infra/job-log/index.ts
new file mode 100644
index 000000000..e115b9df7
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/job-log/index.ts
@@ -0,0 +1,41 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace InfraJobLogApi {
+  /** 任务日志信息 */
+  export interface JobLog {
+    id?: number;
+    jobId: number;
+    handlerName: string;
+    handlerParam: string;
+    cronExpression: string;
+    executeIndex: string;
+    beginTime: Date;
+    endTime: Date;
+    duration: string;
+    status: number;
+    createTime?: string;
+    result: string;
+  }
+}
+
+/** 查询任务日志列表 */
+export function getJobLogPage(params: PageParam) {
+  return requestClient.get<PageResult<InfraJobLogApi.JobLog>>(
+    '/infra/job-log/page',
+    { params },
+  );
+}
+
+/** 查询任务日志详情 */
+export function getJobLog(id: number) {
+  return requestClient.get<InfraJobLogApi.JobLog>(
+    `/infra/job-log/get?id=${id}`,
+  );
+}
+
+/** 导出定时任务日志 */
+export function exportJobLog(params: any) {
+  return requestClient.download('/infra/job-log/export-excel', { params });
+}
diff --git a/apps/web-tdesign/src/api/infra/job/index.ts b/apps/web-tdesign/src/api/infra/job/index.ts
new file mode 100644
index 000000000..04848dd8b
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/job/index.ts
@@ -0,0 +1,77 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace InfraJobApi {
+  /** 任务信息 */
+  export interface Job {
+    id?: number;
+    name: string;
+    status: number;
+    handlerName: string;
+    handlerParam: string;
+    cronExpression: string;
+    retryCount: number;
+    retryInterval: number;
+    monitorTimeout: number;
+    createTime?: Date;
+    nextTimes?: Date[];
+  }
+}
+
+/** 查询任务列表 */
+export function getJobPage(params: PageParam) {
+  return requestClient.get<PageResult<InfraJobApi.Job>>('/infra/job/page', {
+    params,
+  });
+}
+
+/** 查询任务详情 */
+export function getJob(id: number) {
+  return requestClient.get<InfraJobApi.Job>(`/infra/job/get?id=${id}`);
+}
+
+/** 新增任务 */
+export function createJob(data: InfraJobApi.Job) {
+  return requestClient.post('/infra/job/create', data);
+}
+
+/** 修改定时任务调度 */
+export function updateJob(data: InfraJobApi.Job) {
+  return requestClient.put('/infra/job/update', data);
+}
+
+/** 删除定时任务调度 */
+export function deleteJob(id: number) {
+  return requestClient.delete(`/infra/job/delete?id=${id}`);
+}
+
+/** 批量删除定时任务调度 */
+export function deleteJobList(ids: number[]) {
+  return requestClient.delete(`/infra/job/delete-list?ids=${ids.join(',')}`);
+}
+
+/** 导出定时任务调度 */
+export function exportJob(params: any) {
+  return requestClient.download('/infra/job/export-excel', { params });
+}
+
+/** 任务状态修改 */
+export function updateJobStatus(id: number, status: number) {
+  return requestClient.put('/infra/job/update-status', undefined, {
+    params: {
+      id,
+      status,
+    },
+  });
+}
+
+/** 定时任务立即执行一次 */
+export function runJob(id: number) {
+  return requestClient.put(`/infra/job/trigger?id=${id}`);
+}
+
+/** 获得定时任务的下 n 次执行时间 */
+export function getJobNextTimes(id: number) {
+  return requestClient.get(`/infra/job/get_next_times?id=${id}`);
+}
diff --git a/apps/web-tdesign/src/api/infra/redis/index.ts b/apps/web-tdesign/src/api/infra/redis/index.ts
new file mode 100644
index 000000000..cb8179da5
--- /dev/null
+++ b/apps/web-tdesign/src/api/infra/redis/index.ts
@@ -0,0 +1,190 @@
+import { requestClient } from '#/api/request';
+
+export namespace InfraRedisApi {
+  /** Redis 信息 */
+  export interface RedisInfo {
+    io_threaded_reads_processed: string;
+    tracking_clients: string;
+    uptime_in_seconds: string;
+    cluster_connections: string;
+    current_cow_size: string;
+    maxmemory_human: string;
+    aof_last_cow_size: string;
+    master_replid2: string;
+    mem_replication_backlog: string;
+    aof_rewrite_scheduled: string;
+    total_net_input_bytes: string;
+    rss_overhead_ratio: string;
+    hz: string;
+    current_cow_size_age: string;
+    redis_build_id: string;
+    errorstat_BUSYGROUP: string;
+    aof_last_bgrewrite_status: string;
+    multiplexing_api: string;
+    client_recent_max_output_buffer: string;
+    allocator_resident: string;
+    mem_fragmentation_bytes: string;
+    aof_current_size: string;
+    repl_backlog_first_byte_offset: string;
+    tracking_total_prefixes: string;
+    redis_mode: string;
+    redis_git_dirty: string;
+    aof_delayed_fsync: string;
+    allocator_rss_bytes: string;
+    repl_backlog_histlen: string;
+    io_threads_active: string;
+    rss_overhead_bytes: string;
+    total_system_memory: string;
+    loading: string;
+    evicted_keys: string;
+    maxclients: string;
+    cluster_enabled: string;
+    redis_version: string;
+    repl_backlog_active: string;
+    mem_aof_buffer: string;
+    allocator_frag_bytes: string;
+    io_threaded_writes_processed: string;
+    instantaneous_ops_per_sec: string;
+    used_memory_human: string;
+    total_error_replies: string;
+    role: string;
+    maxmemory: string;
+    used_memory_lua: string;
+    rdb_current_bgsave_time_sec: string;
+    used_memory_startup: string;
+    used_cpu_sys_main_thread: string;
+    lazyfree_pending_objects: string;
+    aof_pending_bio_fsync: string;
+    used_memory_dataset_perc: string;
+    allocator_frag_ratio: string;
+    arch_bits: string;
+    used_cpu_user_main_thread: string;
+    mem_clients_normal: string;
+    expired_time_cap_reached_count: string;
+    unexpected_error_replies: string;
+    mem_fragmentation_ratio: string;
+    aof_last_rewrite_time_sec: string;
+    master_replid: string;
+    aof_rewrite_in_progress: string;
+    lru_clock: string;
+    maxmemory_policy: string;
+    run_id: string;
+    latest_fork_usec: string;
+    tracking_total_items: string;
+    total_commands_processed: string;
+    expired_keys: string;
+    errorstat_ERR: string;
+    used_memory: string;
+    module_fork_in_progress: string;
+    errorstat_WRONGPASS: string;
+    aof_buffer_length: string;
+    dump_payload_sanitizations: string;
+    mem_clients_slaves: string;
+    keyspace_misses: string;
+    server_time_usec: string;
+    executable: string;
+    lazyfreed_objects: string;
+    db0: string;
+    used_memory_peak_human: string;
+    keyspace_hits: string;
+    rdb_last_cow_size: string;
+    aof_pending_rewrite: string;
+    used_memory_overhead: string;
+    active_defrag_hits: string;
+    tcp_port: string;
+    uptime_in_days: string;
+    used_memory_peak_perc: string;
+    current_save_keys_processed: string;
+    blocked_clients: string;
+    total_reads_processed: string;
+    expire_cycle_cpu_milliseconds: string;
+    sync_partial_err: string;
+    used_memory_scripts_human: string;
+    aof_current_rewrite_time_sec: string;
+    aof_enabled: string;
+    process_supervised: string;
+    master_repl_offset: string;
+    used_memory_dataset: string;
+    used_cpu_user: string;
+    rdb_last_bgsave_status: string;
+    tracking_total_keys: string;
+    atomicvar_api: string;
+    allocator_rss_ratio: string;
+    client_recent_max_input_buffer: string;
+    clients_in_timeout_table: string;
+    aof_last_write_status: string;
+    mem_allocator: string;
+    used_memory_scripts: string;
+    used_memory_peak: string;
+    process_id: string;
+    master_failover_state: string;
+    errorstat_NOAUTH: string;
+    used_cpu_sys: string;
+    repl_backlog_size: string;
+    connected_slaves: string;
+    current_save_keys_total: string;
+    gcc_version: string;
+    total_system_memory_human: string;
+    sync_full: string;
+    connected_clients: string;
+    module_fork_last_cow_size: string;
+    total_writes_processed: string;
+    allocator_active: string;
+    total_net_output_bytes: string;
+    pubsub_channels: string;
+    current_fork_perc: string;
+    active_defrag_key_hits: string;
+    rdb_changes_since_last_save: string;
+    instantaneous_input_kbps: string;
+    used_memory_rss_human: string;
+    configured_hz: string;
+    expired_stale_perc: string;
+    active_defrag_misses: string;
+    used_cpu_sys_children: string;
+    number_of_cached_scripts: string;
+    sync_partial_ok: string;
+    used_memory_lua_human: string;
+    rdb_last_save_time: string;
+    pubsub_patterns: string;
+    slave_expires_tracked_keys: string;
+    redis_git_sha1: string;
+    used_memory_rss: string;
+    rdb_last_bgsave_time_sec: string;
+    os: string;
+    mem_not_counted_for_evict: string;
+    active_defrag_running: string;
+    rejected_connections: string;
+    aof_rewrite_buffer_length: string;
+    total_forks: string;
+    active_defrag_key_misses: string;
+    allocator_allocated: string;
+    aof_base_size: string;
+    instantaneous_output_kbps: string;
+    second_repl_offset: string;
+    rdb_bgsave_in_progress: string;
+    used_cpu_user_children: string;
+    total_connections_received: string;
+    migrate_cached_sockets: string;
+  }
+
+  /** Redis 命令统计 */
+  export interface RedisCommandStats {
+    command: string;
+    calls: number;
+    usec: number;
+  }
+
+  /** Redis 监控信息 */
+  export interface RedisMonitorInfo {
+    info: RedisInfo;
+    dbSize: number;
+    commandStats: RedisCommandStats[];
+  }
+}
+
+/** 获取 Redis 监控信息 */
+export function getRedisMonitorInfo() {
+  return requestClient.get<InfraRedisApi.RedisMonitorInfo>(
+    '/infra/redis/get-monitor-info',
+  );
+}
diff --git a/apps/web-tdesign/src/api/request.ts b/apps/web-tdesign/src/api/request.ts
index 86b181d33..3ecbee4d4 100644
--- a/apps/web-tdesign/src/api/request.ts
+++ b/apps/web-tdesign/src/api/request.ts
@@ -3,7 +3,7 @@
  */
 import type { RequestClientOptions } from '@vben/request';
 
-import { useAppConfig } from '@vben/hooks';
+import { isTenantEnable, useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
   authenticateResponseInterceptor,
@@ -12,6 +12,7 @@ import {
   RequestClient,
 } from '@vben/request';
 import { useAccessStore } from '@vben/stores';
+import { createApiEncrypt } from '@vben/utils';
 
 import { message } from '#/adapter/tdesign';
 import { useAuthStore } from '#/store';
@@ -19,6 +20,8 @@ import { useAuthStore } from '#/store';
 import { refreshTokenApi } from './core';
 
 const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
+const tenantEnable = isTenantEnable();
+const apiEncrypt = createApiEncrypt(import.meta.env);
 
 function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   const client = new RequestClient({
@@ -49,8 +52,16 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
    */
   async function doRefreshToken() {
     const accessStore = useAccessStore();
-    const resp = await refreshTokenApi();
-    const newToken = resp.data;
+    const refreshToken = accessStore.refreshToken as string;
+    if (!refreshToken) {
+      throw new Error('Refresh token is null!');
+    }
+    const resp = await refreshTokenApi(refreshToken);
+    const newToken = resp?.data?.data?.accessToken;
+    // add by 芋艿：这里一定要抛出 resp.data，从而触发 authenticateResponseInterceptor 中，刷新令牌失败！！！
+    if (!newToken) {
+      throw resp.data;
+    }
     accessStore.setAccessToken(newToken);
     return newToken;
   }
@@ -66,10 +77,54 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
 
       config.headers.Authorization = formatToken(accessStore.accessToken);
       config.headers['Accept-Language'] = preferences.app.locale;
+      // 添加租户编号
+      config.headers['tenant-id'] = tenantEnable
+        ? accessStore.tenantId
+        : undefined;
+      // 只有登录时，才设置 visit-tenant-id 访问租户
+      config.headers['visit-tenant-id'] = tenantEnable
+        ? accessStore.visitTenantId
+        : undefined;
+
+      // 是否 API 加密
+      if ((config.headers || {}).isEncrypt) {
+        try {
+          // 加密请求数据
+          if (config.data) {
+            config.data = apiEncrypt.encryptRequest(config.data);
+            // 设置加密标识头
+            config.headers[apiEncrypt.getEncryptHeader()] = 'true';
+          }
+        } catch (error) {
+          console.error('请求数据加密失败:', error);
+          throw error;
+        }
+      }
       return config;
     },
   });
 
+  // API 解密响应拦截器
+  client.addResponseInterceptor({
+    fulfilled: (response) => {
+      // 检查是否需要解密响应数据
+      const encryptHeader = apiEncrypt.getEncryptHeader();
+      const isEncryptResponse =
+        response.headers[encryptHeader] === 'true' ||
+        response.headers[encryptHeader.toLowerCase()] === 'true';
+      if (isEncryptResponse && typeof response.data === 'string') {
+        try {
+          // 解密响应数据
+          response.data = apiEncrypt.decryptResponse(response.data);
+        } catch (error) {
+          console.error('响应数据解密失败:', error);
+          throw new Error(`响应数据解密失败: ${(error as Error).message}`);
+        }
+      }
+      return response;
+    },
+  });
+
   // 处理返回的响应数据格式
   client.addResponseInterceptor(
     defaultResponseInterceptor({
@@ -96,7 +151,12 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
       // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
       // 当前mock接口返回的错误字段是 error 或者 message
       const responseData = error?.response?.data ?? {};
-      const errorMessage = responseData?.error ?? responseData?.message ?? '';
+      const errorMessage =
+        responseData?.error ?? responseData?.message ?? responseData.msg ?? '';
+      // add by 芋艿：特殊：避免 401 “账号未登录”，重复提示。因为，此时会跳转到登录界面，只需提示一次！！！
+      if (error?.data?.code === 401) {
+        return;
+      }
       // 如果没有错误信息，则会根据状态码进行提示
       message.error(errorMessage || msg);
     }),
@@ -110,3 +170,17 @@ export const requestClient = createRequestClient(apiURL, {
 });
 
 export const baseRequestClient = new RequestClient({ baseURL: apiURL });
+baseRequestClient.addRequestInterceptor({
+  fulfilled: (config) => {
+    const accessStore = useAccessStore();
+    // 添加租户编号
+    config.headers['tenant-id'] = tenantEnable
+      ? accessStore.tenantId
+      : undefined;
+    // 只有登录时，才设置 visit-tenant-id 访问租户
+    config.headers['visit-tenant-id'] = tenantEnable
+      ? accessStore.visitTenantId
+      : undefined;
+    return config;
+  },
+});
diff --git a/apps/web-tdesign/src/api/system/area/index.ts b/apps/web-tdesign/src/api/system/area/index.ts
new file mode 100644
index 000000000..8d3361da5
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/area/index.ts
@@ -0,0 +1,24 @@
+import { requestClient } from '#/api/request';
+
+export namespace SystemAreaApi {
+  /** 地区信息 */
+  export interface Area {
+    id?: number;
+    name: string;
+    code: string;
+    parentId?: number;
+    sort?: number;
+    status?: number;
+    createTime?: Date;
+  }
+}
+
+/** 获得地区树 */
+export function getAreaTree() {
+  return requestClient.get<SystemAreaApi.Area[]>('/system/area/tree');
+}
+
+/** 获得 IP 对应的地区名 */
+export function getAreaByIp(ip: string) {
+  return requestClient.get<string>(`/system/area/get-by-ip?ip=${ip}`);
+}
diff --git a/apps/web-tdesign/src/api/system/dept/index.ts b/apps/web-tdesign/src/api/system/dept/index.ts
new file mode 100644
index 000000000..d6403d72a
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/dept/index.ts
@@ -0,0 +1,52 @@
+import { requestClient } from '#/api/request';
+
+export namespace SystemDeptApi {
+  /** 部门信息 */
+  export interface Dept {
+    id?: number;
+    name: string;
+    parentId?: number;
+    status: number;
+    sort: number;
+    leaderUserId: number;
+    phone: string;
+    email: string;
+    createTime: Date;
+    children?: Dept[];
+  }
+}
+
+/** 查询部门（精简)列表 */
+export async function getSimpleDeptList() {
+  return requestClient.get<SystemDeptApi.Dept[]>('/system/dept/simple-list');
+}
+
+/** 查询部门列表 */
+export async function getDeptList() {
+  return requestClient.get('/system/dept/list');
+}
+
+/** 查询部门详情 */
+export async function getDept(id: number) {
+  return requestClient.get<SystemDeptApi.Dept>(`/system/dept/get?id=${id}`);
+}
+
+/** 新增部门 */
+export async function createDept(data: SystemDeptApi.Dept) {
+  return requestClient.post('/system/dept/create', data);
+}
+
+/** 修改部门 */
+export async function updateDept(data: SystemDeptApi.Dept) {
+  return requestClient.put('/system/dept/update', data);
+}
+
+/** 删除部门 */
+export async function deleteDept(id: number) {
+  return requestClient.delete(`/system/dept/delete?id=${id}`);
+}
+
+/** 批量删除部门 */
+export async function deleteDeptList(ids: number[]) {
+  return requestClient.delete(`/system/dept/delete-list?ids=${ids.join(',')}`);
+}
diff --git a/apps/web-tdesign/src/api/system/dict/data/index.ts b/apps/web-tdesign/src/api/system/dict/data/index.ts
new file mode 100644
index 000000000..28f94d504
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/dict/data/index.ts
@@ -0,0 +1,68 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemDictDataApi {
+  /** 字典数据 */
+  export type DictData = {
+    colorType: string;
+    createTime: Date;
+    cssClass: string;
+    dictType: string;
+    id?: number;
+    label: string;
+    remark: string;
+    sort?: number;
+    status: number;
+    value: string;
+  };
+}
+
+// 查询字典数据（精简)列表
+export function getSimpleDictDataList() {
+  return requestClient.get<SystemDictDataApi.DictData[]>(
+    '/system/dict-data/simple-list',
+  );
+}
+
+// 查询字典数据列表
+export function getDictDataPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemDictDataApi.DictData>>(
+    '/system/dict-data/page',
+    { params },
+  );
+}
+
+// 查询字典数据详情
+export function getDictData(id: number) {
+  return requestClient.get<SystemDictDataApi.DictData>(
+    `/system/dict-data/get?id=${id}`,
+  );
+}
+
+// 新增字典数据
+export function createDictData(data: SystemDictDataApi.DictData) {
+  return requestClient.post('/system/dict-data/create', data);
+}
+
+// 修改字典数据
+export function updateDictData(data: SystemDictDataApi.DictData) {
+  return requestClient.put('/system/dict-data/update', data);
+}
+
+// 删除字典数据
+export function deleteDictData(id: number) {
+  return requestClient.delete(`/system/dict-data/delete?id=${id}`);
+}
+
+// 批量删除字典数据
+export function deleteDictDataList(ids: number[]) {
+  return requestClient.delete(
+    `/system/dict-data/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+// 导出字典类型数据
+export function exportDictData(params: any) {
+  return requestClient.download('/system/dict-data/export-excel', { params });
+}
diff --git a/apps/web-tdesign/src/api/system/dict/type/index.ts b/apps/web-tdesign/src/api/system/dict/type/index.ts
new file mode 100644
index 000000000..7fb426337
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/dict/type/index.ts
@@ -0,0 +1,64 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemDictTypeApi {
+  /** 字典类型 */
+  export type DictType = {
+    createTime: Date;
+    id?: number;
+    name: string;
+    remark: string;
+    status: number;
+    type: string;
+  };
+}
+
+// 查询字典（精简)列表
+export function getSimpleDictTypeList() {
+  return requestClient.get<SystemDictTypeApi.DictType[]>(
+    '/system/dict-type/list-all-simple',
+  );
+}
+
+// 查询字典列表
+export function getDictTypePage(params: PageParam) {
+  return requestClient.get<PageResult<SystemDictTypeApi.DictType>>(
+    '/system/dict-type/page',
+    { params },
+  );
+}
+
+// 查询字典详情
+export function getDictType(id: number) {
+  return requestClient.get<SystemDictTypeApi.DictType>(
+    `/system/dict-type/get?id=${id}`,
+  );
+}
+
+// 新增字典
+export function createDictType(data: SystemDictTypeApi.DictType) {
+  return requestClient.post('/system/dict-type/create', data);
+}
+
+// 修改字典
+export function updateDictType(data: SystemDictTypeApi.DictType) {
+  return requestClient.put('/system/dict-type/update', data);
+}
+
+// 删除字典
+export function deleteDictType(id: number) {
+  return requestClient.delete(`/system/dict-type/delete?id=${id}`);
+}
+
+// 批量删除字典
+export function deleteDictTypeList(ids: number[]) {
+  return requestClient.delete(
+    `/system/dict-type/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+// 导出字典类型
+export function exportDictType(params: any) {
+  return requestClient.download('/system/dict-type/export-excel', { params });
+}
diff --git a/apps/web-tdesign/src/api/system/login-log/index.ts b/apps/web-tdesign/src/api/system/login-log/index.ts
new file mode 100644
index 000000000..4be20d9ed
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/login-log/index.ts
@@ -0,0 +1,33 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemLoginLogApi {
+  /** 登录日志信息 */
+  export interface LoginLog {
+    id: number;
+    logType: number;
+    traceId: number;
+    userId: number;
+    userType: number;
+    username: string;
+    result: number;
+    status: number;
+    userIp: string;
+    userAgent: string;
+    createTime: string;
+  }
+}
+
+/** 查询登录日志列表 */
+export function getLoginLogPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemLoginLogApi.LoginLog>>(
+    '/system/login-log/page',
+    { params },
+  );
+}
+
+/** 导出登录日志 */
+export function exportLoginLog(params: any) {
+  return requestClient.download('/system/login-log/export-excel', { params });
+}
diff --git a/apps/web-tdesign/src/api/system/mail/account/index.ts b/apps/web-tdesign/src/api/system/mail/account/index.ts
new file mode 100644
index 000000000..7f506fd87
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/mail/account/index.ts
@@ -0,0 +1,64 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemMailAccountApi {
+  /** 邮箱账号 */
+  export interface MailAccount {
+    id: number;
+    mail: string;
+    username: string;
+    password: string;
+    host: string;
+    port: number;
+    sslEnable: boolean;
+    starttlsEnable: boolean;
+    status: number;
+    createTime: Date;
+    remark: string;
+  }
+}
+
+/** 查询邮箱账号列表 */
+export function getMailAccountPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemMailAccountApi.MailAccount>>(
+    '/system/mail-account/page',
+    { params },
+  );
+}
+
+/** 查询邮箱账号详情 */
+export function getMailAccount(id: number) {
+  return requestClient.get<SystemMailAccountApi.MailAccount>(
+    `/system/mail-account/get?id=${id}`,
+  );
+}
+
+/** 新增邮箱账号 */
+export function createMailAccount(data: SystemMailAccountApi.MailAccount) {
+  return requestClient.post('/system/mail-account/create', data);
+}
+
+/** 修改邮箱账号 */
+export function updateMailAccount(data: SystemMailAccountApi.MailAccount) {
+  return requestClient.put('/system/mail-account/update', data);
+}
+
+/** 删除邮箱账号 */
+export function deleteMailAccount(id: number) {
+  return requestClient.delete(`/system/mail-account/delete?id=${id}`);
+}
+
+/** 批量删除邮箱账号 */
+export function deleteMailAccountList(ids: number[]) {
+  return requestClient.delete(
+    `/system/mail-account/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 获得邮箱账号精简列表 */
+export function getSimpleMailAccountList() {
+  return requestClient.get<SystemMailAccountApi.MailAccount[]>(
+    '/system/mail-account/simple-list',
+  );
+}
diff --git a/apps/web-tdesign/src/api/system/mail/log/index.ts b/apps/web-tdesign/src/api/system/mail/log/index.ts
new file mode 100644
index 000000000..c32b790e1
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/mail/log/index.ts
@@ -0,0 +1,36 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemMailLogApi {
+  /** 邮件日志 */
+  export interface MailLog {
+    id: number;
+    userId: number;
+    userType: number;
+    toMails: string[];
+    ccMails?: string[];
+    bccMails?: string[];
+    accountId: number;
+    fromMail: string;
+    templateId: number;
+    templateCode: string;
+    templateNickname: string;
+    templateTitle: string;
+    templateContent: string;
+    templateParams: string;
+    sendStatus: number;
+    sendTime: string;
+    sendMessageId: string;
+    sendException: string;
+    createTime: string;
+  }
+}
+
+/** 查询邮件日志列表 */
+export function getMailLogPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemMailLogApi.MailLog>>(
+    '/system/mail-log/page',
+    { params },
+  );
+}
diff --git a/apps/web-tdesign/src/api/system/mail/template/index.ts b/apps/web-tdesign/src/api/system/mail/template/index.ts
new file mode 100644
index 000000000..9e2a5a78d
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/mail/template/index.ts
@@ -0,0 +1,71 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemMailTemplateApi {
+  /** 邮件模版信息 */
+  export interface MailTemplate {
+    id: number;
+    name: string;
+    code: string;
+    accountId: number;
+    nickname: string;
+    title: string;
+    content: string;
+    params: string[];
+    status: number;
+    remark: string;
+    createTime: Date;
+  }
+
+  /** 邮件发送信息 */
+  export interface MailSendReqVO {
+    toMails: string[];
+    ccMails?: string[];
+    bccMails?: string[];
+    templateCode: string;
+    templateParams: Record<string, any>;
+  }
+}
+
+/** 查询邮件模版列表 */
+export function getMailTemplatePage(params: PageParam) {
+  return requestClient.get<PageResult<SystemMailTemplateApi.MailTemplate>>(
+    '/system/mail-template/page',
+    { params },
+  );
+}
+
+/** 查询邮件模版详情 */
+export function getMailTemplate(id: number) {
+  return requestClient.get<SystemMailTemplateApi.MailTemplate>(
+    `/system/mail-template/get?id=${id}`,
+  );
+}
+
+/** 新增邮件模版 */
+export function createMailTemplate(data: SystemMailTemplateApi.MailTemplate) {
+  return requestClient.post('/system/mail-template/create', data);
+}
+
+/** 修改邮件模版 */
+export function updateMailTemplate(data: SystemMailTemplateApi.MailTemplate) {
+  return requestClient.put('/system/mail-template/update', data);
+}
+
+/** 删除邮件模版 */
+export function deleteMailTemplate(id: number) {
+  return requestClient.delete(`/system/mail-template/delete?id=${id}`);
+}
+
+/** 批量删除邮件模版 */
+export function deleteMailTemplateList(ids: number[]) {
+  return requestClient.delete(
+    `/system/mail-template/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 发送邮件 */
+export function sendMail(data: SystemMailTemplateApi.MailSendReqVO) {
+  return requestClient.post('/system/mail-template/send-mail', data);
+}
diff --git a/apps/web-tdesign/src/api/system/menu/index.ts b/apps/web-tdesign/src/api/system/menu/index.ts
new file mode 100644
index 000000000..b296d815b
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/menu/index.ts
@@ -0,0 +1,59 @@
+import { requestClient } from '#/api/request';
+
+export namespace SystemMenuApi {
+  /** 菜单信息 */
+  export interface Menu {
+    id: number;
+    name: string;
+    permission: string;
+    type: number;
+    sort: number;
+    parentId: number;
+    path: string;
+    icon: string;
+    component: string;
+    componentName?: string;
+    status: number;
+    visible: boolean;
+    keepAlive: boolean;
+    alwaysShow?: boolean;
+    createTime: Date;
+  }
+}
+
+/** 查询菜单（精简）列表 */
+export async function getSimpleMenusList() {
+  return requestClient.get<SystemMenuApi.Menu[]>('/system/menu/simple-list');
+}
+
+/** 查询菜单列表 */
+export async function getMenuList(params?: Record<string, any>) {
+  return requestClient.get<SystemMenuApi.Menu[]>('/system/menu/list', {
+    params,
+  });
+}
+
+/** 获取菜单详情 */
+export async function getMenu(id: number) {
+  return requestClient.get<SystemMenuApi.Menu>(`/system/menu/get?id=${id}`);
+}
+
+/** 新增菜单 */
+export async function createMenu(data: SystemMenuApi.Menu) {
+  return requestClient.post('/system/menu/create', data);
+}
+
+/** 修改菜单 */
+export async function updateMenu(data: SystemMenuApi.Menu) {
+  return requestClient.put('/system/menu/update', data);
+}
+
+/** 删除菜单 */
+export async function deleteMenu(id: number) {
+  return requestClient.delete(`/system/menu/delete?id=${id}`);
+}
+
+/** 批量删除菜单 */
+export async function deleteMenuList(ids: number[]) {
+  return requestClient.delete(`/system/menu/delete-list?ids=${ids.join(',')}`);
+}
diff --git a/apps/web-tdesign/src/api/system/notice/index.ts b/apps/web-tdesign/src/api/system/notice/index.ts
new file mode 100644
index 000000000..5ae888538
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/notice/index.ts
@@ -0,0 +1,59 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemNoticeApi {
+  /** 公告信息 */
+  export interface Notice {
+    id?: number;
+    title: string;
+    type: number;
+    content: string;
+    status: number;
+    remark: string;
+    creator?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询公告列表 */
+export function getNoticePage(params: PageParam) {
+  return requestClient.get<PageResult<SystemNoticeApi.Notice>>(
+    '/system/notice/page',
+    { params },
+  );
+}
+
+/** 查询公告详情 */
+export function getNotice(id: number) {
+  return requestClient.get<SystemNoticeApi.Notice>(
+    `/system/notice/get?id=${id}`,
+  );
+}
+
+/** 新增公告 */
+export function createNotice(data: SystemNoticeApi.Notice) {
+  return requestClient.post('/system/notice/create', data);
+}
+
+/** 修改公告 */
+export function updateNotice(data: SystemNoticeApi.Notice) {
+  return requestClient.put('/system/notice/update', data);
+}
+
+/** 删除公告 */
+export function deleteNotice(id: number) {
+  return requestClient.delete(`/system/notice/delete?id=${id}`);
+}
+
+/** 批量删除公告 */
+export function deleteNoticeList(ids: number[]) {
+  return requestClient.delete(
+    `/system/notice/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 推送公告 */
+export function pushNotice(id: number) {
+  return requestClient.post(`/system/notice/push?id=${id}`);
+}
diff --git a/apps/web-tdesign/src/api/system/notify/message/index.ts b/apps/web-tdesign/src/api/system/notify/message/index.ts
new file mode 100644
index 000000000..a8a4e8968
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/notify/message/index.ts
@@ -0,0 +1,65 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemNotifyMessageApi {
+  /** 站内信消息信息 */
+  export interface NotifyMessage {
+    id: number;
+    userId: number;
+    userType: number;
+    templateId: number;
+    templateCode: string;
+    templateNickname: string;
+    templateContent: string;
+    templateType: number;
+    templateParams: string;
+    readStatus: boolean;
+    readTime: Date;
+    createTime: Date;
+  }
+}
+
+/** 查询站内信消息列表 */
+export function getNotifyMessagePage(params: PageParam) {
+  return requestClient.get<PageResult<SystemNotifyMessageApi.NotifyMessage>>(
+    '/system/notify-message/page',
+    { params },
+  );
+}
+
+/** 获得我的站内信分页 */
+export function getMyNotifyMessagePage(params: PageParam) {
+  return requestClient.get<PageResult<SystemNotifyMessageApi.NotifyMessage>>(
+    '/system/notify-message/my-page',
+    { params },
+  );
+}
+
+/** 批量标记已读 */
+export function updateNotifyMessageRead(ids: number[]) {
+  return requestClient.put(
+    '/system/notify-message/update-read',
+    {},
+    {
+      params: { ids },
+    },
+  );
+}
+
+/** 标记所有站内信为已读 */
+export function updateAllNotifyMessageRead() {
+  return requestClient.put('/system/notify-message/update-all-read');
+}
+
+/** 获取当前用户的最新站内信列表 */
+export function getUnreadNotifyMessageList() {
+  return requestClient.get<SystemNotifyMessageApi.NotifyMessage[]>(
+    '/system/notify-message/get-unread-list',
+  );
+}
+
+/** 获得当前用户的未读站内信数量 */
+export function getUnreadNotifyMessageCount() {
+  return requestClient.get<number>('/system/notify-message/get-unread-count');
+}
diff --git a/apps/web-tdesign/src/api/system/notify/template/index.ts b/apps/web-tdesign/src/api/system/notify/template/index.ts
new file mode 100644
index 000000000..dd19f4b8f
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/notify/template/index.ts
@@ -0,0 +1,79 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemNotifyTemplateApi {
+  /** 站内信模板信息 */
+  export interface NotifyTemplate {
+    id?: number;
+    name: string;
+    nickname: string;
+    code: string;
+    content: string;
+    type?: number;
+    params: string[];
+    status: number;
+    remark: string;
+  }
+
+  /** 发送站内信请求 */
+  export interface NotifySendReqVO {
+    userId: number;
+    userType: number;
+    templateCode: string;
+    templateParams: Record<string, any>;
+  }
+}
+
+/** 查询站内信模板列表 */
+export function getNotifyTemplatePage(params: PageParam) {
+  return requestClient.get<PageResult<SystemNotifyTemplateApi.NotifyTemplate>>(
+    '/system/notify-template/page',
+    { params },
+  );
+}
+
+/** 查询站内信模板详情 */
+export function getNotifyTemplate(id: number) {
+  return requestClient.get<SystemNotifyTemplateApi.NotifyTemplate>(
+    `/system/notify-template/get?id=${id}`,
+  );
+}
+
+/** 新增站内信模板 */
+export function createNotifyTemplate(
+  data: SystemNotifyTemplateApi.NotifyTemplate,
+) {
+  return requestClient.post('/system/notify-template/create', data);
+}
+
+/** 修改站内信模板 */
+export function updateNotifyTemplate(
+  data: SystemNotifyTemplateApi.NotifyTemplate,
+) {
+  return requestClient.put('/system/notify-template/update', data);
+}
+
+/** 删除站内信模板 */
+export function deleteNotifyTemplate(id: number) {
+  return requestClient.delete(`/system/notify-template/delete?id=${id}`);
+}
+
+/** 批量删除站内信模板 */
+export function deleteNotifyTemplateList(ids: number[]) {
+  return requestClient.delete(
+    `/system/notify-template/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 导出站内信模板 */
+export function exportNotifyTemplate(params: any) {
+  return requestClient.download('/system/notify-template/export-excel', {
+    params,
+  });
+}
+
+/** 发送站内信 */
+export function sendNotify(data: SystemNotifyTemplateApi.NotifySendReqVO) {
+  return requestClient.post('/system/notify-template/send-notify', data);
+}
diff --git a/apps/web-tdesign/src/api/system/oauth2/client/index.ts b/apps/web-tdesign/src/api/system/oauth2/client/index.ts
new file mode 100644
index 000000000..5817b858b
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/oauth2/client/index.ts
@@ -0,0 +1,64 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemOAuth2ClientApi {
+  /** OAuth2.0 客户端信息 */
+  export interface OAuth2Client {
+    id?: number;
+    clientId: string;
+    secret: string;
+    name: string;
+    logo: string;
+    description: string;
+    status: number;
+    accessTokenValiditySeconds: number;
+    refreshTokenValiditySeconds: number;
+    redirectUris: string[];
+    autoApprove: boolean;
+    authorizedGrantTypes: string[];
+    scopes: string[];
+    authorities: string[];
+    resourceIds: string[];
+    additionalInformation: string;
+    isAdditionalInformationJson: boolean;
+    createTime?: Date;
+  }
+}
+
+/** 查询 OAuth2.0 客户端列表 */
+export function getOAuth2ClientPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemOAuth2ClientApi.OAuth2Client>>(
+    '/system/oauth2-client/page',
+    { params },
+  );
+}
+
+/** 查询 OAuth2.0 客户端详情 */
+export function getOAuth2Client(id: number) {
+  return requestClient.get<SystemOAuth2ClientApi.OAuth2Client>(
+    `/system/oauth2-client/get?id=${id}`,
+  );
+}
+
+/** 新增 OAuth2.0 客户端 */
+export function createOAuth2Client(data: SystemOAuth2ClientApi.OAuth2Client) {
+  return requestClient.post('/system/oauth2-client/create', data);
+}
+
+/** 修改 OAuth2.0 客户端 */
+export function updateOAuth2Client(data: SystemOAuth2ClientApi.OAuth2Client) {
+  return requestClient.put('/system/oauth2-client/update', data);
+}
+
+/** 删除 OAuth2.0 客户端 */
+export function deleteOAuth2Client(id: number) {
+  return requestClient.delete(`/system/oauth2-client/delete?id=${id}`);
+}
+
+/** 批量删除 OAuth2.0 客户端 */
+export function deleteOAuth2ClientList(ids: number[]) {
+  return requestClient.delete(
+    `/system/oauth2-client/delete-list?ids=${ids.join(',')}`,
+  );
+}
diff --git a/apps/web-tdesign/src/api/system/oauth2/open/index.ts b/apps/web-tdesign/src/api/system/oauth2/open/index.ts
new file mode 100644
index 000000000..16d9c7e62
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/oauth2/open/index.ts
@@ -0,0 +1,58 @@
+import { requestClient } from '#/api/request';
+
+/** OAuth2.0 授权信息响应 */
+export namespace SystemOAuth2ClientApi {
+  /** 授权信息 */
+  export interface AuthorizeInfoRespVO {
+    client: {
+      logo: string;
+      name: string;
+    };
+    scopes: {
+      key: string;
+      value: boolean;
+    }[];
+  }
+}
+
+/** 获得授权信息 */
+export function getAuthorize(clientId: string) {
+  return requestClient.get<SystemOAuth2ClientApi.AuthorizeInfoRespVO>(
+    `/system/oauth2/authorize?clientId=${clientId}`,
+  );
+}
+
+/** 发起授权 */
+export function authorize(
+  responseType: string,
+  clientId: string,
+  redirectUri: string,
+  state: string,
+  autoApprove: boolean,
+  checkedScopes: string[],
+  uncheckedScopes: string[],
+) {
+  // 构建 scopes
+  const scopes: Record<string, boolean> = {};
+  for (const scope of checkedScopes) {
+    scopes[scope] = true;
+  }
+  for (const scope of uncheckedScopes) {
+    scopes[scope] = false;
+  }
+
+  // 发起请求
+  return requestClient.post<string>('/system/oauth2/authorize', null, {
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    params: {
+      response_type: responseType,
+      client_id: clientId,
+      redirect_uri: redirectUri,
+      state,
+      auto_approve: autoApprove,
+      scope: JSON.stringify(scopes),
+    },
+  });
+}
diff --git a/apps/web-tdesign/src/api/system/oauth2/token/index.ts b/apps/web-tdesign/src/api/system/oauth2/token/index.ts
new file mode 100644
index 000000000..bd3697915
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/oauth2/token/index.ts
@@ -0,0 +1,34 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemOAuth2TokenApi {
+  /** OAuth2.0 令牌信息 */
+  export interface OAuth2Token {
+    id?: number;
+    accessToken: string;
+    refreshToken: string;
+    userId: number;
+    userType: number;
+    clientId: string;
+    createTime?: Date;
+    expiresTime?: Date;
+  }
+}
+
+/** 查询 OAuth2.0 令牌列表 */
+export function getOAuth2TokenPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemOAuth2TokenApi.OAuth2Token>>(
+    '/system/oauth2-token/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 删除 OAuth2.0 令牌 */
+export function deleteOAuth2Token(accessToken: string) {
+  return requestClient.delete(
+    `/system/oauth2-token/delete?accessToken=${accessToken}`,
+  );
+}
diff --git a/apps/web-tdesign/src/api/system/operate-log/index.ts b/apps/web-tdesign/src/api/system/operate-log/index.ts
new file mode 100644
index 000000000..8b84a260e
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/operate-log/index.ts
@@ -0,0 +1,39 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemOperateLogApi {
+  /** 操作日志信息 */
+  export interface OperateLog {
+    id: number;
+    traceId: string;
+    userType: number;
+    userId: number;
+    userName: string;
+    type: string;
+    subType: string;
+    bizId: number;
+    action: string;
+    extra: string;
+    requestMethod: string;
+    requestUrl: string;
+    userIp: string;
+    userAgent: string;
+    creator: string;
+    creatorName: string;
+    createTime: string;
+  }
+}
+
+/** 查询操作日志列表 */
+export function getOperateLogPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemOperateLogApi.OperateLog>>(
+    '/system/operate-log/page',
+    { params },
+  );
+}
+
+/** 导出操作日志 */
+export function exportOperateLog(params: any) {
+  return requestClient.download('/system/operate-log/export-excel', { params });
+}
diff --git a/apps/web-tdesign/src/api/system/permission/index.ts b/apps/web-tdesign/src/api/system/permission/index.ts
new file mode 100644
index 000000000..9039d9a05
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/permission/index.ts
@@ -0,0 +1,57 @@
+import { requestClient } from '#/api/request';
+
+export namespace SystemPermissionApi {
+  /** 分配用户角色请求 */
+  export interface AssignUserRoleReqVO {
+    userId: number;
+    roleIds: number[];
+  }
+
+  /** 分配角色菜单请求 */
+  export interface AssignRoleMenuReqVO {
+    roleId: number;
+    menuIds: number[];
+  }
+
+  /** 分配角色数据权限请求 */
+  export interface AssignRoleDataScopeReqVO {
+    roleId: number;
+    dataScope: number;
+    dataScopeDeptIds: number[];
+  }
+}
+
+/** 查询角色拥有的菜单权限 */
+export async function getRoleMenuList(roleId: number) {
+  return requestClient.get(
+    `/system/permission/list-role-menus?roleId=${roleId}`,
+  );
+}
+
+/** 赋予角色菜单权限 */
+export async function assignRoleMenu(
+  data: SystemPermissionApi.AssignRoleMenuReqVO,
+) {
+  return requestClient.post('/system/permission/assign-role-menu', data);
+}
+
+/** 赋予角色数据权限 */
+export async function assignRoleDataScope(
+  data: SystemPermissionApi.AssignRoleDataScopeReqVO,
+) {
+  return requestClient.post('/system/permission/assign-role-data-scope', data);
+}
+
+/** 查询用户拥有的角色数组 */
+export async function getUserRoleList(userId: number) {
+  return requestClient.get(
+    `/system/permission/list-user-roles?userId=${userId}`,
+  );
+}
+
+/** 赋予用户角色 */
+export async function assignUserRole(
+  data: SystemPermissionApi.AssignUserRoleReqVO,
+) {
+  return requestClient.post('/system/permission/assign-user-role', data);
+}
diff --git a/apps/web-tdesign/src/api/system/post/index.ts b/apps/web-tdesign/src/api/system/post/index.ts
new file mode 100644
index 000000000..8b32ad218
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/post/index.ts
@@ -0,0 +1,63 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemPostApi {
+  /** 岗位信息 */
+  export interface Post {
+    id?: number;
+    name: string;
+    code: string;
+    sort: number;
+    status: number;
+    remark: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询岗位列表 */
+export function getPostPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemPostApi.Post>>(
+    '/system/post/page',
+    {
+      params,
+    },
+  );
+}
+
+/** 获取岗位精简信息列表 */
+export function getSimplePostList() {
+  return requestClient.get<SystemPostApi.Post[]>('/system/post/simple-list');
+}
+
+/** 查询岗位详情 */
+export function getPost(id: number) {
+  return requestClient.get<SystemPostApi.Post>(`/system/post/get?id=${id}`);
+}
+
+/** 新增岗位 */
+export function createPost(data: SystemPostApi.Post) {
+  return requestClient.post('/system/post/create', data);
+}
+
+/** 修改岗位 */
+export function updatePost(data: SystemPostApi.Post) {
+  return requestClient.put('/system/post/update', data);
+}
+
+/** 删除岗位 */
+export function deletePost(id: number) {
+  return requestClient.delete(`/system/post/delete?id=${id}`);
+}
+
+/** 批量删除岗位 */
+export function deletePostList(ids: number[]) {
+  return requestClient.delete(`/system/post/delete-list?ids=${ids.join(',')}`);
+}
+
+/** 导出岗位 */
+export function exportPost(params: any) {
+  return requestClient.download('/system/post/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-tdesign/src/api/system/role/index.ts b/apps/web-tdesign/src/api/system/role/index.ts
new file mode 100644
index 000000000..23d5ade98
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/role/index.ts
@@ -0,0 +1,63 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemRoleApi {
+  /** 角色信息 */
+  export interface Role {
+    id?: number;
+    name: string;
+    code: string;
+    sort: number;
+    status: number;
+    type: number;
+    dataScope: number;
+    dataScopeDeptIds: number[];
+    createTime?: Date;
+  }
+}
+
+/** 查询角色列表 */
+export function getRolePage(params: PageParam) {
+  return requestClient.get<PageResult<SystemRoleApi.Role>>(
+    '/system/role/page',
+    { params },
+  );
+}
+
+/** 查询角色（精简)列表 */
+export function getSimpleRoleList() {
+  return requestClient.get<SystemRoleApi.Role[]>('/system/role/simple-list');
+}
+
+/** 查询角色详情 */
+export function getRole(id: number) {
+  return requestClient.get<SystemRoleApi.Role>(`/system/role/get?id=${id}`);
+}
+
+/** 新增角色 */
+export function createRole(data: SystemRoleApi.Role) {
+  return requestClient.post('/system/role/create', data);
+}
+
+/** 修改角色 */
+export function updateRole(data: SystemRoleApi.Role) {
+  return requestClient.put('/system/role/update', data);
+}
+
+/** 删除角色 */
+export function deleteRole(id: number) {
+  return requestClient.delete(`/system/role/delete?id=${id}`);
+}
+
+/** 批量删除角色 */
+export function deleteRoleList(ids: number[]) {
+  return requestClient.delete(`/system/role/delete-list?ids=${ids.join(',')}`);
+}
+
+/** 导出角色 */
+export function exportRole(params: any) {
+  return requestClient.download('/system/role/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-tdesign/src/api/system/sms/channel/index.ts b/apps/web-tdesign/src/api/system/sms/channel/index.ts
new file mode 100644
index 000000000..df32aad87
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/sms/channel/index.ts
@@ -0,0 +1,67 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemSmsChannelApi {
+  /** 短信渠道信息 */
+  export interface SmsChannel {
+    id?: number;
+    code: string;
+    status: number;
+    signature: string;
+    remark: string;
+    apiKey: string;
+    apiSecret: string;
+    callbackUrl: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询短信渠道列表 */
+export function getSmsChannelPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemSmsChannelApi.SmsChannel>>(
+    '/system/sms-channel/page',
+    { params },
+  );
+}
+
+/** 获得短信渠道精简列表 */
+export function getSimpleSmsChannelList() {
+  return requestClient.get<SystemSmsChannelApi.SmsChannel[]>(
+    '/system/sms-channel/simple-list',
+  );
+}
+
+/** 查询短信渠道详情 */
+export function getSmsChannel(id: number) {
+  return requestClient.get<SystemSmsChannelApi.SmsChannel>(
+    `/system/sms-channel/get?id=${id}`,
+  );
+}
+
+/** 新增短信渠道 */
+export function createSmsChannel(data: SystemSmsChannelApi.SmsChannel) {
+  return requestClient.post('/system/sms-channel/create', data);
+}
+
+/** 修改短信渠道 */
+export function updateSmsChannel(data: SystemSmsChannelApi.SmsChannel) {
+  return requestClient.put('/system/sms-channel/update', data);
+}
+
+/** 删除短信渠道 */
+export function deleteSmsChannel(id: number) {
+  return requestClient.delete(`/system/sms-channel/delete?id=${id}`);
+}
+
+/** 批量删除短信渠道 */
+export function deleteSmsChannelList(ids: number[]) {
+  return requestClient.delete(
+    `/system/sms-channel/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 导出短信渠道 */
+export function exportSmsChannel(params: any) {
+  return requestClient.download('/system/sms-channel/export-excel', { params });
+}
diff --git a/apps/web-tdesign/src/api/system/sms/log/index.ts b/apps/web-tdesign/src/api/system/sms/log/index.ts
new file mode 100644
index 000000000..8344f9932
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/sms/log/index.ts
@@ -0,0 +1,45 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemSmsLogApi {
+  /** 短信日志信息 */
+  export interface SmsLog {
+    id?: number;
+    channelId?: number;
+    channelCode: string;
+    templateId?: number;
+    templateCode: string;
+    templateType?: number;
+    templateContent: string;
+    templateParams?: Record<string, any>;
+    apiTemplateId: string;
+    mobile: string;
+    userId?: number;
+    userType?: number;
+    sendStatus?: number;
+    sendTime?: string;
+    apiSendCode: string;
+    apiSendMsg: string;
+    apiRequestId: string;
+    apiSerialNo: string;
+    receiveStatus?: number;
+    receiveTime?: string;
+    apiReceiveCode: string;
+    apiReceiveMsg: string;
+    createTime: string;
+  }
+}
+
+/** 查询短信日志列表 */
+export function getSmsLogPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemSmsLogApi.SmsLog>>(
+    '/system/sms-log/page',
+    { params },
+  );
+}
+
+/** 导出短信日志 */
+export function exportSmsLog(params: any) {
+  return requestClient.download('/system/sms-log/export-excel', { params });
+}
diff --git a/apps/web-tdesign/src/api/system/sms/template/index.ts b/apps/web-tdesign/src/api/system/sms/template/index.ts
new file mode 100644
index 000000000..eccfb911e
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/sms/template/index.ts
@@ -0,0 +1,77 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemSmsTemplateApi {
+  /** 短信模板信息 */
+  export interface SmsTemplate {
+    id?: number;
+    type?: number;
+    status: number;
+    code: string;
+    name: string;
+    content: string;
+    remark: string;
+    apiTemplateId: string;
+    channelId?: number;
+    channelCode?: string;
+    params?: string[];
+    createTime?: Date;
+  }
+
+  /** 发送短信请求 */
+  export interface SmsSendReqVO {
+    mobile: string;
+    templateCode: string;
+    templateParams: Record<string, any>;
+  }
+}
+
+/** 查询短信模板列表 */
+export function getSmsTemplatePage(params: PageParam) {
+  return requestClient.get<PageResult<SystemSmsTemplateApi.SmsTemplate>>(
+    '/system/sms-template/page',
+    { params },
+  );
+}
+
+/** 查询短信模板详情 */
+export function getSmsTemplate(id: number) {
+  return requestClient.get<SystemSmsTemplateApi.SmsTemplate>(
+    `/system/sms-template/get?id=${id}`,
+  );
+}
+
+/** 新增短信模板 */
+export function createSmsTemplate(data: SystemSmsTemplateApi.SmsTemplate) {
+  return requestClient.post('/system/sms-template/create', data);
+}
+
+/** 修改短信模板 */
+export function updateSmsTemplate(data: SystemSmsTemplateApi.SmsTemplate) {
+  return requestClient.put('/system/sms-template/update', data);
+}
+
+/** 删除短信模板 */
+export function deleteSmsTemplate(id: number) {
+  return requestClient.delete(`/system/sms-template/delete?id=${id}`);
+}
+
+/** 批量删除短信模板 */
+export function deleteSmsTemplateList(ids: number[]) {
+  return requestClient.delete(
+    `/system/sms-template/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 导出短信模板 */
+export function exportSmsTemplate(params: any) {
+  return requestClient.download('/system/sms-template/export-excel', {
+    params,
+  });
+}
+
+/** 发送短信 */
+export function sendSms(data: SystemSmsTemplateApi.SmsSendReqVO) {
+  return requestClient.post('/system/sms-template/send-sms', data);
+}
diff --git a/apps/web-tdesign/src/api/system/social/client/index.ts b/apps/web-tdesign/src/api/system/social/client/index.ts
new file mode 100644
index 000000000..181cdf86b
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/social/client/index.ts
@@ -0,0 +1,55 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemSocialClientApi {
+  /** 社交客户端信息 */
+  export interface SocialClient {
+    id?: number;
+    name: string;
+    socialType: number;
+    userType: number;
+    clientId: string;
+    clientSecret: string;
+    agentId?: string;
+    status: number;
+    createTime?: Date;
+  }
+}
+
+/** 查询社交客户端列表 */
+export function getSocialClientPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemSocialClientApi.SocialClient>>(
+    '/system/social-client/page',
+    { params },
+  );
+}
+
+/** 查询社交客户端详情 */
+export function getSocialClient(id: number) {
+  return requestClient.get<SystemSocialClientApi.SocialClient>(
+    `/system/social-client/get?id=${id}`,
+  );
+}
+
+/** 新增社交客户端 */
+export function createSocialClient(data: SystemSocialClientApi.SocialClient) {
+  return requestClient.post('/system/social-client/create', data);
+}
+
+/** 修改社交客户端 */
+export function updateSocialClient(data: SystemSocialClientApi.SocialClient) {
+  return requestClient.put('/system/social-client/update', data);
+}
+
+/** 删除社交客户端 */
+export function deleteSocialClient(id: number) {
+  return requestClient.delete(`/system/social-client/delete?id=${id}`);
+}
+
+/** 批量删除社交客户端 */
+export function deleteSocialClientList(ids: number[]) {
+  return requestClient.delete(
+    `/system/social-client/delete-list?ids=${ids.join(',')}`,
+  );
+}
diff --git a/apps/web-tdesign/src/api/system/social/user/index.ts b/apps/web-tdesign/src/api/system/social/user/index.ts
new file mode 100644
index 000000000..b91f15064
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/social/user/index.ts
@@ -0,0 +1,66 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemSocialUserApi {
+  /** 社交用户信息 */
+  export interface SocialUser {
+    id?: number;
+    type: number;
+    openid: string;
+    token: string;
+    rawTokenInfo: string;
+    nickname: string;
+    avatar: string;
+    rawUserInfo: string;
+    code: string;
+    state: string;
+    createTime?: Date;
+    updateTime?: Date;
+  }
+
+  /** 社交绑定请求 */
+  export interface SocialUserBindReqVO {
+    type: number;
+    code: string;
+    state: string;
+  }
+
+  /** 取消社交绑定请求 */
+  export interface SocialUserUnbindReqVO {
+    type: number;
+    openid: string;
+  }
+}
+
+/** 查询社交用户列表 */
+export function getSocialUserPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemSocialUserApi.SocialUser>>(
+    '/system/social-user/page',
+    { params },
+  );
+}
+
+/** 查询社交用户详情 */
+export function getSocialUser(id: number) {
+  return requestClient.get<SystemSocialUserApi.SocialUser>(
+    `/system/social-user/get?id=${id}`,
+  );
+}
+
+/** 社交绑定，使用 code 授权码 */
+export function socialBind(data: SystemSocialUserApi.SocialUserBindReqVO) {
+  return requestClient.post<boolean>('/system/social-user/bind', data);
+}
+
+/** 取消社交绑定 */
+export function socialUnbind(data: SystemSocialUserApi.SocialUserUnbindReqVO) {
+  return requestClient.delete<boolean>('/system/social-user/unbind', { data });
+}
+
+/** 获得绑定社交用户列表 */
+export function getBindSocialUserList() {
+  return requestClient.get<SystemSocialUserApi.SocialUser[]>(
+    '/system/social-user/get-bind-list',
+  );
+}
diff --git a/apps/web-tdesign/src/api/system/tenant-package/index.ts b/apps/web-tdesign/src/api/system/tenant-package/index.ts
new file mode 100644
index 000000000..53be78f73
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/tenant-package/index.ts
@@ -0,0 +1,64 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemTenantPackageApi {
+  /** 租户套餐信息 */
+  export interface TenantPackage {
+    id: number;
+    name: string;
+    status: number;
+    remark: string;
+    creator: string;
+    updater: string;
+    updateTime: string;
+    menuIds: number[];
+    createTime: Date;
+  }
+}
+
+/** 租户套餐列表 */
+export function getTenantPackagePage(params: PageParam) {
+  return requestClient.get<PageResult<SystemTenantPackageApi.TenantPackage>>(
+    '/system/tenant-package/page',
+    { params },
+  );
+}
+
+/** 查询租户套餐详情 */
+export function getTenantPackage(id: number) {
+  return requestClient.get(`/system/tenant-package/get?id=${id}`);
+}
+
+/** 新增租户套餐 */
+export function createTenantPackage(
+  data: SystemTenantPackageApi.TenantPackage,
+) {
+  return requestClient.post('/system/tenant-package/create', data);
+}
+
+/** 修改租户套餐 */
+export function updateTenantPackage(
+  data: SystemTenantPackageApi.TenantPackage,
+) {
+  return requestClient.put('/system/tenant-package/update', data);
+}
+
+/** 删除租户套餐 */
+export function deleteTenantPackage(id: number) {
+  return requestClient.delete(`/system/tenant-package/delete?id=${id}`);
+}
+
+/** 批量删除租户套餐 */
+export function deleteTenantPackageList(ids: number[]) {
+  return requestClient.delete(
+    `/system/tenant-package/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 获取租户套餐精简信息列表 */
+export function getTenantPackageList() {
+  return requestClient.get<SystemTenantPackageApi.TenantPackage[]>(
+    '/system/tenant-package/get-simple-list',
+  );
+}
diff --git a/apps/web-tdesign/src/api/system/tenant/index.ts b/apps/web-tdesign/src/api/system/tenant/index.ts
new file mode 100644
index 000000000..6ee52e1d6
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/tenant/index.ts
@@ -0,0 +1,76 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemTenantApi {
+  /** 租户信息 */
+  export interface Tenant {
+    id?: number;
+    name: string;
+    packageId: number;
+    contactName: string;
+    contactMobile: string;
+    accountCount: number;
+    expireTime: Date;
+    websites: string[];
+    status: number;
+  }
+}
+
+/** 租户列表 */
+export function getTenantPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemTenantApi.Tenant>>(
+    '/system/tenant/page',
+    { params },
+  );
+}
+
+/** 获取租户精简信息列表 */
+export function getSimpleTenantList() {
+  return requestClient.get<SystemTenantApi.Tenant[]>(
+    '/system/tenant/simple-list',
+  );
+}
+
+/** 查询租户详情 */
+export function getTenant(id: number) {
+  return requestClient.get<SystemTenantApi.Tenant>(
+    `/system/tenant/get?id=${id}`,
+  );
+}
+
+/** 获取租户精简信息列表 */
+export function getTenantList() {
+  return requestClient.get<SystemTenantApi.Tenant[]>(
+    '/system/tenant/simple-list',
+  );
+}
+
+/** 新增租户 */
+export function createTenant(data: SystemTenantApi.Tenant) {
+  return requestClient.post('/system/tenant/create', data);
+}
+
+/** 修改租户 */
+export function updateTenant(data: SystemTenantApi.Tenant) {
+  return requestClient.put('/system/tenant/update', data);
+}
+
+/** 删除租户 */
+export function deleteTenant(id: number) {
+  return requestClient.delete(`/system/tenant/delete?id=${id}`);
+}
+
+/** 批量删除租户 */
+export function deleteTenantList(ids: number[]) {
+  return requestClient.delete(
+    `/system/tenant/delete-list?ids=${ids.join(',')}`,
+  );
+}
+
+/** 导出租户 */
+export function exportTenant(params: any) {
+  return requestClient.download('/system/tenant/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-tdesign/src/api/system/user/index.ts b/apps/web-tdesign/src/api/system/user/index.ts
new file mode 100644
index 000000000..c9f23a403
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/user/index.ts
@@ -0,0 +1,88 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace SystemUserApi {
+  /** 用户信息 */
+  export interface User {
+    id?: number;
+    username: string;
+    nickname: string;
+    deptId: number;
+    postIds: string[];
+    email: string;
+    mobile: string;
+    sex: number;
+    avatar: string;
+    loginIp: string;
+    status: number;
+    remark: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询用户管理列表 */
+export function getUserPage(params: PageParam) {
+  return requestClient.get<PageResult<SystemUserApi.User>>(
+    '/system/user/page',
+    { params },
+  );
+}
+
+/** 查询用户详情 */
+export function getUser(id: number) {
+  return requestClient.get<SystemUserApi.User>(`/system/user/get?id=${id}`);
+}
+
+/** 新增用户 */
+export function createUser(data: SystemUserApi.User) {
+  return requestClient.post('/system/user/create', data);
+}
+
+/** 修改用户 */
+export function updateUser(data: SystemUserApi.User) {
+  return requestClient.put('/system/user/update', data);
+}
+
+/** 删除用户 */
+export function deleteUser(id: number) {
+  return requestClient.delete(`/system/user/delete?id=${id}`);
+}
+
+/** 批量删除用户 */
+export function deleteUserList(ids: number[]) {
+  return requestClient.delete(`/system/user/delete-list?ids=${ids.join(',')}`);
+}
+
+/** 导出用户 */
+export function exportUser(params: any) {
+  return requestClient.download('/system/user/export-excel', { params });
+}
+
+/** 下载用户导入模板 */
+export function importUserTemplate() {
+  return requestClient.download('/system/user/get-import-template');
+}
+
+/** 导入用户 */
+export function importUser(file: File, updateSupport: boolean) {
+  return requestClient.upload('/system/user/import', {
+    file,
+    updateSupport,
+  });
+}
+
+/** 用户密码重置 */
+export function resetUserPassword(id: number, password: string) {
+  return requestClient.put('/system/user/update-password', { id, password });
+}
+
+/** 用户状态修改 */
+export function updateUserStatus(id: number, status: number) {
+  return requestClient.put('/system/user/update-status', { id, status });
+}
+
+/** 获取用户精简信息列表 */
+export function getSimpleUserList() {
+  return requestClient.get<SystemUserApi.User[]>('/system/user/simple-list');
+}
diff --git a/apps/web-tdesign/src/api/system/user/profile/index.ts b/apps/web-tdesign/src/api/system/user/profile/index.ts
new file mode 100644
index 000000000..97898e71a
--- /dev/null
+++ b/apps/web-tdesign/src/api/system/user/profile/index.ts
@@ -0,0 +1,56 @@
+import { requestClient } from '#/api/request';
+
+export namespace SystemUserProfileApi {
+  /** 用户个人中心信息 */
+  export interface UserProfileRespVO {
+    id: number;
+    username: string;
+    nickname: string;
+    email?: string;
+    mobile?: string;
+    sex?: number;
+    avatar?: string;
+    loginIp: string;
+    loginDate: string;
+    createTime: string;
+    roles: any[];
+    dept: any;
+    posts: any[];
+  }
+
+  /** 更新密码请求 */
+  export interface UpdatePasswordReqVO {
+    oldPassword: string;
+    newPassword: string;
+  }
+
+  /** 更新个人信息请求 */
+  export interface UpdateProfileReqVO {
+    nickname?: string;
+    email?: string;
+    mobile?: string;
+    sex?: number;
+    avatar?: string;
+  }
+}
+
+/** 获取登录用户信息 */
+export function getUserProfile() {
+  return requestClient.get<SystemUserProfileApi.UserProfileRespVO>(
+    '/system/user/profile/get',
+  );
+}
+
+/** 修改用户个人信息 */
+export function updateUserProfile(
+  data: SystemUserProfileApi.UpdateProfileReqVO,
+) {
+  return requestClient.put('/system/user/profile/update', data);
+}
+
+/** 修改用户个人密码 */
+export function updateUserPassword(
+  data: SystemUserProfileApi.UpdatePasswordReqVO,
+) {
+  return requestClient.put('/system/user/profile/update-password', data);
+}
diff --git a/apps/web-tdesign/src/components/cron-tab/cron-tab.vue b/apps/web-tdesign/src/components/cron-tab/cron-tab.vue
new file mode 100644
index 000000000..d6dfaef44
--- /dev/null
+++ b/apps/web-tdesign/src/components/cron-tab/cron-tab.vue
@@ -0,0 +1,966 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue';
+
+import type { CronData, CronValue, ShortcutsType } from './types';
+
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+
+import {
+  Button,
+  Dialog,
+  Form,
+  Input,
+  InputNumber,
+  RadioButton,
+  RadioGroup,
+  Select,
+  Tabs,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+
+import { CronDataDefault, CronValueDefault } from './types';
+
+defineOptions({ name: 'Crontab' });
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '* * * * * ?',
+  },
+  shortcuts: {
+    type: Array as PropType<ShortcutsType[]>,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const defaultValue = ref('');
+const dialogVisible = ref(false);
+
+const cronValue = reactive<CronValue>(CronValueDefault);
+
+const data = reactive<CronData>(CronDataDefault);
+const value_second = computed(() => {
+  const v = cronValue.second;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+
+const value_minute = computed(() => {
+  const v = cronValue.minute;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+
+const value_hour = computed(() => {
+  const v = cronValue.hour;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+
+const value_day = computed(() => {
+  const v = cronValue.day;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    case '4': {
+      return 'L';
+    }
+    case '5': {
+      return '?';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+
+const value_month = computed(() => {
+  const v = cronValue.month;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+
+const value_week = computed(() => {
+  const v = cronValue.week;
+  switch (v.type) {
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.end}#${v.loop.start}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '*';
+    }
+    case '4': {
+      return `${v.last}L`;
+    }
+    case '5': {
+      return '?';
+    }
+    default: {
+      return '*';
+    }
+  }
+});
+
+const value_year = computed(() => {
+  const v = cronValue.year;
+  switch (v.type) {
+    case '-1': {
+      return '';
+    }
+    case '0': {
+      return '*';
+    }
+    case '1': {
+      return `${v.range.start}-${v.range.end}`;
+    }
+    case '2': {
+      return `${v.loop.start}/${v.loop.end}`;
+    }
+    case '3': {
+      return v.appoint.length > 0 ? v.appoint.join(',') : '';
+    }
+    default: {
+      return '';
+    }
+  }
+});
+
+watch(
+  () => cronValue.week.type,
+  (val: string) => {
+    if (val !== '5') {
+      cronValue.day.type = '5';
+    }
+  },
+);
+
+watch(
+  () => cronValue.day.type,
+  (val: string) => {
+    if (val !== '5') {
+      cronValue.week.type = '5';
+    }
+  },
+);
+
+watch(
+  () => props.modelValue,
+  () => {
+    defaultValue.value = props.modelValue;
+  },
+);
+
+onMounted(() => {
+  defaultValue.value = props.modelValue;
+});
+
+const select = ref<string>();
+
+watch(
+  () => select.value,
+  () => {
+    if (select.value === 'custom') {
+      open();
+    } else {
+      defaultValue.value = select.value || '';
+      emit('update:modelValue', defaultValue.value);
+    }
+  },
+);
+
+function open() {
+  set();
+  dialogVisible.value = true;
+}
+
+function set() {
+  defaultValue.value = props.modelValue;
+  let arr = (props.modelValue || '* * * * * ?').split(' ');
+
+  /** 简单检查 */
+  if (arr.length < 6) {
+    message.warning('cron表达式错误，已转换为默认表达式');
+    arr = '* * * * * ?'.split(' ');
+  }
+
+  /** 秒 */
+  if (arr[0] === '*') {
+    cronValue.second.type = '0';
+  } else if (arr[0]?.includes('-')) {
+    cronValue.second.type = '1';
+    cronValue.second.range.start = Number(arr[0].split('-')[0]);
+    cronValue.second.range.end = Number(arr[0].split('-')[1]);
+  } else if (arr[0]?.includes('/')) {
+    cronValue.second.type = '2';
+    cronValue.second.loop.start = Number(arr[0].split('/')[0]);
+    cronValue.second.loop.end = Number(arr[0].split('/')[1]);
+  } else {
+    cronValue.second.type = '3';
+    cronValue.second.appoint = arr[0]?.split(',') || [];
+  }
+
+  /** 分 */
+  if (arr[1] === '*') {
+    cronValue.minute.type = '0';
+  } else if (arr[1]?.includes('-')) {
+    cronValue.minute.type = '1';
+    cronValue.minute.range.start = Number(arr[1].split('-')[0]);
+    cronValue.minute.range.end = Number(arr[1].split('-')[1]);
+  } else if (arr[1]?.includes('/')) {
+    cronValue.minute.type = '2';
+    cronValue.minute.loop.start = Number(arr[1].split('/')[0]);
+    cronValue.minute.loop.end = Number(arr[1].split('/')[1]);
+  } else {
+    cronValue.minute.type = '3';
+    cronValue.minute.appoint = arr[1]?.split(',') || [];
+  }
+
+  /** 小时 */
+  if (arr[2] === '*') {
+    cronValue.hour.type = '0';
+  } else if (arr[2]?.includes('-')) {
+    cronValue.hour.type = '1';
+    cronValue.hour.range.start = Number(arr[2].split('-')[0]);
+    cronValue.hour.range.end = Number(arr[2].split('-')[1]);
+  } else if (arr[2]?.includes('/')) {
+    cronValue.hour.type = '2';
+    cronValue.hour.loop.start = Number(arr[2].split('/')[0]);
+    cronValue.hour.loop.end = Number(arr[2].split('/')[1]);
+  } else {
+    cronValue.hour.type = '3';
+    cronValue.hour.appoint = arr[2]?.split(',') || [];
+  }
+
+  /** 日 */
+  switch (arr[3]) {
+    case '*': {
+      cronValue.day.type = '0';
+
+      break;
+    }
+    case '?': {
+      cronValue.day.type = '5';
+
+      break;
+    }
+    case 'L': {
+      cronValue.day.type = '4';
+
+      break;
+    }
+    default: {
+      if (arr[3]?.includes('-')) {
+        cronValue.day.type = '1';
+        cronValue.day.range.start = Number(arr[3].split('-')[0]);
+        cronValue.day.range.end = Number(arr[3].split('-')[1]);
+      } else if (arr[3]?.includes('/')) {
+        cronValue.day.type = '2';
+        cronValue.day.loop.start = Number(arr[3].split('/')[0]);
+        cronValue.day.loop.end = Number(arr[3].split('/')[1]);
+      } else {
+        cronValue.day.type = '3';
+        cronValue.day.appoint = arr[3]?.split(',') || [];
+      }
+    }
+  }
+
+  /** 月 */
+  if (arr[4] === '*') {
+    cronValue.month.type = '0';
+  } else if (arr[4]?.includes('-')) {
+    cronValue.month.type = '1';
+    cronValue.month.range.start = Number(arr[4].split('-')[0]);
+    cronValue.month.range.end = Number(arr[4].split('-')[1]);
+  } else if (arr[4]?.includes('/')) {
+    cronValue.month.type = '2';
+    cronValue.month.loop.start = Number(arr[4].split('/')[0]);
+    cronValue.month.loop.end = Number(arr[4].split('/')[1]);
+  } else {
+    cronValue.month.type = '3';
+    cronValue.month.appoint = arr[4]?.split(',') || [];
+  }
+
+  /** 周 */
+  if (arr[5] === '*') {
+    cronValue.week.type = '0';
+  } else if (arr[5] === '?') {
+    cronValue.week.type = '5';
+  } else if (arr[5]?.includes('-')) {
+    cronValue.week.type = '1';
+    cronValue.week.range.start = arr[5].split('-')[0] || '';
+    cronValue.week.range.end = arr[5].split('-')[1] || '';
+  } else if (arr[5]?.includes('#')) {
+    cronValue.week.type = '2';
+    cronValue.week.loop.start = Number(arr[5].split('#')[1]);
+    cronValue.week.loop.end = arr[5].split('#')[0] || '';
+  } else if (arr[5]?.includes('L')) {
+    cronValue.week.type = '4';
+    cronValue.week.last = arr[5].split('L')[0] || '';
+  } else {
+    cronValue.week.type = '3';
+    cronValue.week.appoint = arr[5]?.split(',') || [];
+  }
+
+  /** 年 */
+  if (!arr[6]) {
+    cronValue.year.type = '-1';
+  } else if (arr[6] === '*') {
+    cronValue.year.type = '0';
+  } else if (arr[6]?.includes('-')) {
+    cronValue.year.type = '1';
+    cronValue.year.range.start = Number(arr[6].split('-')[0]);
+    cronValue.year.range.end = Number(arr[6].split('-')[1]);
+  } else if (arr[6]?.includes('/')) {
+    cronValue.year.type = '2';
+    cronValue.year.loop.start = Number(arr[6].split('/')[1]);
+    cronValue.year.loop.end = Number(arr[6].split('/')[0]);
+  } else {
+    cronValue.year.type = '3';
+    cronValue.year.appoint = arr[6]?.split(',') || [];
+  }
+}
+
+function submit() {
+  const year = value_year.value ? ` ${value_year.value}` : '';
+  defaultValue.value = `${value_second.value} ${value_minute.value} ${
+    value_hour.value
+  } ${value_day.value} ${value_month.value} ${value_week.value}${year}`;
+  emit('update:modelValue', defaultValue.value);
+  dialogVisible.value = false;
+}
+
+function inputChange() {
+  emit('update:modelValue', defaultValue.value);
+}
+</script>
+
+<template>
+  <Input
+    v-model="defaultValue"
+    class="input-with-select"
+    v-bind="$attrs"
+    @input="inputChange"
+  >
+    <template #addonAfter>
+      <Select v-model="select" placeholder="生成器" class="w-36">
+        <Select.Option value="0 * * * * ?">每分钟</Select.Option>
+        <Select.Option value="0 0 * * * ?">每小时</Select.Option>
+        <Select.Option value="0 0 0 * * ?">每天零点</Select.Option>
+        <Select.Option value="0 0 0 1 * ?">每月一号零点</Select.Option>
+        <Select.Option value="0 0 0 L * ?">每月最后一天零点</Select.Option>
+        <Select.Option value="0 0 0 ? * 1">每周星期日零点</Select.Option>
+        <Select.Option
+          v-for="(item, index) in shortcuts"
+          :key="index"
+          :value="item.value"
+        >
+          {{ item.text }}
+        </Select.Option>
+        <Select.Option value="custom">自定义</Select.Option>
+      </Select>
+    </template>
+  </Input>
+
+  <Dialog
+    v-model:open="dialogVisible"
+    :width="720"
+    destroy-on-close
+    title="cron规则生成器"
+  >
+    <div class="sc-cron">
+      <Tabs>
+        <Tabs.TabPane key="second">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>秒</h2>
+              <h4>{{ value_second }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model="cronValue.second.type">
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.second.type === '1'" label="范围">
+              <InputNumber
+                v-model="cronValue.second.range.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model="cronValue.second.range.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.second.type === '2'" label="间隔">
+              <InputNumber
+                v-model="cronValue.second.loop.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              秒开始，每
+              <InputNumber
+                v-model="cronValue.second.loop.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              秒执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.second.type === '3'" label="指定">
+              <Select
+                v-model="cronValue.second.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.second"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="minute">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>分钟</h2>
+              <h4>{{ value_minute }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model="cronValue.minute.type">
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.minute.type === '1'" label="范围">
+              <InputNumber
+                v-model="cronValue.minute.range.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model="cronValue.minute.range.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.minute.type === '2'" label="间隔">
+              <InputNumber
+                v-model="cronValue.minute.loop.start"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              分钟开始，每
+              <InputNumber
+                v-model="cronValue.minute.loop.end"
+                :max="59"
+                :min="0"
+                controls-position="right"
+              />
+              分钟执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.minute.type === '3'" label="指定">
+              <Select
+                v-model="cronValue.minute.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.minute"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="hour">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>小时</h2>
+              <h4>{{ value_hour }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model="cronValue.hour.type">
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.hour.type === '1'" label="范围">
+              <InputNumber
+                v-model="cronValue.hour.range.start"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model="cronValue.hour.range.end"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.hour.type === '2'" label="间隔">
+              <InputNumber
+                v-model="cronValue.hour.loop.start"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              小时开始，每
+              <InputNumber
+                v-model="cronValue.hour.loop.end"
+                :max="23"
+                :min="0"
+                controls-position="right"
+              />
+              小时执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.hour.type === '3'" label="指定">
+              <Select
+                v-model="cronValue.hour.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.hour"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="day">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>日</h2>
+              <h4>{{ value_day }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model="cronValue.day.type">
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+                <RadioButton value="4">本月最后一天</RadioButton>
+                <RadioButton value="5">不指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.day.type === '1'" label="范围">
+              <InputNumber
+                v-model="cronValue.day.range.start"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model="cronValue.day.range.end"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.day.type === '2'" label="间隔">
+              <InputNumber
+                v-model="cronValue.day.loop.start"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              号开始，每
+              <InputNumber
+                v-model="cronValue.day.loop.end"
+                :max="31"
+                :min="1"
+                controls-position="right"
+              />
+              天执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.day.type === '3'" label="指定">
+              <Select
+                v-model="cronValue.day.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.day"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="month">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>月</h2>
+              <h4>{{ value_month }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model="cronValue.month.type">
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.month.type === '1'" label="范围">
+              <InputNumber
+                v-model="cronValue.month.range.start"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model="cronValue.month.range.end"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.month.type === '2'" label="间隔">
+              <InputNumber
+                v-model="cronValue.month.loop.start"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              月开始，每
+              <InputNumber
+                v-model="cronValue.month.loop.end"
+                :max="12"
+                :min="1"
+                controls-position="right"
+              />
+              月执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.month.type === '3'" label="指定">
+              <Select
+                v-model="cronValue.month.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.month"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="week">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>周</h2>
+              <h4>{{ value_week }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model="cronValue.week.type">
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+                <RadioButton value="4">本月最后一周</RadioButton>
+                <RadioButton value="5">不指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.week.type === '1'" label="范围">
+              <Select v-model="cronValue.week.range.start">
+                <Select.Option
+                  v-for="(item, index) in data.week"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </Select>
+              <span style="padding: 0 15px">-</span>
+              <Select v-model="cronValue.week.range.end">
+                <Select.Option
+                  v-for="(item, index) in data.week"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </Select>
+            </Form.Item>
+            <Form.Item v-if="cronValue.week.type === '2'" label="间隔">
+              第
+              <InputNumber
+                v-model="cronValue.week.loop.start"
+                :max="4"
+                :min="1"
+                controls-position="right"
+              />
+              周的星期
+              <Select v-model="cronValue.week.loop.end">
+                <Select.Option
+                  v-for="(item, index) in data.week"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </Select>
+              执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.week.type === '3'" label="指定">
+              <Select
+                v-model="cronValue.week.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.week"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </Select>
+            </Form.Item>
+            <Form.Item v-if="cronValue.week.type === '4'" label="最后一周">
+              <Select v-model="cronValue.week.last">
+                <Select.Option
+                  v-for="(item, index) in data.week"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key="year">
+          <template #tab>
+            <div class="sc-cron-num">
+              <h2>年</h2>
+              <h4>{{ value_year }}</h4>
+            </div>
+          </template>
+          <Form>
+            <Form.Item label="类型">
+              <RadioGroup v-model="cronValue.year.type">
+                <RadioButton value="-1">忽略</RadioButton>
+                <RadioButton value="0">任意值</RadioButton>
+                <RadioButton value="1">范围</RadioButton>
+                <RadioButton value="2">间隔</RadioButton>
+                <RadioButton value="3">指定</RadioButton>
+              </RadioGroup>
+            </Form.Item>
+            <Form.Item v-if="cronValue.year.type === '1'" label="范围">
+              <InputNumber
+                v-model="cronValue.year.range.start"
+                controls-position="right"
+              />
+              <span style="padding: 0 15px">-</span>
+              <InputNumber
+                v-model="cronValue.year.range.end"
+                controls-position="right"
+              />
+            </Form.Item>
+            <Form.Item v-if="cronValue.year.type === '2'" label="间隔">
+              <InputNumber
+                v-model="cronValue.year.loop.start"
+                controls-position="right"
+              />
+              年开始，每
+              <InputNumber
+                v-model="cronValue.year.loop.end"
+                :min="1"
+                controls-position="right"
+              />
+              年执行一次
+            </Form.Item>
+            <Form.Item v-if="cronValue.year.type === '3'" label="指定">
+              <Select
+                v-model="cronValue.year.appoint"
+                mode="multiple"
+                style="width: 100%"
+              >
+                <Select.Option
+                  v-for="(item, index) in data.year"
+                  :key="index"
+                  :label="item"
+                  :value="item"
+                />
+              </Select>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+      </Tabs>
+    </div>
+
+    <template #footer>
+      <Button @click="dialogVisible = false">取 消</Button>
+      <Button theme="primary" @click="submit()">确 认</Button>
+    </template>
+  </Dialog>
+</template>
+
+<style scoped>
+.sc-cron :deep(.ant-tabs-tab) {
+  height: auto;
+  padding: 0 7px;
+  line-height: 1;
+  vertical-align: bottom;
+}
+
+.sc-cron-num {
+  width: 100%;
+  margin-bottom: 15px;
+  text-align: center;
+}
+
+.sc-cron-num h2 {
+  margin-bottom: 15px;
+  font-size: 12px;
+  font-weight: normal;
+}
+
+.sc-cron-num h4 {
+  display: block;
+  width: 100%;
+  height: 32px;
+  padding: 0 15px;
+  font-size: 12px;
+  line-height: 30px;
+  background: hsl(var(--primary) / 10%);
+  border-radius: 4px;
+}
+
+.sc-cron :deep(.ant-tabs-tab.ant-tabs-tab-active) .sc-cron-num h4 {
+  color: #fff;
+  background: hsl(var(--primary));
+}
+
+[data-theme='dark'] .sc-cron-num h4 {
+  background: hsl(var(--white));
+}
+
+.input-with-select .ant-input-group-addon {
+  background-color: hsl(var(--muted));
+}
+</style>
diff --git a/apps/web-tdesign/src/components/cron-tab/index.ts b/apps/web-tdesign/src/components/cron-tab/index.ts
new file mode 100644
index 000000000..8f4baae59
--- /dev/null
+++ b/apps/web-tdesign/src/components/cron-tab/index.ts
@@ -0,0 +1 @@
+export { default as CronTab } from './cron-tab.vue';
diff --git a/apps/web-tdesign/src/components/cron-tab/types.ts b/apps/web-tdesign/src/components/cron-tab/types.ts
new file mode 100644
index 000000000..2adf942b7
--- /dev/null
+++ b/apps/web-tdesign/src/components/cron-tab/types.ts
@@ -0,0 +1,266 @@
+export interface ShortcutsType {
+  text: string;
+  value: string;
+}
+
+export interface CronRange {
+  start: number | string | undefined;
+  end: number | string | undefined;
+}
+
+export interface CronLoop {
+  start: number | string | undefined;
+  end: number | string | undefined;
+}
+
+export interface CronItem {
+  type: string;
+  range: CronRange;
+  loop: CronLoop;
+  appoint: string[];
+  last?: string;
+}
+
+export interface CronValue {
+  second: CronItem;
+  minute: CronItem;
+  hour: CronItem;
+  day: CronItem;
+  month: CronItem;
+  week: CronItem & { last: string };
+  year: CronItem;
+}
+
+export interface WeekOption {
+  value: string;
+  label: string;
+}
+
+export interface CronData {
+  second: string[];
+  minute: string[];
+  hour: string[];
+  day: string[];
+  month: string[];
+  week: WeekOption[];
+  year: number[];
+}
+
+const getYear = (): number[] => {
+  const v: number[] = [];
+  const y = new Date().getFullYear();
+  for (let i = 0; i < 11; i++) {
+    v.push(y + i);
+  }
+  return v;
+};
+
+export const CronValueDefault: CronValue = {
+  second: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 0,
+      end: 1,
+    },
+    appoint: [],
+  },
+  minute: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 0,
+      end: 1,
+    },
+    appoint: [],
+  },
+  hour: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 0,
+      end: 1,
+    },
+    appoint: [],
+  },
+  day: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 1,
+      end: 1,
+    },
+    appoint: [],
+  },
+  month: {
+    type: '0',
+    range: {
+      start: 1,
+      end: 2,
+    },
+    loop: {
+      start: 1,
+      end: 1,
+    },
+    appoint: [],
+  },
+  week: {
+    type: '5',
+    range: {
+      start: '2',
+      end: '3',
+    },
+    loop: {
+      start: 0,
+      end: '2',
+    },
+    last: '2',
+    appoint: [],
+  },
+  year: {
+    type: '-1',
+    range: {
+      start: getYear()[0],
+      end: getYear()[1],
+    },
+    loop: {
+      start: getYear()[0],
+      end: 1,
+    },
+    appoint: [],
+  },
+};
+
+export const CronDataDefault: CronData = {
+  second: [
+    '0',
+    '5',
+    '15',
+    '20',
+    '25',
+    '30',
+    '35',
+    '40',
+    '45',
+    '50',
+    '55',
+    '59',
+  ],
+  minute: [
+    '0',
+    '5',
+    '15',
+    '20',
+    '25',
+    '30',
+    '35',
+    '40',
+    '45',
+    '50',
+    '55',
+    '59',
+  ],
+  hour: [
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23',
+  ],
+  day: [
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '10',
+    '11',
+    '12',
+    '13',
+    '14',
+    '15',
+    '16',
+    '17',
+    '18',
+    '19',
+    '20',
+    '21',
+    '22',
+    '23',
+    '24',
+    '25',
+    '26',
+    '27',
+    '28',
+    '29',
+    '30',
+    '31',
+  ],
+  month: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+  week: [
+    {
+      value: '1',
+      label: '周日',
+    },
+    {
+      value: '2',
+      label: '周一',
+    },
+    {
+      value: '3',
+      label: '周二',
+    },
+    {
+      value: '4',
+      label: '周三',
+    },
+    {
+      value: '5',
+      label: '周四',
+    },
+    {
+      value: '6',
+      label: '周五',
+    },
+    {
+      value: '7',
+      label: '周六',
+    },
+  ],
+  year: getYear(),
+};
diff --git a/apps/web-tdesign/src/components/cropper/cropper-avatar.vue b/apps/web-tdesign/src/components/cropper/cropper-avatar.vue
new file mode 100644
index 000000000..5acb23fdc
--- /dev/null
+++ b/apps/web-tdesign/src/components/cropper/cropper-avatar.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue';
+
+import type { CropperAvatarProps } from './typing';
+
+import { computed, ref, unref, watch, watchEffect } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { Button } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+
+import cropperModal from './cropper-modal.vue';
+
+defineOptions({ name: 'CropperAvatar' });
+
+const props = withDefaults(defineProps<CropperAvatarProps>(), {
+  width: 200,
+  value: '',
+  showBtn: true,
+  btnProps: () => ({}),
+  btnText: '',
+  uploadApi: () => Promise.resolve(),
+  size: 5,
+});
+
+const emit = defineEmits(['update:value', 'change']);
+
+const sourceValue = ref(props.value || '');
+const [CropperModal, modalApi] = useVbenModal({
+  connectedComponent: cropperModal,
+});
+
+const getWidth = computed(() => `${`${props.width}`.replace(/px/, '')}px`);
+
+const getIconWidth = computed(
+  () => `${Number.parseInt(`${props.width}`.replace(/px/, '')) / 2}px`,
+);
+
+const getStyle = computed((): CSSProperties => ({ width: unref(getWidth) }));
+
+const getImageWrapperStyle = computed(
+  (): CSSProperties => ({ height: unref(getWidth), width: unref(getWidth) }),
+);
+
+watchEffect(() => {
+  sourceValue.value = props.value || '';
+});
+
+watch(
+  () => sourceValue.value,
+  (v: string) => {
+    emit('update:value', v);
+  },
+);
+
+function handleUploadSuccess({ data, source }: any) {
+  sourceValue.value = source;
+  emit('change', { data, source });
+  message.success($t('ui.cropper.uploadSuccess'));
+}
+
+const closeModal = () => modalApi.close();
+const openModal = () => modalApi.open();
+
+defineExpose({
+  closeModal,
+  openModal,
+});
+</script>
+
+<template>
+  <!-- 头像容器 -->
+  <div class="inline-block text-center" :style="getStyle">
+    <!-- 图片包装器 -->
+    <div
+      class="bg-card group relative cursor-pointer overflow-hidden rounded-full border border-gray-200"
+      :style="getImageWrapperStyle"
+      @click="openModal"
+    >
+      <!-- 遮罩层 -->
+      <div
+        class="duration-400 absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black bg-opacity-40 opacity-0 transition-opacity group-hover:opacity-100"
+        :style="getImageWrapperStyle"
+      >
+        <IconifyIcon
+          icon="lucide:cloud-upload"
+          class="m-auto text-gray-400"
+          :style="{
+            ...getImageWrapperStyle,
+            width: getIconWidth,
+            height: getIconWidth,
+            lineHeight: getIconWidth,
+          }"
+        />
+      </div>
+      <!-- 头像图片 -->
+      <img
+        v-if="sourceValue"
+        :src="sourceValue"
+        alt="avatar"
+        class="h-full w-full object-cover"
+      />
+    </div>
+    <!-- 上传按钮 -->
+    <Button
+      v-if="showBtn"
+      class="mx-auto mt-2"
+      @click="openModal"
+      v-bind="btnProps"
+    >
+      {{ btnText ? btnText : $t('ui.cropper.selectImage') }}
+    </Button>
+
+    <CropperModal
+      :size="size"
+      :src="sourceValue"
+      :upload-api="uploadApi"
+      @upload-success="handleUploadSuccess"
+    />
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/components/cropper/cropper-modal.vue b/apps/web-tdesign/src/components/cropper/cropper-modal.vue
new file mode 100644
index 000000000..35e827a23
--- /dev/null
+++ b/apps/web-tdesign/src/components/cropper/cropper-modal.vue
@@ -0,0 +1,304 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'tdesign-vue-next';
+
+import type { CropendResult, CropperModalProps, CropperType } from './typing';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { dataURLtoBlob, isFunction, isNumber } from '@vben/utils';
+
+import { Avatar, Button, Space, Tooltip, Upload } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+
+import CropperImage from './cropper.vue';
+
+defineOptions({ name: 'CropperModal' });
+
+const props = withDefaults(defineProps<CropperModalProps>(), {
+  circled: true,
+  size: 0,
+  src: '',
+  uploadApi: () => Promise.resolve(),
+});
+
+const emit = defineEmits(['uploadSuccess', 'uploadError', 'register']);
+
+let filename = '';
+const src = ref(props.src || '');
+const previewSource = ref('');
+const cropper = ref<CropperType>();
+let scaleX = 1;
+let scaleY = 1;
+
+const [Modal, modalApi] = useVbenModal({
+  onConfirm: handleOk,
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      // 打开时，进行 loading 加载。后续 CropperImage 组件加载完毕，会自动关闭 loading（通过 handleReady）
+      modalLoading(true);
+      const img = new Image();
+      img.src = src.value;
+      img.addEventListener('load', () => {
+        modalLoading(false);
+      });
+      img.addEventListener('error', () => {
+        modalLoading(false);
+      });
+    } else {
+      // 关闭时，清空右侧预览
+      previewSource.value = '';
+      modalLoading(false);
+    }
+  },
+});
+
+function modalLoading(loading: boolean) {
+  modalApi.setState({ confirmLoading: loading, loading });
+}
+
+// Block upload
+function handleBeforeUpload(file: UploadFile) {
+  if (
+    file &&
+    props.size > 0 &&
+    isNumber(file.size) &&
+    file.size > 1024 * 1024 * props.size
+  ) {
+    emit('uploadError', { msg: $t('ui.cropper.imageTooBig') });
+    return false;
+  }
+  const reader = new FileReader();
+  reader.readAsDataURL(file.raw as Blob);
+  src.value = '';
+  previewSource.value = '';
+  reader.addEventListener('load', (e) => {
+    src.value = (e.target?.result as string) ?? '';
+    filename = file.name ?? '';
+  });
+  return false;
+}
+
+function handleCropend({ imgBase64 }: CropendResult) {
+  previewSource.value = imgBase64;
+}
+
+function handleReady(cropperInstance: CropperType) {
+  cropper.value = cropperInstance;
+  // 画布加载完毕 关闭 loading
+  modalLoading(false);
+}
+
+function handlerToolbar(event: string, arg?: number) {
+  if (event === 'scaleX') {
+    scaleX = arg = scaleX === -1 ? 1 : -1;
+  }
+  if (event === 'scaleY') {
+    scaleY = arg = scaleY === -1 ? 1 : -1;
+  }
+  (cropper?.value as any)?.[event]?.(arg);
+}
+
+async function handleOk() {
+  const uploadApi = props.uploadApi;
+  if (uploadApi && isFunction(uploadApi)) {
+    if (!previewSource.value) {
+      message.warning('未选择图片');
+      return;
+    }
+    const blob = dataURLtoBlob(previewSource.value);
+    try {
+      modalLoading(true);
+      const url = await uploadApi({ file: blob, filename, name: 'file' });
+      emit('uploadSuccess', { data: url, source: previewSource.value });
+      await modalApi.close();
+    } finally {
+      modalLoading(false);
+    }
+  }
+}
+</script>
+
+<template>
+  <Modal
+    v-bind="$attrs"
+    :confirm-text="$t('ui.cropper.okText')"
+    :fullscreen-button="false"
+    :title="$t('ui.cropper.modalTitle')"
+    class="w-2/3"
+  >
+    <div class="flex h-96">
+      <!-- 左侧区域 -->
+      <div class="h-full w-3/5">
+        <!-- 裁剪器容器 -->
+        <div
+          class="relative h-[300px] bg-gradient-to-b from-neutral-50 to-neutral-200"
+        >
+          <CropperImage
+            v-if="src"
+            :circled="circled"
+            :src="src"
+            height="300px"
+            @cropend="handleCropend"
+            @ready="handleReady"
+          />
+        </div>
+
+        <!-- 工具栏 -->
+        <div class="mt-4 flex items-center justify-between">
+          <Upload
+            :before-upload="handleBeforeUpload"
+            :file-list="[]"
+            accept="image/*"
+          >
+            <Tooltip :title="$t('ui.cropper.selectImage')" placement="bottom">
+              <Button size="small" theme="primary">
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="lucide:upload" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+          </Upload>
+          <Space>
+            <Tooltip :title="$t('ui.cropper.btn_reset')" placement="bottom">
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('reset')"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="lucide:rotate-ccw" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip
+              :title="$t('ui.cropper.btn_rotate_left')"
+              placement="bottom"
+            >
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('rotate', -45)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="ant-design:rotate-left-outlined" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip
+              :title="$t('ui.cropper.btn_rotate_right')"
+              placement="bottom"
+            >
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('rotate', 45)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="ant-design:rotate-right-outlined" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="$t('ui.cropper.btn_scale_x')" placement="bottom">
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('scaleX')"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="vaadin:arrows-long-h" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="$t('ui.cropper.btn_scale_y')" placement="bottom">
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('scaleY')"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="vaadin:arrows-long-v" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="$t('ui.cropper.btn_zoom_in')" placement="bottom">
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('zoom', 0.1)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="lucide:zoom-in" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+            <Tooltip :title="$t('ui.cropper.btn_zoom_out')" placement="bottom">
+              <Button
+                :disabled="!src"
+                size="small"
+                theme="primary"
+                @click="handlerToolbar('zoom', -0.1)"
+              >
+                <template #icon>
+                  <div class="flex items-center justify-center">
+                    <IconifyIcon icon="lucide:zoom-out" />
+                  </div>
+                </template>
+              </Button>
+            </Tooltip>
+          </Space>
+        </div>
+      </div>
+
+      <!-- 右侧区域 -->
+      <div class="h-full w-2/5">
+        <!-- 预览区域 -->
+        <div
+          class="mx-auto h-56 w-56 overflow-hidden rounded-full border border-gray-200"
+        >
+          <img
+            v-if="previewSource"
+            :alt="$t('ui.cropper.preview')"
+            :src="previewSource"
+            class="h-full w-full object-cover"
+          />
+        </div>
+
+        <!-- 头像组合预览 -->
+        <template v-if="previewSource">
+          <div
+            class="mt-2 flex items-center justify-around border-t border-gray-200 pt-2"
+          >
+            <Avatar :src="previewSource" size="large" />
+            <Avatar size="48" :src="previewSource" />
+            <Avatar size="64" :src="previewSource" />
+            <Avatar size="80" :src="previewSource" />
+          </div>
+        </template>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/components/cropper/cropper.vue b/apps/web-tdesign/src/components/cropper/cropper.vue
new file mode 100644
index 000000000..cc8836c9f
--- /dev/null
+++ b/apps/web-tdesign/src/components/cropper/cropper.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue';
+
+import type { CropperProps } from './typing';
+
+import { computed, onMounted, onUnmounted, ref, unref, useAttrs } from 'vue';
+
+import { useDebounceFn } from '@vueuse/core';
+import Cropper from 'cropperjs';
+
+import { defaultOptions } from './typing';
+
+import 'cropperjs/dist/cropper.css';
+
+defineOptions({ name: 'CropperImage' });
+
+const props = withDefaults(defineProps<CropperProps>(), {
+  src: '',
+  alt: '',
+  circled: false,
+  realTimePreview: true,
+  height: '360px',
+  crossorigin: undefined,
+  imageStyle: () => ({}),
+  options: () => ({}),
+});
+
+const emit = defineEmits(['cropend', 'ready', 'cropendError']);
+const attrs = useAttrs();
+
+type ElRef<T extends HTMLElement = HTMLDivElement> = null | T;
+const imgElRef = ref<ElRef<HTMLImageElement>>();
+const cropper = ref<Cropper | null>();
+const isReady = ref(false);
+
+const debounceRealTimeCropped = useDebounceFn(realTimeCropped, 80);
+
+const getImageStyle = computed((): CSSProperties => {
+  return {
+    height: props.height,
+    maxWidth: '100%',
+    ...props.imageStyle,
+  };
+});
+
+const getClass = computed(() => {
+  return [
+    attrs.class,
+    {
+      'cropper-image--circled': props.circled,
+    },
+  ];
+});
+
+const getWrapperStyle = computed((): CSSProperties => {
+  return { height: `${`${props.height}`.replace(/px/, '')}px` };
+});
+
+onMounted(init);
+
+onUnmounted(() => {
+  cropper.value?.destroy();
+});
+
+async function init() {
+  const imgEl = unref(imgElRef);
+  if (!imgEl) {
+    return;
+  }
+  cropper.value = new Cropper(imgEl, {
+    ...defaultOptions,
+    ready: () => {
+      isReady.value = true;
+      realTimeCropped();
+      emit('ready', cropper.value);
+    },
+    crop() {
+      debounceRealTimeCropped();
+    },
+    zoom() {
+      debounceRealTimeCropped();
+    },
+    cropmove() {
+      debounceRealTimeCropped();
+    },
+    ...props.options,
+  });
+}
+
+// Real-time display preview
+function realTimeCropped() {
+  props.realTimePreview && cropped();
+}
+
+// event: return base64 and width and height information after cropping
+function cropped() {
+  if (!cropper.value) {
+    return;
+  }
+  const imgInfo = cropper.value.getData();
+  const canvas = props.circled
+    ? getRoundedCanvas()
+    : cropper.value.getCroppedCanvas();
+  canvas.toBlob((blob) => {
+    if (!blob) {
+      return;
+    }
+    const fileReader: FileReader = new FileReader();
+    fileReader.readAsDataURL(blob);
+    fileReader.onloadend = (e) => {
+      emit('cropend', {
+        imgBase64: e.target?.result ?? '',
+        imgInfo,
+      });
+    };
+    fileReader.addEventListener('error', () => {
+      emit('cropendError');
+    });
+  }, 'image/png');
+}
+
+// Get a circular picture canvas
+function getRoundedCanvas() {
+  const sourceCanvas = cropper.value!.getCroppedCanvas();
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d')!;
+  const width = sourceCanvas.width;
+  const height = sourceCanvas.height;
+  canvas.width = width;
+  canvas.height = height;
+  context.imageSmoothingEnabled = true;
+  context.drawImage(sourceCanvas, 0, 0, width, height);
+  context.globalCompositeOperation = 'destination-in';
+  context.beginPath();
+  context.arc(
+    width / 2,
+    height / 2,
+    Math.min(width, height) / 2,
+    0,
+    2 * Math.PI,
+    true,
+  );
+  context.fill();
+  return canvas;
+}
+</script>
+
+<template>
+  <div :class="getClass" :style="getWrapperStyle">
+    <img
+      v-show="isReady"
+      ref="imgElRef"
+      :alt="alt"
+      :crossorigin="crossorigin"
+      :src="src"
+      :style="getImageStyle"
+      class="h-auto max-w-full"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+.cropper-image {
+  &--circled {
+    .cropper-view-box,
+    .cropper-face {
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/apps/web-tdesign/src/components/cropper/index.ts b/apps/web-tdesign/src/components/cropper/index.ts
new file mode 100644
index 000000000..43fd89ff3
--- /dev/null
+++ b/apps/web-tdesign/src/components/cropper/index.ts
@@ -0,0 +1,3 @@
+export { default as CropperAvatar } from './cropper-avatar.vue';
+export { default as CropperImage } from './cropper.vue';
+export type { CropperType } from './typing';
diff --git a/apps/web-tdesign/src/components/cropper/typing.ts b/apps/web-tdesign/src/components/cropper/typing.ts
new file mode 100644
index 000000000..8293079b3
--- /dev/null
+++ b/apps/web-tdesign/src/components/cropper/typing.ts
@@ -0,0 +1,68 @@
+import type Cropper from 'cropperjs';
+import type { ButtonProps } from 'tdesign-vue-next';
+
+import type { CSSProperties } from 'vue';
+
+export interface apiFunParams {
+  file: Blob;
+  filename: string;
+  name: string;
+}
+
+export interface CropendResult {
+  imgBase64: string;
+  imgInfo: Cropper.Data;
+}
+
+export interface CropperProps {
+  src?: string;
+  alt?: string;
+  circled?: boolean;
+  realTimePreview?: boolean;
+  height?: number | string;
+  crossorigin?: '' | 'anonymous' | 'use-credentials' | undefined;
+  imageStyle?: CSSProperties;
+  options?: Cropper.Options;
+}
+
+export interface CropperAvatarProps {
+  width?: number | string;
+  value?: string;
+  showBtn?: boolean;
+  btnProps?: ButtonProps;
+  btnText?: string;
+  uploadApi?: (params: apiFunParams) => Promise<any>;
+  size?: number;
+}
+
+export interface CropperModalProps {
+  circled?: boolean;
+  uploadApi?: (params: apiFunParams) => Promise<any>;
+  src?: string;
+  size?: number;
+}
+
+export const defaultOptions: Cropper.Options = {
+  aspectRatio: 1,
+  zoomable: true,
+  zoomOnTouch: true,
+  zoomOnWheel: true,
+  cropBoxMovable: true,
+  cropBoxResizable: true,
+  toggleDragModeOnDblclick: true,
+  autoCrop: true,
+  background: true,
+  highlight: true,
+  center: true,
+  responsive: true,
+  restore: true,
+  checkCrossOrigin: true,
+  checkOrientation: true,
+  scalable: true,
+  modal: true,
+  guides: true,
+  movable: true,
+  rotatable: true,
+};
+
+export type { Cropper as CropperType };
diff --git a/apps/web-tdesign/src/components/description/description.vue b/apps/web-tdesign/src/components/description/description.vue
new file mode 100644
index 000000000..5cfc75d65
--- /dev/null
+++ b/apps/web-tdesign/src/components/description/description.vue
@@ -0,0 +1,195 @@
+<script lang="tsx">
+import type { DescriptionsProps } from 'tdesign-vue-next';
+
+import type { CSSProperties, PropType, Slots } from 'vue';
+
+import type { DescriptionItemSchema, DescriptionProps } from './typing';
+
+import { computed, defineComponent, ref, unref, useAttrs } from 'vue';
+
+import { get, getNestedValue, isFunction } from '@vben/utils';
+
+import { Card, Descriptions } from 'tdesign-vue-next';
+
+const props = {
+  bordered: { default: true, type: Boolean },
+  column: {
+    default: () => {
+      return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
+    },
+    type: [Number, Object],
+  },
+  data: { type: Object },
+  schema: {
+    default: () => [],
+    type: Array as PropType<DescriptionItemSchema[]>,
+  },
+  size: {
+    default: 'small',
+    type: String,
+    validator: (v: string) =>
+      ['default', 'middle', 'small', undefined].includes(v),
+  },
+  title: { default: '', type: String },
+  useCard: { default: true, type: Boolean },
+};
+
+function getSlot(slots: Slots, slot: string, data?: any) {
+  if (!slots || !Reflect.has(slots, slot)) {
+    return null;
+  }
+  if (!isFunction(slots[slot])) {
+    console.error(`${slot} is not a function!`);
+    return null;
+  }
+  const slotFn = slots[slot];
+  if (!slotFn) return null;
+  return slotFn({ data });
+}
+
+export default defineComponent({
+  name: 'Description',
+  props,
+  setup(props, { slots }) {
+    const propsRef = ref<null | Partial<DescriptionProps>>(null);
+
+    const prefixCls = 'description';
+    const attrs = useAttrs();
+
+    // Custom title component: get title
+    const getMergeProps = computed(() => {
+      return {
+        ...props,
+        ...(unref(propsRef) as any),
+      } as DescriptionProps;
+    });
+
+    const getProps = computed(() => {
+      const opt = {
+        ...unref(getMergeProps),
+        title: undefined,
+      };
+      return opt as DescriptionProps;
+    });
+
+    const useWrapper = computed(() => !!unref(getMergeProps).title);
+
+    const getDescriptionsProps = computed(() => {
+      return { ...unref(attrs), ...unref(getProps) } as DescriptionsProps;
+    });
+
+    // 防止换行
+    function renderLabel({
+      label,
+      labelMinWidth,
+      labelStyle,
+    }: DescriptionItemSchema) {
+      if (!labelStyle && !labelMinWidth) {
+        return label;
+      }
+
+      const labelStyles: CSSProperties = {
+        ...labelStyle,
+        minWidth: `${labelMinWidth}px `,
+      };
+      return <div style={labelStyles}>{label}</div>;
+    }
+
+    function renderItem() {
+      const { data, schema } = unref(getProps);
+      return unref(schema)
+        .map((item) => {
+          const { contentMinWidth, field, render, show, span } = item;
+
+          if (show && isFunction(show) && !show(data)) {
+            return null;
+          }
+
+          function getContent() {
+            const _data = unref(getProps)?.data;
+            if (!_data) {
+              return null;
+            }
+            const getField = field.includes('.')
+              ? (getNestedValue(_data, field) ?? get(_data, field))
+              : get(_data, field);
+            // if (
+            //   getField &&
+            //   !Object.prototype.hasOwnProperty.call(toRefs(_data), field)
+            // ) {
+            //   return isFunction(render) ? render('', _data) : (getField ?? '');
+            // }
+            return isFunction(render)
+              ? render(getField, _data)
+              : (getField ?? '');
+          }
+
+          const width = contentMinWidth;
+          return (
+            <Descriptions.Item
+              key={field}
+              label={renderLabel(item)}
+              span={span}
+            >
+              {() => {
+                if (item.slot) {
+                  return getSlot(slots, item.slot, data);
+                }
+                if (!contentMinWidth) {
+                  return getContent();
+                }
+                const style: CSSProperties = {
+                  minWidth: `${width}px`,
+                };
+                return <div style={style}>{getContent()}</div>;
+              }}
+            </Descriptions.Item>
+          );
+        })
+        .filter((item) => !!item);
+    }
+
+    function renderDesc() {
+      return (
+        <Descriptions
+          class={`${prefixCls}`}
+          {...(unref(getDescriptionsProps) as any)}
+        >
+          {renderItem()}
+        </Descriptions>
+      );
+    }
+
+    function renderCard() {
+      const content = props.useCard ? renderDesc() : <div>{renderDesc()}</div>;
+      // Reduce the dom level
+      if (!props.useCard) {
+        return content;
+      }
+
+      const { title } = unref(getMergeProps);
+      const extraSlot = getSlot(slots, 'extra');
+
+      return (
+        <Card
+          bodyStyle={{ padding: '8px 0' }}
+          headerStyle={{
+            padding: '8px 16px',
+            fontSize: '14px',
+            minHeight: '24px',
+          }}
+          style={{ margin: 0 }}
+          title={title}
+        >
+          {{
+            default: () => content,
+            extra: () => extraSlot && <div>{extraSlot}</div>,
+          }}
+        </Card>
+      );
+    }
+
+    return () => (unref(useWrapper) ? renderCard() : renderDesc());
+  },
+});
+</script>
diff --git a/apps/web-tdesign/src/components/description/index.ts b/apps/web-tdesign/src/components/description/index.ts
new file mode 100644
index 000000000..a707c4865
--- /dev/null
+++ b/apps/web-tdesign/src/components/description/index.ts
@@ -0,0 +1,3 @@
+export { default as Description } from './description.vue';
+export * from './typing';
+export { useDescription } from './use-description';
diff --git a/apps/web-tdesign/src/components/description/typing.ts b/apps/web-tdesign/src/components/description/typing.ts
new file mode 100644
index 000000000..d73a067c5
--- /dev/null
+++ b/apps/web-tdesign/src/components/description/typing.ts
@@ -0,0 +1,45 @@
+import type { DescriptionsProps as TdDescriptionsProps } from 'tdesign-vue-next';
+import type { JSX } from 'vue/jsx-runtime';
+
+import type { CSSProperties, VNode } from 'vue';
+
+import type { Recordable } from '@vben/types';
+
+export interface DescriptionItemSchema {
+  labelMinWidth?: number;
+  contentMinWidth?: number;
+  // 自定义标签样式
+  labelStyle?: CSSProperties;
+  // 对应 data 中的字段名
+  field: string;
+  // 内容的描述
+  label: JSX.Element | string | VNode;
+  // 包含列的数量
+  span?: number;
+  // 是否显示
+  show?: (...arg: any) => boolean;
+  // 插槽名称
+  slot?: string;
+  // 自定义需要展示的内容
+  render?: (
+    val: any,
+    data?: Recordable<any>,
+  ) => Element | JSX.Element | number | string | undefined | VNode;
+}
+
+export interface DescriptionProps extends TdDescriptionsProps {
+  // 是否包含卡片组件
+  useCard?: boolean;
+  // 描述项配置
+  schema: DescriptionItemSchema[];
+  // 数据
+  data: Recordable<any>;
+  // 标题
+  title?: string;
+  // 是否包含边框
+  bordered?: boolean;
+}
+
+export interface DescInstance {
+  setDescProps(descProps: Partial<DescriptionProps>): void;
+}
diff --git a/apps/web-tdesign/src/components/description/use-description.ts b/apps/web-tdesign/src/components/description/use-description.ts
new file mode 100644
index 000000000..fd24920f0
--- /dev/null
+++ b/apps/web-tdesign/src/components/description/use-description.ts
@@ -0,0 +1,31 @@
+import type { Component } from 'vue';
+
+import type { DescInstance, DescriptionProps } from './typing';
+
+import { h, reactive } from 'vue';
+
+import Description from './description.vue';
+
+export function useDescription(options?: Partial<DescriptionProps>) {
+  const propsState = reactive<Partial<DescriptionProps>>(options || {});
+
+  const api: DescInstance = {
+    setDescProps: (descProps: Partial<DescriptionProps>): void => {
+      Object.assign(propsState, descProps);
+    },
+  };
+
+  // 创建一个包装组件，将 propsState 合并到 props 中
+  const DescriptionWrapper: Component = {
+    name: 'UseDescription',
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+      return () => {
+        // @ts-ignore - 避免类型实例化过深
+        return h(Description, { ...propsState, ...attrs }, slots);
+      };
+    },
+  };
+
+  return [DescriptionWrapper, api] as const;
+}
diff --git a/apps/web-tdesign/src/components/dict-tag/dict-tag.vue b/apps/web-tdesign/src/components/dict-tag/dict-tag.vue
new file mode 100644
index 000000000..c40ed80e4
--- /dev/null
+++ b/apps/web-tdesign/src/components/dict-tag/dict-tag.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getDictObj } from '@vben/hooks';
+import { isValidColor, TinyColor } from '@vben/utils';
+
+import { Tag } from 'tdesign-vue-next';
+
+interface DictTagProps {
+  /**
+   * 字典类型
+   */
+  type: string;
+  /**
+   * 字典值
+   */
+  value: any;
+  /**
+   * 图标
+   */
+  icon?: string;
+}
+
+const props = defineProps<DictTagProps>();
+
+/** 获取字典标签 */
+const dictTag = computed(() => {
+  // 校验参数有效性
+  if (!props.type || props.value === undefined || props.value === null) {
+    return null;
+  }
+
+  // 获取字典对象
+  const dict = getDictObj(props.type, String(props.value));
+  if (!dict) {
+    return null;
+  }
+
+  // 处理颜色类型
+  let colorType = dict.colorType;
+  switch (colorType) {
+    case 'danger': {
+      colorType = 'danger';
+      break;
+    }
+    case 'info': {
+      colorType = 'success';
+      break;
+    }
+    case 'primary': {
+      colorType = 'primary';
+      break;
+    }
+    default: {
+      if (!colorType) {
+        colorType = 'default';
+      }
+    }
+  }
+
+  if (isValidColor(dict.cssClass)) {
+    colorType = new TinyColor(dict.cssClass).toHexString();
+  }
+
+  return {
+    label: dict.label || '',
+    theme: colorType as
+      | 'danger'
+      | 'default'
+      | 'primary'
+      | 'success'
+      | 'warning',
+    cssClass: dict.cssClass,
+  };
+});
+</script>
+
+<template>
+  <Tag v-if="dictTag" :theme="dictTag.theme" :color="dictTag.cssClass">
+    {{ dictTag.label }}
+  </Tag>
+</template>
diff --git a/apps/web-tdesign/src/components/dict-tag/index.ts b/apps/web-tdesign/src/components/dict-tag/index.ts
new file mode 100644
index 000000000..881265a39
--- /dev/null
+++ b/apps/web-tdesign/src/components/dict-tag/index.ts
@@ -0,0 +1 @@
+export { default as DictTag } from './dict-tag.vue';
diff --git a/apps/web-tdesign/src/components/table-action/icons.ts b/apps/web-tdesign/src/components/table-action/icons.ts
new file mode 100644
index 000000000..df5bf1a77
--- /dev/null
+++ b/apps/web-tdesign/src/components/table-action/icons.ts
@@ -0,0 +1,14 @@
+export const ACTION_ICON = {
+  DOWNLOAD: 'lucide:download',
+  UPLOAD: 'lucide:upload',
+  ADD: 'lucide:plus',
+  EDIT: 'lucide:edit',
+  DELETE: 'lucide:trash-2',
+  REFRESH: 'lucide:refresh-cw',
+  SEARCH: 'lucide:search',
+  FILTER: 'lucide:filter',
+  MORE: 'lucide:ellipsis-vertical',
+  VIEW: 'lucide:eye',
+  COPY: 'lucide:copy',
+  CLOSE: 'lucide:x',
+};
diff --git a/apps/web-tdesign/src/components/table-action/index.ts b/apps/web-tdesign/src/components/table-action/index.ts
new file mode 100644
index 000000000..672c0a533
--- /dev/null
+++ b/apps/web-tdesign/src/components/table-action/index.ts
@@ -0,0 +1,4 @@
+export * from './icons';
+
+export { default as TableAction } from './table-action.vue';
+export * from './typing';
diff --git a/apps/web-tdesign/src/components/table-action/table-action.vue b/apps/web-tdesign/src/components/table-action/table-action.vue
new file mode 100644
index 000000000..8c4fda41a
--- /dev/null
+++ b/apps/web-tdesign/src/components/table-action/table-action.vue
@@ -0,0 +1,282 @@
+<!-- add by 星语：参考 vben2 的方式，增加 TableAction 组件 -->
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import type { ActionItem, PopConfirm } from './typing';
+
+import { computed, unref, watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { isBoolean, isFunction } from '@vben/utils';
+
+import {
+  Button,
+  Dropdown,
+  Menu,
+  Popconfirm,
+  Space,
+  Tooltip,
+} from 'tdesign-vue-next';
+
+const props = defineProps({
+  actions: {
+    type: Array as PropType<ActionItem[]>,
+    default() {
+      return [];
+    },
+  },
+  dropDownActions: {
+    type: Array as PropType<ActionItem[]>,
+    default() {
+      return [];
+    },
+  },
+  divider: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const { hasAccessByCodes } = useAccess();
+
+/** 检查是否显示 */
+function isIfShow(action: ActionItem): boolean {
+  const ifShow = action.ifShow;
+  let isIfShow = true;
+  if (isBoolean(ifShow)) {
+    isIfShow = ifShow;
+  }
+  if (isFunction(ifShow)) {
+    isIfShow = ifShow(action);
+  }
+  if (isIfShow) {
+    isIfShow =
+      hasAccessByCodes(action.auth || []) || (action.auth || []).length === 0;
+  }
+  return isIfShow;
+}
+
+/** 处理按钮 actions */
+const getActions = computed(() => {
+  const actions = props.actions || [];
+  return actions.filter((action: ActionItem) => isIfShow(action));
+});
+
+/** 处理下拉菜单 actions */
+const getDropdownList = computed(() => {
+  const dropDownActions = props.dropDownActions || [];
+  return dropDownActions.filter((action: ActionItem) => isIfShow(action));
+});
+
+/** Space 组件的 size */
+const spaceSize = computed(() => {
+  const actions = unref(getActions);
+  return actions?.some(
+    (item: ActionItem) => item.type === 'primary' && item.variant === 'text',
+  )
+    ? 4
+    : 8;
+});
+
+/** 获取 PopConfirm 属性 */
+function getPopConfirmProps(popConfirm: PopConfirm) {
+  if (!popConfirm) return {};
+
+  const attrs: Record<string, any> = {};
+
+  // 复制基本属性，排除函数
+  Object.keys(popConfirm).forEach((key) => {
+    if (key !== 'confirm' && key !== 'cancel' && key !== 'icon') {
+      attrs[key] = popConfirm[key as keyof PopConfirm];
+    }
+  });
+
+  // 单独处理事件函数
+  if (popConfirm.confirm && isFunction(popConfirm.confirm)) {
+    attrs.onConfirm = popConfirm.confirm;
+  }
+  if (popConfirm.cancel && isFunction(popConfirm.cancel)) {
+    attrs.onCancel = popConfirm.cancel;
+  }
+
+  return attrs;
+}
+
+/** 获取 Button 属性 */
+function getButtonProps(action: ActionItem) {
+  return {
+    theme: action.type || 'primary',
+    variant: action.variant || 'text',
+    disabled: action.disabled,
+    loading: action.loading,
+    size: action.size,
+  };
+}
+
+/** 获取 Tooltip 属性 */
+function getTooltipProps(tooltip: any | string) {
+  if (!tooltip) return {};
+  return typeof tooltip === 'string' ? { title: tooltip } : { ...tooltip };
+}
+
+/** 处理菜单点击 */
+function handleMenuClick(e: any) {
+  const action = getDropdownList.value[e.key];
+  if (action && action.onClick && isFunction(action.onClick)) {
+    action.onClick();
+  }
+}
+
+/** 生成稳定的 key */
+function getActionKey(action: ActionItem, index: number) {
+  return `${action.label || ''}-${action.type || ''}-${index}`;
+}
+
+/** 处理按钮点击 */
+function handleButtonClick(action: ActionItem) {
+  if (action.onClick && isFunction(action.onClick)) {
+    action.onClick();
+  }
+}
+
+/** 监听props变化，强制重新计算 */
+watch(
+  () => [props.actions, props.dropDownActions],
+  () => {
+    // 这里不需要额外处理，computed会自动重新计算
+  },
+  { deep: true },
+);
+</script>
+
+<template>
+  <div class="table-actions">
+    <Space :size="spaceSize">
+      <template
+        v-for="(action, index) in getActions"
+        :key="getActionKey(action, index)"
+      >
+        <Popconfirm
+          v-if="action.popConfirm"
+          v-bind="getPopConfirmProps(action.popConfirm)"
+        >
+          <template v-if="action.popConfirm.icon" #icon>
+            <IconifyIcon :icon="action.popConfirm.icon" />
+          </template>
+          <Tooltip v-bind="getTooltipProps(action.tooltip)">
+            <Button v-bind="getButtonProps(action)">
+              <template v-if="action.icon" #icon>
+                <IconifyIcon :icon="action.icon" />
+              </template>
+              {{ action.label }}
+            </Button>
+          </Tooltip>
+        </Popconfirm>
+        <Tooltip v-else v-bind="getTooltipProps(action.tooltip)">
+          <Button
+            v-bind="getButtonProps(action)"
+            @click="handleButtonClick(action)"
+          >
+            <template v-if="action.icon" #icon>
+              <IconifyIcon :icon="action.icon" />
+            </template>
+            {{ action.label }}
+          </Button>
+        </Tooltip>
+      </template>
+    </Space>
+
+    <Dropdown v-if="getDropdownList.length > 0" trigger="hover">
+      <slot name="more">
+        <Button theme="primary" variant="text">
+          <template #icon>
+            {{ $t('page.action.more') }}
+            <IconifyIcon icon="lucide:ellipsis-vertical" />
+          </template>
+        </Button>
+      </slot>
+      <template #overlay>
+        <Menu>
+          <Menu.Item
+            v-for="(action, index) in getDropdownList"
+            :key="index"
+            :disabled="action.disabled"
+            @click="!action.popConfirm && handleMenuClick({ key: index })"
+          >
+            <template v-if="action.popConfirm">
+              <Popconfirm v-bind="getPopConfirmProps(action.popConfirm)">
+                <template v-if="action.popConfirm.icon" #icon>
+                  <IconifyIcon :icon="action.popConfirm.icon" />
+                </template>
+                <div
+                  :class="
+                    action.disabled === true
+                      ? 'cursor-not-allowed text-gray-300'
+                      : ''
+                  "
+                >
+                  <IconifyIcon v-if="action.icon" :icon="action.icon" />
+                  <span :class="action.icon ? 'ml-1' : ''">
+                    {{ action.label }}
+                  </span>
+                </div>
+              </Popconfirm>
+            </template>
+            <template v-else>
+              <div
+                :class="
+                  action.disabled === true
+                    ? 'cursor-not-allowed text-gray-300'
+                    : ''
+                "
+              >
+                <IconifyIcon v-if="action.icon" :icon="action.icon" />
+                {{ action.label }}
+              </div>
+            </template>
+          </Menu.Item>
+        </Menu>
+      </template>
+    </Dropdown>
+  </div>
+</template>
+
+<style lang="scss">
+.table-actions {
+  .ant-btn-link {
+    padding: 4px;
+    margin-left: 0;
+  }
+
+  .ant-btn > .iconify + span,
+  .ant-btn > span + .iconify {
+    margin-inline-start: 4px;
+  }
+
+  .iconify {
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    font-style: normal;
+    line-height: 0;
+    vertical-align: -0.125em;
+    color: inherit;
+    text-align: center;
+    text-transform: none;
+    text-rendering: optimizelegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+.ant-popconfirm {
+  .ant-popconfirm-buttons {
+    .ant-btn {
+      margin-inline-start: 4px !important;
+    }
+  }
+}
+</style>
diff --git a/apps/web-tdesign/src/components/table-action/typing.ts b/apps/web-tdesign/src/components/table-action/typing.ts
new file mode 100644
index 000000000..a54e58468
--- /dev/null
+++ b/apps/web-tdesign/src/components/table-action/typing.ts
@@ -0,0 +1,32 @@
+import type { TdButtonProps, TooltipProps } from 'tdesign-vue-next';
+
+export interface PopConfirm {
+  title: string;
+  okText?: string;
+  cancelText?: string;
+  confirm: () => void;
+  cancel?: () => void;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export interface ActionItem {
+  onClick?: () => void;
+  type?: TdButtonProps['theme'];
+  label?: string;
+  icon?: string;
+  color?: 'error' | 'success' | 'warning';
+  popConfirm?: PopConfirm;
+  disabled?: boolean;
+  divider?: boolean;
+  // 权限编码控制是否显示
+  auth?: string[];
+  // 业务控制是否显示
+  ifShow?: ((action: ActionItem) => boolean) | boolean;
+  tooltip?: string | TooltipProps;
+  loading?: boolean;
+  size?: TdButtonProps['size'];
+  shape?: TdButtonProps['shape'];
+  variant?: TdButtonProps['variant'];
+  danger?: boolean;
+}
diff --git a/apps/web-tdesign/src/components/tinymce/editor.vue b/apps/web-tdesign/src/components/tinymce/editor.vue
new file mode 100644
index 000000000..722073cf7
--- /dev/null
+++ b/apps/web-tdesign/src/components/tinymce/editor.vue
@@ -0,0 +1,344 @@
+<script lang="ts" setup>
+import type { IPropTypes } from '@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes';
+import type { Editor as EditorType } from 'tinymce/tinymce';
+
+import {
+  computed,
+  nextTick,
+  onActivated,
+  onBeforeUnmount,
+  onDeactivated,
+  onMounted,
+  ref,
+  unref,
+  useAttrs,
+  watch,
+} from 'vue';
+
+import { preferences, usePreferences } from '@vben/preferences';
+import { buildShortUUID, isNumber } from '@vben/utils';
+
+import Editor from '@tinymce/tinymce-vue';
+
+import { useUpload } from '#/components/upload/use-upload';
+
+import { bindHandlers } from './helper';
+import ImgUpload from './img-upload.vue';
+import {
+  plugins as defaultPlugins,
+  toolbar as defaultToolbar,
+} from './tinymce';
+
+type InitOptions = IPropTypes['init'];
+
+defineOptions({ name: 'Tinymce', inheritAttrs: false });
+
+const props = withDefaults(defineProps<TinymacProps>(), {
+  height: 400,
+  width: 'auto',
+  options: () => ({}),
+  plugins: defaultPlugins,
+  toolbar: defaultToolbar,
+  showImageUpload: true,
+});
+
+const emit = defineEmits(['change']);
+
+interface TinymacProps {
+  options?: Partial<InitOptions>;
+  toolbar?: string;
+  plugins?: string;
+  height?: number | string;
+  width?: number | string;
+  showImageUpload?: boolean;
+}
+
+/** 外部使用 v-model 绑定值 */
+const modelValue = defineModel('modelValue', { default: '', type: String });
+
+/** TinyMCE 自托管：https://www.jianshu.com/p/59a9c3802443 */
+const tinymceScriptSrc = `${import.meta.env.VITE_BASE}tinymce/tinymce.min.js`;
+
+const attrs = useAttrs();
+const editorRef = ref<EditorType>();
+const fullscreen = ref(false); // 图片上传，是否放到全屏的位置
+const tinymceId = ref<string>(buildShortUUID('tiny-vue'));
+const elRef = ref<HTMLElement | null>(null);
+
+const containerWidth = computed(() => {
+  const width = props.width;
+  if (isNumber(width)) {
+    return `${width}px`;
+  }
+  return width;
+});
+
+/** 主题皮肤 */
+const { isDark } = usePreferences();
+const skinName = computed(() => {
+  return isDark.value ? 'oxide-dark' : 'oxide';
+});
+
+const contentCss = computed(() => {
+  return isDark.value ? 'dark' : 'default';
+});
+
+/** 国际化：需要在 langs 目录下，放好语言包 */
+const { locale } = usePreferences();
+const langName = computed(() => {
+  if (locale.value === 'en-US') {
+    return 'en';
+  }
+  return 'zh_CN';
+});
+
+/** 监听 mode、locale 进行主题、语言切换 */
+const init = ref(true);
+watch(
+  () => [preferences.theme.mode, preferences.app.locale],
+  async () => {
+    if (!editorRef.value) {
+      return;
+    }
+    // 通过 init + v-if 来挂载/卸载组件
+    destroy();
+    init.value = false;
+    await nextTick();
+    init.value = true;
+    // 等待加载完成
+    await nextTick();
+    setEditorMode();
+  },
+);
+
+const initOptions = computed((): InitOptions => {
+  const { height, options, plugins, toolbar } = props;
+  return {
+    height,
+    toolbar,
+    menubar: 'file edit view insert format tools table help',
+    plugins,
+    language: langName.value,
+    branding: false, // 禁止显示，右下角的“使用 TinyMCE 构建”
+    default_link_target: '_blank',
+    link_title: false,
+    object_resizing: true, // 和 vben2.0 不同，它默认是 false
+    auto_focus: undefined, // 和 vben2.0 不同，它默认是 true
+    skin: skinName.value,
+    content_css: contentCss.value,
+    content_style:
+      'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
+    contextmenu: 'link image table',
+    image_advtab: true, // 图片高级选项
+    image_caption: true,
+    importcss_append: true,
+    noneditable_class: 'mceNonEditable',
+    paste_data_images: true, // 允许粘贴图片，默认 base64 格式，images_upload_handler 启用时为上传
+    quickbars_selection_toolbar:
+      'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
+    toolbar_mode: 'sliding',
+    ...options,
+    images_upload_handler: (blobInfo: any) => {
+      return new Promise((resolve, reject) => {
+        const file = blobInfo.blob() as File;
+        const { httpRequest } = useUpload();
+        httpRequest(file)
+          .then((url) => {
+            resolve(url);
+          })
+          .catch((error) => {
+            console.error('tinymce 上传图片失败:', error);
+            reject(error.message);
+          });
+      });
+    },
+    setup: (editor: EditorType) => {
+      editorRef.value = editor;
+      editor.on('init', (e: any) => initSetup(e));
+    },
+  };
+});
+
+/** 监听 options.readonly 是否只读 */
+const disabled = computed(() => props.options.readonly ?? false);
+watch(
+  () => props.options,
+  (options) => {
+    const getDisabled = options && Reflect.get(options, 'readonly');
+    const editor = unref(editorRef);
+    if (editor) {
+      editor.mode.set(getDisabled ? 'readonly' : 'design');
+    }
+  },
+);
+
+onMounted(() => {
+  if (!initOptions.value.inline) {
+    tinymceId.value = buildShortUUID('tiny-vue');
+  }
+  nextTick(() => {
+    setTimeout(() => {
+      initEditor();
+      setEditorMode();
+    }, 30);
+  });
+});
+
+onBeforeUnmount(() => {
+  destroy();
+});
+
+onDeactivated(() => {
+  destroy();
+});
+
+onActivated(() => {
+  setEditorMode();
+});
+
+function setEditorMode() {
+  const editor = unref(editorRef);
+  if (editor) {
+    const mode = props.options.readonly ? 'readonly' : 'design';
+    editor.mode.set(mode);
+  }
+}
+
+function destroy() {
+  const editor = unref(editorRef);
+  editor?.destroy();
+}
+
+function initEditor() {
+  const el = unref(elRef);
+  if (el) {
+    el.style.visibility = '';
+  }
+}
+
+function initSetup(e: any) {
+  const editor = unref(editorRef);
+  if (!editor) {
+    return;
+  }
+  const value = modelValue.value || '';
+
+  editor.setContent(value);
+  bindModelHandlers(editor);
+  bindHandlers(e, attrs, unref(editorRef));
+}
+
+function setValue(editor: Record<string, any>, val?: string, prevVal?: string) {
+  if (
+    editor &&
+    typeof val === 'string' &&
+    val !== prevVal &&
+    val !== editor.getContent({ format: attrs.outputFormat })
+  ) {
+    editor.setContent(val);
+  }
+}
+
+function bindModelHandlers(editor: any) {
+  const modelEvents = attrs.modelEvents ?? null;
+  const normalizedEvents = Array.isArray(modelEvents)
+    ? modelEvents.join(' ')
+    : modelEvents;
+
+  watch(
+    () => modelValue.value,
+    (val, prevVal) => {
+      setValue(editor, val, prevVal);
+    },
+  );
+
+  editor.on(normalizedEvents || 'change keyup undo redo', () => {
+    const content = editor.getContent({ format: attrs.outputFormat });
+    emit('change', content);
+  });
+
+  editor.on('FullscreenStateChanged', (e: any) => {
+    fullscreen.value = e.state;
+  });
+}
+
+function getUploadingImgName(name: string) {
+  return `[uploading:${name}]`;
+}
+
+function handleImageUploading(name: string) {
+  const editor = unref(editorRef);
+  if (!editor) {
+    return;
+  }
+  editor.execCommand('mceInsertContent', false, getUploadingImgName(name));
+  const content = editor?.getContent() ?? '';
+  setValue(editor, content);
+}
+
+function handleDone(name: string, url: string) {
+  const editor = unref(editorRef);
+  if (!editor) {
+    return;
+  }
+  const content = editor?.getContent() ?? '';
+  const val =
+    content?.replace(getUploadingImgName(name), `<img src="${url}"/>`) ?? '';
+  setValue(editor, val);
+}
+
+function handleError(name: string) {
+  const editor = unref(editorRef);
+  if (!editor) {
+    return;
+  }
+  const content = editor?.getContent() ?? '';
+  const val = content?.replace(getUploadingImgName(name), '') ?? '';
+  setValue(editor, val);
+}
+</script>
+
+<template>
+  <div :style="{ width: containerWidth }" class="app-tinymce">
+    <ImgUpload
+      v-if="showImageUpload"
+      v-show="editorRef"
+      :disabled="disabled"
+      :fullscreen="fullscreen"
+      @done="handleDone"
+      @error="handleError"
+      @uploading="handleImageUploading"
+    />
+    <Editor
+      v-if="!initOptions.inline && init"
+      v-model="modelValue"
+      :init="initOptions"
+      :style="{ visibility: 'hidden', zIndex: 3000 }"
+      :tinymce-script-src="tinymceScriptSrc"
+      license-key="gpl"
+    />
+    <slot v-else></slot>
+  </div>
+</template>
+<style lang="scss">
+.tox.tox-silver-sink.tox-tinymce-aux {
+  z-index: 2025; /* 由于 vben modal/drawer 的 zIndex 为 2000，需要调整 z-index（默认 1300）超过它，避免遮挡 */
+}
+</style>
+
+<style lang="scss" scoped>
+.app-tinymce {
+  position: relative;
+  line-height: normal;
+
+  :deep(.textarea) {
+    z-index: -1;
+    visibility: hidden;
+  }
+}
+
+/* 隐藏右上角 tinymce upgrade 按钮 */
+:deep(.tox-promotion) {
+  display: none !important;
+}
+</style>
diff --git a/apps/web-tdesign/src/components/tinymce/helper.ts b/apps/web-tdesign/src/components/tinymce/helper.ts
new file mode 100644
index 000000000..1f98dda46
--- /dev/null
+++ b/apps/web-tdesign/src/components/tinymce/helper.ts
@@ -0,0 +1,85 @@
+const validEvents = new Set([
+  'onActivate',
+  'onAddUndo',
+  'onBeforeAddUndo',
+  'onBeforeExecCommand',
+  'onBeforeGetContent',
+  'onBeforePaste',
+  'onBeforeRenderUI',
+  'onBeforeSetContent',
+  'onBlur',
+  'onChange',
+  'onClearUndos',
+  'onClick',
+  'onContextMenu',
+  'onCopy',
+  'onCut',
+  'onDblclick',
+  'onDeactivate',
+  'onDirty',
+  'onDrag',
+  'onDragDrop',
+  'onDragEnd',
+  'onDragGesture',
+  'onDragOver',
+  'onDrop',
+  'onExecCommand',
+  'onFocus',
+  'onFocusIn',
+  'onFocusOut',
+  'onGetContent',
+  'onHide',
+  'onInit',
+  'onKeyDown',
+  'onKeyPress',
+  'onKeyUp',
+  'onLoadContent',
+  'onMouseDown',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOut',
+  'onMouseOver',
+  'onMouseUp',
+  'onNodeChange',
+  'onObjectResized',
+  'onObjectResizeStart',
+  'onObjectSelected',
+  'onPaste',
+  'onPostProcess',
+  'onPostRender',
+  'onPreProcess',
+  'onProgressState',
+  'onRedo',
+  'onRemove',
+  'onReset',
+  'onSaveContent',
+  'onSelectionChange',
+  'onSetAttrib',
+  'onSetContent',
+  'onShow',
+  'onSubmit',
+  'onUndo',
+  'onVisualAid',
+]);
+
+const isValidKey = (key: string) => validEvents.has(key);
+
+export const bindHandlers = (
+  initEvent: Event,
+  listeners: any,
+  editor: any,
+): void => {
+  Object.keys(listeners)
+    .filter((element) => isValidKey(element))
+    .forEach((key: string) => {
+      const handler = listeners[key];
+      if (typeof handler === 'function') {
+        if (key === 'onInit') {
+          handler(initEvent, editor);
+        } else {
+          editor.on(key.slice(2), (e: any) => handler(e, editor));
+        }
+      }
+    });
+};
diff --git a/apps/web-tdesign/src/components/tinymce/img-upload.vue b/apps/web-tdesign/src/components/tinymce/img-upload.vue
new file mode 100644
index 000000000..ee300d1ae
--- /dev/null
+++ b/apps/web-tdesign/src/components/tinymce/img-upload.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { RequestMethodResponse, UploadFile } from 'tdesign-vue-next';
+
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { Button, Upload } from 'tdesign-vue-next';
+
+import { useUpload } from '#/components/upload/use-upload';
+
+defineOptions({ name: 'TinymceImageUpload' });
+
+const props = defineProps({
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  fullscreen: {
+    // 图片上传，是否放到全屏的位置
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['uploading', 'done', 'error']);
+
+const uploading = ref(false);
+
+const getButtonProps = computed(() => {
+  const { disabled } = props;
+  return {
+    disabled,
+  };
+});
+
+async function customRequest(
+  info: UploadFile | UploadFile[],
+): Promise<RequestMethodResponse> {
+  // 处理单个文件上传
+  const uploadFile = Array.isArray(info) ? info[0] : info;
+
+  if (!uploadFile) {
+    return {
+      status: 'fail',
+      error: 'No file provided',
+      response: {},
+    };
+  }
+
+  // 1. emit 上传中
+  const file = uploadFile.raw as File;
+  const name = file?.name;
+  if (!uploading.value) {
+    emit('uploading', name);
+    uploading.value = true;
+  }
+
+  // 2. 执行上传
+  const { httpRequest } = useUpload();
+  try {
+    const url = await httpRequest(file);
+    emit('done', name, url);
+    uploadFile.onSuccess?.(url);
+    return {
+      status: 'success',
+      response: {
+        url,
+      },
+    };
+  } catch (error) {
+    emit('error', name);
+    uploadFile.onError?.(error);
+    return {
+      status: 'fail',
+      error: error instanceof Error ? error.message : 'Upload failed',
+      response: {},
+    };
+  } finally {
+    uploading.value = false;
+  }
+}
+</script>
+<template>
+  <div :class="[{ fullscreen }]" class="tinymce-image-upload">
+    <Upload
+      :show-upload-list="false"
+      accept=".jpg,.jpeg,.gif,.png,.webp"
+      multiple
+      :request-method="customRequest"
+    >
+      <Button theme="primary" v-bind="{ ...getButtonProps }">
+        {{ $t('ui.upload.imgUpload') }}
+      </Button>
+    </Upload>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tinymce-image-upload {
+  position: absolute;
+  top: 4px;
+  right: 10px;
+  z-index: 20;
+
+  &.fullscreen {
+    position: fixed;
+    z-index: 10000;
+  }
+}
+</style>
diff --git a/apps/web-tdesign/src/components/tinymce/index.ts b/apps/web-tdesign/src/components/tinymce/index.ts
new file mode 100644
index 000000000..c277d781d
--- /dev/null
+++ b/apps/web-tdesign/src/components/tinymce/index.ts
@@ -0,0 +1 @@
+export { default as Tinymce } from './editor.vue';
diff --git a/apps/web-tdesign/src/components/tinymce/tinymce.ts b/apps/web-tdesign/src/components/tinymce/tinymce.ts
new file mode 100644
index 000000000..45a867b61
--- /dev/null
+++ b/apps/web-tdesign/src/components/tinymce/tinymce.ts
@@ -0,0 +1,17 @@
+// Any plugins you want to setting has to be imported
+// Detail plugins list see https://www.tiny.cloud/docs/plugins/
+// Custom builds see https://www.tiny.cloud/download/custom-builds/
+// colorpicker/contextmenu/textcolor plugin is now built in to the core editor, please remove it from your editor configuration
+
+export const plugins =
+  'preview importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help emoticons accordion';
+
+// 和 vben2.0 不同，从 https://www.tiny.cloud/ 拷贝 Vue 部分，然后去掉 importword exportword exportpdf | math 部分，并额外增加最后一行（来自 vben2.0 差异的部分）
+export const toolbar =
+  'undo redo | accordion accordionremove | \\\n' +
+  '          blocks fontfamily fontsize | bold italic underline strikethrough | \\\n' +
+  '          align numlist bullist | link image | table media | \\\n' +
+  '          lineheight outdent indent | forecolor backcolor removeformat | \\\n' +
+  '          charmap emoticons | code fullscreen preview | save print | \\\n' +
+  '          pagebreak anchor codesample | ltr rtl | \\\n' +
+  '          hr searchreplace alignleft aligncenter alignright blockquote subscript superscript';
diff --git a/apps/web-tdesign/src/components/upload/file-upload.vue b/apps/web-tdesign/src/components/upload/file-upload.vue
new file mode 100644
index 000000000..668197711
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/file-upload.vue
@@ -0,0 +1,381 @@
+<script lang="ts" setup>
+import type {
+  RequestMethodResponse,
+  UploadFile,
+  UploadProps,
+} from 'tdesign-vue-next';
+
+import type { FileUploadProps } from './typing';
+
+import type { AxiosProgressEvent } from '#/api/infra/file';
+
+import { computed, ref, toRefs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { isFunction, isNumber, isObject, isString } from '@vben/utils';
+
+import { Button, Upload } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+
+import { checkFileType } from './helper';
+import { UploadResultStatus } from './typing';
+import { useUpload, useUploadType } from './use-upload';
+
+defineOptions({ name: 'FileUpload', inheritAttrs: false });
+
+const props = withDefaults(defineProps<FileUploadProps>(), {
+  value: () => [],
+  modelValue: undefined,
+  directory: undefined,
+  disabled: false,
+  drag: false,
+  helpText: '',
+  maxSize: 2,
+  maxNumber: 1,
+  accept: () => [],
+  multiple: false,
+  api: undefined,
+  resultField: '',
+  showDescription: false,
+});
+const emit = defineEmits([
+  'change',
+  'update:value',
+  'update:modelValue',
+  'delete',
+  'returnText',
+  'preview',
+]);
+const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+const isInnerOperate = ref<boolean>(false);
+const { getStringAccept } = useUploadType({
+  acceptRef: accept,
+  helpTextRef: helpText,
+  maxNumberRef: maxNumber,
+  maxSizeRef: maxSize,
+});
+
+// 计算当前绑定的值，优先使用 modelValue
+const currentValue = computed(() => {
+  return props.modelValue === undefined ? props.value : props.modelValue;
+});
+
+// 判断是否使用 modelValue
+const isUsingModelValue = computed(() => {
+  return props.modelValue !== undefined;
+});
+
+const fileList = ref<UploadProps['files']>([]);
+const isLtMsg = ref<boolean>(true); // 文件大小错误提示
+const isActMsg = ref<boolean>(true); // 文件类型错误提示
+const isFirstRender = ref<boolean>(true); // 是否第一次渲染
+const uploadNumber = ref<number>(0); // 上传文件计数器
+const uploadList = ref<any[]>([]); // 临时上传列表
+
+watch(
+  currentValue,
+  (v) => {
+    if (isInnerOperate.value) {
+      isInnerOperate.value = false;
+      return;
+    }
+    let value: string[] = [];
+    if (v) {
+      if (Array.isArray(v)) {
+        value = v;
+      } else {
+        value.push(v);
+      }
+      fileList.value = value.map((item, i) => {
+        if (item && isString(item)) {
+          return {
+            uid: `${-i}`,
+            name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+            status: UploadResultStatus.SUCCESS,
+            url: item,
+          };
+        } else if (item && isObject(item)) {
+          return item;
+        }
+        return null;
+      }) as UploadProps['files'];
+    }
+    if (!isFirstRender.value) {
+      emit('change', value);
+      isFirstRender.value = false;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+async function handleRemove(file: UploadFile) {
+  if (fileList.value) {
+    const index = fileList.value.findIndex((item) => item.uid === file.uid);
+    index !== -1 && fileList.value.splice(index, 1);
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('update:modelValue', value);
+    emit('change', value);
+    emit('delete', file);
+  }
+}
+
+// 处理文件预览
+function handlePreview(file: UploadFile) {
+  emit('preview', file);
+}
+
+// 处理文件数量超限
+function handleExceed() {
+  message.error($t('ui.upload.maxNumber', [maxNumber.value]));
+}
+
+// 处理上传错误
+function handleUploadError(error: any) {
+  console.error('上传错误:', error);
+  message.error('上传失败');
+  // 上传失败时减少计数器
+  uploadNumber.value = Math.max(0, uploadNumber.value - 1);
+}
+
+async function beforeUpload(file: UploadFile) {
+  const fileContent = await file.text();
+  emit('returnText', fileContent);
+
+  // 检查文件数量限制
+  if (
+    isNumber(fileList.value!.length) &&
+    fileList.value!.length >= props.maxNumber
+  ) {
+    message.error($t('ui.upload.maxNumber', [props.maxNumber]));
+    return Upload.LIST_IGNORE;
+  }
+
+  const { maxSize, accept } = props;
+  const isAct = checkFileType(file.raw!, accept);
+  if (!isAct) {
+    message.error($t('ui.upload.acceptUpload', [accept]));
+    isActMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isActMsg.value = true), 1000);
+    return Upload.LIST_IGNORE;
+  }
+  const isLt = file.size! / 1024 / 1024 > maxSize;
+  if (isLt) {
+    message.error($t('ui.upload.maxSizeMultiple', [maxSize]));
+    isLtMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isLtMsg.value = true), 1000);
+    return Upload.LIST_IGNORE;
+  }
+
+  // 只有在验证通过后才增加计数器
+  uploadNumber.value++;
+  return true;
+}
+
+async function customRequest(
+  info: UploadFile | UploadFile[],
+): Promise<RequestMethodResponse> {
+  // 处理单个文件上传
+  const uploadFile = Array.isArray(info) ? info[0] : info;
+
+  if (!uploadFile) {
+    return {
+      status: 'fail' as const,
+      error: 'No file provided',
+      response: {},
+    };
+  }
+
+  let { api } = props;
+  if (!api || !isFunction(api)) {
+    api = useUpload(props.directory).httpRequest;
+  }
+  try {
+    // 上传文件
+    const progressEvent: AxiosProgressEvent = (e) => {
+      const percent = Math.trunc((e.loaded / e.total!) * 100);
+      uploadFile.onProgress?.({ percent });
+    };
+    const res = await api?.(uploadFile.raw!, progressEvent);
+
+    // 处理上传成功后的逻辑
+    handleUploadSuccess(res!, uploadFile.raw as File);
+
+    uploadFile.onSuccess!(res);
+    message.success($t('ui.upload.uploadSuccess'));
+
+    // 提取 URL，兼容不同的返回格式
+    const fileUrl = (res as any)?.url || (res as any)?.data || res;
+
+    return {
+      status: 'success' as const,
+      response: {
+        url: fileUrl,
+      },
+    };
+  } catch (error: any) {
+    console.error(error);
+    uploadFile.onError!(error);
+    handleUploadError(error);
+    return {
+      status: 'fail' as const,
+      error: error instanceof Error ? error.message : 'Upload failed',
+      response: {},
+    };
+  }
+}
+
+// 处理上传成功
+function handleUploadSuccess(res: any, file: File) {
+  // 删除临时文件
+  const index = fileList.value?.findIndex((item) => item.name === file.name);
+  if (index !== -1) {
+    fileList.value?.splice(index!, 1);
+  }
+
+  // 添加到临时上传列表
+  const fileUrl = res?.url || res?.data || res;
+  uploadList.value.push({
+    name: file.name,
+    url: fileUrl,
+    status: UploadResultStatus.SUCCESS,
+    uid: file.name + Date.now(),
+  });
+
+  // 检查是否所有文件都上传完成
+  if (uploadList.value.length >= uploadNumber.value) {
+    fileList.value?.push(...uploadList.value);
+    uploadList.value = [];
+    uploadNumber.value = 0;
+
+    // 更新值
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('update:modelValue', value);
+    emit('change', value);
+  }
+}
+
+function getValue() {
+  const list = (fileList.value || [])
+    .filter((item) => item?.status === UploadResultStatus.SUCCESS)
+    .map((item: any) => {
+      if (item?.response && props?.resultField) {
+        return item?.response;
+      }
+      return item?.url || item?.response?.url || item?.response;
+    });
+
+  // 单个文件的情况，根据输入参数类型决定返回格式
+  if (props.maxNumber === 1) {
+    const singleValue = list.length > 0 ? list[0] : '';
+    // 如果原始值是字符串或 modelValue 是字符串，返回字符串
+    if (
+      isString(props.value) ||
+      (isUsingModelValue.value && isString(props.modelValue))
+    ) {
+      return singleValue;
+    }
+    return singleValue;
+  }
+
+  // 多文件情况，根据输入参数类型决定返回格式
+  if (isUsingModelValue.value) {
+    return Array.isArray(props.modelValue) ? list : list.join(',');
+  }
+
+  return Array.isArray(props.value) ? list : list.join(',');
+}
+</script>
+
+<template>
+  <div>
+    <Upload
+      v-bind="$attrs"
+      v-model:file-list="fileList"
+      :accept="getStringAccept"
+      :before-upload="beforeUpload"
+      :request-method="customRequest"
+      :disabled="disabled"
+      :max-count="maxNumber"
+      :multiple="multiple"
+      list-type="text"
+      :progress="{ showInfo: true }"
+      :show-upload-list="{
+        showPreviewIcon: true,
+        showRemoveIcon: true,
+        showDownloadIcon: true,
+      }"
+      @remove="handleRemove"
+      @preview="handlePreview"
+      @reject="handleExceed"
+    >
+      <div v-if="drag" class="upload-drag-area">
+        <p class="upload-drag-icon">
+          <IconifyIcon icon="lucide:cloud-upload" />
+        </p>
+        <p class="upload-text">点击或拖拽文件到此区域上传</p>
+        <p class="upload-hint">
+          支持{{ accept.join('/') }}格式文件，不超过{{ maxSize }}MB
+        </p>
+      </div>
+      <div v-else-if="fileList && fileList.length < maxNumber">
+        <Button>
+          <IconifyIcon icon="lucide:cloud-upload" />
+          {{ $t('ui.upload.upload') }}
+        </Button>
+      </div>
+      <div
+        v-if="showDescription && !drag"
+        class="mt-2 flex flex-wrap items-center"
+      >
+        请上传不超过
+        <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
+        的
+        <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
+        格式文件
+      </div>
+    </Upload>
+  </div>
+</template>
+
+<style scoped>
+.upload-drag-area {
+  padding: 20px;
+  text-align: center;
+  background-color: var(--td-bg-color-container, #fafafa);
+  border: 2px dashed var(--td-border-level-2-color, #d9d9d9);
+  border-radius: var(--td-radius-default, 8px);
+  transition: border-color 0.3s;
+}
+
+.upload-drag-area:hover {
+  border-color: var(--td-brand-color, #0052d9);
+}
+
+.upload-drag-icon {
+  margin-bottom: 16px;
+  font-size: 48px;
+  color: var(--td-text-color-placeholder, #d9d9d9);
+}
+
+.upload-text {
+  margin-bottom: 8px;
+  font-size: 16px;
+  color: var(--td-text-color-secondary, #666);
+}
+
+.upload-hint {
+  font-size: 14px;
+  color: var(--td-text-color-placeholder, #999);
+}
+</style>
diff --git a/apps/web-tdesign/src/components/upload/helper.ts b/apps/web-tdesign/src/components/upload/helper.ts
new file mode 100644
index 000000000..27313cea6
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/helper.ts
@@ -0,0 +1,20 @@
+/**
+ * 默认图片类型
+ */
+export const defaultImageAccepts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
+
+export function checkFileType(file: File, accepts: string[]) {
+  if (!accepts || accepts.length === 0) {
+    return true;
+  }
+  const newTypes = accepts.join('|');
+  const reg = new RegExp(`${String.raw`\.(` + newTypes})$`, 'i');
+  return reg.test(file.name);
+}
+
+export function checkImgType(
+  file: File,
+  accepts: string[] = defaultImageAccepts,
+) {
+  return checkFileType(file, accepts);
+}
diff --git a/apps/web-tdesign/src/components/upload/image-upload.vue b/apps/web-tdesign/src/components/upload/image-upload.vue
new file mode 100644
index 000000000..14e3776c4
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/image-upload.vue
@@ -0,0 +1,362 @@
+<script lang="ts" setup>
+import type { UploadFile, UploadProps } from 'tdesign-vue-next';
+
+import type { FileUploadProps } from './typing';
+
+import type { AxiosProgressEvent } from '#/api/infra/file';
+
+import { computed, ref, toRefs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { isFunction, isNumber, isObject, isString } from '@vben/utils';
+
+import { Dialog, Upload } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+
+import { checkImgType, defaultImageAccepts } from './helper';
+import { UploadResultStatus } from './typing';
+import { useUpload, useUploadType } from './use-upload';
+
+defineOptions({ name: 'ImageUpload', inheritAttrs: false });
+
+const props = withDefaults(defineProps<FileUploadProps>(), {
+  value: () => [],
+  modelValue: undefined,
+  directory: undefined,
+  disabled: false,
+  listType: 'picture-card',
+  helpText: '',
+  maxSize: 2,
+  maxNumber: 1,
+  accept: () => defaultImageAccepts,
+  multiple: false,
+  api: undefined,
+  resultField: '',
+  showDescription: true,
+});
+const emit = defineEmits([
+  'change',
+  'update:value',
+  'update:modelValue',
+  'delete',
+]);
+const { accept, helpText, maxNumber, maxSize } = toRefs(props);
+const isInnerOperate = ref<boolean>(false);
+const { getStringAccept } = useUploadType({
+  acceptRef: accept,
+  helpTextRef: helpText,
+  maxNumberRef: maxNumber,
+  maxSizeRef: maxSize,
+});
+
+// 计算当前绑定的值，优先使用 modelValue
+const currentValue = computed(() => {
+  return props.modelValue === undefined ? props.value : props.modelValue;
+});
+
+// 判断是否使用 modelValue
+const isUsingModelValue = computed(() => {
+  return props.modelValue !== undefined;
+});
+const previewOpen = ref<boolean>(false); // 是否展示预览
+const previewImage = ref<string>(''); // 预览图片
+const previewTitle = ref<string>(''); // 预览标题
+
+const fileList = ref<UploadProps['files']>([]);
+const isLtMsg = ref<boolean>(true); // 文件大小错误提示
+const isActMsg = ref<boolean>(true); // 文件类型错误提示
+const isFirstRender = ref<boolean>(true); // 是否第一次渲染
+const uploadNumber = ref<number>(0); // 上传文件计数器
+const uploadList = ref<any[]>([]); // 临时上传列表
+
+watch(
+  currentValue,
+  async (v) => {
+    if (isInnerOperate.value) {
+      isInnerOperate.value = false;
+      return;
+    }
+    let value: string | string[] = [];
+    if (v) {
+      if (Array.isArray(v)) {
+        value = v;
+      } else {
+        value.push(v);
+      }
+      fileList.value = value.map((item, i) => {
+        if (item && isString(item)) {
+          return {
+            uid: `${-i}`,
+            name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
+            status: UploadResultStatus.SUCCESS,
+            url: item,
+          };
+        } else if (item && isObject(item)) {
+          return item;
+        }
+        return null;
+      }) as UploadProps['files'];
+    }
+    if (!isFirstRender.value) {
+      emit('change', value);
+      isFirstRender.value = false;
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+function getBase64<T extends ArrayBuffer | null | string>(file: File) {
+  return new Promise<T>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.addEventListener('load', () => {
+      resolve(reader.result as T);
+    });
+    reader.addEventListener('error', (error) => reject(error));
+  });
+}
+
+async function handlePreview(file: UploadFile) {
+  if (!file.url && !file.preview) {
+    // TDesign 使用 raw 而不是 originFileObj
+    file.preview = await getBase64<string>(file.raw!);
+  }
+  previewImage.value = file.url || file.preview || '';
+  previewOpen.value = true;
+  previewTitle.value =
+    file.name ||
+    previewImage.value.slice(
+      Math.max(0, previewImage.value.lastIndexOf('/') + 1),
+    );
+}
+
+async function handleRemove(file: UploadFile) {
+  if (fileList.value) {
+    const index = fileList.value.findIndex((item) => item.uid === file.uid);
+    index !== -1 && fileList.value.splice(index, 1);
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('update:modelValue', value);
+    emit('change', value);
+    emit('delete', file);
+  }
+}
+
+function handleCancel() {
+  previewOpen.value = false;
+  previewTitle.value = '';
+}
+
+async function beforeUpload(file: UploadFile) {
+  // 检查文件数量限制
+  if (
+    isNumber(fileList.value!.length) &&
+    fileList.value!.length >= props.maxNumber
+  ) {
+    message.error($t('ui.upload.maxNumber', [props.maxNumber]));
+    return Upload.LIST_IGNORE;
+  }
+
+  const { maxSize, accept } = props;
+  const isAct = checkImgType(file.raw!, accept);
+  if (!isAct) {
+    message.error($t('ui.upload.acceptUpload', [accept]));
+    isActMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isActMsg.value = true), 1000);
+    return Upload.LIST_IGNORE;
+  }
+  const isLt = file.size! / 1024 / 1024 > maxSize;
+  if (isLt) {
+    message.error($t('ui.upload.maxSizeMultiple', [maxSize]));
+    isLtMsg.value = false;
+    // 防止弹出多个错误提示
+    setTimeout(() => (isLtMsg.value = true), 1000);
+    return Upload.LIST_IGNORE;
+  }
+
+  // 只有在验证通过后才增加计数器
+  uploadNumber.value++;
+  return true;
+}
+
+async function customRequest(info: UploadFile | UploadFile[]) {
+  // 处理单个文件上传
+  const uploadFile = Array.isArray(info) ? info[0] : info;
+
+  if (!uploadFile) {
+    return {
+      status: 'fail' as const,
+      error: 'No file provided',
+      response: {},
+    };
+  }
+
+  let { api } = props;
+  if (!api || !isFunction(api)) {
+    api = useUpload(props.directory).httpRequest;
+  }
+  try {
+    // 上传文件
+    const progressEvent: AxiosProgressEvent = (e) => {
+      const percent = Math.trunc((e.loaded / e.total!) * 100);
+      uploadFile.onProgress!({ percent });
+    };
+    // TDesign 使用 raw 而不是 file
+    const res = await api?.(uploadFile.raw as File, progressEvent);
+
+    // 处理上传成功后的逻辑
+    handleUploadSuccess(res, uploadFile.raw as File);
+
+    uploadFile.onSuccess!(res);
+    message.success($t('ui.upload.uploadSuccess'));
+
+    // 提取 URL，兼容不同的返回格式
+    const fileUrl = (res as any)?.url || (res as any)?.data || res;
+
+    return {
+      status: 'success' as const,
+      response: {
+        url: fileUrl,
+      },
+    };
+  } catch (error: any) {
+    console.error(error);
+    uploadFile.onError!(error);
+    handleUploadError(error);
+    return {
+      status: 'fail' as const,
+      error: error instanceof Error ? error.message : 'Upload failed',
+      response: {},
+    };
+  }
+}
+
+// 处理上传成功
+function handleUploadSuccess(res: any, file: File) {
+  // 删除临时文件
+  const index = fileList.value?.findIndex((item) => item.name === file.name);
+  if (index !== -1) {
+    fileList.value?.splice(index!, 1);
+  }
+
+  // 添加到临时上传列表
+  const fileUrl = res?.url || res?.data || res;
+  uploadList.value.push({
+    name: file.name,
+    url: fileUrl,
+    status: UploadResultStatus.SUCCESS,
+    uid: file.name + Date.now(),
+  });
+
+  // 检查是否所有文件都上传完成
+  if (uploadList.value.length >= uploadNumber.value) {
+    fileList.value?.push(...uploadList.value);
+    uploadList.value = [];
+    uploadNumber.value = 0;
+
+    // 更新值
+    const value = getValue();
+    isInnerOperate.value = true;
+    emit('update:value', value);
+    emit('update:modelValue', value);
+    emit('change', value);
+  }
+}
+
+// 处理上传错误
+function handleUploadError(error: any) {
+  console.error('上传错误:', error);
+  // 上传失败时减少计数器
+  uploadNumber.value = Math.max(0, uploadNumber.value - 1);
+}
+
+function getValue() {
+  const list = (fileList.value || [])
+    .filter((item) => item?.status === UploadResultStatus.SUCCESS)
+    .map((item: any) => {
+      if (item?.response && props?.resultField) {
+        return item?.response;
+      }
+      return item?.url || item?.response?.url || item?.response;
+    });
+
+  // 单个文件的情况，根据输入参数类型决定返回格式
+  if (props.maxNumber === 1) {
+    const singleValue = list.length > 0 ? list[0] : '';
+    // 如果原始值是字符串或 modelValue 是字符串，返回字符串
+    if (
+      isString(props.value) ||
+      (isUsingModelValue.value && isString(props.modelValue))
+    ) {
+      return singleValue;
+    }
+    return singleValue;
+  }
+
+  // 多文件情况，根据输入参数类型决定返回格式
+  if (isUsingModelValue.value) {
+    return Array.isArray(props.modelValue) ? list : list.join(',');
+  }
+
+  return Array.isArray(props.value) ? list : list.join(',');
+}
+</script>
+
+<template>
+  <div>
+    <Upload
+      v-bind="$attrs"
+      v-model:file-list="fileList"
+      :accept="getStringAccept"
+      :before-upload="beforeUpload"
+      :request-method="customRequest"
+      :disabled="disabled"
+      :list-type="listType"
+      :max-count="maxNumber"
+      :multiple="multiple"
+      :progress="{ showInfo: true }"
+      @preview="handlePreview"
+      @remove="handleRemove"
+    >
+      <div
+        v-if="fileList && fileList.length < maxNumber"
+        class="flex flex-col items-center justify-center"
+      >
+        <IconifyIcon icon="lucide:cloud-upload" />
+        <div class="mt-2">{{ $t('ui.upload.imgUpload') }}</div>
+      </div>
+    </Upload>
+    <div
+      v-if="showDescription"
+      class="mt-2 flex flex-wrap items-center text-sm"
+    >
+      请上传不超过
+      <div class="text-primary mx-1 font-bold">{{ maxSize }}MB</div>
+      的
+      <div class="text-primary mx-1 font-bold">{{ accept.join('/') }}</div>
+      格式文件
+    </div>
+    <Dialog
+      :footer="false"
+      :visible="previewOpen"
+      :header="previewTitle"
+      @close="handleCancel"
+    >
+      <img :src="previewImage" alt="" class="w-full" />
+    </Dialog>
+  </div>
+</template>
+
+<style scoped>
+/* TDesign 上传组件样式 */
+:deep(.t-upload__card-item) {
+  @apply flex items-center justify-center;
+}
+</style>
diff --git a/apps/web-tdesign/src/components/upload/index.ts b/apps/web-tdesign/src/components/upload/index.ts
new file mode 100644
index 000000000..14e57fede
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/index.ts
@@ -0,0 +1,3 @@
+export { default as FileUpload } from './file-upload.vue';
+export { default as ImageUpload } from './image-upload.vue';
+export { default as InputUpload } from './input-upload.vue';
diff --git a/apps/web-tdesign/src/components/upload/input-upload.vue b/apps/web-tdesign/src/components/upload/input-upload.vue
new file mode 100644
index 000000000..353e3c5d4
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/input-upload.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { InputProps, TextareaProps } from 'tdesign-vue-next';
+
+import type { FileUploadProps } from './typing';
+
+import { computed } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { Col, Input, Row, Textarea } from 'tdesign-vue-next';
+
+import FileUpload from './file-upload.vue';
+
+const props = defineProps<{
+  defaultValue?: number | string;
+  fileUploadProps?: FileUploadProps;
+  inputProps?: InputProps;
+  inputType?: 'input' | 'textarea';
+  modelValue?: number | string;
+  textareaProps?: TextareaProps;
+}>();
+
+const emits = defineEmits<{
+  (e: 'change', payload: number | string): void;
+  (e: 'update:value', payload: number | string): void;
+  (e: 'update:modelValue', payload: number | string): void;
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: true,
+});
+
+function handleReturnText(text: string) {
+  modelValue.value = text;
+  emits('change', modelValue.value);
+  emits('update:value', modelValue.value);
+  emits('update:modelValue', modelValue.value);
+}
+
+const inputProps = computed(() => {
+  return {
+    ...props.inputProps,
+    value: modelValue.value,
+  };
+});
+
+const textareaProps = computed(() => {
+  return {
+    ...props.textareaProps,
+    value: modelValue.value,
+  };
+});
+
+const fileUploadProps = computed(() => {
+  return {
+    ...props.fileUploadProps,
+  };
+});
+</script>
+<template>
+  <Row>
+    <Col :span="18">
+      <Input readonly v-if="inputType === 'input'" v-bind="inputProps" />
+      <Textarea readonly v-else :row="4" v-bind="textareaProps" />
+    </Col>
+    <Col :span="6">
+      <FileUpload
+        class="ml-4"
+        v-bind="fileUploadProps"
+        @return-text="handleReturnText"
+      />
+    </Col>
+  </Row>
+</template>
diff --git a/apps/web-tdesign/src/components/upload/typing.ts b/apps/web-tdesign/src/components/upload/typing.ts
new file mode 100644
index 000000000..2488c4080
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/typing.ts
@@ -0,0 +1,39 @@
+import type { AxiosResponse } from '@vben/request';
+
+import type { AxiosProgressEvent } from '#/api/infra/file';
+
+export enum UploadResultStatus {
+  ERROR = 'error',
+  PROGRESS = 'progress',
+  SUCCESS = 'success',
+  WAITING = 'waiting',
+}
+
+export type UploadListType = 'picture' | 'picture-card' | 'text';
+
+export interface FileUploadProps {
+  // 根据后缀，或者其他
+  accept?: string[];
+  api?: (
+    file: File,
+    onUploadProgress?: AxiosProgressEvent,
+  ) => Promise<AxiosResponse<any>>;
+  // 上传的目录
+  directory?: string;
+  disabled?: boolean;
+  drag?: boolean; // 是否支持拖拽上传
+  helpText?: string;
+  listType?: UploadListType;
+  // 最大数量的文件，Infinity不限制
+  maxNumber?: number;
+  modelValue?: string | string[]; // v-model 支持
+  // 文件最大多少MB
+  maxSize?: number;
+  // 是否支持多选
+  multiple?: boolean;
+  // support xxx.xxx.xx
+  resultField?: string;
+  // 是否显示下面的描述
+  showDescription?: boolean;
+  value?: string | string[];
+}
diff --git a/apps/web-tdesign/src/components/upload/use-upload.ts b/apps/web-tdesign/src/components/upload/use-upload.ts
new file mode 100644
index 000000000..2f46f9e98
--- /dev/null
+++ b/apps/web-tdesign/src/components/upload/use-upload.ts
@@ -0,0 +1,168 @@
+import type { Ref } from 'vue';
+
+import type { AxiosProgressEvent, InfraFileApi } from '#/api/infra/file';
+
+import { computed, unref } from 'vue';
+
+import { useAppConfig } from '@vben/hooks';
+import { $t } from '@vben/locales';
+
+import { createFile, getFilePresignedUrl, uploadFile } from '#/api/infra/file';
+import { baseRequestClient } from '#/api/request';
+
+const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
+
+/**
+ * 上传类型
+ */
+enum UPLOAD_TYPE {
+  // 客户端直接上传（只支持S3服务）
+  CLIENT = 'client',
+  // 客户端发送到后端上传
+  SERVER = 'server',
+}
+
+export function useUploadType({
+  acceptRef,
+  helpTextRef,
+  maxNumberRef,
+  maxSizeRef,
+}: {
+  acceptRef: Ref<string[]>;
+  helpTextRef: Ref<string>;
+  maxNumberRef: Ref<number>;
+  maxSizeRef: Ref<number>;
+}) {
+  // 文件类型限制
+  const getAccept = computed(() => {
+    const accept = unref(acceptRef);
+    if (accept && accept.length > 0) {
+      return accept;
+    }
+    return [];
+  });
+  const getStringAccept = computed(() => {
+    return unref(getAccept)
+      .map((item) => {
+        return item.indexOf('/') > 0 || item.startsWith('.')
+          ? item
+          : `.${item}`;
+      })
+      .join(',');
+  });
+
+  // 支持jpg、jpeg、png格式，不超过2M，最多可选择10张图片，。
+  const getHelpText = computed(() => {
+    const helpText = unref(helpTextRef);
+    if (helpText) {
+      return helpText;
+    }
+    const helpTexts: string[] = [];
+
+    const accept = unref(acceptRef);
+    if (accept.length > 0) {
+      helpTexts.push($t('ui.upload.accept', [accept.join(',')]));
+    }
+
+    const maxSize = unref(maxSizeRef);
+    if (maxSize) {
+      helpTexts.push($t('ui.upload.maxSize', [maxSize]));
+    }
+
+    const maxNumber = unref(maxNumberRef);
+    if (maxNumber && maxNumber !== Infinity) {
+      helpTexts.push($t('ui.upload.maxNumber', [maxNumber]));
+    }
+    return helpTexts.join('，');
+  });
+  return { getAccept, getStringAccept, getHelpText };
+}
+
+// TODO @芋艿：目前保持和 admin-vue3 一致，后续可能重构
+export function useUpload(directory?: string) {
+  // 后端上传地址
+  const uploadUrl = getUploadUrl();
+  // 是否使用前端直连上传
+  const isClientUpload =
+    UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE;
+  // 重写ElUpload上传方法
+  async function httpRequest(
+    file: File,
+    onUploadProgress?: AxiosProgressEvent,
+  ) {
+    // 模式一：前端上传
+    if (isClientUpload) {
+      // 1.1 生成文件名称
+      const fileName = await generateFileName(file);
+      // 1.2 获取文件预签名地址
+      const presignedInfo = await getFilePresignedUrl(fileName, directory);
+      // 1.3 上传文件
+      return baseRequestClient
+        .put(presignedInfo.uploadUrl, file, {
+          headers: {
+            'Content-Type': file.type,
+          },
+        })
+        .then(() => {
+          // 1.4. 记录文件信息到后端（异步）
+          createFile0(presignedInfo, file);
+          // 通知成功，数据格式保持与后端上传的返回结果一致
+          return { url: presignedInfo.url };
+        });
+    } else {
+      // 模式二：后端上传
+      return uploadFile({ file, directory }, onUploadProgress);
+    }
+  }
+
+  return {
+    uploadUrl,
+    httpRequest,
+  };
+}
+
+/**
+ * 获得上传 URL
+ */
+export function getUploadUrl(): string {
+  return `${apiURL}/infra/file/upload`;
+}
+
+/**
+ * 创建文件信息
+ *
+ * @param vo 文件预签名信息
+ * @param file 文件
+ */
+function createFile0(
+  vo: InfraFileApi.FilePresignedUrlRespVO,
+  file: File,
+): InfraFileApi.File {
+  const fileVO = {
+    configId: vo.configId,
+    url: vo.url,
+    path: vo.path,
+    name: file.name,
+    type: file.type,
+    size: file.size,
+  };
+  createFile(fileVO);
+  return fileVO;
+}
+
+/**
+ * 生成文件名称（使用算法SHA256）
+ *
+ * @param file 要上传的文件
+ */
+async function generateFileName(file: File) {
+  // // 读取文件内容
+  // const data = await file.arrayBuffer();
+  // const wordArray = CryptoJS.lib.WordArray.create(data);
+  // // 计算SHA256
+  // const sha256 = CryptoJS.SHA256(wordArray).toString();
+  // // 拼接后缀
+  // const ext = file.name.slice(Math.max(0, file.name.lastIndexOf('.')));
+  // return `${sha256}${ext}`;
+  return file.name;
+}
diff --git a/apps/web-tdesign/src/locales/langs/en-US/demos.json b/apps/web-tdesign/src/locales/langs/en-US/demos.json
deleted file mode 100644
index e7bcea129..000000000
--- a/apps/web-tdesign/src/locales/langs/en-US/demos.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "title": "Demos",
-  "tdesign": "TDesign Vue",
-  "vben": {
-    "title": "Project",
-    "about": "About",
-    "document": "Document",
-    "antdv": "Ant Design Vue Version",
-    "naive-ui": "Naive UI Version",
-    "element-plus": "Element Plus Version"
-  }
-}
diff --git a/apps/web-tdesign/src/locales/langs/en-US/page.json b/apps/web-tdesign/src/locales/langs/en-US/page.json
index 618a258c0..00a8c90b2 100644
--- a/apps/web-tdesign/src/locales/langs/en-US/page.json
+++ b/apps/web-tdesign/src/locales/langs/en-US/page.json
@@ -10,5 +10,24 @@
     "title": "Dashboard",
     "analytics": "Analytics",
     "workspace": "Workspace"
+  },
+  "action": {
+    "action": "Action",
+    "add": "Add",
+    "edit": "Edit",
+    "delete": "Delete",
+    "save": "Save",
+    "import": "Import",
+    "export": "Export",
+    "submit": "Submit",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "reset": "Reset",
+    "search": "Search",
+    "more": "More"
+  },
+  "tenant": {
+    "placeholder": "Please select tenant",
+    "success": "Switch tenant success"
   }
 }
diff --git a/apps/web-tdesign/src/locales/langs/en-US/utils.json b/apps/web-tdesign/src/locales/langs/en-US/utils.json
new file mode 100644
index 000000000..b9206eff9
--- /dev/null
+++ b/apps/web-tdesign/src/locales/langs/en-US/utils.json
@@ -0,0 +1,14 @@
+{
+  "rangePicker": {
+    "today": "Today",
+    "last7Days": "Last 7 Days",
+    "last30Days": "Last 30 Days",
+    "yesterday": "Yesterday",
+    "thisWeek": "This Week",
+    "thisMonth": "This Month",
+    "lastWeek": "Last Week",
+    "lastMonth": "Last Month",
+    "beginTime": "Begin Time",
+    "endTime": "End Time"
+  }
+}
diff --git a/apps/web-tdesign/src/locales/langs/zh-CN/demos.json b/apps/web-tdesign/src/locales/langs/zh-CN/demos.json
deleted file mode 100644
index 843a1f30d..000000000
--- a/apps/web-tdesign/src/locales/langs/zh-CN/demos.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "title": "演示",
-  "tdesign": "TDesign Vue",
-  "vben": {
-    "title": "项目",
-    "about": "关于",
-    "document": "文档",
-    "antdv": "Ant Design Vue 版本",
-    "naive-ui": "Naive UI 版本",
-    "element-plus": "Element Plus 版本"
-  }
-}
diff --git a/apps/web-tdesign/src/locales/langs/zh-CN/page.json b/apps/web-tdesign/src/locales/langs/zh-CN/page.json
index 4cb67081c..eefc4924b 100644
--- a/apps/web-tdesign/src/locales/langs/zh-CN/page.json
+++ b/apps/web-tdesign/src/locales/langs/zh-CN/page.json
@@ -10,5 +10,24 @@
     "title": "概览",
     "analytics": "分析页",
     "workspace": "工作台"
+  },
+  "action": {
+    "action": "操作",
+    "add": "新增",
+    "edit": "编辑",
+    "delete": "删除",
+    "save": "保存",
+    "import": "导入",
+    "export": "导出",
+    "submit": "提交",
+    "cancel": "取消",
+    "confirm": "确认",
+    "reset": "重置",
+    "search": "搜索",
+    "more": "更多"
+  },
+  "tenant": {
+    "placeholder": "请选择租户",
+    "success": "切换租户成功"
   }
 }
diff --git a/apps/web-tdesign/src/locales/langs/zh-CN/utils.json b/apps/web-tdesign/src/locales/langs/zh-CN/utils.json
new file mode 100644
index 000000000..d26f1f2cf
--- /dev/null
+++ b/apps/web-tdesign/src/locales/langs/zh-CN/utils.json
@@ -0,0 +1,14 @@
+{
+  "rangePicker": {
+    "today": "今天",
+    "last7Days": "最近 7 天",
+    "last30Days": "最近 30 天",
+    "yesterday": "昨天",
+    "thisWeek": "本周",
+    "thisMonth": "本月",
+    "lastWeek": "上周",
+    "lastMonth": "上月",
+    "beginTime": "开始时间",
+    "endTime": "结束时间"
+  }
+}
diff --git a/apps/web-tdesign/src/preferences.ts b/apps/web-tdesign/src/preferences.ts
index b2e9ace43..73eb135cb 100644
--- a/apps/web-tdesign/src/preferences.ts
+++ b/apps/web-tdesign/src/preferences.ts
@@ -8,6 +8,18 @@ import { defineOverridesPreferences } from '@vben/preferences';
 export const overridesPreferences = defineOverridesPreferences({
   // overrides
   app: {
+    /** 后端路由模式 */
+    accessMode: 'backend',
     name: import.meta.env.VITE_APP_TITLE,
+    enableRefreshToken: true,
+  },
+  footer: {
+    /** 默认关闭 footer 页脚，因为有一定遮挡 */
+    enable: false,
+    fixed: false,
+  },
+  copyright: {
+    companyName: import.meta.env.VITE_APP_TITLE,
+    companySiteLink: 'https://gitee.com/yudaocode/yudao-ui-admin-vben',
   },
 });
diff --git a/apps/web-tdesign/src/router/access.ts b/apps/web-tdesign/src/router/access.ts
index 08cb4b0bd..c4b161a5d 100644
--- a/apps/web-tdesign/src/router/access.ts
+++ b/apps/web-tdesign/src/router/access.ts
@@ -1,20 +1,21 @@
 import type {
+  AppRouteRecordRaw,
   ComponentRecordType,
   GenerateMenuAndRoutesOptions,
 } from '@vben/types';
 
 import { generateAccessible } from '@vben/access';
 import { preferences } from '@vben/preferences';
+import { useAccessStore } from '@vben/stores';
+import { convertServerMenuToRouteRecordStringComponent } from '@vben/utils';
 
-import { message } from '#/adapter/tdesign';
-import { getAllMenusApi } from '#/api';
 import { BasicLayout, IFrameView } from '#/layouts';
-import { $t } from '#/locales';
 
 const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
 
 async function generateAccess(options: GenerateMenuAndRoutesOptions) {
   const pageMap: ComponentRecordType = import.meta.glob('../views/**/*.vue');
+  const accessStore = useAccessStore();
 
   const layoutMap: ComponentRecordType = {
     BasicLayout,
@@ -24,11 +25,10 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) {
   return await generateAccessible(preferences.app.accessMode, {
     ...options,
     fetchMenuListAsync: async () => {
-      message.loading({
-        content: `${$t('common.loadingMenu')}...`,
-        duration: 1500,
-      });
-      return await getAllMenusApi();
+      // 由于 yudao 通过 accessStore 读取，所以不在进行 message.loading 提示
+      // 补充说明：accessStore.accessMenus 一开始是 AppRouteRecordRaw 类型（后端加载），后面被赋值成 MenuRecordRaw 类型（前端转换）
+      const accessMenus = accessStore.accessMenus as AppRouteRecordRaw[];
+      return convertServerMenuToRouteRecordStringComponent(accessMenus);
     },
     // 可以指定没有权限跳转403页面
     forbiddenComponent,
diff --git a/apps/web-tdesign/src/router/guard.ts b/apps/web-tdesign/src/router/guard.ts
index a1ad6d88c..593867acf 100644
--- a/apps/web-tdesign/src/router/guard.ts
+++ b/apps/web-tdesign/src/router/guard.ts
@@ -1,10 +1,13 @@
 import type { Router } from 'vue-router';
 
 import { LOGIN_PATH } from '@vben/constants';
+import { $t } from '@vben/locales';
 import { preferences } from '@vben/preferences';
-import { useAccessStore, useUserStore } from '@vben/stores';
+import { useAccessStore, useDictStore, useUserStore } from '@vben/stores';
 import { startProgress, stopProgress } from '@vben/utils';
 
+import { message } from '#/adapter/tdesign';
+import { getSimpleDictDataList } from '#/api/system/dict/data';
 import { accessRoutes, coreRouteNames } from '#/router/routes';
 import { useAuthStore } from '#/store';
 
@@ -49,6 +52,7 @@ function setupAccessGuard(router: Router) {
     const accessStore = useAccessStore();
     const userStore = useUserStore();
     const authStore = useAuthStore();
+    const dictStore = useDictStore();
 
     // 基本路由，这些路由不需要进入权限拦截
     if (coreRouteNames.includes(to.name as string)) {
@@ -90,10 +94,27 @@ function setupAccessGuard(router: Router) {
       return true;
     }
 
+    // 加载字典数据（不阻塞加载）
+    dictStore.setDictCacheByApi(getSimpleDictDataList);
+
     // 生成路由表
     // 当前登录用户拥有的角色标识列表
-    const userInfo = userStore.userInfo || (await authStore.fetchUserInfo());
-    const userRoles = userInfo.roles ?? [];
+    let userInfo = userStore.userInfo;
+    if (!userInfo) {
+      // add by 芋艿：由于 yudao 是 fetchUserInfo 统一加载用户 + 权限信息，所以将 fetchMenuListAsync
+      const loading = message.loading({
+        content: `${$t('common.loadingMenu')}...`,
+      });
+      try {
+        const authPermissionInfo = await authStore.fetchUserInfo();
+        if (authPermissionInfo) {
+          userInfo = authPermissionInfo.user;
+        }
+      } finally {
+        message.close(loading);
+      }
+    }
+    const userRoles = userStore.userRoles ?? [];
 
     // 生成菜单和路由
     const { accessibleMenus, accessibleRoutes } = await generateAccess({
@@ -107,9 +128,10 @@ function setupAccessGuard(router: Router) {
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
     accessStore.setIsAccessChecked(true);
+    userStore.setUserRoles(userRoles);
     const redirectPath = (from.query.redirect ??
       (to.path === preferences.app.defaultHomePath
-        ? userInfo.homePath || preferences.app.defaultHomePath
+        ? userInfo?.homePath || preferences.app.defaultHomePath
         : to.fullPath)) as string;
 
     return {
diff --git a/apps/web-tdesign/src/router/index.ts b/apps/web-tdesign/src/router/index.ts
index 484023034..5acec55ea 100644
--- a/apps/web-tdesign/src/router/index.ts
+++ b/apps/web-tdesign/src/router/index.ts
@@ -8,6 +8,7 @@ import { resetStaticRoutes } from '@vben/utils';
 
 import { createRouterGuard } from './guard';
 import { routes } from './routes';
+import { setupBaiduTongJi } from './tongji';
 
 /**
  *  @zh_CN 创建vue-router实例
@@ -33,5 +34,7 @@ const resetRoutes = () => resetStaticRoutes(router, routes);
 
 // 创建路由守卫
 createRouterGuard(router);
+// 设置百度统计
+setupBaiduTongJi(router);
 
 export { resetRoutes, router };
diff --git a/apps/web-tdesign/src/router/routes/core.ts b/apps/web-tdesign/src/router/routes/core.ts
index 949b0b65a..22fd0017c 100644
--- a/apps/web-tdesign/src/router/routes/core.ts
+++ b/apps/web-tdesign/src/router/routes/core.ts
@@ -90,6 +90,23 @@ const coreRoutes: RouteRecordRaw[] = [
           title: $t('page.auth.register'),
         },
       },
+      {
+        name: 'SocialLogin',
+        path: 'social-login',
+        component: () =>
+          import('#/views/_core/authentication/social-login.vue'),
+        meta: {
+          title: $t('page.auth.login'),
+        },
+      },
+      {
+        name: 'SSOLogin',
+        path: 'sso-login',
+        component: () => import('#/views/_core/authentication/sso-login.vue'),
+        meta: {
+          title: $t('page.auth.login'),
+        },
+      },
     ],
   },
 ];
diff --git a/apps/web-tdesign/src/router/routes/index.ts b/apps/web-tdesign/src/router/routes/index.ts
index e6fb14402..738f9d3d9 100644
--- a/apps/web-tdesign/src/router/routes/index.ts
+++ b/apps/web-tdesign/src/router/routes/index.ts
@@ -34,4 +34,14 @@ const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name);
 
 /** 有权限校验的路由列表，包含动态路由和静态路由 */
 const accessRoutes = [...dynamicRoutes, ...staticRoutes];
-export { accessRoutes, coreRouteNames, routes };
+
+// add by 芋艿：from https://github.com/vbenjs/vue-vben-admin/blob/main/playground/src/router/routes/index.ts#L38-L45
+const componentKeys: string[] = Object.keys(
+  import.meta.glob('../../views/**/*.vue'),
+)
+  .filter((item) => !item.includes('/modules/'))
+  .map((v) => {
+    const path = v.replace('../../views/', '/');
+    return path.endsWith('.vue') ? path.slice(0, -4) : path;
+  });
+export { accessRoutes, componentKeys, coreRouteNames, routes };
diff --git a/apps/web-tdesign/src/router/routes/modules/demos.ts b/apps/web-tdesign/src/router/routes/modules/demos.ts
deleted file mode 100644
index 9ce8ec992..000000000
--- a/apps/web-tdesign/src/router/routes/modules/demos.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-import { $t } from '#/locales';
-
-const routes: RouteRecordRaw[] = [
-  {
-    meta: {
-      icon: 'ic:baseline-view-in-ar',
-      keepAlive: true,
-      order: 1000,
-      title: $t('demos.title'),
-    },
-    name: 'Demos',
-    path: '/demos',
-    children: [
-      {
-        meta: {
-          title: $t('demos.tdesign'),
-        },
-        name: 'TDesignDemos',
-        path: '/demos/tdesign',
-        component: () => import('#/views/demos/tdesign/index.vue'),
-      },
-    ],
-  },
-];
-
-export default routes;
diff --git a/apps/web-tdesign/src/router/routes/modules/infra.ts b/apps/web-tdesign/src/router/routes/modules/infra.ts
new file mode 100644
index 000000000..c99b51bea
--- /dev/null
+++ b/apps/web-tdesign/src/router/routes/modules/infra.ts
@@ -0,0 +1,30 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/infra/job/log',
+    component: () => import('#/views/infra/job/logger/index.vue'),
+    name: 'InfraJobLog',
+    meta: {
+      title: '调度日志',
+      icon: 'ant-design:history-outlined',
+      activePath: '/infra/job',
+      keepAlive: false,
+      hideInMenu: true,
+    },
+  },
+  {
+    path: '/infra/codegen/edit',
+    component: () => import('#/views/infra/codegen/edit/index.vue'),
+    name: 'InfraCodegenEdit',
+    meta: {
+      title: '生成配置修改',
+      icon: 'ic:baseline-view-in-ar',
+      activePath: '/infra/codegen',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+  },
+];
+
+export default routes;
diff --git a/apps/web-tdesign/src/router/routes/modules/system.ts b/apps/web-tdesign/src/router/routes/modules/system.ts
new file mode 100644
index 000000000..47e6b1682
--- /dev/null
+++ b/apps/web-tdesign/src/router/routes/modules/system.ts
@@ -0,0 +1,16 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/system/notify-message',
+    component: () => import('#/views/system/notify/my/index.vue'),
+    name: 'MyNotifyMessage',
+    meta: {
+      title: '我的站内信',
+      icon: 'ant-design:message-filled',
+      hideInMenu: true,
+    },
+  },
+];
+
+export default routes;
diff --git a/apps/web-tdesign/src/router/routes/modules/vben.ts b/apps/web-tdesign/src/router/routes/modules/vben.ts
deleted file mode 100644
index b1a3537c0..000000000
--- a/apps/web-tdesign/src/router/routes/modules/vben.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-import {
-  VBEN_ANT_PREVIEW_URL,
-  VBEN_DOC_URL,
-  VBEN_ELE_PREVIEW_URL,
-  VBEN_GITHUB_URL,
-  VBEN_LOGO_URL,
-  VBEN_NAIVE_PREVIEW_URL,
-} from '@vben/constants';
-import { SvgAntdvLogoIcon } from '@vben/icons';
-
-import { IFrameView } from '#/layouts';
-import { $t } from '#/locales';
-
-const routes: RouteRecordRaw[] = [
-  {
-    meta: {
-      badgeType: 'dot',
-      icon: VBEN_LOGO_URL,
-      order: 9998,
-      title: $t('demos.vben.title'),
-    },
-    name: 'VbenProject',
-    path: '/vben-admin',
-    children: [
-      {
-        name: 'VbenDocument',
-        path: '/vben-admin/document',
-        component: IFrameView,
-        meta: {
-          icon: 'lucide:book-open-text',
-          link: VBEN_DOC_URL,
-          title: $t('demos.vben.document'),
-        },
-      },
-      {
-        name: 'VbenGithub',
-        path: '/vben-admin/github',
-        component: IFrameView,
-        meta: {
-          icon: 'mdi:github',
-          link: VBEN_GITHUB_URL,
-          title: 'Github',
-        },
-      },
-      {
-        name: 'VbenNaive',
-        path: '/vben-admin/naive',
-        component: IFrameView,
-        meta: {
-          badgeType: 'dot',
-          icon: 'logos:naiveui',
-          link: VBEN_NAIVE_PREVIEW_URL,
-          title: $t('demos.vben.naive-ui'),
-        },
-      },
-      {
-        name: 'VbenAntdv',
-        path: '/vben-admin/antdv',
-        component: IFrameView,
-        meta: {
-          badgeType: 'dot',
-          icon: SvgAntdvLogoIcon,
-          link: VBEN_ANT_PREVIEW_URL,
-          title: $t('demos.vben.antdv'),
-        },
-      },
-      {
-        name: 'VbenElementPlus',
-        path: '/vben-admin/ele',
-        component: IFrameView,
-        meta: {
-          badgeType: 'dot',
-          icon: 'logos:element',
-          link: VBEN_ELE_PREVIEW_URL,
-          title: $t('demos.vben.element-plus'),
-        },
-      },
-    ],
-  },
-  {
-    name: 'VbenAbout',
-    path: '/vben-admin/about',
-    component: () => import('#/views/_core/about/index.vue'),
-    meta: {
-      icon: 'lucide:copyright',
-      title: $t('demos.vben.about'),
-      order: 9999,
-    },
-  },
-];
-
-export default routes;
diff --git a/apps/web-tdesign/src/router/tongji.ts b/apps/web-tdesign/src/router/tongji.ts
new file mode 100644
index 000000000..0aa3715a4
--- /dev/null
+++ b/apps/web-tdesign/src/router/tongji.ts
@@ -0,0 +1,30 @@
+import type { Router } from 'vue-router';
+
+declare global {
+  interface Window {
+    _hmt: any[];
+  }
+}
+
+const HM_ID = import.meta.env.VITE_APP_BAIDU_CODE;
+
+/**
+ * 设置百度统计
+ * @param router
+ */
+function setupBaiduTongJi(router: Router) {
+  // 如果没有配置百度统计的 ID，则不进行设置
+  if (!HM_ID) {
+    return;
+  }
+
+  // _hmt：用于 router push
+  window._hmt = window._hmt || [];
+
+  router.afterEach((to) => {
+    // 添加到 _hmt 中
+    window._hmt.push(['_trackPageview', to.fullPath]);
+  });
+}
+
+export { setupBaiduTongJi };
diff --git a/apps/web-tdesign/src/store/auth.ts b/apps/web-tdesign/src/store/auth.ts
index b3b4b7494..5727a5a70 100644
--- a/apps/web-tdesign/src/store/auth.ts
+++ b/apps/web-tdesign/src/store/auth.ts
@@ -1,4 +1,6 @@
-import type { Recordable, UserInfo } from '@vben/types';
+import type { AuthPermissionInfo, Recordable, UserInfo } from '@vben/types';
+
+import type { AuthApi } from '#/api';
 
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
@@ -10,7 +12,14 @@ import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
 import { defineStore } from 'pinia';
 
 import { notification } from '#/adapter/tdesign';
-import { getAccessCodesApi, getUserInfoApi, loginApi, logoutApi } from '#/api';
+import {
+  getAuthPermissionInfoApi,
+  loginApi,
+  logoutApi,
+  register,
+  smsLogin,
+  socialLogin,
+} from '#/api';
 import { $t } from '#/locales';
 
 export const useAuthStore = defineStore('auth', () => {
@@ -23,31 +32,53 @@ export const useAuthStore = defineStore('auth', () => {
   /**
    * 异步处理登录操作
    * Asynchronously handle the login process
+   * @param type 登录类型
    * @param params 登录表单数据
+   * @param onSuccess 登录成功后的回调函数
    */
   async function authLogin(
+    type: 'mobile' | 'register' | 'social' | 'username',
     params: Recordable<any>,
     onSuccess?: () => Promise<void> | void,
   ) {
     // 异步处理用户登录操作并获取 accessToken
     let userInfo: null | UserInfo = null;
     try {
+      let loginResult: AuthApi.LoginResult;
       loginLoading.value = true;
-      const { accessToken } = await loginApi(params);
+      switch (type) {
+        case 'mobile': {
+          loginResult = await smsLogin(params as AuthApi.SmsLoginParams);
+          break;
+        }
+        case 'register': {
+          loginResult = await register(params as AuthApi.RegisterParams);
+          break;
+        }
+        case 'social': {
+          loginResult = await socialLogin(params as AuthApi.SocialLoginParams);
+          break;
+        }
+        default: {
+          loginResult = await loginApi(params);
+        }
+      }
+      const { accessToken, refreshToken } = loginResult;
 
       // 如果成功获取到 accessToken
       if (accessToken) {
         accessStore.setAccessToken(accessToken);
-        // 获取用户信息并存储到 accessStore 中
-        const [fetchUserInfoResult, accessCodes] = await Promise.all([
-          fetchUserInfo(),
-          getAccessCodesApi(),
-        ]);
+        accessStore.setRefreshToken(refreshToken);
 
-        userInfo = fetchUserInfoResult;
+        // 获取用户信息并存储到 userStore、accessStore 中
+        // TODO @芋艿：清理掉 accessCodes 相关的逻辑
+        // const [fetchUserInfoResult, accessCodes] = await Promise.all([
+        //   fetchUserInfo(),
+        //   // getAccessCodesApi(),
+        // ]);
+        const fetchUserInfoResult = await fetchUserInfo();
 
-        userStore.setUserInfo(userInfo);
-        accessStore.setAccessCodes(accessCodes);
+        userInfo = fetchUserInfoResult.user;
 
         if (accessStore.loginExpired) {
           accessStore.setLoginExpired(false);
@@ -59,10 +90,10 @@ export const useAuthStore = defineStore('auth', () => {
               );
         }
 
-        if (userInfo?.realName) {
+        if (userInfo?.nickname) {
           notification.success({
             title: $t('authentication.loginSuccess'),
-            content: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`,
+            content: `${$t('authentication.loginSuccessDesc')}:${userInfo?.nickname}`,
             duration: 3000,
           });
         }
@@ -78,7 +109,10 @@ export const useAuthStore = defineStore('auth', () => {
 
   async function logout(redirect: boolean = true) {
     try {
-      await logoutApi();
+      const accessToken = accessStore.accessToken as string;
+      if (accessToken) {
+        await logoutApi(accessToken);
+      }
     } catch {
       // 不做任何处理
     }
@@ -97,10 +131,16 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   async function fetchUserInfo() {
-    let userInfo: null | UserInfo = null;
-    userInfo = await getUserInfoApi();
-    userStore.setUserInfo(userInfo);
-    return userInfo;
+    // 加载
+    let authPermissionInfo: AuthPermissionInfo | null = null;
+    authPermissionInfo = await getAuthPermissionInfoApi();
+    // userStore
+    userStore.setUserInfo(authPermissionInfo.user);
+    userStore.setUserRoles(authPermissionInfo.roles);
+    // accessStore
+    accessStore.setAccessMenus(authPermissionInfo.menus);
+    accessStore.setAccessCodes(authPermissionInfo.permissions);
+    return authPermissionInfo;
   }
 
   function $reset() {
diff --git a/apps/web-tdesign/src/utils/index.ts b/apps/web-tdesign/src/utils/index.ts
new file mode 100644
index 000000000..5877010a3
--- /dev/null
+++ b/apps/web-tdesign/src/utils/index.ts
@@ -0,0 +1,29 @@
+import type { Recordable } from '@vben/types';
+
+export * from './rangePickerProps';
+export * from './routerHelper';
+
+/**
+ * 查找数组对象的某个下标
+ * @param {Array} ary 查找的数组
+ * @param {Function} fn 判断的方法
+ */
+type Fn<T = any> = (item: T, index: number, array: Array<T>) => boolean;
+export const findIndex = <T = Recordable<any>>(
+  ary: Array<T>,
+  fn: Fn<T>,
+): number => {
+  if (ary.findIndex) {
+    return ary.findIndex((item, index, array) => fn(item, index, array));
+  }
+  let index = -1;
+  ary.some((item: T, i: number, ary: Array<T>) => {
+    const ret: boolean = fn(item, i, ary);
+    if (ret) {
+      index = i;
+      return true;
+    }
+    return false;
+  });
+  return index;
+};
diff --git a/apps/web-tdesign/src/utils/rangePickerProps.ts b/apps/web-tdesign/src/utils/rangePickerProps.ts
new file mode 100644
index 000000000..2ba4be294
--- /dev/null
+++ b/apps/web-tdesign/src/utils/rangePickerProps.ts
@@ -0,0 +1,68 @@
+import dayjs from 'dayjs';
+
+import { $t } from '#/locales';
+
+/** 时间段选择器拓展 */
+export function getRangePickerDefaultProps() {
+  return {
+    // 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 dayjs，支持自定义格式
+    format: 'YYYY-MM-DD HH:mm:ss',
+    // 绑定值的格式，对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象
+    valueFormat: 'YYYY-MM-DD HH:mm:ss',
+    // 输入框提示文字
+    placeholder: [
+      $t('utils.rangePicker.beginTime'),
+      $t('utils.rangePicker.endTime'),
+    ],
+    // 快捷时间范围
+    presets: [
+      {
+        label: $t('utils.rangePicker.today'),
+        value: [dayjs().startOf('day'), dayjs().endOf('day')],
+      },
+      {
+        label: $t('utils.rangePicker.last7Days'),
+        value: [
+          dayjs().subtract(7, 'day').startOf('day'),
+          dayjs().endOf('day'),
+        ],
+      },
+      {
+        label: $t('utils.rangePicker.last30Days'),
+        value: [
+          dayjs().subtract(30, 'day').startOf('day'),
+          dayjs().endOf('day'),
+        ],
+      },
+      {
+        label: $t('utils.rangePicker.yesterday'),
+        value: [
+          dayjs().subtract(1, 'day').startOf('day'),
+          dayjs().subtract(1, 'day').endOf('day'),
+        ],
+      },
+      {
+        label: $t('utils.rangePicker.thisWeek'),
+        value: [dayjs().startOf('week'), dayjs().endOf('day')],
+      },
+      {
+        label: $t('utils.rangePicker.thisMonth'),
+        value: [dayjs().startOf('month'), dayjs().endOf('day')],
+      },
+      {
+        label: $t('utils.rangePicker.lastWeek'),
+        value: [
+          dayjs().subtract(1, 'week').startOf('day'),
+          dayjs().endOf('day'),
+        ],
+      },
+    ],
+    showTime: {
+      defaultValue: [
+        dayjs('00:00:00', 'HH:mm:ss'),
+        dayjs('23:59:59', 'HH:mm:ss'),
+      ],
+      format: 'HH:mm:ss',
+    },
+  };
+}
diff --git a/apps/web-tdesign/src/utils/routerHelper.ts b/apps/web-tdesign/src/utils/routerHelper.ts
new file mode 100644
index 000000000..a9e99f54b
--- /dev/null
+++ b/apps/web-tdesign/src/utils/routerHelper.ts
@@ -0,0 +1,38 @@
+import type {
+  RouteLocationNormalized,
+  RouteRecordNormalized,
+} from 'vue-router';
+
+import { defineAsyncComponent } from 'vue';
+
+const modules = import.meta.glob('../views/**/*.{vue,tsx}');
+
+/**
+ * 注册一个异步组件
+ * @param componentPath 例:/bpm/oa/leave/detail
+ */
+export function registerComponent(componentPath: string) {
+  for (const item in modules) {
+    if (item.includes(componentPath)) {
+      // 使用异步组件的方式来动态加载组件
+      return defineAsyncComponent(modules[item] as any);
+    }
+  }
+}
+
+export const getRawRoute = (
+  route: RouteLocationNormalized,
+): RouteLocationNormalized => {
+  if (!route) return route;
+  const { matched, ...opt } = route;
+  return {
+    ...opt,
+    matched: (matched
+      ? matched.map((item) => ({
+          meta: item.meta,
+          name: item.name,
+          path: item.path,
+        }))
+      : undefined) as RouteRecordNormalized[],
+  };
+};
diff --git a/apps/web-tdesign/src/utils/useUpload.ts b/apps/web-tdesign/src/utils/useUpload.ts
new file mode 100644
index 000000000..c8474129b
--- /dev/null
+++ b/apps/web-tdesign/src/utils/useUpload.ts
@@ -0,0 +1,63 @@
+import { message } from '#/adapter/tdesign';
+
+enum UploadType {
+  Image = 'image',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+const useBeforeUpload = (type: UploadType, maxSizeMB: number) => {
+  const fn = (file: File): boolean => {
+    let allowTypes: string[] = [];
+    let name = '';
+
+    switch (type) {
+      case UploadType.Image: {
+        allowTypes = [
+          'image/jpeg',
+          'image/png',
+          'image/gif',
+          'image/bmp',
+          'image/jpg',
+        ];
+        maxSizeMB = 2;
+        name = '图片';
+        break;
+      }
+      case UploadType.Video: {
+        allowTypes = ['video/mp4'];
+        maxSizeMB = 10;
+        name = '视频';
+        break;
+      }
+      case UploadType.Voice: {
+        allowTypes = [
+          'audio/mp3',
+          'audio/mpeg',
+          'audio/wma',
+          'audio/wav',
+          'audio/amr',
+        ];
+        maxSizeMB = 2;
+        name = '语音';
+        break;
+      }
+    }
+    // 格式不正确
+    if (!allowTypes.includes(file.type)) {
+      message.error(`上传${name}格式不对!`);
+      return false;
+    }
+    // 大小不正确
+    if (file.size / 1024 / 1024 > maxSizeMB) {
+      message.error(`上传${name}大小不能超过${maxSizeMB}M!`);
+      return false;
+    }
+
+    return true;
+  };
+
+  return fn;
+};
+
+export { UploadType, useBeforeUpload };
diff --git a/apps/web-tdesign/src/views/_core/authentication/code-login.vue b/apps/web-tdesign/src/views/_core/authentication/code-login.vue
index acfd1fd78..481e3363f 100644
--- a/apps/web-tdesign/src/views/_core/authentication/code-login.vue
+++ b/apps/web-tdesign/src/views/_core/authentication/code-login.vue
@@ -2,24 +2,100 @@
 import type { VbenFormSchema } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import { computed, ref } from 'vue';
+import type { AuthApi } from '#/api';
+
+import { computed, onMounted, ref } from 'vue';
 
 import { AuthenticationCodeLogin, z } from '@vben/common-ui';
+import { isTenantEnable } from '@vben/hooks';
 import { $t } from '@vben/locales';
+import { useAccessStore } from '@vben/stores';
+
+import { message } from '#/adapter/tdesign';
+import { sendSmsCode } from '#/api';
+import { getTenantByWebsite, getTenantSimpleList } from '#/api/core/auth';
+import { useAuthStore } from '#/store';
 
 defineOptions({ name: 'CodeLogin' });
 
+const authStore = useAuthStore();
+const accessStore = useAccessStore();
+const tenantEnable = isTenantEnable();
+
 const loading = ref(false);
-const CODE_LENGTH = 6;
+const CODE_LENGTH = 4;
+
+const loginRef = ref();
+
+/** 获取租户列表，并默认选中 */
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
+async function fetchTenantList() {
+  if (!tenantEnable) {
+    return;
+  }
+  try {
+    // 获取租户列表、域名对应租户
+    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
+    tenantList.value = await getTenantSimpleList();
+
+    // 选中租户：域名 > store 中的租户 > 首个租户
+    let tenantId: null | number = null;
+    const websiteTenant = await websiteTenantPromise;
+    if (websiteTenant?.id) {
+      tenantId = websiteTenant.id;
+    }
+    // 如果没有从域名获取到租户，尝试从 store 中获取
+    if (!tenantId && accessStore.tenantId) {
+      tenantId = accessStore.tenantId;
+    }
+    // 如果还是没有租户，使用列表中的第一个
+    if (!tenantId && tenantList.value?.[0]?.id) {
+      tenantId = tenantList.value[0].id;
+    }
+
+    // 设置选中的租户编号
+    accessStore.setTenantId(tenantId);
+    loginRef.value.getFormApi().setFieldValue('tenantId', tenantId?.toString());
+  } catch (error) {
+    console.error('获取租户列表失败:', error);
+  }
+}
+
+/** 组件挂载时获取租户信息 */
+onMounted(() => {
+  fetchTenantList();
+});
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: tenantList.value.map((item) => ({
+          label: item.name,
+          value: item.id.toString(),
+        })),
+        placeholder: $t('authentication.tenantTip'),
+      },
+      fieldName: 'tenantId',
+      label: $t('authentication.tenant'),
+      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
+      dependencies: {
+        triggerFields: ['tenantId'],
+        if: tenantEnable,
+        trigger(values) {
+          if (values.tenantId) {
+            accessStore.setTenantId(Number(values.tenantId));
+          }
+        },
+      },
+    },
     {
       component: 'VbenInput',
       componentProps: {
         placeholder: $t('authentication.mobile'),
       },
-      fieldName: 'phoneNumber',
+      fieldName: 'mobile',
       label: $t('authentication.mobile'),
       rules: z
         .string()
@@ -40,6 +116,29 @@ const formSchema = computed((): VbenFormSchema[] => {
           return text;
         },
         placeholder: $t('authentication.code'),
+        handleSendCode: async () => {
+          loading.value = true;
+          try {
+            const formApi = loginRef.value?.getFormApi();
+            if (!formApi) {
+              throw new Error('表单未准备好');
+            }
+            // 验证手机号
+            await formApi.validateField('mobile');
+            const isMobileValid = await formApi.isFieldValid('mobile');
+            if (!isMobileValid) {
+              throw new Error('请输入有效的手机号码');
+            }
+
+            // 发送验证码
+            const { mobile } = await formApi.getValues();
+            const scene = 21; // 场景：短信验证码登录
+            await sendSmsCode({ mobile, scene });
+            message.success('验证码发送成功');
+          } finally {
+            loading.value = false;
+          }
+        },
       },
       fieldName: 'code',
       label: $t('authentication.code'),
@@ -55,13 +154,17 @@ const formSchema = computed((): VbenFormSchema[] => {
  * @param values 登录表单数据
  */
 async function handleLogin(values: Recordable<any>) {
-  // eslint-disable-next-line no-console
-  console.log(values);
+  try {
+    await authStore.authLogin('mobile', values);
+  } catch (error) {
+    console.error('Error in handleLogin:', error);
+  }
 }
 </script>
 
 <template>
   <AuthenticationCodeLogin
+    ref="loginRef"
     :form-schema="formSchema"
     :loading="loading"
     @submit="handleLogin"
diff --git a/apps/web-tdesign/src/views/_core/authentication/forget-password.vue b/apps/web-tdesign/src/views/_core/authentication/forget-password.vue
index fef0d4279..f950b5b93 100644
--- a/apps/web-tdesign/src/views/_core/authentication/forget-password.vue
+++ b/apps/web-tdesign/src/views/_core/authentication/forget-password.vue
@@ -2,40 +2,212 @@
 import type { VbenFormSchema } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import { computed, ref } from 'vue';
+import type { AuthApi } from '#/api';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 import { AuthenticationForgetPassword, z } from '@vben/common-ui';
+import { isTenantEnable } from '@vben/hooks';
 import { $t } from '@vben/locales';
+import { useAccessStore } from '@vben/stores';
+
+import { message } from '#/adapter/tdesign';
+import { sendSmsCode, smsResetPassword } from '#/api';
+import { getTenantByWebsite, getTenantSimpleList } from '#/api/core/auth';
 
 defineOptions({ name: 'ForgetPassword' });
 
+const accessStore = useAccessStore();
+const router = useRouter();
+const tenantEnable = isTenantEnable();
+
 const loading = ref(false);
+const CODE_LENGTH = 4;
+const forgetPasswordRef = ref();
+
+/** 获取租户列表，并默认选中 */
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
+async function fetchTenantList() {
+  if (!tenantEnable) {
+    return;
+  }
+  try {
+    // 获取租户列表、域名对应租户
+    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
+    tenantList.value = await getTenantSimpleList();
+
+    // 选中租户：域名 > store 中的租户 > 首个租户
+    let tenantId: null | number = null;
+    const websiteTenant = await websiteTenantPromise;
+    if (websiteTenant?.id) {
+      tenantId = websiteTenant.id;
+    }
+    // 如果没有从域名获取到租户，尝试从 store 中获取
+    if (!tenantId && accessStore.tenantId) {
+      tenantId = accessStore.tenantId;
+    }
+    // 如果还是没有租户，使用列表中的第一个
+    if (!tenantId && tenantList.value?.[0]?.id) {
+      tenantId = tenantList.value[0].id;
+    }
+
+    // 设置选中的租户编号
+    accessStore.setTenantId(tenantId);
+    forgetPasswordRef.value
+      .getFormApi()
+      .setFieldValue('tenantId', tenantId?.toString());
+  } catch (error) {
+    console.error('获取租户列表失败:', error);
+  }
+}
+
+/** 组件挂载时获取租户信息 */
+onMounted(() => {
+  fetchTenantList();
+});
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: tenantList.value.map((item) => ({
+          label: item.name,
+          value: item.id.toString(),
+        })),
+        placeholder: $t('authentication.tenantTip'),
+      },
+      fieldName: 'tenantId',
+      label: $t('authentication.tenant'),
+      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
+      dependencies: {
+        triggerFields: ['tenantId'],
+        if: tenantEnable,
+        trigger(values) {
+          if (values.tenantId) {
+            accessStore.setTenantId(Number(values.tenantId));
+          }
+        },
+      },
+    },
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: 'example@example.com',
+        placeholder: $t('authentication.mobile'),
       },
-      fieldName: 'email',
-      label: $t('authentication.email'),
+      fieldName: 'mobile',
+      label: $t('authentication.mobile'),
       rules: z
         .string()
-        .min(1, { message: $t('authentication.emailTip') })
-        .email($t('authentication.emailValidErrorTip')),
+        .min(1, { message: $t('authentication.mobileTip') })
+        .refine((v) => /^\d{11}$/.test(v), {
+          message: $t('authentication.mobileErrortip'),
+        }),
+    },
+    {
+      component: 'VbenPinInput',
+      componentProps: {
+        codeLength: CODE_LENGTH,
+        createText: (countdown: number) => {
+          const text =
+            countdown > 0
+              ? $t('authentication.sendText', [countdown])
+              : $t('authentication.sendCode');
+          return text;
+        },
+        placeholder: $t('authentication.code'),
+        handleSendCode: async () => {
+          loading.value = true;
+          try {
+            const formApi = forgetPasswordRef.value?.getFormApi();
+            if (!formApi) {
+              throw new Error('表单未准备好');
+            }
+            // 验证手机号
+            await formApi.validateField('mobile');
+            const isMobileValid = await formApi.isFieldValid('mobile');
+            if (!isMobileValid) {
+              throw new Error('请输入有效的手机号码');
+            }
+
+            // 发送验证码
+            const { mobile } = await formApi.getValues();
+            const scene = 23; // 场景：重置密码
+            await sendSmsCode({ mobile, scene });
+            message.success('验证码发送成功');
+          } finally {
+            loading.value = false;
+          }
+        },
+      },
+      fieldName: 'code',
+      label: $t('authentication.code'),
+      rules: z.string().length(CODE_LENGTH, {
+        message: $t('authentication.codeTip', [CODE_LENGTH]),
+      }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.password'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      renderComponentContent() {
+        return {
+          strengthText: () => $t('authentication.passwordStrength'),
+        };
+      },
+      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          const { password } = values;
+          return z
+            .string({ required_error: $t('authentication.passwordTip') })
+            .min(1, { message: $t('authentication.passwordTip') })
+            .refine((value) => value === password, {
+              message: $t('authentication.confirmPasswordTip'),
+            });
+        },
+        triggerFields: ['password'],
+      },
+      fieldName: 'confirmPassword',
+      label: $t('authentication.confirmPassword'),
     },
   ];
 });
 
-function handleSubmit(value: Recordable<any>) {
-  // eslint-disable-next-line no-console
-  console.log('reset email:', value);
+/**
+ * 处理重置密码操作
+ * @param values 表单数据
+ */
+async function handleSubmit(values: Recordable<any>) {
+  loading.value = true;
+  try {
+    const { mobile, code, password } = values;
+    await smsResetPassword({ mobile, code, password });
+    message.success($t('authentication.resetPasswordSuccess'));
+    // 重置成功后跳转到首页
+    await router.push('/');
+  } catch (error) {
+    console.error('重置密码失败:', error);
+  } finally {
+    loading.value = false;
+  }
 }
 </script>
 
 <template>
   <AuthenticationForgetPassword
+    ref="forgetPasswordRef"
     :form-schema="formSchema"
     :loading="loading"
     @submit="handleSubmit"
diff --git a/apps/web-tdesign/src/views/_core/authentication/login.vue b/apps/web-tdesign/src/views/_core/authentication/login.vue
index 89af0c270..aa1db4c53 100644
--- a/apps/web-tdesign/src/views/_core/authentication/login.vue
+++ b/apps/web-tdesign/src/views/_core/authentication/login.vue
@@ -1,99 +1,192 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
-import type { BasicOption } from '@vben/types';
 
-import { computed, markRaw } from 'vue';
+import type { AuthApi } from '#/api/core/auth';
 
-import { AuthenticationLogin, SliderCaptcha, z } from '@vben/common-ui';
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { AuthenticationLogin, Verification, z } from '@vben/common-ui';
+import { isCaptchaEnable, isTenantEnable } from '@vben/hooks';
 import { $t } from '@vben/locales';
+import { useAccessStore } from '@vben/stores';
 
+import {
+  checkCaptcha,
+  getCaptcha,
+  getTenantByWebsite,
+  getTenantSimpleList,
+  socialAuthRedirect,
+} from '#/api/core/auth';
 import { useAuthStore } from '#/store';
 
 defineOptions({ name: 'Login' });
 
+const { query } = useRoute();
 const authStore = useAuthStore();
+const accessStore = useAccessStore();
+const tenantEnable = isTenantEnable();
+const captchaEnable = isCaptchaEnable();
 
-const MOCK_USER_OPTIONS: BasicOption[] = [
-  {
-    label: 'Super',
-    value: 'vben',
-  },
-  {
-    label: 'Admin',
-    value: 'admin',
-  },
-  {
-    label: 'User',
-    value: 'jack',
-  },
-];
+const loginRef = ref();
+const verifyRef = ref();
+
+const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWord'
+
+/** 获取租户列表，并默认选中 */
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
+async function fetchTenantList() {
+  if (!tenantEnable) {
+    return;
+  }
+  try {
+    // 获取租户列表、域名对应租户
+    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
+    tenantList.value = await getTenantSimpleList();
+
+    // 选中租户：域名 > store 中的租户 > 首个租户
+    let tenantId: null | number = null;
+    const websiteTenant = await websiteTenantPromise;
+    if (websiteTenant?.id) {
+      tenantId = websiteTenant.id;
+    }
+    // 如果没有从域名获取到租户，尝试从 store 中获取
+    if (!tenantId && accessStore.tenantId) {
+      tenantId = accessStore.tenantId;
+    }
+    // 如果还是没有租户，使用列表中的第一个
+    if (!tenantId && tenantList.value?.[0]?.id) {
+      tenantId = tenantList.value[0].id;
+    }
+
+    // 设置选中的租户编号
+    accessStore.setTenantId(tenantId);
+    loginRef.value.getFormApi().setFieldValue('tenantId', tenantId?.toString());
+  } catch (error) {
+    console.error('获取租户列表失败:', error);
+  }
+}
+
+/** 处理登录 */
+async function handleLogin(values: any) {
+  // 如果开启验证码，则先验证验证码
+  if (captchaEnable) {
+    verifyRef.value.show();
+    return;
+  }
+  // 无验证码，直接登录
+  await authStore.authLogin('username', values);
+}
+
+/** 验证码通过，执行登录 */
+async function handleVerifySuccess({ captchaVerification }: any) {
+  try {
+    await authStore.authLogin('username', {
+      ...(await loginRef.value.getFormApi().getValues()),
+      captchaVerification,
+    });
+  } catch (error) {
+    console.error('Error in handleLogin:', error);
+  }
+}
+
+/** 处理第三方登录 */
+const redirect = query?.redirect;
+async function handleThirdLogin(type: number) {
+  if (type <= 0) {
+    return;
+  }
+  try {
+    // 计算 redirectUri
+    // tricky: type、redirect 需要先 encode 一次，否则钉钉回调会丢失。配合 social-login.vue#getUrlValue() 使用
+    const redirectUri = `${
+      location.origin
+    }/auth/social-login?${encodeURIComponent(
+      `type=${type}&redirect=${redirect || '/'}`,
+    )}`;
+
+    // 进行跳转
+    window.location.href = await socialAuthRedirect(type, redirectUri);
+  } catch (error) {
+    console.error('第三方登录处理失败:', error);
+  }
+}
+
+/** 组件挂载时获取租户信息 */
+onMounted(() => {
+  fetchTenantList();
+});
 
 const formSchema = computed((): VbenFormSchema[] => {
   return [
     {
       component: 'VbenSelect',
       componentProps: {
-        options: MOCK_USER_OPTIONS,
-        placeholder: $t('authentication.selectAccount'),
+        options: tenantList.value.map((item) => ({
+          label: item.name,
+          value: item.id.toString(),
+        })),
+        placeholder: $t('authentication.tenantTip'),
+      },
+      fieldName: 'tenantId',
+      label: $t('authentication.tenant'),
+      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
+      dependencies: {
+        triggerFields: ['tenantId'],
+        if: tenantEnable,
+        trigger(values) {
+          if (values.tenantId) {
+            accessStore.setTenantId(Number(values.tenantId));
+          }
+        },
       },
-      fieldName: 'selectAccount',
-      label: $t('authentication.selectAccount'),
-      rules: z
-        .string()
-        .min(1, { message: $t('authentication.selectAccount') })
-        .optional()
-        .default('vben'),
     },
     {
       component: 'VbenInput',
       componentProps: {
         placeholder: $t('authentication.usernameTip'),
       },
-      dependencies: {
-        trigger(values, form) {
-          if (values.selectAccount) {
-            const findUser = MOCK_USER_OPTIONS.find(
-              (item) => item.value === values.selectAccount,
-            );
-            if (findUser) {
-              form.setValues({
-                password: '123456',
-                username: findUser.value,
-              });
-            }
-          }
-        },
-        triggerFields: ['selectAccount'],
-      },
       fieldName: 'username',
       label: $t('authentication.username'),
-      rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.usernameTip') })
+        .default(import.meta.env.VITE_APP_DEFAULT_USERNAME),
     },
     {
       component: 'VbenInputPassword',
       componentProps: {
-        placeholder: $t('authentication.password'),
+        placeholder: $t('authentication.passwordTip'),
       },
       fieldName: 'password',
       label: $t('authentication.password'),
-      rules: z.string().min(1, { message: $t('authentication.passwordTip') }),
-    },
-
-    {
-      component: markRaw(SliderCaptcha),
-      fieldName: 'captcha',
-      rules: z.boolean().refine((value) => value, {
-        message: $t('authentication.verifyRequiredTip'),
-      }),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.passwordTip') })
+        .default(import.meta.env.VITE_APP_DEFAULT_PASSWORD),
     },
   ];
 });
 </script>
 
 <template>
-  <AuthenticationLogin
-    :form-schema="formSchema"
-    :loading="authStore.loginLoading"
-    @submit="authStore.authLogin"
-  />
+  <div>
+    <AuthenticationLogin
+      ref="loginRef"
+      :form-schema="formSchema"
+      :loading="authStore.loginLoading"
+      @submit="handleLogin"
+      @third-login="handleThirdLogin"
+    />
+    <Verification
+      ref="verifyRef"
+      v-if="captchaEnable"
+      :captcha-type="captchaType"
+      :check-captcha-api="checkCaptcha"
+      :get-captcha-api="getCaptcha"
+      :img-size="{ width: '400px', height: '200px' }"
+      mode="pop"
+      @on-success="handleVerifySuccess"
+    />
+  </div>
 </template>
diff --git a/apps/web-tdesign/src/views/_core/authentication/register.vue b/apps/web-tdesign/src/views/_core/authentication/register.vue
index 1a80ff51a..734f4c27d 100644
--- a/apps/web-tdesign/src/views/_core/authentication/register.vue
+++ b/apps/web-tdesign/src/views/_core/authentication/register.vue
@@ -1,18 +1,126 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '@vben/common-ui';
-import type { Recordable } from '@vben/types';
 
-import { computed, h, ref } from 'vue';
+import type { AuthApi } from '#/api/core/auth';
 
-import { AuthenticationRegister, z } from '@vben/common-ui';
+import { computed, h, onMounted, ref } from 'vue';
+
+import { AuthenticationRegister, Verification, z } from '@vben/common-ui';
+import { isCaptchaEnable, isTenantEnable } from '@vben/hooks';
 import { $t } from '@vben/locales';
+import { useAccessStore } from '@vben/stores';
+
+import {
+  checkCaptcha,
+  getCaptcha,
+  getTenantByWebsite,
+  getTenantSimpleList,
+} from '#/api/core/auth';
+import { useAuthStore } from '#/store';
 
 defineOptions({ name: 'Register' });
 
 const loading = ref(false);
 
+const accessStore = useAccessStore();
+const authStore = useAuthStore();
+const tenantEnable = isTenantEnable();
+const captchaEnable = isCaptchaEnable();
+
+const registerRef = ref();
+const verifyRef = ref();
+
+const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWord'
+
+/** 获取租户列表，并默认选中 */
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
+async function fetchTenantList() {
+  if (!tenantEnable) {
+    return;
+  }
+  try {
+    // 获取租户列表、域名对应租户
+    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
+    tenantList.value = await getTenantSimpleList();
+
+    // 选中租户：域名 > store 中的租户 > 首个租户
+    let tenantId: null | number = null;
+    const websiteTenant = await websiteTenantPromise;
+    if (websiteTenant?.id) {
+      tenantId = websiteTenant.id;
+    }
+    // 如果没有从域名获取到租户，尝试从 store 中获取
+    if (!tenantId && accessStore.tenantId) {
+      tenantId = accessStore.tenantId;
+    }
+    // 如果还是没有租户，使用列表中的第一个
+    if (!tenantId && tenantList.value?.[0]?.id) {
+      tenantId = tenantList.value[0].id;
+    }
+
+    // 设置选中的租户编号
+    accessStore.setTenantId(tenantId);
+    registerRef.value
+      .getFormApi()
+      .setFieldValue('tenantId', tenantId?.toString());
+  } catch (error) {
+    console.error('获取租户列表失败:', error);
+  }
+}
+
+/** 执行注册 */
+async function handleRegister(values: any) {
+  // 如果开启验证码，则先验证验证码
+  if (captchaEnable) {
+    verifyRef.value.show();
+    return;
+  }
+
+  // 无验证码，直接登录
+  await authStore.authLogin('register', values);
+}
+
+/** 验证码通过，执行注册 */
+const handleVerifySuccess = async ({ captchaVerification }: any) => {
+  try {
+    await authStore.authLogin('register', {
+      ...(await registerRef.value.getFormApi().getValues()),
+      captchaVerification,
+    });
+  } catch (error) {
+    console.error('Error in handleRegister:', error);
+  }
+};
+
+/** 组件挂载时获取租户信息 */
+onMounted(() => {
+  fetchTenantList();
+});
+
 const formSchema = computed((): VbenFormSchema[] => {
   return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: tenantList.value.map((item) => ({
+          label: item.name,
+          value: item.id.toString(),
+        })),
+        placeholder: $t('authentication.tenantTip'),
+      },
+      fieldName: 'tenantId',
+      label: $t('authentication.tenant'),
+      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
+      dependencies: {
+        triggerFields: ['tenantId'],
+        if: tenantEnable,
+        trigger(values) {
+          if (values.tenantId) {
+            accessStore.setTenantId(Number(values.tenantId));
+          }
+        },
+      },
+    },
     {
       component: 'VbenInput',
       componentProps: {
@@ -22,6 +130,15 @@ const formSchema = computed((): VbenFormSchema[] => {
       label: $t('authentication.username'),
       rules: z.string().min(1, { message: $t('authentication.usernameTip') }),
     },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.nicknameTip'),
+      },
+      fieldName: 'nickname',
+      label: $t('authentication.nickname'),
+      rules: z.string().min(1, { message: $t('authentication.nicknameTip') }),
+    },
     {
       component: 'VbenInputPassword',
       componentProps: {
@@ -80,17 +197,25 @@ const formSchema = computed((): VbenFormSchema[] => {
     },
   ];
 });
-
-async function handleSubmit(value: Recordable<any>) {
-  // eslint-disable-next-line no-console
-  console.log('register submit:', value);
-}
 </script>
 
 <template>
-  <AuthenticationRegister
-    :form-schema="formSchema"
-    :loading="loading"
-    @submit="handleSubmit"
-  />
+  <div>
+    <AuthenticationRegister
+      ref="registerRef"
+      :form-schema="formSchema"
+      :loading="loading"
+      @submit="handleRegister"
+    />
+    <Verification
+      ref="verifyRef"
+      v-if="captchaEnable"
+      :captcha-type="captchaType"
+      :check-captcha-api="checkCaptcha"
+      :get-captcha-api="getCaptcha"
+      :img-size="{ width: '400px', height: '200px' }"
+      mode="pop"
+      @on-success="handleVerifySuccess"
+    />
+  </div>
 </template>
diff --git a/apps/web-tdesign/src/views/_core/authentication/social-login.vue b/apps/web-tdesign/src/views/_core/authentication/social-login.vue
new file mode 100644
index 000000000..1052a9a18
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/authentication/social-login.vue
@@ -0,0 +1,210 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '@vben/common-ui';
+
+import type { AuthApi } from '#/api/core/auth';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { AuthenticationLogin, Verification, z } from '@vben/common-ui';
+import { isCaptchaEnable, isTenantEnable } from '@vben/hooks';
+import { $t } from '@vben/locales';
+import { useAccessStore } from '@vben/stores';
+import { getUrlValue } from '@vben/utils';
+
+import {
+  checkCaptcha,
+  getCaptcha,
+  getTenantByWebsite,
+  getTenantSimpleList,
+} from '#/api/core/auth';
+import { useAuthStore } from '#/store';
+
+defineOptions({ name: 'SocialLogin' });
+
+const authStore = useAuthStore();
+const accessStore = useAccessStore();
+const { query } = useRoute();
+const router = useRouter();
+const tenantEnable = isTenantEnable();
+const captchaEnable = isCaptchaEnable();
+
+const loginRef = ref();
+const verifyRef = ref();
+
+const captchaType = 'blockPuzzle'; // 验证码类型：'blockPuzzle' | 'clickWord'
+
+/** 获取租户列表，并默认选中 */
+const tenantList = ref<AuthApi.TenantResult[]>([]); // 租户列表
+async function fetchTenantList() {
+  if (!tenantEnable) {
+    return;
+  }
+
+  try {
+    // 获取租户列表、域名对应租户
+    const websiteTenantPromise = getTenantByWebsite(window.location.hostname);
+    tenantList.value = await getTenantSimpleList();
+
+    // 选中租户：域名 > store 中的租户 > 首个租户
+    let tenantId: null | number = null;
+    const websiteTenant = await websiteTenantPromise;
+    if (websiteTenant?.id) {
+      tenantId = websiteTenant.id;
+    }
+    // 如果没有从域名获取到租户，尝试从 store 中获取
+    if (!tenantId && accessStore.tenantId) {
+      tenantId = accessStore.tenantId;
+    }
+    // 如果还是没有租户，使用列表中的第一个
+    if (!tenantId && tenantList.value?.[0]?.id) {
+      tenantId = tenantList.value[0].id;
+    }
+
+    // 设置选中的租户编号
+    accessStore.setTenantId(tenantId);
+    loginRef.value.getFormApi().setFieldValue('tenantId', tenantId);
+  } catch (error) {
+    console.error('获取租户列表失败:', error);
+  }
+}
+
+/** 尝试登录：当账号已经绑定，socialLogin 会直接获得 token */
+const socialType = Number(getUrlValue('type'));
+const redirect = getUrlValue('redirect');
+const socialCode = query?.code as string;
+const socialState = query?.state as string;
+async function tryLogin() {
+  // 用于登录后，基于 redirect 的重定向
+  if (redirect) {
+    await router.replace({
+      query: {
+        ...query,
+        redirect: encodeURIComponent(redirect),
+      },
+    });
+  }
+
+  // 尝试登录
+  await authStore.authLogin('social', {
+    type: socialType,
+    code: socialCode,
+    state: socialState,
+  });
+}
+
+/** 处理登录 */
+async function handleLogin(values: any) {
+  // 如果开启验证码，则先验证验证码
+  if (captchaEnable) {
+    verifyRef.value.show();
+    return;
+  }
+
+  // 无验证码，直接登录
+  await authStore.authLogin('username', {
+    ...values,
+    socialType,
+    socialCode,
+    socialState,
+  });
+}
+
+/** 验证码通过，执行登录 */
+async function handleVerifySuccess({ captchaVerification }: any) {
+  try {
+    await authStore.authLogin('username', {
+      ...(await loginRef.value.getFormApi().getValues()),
+      captchaVerification,
+      socialType,
+      socialCode,
+      socialState,
+    });
+  } catch (error) {
+    console.error('Error in handleLogin:', error);
+  }
+}
+
+/** 组件挂载时获取租户信息 */
+onMounted(async () => {
+  await fetchTenantList();
+
+  await tryLogin();
+});
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      component: 'VbenSelect',
+      componentProps: {
+        options: tenantList.value.map((item) => ({
+          label: item.name,
+          value: item.id.toString(),
+        })),
+        placeholder: $t('authentication.tenantTip'),
+      },
+      fieldName: 'tenantId',
+      label: $t('authentication.tenant'),
+      rules: z.string().min(1, { message: $t('authentication.tenantTip') }),
+      dependencies: {
+        triggerFields: ['tenantId'],
+        if: tenantEnable,
+        trigger(values) {
+          if (values.tenantId) {
+            accessStore.setTenantId(Number(values.tenantId));
+          }
+        },
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      fieldName: 'username',
+      label: $t('authentication.username'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.usernameTip') })
+        .default(import.meta.env.VITE_APP_DEFAULT_USERNAME),
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        placeholder: $t('authentication.passwordTip'),
+      },
+      fieldName: 'password',
+      label: $t('authentication.password'),
+      rules: z
+        .string()
+        .min(1, { message: $t('authentication.passwordTip') })
+        .default(import.meta.env.VITE_APP_DEFAULT_PASSWORD),
+    },
+  ];
+});
+</script>
+
+<template>
+  <div>
+    <AuthenticationLogin
+      ref="loginRef"
+      :form-schema="formSchema"
+      :loading="authStore.loginLoading"
+      :show-code-login="false"
+      :show-qrcode-login="false"
+      :show-third-party-login="false"
+      :show-register="false"
+      @submit="handleLogin"
+    />
+    <Verification
+      ref="verifyRef"
+      v-if="captchaEnable"
+      :captcha-type="captchaType"
+      :check-captcha-api="checkCaptcha"
+      :get-captcha-api="getCaptcha"
+      :img-size="{ width: '400px', height: '200px' }"
+      mode="pop"
+      @on-success="handleVerifySuccess"
+    />
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/_core/authentication/sso-login.vue b/apps/web-tdesign/src/views/_core/authentication/sso-login.vue
new file mode 100644
index 000000000..aba72ac83
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/authentication/sso-login.vue
@@ -0,0 +1,221 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { computed, onMounted, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { AuthenticationAuthTitle, VbenButton } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { authorize, getAuthorize } from '#/api/system/oauth2/open';
+
+defineOptions({ name: 'SSOLogin' });
+
+const { query } = useRoute();
+
+const client = ref({
+  name: '',
+  logo: '',
+}); // 客户端信息
+
+const queryParams = reactive({
+  responseType: '',
+  clientId: '',
+  redirectUri: '',
+  state: '',
+  scopes: [] as string[], // 优先从 query 参数获取；如果未传递，从后端获取
+}); // URL 上的 client_id、scope 等参数
+
+const loading = ref(false); // 表单是否提交中
+
+/** 初始化授权信息 */
+async function init() {
+  // 防止在没有登录的情况下循环弹窗
+  if (query.client_id === undefined) {
+    return;
+  }
+  // 解析参数
+  // 例如说【自动授权不通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read%20user.write
+  // 例如说【自动授权通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read
+  queryParams.responseType = query.response_type as string;
+  queryParams.clientId = query.client_id as string;
+  queryParams.redirectUri = query.redirect_uri as string;
+  queryParams.state = query.state as string;
+  if (query.scope) {
+    queryParams.scopes = (query.scope as string).split(' ');
+  }
+
+  // 如果有 scope 参数，先执行一次自动授权，看看是否之前都授权过了。
+  if (queryParams.scopes.length > 0) {
+    const data = await doAuthorize(true, queryParams.scopes, []);
+    if (data) {
+      location.href = data;
+      return;
+    }
+  }
+
+  // 1.1 获取授权页的基本信息
+  const data = await getAuthorize(queryParams.clientId);
+  client.value = data.client;
+  // 1.2 解析 scope
+  let scopes;
+  // 如果 params.scope 非空，则过滤下返回的 scopes
+  if (queryParams.scopes.length > 0) {
+    scopes = data.scopes.filter((scope) =>
+      queryParams.scopes.includes(scope.key),
+    );
+    // 如果 params.scope 为空，则使用返回的 scopes 设置它
+  } else {
+    scopes = data.scopes;
+    queryParams.scopes = scopes.map((scope) => scope.key);
+  }
+
+  // 2.设置表单的初始值
+  formApi.setFieldValue(
+    'scopes',
+    scopes.filter((scope) => scope.value).map((scope) => scope.key),
+  );
+}
+
+/** 处理授权的提交 */
+async function handleSubmit(approved: boolean) {
+  // 计算 checkedScopes + uncheckedScopes
+  let checkedScopes: string[];
+  let uncheckedScopes: string[];
+  if (approved) {
+    // 同意授权，按照用户的选择
+    const res = await formApi.getValues();
+    checkedScopes = res.scopes;
+    uncheckedScopes = queryParams.scopes.filter(
+      (item) => !checkedScopes.includes(item),
+    );
+  } else {
+    // 拒绝，则都是取消
+    checkedScopes = [];
+    uncheckedScopes = queryParams.scopes;
+  }
+
+  // 提交授权的请求
+  loading.value = true;
+  try {
+    const data = await doAuthorize(false, checkedScopes, uncheckedScopes);
+    if (!data) {
+      return;
+    }
+    // 跳转授权成功后的回调地址
+    location.href = data;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 调用授权 API 接口 */
+const doAuthorize = (
+  autoApprove: boolean,
+  checkedScopes: string[],
+  uncheckedScopes: string[],
+) => {
+  return authorize(
+    queryParams.responseType,
+    queryParams.clientId,
+    queryParams.redirectUri,
+    queryParams.state,
+    autoApprove,
+    checkedScopes,
+    uncheckedScopes,
+  );
+};
+
+/** 格式化 scope 文本 */
+function formatScope(scope: string) {
+  // 格式化 scope 授权范围，方便用户理解。
+  // 这里仅仅是一个 demo，可以考虑录入到字典数据中，例如说字典类型 "system_oauth2_scope"，它的每个 scope 都是一条字典数据。
+  switch (scope) {
+    case 'user.read': {
+      return '访问你的个人信息';
+    }
+    case 'user.write': {
+      return '修改你的个人信息';
+    }
+    default: {
+      return scope;
+    }
+  }
+}
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      fieldName: 'scopes',
+      label: '授权范围',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: queryParams.scopes.map((scope) => ({
+          label: formatScope(scope),
+          value: scope,
+        })),
+        class: 'flex flex-col gap-2',
+      },
+    },
+  ];
+});
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: formSchema,
+    showDefaultActions: false,
+  }),
+);
+
+/** 初始化 */
+onMounted(() => {
+  init();
+});
+</script>
+
+<template>
+  <div @keydown.enter.prevent="handleSubmit(true)">
+    <AuthenticationAuthTitle>
+      <slot name="title">
+        {{ `${client.name} 👋🏻` }}
+      </slot>
+      <template #desc>
+        <span class="text-muted-foreground">
+          此第三方应用请求获得以下权限：
+        </span>
+      </template>
+    </AuthenticationAuthTitle>
+
+    <Form />
+
+    <div class="flex gap-2">
+      <VbenButton
+        :class="{
+          'cursor-wait': loading,
+        }"
+        :loading="loading"
+        aria-label="login"
+        class="w-2/3"
+        @click="handleSubmit(true)"
+      >
+        同意授权
+      </VbenButton>
+      <VbenButton
+        :class="{
+          'cursor-wait': loading,
+        }"
+        :loading="loading"
+        aria-label="login"
+        class="w-1/3"
+        variant="outline"
+        @click="handleSubmit(false)"
+      >
+        拒绝
+      </VbenButton>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/_core/profile/index.vue b/apps/web-tdesign/src/views/_core/profile/index.vue
new file mode 100644
index 000000000..fc8b772ab
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/profile/index.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { SystemUserProfileApi } from '#/api/system/user/profile';
+
+import { onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { Card, Tabs } from 'tdesign-vue-next';
+
+import { getUserProfile } from '#/api/system/user/profile';
+import { useAuthStore } from '#/store';
+
+import BaseInfo from './modules/base-info.vue';
+import ProfileUser from './modules/profile-user.vue';
+import ResetPwd from './modules/reset-pwd.vue';
+import UserSocial from './modules/user-social.vue';
+
+const authStore = useAuthStore();
+const activeName = ref('basicInfo');
+
+/** 加载个人信息 */
+const profile = ref<SystemUserProfileApi.UserProfileRespVO>();
+async function loadProfile() {
+  profile.value = await getUserProfile();
+}
+
+/** 刷新个人信息 */
+async function refreshProfile() {
+  // 加载个人信息
+  await loadProfile();
+
+  // 更新 store
+  await authStore.fetchUserInfo();
+}
+
+/** 初始化 */
+onMounted(loadProfile);
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex">
+      <!-- 左侧 个人信息 -->
+      <Card class="w-2/5" title="个人信息">
+        <ProfileUser :profile="profile" @success="refreshProfile" />
+      </Card>
+
+      <!-- 右侧 标签页 -->
+      <Card class="ml-3 w-3/5">
+        <Tabs v-model:active-key="activeName" class="-mt-4">
+          <Tabs.TabPane key="basicInfo" tab="基本设置">
+            <BaseInfo :profile="profile" @success="refreshProfile" />
+          </Tabs.TabPane>
+          <Tabs.TabPane key="resetPwd" tab="密码设置">
+            <ResetPwd />
+          </Tabs.TabPane>
+          <Tabs.TabPane key="userSocial" tab="社交绑定" force-render>
+            <UserSocial @update:active-name="activeName = $event" />
+          </Tabs.TabPane>
+          <!-- TODO @芋艿：在线设备 -->
+        </Tabs>
+      </Card>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/_core/profile/modules/base-info.vue b/apps/web-tdesign/src/views/_core/profile/modules/base-info.vue
new file mode 100644
index 000000000..9b386b800
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/profile/modules/base-info.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import type { SystemUserProfileApi } from '#/api/system/user/profile';
+
+import { watch } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { $t } from '@vben/locales';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { updateUserProfile } from '#/api/system/user/profile';
+
+const props = defineProps<{
+  profile?: SystemUserProfileApi.UserProfileRespVO;
+}>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+}>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    labelWidth: 70,
+  },
+  schema: [
+    {
+      label: '用户昵称',
+      fieldName: 'nickname',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户昵称',
+      },
+      rules: 'required',
+    },
+    {
+      label: '用户手机',
+      fieldName: 'mobile',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户手机',
+      },
+      rules: z.string(),
+    },
+    {
+      label: '用户邮箱',
+      fieldName: 'email',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户邮箱',
+      },
+      rules: z.string().email('请输入正确的邮箱'),
+    },
+    {
+      label: '用户性别',
+      fieldName: 'sex',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number(),
+    },
+  ],
+  resetButtonOptions: {
+    show: false,
+  },
+  submitButtonOptions: {
+    content: '更新信息',
+  },
+  handleSubmit,
+});
+
+async function handleSubmit(values: Recordable<any>) {
+  try {
+    formApi.setLoading(true);
+    // 提交表单
+    await updateUserProfile(values as SystemUserProfileApi.UpdateProfileReqVO);
+    // 关闭并提示
+    emit('success');
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } catch (error) {
+    console.error(error);
+  } finally {
+    formApi.setLoading(false);
+  }
+}
+
+/** 监听 profile 变化 */
+watch(
+  () => props.profile,
+  (newProfile) => {
+    if (newProfile) {
+      formApi.setValues(newProfile);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="mt-4 md:w-full lg:w-1/2 2xl:w-2/5">
+    <Form />
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/_core/profile/modules/profile-user.vue b/apps/web-tdesign/src/views/_core/profile/modules/profile-user.vue
new file mode 100644
index 000000000..c33ce5bb7
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/profile/modules/profile-user.vue
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import type { SystemUserProfileApi } from '#/api/system/user/profile';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { preferences } from '@vben/preferences';
+import { formatDateTime } from '@vben/utils';
+
+import { Descriptions, DescriptionsItem, Tooltip } from 'tdesign-vue-next';
+
+import { updateUserProfile } from '#/api/system/user/profile';
+import { CropperAvatar } from '#/components/cropper';
+import { useUpload } from '#/components/upload/use-upload';
+
+const props = defineProps<{
+  profile?: SystemUserProfileApi.UserProfileRespVO;
+}>();
+
+const emit = defineEmits<{
+  (e: 'success'): void;
+}>();
+
+const avatar = computed(
+  () => props.profile?.avatar || preferences.app.defaultAvatar,
+);
+
+async function handelUpload({
+  file,
+  filename,
+}: {
+  file: Blob;
+  filename: string;
+}) {
+  // 1. 上传头像，获取 URL
+  const { httpRequest } = useUpload();
+  // 将 Blob 转换为 File
+  const fileObj = new File([file], filename, { type: file.type });
+  const avatar = await httpRequest(fileObj);
+  // 2. 更新用户头像
+  await updateUserProfile({ avatar });
+}
+</script>
+
+<template>
+  <div v-if="profile">
+    <div class="flex flex-col items-center">
+      <Tooltip title="点击上传头像">
+        <CropperAvatar
+          :show-btn="false"
+          :upload-api="handelUpload"
+          :value="avatar"
+          :width="120"
+          @change="emit('success')"
+        />
+      </Tooltip>
+    </div>
+    <div class="mt-8">
+      <Descriptions :column="2">
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:user-outlined" class="mr-1" />
+              用户账号
+            </div>
+          </template>
+          {{ profile.username }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon
+                icon="ant-design:user-switch-outlined"
+                class="mr-1"
+              />
+              所属角色
+            </div>
+          </template>
+          {{ profile.roles.map((role) => role.name).join(',') }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:phone-outlined" class="mr-1" />
+              手机号码
+            </div>
+          </template>
+          {{ profile.mobile }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:mail-outlined" class="mr-1" />
+              用户邮箱
+            </div>
+          </template>
+          {{ profile.email }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:team-outlined" class="mr-1" />
+              所属部门
+            </div>
+          </template>
+          {{ profile.dept?.name }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon
+                icon="ant-design:usergroup-add-outlined"
+                class="mr-1"
+              />
+              所属岗位
+            </div>
+          </template>
+          {{
+            profile.posts && profile.posts.length > 0
+              ? profile.posts.map((post) => post.name).join(',')
+              : '-'
+          }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon
+                icon="ant-design:clock-circle-outlined"
+                class="mr-1"
+              />
+              创建时间
+            </div>
+          </template>
+          {{ formatDateTime(profile.createTime) }}
+        </DescriptionsItem>
+        <DescriptionsItem>
+          <template #label>
+            <div class="flex items-center">
+              <IconifyIcon icon="ant-design:login-outlined" class="mr-1" />
+              登录时间
+            </div>
+          </template>
+          {{ formatDateTime(profile.loginDate) }}
+        </DescriptionsItem>
+      </Descriptions>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/_core/profile/modules/reset-pwd.vue b/apps/web-tdesign/src/views/_core/profile/modules/reset-pwd.vue
new file mode 100644
index 000000000..7e00bd184
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/profile/modules/reset-pwd.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { $t } from '@vben/locales';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { updateUserPassword } from '#/api/system/user/profile';
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    labelWidth: 70,
+  },
+  schema: [
+    {
+      component: 'InputPassword',
+      fieldName: 'oldPassword',
+      label: '旧密码',
+      rules: z
+        .string({ message: '请输入密码' })
+        .min(5, '密码长度不能少于 5 个字符')
+        .max(20, '密码长度不能超过 20 个字符'),
+    },
+    {
+      component: 'InputPassword',
+      dependencies: {
+        rules(values) {
+          return z
+            .string({ message: '请输入新密码' })
+            .min(5, '密码长度不能少于 5 个字符')
+            .max(20, '密码长度不能超过 20 个字符')
+            .refine(
+              (value) => value !== values.oldPassword,
+              '新旧密码不能相同',
+            );
+        },
+        triggerFields: ['newPassword', 'oldPassword'],
+      },
+      fieldName: 'newPassword',
+      label: '新密码',
+      rules: 'required',
+    },
+    {
+      component: 'InputPassword',
+      dependencies: {
+        rules(values) {
+          return z
+            .string({ message: '请输入确认密码' })
+            .min(5, '密码长度不能少于 5 个字符')
+            .max(20, '密码长度不能超过 20 个字符')
+            .refine(
+              (value) => value === values.newPassword,
+              '新密码和确认密码不一致',
+            );
+        },
+        triggerFields: ['newPassword', 'confirmPassword'],
+      },
+      fieldName: 'confirmPassword',
+      label: '确认密码',
+      rules: 'required',
+    },
+  ],
+  resetButtonOptions: {
+    show: false,
+  },
+  submitButtonOptions: {
+    content: '修改密码',
+  },
+  handleSubmit,
+});
+
+async function handleSubmit(values: Recordable<any>) {
+  try {
+    formApi.setLoading(true);
+    // 提交表单
+    await updateUserPassword({
+      oldPassword: values.oldPassword,
+      newPassword: values.newPassword,
+    });
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } catch (error) {
+    console.error(error);
+  } finally {
+    formApi.setLoading(false);
+  }
+}
+</script>
+
+<template>
+  <div class="mt-4 md:w-full lg:w-1/2 2xl:w-2/5">
+    <Form />
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/_core/profile/modules/user-social.vue b/apps/web-tdesign/src/views/_core/profile/modules/user-social.vue
new file mode 100644
index 000000000..4577c39e2
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/profile/modules/user-social.vue
@@ -0,0 +1,208 @@
+<script setup lang="tsx">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemSocialUserApi } from '#/api/system/social/user';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { confirm } from '@vben/common-ui';
+import { DICT_TYPE, SystemUserSocialTypeEnum } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { getUrlValue } from '@vben/utils';
+
+import { Button, Card, Image } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { socialAuthRedirect } from '#/api/core/auth';
+import {
+  getBindSocialUserList,
+  socialBind,
+  socialUnbind,
+} from '#/api/system/social/user';
+import { $t } from '#/locales';
+
+const emit = defineEmits<{
+  (e: 'update:activeName', v: string): void;
+}>();
+
+const route = useRoute();
+/** 已经绑定的平台 */
+const bindList = ref<SystemSocialUserApi.SocialUser[]>([]);
+const allBindList = computed<any[]>(() => {
+  return Object.values(SystemUserSocialTypeEnum).map((social) => {
+    const socialUser = bindList.value.find((item) => item.type === social.type);
+    return {
+      ...social,
+      socialUser,
+    };
+  });
+});
+
+function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'type',
+      title: '绑定平台',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SOCIAL_TYPE },
+      },
+    },
+    {
+      field: 'openid',
+      title: '标识',
+      minWidth: 180,
+    },
+    {
+      field: 'nickname',
+      title: '昵称',
+      minWidth: 180,
+    },
+    {
+      field: 'operation',
+      title: '操作',
+      minWidth: 80,
+      align: 'center',
+      fixed: 'right',
+      slots: {
+        default: ({ row }: { row: SystemSocialUserApi.SocialUser }) => {
+          return (
+            <Button onClick={() => onUnbind(row)} variant="text">
+              解绑
+            </Button>
+          );
+        },
+      },
+    },
+  ];
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    minHeight: 0,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          bindList.value = await getBindSocialUserList();
+          return bindList.value;
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<SystemSocialUserApi.SocialUser>,
+});
+
+/** 解绑账号 */
+function onUnbind(row: SystemSocialUserApi.SocialUser) {
+  confirm({
+    content: `确定解绑[${getDictLabel(DICT_TYPE.SYSTEM_SOCIAL_TYPE, row.type)}]平台的[${row.openid}]账号吗？`,
+  }).then(async () => {
+    await socialUnbind({ type: row.type, openid: row.openid });
+    // 提示成功
+    message.success($t('ui.actionMessage.operationSuccess'));
+    await gridApi.reload();
+  });
+}
+
+/** 绑定账号（跳转授权页面） */
+async function onBind(bind: any) {
+  const type = bind.type;
+  if (type <= 0) {
+    return;
+  }
+  try {
+    // 计算 redirectUri
+    // tricky: type 需要先 encode 一次，否则钉钉回调会丢失。配合 getUrlValue() 使用
+    const redirectUri = `${location.origin}/profile?${encodeURIComponent(`type=${type}`)}`;
+
+    // 进行跳转
+    window.location.href = await socialAuthRedirect(type, redirectUri);
+  } catch (error) {
+    console.error('社交绑定处理失败:', error);
+  }
+}
+
+/** 监听路由变化，处理社交绑定回调 */
+async function bindSocial() {
+  // 社交绑定
+  const type = Number(getUrlValue('type'));
+  const code = route.query.code as string;
+  const state = route.query.state as string;
+  if (!code) {
+    return;
+  }
+  await socialBind({ type, code, state });
+  // 提示成功
+  message.success('绑定成功');
+  emit('update:activeName', 'userSocial');
+  await gridApi.reload();
+  // 清理 URL 参数，避免刷新重复触发
+  window.history.replaceState({}, '', location.pathname);
+}
+
+/** 初始化 */
+onMounted(() => {
+  bindSocial();
+});
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <Grid />
+
+    <div class="pb-3">
+      <div
+        class="grid grid-cols-1 gap-2 px-2 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3"
+      >
+        <Card v-for="item in allBindList" :key="item.type" class="!mb-2">
+          <div class="flex w-full items-center gap-4">
+            <Image
+              :src="item.img"
+              :width="40"
+              :height="40"
+              :alt="item.title"
+              :preview="false"
+            />
+            <div class="flex flex-1 items-center justify-between">
+              <div class="flex flex-col">
+                <h4 class="mb-1 text-sm text-black/85 dark:text-white/85">
+                  {{ getDictLabel(DICT_TYPE.SYSTEM_SOCIAL_TYPE, item.type) }}
+                </h4>
+                <span class="text-black/45 dark:text-white/45">
+                  <template v-if="item.socialUser">
+                    {{ item.socialUser?.nickname || item.socialUser?.openid }}
+                  </template>
+                  <template v-else>
+                    绑定
+                    {{ getDictLabel(DICT_TYPE.SYSTEM_SOCIAL_TYPE, item.type) }}
+                    账号
+                  </template>
+                </span>
+              </div>
+              <Button
+                :disabled="!!item.socialUser"
+                size="small"
+                variant="text"
+                @click="onBind(item)"
+              >
+                {{ item.socialUser ? '已绑定' : '绑定' }}
+              </Button>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/demos/tdesign/index.vue b/apps/web-tdesign/src/views/demos/tdesign/index.vue
deleted file mode 100644
index f44f96e50..000000000
--- a/apps/web-tdesign/src/views/demos/tdesign/index.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script lang="ts" setup>
-import { Page } from '@vben/common-ui';
-
-import { Button, Card, Space } from 'tdesign-vue-next';
-
-import { message, notification } from '#/adapter/tdesign';
-
-type NotificationType = 'error' | 'info' | 'success' | 'warning';
-
-function info() {
-  message.info('How many roads must a man walk down');
-}
-
-function error() {
-  message.error({
-    content: 'Once upon a time you dressed so fine',
-    duration: 2500,
-  });
-}
-
-function warning() {
-  message.warning('How many roads must a man walk down');
-}
-function success() {
-  message.success('Cause you walked hand in hand With another man in my place');
-}
-
-function notify(type: NotificationType) {
-  notification[type]({
-    duration: 2500,
-    title: '说点啥呢',
-  });
-}
-</script>
-
-<template>
-  <Page
-    description="支持多语言，主题功能集成切换等"
-    title="TDesign Vue组件使用演示"
-  >
-    <Card class="mb-5" title="按钮">
-      <Space>
-        <Button>Default</Button>
-        <Button theme="primary"> Primary </Button>
-        <Button theme="default"> Info </Button>
-        <Button theme="danger"> Error </Button>
-      </Space>
-    </Card>
-    <Card class="mb-5" title="Message">
-      <Space>
-        <Button @click="info"> 信息 </Button>
-        <Button theme="danger" @click="error"> 错误 </Button>
-        <Button @click="warning"> 警告 </Button>
-        <Button @click="success"> 成功 </Button>
-      </Space>
-    </Card>
-
-    <Card class="mb-5" title="Notification">
-      <Space>
-        <Button @click="notify('info')"> 信息 </Button>
-        <Button theme="danger" @click="notify('error')"> 错误 </Button>
-        <Button @click="notify('warning')"> 警告 </Button>
-        <Button @click="notify('success')"> 成功 </Button>
-      </Space>
-    </Card>
-  </Page>
-</template>
diff --git a/apps/web-tdesign/src/views/infra/apiAccessLog/data.ts b/apps/web-tdesign/src/views/infra/apiAccessLog/data.ts
new file mode 100644
index 000000000..83b2977c0
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/apiAccessLog/data.ts
@@ -0,0 +1,273 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { JsonViewer } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入用户编号',
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        allowClear: true,
+        placeholder: '请选择用户类型',
+      },
+    },
+    {
+      fieldName: 'applicationName',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入应用名',
+      },
+    },
+    {
+      fieldName: 'beginTime',
+      label: '请求时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'duration',
+      label: '执行时长',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入执行时长',
+      },
+    },
+    {
+      fieldName: 'resultCode',
+      label: '结果码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入结果码',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userType',
+      title: '用户类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      field: 'applicationName',
+      title: '应用名',
+      minWidth: 150,
+    },
+    {
+      field: 'requestMethod',
+      title: '请求方法',
+      minWidth: 80,
+    },
+    {
+      field: 'requestUrl',
+      title: '请求地址',
+      minWidth: 300,
+    },
+    {
+      field: 'beginTime',
+      title: '请求时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'duration',
+      title: '执行时长',
+      minWidth: 120,
+      formatter: ({ cellValue }) => `${cellValue} ms`,
+    },
+    {
+      field: 'resultCode',
+      title: '操作结果',
+      minWidth: 150,
+      formatter: ({ row }) => {
+        return row.resultCode === 0 ? '成功' : `失败(${row.resultMsg})`;
+      },
+    },
+    {
+      field: 'operateModule',
+      title: '操作模块',
+      minWidth: 150,
+    },
+    {
+      field: 'operateName',
+      title: '操作名',
+      minWidth: 220,
+    },
+    {
+      field: 'operateType',
+      title: '操作类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_OPERATE_TYPE },
+      },
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '日志编号',
+    },
+    {
+      field: 'traceId',
+      label: '链路追踪',
+    },
+    {
+      field: 'applicationName',
+      label: '应用名',
+    },
+    {
+      field: 'userId',
+      label: '用户Id',
+    },
+    {
+      field: 'userType',
+      label: '用户类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.USER_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'userIp',
+      label: '用户 IP',
+    },
+    {
+      field: 'userAgent',
+      label: '用户 UA',
+    },
+    {
+      field: 'requestMethod',
+      label: '请求信息',
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
+        }
+        return '';
+      },
+    },
+    {
+      field: 'requestParams',
+      label: '请求参数',
+      render: (val) => {
+        if (val) {
+          return h(JsonViewer, {
+            value: JSON.parse(val),
+            previewMode: true,
+          });
+        }
+        return '';
+      },
+    },
+    {
+      field: 'responseBody',
+      label: '请求结果',
+    },
+    {
+      label: '请求时间',
+      field: 'beginTime',
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
+        }
+        return '';
+      },
+    },
+    {
+      label: '请求耗时',
+      field: 'duration',
+      render: (val) => {
+        return val ? `${val} ms` : '';
+      },
+    },
+    {
+      label: '操作结果',
+      field: 'resultCode',
+      render: (val, data) => {
+        if (val === 0) {
+          return '正常';
+        } else if (val > 0 && data?.resultMsg) {
+          return `失败 | ${val} | ${data.resultMsg}`;
+        }
+        return '';
+      },
+    },
+    {
+      field: 'operateModule',
+      label: '操作模块',
+    },
+    {
+      field: 'operateName',
+      label: '操作名',
+    },
+    {
+      field: 'operateType',
+      label: '操作类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.INFRA_OPERATE_TYPE,
+          value: val,
+        });
+      },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/apiAccessLog/index.vue b/apps/web-tdesign/src/views/infra/apiAccessLog/index.vue
new file mode 100644
index 000000000..251825e1e
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/apiAccessLog/index.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  exportApiAccessLog,
+  getApiAccessLogPage,
+} from '#/api/infra/api-access-log';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportApiAccessLog(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: 'API 访问日志.xls', source: data });
+}
+
+/** 查看 API 访问日志详情 */
+function handleDetail(row: InfraApiAccessLogApi.ApiAccessLog) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getApiAccessLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraApiAccessLogApi.ApiAccessLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="API 访问日志列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:api-access-log:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['infra:api-access-log:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/apiAccessLog/modules/detail.vue b/apps/web-tdesign/src/views/infra/apiAccessLog/modules/detail.vue
new file mode 100644
index 000000000..badc9376c
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/apiAccessLog/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraApiAccessLogApi.ApiAccessLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="API 访问日志详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/apiErrorLog/data.ts b/apps/web-tdesign/src/views/infra/apiErrorLog/data.ts
new file mode 100644
index 000000000..1a8c545fe
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/apiErrorLog/data.ts
@@ -0,0 +1,249 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { JsonViewer } from '@vben/common-ui';
+import { DICT_TYPE, InfraApiErrorLogProcessStatusEnum } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入用户编号',
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        allowClear: true,
+        placeholder: '请选择用户类型',
+      },
+    },
+    {
+      fieldName: 'applicationName',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入应用名',
+      },
+    },
+    {
+      fieldName: 'exceptionTime',
+      label: '异常时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'processStatus',
+      label: '处理状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
+          'number',
+        ),
+        allowClear: true,
+        placeholder: '请选择处理状态',
+      },
+      defaultValue: InfraApiErrorLogProcessStatusEnum.INIT,
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userType',
+      title: '用户类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      field: 'applicationName',
+      title: '应用名',
+      minWidth: 150,
+    },
+    {
+      field: 'requestMethod',
+      title: '请求方法',
+      minWidth: 80,
+    },
+    {
+      field: 'requestUrl',
+      title: '请求地址',
+      minWidth: 200,
+    },
+    {
+      field: 'exceptionTime',
+      title: '异常发生时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'exceptionName',
+      title: '异常名',
+      minWidth: 180,
+    },
+    {
+      field: 'processStatus',
+      title: '处理状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      minWidth: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '日志编号',
+    },
+    {
+      field: 'traceId',
+      label: '链路追踪',
+    },
+    {
+      field: 'applicationName',
+      label: '应用名',
+    },
+    {
+      field: 'userId',
+      label: '用户Id',
+    },
+    {
+      field: 'userType',
+      label: '用户类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.USER_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'userIp',
+      label: '用户 IP',
+    },
+    {
+      field: 'userAgent',
+      label: '用户 UA',
+    },
+    {
+      field: 'requestMethod',
+      label: '请求信息',
+      render: (val, data) => {
+        if (val && data?.requestUrl) {
+          return `${val} ${data.requestUrl}`;
+        }
+        return '';
+      },
+    },
+    {
+      field: 'requestParams',
+      label: '请求参数',
+      render: (val) => {
+        if (val) {
+          return h(JsonViewer, {
+            value: JSON.parse(val),
+            previewMode: true,
+          });
+        }
+        return '';
+      },
+    },
+    {
+      field: 'exceptionTime',
+      label: '异常时间',
+      render: (val) => {
+        return formatDateTime(val) as string;
+      },
+    },
+    {
+      field: 'exceptionName',
+      label: '异常名',
+    },
+    {
+      field: 'exceptionStackTrace',
+      label: '异常堆栈',
+      show: (val) => !val,
+      render: (val) => {
+        if (val) {
+          return h('textarea', {
+            value: val,
+            style:
+              'width: 100%; min-height: 200px; max-height: 400px; resize: vertical;',
+            readonly: true,
+          });
+        }
+        return '';
+      },
+    },
+    {
+      field: 'processStatus',
+      label: '处理状态',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.INFRA_API_ERROR_LOG_PROCESS_STATUS,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'processUserId',
+      label: '处理人',
+      show: (val) => !val,
+    },
+    {
+      field: 'processTime',
+      label: '处理时间',
+      show: (val) => !val,
+      render: (val) => {
+        return formatDateTime(val) as string;
+      },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/apiErrorLog/index.vue b/apps/web-tdesign/src/views/infra/apiErrorLog/index.vue
new file mode 100644
index 000000000..df3c279d5
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/apiErrorLog/index.vue
@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { InfraApiErrorLogProcessStatusEnum } from '@vben/constants';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  exportApiErrorLog,
+  getApiErrorLogPage,
+  updateApiErrorLogStatus,
+} from '#/api/infra/api-error-log';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportApiErrorLog(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: 'API 错误日志.xls', source: data });
+}
+
+/** 查看 API 错误日志详情 */
+function handleDetail(row: InfraApiErrorLogApi.ApiErrorLog) {
+  detailModalApi.setData(row).open();
+}
+
+/** 处理已处理 / 已忽略的操作 */
+async function handleProcess(id: number, processStatus: number) {
+  await confirm({
+    content: `确认标记为${InfraApiErrorLogProcessStatusEnum.DONE ? '已处理' : '已忽略'}?`,
+  });
+  const hideLoading = message.loading({
+    content: '正在处理中...',
+    duration: 0,
+  });
+  try {
+    await updateApiErrorLogStatus(id, processStatus);
+    message.success($t('ui.actionMessage.operationSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getApiErrorLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraApiErrorLogApi.ApiErrorLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="API 错误日志列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:api-error-log:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['infra:api-error-log:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: '已处理',
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:api-error-log:update-status'],
+              ifShow:
+                row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT,
+              onClick: handleProcess.bind(
+                null,
+                row.id,
+                InfraApiErrorLogProcessStatusEnum.DONE,
+              ),
+            },
+            {
+              label: '已忽略',
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:api-error-log:update-status'],
+              ifShow:
+                row.processStatus === InfraApiErrorLogProcessStatusEnum.INIT,
+              onClick: handleProcess.bind(
+                null,
+                row.id,
+                InfraApiErrorLogProcessStatusEnum.IGNORE,
+              ),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/apiErrorLog/modules/detail.vue b/apps/web-tdesign/src/views/infra/apiErrorLog/modules/detail.vue
new file mode 100644
index 000000000..da52c17fa
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/apiErrorLog/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraApiErrorLogApi.ApiErrorLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="API 错误日志详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/build/index.vue b/apps/web-tdesign/src/views/infra/build/index.vue
new file mode 100644
index 000000000..0a12d2721
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/build/index.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+</script>
+
+<template>
+  <Page> 待完成 </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/data.ts b/apps/web-tdesign/src/views/infra/codegen/data.ts
new file mode 100644
index 000000000..b07ea2a32
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/data.ts
@@ -0,0 +1,552 @@
+import type { Recordable } from '@vben/types';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+import type { SystemMenuApi } from '#/api/system/menu';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import { getDataSourceConfigList } from '#/api/infra/data-source-config';
+import { getMenuList } from '#/api/system/menu';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 导入数据库表的表单 */
+export function useImportTableFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'dataSourceConfigId',
+      label: '数据源',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getDataSourceConfigList,
+        labelField: 'name',
+        valueField: 'id',
+        autoSelect: 'first',
+        placeholder: '请选择数据源',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'name',
+      label: '表名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入表名称',
+      },
+    },
+    {
+      fieldName: 'comment',
+      label: '表描述',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入表描述',
+      },
+    },
+  ];
+}
+
+/** 导入数据库表表格列定义 */
+export function useImportTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    { field: 'name', title: '表名称', minWidth: 200 },
+    { field: 'comment', title: '表描述', minWidth: 200 },
+  ];
+}
+
+/** 基本信息表单的 schema */
+export function useBasicInfoFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'tableName',
+      label: '表名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入仓库名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'tableComment',
+      label: '表描述',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入表描述',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'className',
+      label: '实体类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入实体类名称',
+      },
+      rules: 'required',
+      help: '默认去除表名的前缀。如果存在重复，则需要手动添加前缀，避免 MyBatis 报 Alias 重复的问题。',
+    },
+    {
+      fieldName: 'author',
+      label: '作者',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入作者',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        rows: 3,
+        placeholder: '请输入备注',
+      },
+      formItemClass: 'md:col-span-2',
+    },
+  ];
+}
+
+/** 生成信息表单基础 schema */
+export function useGenerationInfoBaseFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Select',
+      fieldName: 'templateType',
+      label: '生成模板',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE,
+          'number',
+        ),
+        class: 'w-full',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'Select',
+      fieldName: 'frontType',
+      label: '前端类型',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_CODEGEN_FRONT_TYPE, 'number'),
+        class: 'w-full',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'Select',
+      fieldName: 'scene',
+      label: '生成场景',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_CODEGEN_SCENE, 'number'),
+        class: 'w-full',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'parentMenuId',
+      label: '上级菜单',
+      help: '分配到指定菜单下，例如 系统管理',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getMenuList();
+          data.unshift({
+            id: 0,
+            name: '顶级菜单',
+          } as SystemMenuApi.Menu);
+          return handleTree(data);
+        },
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择上级菜单',
+        filterTreeNode(input: string, node: Recordable<any>) {
+          if (!input || input.length === 0) {
+            return true;
+          }
+          const name: string = node.label ?? '';
+          if (!name) return false;
+          return name.includes(input) || $t(name).includes(input);
+        },
+        showSearch: true,
+        treeDefaultExpandedKeys: [0],
+      },
+      rules: 'selectRequired',
+      renderComponentContent() {
+        return {
+          title({ label, icon }: { icon: string; label: string }) {
+            const components = [];
+            if (!label) return '';
+            if (icon) {
+              components.push(h(IconifyIcon, { class: 'size-4', icon }));
+            }
+            components.push(h('span', { class: '' }, $t(label || '')));
+            return h('div', { class: 'flex items-center gap-1' }, components);
+          },
+        };
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'moduleName',
+      label: '模块名',
+      help: '模块名，即一级目录，例如 system、infra、tool 等等',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'businessName',
+      label: '业务名',
+      help: '业务名，即二级目录，例如 user、permission、dict 等等',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'className',
+      label: '类名称',
+      help: '类名称（首字母大写），例如SysUser、SysMenu、SysDictData 等等',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'classComment',
+      label: '类描述',
+      help: '用作类描述，例如 用户',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 树表信息 schema */
+export function useGenerationInfoTreeFormSchema(
+  columns: InfraCodegenApi.CodegenColumn[] = [],
+): VbenFormSchema[] {
+  return [
+    {
+      component: 'Divider',
+      fieldName: 'treeDivider',
+      label: '',
+      renderComponentContent: () => {
+        return {
+          default: () => ['树表信息'],
+        };
+      },
+      formItemClass: 'md:col-span-2',
+    },
+    {
+      component: 'Select',
+      fieldName: 'treeParentColumnId',
+      label: '父编号字段',
+      help: '树显示的父编码字段名，例如 parent_Id',
+      componentProps: {
+        class: 'w-full',
+        allowClear: true,
+        placeholder: '请选择',
+        options: columns.map((column) => ({
+          label: column.columnName,
+          value: column.id,
+        })),
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'Select',
+      fieldName: 'treeNameColumnId',
+      label: '名称字段',
+      help: '树节点显示的名称字段，一般是 name',
+      componentProps: {
+        class: 'w-full',
+        allowClear: true,
+        placeholder: '请选择名称字段',
+        options: columns.map((column) => ({
+          label: column.columnName,
+          value: column.id,
+        })),
+      },
+      rules: 'selectRequired',
+    },
+  ];
+}
+
+/** 主子表信息 schema */
+export function useGenerationInfoSubTableFormSchema(
+  columns: InfraCodegenApi.CodegenColumn[] = [],
+  tables: InfraCodegenApi.CodegenTable[] = [],
+): VbenFormSchema[] {
+  return [
+    {
+      component: 'Divider',
+      fieldName: 'subDivider',
+      label: '',
+      renderComponentContent: () => {
+        return {
+          default: () => ['主子表信息'],
+        };
+      },
+      formItemClass: 'md:col-span-2',
+    },
+    {
+      component: 'Select',
+      fieldName: 'masterTableId',
+      label: '关联的主表',
+      help: '关联主表（父表）的表名， 如：system_user',
+      componentProps: {
+        class: 'w-full',
+        allowClear: true,
+        placeholder: '请选择',
+        options: tables.map((table) => ({
+          label: `${table.tableName}：${table.tableComment}`,
+          value: table.id,
+        })),
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'Select',
+      fieldName: 'subJoinColumnId',
+      label: '子表关联的字段',
+      help: '子表关联的字段， 如：user_id',
+      componentProps: {
+        class: 'w-full',
+        allowClear: true,
+        placeholder: '请选择',
+        options: columns.map((column) => ({
+          label: `${column.columnName}:${column.columnComment}`,
+          value: column.id,
+        })),
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'RadioGroup',
+      fieldName: 'subJoinMany',
+      label: '关联关系',
+      help: '主表与子表的关联关系',
+      componentProps: {
+        class: 'w-full',
+        allowClear: true,
+        placeholder: '请选择',
+        options: [
+          {
+            label: '一对多',
+            value: true,
+          },
+          {
+            label: '一对一',
+            value: false,
+          },
+        ],
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'tableName',
+      label: '表名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入表名称',
+      },
+    },
+    {
+      fieldName: 'tableComment',
+      label: '表描述',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入表描述',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  getDataSourceConfigName?: (dataSourceConfigId: number) => string | undefined,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'dataSourceConfigId',
+      title: '数据源',
+      minWidth: 120,
+      formatter: ({ cellValue }) => getDataSourceConfigName?.(cellValue) || '-',
+    },
+    {
+      field: 'tableName',
+      title: '表名称',
+      minWidth: 200,
+    },
+    {
+      field: 'tableComment',
+      title: '表描述',
+      minWidth: 200,
+    },
+    {
+      field: 'className',
+      title: '实体',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 代码生成表格列定义 */
+export function useCodegenColumnTableColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { field: 'columnName', title: '字段列名', minWidth: 130 },
+    {
+      field: 'columnComment',
+      title: '字段描述',
+      minWidth: 100,
+      slots: { default: 'columnComment' },
+    },
+    { field: 'dataType', title: '物理类型', minWidth: 100 },
+    {
+      field: 'javaType',
+      title: 'Java 类型',
+      minWidth: 130,
+      slots: { default: 'javaType' },
+      params: {
+        options: [
+          { label: 'Long', value: 'Long' },
+          { label: 'String', value: 'String' },
+          { label: 'Integer', value: 'Integer' },
+          { label: 'Double', value: 'Double' },
+          { label: 'BigDecimal', value: 'BigDecimal' },
+          { label: 'LocalDateTime', value: 'LocalDateTime' },
+          { label: 'Boolean', value: 'Boolean' },
+        ],
+      },
+    },
+    {
+      field: 'javaField',
+      title: 'Java 属性',
+      minWidth: 100,
+      slots: { default: 'javaField' },
+    },
+    {
+      field: 'createOperation',
+      title: '插入',
+      width: 40,
+      slots: { default: 'createOperation' },
+    },
+    {
+      field: 'updateOperation',
+      title: '编辑',
+      width: 40,
+      slots: { default: 'updateOperation' },
+    },
+    {
+      field: 'listOperationResult',
+      title: '列表',
+      width: 40,
+      slots: { default: 'listOperationResult' },
+    },
+    {
+      field: 'listOperation',
+      title: '查询',
+      width: 40,
+      slots: { default: 'listOperation' },
+    },
+    {
+      field: 'listOperationCondition',
+      title: '查询方式',
+      minWidth: 100,
+      slots: { default: 'listOperationCondition' },
+      params: {
+        options: [
+          { label: '=', value: '=' },
+          { label: '!=', value: '!=' },
+          { label: '>', value: '>' },
+          { label: '>=', value: '>=' },
+          { label: '<', value: '<' },
+          { label: '<=', value: '<=' },
+          { label: 'LIKE', value: 'LIKE' },
+          { label: 'BETWEEN', value: 'BETWEEN' },
+        ],
+      },
+    },
+    {
+      field: 'nullable',
+      title: '允许空',
+      width: 60,
+      slots: { default: 'nullable' },
+    },
+    {
+      field: 'htmlType',
+      title: '显示类型',
+      width: 130,
+      slots: { default: 'htmlType' },
+      params: {
+        options: [
+          { label: '文本框', value: 'input' },
+          { label: '文本域', value: 'textarea' },
+          { label: '下拉框', value: 'select' },
+          { label: '单选框', value: 'radio' },
+          { label: '复选框', value: 'checkbox' },
+          { label: '日期控件', value: 'datetime' },
+          { label: '图片上传', value: 'imageUpload' },
+          { label: '文件上传', value: 'fileUpload' },
+          { label: '富文本控件', value: 'editor' },
+        ],
+      },
+    },
+    {
+      field: 'dictType',
+      title: '字典类型',
+      width: 120,
+      slots: { default: 'dictType' },
+    },
+    {
+      field: 'example',
+      title: '示例',
+      minWidth: 100,
+      slots: { default: 'example' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/codegen/edit/index.vue b/apps/web-tdesign/src/views/infra/codegen/edit/index.vue
new file mode 100644
index 000000000..dbec22cf5
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/edit/index.vue
@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+
+import { ref, unref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+
+import { Button, Steps } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { getCodegenTable, updateCodegenTable } from '#/api/infra/codegen';
+import { $t } from '#/locales';
+
+import BasicInfo from '../modules/basic-info.vue';
+import ColumnInfo from '../modules/column-info.vue';
+import GenerationInfo from '../modules/generation-info.vue';
+
+const route = useRoute();
+const router = useRouter();
+const loading = ref(false);
+const currentStep = ref(0);
+const formData = ref<InfraCodegenApi.CodegenDetail>({
+  table: {} as InfraCodegenApi.CodegenTable,
+  columns: [],
+});
+
+/** 表单引用 */
+const basicInfoRef = ref<InstanceType<typeof BasicInfo>>();
+const columnInfoRef = ref<InstanceType<typeof ColumnInfo>>();
+const generateInfoRef = ref<InstanceType<typeof GenerationInfo>>();
+
+/** 获取详情数据 */
+async function getDetail() {
+  const id = route.query.id as any;
+  if (!id) {
+    return;
+  }
+  loading.value = true;
+  try {
+    formData.value = await getCodegenTable(id);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 提交表单 */
+async function submitForm() {
+  // 表单验证
+  const basicInfoValid = await basicInfoRef.value?.validate();
+  if (!basicInfoValid) {
+    message.warning('保存失败，原因：基本信息表单校验失败请检查！！！');
+    return;
+  }
+  const generateInfoValid = await generateInfoRef.value?.validate();
+  if (!generateInfoValid) {
+    message.warning('保存失败，原因：生成信息表单校验失败请检查！！！');
+    return;
+  }
+
+  // 提交表单
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.updating'),
+    duration: 0,
+  });
+  try {
+    // 拼接相关信息
+    const basicInfo = await basicInfoRef.value?.getValues();
+    const columns = columnInfoRef.value?.getData() || unref(formData).columns;
+    const generateInfo = await generateInfoRef.value?.getValues();
+    await updateCodegenTable({
+      table: { ...unref(formData).table, ...basicInfo, ...generateInfo },
+      columns,
+    });
+    // 关闭并提示
+    message.success($t('ui.actionMessage.operationSuccess'));
+    close();
+  } catch (error) {
+    console.error('保存失败', error);
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 返回列表 */
+const tabs = useTabs();
+function close() {
+  tabs.closeCurrentTab();
+  router.push({ name: 'InfraCodegen' });
+}
+
+/** 下一步 */
+function nextStep() {
+  currentStep.value += 1;
+}
+
+/** 上一步 */
+function prevStep() {
+  if (currentStep.value > 0) {
+    currentStep.value -= 1;
+  }
+}
+
+/** 步骤配置 */
+const steps = [
+  {
+    title: '基本信息',
+  },
+  {
+    title: '字段信息',
+  },
+  {
+    title: '生成信息',
+  },
+];
+
+// 初始化
+getDetail();
+</script>
+
+<template>
+  <Page auto-content-height v-loading="loading">
+    <div class="bg-card flex h-[95%] flex-col rounded-md p-4">
+      <Steps
+        type="navigation"
+        v-model:current="currentStep"
+        class="mb-8 rounded shadow-sm"
+      >
+        <Steps.Step
+          v-for="(step, index) in steps"
+          :key="index"
+          :title="step.title"
+        />
+      </Steps>
+
+      <div class="flex-1 overflow-auto py-4">
+        <!-- 根据当前步骤显示对应的组件 -->
+        <BasicInfo
+          v-show="currentStep === 0"
+          ref="basicInfoRef"
+          :table="formData.table"
+        />
+        <ColumnInfo
+          v-show="currentStep === 1"
+          ref="columnInfoRef"
+          :columns="formData.columns"
+        />
+        <GenerationInfo
+          v-show="currentStep === 2"
+          ref="generateInfoRef"
+          :table="formData.table"
+          :columns="formData.columns"
+        />
+      </div>
+
+      <div class="mt-4 flex justify-end space-x-2">
+        <Button :disabled="currentStep === 0" @click="prevStep">上一步</Button>
+        <Button :disabled="currentStep === steps.length - 1" @click="nextStep">
+          下一步
+        </Button>
+        <Button theme="primary" :loading="loading" @click="submitForm">
+          保存
+        </Button>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/index.vue b/apps/web-tdesign/src/views/infra/codegen/index.vue
new file mode 100644
index 000000000..409861421
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/index.vue
@@ -0,0 +1,286 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteCodegenTable,
+  deleteCodegenTableList,
+  downloadCodegen,
+  getCodegenTablePage,
+  syncCodegenFromDB,
+} from '#/api/infra/codegen';
+import { getDataSourceConfigList } from '#/api/infra/data-source-config';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import ImportTable from './modules/import-table.vue';
+import PreviewCode from './modules/preview-code.vue';
+
+const router = useRouter();
+const dataSourceConfigList = ref<InfraDataSourceConfigApi.DataSourceConfig[]>(
+  [],
+);
+
+/** 获取数据源名称 */
+const getDataSourceConfigName = (dataSourceConfigId: number) => {
+  return dataSourceConfigList.value.find(
+    (item) => item.id === dataSourceConfigId,
+  )?.name;
+};
+
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportTable,
+  destroyOnClose: true,
+});
+
+const [PreviewModal, previewModalApi] = useVbenModal({
+  connectedComponent: PreviewCode,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导入表格 */
+function handleImport() {
+  importModalApi.open();
+}
+
+/** 预览代码 */
+function handlePreview(row: InfraCodegenApi.CodegenTable) {
+  previewModalApi.setData(row).open();
+}
+
+/** 编辑表格 */
+function handleEdit(row: InfraCodegenApi.CodegenTable) {
+  router.push({ name: 'InfraCodegenEdit', query: { id: row.id } });
+}
+
+/** 删除代码生成配置 */
+async function handleDelete(row: InfraCodegenApi.CodegenTable) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.tableName]),
+    duration: 0,
+  });
+  try {
+    await deleteCodegenTable(row.id);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.tableName]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除代码生成配置 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteCodegenTableList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraCodegenApi.CodegenTable[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 同步数据库 */
+async function handleSync(row: InfraCodegenApi.CodegenTable) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.updating', [row.tableName]),
+    duration: 0,
+  });
+  try {
+    await syncCodegenFromDB(row.id);
+    message.success($t('ui.actionMessage.updateSuccess', [row.tableName]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 生成代码 */
+async function handleGenerate(row: InfraCodegenApi.CodegenTable) {
+  const hideLoading = message.loading({
+    content: '正在生成代码...',
+    duration: 0,
+  });
+  try {
+    const res = await downloadCodegen(row.id);
+    const blob = new Blob([res], { type: 'application/zip' });
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `codegen-${row.className}.zip`;
+    link.click();
+    window.URL.revokeObjectURL(url);
+    message.success('代码生成成功');
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(getDataSourceConfigName),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCodegenTablePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraCodegenApi.CodegenTable>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 获取数据源配置列表 */
+// TODO @芋艿：这种场景的最佳实践；
+async function initDataSourceConfig() {
+  try {
+    dataSourceConfigList.value = await getDataSourceConfigList();
+  } catch (error) {
+    console.error('获取数据源配置失败', error);
+  }
+}
+
+/** 初始化 */
+initDataSourceConfig();
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="代码生成（单表）"
+        url="https://doc.iocoder.cn/new-feature/"
+      />
+      <DocAlert
+        title="代码生成（树表）"
+        url="https://doc.iocoder.cn/new-feature/tree/"
+      />
+      <DocAlert
+        title="代码生成（主子表）"
+        url="https://doc.iocoder.cn/new-feature/master-sub/"
+      />
+      <DocAlert title="单元测试" url="https://doc.iocoder.cn/unit-test/" />
+    </template>
+
+    <ImportModal @success="handleRefresh" />
+    <PreviewModal />
+    <Grid table-title="代码生成列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.import'),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:codegen:create'],
+              onClick: handleImport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:codegen:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '预览',
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['infra:codegen:preview'],
+              onClick: handlePreview.bind(null, row),
+            },
+            {
+              label: '生成代码',
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:codegen:download'],
+              onClick: handleGenerate.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              auth: ['infra:codegen:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '同步',
+              type: 'primary',
+              variant: 'text',
+              auth: ['infra:codegen:update'],
+              onClick: handleSync.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              auth: ['infra:codegen:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.tableName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/modules/basic-info.vue b/apps/web-tdesign/src/views/infra/codegen/modules/basic-info.vue
new file mode 100644
index 000000000..00c49911b
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/modules/basic-info.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+
+import { watch } from 'vue';
+
+import { useVbenForm } from '#/adapter/form';
+
+import { useBasicInfoFormSchema } from '../data';
+
+const props = defineProps<{
+  table: InfraCodegenApi.CodegenTable;
+}>();
+
+/** 表单实例 */
+const [Form, formApi] = useVbenForm({
+  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4', // 配置表单布局为两列
+  schema: useBasicInfoFormSchema(),
+  layout: 'horizontal',
+  showDefaultActions: false,
+});
+
+/** 动态更新表单值 */
+watch(
+  () => props.table,
+  (val: any) => {
+    if (!val) {
+      return;
+    }
+    formApi.setValues(val);
+  },
+  { immediate: true },
+);
+
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: async () => {
+    const { valid } = await formApi.validate();
+    return valid;
+  },
+  getValues: formApi.getValues,
+});
+</script>
+<template>
+  <Form />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/modules/column-info.vue b/apps/web-tdesign/src/views/infra/codegen/modules/column-info.vue
new file mode 100644
index 000000000..148e311d0
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/modules/column-info.vue
@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+import type { SystemDictTypeApi } from '#/api/system/dict/type';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { Checkbox, Input, Select } from 'tdesign-vue-next';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSimpleDictTypeList } from '#/api/system/dict/type';
+
+import { useCodegenColumnTableColumns } from '../data';
+
+const props = defineProps<{
+  columns?: InfraCodegenApi.CodegenColumn[];
+}>();
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useCodegenColumnTableColumns(),
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 监听外部传入的列数据 */
+watch(
+  () => props.columns,
+  async (columns) => {
+    if (!columns) {
+      return;
+    }
+    await nextTick();
+    gridApi.grid?.loadData(columns);
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 提供获取表格数据的方法供父组件调用 */
+defineExpose({
+  getData: (): InfraCodegenApi.CodegenColumn[] => gridApi.grid.getData(),
+});
+
+/** 初始化 */
+const dictTypeOptions = ref<SystemDictTypeApi.DictType[]>([]); // 字典类型选项
+onMounted(async () => {
+  dictTypeOptions.value = await getSimpleDictTypeList();
+});
+</script>
+
+<template>
+  <Grid>
+    <!-- 字段描述 -->
+    <template #columnComment="{ row }">
+      <Input v-model="row.columnComment" />
+    </template>
+
+    <!-- Java 类型 -->
+    <template #javaType="{ row, column }">
+      <Select v-model="row.javaType" style="width: 100%">
+        <Select.Option
+          v-for="option in column.params.options"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </Select.Option>
+      </Select>
+    </template>
+    <!-- Java 属性 -->
+    <template #javaField="{ row }">
+      <Input v-model="row.javaField" />
+    </template>
+
+    <!-- 插入 -->
+    <template #createOperation="{ row }">
+      <Checkbox v-model:checked="row.createOperation" />
+    </template>
+    <!-- 编辑 -->
+    <template #updateOperation="{ row }">
+      <Checkbox v-model:checked="row.updateOperation" />
+    </template>
+    <!-- 列表 -->
+    <template #listOperationResult="{ row }">
+      <Checkbox v-model:checked="row.listOperationResult" />
+    </template>
+    <!-- 查询 -->
+    <template #listOperation="{ row }">
+      <Checkbox v-model:checked="row.listOperation" />
+    </template>
+
+    <!-- 查询方式 -->
+    <template #listOperationCondition="{ row, column }">
+      <Select v-model="row.listOperationCondition" class="w-full">
+        <Select.Option
+          v-for="option in column.params.options"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </Select.Option>
+      </Select>
+    </template>
+
+    <!-- 允许空 -->
+    <template #nullable="{ row }">
+      <Checkbox v-model:checked="row.nullable" />
+    </template>
+
+    <!-- 显示类型 -->
+    <template #htmlType="{ row, column }">
+      <Select v-model="row.htmlType" class="w-full">
+        <Select.Option
+          v-for="option in column.params.options"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </Select.Option>
+      </Select>
+    </template>
+
+    <!-- 字典类型 -->
+    <template #dictType="{ row }">
+      <Select v-model="row.dictType" class="w-full" allow-clear show-search>
+        <Select.Option
+          v-for="option in dictTypeOptions"
+          :key="option.type"
+          :value="option.type"
+        >
+          {{ option.name }}
+        </Select.Option>
+      </Select>
+    </template>
+
+    <!-- 示例 -->
+    <template #example="{ row }">
+      <Input v-model="row.example" />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/modules/generation-info.vue b/apps/web-tdesign/src/views/infra/codegen/modules/generation-info.vue
new file mode 100644
index 000000000..56ffe616f
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/modules/generation-info.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+
+import { computed, ref, watch } from 'vue';
+
+import { InfraCodegenTemplateTypeEnum } from '@vben/constants';
+import { isEmpty } from '@vben/utils';
+
+import { useVbenForm } from '#/adapter/form';
+import { getCodegenTableList } from '#/api/infra/codegen';
+
+import {
+  useGenerationInfoBaseFormSchema,
+  useGenerationInfoSubTableFormSchema,
+  useGenerationInfoTreeFormSchema,
+} from '../data';
+
+const props = defineProps<{
+  columns?: InfraCodegenApi.CodegenColumn[];
+  table?: InfraCodegenApi.CodegenTable;
+}>();
+
+const tables = ref<InfraCodegenApi.CodegenTable[]>([]);
+
+/** 计算当前模板类型 */
+const currentTemplateType = ref<number>();
+const isTreeTable = computed(
+  () => currentTemplateType.value === InfraCodegenTemplateTypeEnum.TREE,
+);
+const isSubTable = computed(
+  () => currentTemplateType.value === InfraCodegenTemplateTypeEnum.SUB,
+);
+
+/** 基础表单实例 */
+const [BaseForm, baseFormApi] = useVbenForm({
+  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4', // 配置表单布局为两列
+  layout: 'horizontal',
+  showDefaultActions: false,
+  schema: useGenerationInfoBaseFormSchema(),
+  handleValuesChange: (values) => {
+    // 监听模板类型变化
+    if (
+      values.templateType !== undefined &&
+      values.templateType !== currentTemplateType.value
+    ) {
+      currentTemplateType.value = values.templateType;
+    }
+  },
+});
+
+/** 树表信息表单实例 */
+const [TreeForm, treeFormApi] = useVbenForm({
+  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4', // 配置表单布局为两列
+  layout: 'horizontal',
+  showDefaultActions: false,
+  schema: [],
+});
+
+/** 主子表信息表单实例 */
+const [SubForm, subFormApi] = useVbenForm({
+  wrapperClass: 'grid grid-cols-1 md:grid-cols-2 gap-4', // 配置表单布局为两列
+  layout: 'horizontal',
+  showDefaultActions: false,
+  schema: [],
+});
+
+/** 更新树表信息表单 schema */
+function updateTreeSchema(): void {
+  treeFormApi.setState({
+    schema: useGenerationInfoTreeFormSchema(props.columns),
+  });
+  // 树表信息回显
+  treeFormApi.setValues(props.table as any);
+}
+
+/** 更新主子表信息表单 schema */
+function updateSubSchema(): void {
+  subFormApi.setState({
+    schema: useGenerationInfoSubTableFormSchema(props.columns, tables.value),
+  });
+  // 主子表信息回显
+  subFormApi.setValues(props.table as any);
+}
+
+/** 获取合并的表单值 */
+async function getAllFormValues(): Promise<Record<string, any>> {
+  // 基础表单值
+  const baseValues = await baseFormApi.getValues();
+  // 根据模板类型获取对应的额外表单值
+  let extraValues = {};
+  if (isTreeTable.value) {
+    extraValues = await treeFormApi.getValues();
+  } else if (isSubTable.value) {
+    extraValues = await subFormApi.getValues();
+  }
+  // 合并表单值
+  return { ...baseValues, ...extraValues };
+}
+
+/** 验证所有表单 */
+async function validateAllForms() {
+  // 验证基础表单
+  const { valid: baseFormValid } = await baseFormApi.validate();
+  // 根据模板类型验证对应的额外表单
+  let extraValid = true;
+  if (isTreeTable.value) {
+    const { valid: treeFormValid } = await treeFormApi.validate();
+    extraValid = treeFormValid;
+  } else if (isSubTable.value) {
+    const { valid: subFormValid } = await subFormApi.validate();
+    extraValid = subFormValid;
+  }
+  return baseFormValid && extraValid;
+}
+
+/** 设置表单值 */
+function setAllFormValues(values: Record<string, any>): void {
+  if (!values) {
+    return;
+  }
+
+  // 记录模板类型
+  currentTemplateType.value = values.templateType;
+
+  // 设置基础表单值
+  baseFormApi.setValues(values);
+  // 根据模板类型设置对应的额外表单值
+  if (isTreeTable.value) {
+    treeFormApi.setValues(values);
+  } else if (isSubTable.value) {
+    subFormApi.setValues(values);
+  }
+}
+
+/** 监听表格数据变化 */
+watch(
+  () => props.table,
+  async (val) => {
+    if (!val || isEmpty(val)) {
+      return;
+    }
+
+    const table = val as InfraCodegenApi.CodegenTable;
+    // 初始化树表的 schema
+    updateTreeSchema();
+    // 设置表单值
+    setAllFormValues(table);
+    // 获取表数据，用于主子表选择
+    const dataSourceConfigId = table.dataSourceConfigId;
+    if (dataSourceConfigId === undefined) {
+      return;
+    }
+    tables.value = await getCodegenTableList(dataSourceConfigId);
+    // 初始化子表 schema
+    updateSubSchema();
+  },
+  { immediate: true },
+);
+
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: validateAllForms,
+  getValues: getAllFormValues,
+});
+</script>
+
+<template>
+  <div>
+    <!-- 基础表单 -->
+    <BaseForm />
+    <!-- 树表信息表单 -->
+    <TreeForm v-if="isTreeTable" />
+    <!-- 主子表信息表单 -->
+    <SubForm v-if="isSubTable" />
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/modules/import-table.vue b/apps/web-tdesign/src/views/infra/codegen/modules/import-table.vue
new file mode 100644
index 000000000..4e7bad180
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/modules/import-table.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+
+import { reactive } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from '#/adapter/tdesign';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { createCodegenList, getSchemaTableList } from '#/api/infra/codegen';
+import { $t } from '#/locales';
+import {
+  useImportTableColumns,
+  useImportTableFormSchema,
+} from '#/views/infra/codegen/data';
+
+/** 定义组件事件 */
+const emit = defineEmits<{
+  (e: 'success'): void;
+}>();
+
+const formData = reactive<InfraCodegenApi.CodegenCreateListReqVO>({
+  dataSourceConfigId: 0,
+  tableNames: [], // 已选择的表列表
+});
+
+/** 表格实例 */
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useImportTableFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useImportTableColumns(),
+    height: 600,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          if (formValues.dataSourceConfigId === undefined) {
+            return [];
+          }
+          formData.dataSourceConfigId = formValues.dataSourceConfigId;
+          return await getSchemaTableList({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'name',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<InfraCodegenApi.DatabaseTable>,
+  gridEvents: {
+    checkboxChange: ({
+      records,
+    }: {
+      records: InfraCodegenApi.DatabaseTable[];
+    }) => {
+      formData.tableNames = records.map((item) => item.name);
+    },
+  },
+});
+
+/** 模态框实例 */
+const [Modal, modalApi] = useVbenModal({
+  title: '导入表',
+  class: 'w-1/2',
+  async onConfirm() {
+    modalApi.lock();
+    // 1.1 获取表单值
+    if (formData?.dataSourceConfigId === undefined) {
+      message.error('请选择数据源');
+      return;
+    }
+    // 1.2 校验是否选择了表
+    if (formData.tableNames.length === 0) {
+      message.error('请选择需要导入的表');
+      return;
+    }
+
+    // 2. 提交请求
+    const hideLoading = message.loading({
+      content: '导入中...',
+      duration: 0,
+    });
+    try {
+      await createCodegenList(formData);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      message.close(hideLoading);
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal>
+    <Grid />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/codegen/modules/preview-code.vue b/apps/web-tdesign/src/views/infra/codegen/modules/preview-code.vue
new file mode 100644
index 000000000..7f6d86627
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/codegen/modules/preview-code.vue
@@ -0,0 +1,262 @@
+<script lang="ts" setup>
+import type { InfraCodegenApi } from '#/api/infra/codegen';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { CodeEditor } from '@vben/plugins/code-editor';
+
+import { useClipboard } from '@vueuse/core';
+import { Button, Tabs } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { previewCodegen } from '#/api/infra/codegen';
+
+/** 文件树类型 */
+interface FileNode {
+  key: string;
+  title: string;
+  parentKey: string;
+  isLeaf?: boolean;
+  children?: FileNode[];
+}
+
+/** 组件状态 */
+const loading = ref(false);
+const fileTree = ref<FileNode[]>([]);
+const previewFiles = ref<InfraCodegenApi.CodegenPreview[]>([]);
+const activeKey = ref<string>('');
+
+/** 代码地图 */
+const codeMap = ref<Map<string, string>>(new Map<string, string>());
+function setCodeMap(key: string, code: string) {
+  // 处理可能的缩进问题，特别是对Java文件
+  const trimmedCode = code.trimStart();
+  // 如果已有缓存则不重新构建
+  if (codeMap.value.has(key)) {
+    return;
+  }
+  codeMap.value.set(key, trimmedCode);
+}
+
+/** 删除代码地图 */
+function removeCodeMapKey(targetKey: any) {
+  // 只有一个代码视图时不允许删除
+  if (codeMap.value.size === 1) {
+    return;
+  }
+  if (codeMap.value.has(targetKey)) {
+    codeMap.value.delete(targetKey);
+  }
+}
+
+/** 复制代码 */
+async function copyCode() {
+  const { copy } = useClipboard();
+  const file = previewFiles.value.find(
+    (item) => item.filePath === activeKey.value,
+  );
+  if (file) {
+    await copy(file.code);
+    message.success('复制成功');
+  }
+}
+
+/** 文件节点点击事件 */
+function handleNodeClick(_: any[], e: any) {
+  if (!e.node.isLeaf) {
+    return;
+  }
+
+  activeKey.value = e.node.key;
+  const file = previewFiles.value.find((item) => {
+    const list = activeKey.value.split('.');
+    // 特殊处理 - 包合并
+    if (list.length > 2) {
+      const lang = list.pop();
+      return item.filePath === `${list.join('/')}.${lang}`;
+    }
+    return item.filePath === activeKey.value;
+  });
+  if (!file) {
+    return;
+  }
+
+  setCodeMap(activeKey.value, file.code);
+}
+
+/** 处理文件树 */
+function handleFiles(data: InfraCodegenApi.CodegenPreview[]): FileNode[] {
+  const exists: Record<string, boolean> = {};
+  const files: FileNode[] = [];
+
+  // 处理文件路径
+  for (const item of data) {
+    const paths = item.filePath.split('/');
+    let cursor = 0;
+    let fullPath = '';
+
+    while (cursor < paths.length) {
+      const path = paths[cursor] || '';
+      const oldFullPath = fullPath;
+
+      // 处理 Java 包路径特殊情况
+      if (path === 'java' && cursor + 1 < paths.length) {
+        fullPath = fullPath ? `${fullPath}/${path}` : path;
+        cursor++;
+
+        // 合并包路径
+        let packagePath = '';
+        while (cursor < paths.length) {
+          const nextPath = paths[cursor] || '';
+          if (
+            [
+              'controller',
+              'convert',
+              'dal',
+              'dataobject',
+              'enums',
+              'mysql',
+              'service',
+              'vo',
+            ].includes(nextPath)
+          ) {
+            break;
+          }
+          packagePath = packagePath ? `${packagePath}.${nextPath}` : nextPath;
+          cursor++;
+        }
+
+        if (packagePath) {
+          const newFullPath = `${fullPath}/${packagePath}`;
+          if (!exists[newFullPath]) {
+            exists[newFullPath] = true;
+            files.push({
+              key: newFullPath,
+              title: packagePath,
+              parentKey: oldFullPath || '/',
+              isLeaf: cursor === paths.length,
+            });
+          }
+          fullPath = newFullPath;
+        }
+        continue;
+      }
+
+      // 处理普通路径
+      fullPath = fullPath ? `${fullPath}/${path}` : path;
+      if (!exists[fullPath]) {
+        exists[fullPath] = true;
+        files.push({
+          key: fullPath,
+          title: path,
+          parentKey: oldFullPath || '/',
+          isLeaf: cursor === paths.length - 1,
+        });
+      }
+      cursor++;
+    }
+  }
+
+  /** 构建树形结构 */
+  function buildTree(parentKey: string): FileNode[] {
+    return files
+      .filter((file) => file.parentKey === parentKey)
+      .map((file) => ({
+        ...file,
+        children: buildTree(file.key),
+      }));
+  }
+
+  return buildTree('/');
+}
+
+/** 模态框实例 */
+const [Modal, modalApi] = useVbenModal({
+  footer: false,
+  fullscreen: true,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      // 关闭时清除代码视图缓存
+      codeMap.value.clear();
+      return;
+    }
+
+    const row = modalApi.getData<InfraCodegenApi.CodegenTable>();
+    if (!row) {
+      return;
+    }
+
+    // 加载预览数据
+    loading.value = true;
+    try {
+      const data = await previewCodegen(row.id);
+      previewFiles.value = data;
+
+      // 构建代码树，并默认选中第一个文件
+      fileTree.value = handleFiles(data);
+      if (data.length > 0) {
+        activeKey.value = data[0]?.filePath || '';
+        const code = data[0]?.code || '';
+        setCodeMap(activeKey.value, code);
+      }
+    } finally {
+      loading.value = false;
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="代码预览">
+    <div class="flex h-full" v-loading="loading">
+      <!-- 文件树 -->
+      <div
+        class="h-full w-1/3 overflow-auto border-r border-gray-200 pr-4 dark:border-gray-700"
+      >
+        <DirectoryTree
+          v-if="fileTree.length > 0"
+          default-expand-all
+          v-model:active-key="activeKey"
+          @select="handleNodeClick"
+          :tree-data="fileTree"
+        />
+      </div>
+      <!-- 代码预览 -->
+      <div class="h-full w-2/3 overflow-auto pl-4">
+        <Tabs
+          v-model:active-key="activeKey"
+          hide-add
+          type="editable-card"
+          @edit="removeCodeMapKey"
+        >
+          <Tabs.TabPane
+            v-for="key in codeMap.keys()"
+            :key="key"
+            :tab="key.split('/').pop()"
+          >
+            <div
+              class="h-full rounded-md bg-gray-50 !p-0 text-gray-800 dark:bg-gray-800 dark:text-gray-200"
+            >
+              <CodeEditor
+                class="max-h-200"
+                :value="codeMap.get(activeKey)"
+                mode="application/json"
+                :readonly="true"
+                :bordered="true"
+                :auto-format="false"
+              />
+            </div>
+          </Tabs.TabPane>
+          <template #rightExtra>
+            <Button theme="primary" ghost @click="copyCode">
+              <IconifyIcon icon="lucide:copy" />
+              复制代码
+            </Button>
+          </template>
+        </Tabs>
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/config/data.ts b/apps/web-tdesign/src/views/infra/config/data.ts
new file mode 100644
index 000000000..a365fbd78
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/config/data.ts
@@ -0,0 +1,187 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'category',
+      label: '参数分类',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入参数分类',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'name',
+      label: '参数名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入参数名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'key',
+      label: '参数键名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入参数键名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'value',
+      label: '参数键值',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入参数键值',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'visible',
+      label: '是否可见',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      defaultValue: true,
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '参数名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入参数名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'key',
+      label: '参数键名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入参数键名',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '系统内置',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_CONFIG_TYPE, 'number'),
+        placeholder: '请选择系统内置',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '参数主键',
+      minWidth: 100,
+    },
+    {
+      field: 'category',
+      title: '参数分类',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '参数名称',
+      minWidth: 200,
+    },
+    {
+      field: 'key',
+      title: '参数键名',
+      minWidth: 200,
+    },
+    {
+      field: 'value',
+      title: '参数键值',
+      minWidth: 150,
+    },
+    {
+      field: 'visible',
+      title: '是否可见',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'type',
+      title: '系统内置',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_CONFIG_TYPE },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/config/index.vue b/apps/web-tdesign/src/views/infra/config/index.vue
new file mode 100644
index 000000000..098a65af4
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/config/index.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraConfigApi } from '#/api/infra/config';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteConfig,
+  deleteConfigList,
+  exportConfig,
+  getConfigPage,
+} from '#/api/infra/config';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportConfig(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '参数配置.xls', source: data });
+}
+
+/** 创建参数 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑参数 */
+function handleEdit(row: InfraConfigApi.Config) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除参数 */
+async function handleDelete(row: InfraConfigApi.Config) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteConfig(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除参数 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteConfigList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraConfigApi.Config[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getConfigPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraConfigApi.Config>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="参数列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['参数']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:config:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:config:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:config:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:config:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/config/modules/form.vue b/apps/web-tdesign/src/views/infra/config/modules/form.vue
new file mode 100644
index 000000000..caacf3074
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/config/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { InfraConfigApi } from '#/api/infra/config';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createConfig, getConfig, updateConfig } from '#/api/infra/config';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<InfraConfigApi.Config>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['参数'])
+    : $t('ui.actionTitle.create', ['参数']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as InfraConfigApi.Config;
+    try {
+      await (formData.value?.id ? updateConfig(data) : createConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraConfigApi.Config>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getConfig(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/dataSourceConfig/data.ts b/apps/web-tdesign/src/views/infra/dataSourceConfig/data.ts
new file mode 100644
index 000000000..6f4c6027f
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/dataSourceConfig/data.ts
@@ -0,0 +1,92 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '数据源名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入数据源名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'url',
+      label: '数据源连接',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入数据源连接',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'username',
+      label: '用户名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'password',
+      label: '密码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入密码',
+        type: 'password',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '主键编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '数据源名称',
+      minWidth: 150,
+    },
+    {
+      field: 'url',
+      title: '数据源连接',
+      minWidth: 300,
+    },
+    {
+      field: 'username',
+      title: '用户名',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/dataSourceConfig/index.vue b/apps/web-tdesign/src/views/infra/dataSourceConfig/index.vue
new file mode 100644
index 000000000..18be0d1e4
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/dataSourceConfig/index.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDataSourceConfig,
+  deleteDataSourceConfigList,
+  getDataSourceConfigList,
+} from '#/api/infra/data-source-config';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建数据源 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑数据源 */
+function handleEdit(row: InfraDataSourceConfigApi.DataSourceConfig) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除数据源 */
+async function handleDelete(row: InfraDataSourceConfigApi.DataSourceConfig) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDataSourceConfig(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除数据源 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDataSourceConfigList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraDataSourceConfigApi.DataSourceConfig[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: getDataSourceConfigList,
+      },
+    },
+  } as VxeTableGridOptions<InfraDataSourceConfigApi.DataSourceConfig>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="数据源列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['数据源']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:data-source-config:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:data-source-config:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:data-source-config:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:data-source-config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/dataSourceConfig/modules/form.vue b/apps/web-tdesign/src/views/infra/dataSourceConfig/modules/form.vue
new file mode 100644
index 000000000..e84bdad3e
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/dataSourceConfig/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { InfraDataSourceConfigApi } from '#/api/infra/data-source-config';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDataSourceConfig,
+  getDataSourceConfig,
+  updateDataSourceConfig,
+} from '#/api/infra/data-source-config';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<InfraDataSourceConfigApi.DataSourceConfig>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['数据源'])
+    : $t('ui.actionTitle.create', ['数据源']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as InfraDataSourceConfigApi.DataSourceConfig;
+    try {
+      await (formData.value?.id
+        ? updateDataSourceConfig(data)
+        : createDataSourceConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraDataSourceConfigApi.DataSourceConfig>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDataSourceConfig(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo01/data.ts b/apps/web-tdesign/src/views/infra/demo/demo01/data.ts
new file mode 100644
index 000000000..ec8ca5d02
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo01/data.ts
@@ -0,0 +1,152 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      rules: 'required',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'birthday',
+      label: '出生年',
+      rules: 'required',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      rules: 'required',
+      component: 'RichTextarea',
+    },
+    {
+      fieldName: 'avatar',
+      label: '头像',
+      component: 'ImageUpload',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        placeholder: '请选择性别',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<Demo01ContactApi.Demo01Contact>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'sex',
+      title: '性别',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      field: 'birthday',
+      title: '出生年',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'description',
+      title: '简介',
+      minWidth: 120,
+    },
+    {
+      field: 'avatar',
+      title: '头像',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/demo/demo01/index.vue b/apps/web-tdesign/src/views/infra/demo/demo01/index.vue
new file mode 100644
index 000000000..3bf387dd6
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo01/index.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo01Contact,
+  deleteDemo01ContactList,
+  exportDemo01Contact,
+  getDemo01ContactPage,
+} from '#/api/infra/demo/demo01';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo01Contact(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
+}
+
+/** 创建示例联系人 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑示例联系人 */
+function handleEdit(row: Demo01ContactApi.Demo01Contact) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除示例联系人 */
+async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo01Contact(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除示例联系人 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo01ContactList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo01ContactApi.Demo01Contact[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemo01ContactPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Demo01ContactApi.Demo01Contact>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="示例联系人列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['示例联系人']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo01-contact:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:demo01-contact:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:demo01-contact:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:demo01-contact:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo01-contact:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo01/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/demo01/modules/form.vue
new file mode 100644
index 000000000..4d6d70bdf
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo01/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo01Contact,
+  getDemo01Contact,
+  updateDemo01Contact,
+} from '#/api/infra/demo/demo01';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo01ContactApi.Demo01Contact>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['示例联系人'])
+    : $t('ui.actionTitle.create', ['示例联系人']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as Demo01ContactApi.Demo01Contact;
+    try {
+      await (formData.value?.id
+        ? updateDemo01Contact(data)
+        : createDemo01Contact(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDemo01Contact(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo02/data.ts b/apps/web-tdesign/src/views/infra/demo/demo02/data.ts
new file mode 100644
index 000000000..74430fb28
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo02/data.ts
@@ -0,0 +1,120 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
+
+import { handleTree } from '@vben/utils';
+
+import { getDemo02CategoryList } from '#/api/infra/demo/demo02';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级示例分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getDemo02CategoryList({});
+          data.unshift({
+            id: 0,
+            name: '顶级示例分类',
+          });
+          return handleTree(data);
+        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择上级示例分类',
+        treeDefaultExpandAll: true,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '父级编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入父级编号',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<Demo02CategoryApi.Demo02Category>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+      treeNode: true,
+    },
+    {
+      field: 'parentId',
+      title: '父级编号',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/demo/demo02/index.vue b/apps/web-tdesign/src/views/infra/demo/demo02/index.vue
new file mode 100644
index 000000000..4c9fe1e95
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo02/index.vue
@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo02Category,
+  exportDemo02Category,
+  getDemo02CategoryList,
+} from '#/api/infra/demo/demo02';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo02Category(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '示例分类.xls', source: data });
+}
+
+/** 创建示例分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑示例分类 */
+function handleEdit(row: Demo02CategoryApi.Demo02Category) {
+  formModalApi.setData(row).open();
+}
+
+/** 添加下级示例分类 */
+function handleAppend(row: Demo02CategoryApi.Demo02Category) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 删除示例分类 */
+async function handleDelete(row: Demo02CategoryApi.Demo02Category) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo02Category(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(true);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          return await getDemo02CategoryList(formValues);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Demo02CategoryApi.Demo02Category>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="示例分类列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['示例分类']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo02-category:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:demo02-category:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增下级',
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo02-category:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:demo02-category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo02-category:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo02/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/demo02/modules/form.vue
new file mode 100644
index 000000000..a7440947a
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo02/modules/form.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo02Category,
+  getDemo02Category,
+  updateDemo02Category,
+} from '#/api/infra/demo/demo02';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo02CategoryApi.Demo02Category>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['示例分类'])
+    : $t('ui.actionTitle.create', ['示例分类']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as Demo02CategoryApi.Demo02Category;
+    try {
+      await (formData.value?.id
+        ? updateDemo02Category(data)
+        : createDemo02Category(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<Demo02CategoryApi.Demo02Category>();
+    if (!data || !data.id) {
+      // 设置上级
+      await formApi.setValues(data);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDemo02Category(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/data.ts b/apps/web-tdesign/src/views/infra/demo/demo03/erp/data.ts
new file mode 100644
index 000000000..f8acac72a
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/data.ts
@@ -0,0 +1,381 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      rules: 'required',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'birthday',
+      label: '出生日期',
+      rules: 'required',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      rules: 'required',
+      component: 'RichTextarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        placeholder: '请选择性别',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入简介',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'sex',
+      title: '性别',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      field: 'birthday',
+      title: '出生日期',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'description',
+      title: '简介',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ==================== 子表（学生课程） ====================
+
+/** 新增/修改的表单 */
+export function useDemo03CourseFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'score',
+      label: '分数',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分数',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useDemo03CourseGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'studentId',
+      label: '学生编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入学生编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'score',
+      label: '分数',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入分数',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useDemo03CourseGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'studentId',
+      title: '学生编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'score',
+      title: '分数',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ==================== 子表（学生班级） ====================
+
+/** 新增/修改的表单 */
+export function useDemo03GradeFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'teacher',
+      label: '班主任',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入班主任',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useDemo03GradeGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'studentId',
+      label: '学生编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入学生编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'teacher',
+      label: '班主任',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入班主任',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useDemo03GradeGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Grade>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'studentId',
+      title: '学生编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'teacher',
+      title: '班主任',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/index.vue b/apps/web-tdesign/src/views/infra/demo/demo03/erp/index.vue
new file mode 100644
index 000000000..78db8cc64
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/index.vue
@@ -0,0 +1,210 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { Tabs } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Student,
+  deleteDemo03StudentList,
+  exportDemo03Student,
+  getDemo03StudentPage,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Demo03CourseList from './modules/demo03-course-list.vue';
+import Demo03GradeList from './modules/demo03-grade-list.vue';
+import Form from './modules/form.vue';
+
+/** 子表的列表 */
+const subTabsName = ref('demo03Course');
+const selectDemo03Student = ref<Demo03StudentApi.Demo03Student>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
+/** 创建学生 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑学生 */
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Student(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: '600px',
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemo03StudentPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+      isCurrent: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
+  gridEvents: {
+    cellClick: ({ row }: { row: Demo03StudentApi.Demo03Student }) => {
+      selectDemo03Student.value = row;
+    },
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <div>
+      <Grid table-title="学生列表">
+        <template #toolbar-tools>
+          <TableAction
+            :actions="[
+              {
+                label: $t('ui.actionTitle.create', ['学生']),
+                type: 'primary',
+                icon: ACTION_ICON.ADD,
+                auth: ['infra:demo03-student:create'],
+                onClick: handleCreate,
+              },
+              {
+                label: $t('ui.actionTitle.export'),
+                type: 'primary',
+                icon: ACTION_ICON.DOWNLOAD,
+                auth: ['infra:demo03-student:export'],
+                onClick: handleExport,
+              },
+              {
+                label: $t('ui.actionTitle.deleteBatch'),
+                type: 'danger',
+                icon: ACTION_ICON.DELETE,
+                disabled: isEmpty(checkedIds),
+                auth: ['infra:demo03-student:delete'],
+                onClick: handleDeleteBatch,
+              },
+            ]"
+          />
+        </template>
+        <template #actions="{ row }">
+          <TableAction
+            :actions="[
+              {
+                label: $t('common.edit'),
+                type: 'primary',
+                variant: 'text',
+                icon: ACTION_ICON.EDIT,
+                auth: ['infra:demo03-student:update'],
+                onClick: handleEdit.bind(null, row),
+              },
+              {
+                label: $t('common.delete'),
+                type: 'danger',
+                variant: 'text',
+                icon: ACTION_ICON.DELETE,
+                auth: ['infra:demo03-student:delete'],
+                popConfirm: {
+                  title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                  confirm: handleDelete.bind(null, row),
+                },
+              },
+            ]"
+          />
+        </template>
+      </Grid>
+
+      <!-- 子表的表单 -->
+      <Tabs v-model:active-key="subTabsName" class="mt-2">
+        <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+          <Demo03CourseList :student-id="selectDemo03Student?.id" />
+        </Tabs.TabPane>
+        <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+          <Demo03GradeList :student-id="selectDemo03Student?.id" />
+        </Tabs.TabPane>
+      </Tabs>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
new file mode 100644
index 000000000..4c747e7cd
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-course-form.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Course,
+  getDemo03Course,
+  updateDemo03Course,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+import { useDemo03CourseFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo03StudentApi.Demo03Course>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生课程'])
+    : $t('ui.actionTitle.create', ['学生课程']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useDemo03CourseFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Course;
+    data.studentId = formData.value?.studentId;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Course(data)
+        : createDemo03Course(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Course>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Course(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 设置到 values
+    formData.value = data;
+    await formApi.setValues(formData.value);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
new file mode 100644
index 000000000..89168cbde
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-course-list.vue
@@ -0,0 +1,197 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Course,
+  deleteDemo03CourseList,
+  getDemo03CoursePage,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+import {
+  useDemo03CourseGridColumns,
+  useDemo03CourseGridFormSchema,
+} from '../data';
+import Demo03CourseForm from './demo03-course-form.vue';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03CourseForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生课程 */
+function handleCreate() {
+  if (!props.studentId) {
+    message.warning('请先选择一个学生!');
+    return;
+  }
+  formModalApi.setData({ studentId: props.studentId }).open();
+}
+
+/** 编辑学生课程 */
+function handleEdit(row: Demo03StudentApi.Demo03Course) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生课程 */
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Course(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    await handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生课程 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03CourseList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Course[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useDemo03CourseGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useDemo03CourseGridColumns(),
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          if (!props.studentId) {
+            return [];
+          }
+          return await getDemo03CoursePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            studentId: props.studentId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    pagerConfig: {
+      enabled: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    height: '600px',
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Course>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 刷新表格 */
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await handleRefresh();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <FormModal @success="handleRefresh" />
+  <Grid table-title="学生课程列表">
+    <template #toolbar-tools>
+      <TableAction
+        :actions="[
+          {
+            label: $t('ui.actionTitle.create', ['学生课程']),
+            type: 'primary',
+            icon: ACTION_ICON.ADD,
+            auth: ['infra:demo03-student:create'],
+            onClick: handleCreate,
+          },
+          {
+            label: $t('ui.actionTitle.deleteBatch'),
+            type: 'danger',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            disabled: isEmpty(checkedIds),
+            onClick: handleDeleteBatch,
+          },
+        ]"
+      />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.edit'),
+            variant: 'text',
+            icon: ACTION_ICON.EDIT,
+            auth: ['infra:demo03-student:update'],
+            onClick: handleEdit.bind(null, row),
+          },
+          {
+            label: $t('common.delete'),
+            variant: 'text',
+            type: 'danger',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
new file mode 100644
index 000000000..f5167b3e8
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-grade-form.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Grade,
+  getDemo03Grade,
+  updateDemo03Grade,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+import { useDemo03GradeFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo03StudentApi.Demo03Grade>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生班级'])
+    : $t('ui.actionTitle.create', ['学生班级']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useDemo03GradeFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Grade;
+    data.studentId = formData.value?.studentId;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Grade(data)
+        : createDemo03Grade(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Grade>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Grade(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 设置到 values
+    formData.value = data;
+    await formApi.setValues(formData.value);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
new file mode 100644
index 000000000..2a4df3b5a
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue
@@ -0,0 +1,197 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Grade,
+  deleteDemo03GradeList,
+  getDemo03GradePage,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+import {
+  useDemo03GradeGridColumns,
+  useDemo03GradeGridFormSchema,
+} from '../data';
+import Demo03GradeForm from './demo03-grade-form.vue';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03GradeForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生班级 */
+function handleCreate() {
+  if (!props.studentId) {
+    message.warning('请先选择一个学生!');
+    return;
+  }
+  formModalApi.setData({ studentId: props.studentId }).open();
+}
+
+/** 编辑学生班级 */
+function handleEdit(row: Demo03StudentApi.Demo03Grade) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生班级 */
+async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Grade(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    await handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生班级 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03GradeList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Grade[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useDemo03GradeGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useDemo03GradeGridColumns(),
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          if (!props.studentId) {
+            return [];
+          }
+          return await getDemo03GradePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            studentId: props.studentId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    pagerConfig: {
+      enabled: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    height: '600px',
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Grade>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 刷新表格 */
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await handleRefresh();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <FormModal @success="handleRefresh" />
+  <Grid table-title="学生班级列表">
+    <template #toolbar-tools>
+      <TableAction
+        :actions="[
+          {
+            label: $t('ui.actionTitle.create', ['学生班级']),
+            type: 'primary',
+            icon: ACTION_ICON.ADD,
+            auth: ['infra:demo03-student:create'],
+            onClick: handleCreate,
+          },
+          {
+            label: $t('ui.actionTitle.deleteBatch'),
+            type: 'danger',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            disabled: isEmpty(checkedIds),
+            onClick: handleDeleteBatch,
+          },
+        ]"
+      />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.edit'),
+            variant: 'text',
+            icon: ACTION_ICON.EDIT,
+            auth: ['infra:demo03-student:update'],
+            onClick: handleEdit.bind(null, row),
+          },
+          {
+            label: $t('common.delete'),
+            type: 'danger',
+            variant: 'text',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/form.vue
new file mode 100644
index 000000000..cc417c6bd
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/erp/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Student,
+  getDemo03Student,
+  updateDemo03Student,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo03StudentApi.Demo03Student>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生'])
+    : $t('ui.actionTitle.create', ['学生']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Student(data)
+        : createDemo03Student(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDemo03Student(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/data.ts b/apps/web-tdesign/src/views/infra/demo/demo03/inner/data.ts
new file mode 100644
index 000000000..0166ba1c0
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/data.ts
@@ -0,0 +1,276 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      rules: 'required',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'birthday',
+      label: '出生日期',
+      rules: 'required',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      rules: 'required',
+      component: 'RichTextarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        placeholder: '请选择性别',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入简介',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    { type: 'expand', width: 80, slots: { content: 'expand_content' } },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'sex',
+      title: '性别',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      field: 'birthday',
+      title: '出生日期',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'description',
+      title: '简介',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ==================== 子表（学生课程） ====================
+
+/** 新增/修改列表的字段 */
+export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+      slots: { default: 'name' },
+    },
+    {
+      field: 'score',
+      title: '分数',
+      minWidth: 120,
+      slots: { default: 'score' },
+    },
+    {
+      title: '操作',
+      width: 280,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useDemo03CourseGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'studentId',
+      title: '学生编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'score',
+      title: '分数',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
+
+// ==================== 子表（学生班级） ====================
+
+/** 新增/修改的表单 */
+export function useDemo03GradeFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'teacher',
+      label: '班主任',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入班主任',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useDemo03GradeGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Grade>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'studentId',
+      title: '学生编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'teacher',
+      title: '班主任',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/index.vue b/apps/web-tdesign/src/views/infra/demo/demo03/inner/index.vue
new file mode 100644
index 000000000..5e2b18a8b
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/index.vue
@@ -0,0 +1,204 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { Tabs } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Student,
+  deleteDemo03StudentList,
+  exportDemo03Student,
+  getDemo03StudentPage,
+} from '#/api/infra/demo/demo03/inner';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Demo03CourseList from './modules/demo03-course-list.vue';
+import Demo03GradeList from './modules/demo03-grade-list.vue';
+import Form from './modules/form.vue';
+
+/** 子表的列表 */
+const subTabsName = ref('demo03Course');
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.reload();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
+/** 创建学生 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑学生 */
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Student(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemo03StudentPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="学生列表">
+      <template #expand_content="{ row }">
+        <!-- 子表的表单 -->
+        <Tabs v-model:active-key="subTabsName" class="mx-8">
+          <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+            <Demo03CourseList :student-id="row?.id" />
+          </Tabs.TabPane>
+          <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+            <Demo03GradeList :student-id="row?.id" />
+          </Tabs.TabPane>
+        </Tabs>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['学生']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo03-student:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:demo03-student:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo03-student:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:demo03-student:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo03-student:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
new file mode 100644
index 000000000..2533a2f3c
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-course-form.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
+
+import { nextTick, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Input } from 'tdesign-vue-next';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/inner';
+import { $t } from '#/locales';
+
+import { useDemo03CourseGridEditColumns } from '../data';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDemo03CourseGridEditColumns(),
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 添加学生课程 */
+async function handleAdd() {
+  await gridApi.grid.insertAt({} as Demo03StudentApi.Demo03Course, -1);
+}
+
+/** 删除学生课程 */
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
+  await gridApi.grid.remove(row);
+}
+
+/** 提供获取表格数据的方法供父组件调用 */
+defineExpose({
+  getData: (): Demo03StudentApi.Demo03Course[] => {
+    const data = gridApi.grid.getData() as Demo03StudentApi.Demo03Course[];
+    const removeRecords =
+      gridApi.grid.getRemoveRecords() as Demo03StudentApi.Demo03Course[];
+    const insertRecords =
+      gridApi.grid.getInsertRecords() as Demo03StudentApi.Demo03Course[];
+    return [
+      ...data.filter(
+        (row) => !removeRecords.some((removed) => removed.id === row.id),
+      ),
+      ...insertRecords.map((row: any) => ({ ...row, id: undefined })),
+    ];
+  },
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await gridApi.grid.loadData(
+      await getDemo03CourseListByStudentId(props.studentId!),
+    );
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid class="mx-4">
+    <template #name="{ row }">
+      <Input v-model="row.name" />
+    </template>
+    <template #score="{ row }">
+      <Input v-model="row.score" />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.delete'),
+            type: 'danger',
+            variant: 'text',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+  <div class="-mt-4 flex justify-center">
+    <Button
+      theme="primary"
+      ghost
+      @click="handleAdd"
+      v-access:code="['infra:demo03-student:create']"
+    >
+      <IconifyIcon icon="lucide:plus" />
+      {{ $t('ui.actionTitle.create', ['学生课程']) }}
+    </Button>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
new file mode 100644
index 000000000..50297db48
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-course-list.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
+
+import { nextTick, watch } from 'vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/inner';
+
+import { useDemo03CourseGridColumns } from '../data';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDemo03CourseGridColumns(),
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+    height: '600px',
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Course>,
+});
+
+/** 刷新表格 */
+async function handleRefresh() {
+  await gridApi.grid.loadData(
+    await getDemo03CourseListByStudentId(props.studentId!),
+  );
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await handleRefresh();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid table-title="学生课程列表" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-grade-form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-grade-form.vue
new file mode 100644
index 000000000..3e2854608
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-grade-form.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { nextTick, watch } from 'vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/inner';
+
+import { useDemo03GradeFormSchema } from '../data';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useDemo03GradeFormSchema(),
+  showDefaultActions: false,
+});
+
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: async () => {
+    const { valid } = await formApi.validate();
+    return valid;
+  },
+  getValues: formApi.getValues,
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await formApi.setValues(await getDemo03GradeByStudentId(props.studentId!));
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Form class="mx-4" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
new file mode 100644
index 000000000..1ad2db740
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/demo03-grade-list.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
+
+import { nextTick, watch } from 'vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/inner';
+
+import { useDemo03GradeGridColumns } from '../data';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDemo03GradeGridColumns(),
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+    height: '600px',
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Grade>,
+});
+
+/** 刷新表格 */
+async function handleRefresh() {
+  await gridApi.grid.loadData([
+    await getDemo03GradeByStudentId(props.studentId!),
+  ]);
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await handleRefresh();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid table-title="学生班级列表" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/form.vue
new file mode 100644
index 000000000..7d0ced1a5
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/inner/modules/form.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/inner';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Tabs } from 'tdesign-vue-next';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Student,
+  getDemo03Student,
+  updateDemo03Student,
+} from '#/api/infra/demo/demo03/inner';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import Demo03CourseForm from './demo03-course-form.vue';
+import Demo03GradeForm from './demo03-grade-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo03StudentApi.Demo03Student>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生'])
+    : $t('ui.actionTitle.create', ['学生']);
+});
+
+/** 子表的表单 */
+const subTabsName = ref('demo03Course');
+const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
+const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 校验子表单
+    const demo03GradeValid = await demo03GradeFormRef.value?.validate();
+    if (!demo03GradeValid) {
+      subTabsName.value = 'demo03Grade';
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
+    // 拼接子表的数据
+    data.demo03courses = demo03CourseFormRef.value?.getData();
+    data.demo03grade = await demo03GradeFormRef.value?.getValues();
+    try {
+      await (formData.value?.id
+        ? updateDemo03Student(data)
+        : createDemo03Student(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Student(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 设置到 values
+    formData.value = data;
+    await formApi.setValues(formData.value);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+    <!-- 子表的表单 -->
+    <Tabs v-model:active-key="subTabsName">
+      <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+        <Demo03CourseForm
+          ref="demo03CourseFormRef"
+          :student-id="formData?.id"
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+        <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData?.id" />
+      </Tabs.TabPane>
+    </Tabs>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/normal/data.ts b/apps/web-tdesign/src/views/infra/demo/demo03/normal/data.ts
new file mode 100644
index 000000000..583437d99
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/normal/data.ts
@@ -0,0 +1,211 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      rules: 'required',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
+    {
+      fieldName: 'birthday',
+      label: '出生日期',
+      rules: 'required',
+      component: 'DatePicker',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      rules: 'required',
+      component: 'RichTextarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '性别',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        placeholder: '请选择性别',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '简介',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入简介',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Student>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+    },
+    {
+      field: 'sex',
+      title: '性别',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      field: 'birthday',
+      title: '出生日期',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'description',
+      title: '简介',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 120,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ==================== 子表（学生课程） ====================
+
+/** 新增/修改列表的字段 */
+export function useDemo03CourseGridEditColumns(): VxeTableGridOptions<Demo03StudentApi.Demo03Course>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 120,
+      slots: { default: 'name' },
+    },
+    {
+      field: 'score',
+      title: '分数',
+      minWidth: 120,
+      slots: { default: 'score' },
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ==================== 子表（学生班级） ====================
+
+/** 新增/修改的表单 */
+export function useDemo03GradeFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '名字',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入名字',
+      },
+    },
+    {
+      fieldName: 'teacher',
+      label: '班主任',
+      rules: 'required',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入班主任',
+      },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/normal/index.vue b/apps/web-tdesign/src/views/infra/demo/demo03/normal/index.vue
new file mode 100644
index 000000000..bd1f5c030
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/normal/index.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Student,
+  deleteDemo03StudentList,
+  exportDemo03Student,
+  getDemo03StudentPage,
+} from '#/api/infra/demo/demo03/normal';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDemo03Student(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+}
+
+/** 创建学生 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑学生 */
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Student(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDemo03StudentPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Demo03StudentApi.Demo03Student>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="学生列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['学生']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:demo03-student:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:demo03-student:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:demo03-student:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:demo03-student:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:demo03-student:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue
new file mode 100644
index 000000000..3923249c8
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/demo03-course-form.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { nextTick, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Input } from 'tdesign-vue-next';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
+import { $t } from '#/locales';
+
+import { useDemo03CourseGridEditColumns } from '../data';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useDemo03CourseGridEditColumns(),
+    border: true,
+    showOverflow: true,
+    autoResize: true,
+    keepSource: true,
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  },
+});
+
+/** 添加学生课程 */
+async function handleAdd() {
+  await gridApi.grid.insertAt({} as Demo03StudentApi.Demo03Course, -1);
+}
+
+/** 删除学生课程 */
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
+  await gridApi.grid.remove(row);
+}
+
+/** 提供获取表格数据的方法供父组件调用 */
+defineExpose({
+  getData: (): Demo03StudentApi.Demo03Course[] => {
+    const data = gridApi.grid.getData() as Demo03StudentApi.Demo03Course[];
+    const removeRecords =
+      gridApi.grid.getRemoveRecords() as Demo03StudentApi.Demo03Course[];
+    const insertRecords =
+      gridApi.grid.getInsertRecords() as Demo03StudentApi.Demo03Course[];
+    return [
+      ...data.filter(
+        (row) => !removeRecords.some((removed) => removed.id === row.id),
+      ),
+      ...insertRecords.map((row: any) => ({ ...row, id: undefined })),
+    ];
+  },
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await gridApi.grid.loadData(
+      await getDemo03CourseListByStudentId(props.studentId!),
+    );
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid class="mx-4">
+    <template #name="{ row }">
+      <Input v-model="row.name" />
+    </template>
+    <template #score="{ row }">
+      <Input v-model="row.score" />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.delete'),
+            type: 'danger',
+            variant: 'text',
+            icon: ACTION_ICON.DELETE,
+            auth: ['infra:demo03-student:delete'],
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', [row.id]),
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+  <div class="-mt-4 flex justify-center">
+    <Button
+      theme="primary"
+      ghost
+      @click="handleAdd"
+      v-access:code="['infra:demo03-student:create']"
+    >
+      <IconifyIcon icon="lucide:plus" />
+      {{ $t('ui.actionTitle.create', ['学生课程']) }}
+    </Button>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/demo03-grade-form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/demo03-grade-form.vue
new file mode 100644
index 000000000..5d5f396bf
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/demo03-grade-form.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { nextTick, watch } from 'vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/normal';
+
+import { useDemo03GradeFormSchema } from '../data';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useDemo03GradeFormSchema(),
+  showDefaultActions: false,
+});
+
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: async () => {
+    const { valid } = await formApi.validate();
+    return valid;
+  },
+  getValues: formApi.getValues,
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await formApi.setValues(await getDemo03GradeByStudentId(props.studentId!));
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Form class="mx-4" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/form.vue
new file mode 100644
index 000000000..cd3d8854b
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/demo03/normal/modules/form.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Tabs } from 'tdesign-vue-next';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Student,
+  getDemo03Student,
+  updateDemo03Student,
+} from '#/api/infra/demo/demo03/normal';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import Demo03CourseForm from './demo03-course-form.vue';
+import Demo03GradeForm from './demo03-grade-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<Demo03StudentApi.Demo03Student>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生'])
+    : $t('ui.actionTitle.create', ['学生']);
+});
+
+/** 子表的表单 */
+const subTabsName = ref('demo03Course');
+const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
+const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 校验子表单
+    const demo03GradeValid = await demo03GradeFormRef.value?.validate();
+    if (!demo03GradeValid) {
+      subTabsName.value = 'demo03Grade';
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as Demo03StudentApi.Demo03Student;
+    // 拼接子表的数据
+    data.demo03courses = demo03CourseFormRef.value?.getData();
+    data.demo03grade = await demo03GradeFormRef.value?.getValues();
+    try {
+      await (formData.value?.id
+        ? updateDemo03Student(data)
+        : createDemo03Student(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Student(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 设置到 values
+    formData.value = data;
+    await formApi.setValues(formData.value);
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+    <!-- 子表的表单 -->
+    <Tabs v-model:active-key="subTabsName">
+      <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+        <Demo03CourseForm
+          ref="demo03CourseFormRef"
+          :student-id="formData?.id"
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+        <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData?.id" />
+      </Tabs.TabPane>
+    </Tabs>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo01/index.vue b/apps/web-tdesign/src/views/infra/demo/general/demo01/index.vue
new file mode 100644
index 000000000..a9b00a346
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo01/index.vue
@@ -0,0 +1,311 @@
+<script lang="ts" setup>
+import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import {
+  cloneDeep,
+  downloadFileFromBlobPart,
+  formatDateTime,
+  isEmpty,
+} from '@vben/utils';
+
+import {
+  Button,
+  DateRangePicker,
+  Form,
+  Input,
+  Pagination,
+  Select,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo01Contact,
+  deleteDemo01ContactList,
+  exportDemo01Contact,
+  getDemo01ContactPage,
+} from '#/api/infra/demo/demo01';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo01ContactForm from './modules/form.vue';
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo01ContactApi.Demo01Contact[]>([]); // 列表的数据
+
+const total = ref(0); // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  sex: undefined,
+  createTime: undefined,
+});
+const queryFormRef = ref(); // 搜索的表单
+const exportLoading = ref(false); // 导出的加载中
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    const data = await getDemo01ContactPage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo01ContactForm,
+  destroyOnClose: true,
+});
+
+/** 创建示例联系人 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑示例联系人 */
+function handleEdit(row: Demo01ContactApi.Demo01Contact) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除示例联系人 */
+async function handleDelete(row: Demo01ContactApi.Demo01Contact) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo01Contact(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    });
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除示例联系人 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo01ContactList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo01ContactApi.Demo01Contact[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 导出表格 */
+async function handleExport() {
+  try {
+    exportLoading.value = true;
+    const data = await exportDemo01Contact(queryParams);
+    downloadFileFromBlobPart({ fileName: '示例联系人.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+}
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="getList" />
+
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="性别" name="sex">
+          <Select
+            v-model="queryParams.sex"
+            placeholder="请选择性别"
+            allow-clear
+            class="w-full"
+          >
+            <Select.Option
+              v-for="dict in getDictOptions(
+                DICT_TYPE.SYSTEM_USER_SEX,
+                'number',
+              )"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="示例联系人">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo01-contact:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['示例联系人']) }}
+          </Button>
+          <Button
+            theme="primary"
+            class="ml-2"
+            :loading="exportLoading"
+            @click="handleExport"
+            v-access:code="['infra:demo01-contact:export']"
+          >
+            <IconifyIcon icon="lucide:download" />
+            {{ $t('ui.actionTitle.export') }}
+          </Button>
+          <Button
+            theme="primary"
+            danger
+            class="ml-2"
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-access:code="['infra:demo01-contact:delete']"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+            批量删除
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        show-overflow
+        :loading="loading"
+        @checkbox-all="handleRowCheckboxChange"
+        @checkbox-change="handleRowCheckboxChange"
+      >
+        <VxeColumn type="checkbox" width="40" />
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" />
+        <VxeColumn field="sex" title="性别" align="center">
+          <template #default="{ row }">
+            <DictTag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="row.sex" />
+          </template>
+        </VxeColumn>
+        <VxeColumn field="birthday" title="出生年" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.birthday) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="description" title="简介" align="center" />
+        <VxeColumn field="avatar" title="头像" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              variant="text"
+              @click="handleEdit(row)"
+              v-access:code="['infra:demo01-contact:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              theme="danger"
+              class="ml-2"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo01-contact:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo01/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo01/modules/form.vue
new file mode 100644
index 000000000..362ca24b1
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo01/modules/form.vue
@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import type { DateValue } from 'tdesign-vue-next';
+
+import type { Demo01ContactApi } from '#/api/infra/demo/demo01';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { DatePicker, Form, Input, Radio, RadioGroup } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo01Contact,
+  getDemo01Contact,
+  updateDemo01Contact,
+} from '#/api/infra/demo/demo01';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { ImageUpload } from '#/components/upload';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formRef = ref();
+const formData = ref<Partial<Demo01ContactApi.Demo01Contact>>({
+  id: undefined,
+  name: undefined,
+  sex: undefined,
+  birthday: undefined,
+  description: undefined,
+  avatar: undefined,
+});
+const rules: Record<string, any[]> = {
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生年不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+};
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['示例联系人'])
+    : $t('ui.actionTitle.create', ['示例联系人']);
+});
+
+/** 重置表单 */
+function resetForm() {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    sex: undefined,
+    birthday: undefined,
+    description: undefined,
+    avatar: undefined,
+  };
+  formRef.value?.resetFields();
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo01ContactApi.Demo01Contact;
+    try {
+      await (formData.value?.id
+        ? updateDemo01Contact(data)
+        : createDemo01Contact(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo01ContactApi.Demo01Contact>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo01Contact(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    formData.value = data;
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="性别" name="sex">
+        <RadioGroup v-model="formData.sex">
+          <Radio
+            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number')"
+            :key="dict.value.toString()"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </Radio>
+        </RadioGroup>
+      </Form.Item>
+      <Form.Item label="出生年" name="birthday">
+        <DatePicker
+          v-model="formData.birthday as DateValue"
+          value-format="x"
+          placeholder="选择出生年"
+        />
+      </Form.Item>
+      <Form.Item label="简介" name="description">
+        <RichTextarea v-model="formData.description" height="500px" />
+      </Form.Item>
+      <Form.Item label="头像" name="avatar">
+        <ImageUpload v-model="formData.avatar" />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo02/index.vue b/apps/web-tdesign/src/views/infra/demo/general/demo02/index.vue
new file mode 100644
index 000000000..fdc92f64e
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo02/index.vue
@@ -0,0 +1,255 @@
+<script lang="ts" setup>
+import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import {
+  cloneDeep,
+  downloadFileFromBlobPart,
+  formatDateTime,
+  isEmpty,
+} from '@vben/utils';
+
+import { Button, DateRangePicker, Form, Input } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo02Category,
+  exportDemo02Category,
+  getDemo02CategoryList,
+} from '#/api/infra/demo/demo02';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo02CategoryForm from './modules/form.vue';
+
+const loading = ref(true); // 列表的加载中
+const list = ref<any[]>([]); // 树列表的数据
+
+const queryParams = reactive({
+  name: undefined,
+  parentId: undefined,
+  createTime: undefined,
+});
+const queryFormRef = ref(); // 搜索的表单
+const exportLoading = ref(false); // 导出的加载中
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    list.value = await getDemo02CategoryList(params);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo02CategoryForm,
+  destroyOnClose: true,
+});
+
+/** 创建示例分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑示例分类 */
+function handleEdit(row: Demo02CategoryApi.Demo02Category) {
+  formModalApi.setData(row).open();
+}
+
+/** 新增下级示例分类 */
+function handleAppend(row: Demo02CategoryApi.Demo02Category) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 删除示例分类 */
+async function handleDelete(row: Demo02CategoryApi.Demo02Category) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo02Category(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 导出表格 */
+async function handleExport() {
+  try {
+    exportLoading.value = true;
+    const data = await exportDemo02Category(queryParams);
+    downloadFileFromBlobPart({ fileName: '示例分类.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+}
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(true);
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+  tableRef.value?.setAllTreeExpand(isExpanded.value);
+}
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="getList" />
+
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="父级编号" name="parentId">
+          <Input
+            v-model="queryParams.parentId"
+            placeholder="请输入父级编号"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="示例分类">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button @click="toggleExpand" class="mr-2">
+            {{ isExpanded ? '收缩' : '展开' }}
+          </Button>
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo02-category:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['示例分类']) }}
+          </Button>
+          <Button
+            theme="primary"
+            class="ml-2"
+            :loading="exportLoading"
+            @click="handleExport"
+            v-access:code="['infra:demo02-category:export']"
+          >
+            <IconifyIcon icon="lucide:download" />
+            {{ $t('ui.actionTitle.export') }}
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        :tree-config="{
+          parentField: 'parentId',
+          rowField: 'id',
+          transform: true,
+          expandAll: true,
+          reserve: true,
+        }"
+        show-overflow
+        :loading="loading"
+      >
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" tree-node />
+        <VxeColumn field="parentId" title="父级编号" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              theme="primary"
+              variant="text"
+              @click="handleAppend(row)"
+              v-access:code="['infra:demo02-category:create']"
+            >
+              新增下级
+            </Button>
+            <Button
+              size="small"
+              theme="primary"
+              variant="text"
+              @click="handleEdit(row)"
+              v-access:code="['infra:demo02-category:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              theme="danger"
+              class="ml-2"
+              :disabled="!isEmpty(row.children)"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo02-category:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+    </ContentWrap>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo02/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo02/modules/form.vue
new file mode 100644
index 000000000..7f444e02b
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo02/modules/form.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo02CategoryApi } from '#/api/infra/demo/demo02';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { Form, Input, TreeSelect } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo02Category,
+  getDemo02Category,
+  getDemo02CategoryList,
+  updateDemo02Category,
+} from '#/api/infra/demo/demo02';
+import { $t } from '#/locales';
+
+type Rule = FormRule;
+
+const emit = defineEmits(['success']);
+
+const formRef = ref();
+const formData = ref<Partial<Demo02CategoryApi.Demo02Category>>({
+  id: undefined,
+  name: undefined,
+  parentId: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  parentId: [{ required: true, message: '父级编号不能为空', trigger: 'blur' }],
+};
+const demo02CategoryTree = ref<any[]>([]); // 树形结构
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['示例分类'])
+    : $t('ui.actionTitle.create', ['示例分类']);
+});
+
+/** 重置表单 */
+function resetForm() {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    parentId: undefined,
+  };
+  formRef.value?.resetFields();
+}
+
+/** 获得示例分类树 */
+async function getDemo02CategoryTree() {
+  demo02CategoryTree.value = [];
+  const data = await getDemo02CategoryList({});
+  data.unshift({
+    id: 0,
+    name: '顶级示例分类',
+  });
+  demo02CategoryTree.value = handleTree(data);
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo02CategoryApi.Demo02Category;
+    try {
+      await (formData.value?.id
+        ? updateDemo02Category(data)
+        : createDemo02Category(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo02CategoryApi.Demo02Category>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo02Category(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    formData.value = data;
+    // 加载树数据
+    await getDemo02CategoryTree();
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="父级编号" name="parentId">
+        <TreeSelect
+          v-model="formData.parentId"
+          :tree-data="demo02CategoryTree"
+          :field-names="{
+            label: 'name',
+            value: 'id',
+            children: 'children',
+          }"
+          checkable
+          tree-default-expand-all
+          placeholder="请选择父级编号"
+        />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/index.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/index.vue
new file mode 100644
index 000000000..e246a62c6
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/index.vue
@@ -0,0 +1,339 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import {
+  cloneDeep,
+  downloadFileFromBlobPart,
+  formatDateTime,
+  isEmpty,
+} from '@vben/utils';
+
+import {
+  Button,
+  DateRangePicker,
+  Form,
+  Input,
+  Pagination,
+  Select,
+  Tabs,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Student,
+  deleteDemo03StudentList,
+  exportDemo03Student,
+  getDemo03StudentPage,
+} from '#/api/infra/demo/demo03/erp';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo03CourseList from './modules/demo03-course-list.vue';
+import Demo03GradeList from './modules/demo03-grade-list.vue';
+import Demo03StudentForm from './modules/form.vue';
+
+/** 子表的列表 */
+const subTabsName = ref('demo03Course');
+const selectDemo03Student = ref<Demo03StudentApi.Demo03Student>();
+async function onCellClick({ row }: { row: Demo03StudentApi.Demo03Student }) {
+  selectDemo03Student.value = row;
+}
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Student[]>([]); // 列表的数据
+
+const total = ref(0); // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  sex: undefined,
+  description: undefined,
+  createTime: undefined,
+});
+const queryFormRef = ref(); // 搜索的表单
+const exportLoading = ref(false); // 导出的加载中
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    const data = await getDemo03StudentPage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03StudentForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑学生 */
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Student(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    });
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  checkedIds.value = records.map((item) => item.id)!;
+}
+
+/** 导出表格 */
+async function handleExport() {
+  try {
+    exportLoading.value = true;
+    const data = await exportDemo03Student(queryParams);
+    downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+}
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="getList" />
+
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="性别" name="sex">
+          <Select
+            v-model="queryParams.sex"
+            placeholder="请选择性别"
+            allow-clear
+            class="w-full"
+          >
+            <Select.Option
+              v-for="dict in getDictOptions(
+                DICT_TYPE.SYSTEM_USER_SEX,
+                'number',
+              )"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="学生">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo03-student:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['学生']) }}
+          </Button>
+          <Button
+            theme="primary"
+            class="ml-2"
+            :loading="exportLoading"
+            @click="handleExport"
+            v-access:code="['infra:demo03-student:export']"
+          >
+            <IconifyIcon icon="lucide:download" />
+            {{ $t('ui.actionTitle.export') }}
+          </Button>
+          <Button
+            theme="primary"
+            danger
+            class="ml-2"
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-access:code="['infra:demo03-student:delete']"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+            批量删除
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        @cell-click="onCellClick"
+        :row-config="{
+          keyField: 'id',
+          isHover: true,
+          isCurrent: true,
+        }"
+        show-overflow
+        :loading="loading"
+        @checkbox-all="handleRowCheckboxChange"
+        @checkbox-change="handleRowCheckboxChange"
+      >
+        <VxeColumn type="checkbox" width="40" />
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" />
+        <VxeColumn field="sex" title="性别" align="center">
+          <template #default="{ row }">
+            <DictTag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="row.sex" />
+          </template>
+        </VxeColumn>
+        <VxeColumn field="birthday" title="出生日期" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.birthday) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="description" title="简介" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              variant="text"
+              @click="handleEdit(row)"
+              v-access:code="['infra:demo03-student:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              danger
+              class="ml-2"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo03-student:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
+
+    <ContentWrap>
+      <!-- 子表的表单 -->
+      <Tabs v-model:active-key="subTabsName">
+        <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+          <Demo03CourseList :student-id="selectDemo03Student?.id" />
+        </Tabs.TabPane>
+        <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+          <Demo03GradeList :student-id="selectDemo03Student?.id" />
+        </Tabs.TabPane>
+      </Tabs>
+    </ContentWrap>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-course-form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-course-form.vue
new file mode 100644
index 000000000..91634369f
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-course-form.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Form, Input } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Course,
+  getDemo03Course,
+  updateDemo03Course,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+type Rule = FormRule;
+
+const emit = defineEmits(['success']);
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生课程'])
+    : $t('ui.actionTitle.create', ['学生课程']);
+});
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Course>>({
+  id: undefined,
+  studentId: undefined,
+  name: undefined,
+  score: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  score: [{ required: true, message: '分数不能为空', trigger: 'blur' }],
+};
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo03StudentApi.Demo03Course;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Course(data)
+        : createDemo03Course(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Course>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Course(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 设置到 values
+    formData.value = data;
+  },
+});
+
+/** 重置表单 */
+function resetForm() {
+  formData.value = {
+    id: undefined,
+    studentId: undefined,
+    name: undefined,
+    score: undefined,
+  };
+  formRef.value?.resetFields();
+}
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="学生编号" name="studentId">
+        <Input v-model="formData.studentId" placeholder="请输入学生编号" />
+      </Form.Item>
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="分数" name="score">
+        <Input v-model="formData.score" placeholder="请输入分数" />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
new file mode 100644
index 000000000..1730c5094
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-course-list.vue
@@ -0,0 +1,291 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { nextTick, onMounted, reactive, ref, watch } from 'vue';
+
+import { ContentWrap, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import { cloneDeep, formatDateTime, isEmpty } from '@vben/utils';
+
+import {
+  Button,
+  DateRangePicker,
+  Form,
+  Input,
+  Pagination,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Course,
+  deleteDemo03CourseList,
+  getDemo03CoursePage,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo03CourseForm from './demo03-course-form.vue';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03CourseForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生课程 */
+function handleCreate() {
+  if (!props.studentId) {
+    message.warning('请先选择一个学生!');
+    return;
+  }
+  formModalApi.setData({ studentId: props.studentId }).open();
+}
+
+/** 编辑学生课程 */
+function handleEdit(row: Demo03StudentApi.Demo03Course) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生课程 */
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Course(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    });
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生课程 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03CourseList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Course[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Course[]>([]); // 列表的数据
+const total = ref(0); // 列表的总页数
+const queryFormRef = ref(); // 搜索的表单
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  studentId: undefined,
+  name: undefined,
+  score: undefined,
+  createTime: undefined,
+});
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    if (!props.studentId) {
+      return [];
+    }
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    params.studentId = props.studentId;
+    const data = await getDemo03CoursePage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await getList();
+  },
+  { immediate: true },
+);
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <FormModal @success="getList" />
+  <div class="h-[600px]">
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="学生编号" name="studentId">
+          <Input
+            v-model="queryParams.studentId"
+            placeholder="请输入学生编号"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="分数" name="score">
+          <Input
+            v-model="queryParams.score"
+            placeholder="请输入分数"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="学生">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo03-student:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['学生']) }}
+          </Button>
+          <Button
+            theme="primary"
+            danger
+            class="ml-2"
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-access:code="['infra:demo03-student:delete']"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+            批量删除
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        show-overflow
+        :loading="loading"
+        @checkbox-all="handleRowCheckboxChange"
+        @checkbox-change="handleRowCheckboxChange"
+      >
+        <VxeColumn type="checkbox" width="40" />
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="studentId" title="学生编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" />
+        <VxeColumn field="score" title="分数" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              variant="text"
+              @click="handleEdit(row)"
+              v-access:code="['infra:demo03-student:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              danger
+              class="ml-2"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo03-student:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-form.vue
new file mode 100644
index 000000000..961aa94b6
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-form.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Form, Input } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Grade,
+  getDemo03Grade,
+  updateDemo03Grade,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+
+type Rule = FormRule;
+
+const emit = defineEmits(['success']);
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生班级'])
+    : $t('ui.actionTitle.create', ['学生班级']);
+});
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Grade>>({
+  id: undefined,
+  studentId: undefined,
+  name: undefined,
+  teacher: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  teacher: [{ required: true, message: '班主任不能为空', trigger: 'blur' }],
+};
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo03StudentApi.Demo03Grade;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Grade(data)
+        : createDemo03Grade(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Grade>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Grade(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    // 设置到 values
+    formData.value = data;
+  },
+});
+
+/** 重置表单 */
+function resetForm() {
+  formData.value = {
+    id: undefined,
+    studentId: undefined,
+    name: undefined,
+    teacher: undefined,
+  };
+  formRef.value?.resetFields();
+}
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="学生编号" name="studentId">
+        <Input v-model="formData.studentId" placeholder="请输入学生编号" />
+      </Form.Item>
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="班主任" name="teacher">
+        <Input v-model="formData.teacher" placeholder="请输入班主任" />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
new file mode 100644
index 000000000..9b7f4e138
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/demo03-grade-list.vue
@@ -0,0 +1,291 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { nextTick, onMounted, reactive, ref, watch } from 'vue';
+
+import { ContentWrap, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import { cloneDeep, formatDateTime, isEmpty } from '@vben/utils';
+
+import {
+  Button,
+  DateRangePicker,
+  Form,
+  Input,
+  Pagination,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Grade,
+  deleteDemo03GradeList,
+  getDemo03GradePage,
+} from '#/api/infra/demo/demo03/erp';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo03GradeForm from './demo03-grade-form.vue';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03GradeForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生班级 */
+function handleCreate() {
+  if (!props.studentId) {
+    message.warning('请先选择一个学生!');
+    return;
+  }
+  formModalApi.setData({ studentId: props.studentId }).open();
+}
+
+/** 编辑学生班级 */
+function handleEdit(row: Demo03StudentApi.Demo03Grade) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生班级 */
+async function handleDelete(row: Demo03StudentApi.Demo03Grade) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Grade(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    });
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生班级 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03GradeList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Grade[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Grade[]>([]); // 列表的数据
+const total = ref(0); // 列表的总页数
+const queryFormRef = ref(); // 搜索的表单
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  studentId: undefined,
+  name: undefined,
+  teacher: undefined,
+  createTime: undefined,
+});
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    if (!props.studentId) {
+      return [];
+    }
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    params.studentId = props.studentId;
+    const data = await getDemo03GradePage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await getList();
+  },
+  { immediate: true },
+);
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <FormModal @success="getList" />
+  <div class="h-[600px]">
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="学生编号" name="studentId">
+          <Input
+            v-model="queryParams.studentId"
+            placeholder="请输入学生编号"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="班主任" name="teacher">
+          <Input
+            v-model="queryParams.teacher"
+            placeholder="请输入班主任"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="学生">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo03-student:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['学生']) }}
+          </Button>
+          <Button
+            theme="primary"
+            danger
+            class="ml-2"
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-access:code="['infra:demo03-student:delete']"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+            批量删除
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        show-overflow
+        :loading="loading"
+        @checkbox-all="handleRowCheckboxChange"
+        @checkbox-change="handleRowCheckboxChange"
+      >
+        <VxeColumn type="checkbox" width="40" />
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="studentId" title="学生编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" />
+        <VxeColumn field="teacher" title="班主任" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              variant="text"
+              @click="handleEdit(row)"
+              v-access:code="['infra:demo03-student:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              danger
+              class="ml-2"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo03-student:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/form.vue
new file mode 100644
index 000000000..395ef3535
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/erp/modules/form.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/erp';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { DatePicker, Form, Input, Radio, RadioGroup } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Student,
+  getDemo03Student,
+  updateDemo03Student,
+} from '#/api/infra/demo/demo03/erp';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { $t } from '#/locales';
+
+type Rule = FormRule;
+
+const emit = defineEmits(['success']);
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Student>>({
+  id: undefined,
+  name: undefined,
+  sex: undefined,
+  birthday: undefined,
+  description: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+};
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生'])
+    : $t('ui.actionTitle.create', ['学生']);
+});
+
+/** 重置表单 */
+function resetForm() {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    sex: undefined,
+    birthday: undefined,
+    description: undefined,
+  };
+  formRef.value?.resetFields();
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo03StudentApi.Demo03Student;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Student(data)
+        : createDemo03Student(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Student(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    formData.value = data;
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="性别" name="sex">
+        <RadioGroup v-model="formData.sex">
+          <Radio
+            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number')"
+            :key="dict.value.toString()"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </Radio>
+        </RadioGroup>
+      </Form.Item>
+      <Form.Item label="出生日期" name="birthday">
+        <DatePicker
+          v-model="formData.birthday"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </Form.Item>
+      <Form.Item label="简介" name="description">
+        <RichTextarea v-model="formData.description" height="500px" />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/index.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/index.vue
new file mode 100644
index 000000000..9e8ea1b8d
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/index.vue
@@ -0,0 +1,331 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import {
+  cloneDeep,
+  downloadFileFromBlobPart,
+  formatDateTime,
+  isEmpty,
+} from '@vben/utils';
+
+import {
+  Button,
+  DateRangePicker,
+  Form,
+  Input,
+  Pagination,
+  Select,
+  Tabs,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Student,
+  deleteDemo03StudentList,
+  exportDemo03Student,
+  getDemo03StudentPage,
+} from '#/api/infra/demo/demo03/normal';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo03CourseList from './modules/demo03-course-list.vue';
+import Demo03GradeList from './modules/demo03-grade-list.vue';
+import Demo03StudentForm from './modules/form.vue';
+
+/** 子表的列表 */
+const subTabsName = ref('demo03Course');
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Student[]>([]); // 列表的数据
+
+const total = ref(0); // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  sex: undefined,
+  description: undefined,
+  createTime: undefined,
+});
+const queryFormRef = ref(); // 搜索的表单
+const exportLoading = ref(false); // 导出的加载中
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    const data = await getDemo03StudentPage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03StudentForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑学生 */
+function handleEdit(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Student(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    });
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 导出表格 */
+async function handleExport() {
+  try {
+    exportLoading.value = true;
+    const data = await exportDemo03Student(queryParams);
+    downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+}
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="getList" />
+
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="性别" name="sex">
+          <Select
+            v-model="queryParams.sex"
+            placeholder="请选择性别"
+            allow-clear
+            class="w-full"
+          >
+            <Select.Option
+              v-for="dict in getDictOptions(
+                DICT_TYPE.SYSTEM_USER_SEX,
+                'number',
+              )"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="学生">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo03-student:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['学生']) }}
+          </Button>
+          <Button
+            theme="primary"
+            class="ml-2"
+            :loading="exportLoading"
+            @click="handleExport"
+            v-access:code="['infra:demo03-student:export']"
+          >
+            <IconifyIcon icon="lucide:download" />
+            {{ $t('ui.actionTitle.export') }}
+          </Button>
+          <Button
+            theme="primary"
+            danger
+            class="ml-2"
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-access:code="['infra:demo03-student:delete']"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+            批量删除
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        show-overflow
+        :loading="loading"
+        @checkbox-all="handleRowCheckboxChange"
+        @checkbox-change="handleRowCheckboxChange"
+      >
+        <VxeColumn type="checkbox" width="40" />
+        <!-- 子表的列表 -->
+        <VxeColumn type="expand" width="60">
+          <template #content="{ row }">
+            <!-- 子表的表单 -->
+            <Tabs v-model:active-key="subTabsName" class="mx-8">
+              <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+                <Demo03CourseList :student-id="row?.id" />
+              </Tabs.TabPane>
+              <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+                <Demo03GradeList :student-id="row?.id" />
+              </Tabs.TabPane>
+            </Tabs>
+          </template>
+        </VxeColumn>
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" />
+        <VxeColumn field="sex" title="性别" align="center">
+          <template #default="{ row }">
+            <DictTag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="row.sex" />
+          </template>
+        </VxeColumn>
+        <VxeColumn field="birthday" title="出生日期" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.birthday) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="description" title="简介" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              variant="text"
+              @click="handleEdit(row)"
+              v-access:code="['infra:demo03-student:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              danger
+              class="ml-2"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo03-student:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-course-form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-course-form.vue
new file mode 100644
index 000000000..31f77d290
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-course-form.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Input } from 'tdesign-vue-next';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
+import { $t } from '#/locales';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const list = ref<Demo03StudentApi.Demo03Course[]>([]); // 列表的数据
+const tableRef = ref<VxeTableInstance>();
+/** 添加学生课程 */
+async function onAdd() {
+  await tableRef.value?.insertAt({} as Demo03StudentApi.Demo03Course, -1);
+}
+
+/** 删除学生课程 */
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
+  await tableRef.value?.remove(row);
+}
+
+/** 提供获取表格数据的方法供父组件调用 */
+defineExpose({
+  getData: (): Demo03StudentApi.Demo03Course[] => {
+    const data = list.value as Demo03StudentApi.Demo03Course[];
+    const removeRecords =
+      tableRef.value?.getRemoveRecords() as Demo03StudentApi.Demo03Course[];
+    const insertRecords =
+      tableRef.value?.getInsertRecords() as Demo03StudentApi.Demo03Course[];
+    return data
+      .filter((row) => !removeRecords.some((removed) => removed.id === row.id))
+      ?.concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
+  },
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    list.value = await getDemo03CourseListByStudentId(props.studentId!);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <VxeTable ref="tableRef" :data="list" show-overflow class="mx-4">
+    <VxeColumn field="name" title="名字" align="center">
+      <template #default="{ row }">
+        <Input v-model="row.name" />
+      </template>
+    </VxeColumn>
+    <VxeColumn field="score" title="分数" align="center">
+      <template #default="{ row }">
+        <Input v-model="row.score" />
+      </template>
+    </VxeColumn>
+    <VxeColumn field="operation" title="操作" align="center">
+      <template #default="{ row }">
+        <Button
+          size="small"
+          variant="text"
+          danger
+          @click="handleDelete(row)"
+          v-access:code="['infra:demo03-student:delete']"
+        >
+          {{ $t('ui.actionTitle.delete') }}
+        </Button>
+      </template>
+    </VxeColumn>
+  </VxeTable>
+  <div class="mt-4 flex justify-center">
+    <Button
+      theme="primary"
+      ghost
+      @click="onAdd"
+      v-access:code="['infra:demo03-student:create']"
+    >
+      <IconifyIcon icon="lucide:plus" />
+      {{ $t('ui.actionTitle.create', ['学生课程']) }}
+    </Button>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
new file mode 100644
index 000000000..bb49eeb74
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-course-list.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { ContentWrap } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Course[]>([]); // 列表的数据
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    if (!props.studentId) {
+      return [];
+    }
+    list.value = await getDemo03CourseListByStudentId(props.studentId!);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await getList();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <ContentWrap title="学生课程列表">
+    <VxeTable :data="list" show-overflow :loading="loading">
+      <VxeColumn field="id" title="编号" align="center" />
+      <VxeColumn field="studentId" title="学生编号" align="center" />
+      <VxeColumn field="name" title="名字" align="center" />
+      <VxeColumn field="score" title="分数" align="center" />
+      <VxeColumn field="createTime" title="创建时间" align="center">
+        <template #default="{ row }">
+          {{ formatDateTime(row.createTime) }}
+        </template>
+      </VxeColumn>
+    </VxeTable>
+  </ContentWrap>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-form.vue
new file mode 100644
index 000000000..7c59921bd
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-form.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { Form, Input } from 'tdesign-vue-next';
+
+import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/normal';
+
+type Rule = FormRule;
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Grade>>({
+  id: undefined,
+  studentId: undefined,
+  name: undefined,
+  teacher: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  teacher: [{ required: true, message: '班主任不能为空', trigger: 'blur' }],
+};
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: async () => await formRef.value?.validate(),
+  getValues: () => formData.value,
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    formData.value = await getDemo03GradeByStudentId(props.studentId!);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    class="mx-4"
+    :model="formData"
+    :rules="rules"
+    :label-col="{ span: 5 }"
+    :wrapper-col="{ span: 18 }"
+  >
+    <Form.Item label="学生编号" name="studentId">
+      <Input v-model="formData.studentId" placeholder="请输入学生编号" />
+    </Form.Item>
+    <Form.Item label="名字" name="name">
+      <Input v-model="formData.name" placeholder="请输入名字" />
+    </Form.Item>
+    <Form.Item label="班主任" name="teacher">
+      <Input v-model="formData.teacher" placeholder="请输入班主任" />
+    </Form.Item>
+  </Form>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
new file mode 100644
index 000000000..a08d67af3
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/demo03-grade-list.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { ContentWrap } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/normal';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Grade[]>([]); // 列表的数据
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    if (!props.studentId) {
+      return [];
+    }
+    list.value = [await getDemo03GradeByStudentId(props.studentId!)];
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    await getList();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <ContentWrap title="学生班级列表">
+    <VxeTable :data="list" show-overflow :loading="loading">
+      <VxeColumn field="id" title="编号" align="center" />
+      <VxeColumn field="studentId" title="学生编号" align="center" />
+      <VxeColumn field="name" title="名字" align="center" />
+      <VxeColumn field="teacher" title="班主任" align="center" />
+      <VxeColumn field="createTime" title="创建时间" align="center">
+        <template #default="{ row }">
+          {{ formatDateTime(row.createTime) }}
+        </template>
+      </VxeColumn>
+    </VxeTable>
+  </ContentWrap>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/form.vue
new file mode 100644
index 000000000..646869558
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/inner/modules/form.vue
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import {
+  DatePicker,
+  Form,
+  Input,
+  Radio,
+  RadioGroup,
+  Tabs,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Student,
+  getDemo03Student,
+  updateDemo03Student,
+} from '#/api/infra/demo/demo03/normal';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { $t } from '#/locales';
+
+import Demo03CourseForm from './demo03-course-form.vue';
+import Demo03GradeForm from './demo03-grade-form.vue';
+
+type Rule = FormRule;
+
+const emit = defineEmits(['success']);
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Student>>({
+  id: undefined,
+  name: undefined,
+  sex: undefined,
+  birthday: undefined,
+  description: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+};
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生'])
+    : $t('ui.actionTitle.create', ['学生']);
+});
+
+/** 子表的表单 */
+const subTabsName = ref('demo03Course');
+const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
+const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();
+
+/** 重置表单 */
+function resetForm() {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    sex: undefined,
+    birthday: undefined,
+    description: undefined,
+  };
+  formRef.value?.resetFields();
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+    // 校验子表单
+    try {
+      await demo03GradeFormRef.value?.validate();
+    } catch {
+      subTabsName.value = 'demo03Grade';
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo03StudentApi.Demo03Student;
+    // 拼接子表的数据
+    data.demo03courses = demo03CourseFormRef.value?.getData();
+    data.demo03grade =
+      demo03GradeFormRef.value?.getValues() as Demo03StudentApi.Demo03Grade;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Student(data)
+        : createDemo03Student(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Student(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    formData.value = data;
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="性别" name="sex">
+        <RadioGroup v-model="formData.sex">
+          <Radio
+            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number')"
+            :key="dict.value.toString()"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </Radio>
+        </RadioGroup>
+      </Form.Item>
+      <Form.Item label="出生日期" name="birthday">
+        <DatePicker
+          v-model="formData.birthday"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </Form.Item>
+      <Form.Item label="简介" name="description">
+        <RichTextarea v-model="formData.description" height="500px" />
+      </Form.Item>
+    </Form>
+    <!-- 子表的表单 -->
+    <Tabs v-model:active-key="subTabsName">
+      <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+        <Demo03CourseForm
+          ref="demo03CourseFormRef"
+          :student-id="formData?.id"
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+        <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData?.id" />
+      </Tabs.TabPane>
+    </Tabs>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/index.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/index.vue
new file mode 100644
index 000000000..5f9d6a39e
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/index.vue
@@ -0,0 +1,311 @@
+<script lang="ts" setup>
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { ContentWrap, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { useTableToolbar, VbenVxeTableToolbar } from '@vben/plugins/vxe-table';
+import {
+  cloneDeep,
+  downloadFileFromBlobPart,
+  formatDateTime,
+  isEmpty,
+} from '@vben/utils';
+
+import {
+  Button,
+  DateRangePicker,
+  Form,
+  Input,
+  Pagination,
+  Select,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  deleteDemo03Student,
+  deleteDemo03StudentList,
+  exportDemo03Student,
+  getDemo03StudentPage,
+} from '#/api/infra/demo/demo03/normal';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import { getRangePickerDefaultProps } from '#/utils';
+
+import Demo03StudentForm from './modules/form.vue';
+
+const loading = ref(true); // 列表的加载中
+const list = ref<Demo03StudentApi.Demo03Student[]>([]); // 列表的数据
+
+const total = ref(0); // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  sex: undefined,
+  description: undefined,
+  createTime: undefined,
+});
+const queryFormRef = ref(); // 搜索的表单
+const exportLoading = ref(false); // 导出的加载中
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const params = cloneDeep(queryParams) as any;
+    if (params.createTime && Array.isArray(params.createTime)) {
+      params.createTime = (params.createTime as string[]).join(',');
+    }
+    const data = await getDemo03StudentPage(params);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Demo03StudentForm,
+  destroyOnClose: true,
+});
+
+/** 创建学生 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑学生 */
+function handle(row: Demo03StudentApi.Demo03Student) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除学生 */
+async function handleDelete(row: Demo03StudentApi.Demo03Student) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.id]),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03Student(row.id!);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
+    });
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除学生 */
+async function handleDeleteBatch() {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDemo03StudentList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    await getList();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: Demo03StudentApi.Demo03Student[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 导出表格 */
+async function handleExport() {
+  try {
+    exportLoading.value = true;
+    const data = await exportDemo03Student(queryParams);
+    downloadFileFromBlobPart({ fileName: '学生.xls', source: data });
+  } finally {
+    exportLoading.value = false;
+  }
+}
+
+/** 初始化 */
+const { hiddenSearchBar, tableToolbarRef, tableRef } = useTableToolbar();
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="getList" />
+
+    <ContentWrap v-if="!hiddenSearchBar">
+      <!-- 搜索工作栏 -->
+      <Form :model="queryParams" ref="queryFormRef" layout="inline">
+        <Form.Item label="名字" name="name">
+          <Input
+            v-model="queryParams.name"
+            placeholder="请输入名字"
+            allow-clear
+            @press-enter="handleQuery"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item label="性别" name="sex">
+          <Select
+            v-model="queryParams.sex"
+            placeholder="请选择性别"
+            allow-clear
+            class="w-full"
+          >
+            <Select.Option
+              v-for="dict in getDictOptions(
+                DICT_TYPE.SYSTEM_USER_SEX,
+                'number',
+              )"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label="创建时间" name="createTime">
+          <DateRangePicker
+            v-model="queryParams.createTime"
+            v-bind="getRangePickerDefaultProps()"
+            class="w-full"
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button class="ml-2" @click="resetQuery"> 重置 </Button>
+          <Button class="ml-2" @click="handleQuery" theme="primary">
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap title="学生">
+      <template #extra>
+        <VbenVxeTableToolbar
+          ref="tableToolbarRef"
+          v-model:hidden-search="hiddenSearchBar"
+        >
+          <Button
+            class="ml-2"
+            theme="primary"
+            @click="handleCreate"
+            v-access:code="['infra:demo03-student:create']"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            {{ $t('ui.actionTitle.create', ['学生']) }}
+          </Button>
+          <Button
+            theme="primary"
+            class="ml-2"
+            :loading="exportLoading"
+            @click="handleExport"
+            v-access:code="['infra:demo03-student:export']"
+          >
+            <IconifyIcon icon="lucide:download" />
+            {{ $t('ui.actionTitle.export') }}
+          </Button>
+          <Button
+            theme="primary"
+            danger
+            class="ml-2"
+            :disabled="isEmpty(checkedIds)"
+            @click="handleDeleteBatch"
+            v-access:code="['infra:demo03-student:delete']"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+            批量删除
+          </Button>
+        </VbenVxeTableToolbar>
+      </template>
+      <VxeTable
+        ref="tableRef"
+        :data="list"
+        show-overflow
+        :loading="loading"
+        @checkbox-all="handleRowCheckboxChange"
+        @checkbox-change="handleRowCheckboxChange"
+      >
+        <VxeColumn type="checkbox" width="40" />
+        <VxeColumn field="id" title="编号" align="center" />
+        <VxeColumn field="name" title="名字" align="center" />
+        <VxeColumn field="sex" title="性别" align="center">
+          <template #default="{ row }">
+            <DictTag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="row.sex" />
+          </template>
+        </VxeColumn>
+        <VxeColumn field="birthday" title="出生日期" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.birthday) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="description" title="简介" align="center" />
+        <VxeColumn field="createTime" title="创建时间" align="center">
+          <template #default="{ row }">
+            {{ formatDateTime(row.createTime) }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="operation" title="操作" align="center">
+          <template #default="{ row }">
+            <Button
+              size="small"
+              variant="text"
+              @click="handle(row)"
+              v-access:code="['infra:demo03-student:update']"
+            >
+              {{ $t('ui.actionTitle.edit') }}
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              danger
+              class="ml-2"
+              @click="handleDelete(row)"
+              v-access:code="['infra:demo03-student:delete']"
+            >
+              {{ $t('ui.actionTitle.delete') }}
+            </Button>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+      <!-- 分页 -->
+      <div class="mt-2 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          show-size-changer
+          @change="getList"
+        />
+      </div>
+    </ContentWrap>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/demo03-course-form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/demo03-course-form.vue
new file mode 100644
index 000000000..31f77d290
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/demo03-course-form.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Input } from 'tdesign-vue-next';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { getDemo03CourseListByStudentId } from '#/api/infra/demo/demo03/normal';
+import { $t } from '#/locales';
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const list = ref<Demo03StudentApi.Demo03Course[]>([]); // 列表的数据
+const tableRef = ref<VxeTableInstance>();
+/** 添加学生课程 */
+async function onAdd() {
+  await tableRef.value?.insertAt({} as Demo03StudentApi.Demo03Course, -1);
+}
+
+/** 删除学生课程 */
+async function handleDelete(row: Demo03StudentApi.Demo03Course) {
+  await tableRef.value?.remove(row);
+}
+
+/** 提供获取表格数据的方法供父组件调用 */
+defineExpose({
+  getData: (): Demo03StudentApi.Demo03Course[] => {
+    const data = list.value as Demo03StudentApi.Demo03Course[];
+    const removeRecords =
+      tableRef.value?.getRemoveRecords() as Demo03StudentApi.Demo03Course[];
+    const insertRecords =
+      tableRef.value?.getInsertRecords() as Demo03StudentApi.Demo03Course[];
+    return data
+      .filter((row) => !removeRecords.some((removed) => removed.id === row.id))
+      ?.concat(insertRecords.map((row: any) => ({ ...row, id: undefined })));
+  },
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    list.value = await getDemo03CourseListByStudentId(props.studentId!);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <VxeTable ref="tableRef" :data="list" show-overflow class="mx-4">
+    <VxeColumn field="name" title="名字" align="center">
+      <template #default="{ row }">
+        <Input v-model="row.name" />
+      </template>
+    </VxeColumn>
+    <VxeColumn field="score" title="分数" align="center">
+      <template #default="{ row }">
+        <Input v-model="row.score" />
+      </template>
+    </VxeColumn>
+    <VxeColumn field="operation" title="操作" align="center">
+      <template #default="{ row }">
+        <Button
+          size="small"
+          variant="text"
+          danger
+          @click="handleDelete(row)"
+          v-access:code="['infra:demo03-student:delete']"
+        >
+          {{ $t('ui.actionTitle.delete') }}
+        </Button>
+      </template>
+    </VxeColumn>
+  </VxeTable>
+  <div class="mt-4 flex justify-center">
+    <Button
+      theme="primary"
+      ghost
+      @click="onAdd"
+      v-access:code="['infra:demo03-student:create']"
+    >
+      <IconifyIcon icon="lucide:plus" />
+      {{ $t('ui.actionTitle.create', ['学生课程']) }}
+    </Button>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/demo03-grade-form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/demo03-grade-form.vue
new file mode 100644
index 000000000..7c59921bd
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/demo03-grade-form.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { nextTick, ref, watch } from 'vue';
+
+import { Form, Input } from 'tdesign-vue-next';
+
+import { getDemo03GradeByStudentId } from '#/api/infra/demo/demo03/normal';
+
+type Rule = FormRule;
+
+const props = defineProps<{
+  studentId?: number; // 学生编号（主表的关联字段）
+}>();
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Grade>>({
+  id: undefined,
+  studentId: undefined,
+  name: undefined,
+  teacher: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  teacher: [{ required: true, message: '班主任不能为空', trigger: 'blur' }],
+};
+/** 暴露出表单校验方法和表单值获取方法 */
+defineExpose({
+  validate: async () => await formRef.value?.validate(),
+  getValues: () => formData.value,
+});
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  async (val) => {
+    if (!val) {
+      return;
+    }
+    await nextTick();
+    formData.value = await getDemo03GradeByStudentId(props.studentId!);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    class="mx-4"
+    :model="formData"
+    :rules="rules"
+    :label-col="{ span: 5 }"
+    :wrapper-col="{ span: 18 }"
+  >
+    <Form.Item label="学生编号" name="studentId">
+      <Input v-model="formData.studentId" placeholder="请输入学生编号" />
+    </Form.Item>
+    <Form.Item label="名字" name="name">
+      <Input v-model="formData.name" placeholder="请输入名字" />
+    </Form.Item>
+    <Form.Item label="班主任" name="teacher">
+      <Input v-model="formData.teacher" placeholder="请输入班主任" />
+    </Form.Item>
+  </Form>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/form.vue b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/form.vue
new file mode 100644
index 000000000..96cdcb788
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/demo/general/demo03/normal/modules/form.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import type { FormRule } from 'tdesign-vue-next';
+
+import type { Demo03StudentApi } from '#/api/infra/demo/demo03/normal';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import {
+  DatePicker,
+  Form,
+  Input,
+  Radio,
+  RadioGroup,
+  Tabs,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import {
+  createDemo03Student,
+  getDemo03Student,
+  updateDemo03Student,
+} from '#/api/infra/demo/demo03/normal';
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+import { $t } from '#/locales';
+
+import Demo03CourseForm from './demo03-course-form.vue';
+import Demo03GradeForm from './demo03-grade-form.vue';
+
+type Rule = FormRule;
+
+const emit = defineEmits(['success']);
+
+const formRef = ref();
+const formData = ref<Partial<Demo03StudentApi.Demo03Student>>({
+  id: undefined,
+  name: undefined,
+  sex: undefined,
+  birthday: undefined,
+  description: undefined,
+});
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
+  sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
+  birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
+  description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
+};
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['学生'])
+    : $t('ui.actionTitle.create', ['学生']);
+});
+
+/** 子表的表单 */
+const subTabsName = ref('demo03Course');
+const demo03CourseFormRef = ref<InstanceType<typeof Demo03CourseForm>>();
+const demo03GradeFormRef = ref<InstanceType<typeof Demo03GradeForm>>();
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    sex: undefined,
+    birthday: undefined,
+    description: undefined,
+  };
+  formRef.value?.resetFields();
+};
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+    // 校验子表单
+    try {
+      await demo03GradeFormRef.value?.validate();
+    } catch {
+      subTabsName.value = 'demo03Grade';
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = formData.value as Demo03StudentApi.Demo03Student;
+    // 拼接子表的数据
+    data.demo03courses = demo03CourseFormRef.value?.getData();
+    data.demo03grade = demo03GradeFormRef.value?.getValues() as any;
+    try {
+      await (formData.value?.id
+        ? updateDemo03Student(data)
+        : createDemo03Student(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      resetForm();
+      return;
+    }
+    // 加载数据
+    let data = modalApi.getData<Demo03StudentApi.Demo03Student>();
+    if (!data) {
+      return;
+    }
+    if (data.id) {
+      modalApi.lock();
+      try {
+        data = await getDemo03Student(data.id);
+      } finally {
+        modalApi.unlock();
+      }
+    }
+    formData.value = data;
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      :label-col="{ span: 5 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <Form.Item label="名字" name="name">
+        <Input v-model="formData.name" placeholder="请输入名字" />
+      </Form.Item>
+      <Form.Item label="性别" name="sex">
+        <RadioGroup v-model="formData.sex">
+          <Radio
+            v-for="dict in getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number')"
+            :key="dict.value.toString()"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </Radio>
+        </RadioGroup>
+      </Form.Item>
+      <Form.Item label="出生日期" name="birthday">
+        <DatePicker
+          v-model="formData.birthday"
+          value-format="x"
+          placeholder="选择出生日期"
+        />
+      </Form.Item>
+      <Form.Item label="简介" name="description">
+        <RichTextarea v-model="formData.description" height="500px" />
+      </Form.Item>
+    </Form>
+    <!-- 子表的表单 -->
+    <Tabs v-model:active-key="subTabsName">
+      <Tabs.TabPane key="demo03Course" tab="学生课程" force-render>
+        <Demo03CourseForm
+          ref="demo03CourseFormRef"
+          :student-id="formData?.id"
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="demo03Grade" tab="学生班级" force-render>
+        <Demo03GradeForm ref="demo03GradeFormRef" :student-id="formData?.id" />
+      </Tabs.TabPane>
+    </Tabs>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/druid/index.vue b/apps/web-tdesign/src/views/infra/druid/index.vue
new file mode 100644
index 000000000..01ec58d5f
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/druid/index.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
+
+import { getConfigKey } from '#/api/infra/config';
+
+const loading = ref(true); // 是否加载中
+const src = ref(`${import.meta.env.VITE_BASE_URL}/druid/index.html`);
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await getConfigKey('url.druid');
+    if (data && data.length > 0) {
+      src.value = data;
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="数据库 MyBatis" url="https://doc.iocoder.cn/mybatis/" />
+      <DocAlert
+        title="多数据源（读写分离）"
+        url="https://doc.iocoder.cn/dynamic-datasource/"
+      />
+    </template>
+
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/file/data.ts b/apps/web-tdesign/src/views/infra/file/data.ts
new file mode 100644
index 000000000..9ee70319b
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/file/data.ts
@@ -0,0 +1,107 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 表单的字段 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '文件上传',
+      component: 'Upload',
+      componentProps: {
+        placeholder: '请选择要上传的文件',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'path',
+      label: '文件路径',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文件路径',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '文件类型',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文件类型',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'name',
+      title: '文件名',
+      minWidth: 150,
+    },
+    {
+      field: 'path',
+      title: '文件路径',
+      minWidth: 200,
+      showOverflow: true,
+    },
+    {
+      field: 'url',
+      title: 'URL',
+      minWidth: 200,
+      showOverflow: true,
+    },
+    {
+      field: 'size',
+      title: '文件大小',
+      minWidth: 80,
+      formatter: 'formatFileSize',
+    },
+    {
+      field: 'type',
+      title: '文件类型',
+      minWidth: 120,
+    },
+    {
+      field: 'file-content',
+      title: '文件内容',
+      minWidth: 120,
+      slots: {
+        default: 'file-content',
+      },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/file/index.vue b/apps/web-tdesign/src/views/infra/file/index.vue
new file mode 100644
index 000000000..2f24de3a8
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/file/index.vue
@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraFileApi } from '#/api/infra/file';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty, openWindow } from '@vben/utils';
+
+import { useClipboard } from '@vueuse/core';
+import { Button } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteFile, deleteFileList, getFilePage } from '#/api/infra/file';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 上传文件 */
+function handleUpload() {
+  formModalApi.setData(null).open();
+}
+
+/** 复制链接到剪贴板 */
+const { copy } = useClipboard({ legacy: true });
+async function handleCopyUrl(row: InfraFileApi.File) {
+  if (!row.url) {
+    message.error('文件 URL 为空');
+    return;
+  }
+
+  try {
+    await copy(row.url);
+    message.success('复制成功');
+  } catch {
+    message.error('复制失败');
+  }
+}
+
+/** 删除文件 */
+async function handleDelete(row: InfraFileApi.File) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name || row.path]),
+    duration: 0,
+  });
+  try {
+    await deleteFile(row.id!);
+    message.success(
+      $t('ui.actionMessage.deleteSuccess', [row.name || row.path]),
+    );
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除文件 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteFileList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraFileApi.File[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getFilePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraFileApi.File>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="文件列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '上传文件',
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              onClick: handleUpload,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:file:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #file-content="{ row }">
+        <ImageViewer
+          v-if="row.type && row.type.includes('image')"
+          :images="[row.url]"
+        />
+        <Button v-else variant="text" @click="() => openWindow(row.url!)">
+          {{ row.type && row.type.includes('pdf') ? '预览' : '下载' }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '复制链接',
+              variant: 'text',
+              icon: ACTION_ICON.COPY,
+              onClick: handleCopyUrl.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:file:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/file/modules/form.vue b/apps/web-tdesign/src/views/infra/file/modules/form.vue
new file mode 100644
index 000000000..e0fa6affc
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/file/modules/form.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { Upload } from 'tdesign-vue-next';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { useUpload } from '#/components/upload/use-upload';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+    hideLabel: true,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema().map((item) => ({ ...item, label: '' })), // 去除label
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await useUpload().httpRequest(data.file);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: File) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+</script>
+
+<template>
+  <Modal title="上传图片">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <!-- 上传区域 -->
+          <Upload.Dragger
+            name="file"
+            :max-count="1"
+            accept=".jpg,.png,.gif,.webp"
+            :before-upload="beforeUpload"
+            list-type="picture-card"
+          >
+            <p class="ant-upload-drag-icon">
+              <span class="icon-[ant-design--inbox-outlined] text-2xl"></span>
+            </p>
+            <p class="ant-upload-text">点击或拖拽文件到此区域上传</p>
+            <p class="ant-upload-hint">
+              支持 .jpg、.png、.gif、.webp 格式图片文件
+            </p>
+          </Upload.Dragger>
+        </div>
+      </template>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/fileConfig/data.ts b/apps/web-tdesign/src/views/infra/fileConfig/data.ts
new file mode 100644
index 000000000..efe5823f8
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/fileConfig/data.ts
@@ -0,0 +1,333 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '配置名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入配置名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'storage',
+      label: '存储器',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'),
+        placeholder: '请选择存储器',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (formValues) => formValues.id,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+    // DB / Local / FTP / SFTP
+    {
+      fieldName: 'config.basePath',
+      label: '基础路径',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入基础路径',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 10 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.host',
+      label: '主机地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入主机地址',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 11 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.port',
+      label: '主机端口',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入主机端口',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 11 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.username',
+      label: '用户名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 11 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.password',
+      label: '密码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入密码',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) =>
+          formValues.storage >= 11 && formValues.storage <= 12,
+      },
+    },
+    {
+      fieldName: 'config.mode',
+      label: '连接模式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '主动模式', value: 'Active' },
+          { label: '被动模式', value: 'Passive' },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 11,
+      },
+    },
+    // S3
+    {
+      fieldName: 'config.endpoint',
+      label: '节点地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入节点地址',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
+    {
+      fieldName: 'config.bucket',
+      label: '存储 bucket',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 bucket',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
+    {
+      fieldName: 'config.accessKey',
+      label: 'accessKey',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 accessKey',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
+    {
+      fieldName: 'config.accessSecret',
+      label: 'accessSecret',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 accessSecret',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
+    {
+      fieldName: 'config.enablePathStyleAccess',
+      label: '是否 Path Style',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '启用', value: true },
+          { label: '禁用', value: false },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+      defaultValue: false,
+    },
+    {
+      fieldName: 'config.enablePublicAccess',
+      label: '公开访问',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '公开', value: true },
+          { label: '私有', value: false },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+      defaultValue: false,
+    },
+    // 通用
+    {
+      fieldName: 'config.domain',
+      label: '自定义域名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入自定义域名',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => !!formValues.storage,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '配置名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入配置名',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'storage',
+      label: '存储器',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'),
+        placeholder: '请选择存储器',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '配置名',
+      minWidth: 120,
+    },
+    {
+      field: 'storage',
+      title: '存储器',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_FILE_STORAGE },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 150,
+    },
+    {
+      field: 'master',
+      title: '主配置',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/fileConfig/index.vue b/apps/web-tdesign/src/views/infra/fileConfig/index.vue
new file mode 100644
index 000000000..1f2f2c065
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/fileConfig/index.vue
@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraFileConfigApi } from '#/api/infra/file-config';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty, openWindow } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteFileConfig,
+  deleteFileConfigList,
+  getFileConfigPage,
+  testFileConfig,
+  updateFileConfigMaster,
+} from '#/api/infra/file-config';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建文件配置 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑文件配置 */
+function handleEdit(row: InfraFileConfigApi.FileConfig) {
+  formModalApi.setData(row).open();
+}
+
+/** 设为主配置 */
+async function handleMaster(row: InfraFileConfigApi.FileConfig) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.updating', [row.name]),
+    duration: 0,
+  });
+  try {
+    await updateFileConfigMaster(row.id!);
+    message.success($t('ui.actionMessage.updateSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 测试文件配置 */
+async function handleTest(row: InfraFileConfigApi.FileConfig) {
+  const hideLoading = message.loading({
+    content: '测试上传中...',
+    duration: 0,
+  });
+  try {
+    const response = await testFileConfig(row.id!);
+    // 确认是否访问该文件
+    confirm({
+      title: '测试上传成功',
+      content: '是否要访问该文件？',
+      confirmText: '访问',
+      cancelText: '取消',
+    }).then(() => {
+      openWindow(response);
+    });
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 删除文件配置 */
+async function handleDelete(row: InfraFileConfigApi.FileConfig) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteFileConfig(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除文件配置 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteFileConfigList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: InfraFileConfigApi.FileConfig[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getFileConfigPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraFileConfigApi.FileConfig>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="文件配置列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['文件配置']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:file-config:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:file-config:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:file-config:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '测试',
+              variant: 'text',
+              icon: 'lucide:test-tube-diagonal',
+              auth: ['infra:file-config:update'],
+              onClick: handleTest.bind(null, row),
+            },
+            {
+              label: '主配置',
+              variant: 'text',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:file-config:update'],
+              disabled: row.master,
+              popConfirm: {
+                title: `是否要将${row.name}设为主配置？`,
+                confirm: handleMaster.bind(null, row),
+              },
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['infra:file-config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/fileConfig/modules/form.vue b/apps/web-tdesign/src/views/infra/fileConfig/modules/form.vue
new file mode 100644
index 000000000..19d8a5755
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/fileConfig/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { InfraFileConfigApi } from '#/api/infra/file-config';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createFileConfig,
+  getFileConfig,
+  updateFileConfig,
+} from '#/api/infra/file-config';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<InfraFileConfigApi.FileConfig>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['文件配置'])
+    : $t('ui.actionTitle.create', ['文件配置']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as InfraFileConfigApi.FileConfig;
+    try {
+      await (formData.value?.id
+        ? updateFileConfig(data)
+        : createFileConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraFileConfigApi.FileConfig>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getFileConfig(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/job/data.ts b/apps/web-tdesign/src/views/infra/job/data.ts
new file mode 100644
index 000000000..5e09bfb26
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/data.ts
@@ -0,0 +1,245 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { Timeline } from 'tdesign-vue-next';
+
+import { CronTab } from '#/components/cron-tab';
+import { DictTag } from '#/components/dict-tag';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入任务名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'handlerName',
+      label: '处理器的名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入处理器的名字',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => !!values.id,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'handlerParam',
+      label: '处理器的参数',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入处理器的参数',
+      },
+    },
+    {
+      fieldName: 'cronExpression',
+      label: 'CRON 表达式',
+      component: markRaw(CronTab),
+      componentProps: {
+        placeholder: '请输入 CRON 表达式',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'retryCount',
+      label: '重试次数',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入重试次数。设置为 0 时，不进行重试',
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'retryInterval',
+      label: '重试间隔',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入重试间隔，单位：毫秒。设置为 0 时，无需间隔',
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'monitorTimeout',
+      label: '监控超时时间',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入监控超时时间，单位：毫秒',
+        min: 0,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入任务名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '任务状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_JOB_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择任务状态',
+      },
+    },
+    {
+      fieldName: 'handlerName',
+      label: '处理器的名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入处理器的名字',
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '任务编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '任务名称',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '任务状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_JOB_STATUS },
+      },
+    },
+    {
+      field: 'handlerName',
+      title: '处理器的名字',
+      minWidth: 180,
+    },
+    {
+      field: 'handlerParam',
+      title: '处理器的参数',
+      minWidth: 140,
+    },
+    {
+      field: 'cronExpression',
+      title: 'CRON 表达式',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '任务编号',
+    },
+    {
+      field: 'name',
+      label: '任务名称',
+    },
+    {
+      field: 'status',
+      label: '任务状态',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.INFRA_JOB_STATUS,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'handlerName',
+      label: '处理器的名字',
+    },
+    {
+      field: 'handlerParam',
+      label: '处理器的参数',
+    },
+    {
+      field: 'cronExpression',
+      label: 'Cron 表达式',
+    },
+    {
+      field: 'retryCount',
+      label: '重试次数',
+    },
+    {
+      label: '重试间隔',
+      field: 'retryInterval',
+      render: (val) => {
+        return val ? `${val} 毫秒` : '无间隔';
+      },
+    },
+    {
+      label: '监控超时时间',
+      field: 'monitorTimeout',
+      render: (val) => {
+        return val && val > 0 ? `${val} 毫秒` : '未开启';
+      },
+    },
+    {
+      field: 'nextTimes',
+      label: '后续执行时间',
+      render: (val) => {
+        if (!val || val.length === 0) {
+          return '无后续执行时间';
+        }
+        return h(Timeline, {}, () =>
+          val?.map((time: Date) =>
+            h(Timeline.Item, {}, () => formatDateTime(time)),
+          ),
+        );
+      },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/job/index.vue b/apps/web-tdesign/src/views/infra/job/index.vue
new file mode 100644
index 000000000..561f69f3b
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/index.vue
@@ -0,0 +1,291 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraJobApi } from '#/api/infra/job';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { InfraJobStatusEnum } from '@vben/constants';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteJob,
+  deleteJobList,
+  exportJob,
+  getJobPage,
+  runJob,
+  updateJobStatus,
+} from '#/api/infra/job';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+import Form from './modules/form.vue';
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportJob(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '定时任务.xls', source: data });
+}
+
+/** 创建任务 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑任务 */
+function handleEdit(row: InfraJobApi.Job) {
+  formModalApi.setData(row).open();
+}
+
+/** 查看任务详情 */
+function handleDetail(row: InfraJobApi.Job) {
+  detailModalApi.setData({ id: row.id }).open();
+}
+
+/** 更新任务状态 */
+async function handleUpdateStatus(row: InfraJobApi.Job) {
+  const status =
+    row.status === InfraJobStatusEnum.STOP
+      ? InfraJobStatusEnum.NORMAL
+      : InfraJobStatusEnum.STOP;
+  const statusText = status === InfraJobStatusEnum.NORMAL ? '启用' : '停用';
+
+  await confirm(`确定${statusText} ${row.name} 吗？`);
+  const hideLoading = message.loading({
+    content: `正在${statusText}中...`,
+    duration: 0,
+  });
+  try {
+    await updateJobStatus(row.id!, status);
+    message.success($t('ui.actionMessage.operationSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 执行一次任务 */
+async function handleTrigger(row: InfraJobApi.Job) {
+  await confirm(`确定执行一次 ${row.name} 吗？`);
+  const hideLoading = message.loading({
+    content: '正在执行中...',
+    duration: 0,
+  });
+  try {
+    await runJob(row.id!);
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 跳转到任务日志 */
+function handleLog(row?: InfraJobApi.Job) {
+  push({
+    name: 'InfraJobLog',
+    query: row?.id ? { id: row.id } : {},
+  });
+}
+
+/** 删除任务 */
+async function handleDelete(row: InfraJobApi.Job) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteJob(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除任务 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteJobList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({ records }: { records: InfraJobApi.Job[] }) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getJobPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraJobApi.Job>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="定时任务" url="https://doc.iocoder.cn/job/" />
+      <DocAlert title="异步任务" url="https://doc.iocoder.cn/async-task/" />
+      <DocAlert title="消息队列" url="https://doc.iocoder.cn/message-queue/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <DetailModal />
+    <Grid table-title="定时任务列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['任务']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['infra:job:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:job:export'],
+              onClick: handleExport,
+            },
+            {
+              label: '执行日志',
+              type: 'primary',
+              icon: 'lucide:history',
+              auth: ['infra:job:query'],
+              onClick: () => handleLog(undefined),
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['infra:job:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['infra:job:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '开启',
+              variant: 'text',
+              icon: 'lucide:circle-play',
+              auth: ['infra:job:update'],
+              ifShow: () => row.status === InfraJobStatusEnum.STOP,
+              onClick: handleUpdateStatus.bind(null, row),
+            },
+            {
+              label: '暂停',
+              variant: 'text',
+              icon: 'lucide:circle-pause',
+              auth: ['infra:job:update'],
+              ifShow: () => row.status === InfraJobStatusEnum.NORMAL,
+              onClick: handleUpdateStatus.bind(null, row),
+            },
+            {
+              label: '执行',
+              variant: 'text',
+              icon: 'lucide:clock-plus',
+              auth: ['infra:job:trigger'],
+              onClick: handleTrigger.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: $t('common.detail'),
+              variant: 'text',
+              auth: ['infra:job:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: '日志',
+              variant: 'text',
+              auth: ['infra:job:query'],
+              onClick: handleLog.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              auth: ['infra:job:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/job/logger/data.ts b/apps/web-tdesign/src/views/infra/job/logger/data.ts
new file mode 100644
index 000000000..f17622cb9
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/logger/data.ts
@@ -0,0 +1,185 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import dayjs from 'dayjs';
+
+import { DictTag } from '#/components/dict-tag';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'handlerName',
+      label: '处理器的名字',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入处理器的名字',
+      },
+    },
+    {
+      fieldName: 'beginTime',
+      label: '开始执行时间',
+      component: 'DatePicker',
+      componentProps: {
+        allowClear: true,
+        placeholder: '选择开始执行时间',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        showTime: {
+          format: 'HH:mm:ss',
+          defaultValue: dayjs('00:00:00', 'HH:mm:ss'),
+        },
+      },
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束执行时间',
+      component: 'DatePicker',
+      componentProps: {
+        allowClear: true,
+        placeholder: '选择结束执行时间',
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        showTime: {
+          format: 'HH:mm:ss',
+          defaultValue: dayjs('23:59:59', 'HH:mm:ss'),
+        },
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '任务状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_JOB_LOG_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择任务状态',
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 80,
+    },
+    {
+      field: 'jobId',
+      title: '任务编号',
+      minWidth: 80,
+    },
+    {
+      field: 'handlerName',
+      title: '处理器的名字',
+      minWidth: 180,
+    },
+    {
+      field: 'handlerParam',
+      title: '处理器的参数',
+      minWidth: 140,
+    },
+    {
+      field: 'executeIndex',
+      title: '第几次执行',
+      minWidth: 100,
+    },
+    {
+      field: 'beginTime',
+      title: '执行时间',
+      minWidth: 280,
+      formatter: ({ row }) => {
+        return `${formatDateTime(row.beginTime)} ~ ${formatDateTime(row.endTime)}`;
+      },
+    },
+    {
+      field: 'duration',
+      title: '执行时长',
+      minWidth: 120,
+      formatter: ({ row }) => {
+        return `${row.duration} 毫秒`;
+      },
+    },
+    {
+      field: 'status',
+      title: '任务状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_JOB_LOG_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '日志编号',
+    },
+    {
+      field: 'jobId',
+      label: '任务编号',
+    },
+    {
+      field: 'handlerName',
+      label: '处理器的名字',
+    },
+    {
+      field: 'handlerParam',
+      label: '处理器的参数',
+    },
+    {
+      field: 'executeIndex',
+      label: '第几次执行',
+    },
+    {
+      field: 'beginTime',
+      label: '执行时间',
+      render: (val, data) => {
+        if (val && data?.endTime) {
+          return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
+        }
+        return '';
+      },
+    },
+    {
+      field: 'duration',
+      label: '执行时长',
+      render: (val) => {
+        return val ? `${val} 毫秒` : '';
+      },
+    },
+    {
+      field: 'status',
+      label: '任务状态',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.INFRA_JOB_LOG_STATUS,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'result',
+      label: '执行结果',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/infra/job/logger/index.vue b/apps/web-tdesign/src/views/infra/job/logger/index.vue
new file mode 100644
index 000000000..c0c4a7461
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/logger/index.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { InfraJobLogApi } from '#/api/infra/job-log';
+
+import { useRoute } from 'vue-router';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportJobLog, getJobLogPage } from '#/api/infra/job-log';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const { query } = useRoute();
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportJobLog(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '任务日志.xls', source: data });
+}
+
+/** 查看日志详情 */
+function handleDetail(row: InfraJobLogApi.JobLog) {
+  detailModalApi.setData({ id: row.id }).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getJobLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            jobId: query.id,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InfraJobLogApi.JobLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="定时任务" url="https://doc.iocoder.cn/job/" />
+      <DocAlert title="异步任务" url="https://doc.iocoder.cn/async-task/" />
+      <DocAlert title="消息队列" url="https://doc.iocoder.cn/message-queue/" />
+    </template>
+
+    <DetailModal />
+    <Grid table-title="任务日志列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['infra:job:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['infra:job:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/job/logger/modules/detail.vue b/apps/web-tdesign/src/views/infra/job/logger/modules/detail.vue
new file mode 100644
index 000000000..ceb1b5bf1
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/logger/modules/detail.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import type { InfraJobLogApi } from '#/api/infra/job-log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getJobLog } from '#/api/infra/job-log';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<InfraJobLogApi.JobLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getJobLog(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="日志详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/job/modules/detail.vue b/apps/web-tdesign/src/views/infra/job/modules/detail.vue
new file mode 100644
index 000000000..f23149e2d
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/modules/detail.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import type { InfraJobApi } from '#/api/infra/job';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getJob, getJobNextTimes } from '#/api/infra/job';
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<InfraJobApi.Job>(); // 任务详情
+const nextTimes = ref<Date[]>([]); // 下一次执行时间
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ id: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getJob(data.id);
+      // 获取下一次执行时间
+      nextTimes.value = await getJobNextTimes(data.id);
+      // 将 nextTimes 赋值给 formData，以便在 schema 中使用
+      formData.value.nextTimes = nextTimes.value;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="任务详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/job/modules/form.vue b/apps/web-tdesign/src/views/infra/job/modules/form.vue
new file mode 100644
index 000000000..71b145da5
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/job/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { InfraJobApi } from '#/api/infra/job';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createJob, getJob, updateJob } from '#/api/infra/job';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<InfraJobApi.Job>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['任务'])
+    : $t('ui.actionTitle.create', ['任务']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as InfraJobApi.Job;
+    try {
+      await (formData.value?.id ? updateJob(data) : createJob(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<InfraJobApi.Job>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getJob(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/redis/index.vue b/apps/web-tdesign/src/views/infra/redis/index.vue
new file mode 100644
index 000000000..0dfd62c1d
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/redis/index.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { Card } from 'tdesign-vue-next';
+
+import { getRedisMonitorInfo } from '#/api/infra/redis';
+
+import Commands from './modules/commands.vue';
+import Info from './modules/info.vue';
+import Memory from './modules/memory.vue';
+
+const redisData = ref<InfraRedisApi.RedisMonitorInfo>();
+
+/** 统一加载 Redis 数据 */
+async function loadRedisData() {
+  try {
+    redisData.value = await getRedisMonitorInfo();
+  } catch (error) {
+    console.error('加载 Redis 数据失败', error);
+  }
+}
+
+onMounted(() => {
+  loadRedisData();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="Redis 缓存" url="https://doc.iocoder.cn/redis-cache/" />
+      <DocAlert title="本地缓存" url="https://doc.iocoder.cn/local-cache/" />
+    </template>
+
+    <Card title="Redis 概览">
+      <Info :redis-data="redisData" />
+    </Card>
+
+    <div class="mt-5 grid grid-cols-1 gap-4 md:grid-cols-2">
+      <Card title="内存使用">
+        <Memory :redis-data="redisData" />
+      </Card>
+
+      <Card title="命令统计">
+        <Commands :redis-data="redisData" />
+      </Card>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/redis/modules/commands.vue b/apps/web-tdesign/src/views/infra/redis/modules/commands.vue
new file mode 100644
index 000000000..25c263e68
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/redis/modules/commands.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const props = defineProps<{
+  redisData?: InfraRedisApi.RedisMonitorInfo;
+}>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 渲染命令统计图表 */
+function renderCommandStats() {
+  if (!props.redisData?.commandStats) {
+    return;
+  }
+
+  // 处理数据
+  const commandStats = [] as any[];
+  const nameList = [] as string[];
+  props.redisData.commandStats.forEach((row) => {
+    commandStats.push({
+      name: row.command,
+      value: row.calls,
+    });
+    nameList.push(row.command);
+  });
+
+  // 渲染图表
+  renderEcharts({
+    title: {
+      text: '命令统计',
+      left: 'center',
+    },
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
+    },
+    legend: {
+      type: 'scroll',
+      orient: 'vertical',
+      right: 30,
+      top: 10,
+      bottom: 20,
+      data: nameList,
+      textStyle: {
+        color: '#a1a1a1',
+      },
+    },
+    series: [
+      {
+        name: '命令',
+        type: 'pie',
+        radius: [20, 120],
+        center: ['40%', '60%'],
+        data: commandStats,
+        roseType: 'radius',
+        label: {
+          show: true,
+        },
+        emphasis: {
+          label: {
+            show: true,
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+      },
+    ],
+  });
+}
+
+/** 监听数据变化，重新渲染图表 */
+watch(
+  () => props.redisData,
+  (newVal) => {
+    if (newVal) {
+      renderCommandStats();
+    }
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  if (props.redisData) {
+    renderCommandStats();
+  }
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" height="420px" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/redis/modules/info.vue b/apps/web-tdesign/src/views/infra/redis/modules/info.vue
new file mode 100644
index 000000000..bee9922bb
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/redis/modules/info.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { useDescription } from '#/components/description';
+
+defineProps<{
+  redisData?: InfraRedisApi.RedisMonitorInfo;
+}>();
+
+const [Descriptions] = useDescription({
+  bordered: false,
+  column: 6,
+  schema: [
+    {
+      field: 'info.redis_version',
+      label: 'Redis 版本',
+    },
+    {
+      field: 'info.redis_mode',
+      label: '运行模式',
+      render: (val) => (val === 'standalone' ? '单机' : '集群'),
+    },
+    {
+      field: 'info.tcp_port',
+      label: '端口',
+    },
+    {
+      field: 'info.connected_clients',
+      label: '客户端数',
+    },
+    {
+      field: 'info.uptime_in_days',
+      label: '运行时间(天)',
+    },
+    {
+      field: 'info.used_memory_human',
+      label: '使用内存',
+    },
+    {
+      field: 'info.used_cpu_user_children',
+      label: '使用 CPU',
+      render: (val) => Number.parseFloat(val).toFixed(2),
+    },
+    {
+      field: 'info.maxmemory_human',
+      label: '内存配置',
+    },
+    {
+      field: 'info.aof_enabled',
+      label: 'AOF 是否开启',
+      render: (val) => (val === '0' ? '否' : '是'),
+    },
+    {
+      field: 'info.rdb_last_bgsave_status',
+      label: 'RDB 是否成功',
+    },
+    {
+      field: 'dbSize',
+      label: 'Key 数量',
+    },
+    {
+      field: 'info.instantaneous_input_kbps',
+      label: '网络入口/出口',
+      render: (val, data) =>
+        `${val}kps / ${data?.info?.instantaneous_output_kbps}kps`,
+    },
+  ],
+});
+</script>
+
+<template>
+  <Descriptions :data="redisData" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/redis/modules/memory.vue b/apps/web-tdesign/src/views/infra/redis/modules/memory.vue
new file mode 100644
index 000000000..5220c4631
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/redis/modules/memory.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { InfraRedisApi } from '#/api/infra/redis';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const props = defineProps<{
+  redisData?: InfraRedisApi.RedisMonitorInfo;
+}>();
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 解析内存值，移除单位，转为数字 */
+function parseMemoryValue(memStr: string | undefined): number {
+  if (!memStr) {
+    return 0;
+  }
+  try {
+    // 从字符串中提取数字部分，例如 "1.2M" 中的 1.2
+    const str = String(memStr); // 显式转换为字符串类型
+    const match = str.match(/^([\d.]+)/);
+    return match ? Number.parseFloat(match[1] as string) : 0;
+  } catch {
+    return 0;
+  }
+}
+
+/** 渲染内存使用图表 */
+function renderMemoryChart() {
+  if (!props.redisData?.info) {
+    return;
+  }
+
+  // 处理数据
+  const usedMemory = props.redisData.info.used_memory_human || '0';
+  const memoryValue = parseMemoryValue(usedMemory);
+
+  // 渲染图表
+  renderEcharts({
+    title: {
+      text: '内存使用情况',
+      left: 'center',
+    },
+    tooltip: {
+      formatter: `{b} <br/>{a} : ${usedMemory}`,
+    },
+    series: [
+      {
+        name: '峰值',
+        type: 'gauge',
+        min: 0,
+        max: 100,
+        splitNumber: 10,
+        color: '#F5C74E',
+        radius: '85%',
+        center: ['50%', '50%'],
+        startAngle: 225,
+        endAngle: -45,
+        axisLine: {
+          lineStyle: {
+            color: [
+              [0.2, '#7FFF00'],
+              [0.8, '#00FFFF'],
+              [1, '#FF0000'],
+            ],
+            width: 10,
+          },
+        },
+        axisTick: {
+          length: 5,
+          lineStyle: {
+            color: '#76D9D7',
+          },
+        },
+        splitLine: {
+          length: 20,
+          lineStyle: {
+            color: '#76D9D7',
+          },
+        },
+        axisLabel: {
+          color: '#76D9D7',
+          distance: 15,
+          fontSize: 15,
+        },
+        pointer: {
+          width: 7,
+          show: true,
+        },
+        detail: {
+          show: true,
+          offsetCenter: [0, '50%'],
+          color: 'inherit',
+          fontSize: 30,
+          formatter: usedMemory,
+        },
+        progress: {
+          show: true,
+        },
+        data: [
+          {
+            value: memoryValue,
+            name: '内存消耗',
+          },
+        ],
+      },
+    ],
+  });
+}
+
+/** 监听数据变化，重新渲染图表 */
+watch(
+  () => props.redisData,
+  (newVal) => {
+    if (newVal) {
+      renderMemoryChart();
+    }
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  if (props.redisData) {
+    renderMemoryChart();
+  }
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" height="420px" />
+</template>
diff --git a/apps/web-tdesign/src/views/infra/server/index.vue b/apps/web-tdesign/src/views/infra/server/index.vue
new file mode 100644
index 000000000..d8893bdbd
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/server/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
+
+import { getConfigKey } from '#/api/infra/config';
+
+const loading = ref(true); // 是否加载中
+const src = ref(`${import.meta.env.VITE_BASE_URL}/admin/applications`);
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    // 友情提示：如果访问出现 404 问题：
+    // 1）boot 参考 https://doc.iocoder.cn/server-monitor/ 解决；
+    // 2）cloud 参考 https://cloud.iocoder.cn/server-monitor/ 解决
+    const data = await getConfigKey('url.spring-boot-admin');
+    if (data && data.length > 0) {
+      src.value = data;
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
+    </template>
+
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/skywalking/index.vue b/apps/web-tdesign/src/views/infra/skywalking/index.vue
new file mode 100644
index 000000000..2ff01c3bf
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/skywalking/index.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
+
+import { getConfigKey } from '#/api/infra/config';
+
+const loading = ref(true); // 是否加载中
+const src = ref('http://skywalking.shop.iocoder.cn');
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await getConfigKey('url.skywalking');
+    if (data && data.length > 0) {
+      src.value = data;
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="服务监控" url="https://doc.iocoder.cn/server-monitor/" />
+    </template>
+
+    <IFrame v-if="!loading" v-loading="loading" :src="src" />
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/swagger/index.vue b/apps/web-tdesign/src/views/infra/swagger/index.vue
new file mode 100644
index 000000000..c04365cdf
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/swagger/index.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, IFrame, Page } from '@vben/common-ui';
+
+import { getConfigKey } from '#/api/infra/config';
+
+const loading = ref(true); // 是否加载中
+const src = ref(`${import.meta.env.VITE_BASE_URL}/doc.html`); // Knife4j UI
+// const src = ref(import.meta.env.VITE_BASE_URL + '/swagger-ui') // Swagger UI
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    const data = await getConfigKey('url.swagger');
+    if (data && data.length > 0) {
+      src.value = data;
+    }
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="接口文档" url="https://doc.iocoder.cn/api-doc/" />
+    </template>
+
+    <IFrame v-if="!loading" :src="src" />
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/infra/webSocket/index.vue b/apps/web-tdesign/src/views/infra/webSocket/index.vue
new file mode 100644
index 000000000..c4fd5fa54
--- /dev/null
+++ b/apps/web-tdesign/src/views/infra/webSocket/index.vue
@@ -0,0 +1,316 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { computed, onMounted, ref, watchEffect } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+import { formatDate } from '@vben/utils';
+
+import { useWebSocket } from '@vueuse/core';
+import {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Divider,
+  Empty,
+  Input,
+  Select,
+  Tag,
+} from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { getSimpleUserList } from '#/api/system/user';
+
+const accessStore = useAccessStore();
+const refreshToken = accessStore.refreshToken as string;
+
+const server = ref(
+  `${`${import.meta.env.VITE_BASE_URL}/infra/ws`.replace(
+    'http',
+    'ws',
+  )}?token=${refreshToken}`, // 使用 refreshToken，而不使用 accessToken 方法的原因：WebSocket 无法方便的刷新访问令牌
+); // WebSocket 服务地址
+const getIsOpen = computed(() => status.value === 'OPEN'); // WebSocket 连接是否打开
+const getTagColor = computed(() => (getIsOpen.value ? 'success' : 'red')); // WebSocket 连接的展示颜色
+const getStatusText = computed(() => (getIsOpen.value ? '已连接' : '未连接')); // 连接状态文本
+
+/** 发起 WebSocket 连接 */
+const { status, data, send, close, open } = useWebSocket(server.value, {
+  autoReconnect: true,
+  heartbeat: true,
+});
+
+/** 监听接收到的数据 */
+const messageList = ref(
+  [] as { text: string; time: number; type?: string; userId?: string }[],
+); // 消息列表
+const messageReverseList = computed(() => [...messageList.value].reverse());
+watchEffect(() => {
+  if (!data.value) {
+    return;
+  }
+  try {
+    // 1. 收到心跳
+    if (data.value === 'pong') {
+      // state.recordList.push({
+      //   text: '【心跳】',
+      //   time: new Date().getTime()
+      // })
+      return;
+    }
+
+    // 2.1 解析 type 消息类型
+    const jsonMessage = JSON.parse(data.value);
+    const type = jsonMessage.type;
+    const content = JSON.parse(jsonMessage.content);
+    if (!type) {
+      message.error(`未知的消息类型：${data.value}`);
+      return;
+    }
+    // 2.2 消息类型：demo-message-receive
+    if (type === 'demo-message-receive') {
+      const single = content.single;
+      messageList.value.push({
+        text: content.text,
+        time: Date.now(),
+        type: single ? 'single' : 'group',
+        userId: content.fromUserId,
+      });
+      return;
+    }
+    // 2.3 消息类型：notice-push
+    if (type === 'notice-push') {
+      messageList.value.push({
+        text: content.title,
+        time: Date.now(),
+        type: 'system',
+      });
+      return;
+    }
+    message.error(`未处理消息：${data.value}`);
+  } catch (error) {
+    message.error(`处理消息发生异常：${data.value}`);
+    console.error(error);
+  }
+});
+
+/** 发送消息 */
+const sendText = ref(''); // 发送内容
+const sendUserId = ref('all'); // 发送人
+function handlerSend() {
+  if (!sendText.value.trim()) {
+    message.warning('消息内容不能为空');
+    return;
+  }
+
+  // 1.1 先 JSON 化 message 消息内容
+  const messageContent = JSON.stringify({
+    text: sendText.value,
+    toUserId: sendUserId.value === 'all' ? undefined : sendUserId.value,
+  });
+  // 1.2 再 JSON 化整个消息
+  const jsonMessage = JSON.stringify({
+    type: 'demo-message-send',
+    content: messageContent,
+  });
+  // 2. 最后发送消息
+  send(jsonMessage);
+  sendText.value = '';
+}
+
+/** 切换 websocket 连接状态 */
+function toggleConnectStatus() {
+  if (getIsOpen.value) {
+    close();
+  } else {
+    open();
+  }
+}
+
+/** 获取消息类型的徽标颜色 */
+function getMessageBadgeColor(type?: string) {
+  switch (type) {
+    case 'group': {
+      return 'green';
+    }
+    case 'single': {
+      return 'blue';
+    }
+    case 'system': {
+      return 'red';
+    }
+    default: {
+      return 'default';
+    }
+  }
+}
+
+/** 获取消息类型的文本 */
+function getMessageTypeText(type?: string) {
+  switch (type) {
+    case 'group': {
+      return '群发';
+    }
+    case 'single': {
+      return '单发';
+    }
+    case 'system': {
+      return '系统';
+    }
+    default: {
+      return '未知';
+    }
+  }
+}
+
+/** 初始化 */
+const userList = ref<SystemUserApi.User[]>([]); // 用户列表
+onMounted(async () => {
+  userList.value = await getSimpleUserList();
+});
+</script>
+
+<template>
+  <Page>
+    <template #doc>
+      <DocAlert
+        title="WebSocket 实时通信"
+        url="https://doc.iocoder.cn/websocket/"
+      />
+    </template>
+
+    <div class="mt-4 flex flex-col gap-4 md:flex-row">
+      <!-- 左侧：建立连接、发送消息 -->
+      <Card :bordered="false" class="w-full md:w-1/2">
+        <template #title>
+          <div class="flex items-center">
+            <Badge :status="getIsOpen ? 'success' : 'error'" />
+            <span class="ml-2 text-lg font-medium">连接管理</span>
+          </div>
+        </template>
+        <div class="mb-4 flex items-center rounded-lg p-3">
+          <span class="mr-4 font-medium">连接状态:</span>
+          <Tag :color="getTagColor" class="px-3 py-1">{{ getStatusText }}</Tag>
+        </div>
+        <div class="mb-6 flex space-x-2">
+          <Input v-model="server" disabled class="rounded-md" size="large">
+            <template #addonBefore>
+              <span class="text-gray-600">服务地址</span>
+            </template>
+          </Input>
+          <Button
+            :theme="getIsOpen ? 'default' : 'primary'"
+            :danger="getIsOpen"
+            size="large"
+            class="flex-shrink-0"
+            @click="toggleConnectStatus"
+          >
+            {{ getIsOpen ? '关闭连接' : '开启连接' }}
+          </Button>
+        </div>
+
+        <Divider>
+          <span class="text-gray-500">消息发送</span>
+        </Divider>
+
+        <Select
+          v-model="sendUserId"
+          class="mb-3 w-full"
+          size="large"
+          placeholder="请选择接收人"
+          :disabled="!getIsOpen"
+        >
+          <Select.Option key="" value="" label="所有人">
+            <div class="flex items-center">
+              <Avatar size="small" class="mr-2">全</Avatar>
+              <span>所有人</span>
+            </div>
+          </Select.Option>
+          <Select.Option
+            v-for="user in userList"
+            :key="user.id"
+            :value="user.id"
+            :label="user.nickname"
+          >
+            <div class="flex items-center">
+              <Avatar size="small" class="mr-2">
+                {{ user.nickname.slice(0, 1) }}
+              </Avatar>
+              <span>{{ user.nickname }}</span>
+            </div>
+          </Select.Option>
+        </Select>
+
+        <Input.TextArea
+          v-model="sendText"
+          :auto-size="{ minRows: 3, maxRows: 6 }"
+          :disabled="!getIsOpen"
+          class="border-1 rounded-lg"
+          allow-clear
+          placeholder="请输入你要发送的消息..."
+        />
+
+        <Button
+          :disabled="!getIsOpen"
+          block
+          class="mt-4"
+          theme="primary"
+          size="large"
+          @click="handlerSend"
+        >
+          <template #icon>
+            <IconifyIcon icon="lucide:send-horizontal" />
+          </template>
+          发送消息
+        </Button>
+      </Card>
+
+      <!-- 右侧：消息记录 -->
+      <Card :bordered="false" class="w-full md:w-1/2">
+        <template #title>
+          <div class="flex items-center">
+            <IconifyIcon
+              icon="lucide:message-circle-more"
+              class="mr-2 text-lg"
+            />
+            <span class="text-lg font-medium">消息记录</span>
+            <Tag v-if="messageList.length > 0" class="ml-2">
+              {{ messageList.length }} 条
+            </Tag>
+          </div>
+        </template>
+        <div class="h-96 overflow-auto rounded-lg p-2">
+          <Empty v-if="messageList.length === 0" description="暂无消息记录" />
+          <div v-else class="space-y-3">
+            <div
+              v-for="msg in messageReverseList"
+              :key="msg.time"
+              class="rounded-lg p-3 shadow-sm"
+            >
+              <div class="mb-1 flex items-center justify-between">
+                <div class="flex items-center">
+                  <Badge :color="getMessageBadgeColor(msg.type)" />
+                  <span class="ml-1 font-medium text-gray-600">
+                    {{ getMessageTypeText(msg.type) }}
+                  </span>
+                  <span v-if="msg.userId" class="ml-2 text-gray-500">
+                    用户 ID: {{ msg.userId }}
+                  </span>
+                </div>
+                <span class="text-xs text-gray-400">
+                  {{ formatDate(msg.time) }}
+                </span>
+              </div>
+              <div class="mt-2 break-words text-gray-800">
+                {{ msg.text }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </Card>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/area/data.ts b/apps/web-tdesign/src/views/system/area/data.ts
new file mode 100644
index 000000000..e6cc06c99
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/area/data.ts
@@ -0,0 +1,48 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemAreaApi } from '#/api/system/area';
+
+import { z } from '#/adapter/form';
+
+/** 查询 IP 的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'ip',
+      label: 'IP 地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 IP 地址',
+      },
+      rules: z.string().ip({ message: '请输入正确的 IP 地址' }),
+    },
+    {
+      fieldName: 'result',
+      label: '地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '展示查询 IP 结果',
+        readonly: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<SystemAreaApi.Area>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '地区编码',
+      minWidth: 120,
+      align: 'left',
+      fixed: 'left',
+      treeNode: true,
+    },
+    {
+      field: 'name',
+      title: '地区名称',
+      minWidth: 200,
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/area/index.vue b/apps/web-tdesign/src/views/system/area/index.vue
new file mode 100644
index 000000000..a07141905
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/area/index.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAreaTree } from '#/api/system/area';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查询 IP */
+function handleQueryIp() {
+  formModalApi.setData(null).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getAreaTree();
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+    treeConfig: {
+      rowField: 'id',
+      reserve: true,
+    },
+  } as VxeTableGridOptions,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="地区 & IP" url="https://doc.iocoder.cn/area-and-ip/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="地区列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: 'IP 查询',
+              type: 'primary',
+              icon: ACTION_ICON.SEARCH,
+              onClick: handleQueryIp,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/area/modules/form.vue b/apps/web-tdesign/src/views/system/area/modules/form.vue
new file mode 100644
index 000000000..67e1db080
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/area/modules/form.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { getAreaByIp } from '#/api/system/area';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const [Form, { setFieldValue, validate, getValues }] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await getValues();
+    try {
+      const result = await getAreaByIp(data.ip);
+      // 设置结果
+      await setFieldValue('result', result);
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="IP 查询">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dept/data.ts b/apps/web-tdesign/src/views/system/dept/data.ts
new file mode 100644
index 000000000..f5421c429
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dept/data.ts
@@ -0,0 +1,162 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { handleTree } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getDeptList } from '#/api/system/dept';
+import { getSimpleUserList } from '#/api/system/user';
+
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级部门',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getDeptList();
+          data.unshift({
+            id: 0,
+            name: '顶级部门',
+          });
+          return handleTree(data);
+        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择上级部门',
+        treeDefaultExpandAll: true,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'name',
+      label: '部门名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入部门名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入显示顺序',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'leaderUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择负责人',
+        allowClear: true,
+      },
+      rules: z.number().optional(),
+    },
+    {
+      fieldName: 'phone',
+      label: '联系电话',
+      component: 'Input',
+      componentProps: {
+        maxLength: 11,
+        placeholder: '请输入联系电话',
+      },
+      rules: 'mobileRequired',
+    },
+    {
+      fieldName: 'email',
+      label: '邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<SystemDeptApi.Dept>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'name',
+      title: '部门名称',
+      minWidth: 150,
+      align: 'left',
+      fixed: 'left',
+      treeNode: true,
+    },
+    {
+      field: 'leaderUserId',
+      title: '负责人',
+      minWidth: 150,
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
+    },
+    {
+      field: 'sort',
+      title: '显示顺序',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '部门状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/dept/index.vue b/apps/web-tdesign/src/views/system/dept/index.vue
new file mode 100644
index 000000000..1fd74db74
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dept/index.vue
@@ -0,0 +1,194 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteDept, deleteDeptList, getDeptList } from '#/api/system/dept';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(true);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建部门 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 添加下级部门 */
+function handleAppend(row: SystemDeptApi.Dept) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑部门 */
+function handleEdit(row: SystemDeptApi.Dept) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除部门 */
+async function handleDelete(row: SystemDeptApi.Dept) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDept(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除部门 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDeptList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemDeptApi.Dept[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getDeptList();
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<SystemDeptApi.Dept>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="部门列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['部门']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:dept:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:dept:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增下级',
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:dept:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:dept:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:dept:delete'],
+              disabled: row.children && row.children.length > 0,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dept/modules/form.vue b/apps/web-tdesign/src/views/system/dept/modules/form.vue
new file mode 100644
index 000000000..7539f49b4
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dept/modules/form.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createDept, getDept, updateDept } from '#/api/system/dept';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemDeptApi.Dept>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['部门'])
+    : $t('ui.actionTitle.create', ['部门']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemDeptApi.Dept;
+    try {
+      await (formData.value?.id ? updateDept(data) : createDept(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemDeptApi.Dept>();
+    if (!data || !data.id) {
+      // 设置上级
+      await formApi.setValues(data);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDept(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dict/data.ts b/apps/web-tdesign/src/views/system/dict/data.ts
new file mode 100644
index 000000000..a2c6ede66
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dict/data.ts
@@ -0,0 +1,353 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getSimpleDictTypeList } from '#/api/system/dict/type';
+
+// ============================== 字典类型 ==============================
+
+/** 类型新增/修改的表单 */
+export function useTypeFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '字典名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入字典名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '字典类型',
+      component: 'Input',
+      componentProps: (values) => {
+        return {
+          placeholder: '请输入字典类型',
+          disabled: !!values.id,
+        };
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: [''],
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 类型列表的搜索表单 */
+export function useTypeGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '字典名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入字典名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '字典类型',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入字典类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 类型列表的字段 */
+export function useTypeGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '字典编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '字典名称',
+      minWidth: 200,
+    },
+    {
+      field: 'type',
+      title: '字典类型',
+      minWidth: 220,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+// ============================== 字典数据 ==============================
+
+// TODO @芋艿：后续针对 antd，增加
+/**
+ * 颜色选项
+ */
+const colorOptions = [
+  { value: '', label: '无' },
+  { value: 'processing', label: '主要' },
+  { value: 'success', label: '成功' },
+  { value: 'default', label: '默认' },
+  { value: 'warning', label: '警告' },
+  { value: 'error', label: '危险' },
+  { value: 'pink', label: 'pink' },
+  { value: 'red', label: 'red' },
+  { value: 'orange', label: 'orange' },
+  { value: 'green', label: 'green' },
+  { value: 'cyan', label: 'cyan' },
+  { value: 'blue', label: 'blue' },
+  { value: 'purple', label: 'purple' },
+];
+
+/** 数据新增/修改的表单 */
+export function useDataFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'dictType',
+      label: '字典类型',
+      component: 'ApiSelect',
+      componentProps: (values) => {
+        return {
+          api: getSimpleDictTypeList,
+          placeholder: '请输入字典类型',
+          labelField: 'name',
+          valueField: 'type',
+          disabled: !!values.id,
+        };
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: [''],
+      },
+    },
+    {
+      fieldName: 'label',
+      label: '数据标签',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入数据标签',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'value',
+      label: '数据键值',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入数据键值',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入显示排序',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'colorType',
+      label: '颜色类型',
+      component: 'Select',
+      componentProps: {
+        options: colorOptions,
+        placeholder: '请选择颜色类型',
+      },
+    },
+    {
+      fieldName: 'cssClass',
+      label: 'CSS Class',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 CSS Class',
+      },
+      help: '输入 hex 模式的颜色, 例如 #108ee9',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 字典数据列表搜索表单 */
+export function useDataGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'label',
+      label: '字典标签',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入字典标签',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 字典数据表格列 */
+export function useDataGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '字典编码',
+      minWidth: 100,
+    },
+    {
+      field: 'label',
+      title: '字典标签',
+      minWidth: 180,
+    },
+    {
+      field: 'value',
+      title: '字典键值',
+      minWidth: 100,
+    },
+    {
+      field: 'sort',
+      title: '字典排序',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'colorType',
+      title: '颜色类型',
+      minWidth: 120,
+      slots: { default: 'colorType' },
+    },
+    {
+      field: 'cssClass',
+      title: 'CSS Class',
+      minWidth: 120,
+      slots: { default: 'cssClass' },
+    },
+    {
+      title: '创建时间',
+      field: 'createTime',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      minWidth: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/dict/index.vue b/apps/web-tdesign/src/views/system/dict/index.vue
new file mode 100644
index 000000000..8d824256d
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dict/index.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import DataGrid from './modules/data-grid.vue';
+import TypeGrid from './modules/type-grid.vue';
+
+const searchDictType = ref<string>(); // 搜索的字典类型
+
+function handleDictTypeSelect(dictType: string) {
+  searchDictType.value = dictType;
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="字典管理" url="https://doc.iocoder.cn/system-dict/" />
+    </template>
+
+    <div class="flex h-full">
+      <!-- 左侧字典类型列表 -->
+      <div class="w-1/2 pr-3">
+        <TypeGrid @select="handleDictTypeSelect" />
+      </div>
+      <!-- 右侧字典数据列表 -->
+      <div class="w-1/2">
+        <DataGrid :dict-type="searchDictType" />
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dict/modules/data-form.vue b/apps/web-tdesign/src/views/system/dict/modules/data-form.vue
new file mode 100644
index 000000000..b1e65a3b7
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dict/modules/data-form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { SystemDictDataApi } from '#/api/system/dict/data';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDictData,
+  getDictData,
+  updateDictData,
+} from '#/api/system/dict/data';
+import { $t } from '#/locales';
+
+import { useDataFormSchema } from '../data';
+
+defineOptions({ name: 'SystemDictDataForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemDictDataApi.DictData>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['字典数据'])
+    : $t('ui.actionTitle.create', ['字典数据']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: useDataFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemDictDataApi.DictData;
+    try {
+      await (formData.value?.id ? updateDictData(data) : createDictData(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemDictDataApi.DictData>();
+    if (!data || !data.id) {
+      // 设置 dictType
+      await formApi.setValues(data);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDictData(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dict/modules/data-grid.vue b/apps/web-tdesign/src/views/system/dict/modules/data-grid.vue
new file mode 100644
index 000000000..7e2d620fc
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dict/modules/data-grid.vue
@@ -0,0 +1,211 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemDictDataApi } from '#/api/system/dict/data';
+
+import { ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { Tag } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDictData,
+  deleteDictDataList,
+  exportDictData,
+  getDictDataPage,
+} from '#/api/system/dict/data';
+import { $t } from '#/locales';
+
+import { useDataGridColumns, useDataGridFormSchema } from '../data';
+import DataForm from './data-form.vue';
+
+const props = defineProps({
+  dictType: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const [DataFormModal, dataFormModalApi] = useVbenModal({
+  connectedComponent: DataForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDictData(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '字典数据.xls', source: data });
+}
+
+/** 创建字典数据 */
+function handleCreate() {
+  dataFormModalApi.setData({ dictType: props.dictType }).open();
+}
+
+/** 编辑字典数据 */
+function handleEdit(row: SystemDictDataApi.DictData) {
+  dataFormModalApi.setData(row).open();
+}
+
+/** 删除字典数据 */
+async function handleDelete(row: SystemDictDataApi.DictData) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.label]),
+    duration: 0,
+  });
+  try {
+    await deleteDictData(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.label]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除字典数据 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting'),
+    duration: 0,
+  });
+  try {
+    await deleteDictDataList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemDictDataApi.DictData[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useDataGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useDataGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDictDataPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            dictType: props.dictType,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemDictDataApi.DictData>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 监听 dictType 变化，重新查询 */
+watch(
+  () => props.dictType,
+  () => {
+    if (props.dictType) {
+      handleRefresh();
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <DataFormModal @success="handleRefresh" />
+
+    <Grid table-title="字典数据列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['字典数据']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:dict:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:dict:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:dict:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #colorType="{ row }">
+        <Tag :color="row.colorType">{{ row.colorType }}</Tag>
+      </template>
+      <template #cssClass="{ row }">
+        <Tag :color="row.cssClass">{{ row.cssClass }}</Tag>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:dict:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:dict:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.label]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dict/modules/type-form.vue b/apps/web-tdesign/src/views/system/dict/modules/type-form.vue
new file mode 100644
index 000000000..670096030
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dict/modules/type-form.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { SystemDictTypeApi } from '#/api/system/dict/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createDictType,
+  getDictType,
+  updateDictType,
+} from '#/api/system/dict/type';
+import { $t } from '#/locales';
+
+import { useTypeFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemDictTypeApi.DictType>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['字典类型'])
+    : $t('ui.actionTitle.create', ['字典类型']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useTypeFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemDictTypeApi.DictType;
+    try {
+      await (formData.value?.id ? updateDictType(data) : createDictType(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemDictTypeApi.DictType>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDictType(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/dict/modules/type-grid.vue b/apps/web-tdesign/src/views/system/dict/modules/type-grid.vue
new file mode 100644
index 000000000..691f57c27
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/dict/modules/type-grid.vue
@@ -0,0 +1,190 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemDictTypeApi } from '#/api/system/dict/type';
+
+import { ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDictType,
+  deleteDictTypeList,
+  exportDictType,
+  getDictTypePage,
+} from '#/api/system/dict/type';
+import { $t } from '#/locales';
+
+import { useTypeGridColumns, useTypeGridFormSchema } from '../data';
+import TypeForm from './type-form.vue';
+
+const emit = defineEmits(['select']);
+
+const [TypeFormModal, typeFormModalApi] = useVbenModal({
+  connectedComponent: TypeForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDictType(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '字典类型.xls', source: data });
+}
+
+/** 创建字典类型 */
+function handleCreate() {
+  typeFormModalApi.setData(null).open();
+}
+
+/** 编辑字典类型 */
+function handleEdit(row: SystemDictTypeApi.DictType) {
+  typeFormModalApi.setData(row).open();
+}
+
+/** 删除字典类型 */
+async function handleDelete(row: SystemDictTypeApi.DictType) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDictType(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除字典类型 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteDictTypeList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemDictTypeApi.DictType[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useTypeGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useTypeGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDictTypePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isCurrent: true,
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemDictTypeApi.DictType>,
+  gridEvents: {
+    cellClick: ({ row }: { row: SystemDictTypeApi.DictType }) => {
+      emit('select', row.type);
+    },
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <TypeFormModal @success="handleRefresh" />
+    <Grid table-title="字典类型列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['字典类型']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:dict:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:dict:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:dict:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:dict:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:dict:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/system/loginlog/data.ts b/apps/web-tdesign/src/views/system/loginlog/data.ts
new file mode 100644
index 000000000..24433e9ac
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/loginlog/data.ts
@@ -0,0 +1,147 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入用户名称',
+      },
+    },
+    {
+      fieldName: 'userIp',
+      label: '登录地址',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入登录地址',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '登录时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 100,
+    },
+    {
+      field: 'logType',
+      title: '操作类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_LOGIN_TYPE },
+      },
+    },
+    {
+      field: 'username',
+      title: '用户名称',
+      minWidth: 180,
+    },
+    {
+      field: 'userIp',
+      title: '登录地址',
+      minWidth: 180,
+    },
+    {
+      field: 'userAgent',
+      title: '浏览器',
+      minWidth: 200,
+    },
+    {
+      field: 'result',
+      title: '登录结果',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_LOGIN_RESULT },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '登录日期',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '日志编号',
+    },
+    {
+      field: 'logType',
+      label: '操作类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_LOGIN_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'username',
+      label: '用户名称',
+    },
+    {
+      field: 'userIp',
+      label: '登录地址',
+    },
+    {
+      field: 'userAgent',
+      label: '浏览器',
+    },
+    {
+      field: 'result',
+      label: '登录结果',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_LOGIN_RESULT,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'createTime',
+      label: '登录日期',
+      render: (val) => formatDateTime(val) as string,
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/loginlog/index.vue b/apps/web-tdesign/src/views/system/loginlog/index.vue
new file mode 100644
index 000000000..9c9de61bc
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/loginlog/index.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemLoginLogApi } from '#/api/system/login-log';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportLoginLog, getLoginLogPage } from '#/api/system/login-log';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportLoginLog(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '登录日志.xls', source: data });
+}
+
+/** 查看登录日志详情 */
+function handleDetail(row: SystemLoginLogApi.LoginLog) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getLoginLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemLoginLogApi.LoginLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="登录日志列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:login-log:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:login-log:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/loginlog/modules/detail.vue b/apps/web-tdesign/src/views/system/loginlog/modules/detail.vue
new file mode 100644
index 000000000..4982a32b3
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/loginlog/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { SystemLoginLogApi } from '#/api/system/login-log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemLoginLogApi.LoginLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemLoginLogApi.LoginLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="登录日志详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/account/data.ts b/apps/web-tdesign/src/views/system/mail/account/data.ts
new file mode 100644
index 000000000..2a00f39e4
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/account/data.ts
@@ -0,0 +1,184 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'mail',
+      label: '邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'username',
+      label: '用户名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'password',
+      label: '密码',
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入密码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'host',
+      label: 'SMTP 服务器域名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 SMTP 服务器域名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'port',
+      label: 'SMTP 服务器端口',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入 SMTP 服务器端口',
+        min: 0,
+        max: 65_535,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sslEnable',
+      label: '是否开启 SSL',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.boolean().default(true),
+    },
+    {
+      fieldName: 'starttlsEnable',
+      label: '是否开启 STARTTLS',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.boolean().default(false),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'mail',
+      label: '邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'username',
+      label: '用户名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'mail',
+      title: '邮箱',
+      minWidth: 160,
+    },
+    {
+      field: 'username',
+      title: '用户名',
+      minWidth: 160,
+    },
+    {
+      field: 'host',
+      title: 'SMTP 服务器域名',
+      minWidth: 150,
+    },
+    {
+      field: 'port',
+      title: 'SMTP 服务器端口',
+      minWidth: 130,
+    },
+    {
+      field: 'sslEnable',
+      title: '是否开启 SSL',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'starttlsEnable',
+      title: '是否开启 STARTTLS',
+      minWidth: 145,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/mail/account/index.vue b/apps/web-tdesign/src/views/system/mail/account/index.vue
new file mode 100644
index 000000000..066237b17
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/account/index.vue
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemMailAccountApi } from '#/api/system/mail/account';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteMailAccount,
+  deleteMailAccountList,
+  getMailAccountPage,
+} from '#/api/system/mail/account';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建邮箱账号 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑邮箱账号 */
+function handleEdit(row: SystemMailAccountApi.MailAccount) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除邮箱账号 */
+async function handleDelete(row: SystemMailAccountApi.MailAccount) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.mail]),
+    duration: 0,
+  });
+  try {
+    await deleteMailAccount(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.mail]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除邮箱账号 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteMailAccountList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemMailAccountApi.MailAccount[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMailAccountPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemMailAccountApi.MailAccount>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="邮件配置" url="https://doc.iocoder.cn/mail" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="邮箱账号列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['邮箱账号']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:mail-account:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:mail-account:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:mail-account:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:mail-account:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.mail]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/account/modules/form.vue b/apps/web-tdesign/src/views/system/mail/account/modules/form.vue
new file mode 100644
index 000000000..ff5de38d3
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/account/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { SystemMailAccountApi } from '#/api/system/mail/account';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createMailAccount,
+  getMailAccount,
+  updateMailAccount,
+} from '#/api/system/mail/account';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemMailAccountApi.MailAccount>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['邮箱账号'])
+    : $t('ui.actionTitle.create', ['邮箱账号']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 140,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemMailAccountApi.MailAccount;
+    try {
+      await (formData.value?.id
+        ? updateMailAccount(data)
+        : createMailAccount(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemMailAccountApi.MailAccount>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getMailAccount(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/log/data.ts b/apps/web-tdesign/src/views/system/mail/log/data.ts
new file mode 100644
index 000000000..3a12081d5
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/log/data.ts
@@ -0,0 +1,259 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { getSimpleMailAccountList } from '#/api/system/mail/account';
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'sendTime',
+      label: '发送时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入用户编号',
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        allowClear: true,
+        placeholder: '请选择用户类型',
+      },
+    },
+    {
+      fieldName: 'sendStatus',
+      label: '发送状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_MAIL_SEND_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择发送状态',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '邮箱账号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleMailAccountList,
+        labelField: 'mail',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择邮箱账号',
+      },
+    },
+    {
+      fieldName: 'templateId',
+      label: '模板编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编号',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'sendTime',
+      title: '发送时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'userType',
+      title: '接收用户',
+      minWidth: 150,
+      slots: { default: 'userInfo' },
+    },
+    {
+      field: 'toMails',
+      title: '接收信息',
+      minWidth: 300,
+      formatter: ({ row }) => {
+        const lines: string[] = [];
+        if (row.toMails && row.toMails.length > 0) {
+          lines.push(`收件：${row.toMails.join('、')}`);
+        }
+        if (row.ccMails && row.ccMails.length > 0) {
+          lines.push(`抄送：${row.ccMails.join('、')}`);
+        }
+        if (row.bccMails && row.bccMails.length > 0) {
+          lines.push(`密送：${row.bccMails.join('、')}`);
+        }
+        return lines.join('\n');
+      },
+    },
+    {
+      field: 'templateTitle',
+      title: '邮件标题',
+      minWidth: 120,
+    },
+    {
+      field: 'templateContent',
+      title: '邮件内容',
+      minWidth: 300,
+    },
+    {
+      field: 'fromMail',
+      title: '发送邮箱',
+      minWidth: 120,
+    },
+    {
+      field: 'sendStatus',
+      title: '发送状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS },
+      },
+    },
+    {
+      field: 'templateCode',
+      title: '模板编码',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '编号',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => {
+        return formatDateTime(val) as string;
+      },
+    },
+    {
+      field: 'fromMail',
+      label: '发送邮箱',
+    },
+    {
+      field: 'userId',
+      label: '接收用户',
+      render: (val, data) => {
+        if (data?.userType && val) {
+          return h('div', [
+            h(DictTag, {
+              type: DICT_TYPE.USER_TYPE,
+              value: data.userType,
+            }),
+            ` (${val})`,
+          ]);
+        }
+        return '无';
+      },
+    },
+    {
+      field: 'toMails',
+      label: '接收信息',
+      render: (val, data) => {
+        const lines: string[] = [];
+        if (val && val.length > 0) {
+          lines.push(`收件：${val.join('、')}`);
+        }
+        if (data?.ccMails && data.ccMails.length > 0) {
+          lines.push(`抄送：${data.ccMails.join('、')}`);
+        }
+        if (data?.bccMails && data.bccMails.length > 0) {
+          lines.push(`密送：${data.bccMails.join('、')}`);
+        }
+        return h(
+          'div',
+          {
+            style: { whiteSpace: 'pre-line' },
+          },
+          lines.join('\n'),
+        );
+      },
+    },
+    {
+      field: 'templateId',
+      label: '模板编号',
+    },
+    {
+      field: 'templateCode',
+      label: '模板编码',
+    },
+    {
+      field: 'templateTitle',
+      label: '邮件标题',
+    },
+    {
+      field: 'templateContent',
+      label: '邮件内容',
+      span: 2,
+      render: (val) => {
+        return h('div', {
+          innerHTML: val || '',
+        });
+      },
+    },
+    {
+      field: 'sendStatus',
+      label: '发送状态',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_MAIL_SEND_STATUS,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'sendTime',
+      label: '发送时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'sendMessageId',
+      label: '发送消息编号',
+    },
+    {
+      field: 'sendException',
+      label: '发送异常',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/mail/log/index.vue b/apps/web-tdesign/src/views/system/mail/log/index.vue
new file mode 100644
index 000000000..43dfd1dbb
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/log/index.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemMailLogApi } from '#/api/system/mail/log';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getMailLogPage } from '#/api/system/mail/log';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看邮件日志 */
+function handleDetail(row: SystemMailLogApi.MailLog) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMailLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemMailLogApi.MailLog>,
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="邮件配置" url="https://doc.iocoder.cn/mail" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="邮件日志列表">
+      <template #userInfo="{ row }">
+        <div v-if="row.userType && row.userId" class="flex items-center gap-1">
+          <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
+          <span>({{ row.userId }})</span>
+        </div>
+        <div v-else>-</div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:mail-log:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/log/modules/detail.vue b/apps/web-tdesign/src/views/system/mail/log/modules/detail.vue
new file mode 100644
index 000000000..3b04a9d04
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/log/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { SystemMailLogApi } from '#/api/system/mail/log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemMailLogApi.MailLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 2,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemMailLogApi.MailLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="邮件日志详情"
+    class="w-[1280px]"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/template/data.ts b/apps/web-tdesign/src/views/system/mail/template/data.ts
new file mode 100644
index 000000000..f7345abb5
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/template/data.ts
@@ -0,0 +1,266 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getSimpleMailAccountList } from '#/api/system/mail/account';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板编码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'accountId',
+      label: '邮箱账号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleMailAccountList,
+        labelField: 'mail',
+        valueField: 'id',
+        placeholder: '请选择邮箱账号',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'nickname',
+      label: '发送人名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入发送人名称',
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '模板标题',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板标题',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'RichTextarea',
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 发送邮件表单 */
+export function useSendMailFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'templateParams',
+      label: '模板参数',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'RichTextarea',
+      componentProps: {
+        options: {
+          readonly: true,
+        },
+      },
+    },
+    {
+      fieldName: 'toMails',
+      label: '收件邮箱',
+      component: 'Select',
+      componentProps: {
+        mode: 'tags',
+        allowClear: true,
+        placeholder: '请输入收件邮箱，按 Enter 添加',
+      },
+    },
+    {
+      fieldName: 'ccMails',
+      label: '抄送邮箱',
+      component: 'Select',
+      componentProps: {
+        mode: 'tags',
+        allowClear: true,
+        placeholder: '请输入抄送邮箱，按 Enter 添加',
+      },
+    },
+    {
+      fieldName: 'bccMails',
+      label: '密送邮箱',
+      component: 'Select',
+      componentProps: {
+        mode: 'tags',
+        allowClear: true,
+        placeholder: '请输入密送邮箱，按 Enter 添加',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择开启状态',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板名称',
+      },
+    },
+    {
+      fieldName: 'accountId',
+      label: '邮箱账号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleMailAccountList,
+        labelField: 'mail',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择邮箱账号',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  getAccountMail?: (accountId: number) => string | undefined,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'code',
+      title: '模板编码',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '模板名称',
+      minWidth: 120,
+    },
+    {
+      field: 'title',
+      title: '模板标题',
+      minWidth: 120,
+    },
+    {
+      field: 'accountId',
+      title: '邮箱账号',
+      minWidth: 120,
+      formatter: ({ cellValue }) => getAccountMail?.(cellValue) || '-',
+    },
+    {
+      field: 'nickname',
+      title: '发送人名称',
+      minWidth: 120,
+    },
+    {
+      field: 'status',
+      title: '开启状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/mail/template/index.vue b/apps/web-tdesign/src/views/system/mail/template/index.vue
new file mode 100644
index 000000000..fe593974f
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/template/index.vue
@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemMailAccountApi } from '#/api/system/mail/account';
+import type { SystemMailTemplateApi } from '#/api/system/mail/template';
+
+import { onMounted, ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSimpleMailAccountList } from '#/api/system/mail/account';
+import {
+  deleteMailTemplate,
+  deleteMailTemplateList,
+  getMailTemplatePage,
+} from '#/api/system/mail/template';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import SendForm from './modules/send-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [SendModal, sendModalApi] = useVbenModal({
+  connectedComponent: SendForm,
+  destroyOnClose: true,
+});
+
+/** 获取邮箱账号 */
+const accountList = ref<SystemMailAccountApi.MailAccount[]>([]);
+function getAccountMail(accountId: number) {
+  return accountList.value.find((account) => account.id === accountId)?.mail;
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建邮件模板 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑邮件模板 */
+function handleEdit(row: SystemMailTemplateApi.MailTemplate) {
+  formModalApi.setData(row).open();
+}
+
+/** 发送测试邮件 */
+function handleSend(row: SystemMailTemplateApi.MailTemplate) {
+  sendModalApi.setData(row).open();
+}
+
+/** 删除邮件模板 */
+async function handleDelete(row: SystemMailTemplateApi.MailTemplate) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteMailTemplate(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除邮件模板 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteMailTemplateList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemMailTemplateApi.MailTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(getAccountMail),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMailTemplatePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemMailTemplateApi.MailTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 初始化 */
+onMounted(async () => {
+  accountList.value = await getSimpleMailAccountList();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="邮件配置" url="https://doc.iocoder.cn/mail" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <SendModal />
+    <Grid table-title="邮件模板列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['邮件模板']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:mail-template:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:mail-template:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:mail-template:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '测试',
+              type: 'primary',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:mail-template:send-mail'],
+              onClick: handleSend.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              variant: 'text',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:mail-template:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/template/modules/form.vue b/apps/web-tdesign/src/views/system/mail/template/modules/form.vue
new file mode 100644
index 000000000..87863641f
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/template/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { SystemMailTemplateApi } from '#/api/system/mail/template';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createMailTemplate,
+  getMailTemplate,
+  updateMailTemplate,
+} from '#/api/system/mail/template';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemMailTemplateApi.MailTemplate>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['邮件模板'])
+    : $t('ui.actionTitle.create', ['邮件模板']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemMailTemplateApi.MailTemplate;
+    try {
+      await (formData.value?.id
+        ? updateMailTemplate(data)
+        : createMailTemplate(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemMailTemplateApi.MailTemplate>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getMailTemplate(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/mail/template/modules/send-form.vue b/apps/web-tdesign/src/views/system/mail/template/modules/send-form.vue
new file mode 100644
index 000000000..489a225e5
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/mail/template/modules/send-form.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import type { SystemMailTemplateApi } from '#/api/system/mail/template';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { sendMail } from '#/api/system/mail/template';
+
+import { useSendMailFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemMailTemplateApi.MailTemplate>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 构建发送请求
+    const values = await formApi.getValues();
+    const paramsObj: Record<string, string> = {};
+    if (formData.value?.params) {
+      formData.value.params.forEach((param: string) => {
+        paramsObj[param] = values[`param_${param}`];
+      });
+    }
+    const data: SystemMailTemplateApi.MailSendReqVO = {
+      toMails: values.toMails,
+      ccMails: values.ccMails,
+      bccMails: values.bccMails,
+      templateCode: formData.value?.code || '',
+      templateParams: paramsObj,
+    };
+
+    // 提交表单
+    try {
+      await sendMail(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success('邮件发送成功');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 获取数据
+    const data = modalApi.getData<SystemMailTemplateApi.MailTemplate>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+    // 更新 form schema
+    const schema = buildFormSchema();
+    formApi.setState({ schema });
+    // 设置到 values
+    await formApi.setValues({
+      content: data.content,
+    });
+  },
+});
+
+/** 动态构建表单 schema */
+function buildFormSchema() {
+  const schema = useSendMailFormSchema();
+  if (formData.value?.params) {
+    formData.value.params?.forEach((param: string) => {
+      schema.push({
+        fieldName: `param_${param}`,
+        label: `参数 ${param}`,
+        component: 'Input',
+        componentProps: {
+          placeholder: `请输入参数 ${param}`,
+        },
+        rules: 'required',
+      });
+    });
+  }
+  return schema;
+}
+</script>
+
+<template>
+  <Modal title="测试发送邮件" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/menu/data.ts b/apps/web-tdesign/src/views/system/menu/data.ts
new file mode 100644
index 000000000..3226f0c41
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/menu/data.ts
@@ -0,0 +1,324 @@
+import type { Recordable } from '@vben/types';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemMenuApi } from '#/api/system/menu';
+
+import { h } from 'vue';
+
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  SystemMenuTypeEnum,
+} from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { handleTree, isHttpUrl } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getMenuList } from '#/api/system/menu';
+import { $t } from '#/locales';
+import { componentKeys } from '#/router/routes';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级菜单',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getMenuList();
+          data.unshift({
+            id: 0,
+            name: '顶级部门',
+          } as SystemMenuApi.Menu);
+          return handleTree(data);
+        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择上级菜单',
+        filterTreeNode(input: string, node: Recordable<any>) {
+          if (!input || input.length === 0) {
+            return true;
+          }
+          const name: string = node.label ?? '';
+          if (!name) return false;
+          return name.includes(input) || $t(name).includes(input);
+        },
+        showSearch: true,
+        treeDefaultExpandedKeys: [0],
+      },
+      rules: 'selectRequired',
+      renderComponentContent() {
+        return {
+          title({ label, icon }: { icon: string; label: string }) {
+            const components = [];
+            if (!label) return '';
+            if (icon) {
+              components.push(h(IconifyIcon, { class: 'size-4', icon }));
+            }
+            components.push(h('span', { class: '' }, $t(label || '')));
+            return h('div', { class: 'flex items-center gap-1' }, components);
+          },
+        };
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '菜单名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入菜单名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '菜单类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_MENU_TYPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(SystemMenuTypeEnum.DIR),
+    },
+    {
+      fieldName: 'icon',
+      label: '菜单图标',
+      component: 'IconPicker',
+      componentProps: {
+        placeholder: '请选择菜单图标',
+        prefix: 'carbon',
+      },
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.DIR, SystemMenuTypeEnum.MENU].includes(
+            values.type,
+          );
+        },
+      },
+    },
+    {
+      fieldName: 'path',
+      label: '路由地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入路由地址',
+      },
+      rules: z.string(),
+      help: '访问的路由地址，如：`user`。如需外网地址时，则以 `http(s)://` 开头',
+      dependencies: {
+        triggerFields: ['type', 'parentId'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.DIR, SystemMenuTypeEnum.MENU].includes(
+            values.type,
+          );
+        },
+        rules: (values) => {
+          const schema = z.string().min(1, '路由地址不能为空');
+          if (isHttpUrl(values.path)) {
+            return schema;
+          }
+          if (values.parentId === 0) {
+            return schema.refine(
+              (path) => path.charAt(0) === '/',
+              '路径必须以 / 开头',
+            );
+          }
+          return schema.refine(
+            (path) => path.charAt(0) !== '/',
+            '路径不能以 / 开头',
+          );
+        },
+      },
+    },
+    {
+      fieldName: 'component',
+      label: '组件地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入组件地址',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU].includes(values.type);
+        },
+      },
+    },
+    {
+      fieldName: 'componentName',
+      label: '组件名称',
+      component: 'AutoComplete',
+      componentProps: {
+        allowClear: true,
+        filterOption(input: string, option: { value: string }) {
+          return option.value.toLowerCase().includes(input.toLowerCase());
+        },
+        placeholder: '请选择组件名称',
+        options: componentKeys.map((v) => ({ value: v })),
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU].includes(values.type);
+        },
+      },
+    },
+    {
+      fieldName: 'permission',
+      label: '权限标识',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入菜单描述',
+      },
+      dependencies: {
+        show: (values) => {
+          return [SystemMenuTypeEnum.BUTTON, SystemMenuTypeEnum.MENU].includes(
+            values.type,
+          );
+        },
+        triggerFields: ['type'],
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '显示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入显示顺序',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '菜单状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'alwaysShow',
+      label: '总是显示',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '总是', value: true },
+          { label: '不是', value: false },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      defaultValue: true,
+      help: '选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU].includes(values.type);
+        },
+      },
+    },
+    {
+      fieldName: 'keepAlive',
+      label: '缓存状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: '缓存', value: true },
+          { label: '不缓存', value: false },
+        ],
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+      defaultValue: true,
+      help: '选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段',
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => {
+          return [SystemMenuTypeEnum.MENU].includes(values.type);
+        },
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<SystemMenuApi.Menu>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '菜单名称',
+      minWidth: 250,
+      align: 'left',
+      fixed: 'left',
+      slots: { default: 'name' },
+      treeNode: true,
+    },
+    {
+      field: 'type',
+      title: '菜单类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_MENU_TYPE },
+      },
+    },
+    {
+      field: 'sort',
+      title: '显示排序',
+      minWidth: 100,
+    },
+    {
+      field: 'permission',
+      title: '权限标识',
+      minWidth: 200,
+    },
+    {
+      field: 'path',
+      title: '组件路径',
+      minWidth: 200,
+    },
+    {
+      field: 'componentName',
+      title: '组件名称',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/menu/index.vue b/apps/web-tdesign/src/views/system/menu/index.vue
new file mode 100644
index 000000000..47dfc6c3c
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/menu/index.vue
@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemMenuApi } from '#/api/system/menu';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { SystemMenuTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteMenu, getMenuList } from '#/api/system/menu';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建菜单 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 添加下级菜单 */
+function handleAppend(row: SystemMenuApi.Menu) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑菜单 */
+function handleEdit(row: SystemMenuApi.Menu) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除菜单 */
+async function handleDelete(row: SystemMenuApi.Menu) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteMenu(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(false);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_params) => {
+          return await getMenuList();
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<SystemMenuApi.Menu>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="功能权限"
+        url="https://doc.iocoder.cn/resource-permission"
+      />
+      <DocAlert title="菜单路由" url="https://doc.iocoder.cn/vue3/route/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="菜单列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['菜单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:menu:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+          ]"
+        />
+      </template>
+      <template #name="{ row }">
+        <div class="flex w-full items-center gap-1">
+          <div class="size-5 flex-shrink-0">
+            <IconifyIcon
+              v-if="row.type === SystemMenuTypeEnum.BUTTON"
+              icon="carbon:square-outline"
+              class="size-full"
+            />
+            <IconifyIcon
+              v-else-if="row.icon"
+              :icon="row.icon || 'carbon:circle-dash'"
+              class="size-full"
+            />
+          </div>
+          <span class="flex-auto">{{ $t(row.name) }}</span>
+          <div class="items-center justify-end"></div>
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增下级',
+              variant: 'text',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:menu:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:menu:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:menu:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/menu/modules/form.vue b/apps/web-tdesign/src/views/system/menu/modules/form.vue
new file mode 100644
index 000000000..1a355bf5d
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/menu/modules/form.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { SystemMenuApi } from '#/api/system/menu';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createMenu, getMenu, updateMenu } from '#/api/system/menu';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemMenuApi.Menu>();
+const getTitle = computed(() =>
+  formData.value?.id
+    ? $t('ui.actionTitle.edit', ['菜单'])
+    : $t('ui.actionTitle.create', ['菜单']),
+);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemMenuApi.Menu;
+    try {
+      await (formData.value?.id ? updateMenu(data) : createMenu(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemMenuApi.Menu>();
+    if (!data || !data.id) {
+      // 设置上级
+      await formApi.setValues(data);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getMenu(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notice/data.ts b/apps/web-tdesign/src/views/system/notice/data.ts
new file mode 100644
index 000000000..79c156c86
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notice/data.ts
@@ -0,0 +1,135 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '公告标题',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '公告类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_NOTICE_TYPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'content',
+      label: '公告内容',
+      component: 'RichTextarea',
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '公告状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'title',
+      label: '公告标题',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入公告标题',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '公告状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择公告状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '公告编号',
+      minWidth: 100,
+    },
+    {
+      field: 'title',
+      title: '公告标题',
+      minWidth: 200,
+    },
+    {
+      field: 'type',
+      title: '公告类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_NOTICE_TYPE },
+      },
+    },
+    {
+      field: 'status',
+      title: '公告状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/notice/index.vue b/apps/web-tdesign/src/views/system/notice/index.vue
new file mode 100644
index 000000000..506b25560
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notice/index.vue
@@ -0,0 +1,190 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemNoticeApi } from '#/api/system/notice';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteNotice,
+  deleteNoticeList,
+  getNoticePage,
+  pushNotice,
+} from '#/api/system/notice';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建公告 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑公告 */
+function handleEdit(row: SystemNoticeApi.Notice) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除公告 */
+async function handleDelete(row: SystemNoticeApi.Notice) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.title]),
+    duration: 0,
+  });
+  try {
+    await deleteNotice(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.title]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除公告 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteNoticeList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemNoticeApi.Notice[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 推送公告 */
+async function handlePush(row: SystemNoticeApi.Notice) {
+  const hideLoading = message.loading({
+    content: '正在推送中...',
+  });
+  try {
+    await pushNotice(row.id!);
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getNoticePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemNoticeApi.Notice>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="公告列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['公告']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:notice:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:notice:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:notice:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '推送',
+              variant: 'text',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:notice:update'],
+              onClick: handlePush.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:notice:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.title]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notice/modules/form.vue b/apps/web-tdesign/src/views/system/notice/modules/form.vue
new file mode 100644
index 000000000..fb59b531b
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notice/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { SystemNoticeApi } from '#/api/system/notice';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createNotice, getNotice, updateNotice } from '#/api/system/notice';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemNoticeApi.Notice>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['公告'])
+    : $t('ui.actionTitle.create', ['公告']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemNoticeApi.Notice;
+    try {
+      await (formData.value?.id ? updateNotice(data) : createNotice(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemNoticeApi.Notice>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getNotice(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/2">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/message/data.ts b/apps/web-tdesign/src/views/system/notify/message/data.ts
new file mode 100644
index 000000000..c6a315229
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/message/data.ts
@@ -0,0 +1,237 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入用户编号',
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        placeholder: '请选择用户类型',
+      },
+    },
+    {
+      fieldName: 'templateCode',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编码',
+      },
+    },
+    {
+      fieldName: 'templateType',
+      label: '模版类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
+          'number',
+        ),
+        allowClear: true,
+        placeholder: '请选择模版类型',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userType',
+      title: '用户类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'templateCode',
+      title: '模板编码',
+      minWidth: 120,
+    },
+    {
+      field: 'templateNickname',
+      title: '发送人名称',
+      minWidth: 180,
+    },
+    {
+      field: 'templateContent',
+      title: '模版内容',
+      minWidth: 200,
+    },
+    {
+      field: 'templateParams',
+      title: '模版参数',
+      minWidth: 180,
+      formatter: ({ cellValue }) => {
+        try {
+          return JSON.stringify(cellValue);
+        } catch {
+          return '';
+        }
+      },
+    },
+    {
+      field: 'templateType',
+      title: '模版类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
+      },
+    },
+    {
+      field: 'readStatus',
+      title: '是否已读',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'readTime',
+      title: '阅读时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '编号',
+    },
+    {
+      field: 'userType',
+      label: '用户类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.USER_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'userId',
+      label: '用户编号',
+    },
+    {
+      field: 'templateId',
+      label: '模版编号',
+    },
+    {
+      field: 'templateCode',
+      label: '模板编码',
+    },
+    {
+      field: 'templateNickname',
+      label: '发送人名称',
+    },
+    {
+      field: 'templateContent',
+      label: '模版内容',
+    },
+    {
+      field: 'templateParams',
+      label: '模版参数',
+      render: (val) => {
+        try {
+          return JSON.stringify(val);
+        } catch {
+          return '';
+        }
+      },
+    },
+    {
+      field: 'templateType',
+      label: '模版类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'readStatus',
+      label: '是否已读',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.INFRA_BOOLEAN_STRING,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'readTime',
+      label: '阅读时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/notify/message/index.vue b/apps/web-tdesign/src/views/system/notify/message/index.vue
new file mode 100644
index 000000000..22c87ea50
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/message/index.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getNotifyMessagePage } from '#/api/system/notify/message';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看站内信详情 */
+function handleDetail(row: SystemNotifyMessageApi.NotifyMessage) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getNotifyMessagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemNotifyMessageApi.NotifyMessage>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="站内信" url="https://doc.iocoder.cn/notify/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="站内信列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:notify-message:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/message/modules/detail.vue b/apps/web-tdesign/src/views/system/notify/message/modules/detail.vue
new file mode 100644
index 000000000..a0e100dd4
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/message/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemNotifyMessageApi.NotifyMessage>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="站内信详情"
+    class="w-1/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/my/data.ts b/apps/web-tdesign/src/views/system/notify/my/data.ts
new file mode 100644
index 000000000..b31d437c2
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/my/data.ts
@@ -0,0 +1,137 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'readStatus',
+      label: '是否已读',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        allowClear: true,
+        placeholder: '请选择是否已读',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '发送时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      title: '',
+      width: 40,
+      type: 'checkbox',
+    },
+    {
+      field: 'templateNickname',
+      title: '发送人',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '发送时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'templateType',
+      title: '类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
+      },
+    },
+    {
+      field: 'templateContent',
+      title: '消息内容',
+      minWidth: 300,
+    },
+    {
+      field: 'readStatus',
+      title: '是否已读',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'readTime',
+      title: '阅读时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'templateNickname',
+      label: '发送人',
+    },
+    {
+      field: 'createTime',
+      label: '发送时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'templateType',
+      label: '消息类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'readStatus',
+      label: '是否已读',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.INFRA_BOOLEAN_STRING,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'readTime',
+      label: '阅读时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'templateContent',
+      label: '消息内容',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/notify/my/index.vue b/apps/web-tdesign/src/views/system/notify/my/index.vue
new file mode 100644
index 000000000..d4e843a49
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/my/index.vue
@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  getMyNotifyMessagePage,
+  updateAllNotifyMessageRead,
+  updateNotifyMessageRead,
+} from '#/api/system/notify/message';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 查看站内信详情 */
+function handleDetail(row: SystemNotifyMessageApi.NotifyMessage) {
+  detailModalApi.setData(row).open();
+}
+
+/** 标记一条站内信已读 */
+async function handleRead(row: SystemNotifyMessageApi.NotifyMessage) {
+  const hideLoading = message.loading({
+    content: '正在标记已读...',
+    duration: 0,
+  });
+  try {
+    await updateNotifyMessageRead([row.id]);
+    message.success('标记已读成功');
+    handleRefresh();
+    // 打开详情
+    handleDetail(row);
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 标记选中的站内信为已读 */
+async function handleMarkRead() {
+  const rows = gridApi.grid.getCheckboxRecords();
+  if (!rows || rows.length === 0) {
+    message.warning('请选择需要标记的站内信');
+    return;
+  }
+
+  const ids = rows.map((row: SystemNotifyMessageApi.NotifyMessage) => row.id);
+  const hideLoading = message.loading({
+    content: '正在标记已读...',
+    duration: 0,
+  });
+  try {
+    await updateNotifyMessageRead(ids);
+    checkedIds.value = [];
+    message.success('标记已读成功');
+    await gridApi.grid.setAllCheckboxRow(false);
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemNotifyMessageApi.NotifyMessage[];
+}) {
+  checkedIds.value = records.map((item) => item.id);
+}
+
+/** 标记所有站内信为已读 */
+async function handleMarkAllRead() {
+  const hideLoading = message.loading({
+    content: '正在标记全部已读...',
+    duration: 0,
+  });
+  try {
+    await updateAllNotifyMessageRead();
+    message.success('全部标记已读成功');
+    checkedIds.value = [];
+    await gridApi.grid.setAllCheckboxRow(false);
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMyNotifyMessagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    checkboxConfig: {
+      checkMethod: (params: { row: SystemNotifyMessageApi.NotifyMessage }) =>
+        !params.row.readStatus,
+      highlight: true,
+    },
+  } as VxeTableGridOptions<SystemNotifyMessageApi.NotifyMessage>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="站内信配置" url="https://doc.iocoder.cn/notify/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="我的站内信">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '标记已读',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              disabled: isEmpty(checkedIds),
+              onClick: handleMarkRead,
+            },
+            {
+              label: '全部已读',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleMarkAllRead,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '查看',
+              variant: 'text',
+              ifShow: row.readStatus,
+              icon: ACTION_ICON.VIEW,
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: '已读',
+              variant: 'text',
+              ifShow: !row.readStatus,
+              icon: ACTION_ICON.ADD,
+              onClick: handleRead.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/my/modules/detail.vue b/apps/web-tdesign/src/views/system/notify/my/modules/detail.vue
new file mode 100644
index 000000000..a0e100dd4
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/my/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemNotifyMessageApi.NotifyMessage>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="站内信详情"
+    class="w-1/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/template/data.ts b/apps/web-tdesign/src/views/system/notify/template/data.ts
new file mode 100644
index 000000000..d22b16ce9
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/template/data.ts
@@ -0,0 +1,288 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE, UserTypeEnum } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板编码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'nickname',
+      label: '发送人名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入发送人名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入模板内容',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '模板类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
+          'number',
+        ),
+        placeholder: '请选择模板类型',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板名称',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编码',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择状态',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '模板类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
+          'number',
+        ),
+        allowClear: true,
+        placeholder: '请选择模板类型',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 发送站内信表单 */
+export function useSendNotifyFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'Textarea',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'templateCode',
+      label: '模板编码',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+      },
+      rules: z.number().default(UserTypeEnum.MEMBER),
+    },
+    {
+      fieldName: 'userId',
+      label: '接收人 ID',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户编号',
+      },
+      dependencies: {
+        show(values) {
+          return values.userType === UserTypeEnum.MEMBER;
+        },
+        triggerFields: ['userType'],
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'userId',
+      label: '接收人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择接收人',
+      },
+      dependencies: {
+        show(values) {
+          return values.userType === UserTypeEnum.ADMIN;
+        },
+        triggerFields: ['userType'],
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'templateParams',
+      label: '模板参数',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '模板名称',
+      minWidth: 120,
+    },
+    {
+      field: 'code',
+      title: '模板编码',
+      minWidth: 120,
+    },
+    {
+      field: 'nickname',
+      title: '发送人名称',
+      minWidth: 120,
+    },
+    {
+      field: 'content',
+      title: '模板内容',
+      minWidth: 200,
+    },
+    {
+      field: 'type',
+      title: '模板类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE },
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 120,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/notify/template/index.vue b/apps/web-tdesign/src/views/system/notify/template/index.vue
new file mode 100644
index 000000000..f37756d48
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/template/index.vue
@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteNotifyTemplate,
+  deleteNotifyTemplateList,
+  exportNotifyTemplate,
+  getNotifyTemplatePage,
+} from '#/api/system/notify/template';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import SendForm from './modules/send-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [SendModal, sendModalApi] = useVbenModal({
+  connectedComponent: SendForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportNotifyTemplate(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '站内信模板.xls', source: data });
+}
+
+/** 创建站内信模板 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑站内信模板 */
+function handleEdit(row: SystemNotifyTemplateApi.NotifyTemplate) {
+  formModalApi.setData(row).open();
+}
+
+/** 发送测试站内信 */
+function handleSend(row: SystemNotifyTemplateApi.NotifyTemplate) {
+  sendModalApi.setData(row).open();
+}
+
+/** 删除站内信模板 */
+async function handleDelete(row: SystemNotifyTemplateApi.NotifyTemplate) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteNotifyTemplate(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除站内信模板 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteNotifyTemplateList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemNotifyTemplateApi.NotifyTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getNotifyTemplatePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemNotifyTemplateApi.NotifyTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="站内信" url="https://doc.iocoder.cn/notify/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <SendModal />
+    <Grid table-title="站内信模板列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['站内信模板']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:notify-template:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:notify-template:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:notify-template:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:notify-template:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '测试',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:notify-template:send-notify'],
+              onClick: handleSend.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:notify-template:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/template/modules/form.vue b/apps/web-tdesign/src/views/system/notify/template/modules/form.vue
new file mode 100644
index 000000000..080bb3e66
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/template/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createNotifyTemplate,
+  getNotifyTemplate,
+  updateNotifyTemplate,
+} from '#/api/system/notify/template';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemNotifyTemplateApi.NotifyTemplate>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['站内信模板'])
+    : $t('ui.actionTitle.create', ['站内信模板']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemNotifyTemplateApi.NotifyTemplate;
+    try {
+      await (formData.value?.id
+        ? updateNotifyTemplate(data)
+        : createNotifyTemplate(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemNotifyTemplateApi.NotifyTemplate>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getNotifyTemplate(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/notify/template/modules/send-form.vue b/apps/web-tdesign/src/views/system/notify/template/modules/send-form.vue
new file mode 100644
index 000000000..4bd417294
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/notify/template/modules/send-form.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { sendNotify } from '#/api/system/notify/template';
+import { $t } from '#/locales';
+
+import { useSendNotifyFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemNotifyTemplateApi.NotifyTemplate>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 构建发送请求
+    const values = await formApi.getValues();
+    const paramsObj: Record<string, string> = {};
+    if (formData.value?.params) {
+      formData.value.params.forEach((param) => {
+        paramsObj[param] = values[`param_${param}`];
+      });
+    }
+    const data: SystemNotifyTemplateApi.NotifySendReqVO = {
+      userId: values.userId,
+      userType: values.userType,
+      templateCode: formData.value?.code || '',
+      templateParams: paramsObj,
+    };
+
+    // 提交表单
+    try {
+      await sendNotify(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } catch (error) {
+      console.error('发送站内信失败', error);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 获取数据
+    const data = modalApi.getData<SystemNotifyTemplateApi.NotifyTemplate>();
+    if (!data || !data.id) {
+      return;
+    }
+    formData.value = data;
+    // 更新 form schema
+    const schema = buildFormSchema();
+    formApi.setState({ schema });
+    // 设置到 values
+    await formApi.setValues({
+      content: data.content,
+      templateCode: data.code,
+    });
+  },
+});
+
+/** 动态构建表单 schema */
+function buildFormSchema() {
+  const schema = useSendNotifyFormSchema();
+  if (formData.value?.params) {
+    formData.value.params.forEach((param: string) => {
+      schema.push({
+        fieldName: `param_${param}`,
+        label: `参数 ${param}`,
+        component: 'Input',
+        rules: 'required',
+        componentProps: {
+          placeholder: `请输入参数 ${param}`,
+        },
+      });
+    });
+  }
+  return schema;
+}
+</script>
+
+<template>
+  <Modal title="测试发送站内信">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/oauth2/client/data.ts b/apps/web-tdesign/src/views/system/oauth2/client/data.ts
new file mode 100644
index 000000000..b5bc683c0
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/oauth2/client/data.ts
@@ -0,0 +1,263 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户端编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户端编号',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'secret',
+      label: '客户端密钥',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户端密钥',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'name',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应用名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'logo',
+      label: '应用图标',
+      component: 'ImageUpload',
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '应用描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入应用描述',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'accessTokenValiditySeconds',
+      label: '访问令牌的有效期',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入访问令牌的有效期，单位：秒',
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'refreshTokenValiditySeconds',
+      label: '刷新令牌的有效期',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入刷新令牌的有效期，单位：秒',
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'authorizedGrantTypes',
+      label: '授权类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_OAUTH2_GRANT_TYPE),
+        mode: 'multiple',
+        placeholder: '请输入授权类型',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'scopes',
+      label: '授权范围',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请输入授权范围',
+        mode: 'tags',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'autoApproveScopes',
+      label: '自动授权范围',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请输入自动授权范围',
+        mode: 'multiple',
+      },
+      dependencies: {
+        triggerFields: ['scopes'],
+        componentProps: (values) => ({
+          options: values.scopes
+            ? values.scopes.map((scope: string) => ({
+                label: scope,
+                value: scope,
+              }))
+            : [],
+        }),
+      },
+    },
+    {
+      fieldName: 'redirectUris',
+      label: '可重定向的 URI 地址',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请输入可重定向的 URI 地址',
+        mode: 'tags',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'authorities',
+      label: '权限',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请输入权限',
+        mode: 'tags',
+      },
+    },
+    {
+      fieldName: 'resourceIds',
+      label: '资源',
+      component: 'Select',
+      componentProps: {
+        mode: 'tags',
+        placeholder: '请输入资源',
+      },
+    },
+    {
+      fieldName: 'additionalInformation',
+      label: '附加信息',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入附加信息，JSON 格式数据',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应用名',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请输入状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'clientId',
+      title: '客户端编号',
+      minWidth: 120,
+    },
+    {
+      field: 'secret',
+      title: '客户端密钥',
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: '应用名',
+      minWidth: 120,
+    },
+    {
+      field: 'logo',
+      title: '应用图标',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'accessTokenValiditySeconds',
+      title: '访问令牌的有效期',
+      minWidth: 150,
+      formatter: ({ cellValue }) => `${cellValue} 秒`,
+    },
+    {
+      field: 'refreshTokenValiditySeconds',
+      title: '刷新令牌的有效期',
+      minWidth: 150,
+      formatter: ({ cellValue }) => `${cellValue} 秒`,
+    },
+    {
+      field: 'authorizedGrantTypes',
+      title: '授权类型',
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/oauth2/client/index.vue b/apps/web-tdesign/src/views/system/oauth2/client/index.vue
new file mode 100644
index 000000000..a6b7395ed
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/oauth2/client/index.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemOAuth2ClientApi } from '#/api/system/oauth2/client';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteOAuth2Client,
+  deleteOAuth2ClientList,
+  getOAuth2ClientPage,
+} from '#/api/system/oauth2/client';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建 OAuth2 客户端 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑 OAuth2 客户端 */
+function handleEdit(row: SystemOAuth2ClientApi.OAuth2Client) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除 OAuth2 客户端 */
+async function handleDelete(row: SystemOAuth2ClientApi.OAuth2Client) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteOAuth2Client(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除 OAuth2 客户端 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteOAuth2ClientList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemOAuth2ClientApi.OAuth2Client[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOAuth2ClientPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemOAuth2ClientApi.OAuth2Client>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="OAuth 2.0（SSO 单点登录）"
+        url="https://doc.iocoder.cn/oauth2/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="OAuth2 客户端列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', [' OAuth2.0 客户端']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:oauth2-client:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:oauth2-client:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:oauth2-client:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:oauth2-client:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/oauth2/client/modules/form.vue b/apps/web-tdesign/src/views/system/oauth2/client/modules/form.vue
new file mode 100644
index 000000000..0f0960a98
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/oauth2/client/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { SystemOAuth2ClientApi } from '#/api/system/oauth2/client';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createOAuth2Client,
+  getOAuth2Client,
+  updateOAuth2Client,
+} from '#/api/system/oauth2/client';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemOAuth2ClientApi.OAuth2Client>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', [' OAuth2.0 客户端'])
+    : $t('ui.actionTitle.create', [' OAuth2.0 客户端']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 140,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemOAuth2ClientApi.OAuth2Client;
+    try {
+      await (formData.value?.id
+        ? updateOAuth2Client(data)
+        : createOAuth2Client(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemOAuth2ClientApi.OAuth2Client>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getOAuth2Client(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-1/2" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/oauth2/token/data.ts b/apps/web-tdesign/src/views/system/oauth2/token/data.ts
new file mode 100644
index 000000000..ab5cf8a66
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/oauth2/token/data.ts
@@ -0,0 +1,93 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '用户编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户编号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        placeholder: '请选择用户类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户端编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户端编号',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'accessToken',
+      title: '访问令牌',
+      minWidth: 300,
+    },
+    {
+      field: 'refreshToken',
+      title: '刷新令牌',
+      minWidth: 300,
+    },
+    {
+      field: 'userId',
+      title: '用户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userType',
+      title: '用户类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      field: 'clientId',
+      title: '客户端编号',
+      minWidth: 120,
+    },
+    {
+      field: 'expiresTime',
+      title: '过期时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/oauth2/token/index.vue b/apps/web-tdesign/src/views/system/oauth2/token/index.vue
new file mode 100644
index 000000000..e911f8931
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/oauth2/token/index.vue
@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemOAuth2TokenApi } from '#/api/system/oauth2/token';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteOAuth2Token,
+  getOAuth2TokenPage,
+} from '#/api/system/oauth2/token';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 删除 OAuth2 令牌 */
+async function handleDelete(row: SystemOAuth2TokenApi.OAuth2Token) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', ['令牌']),
+    duration: 0,
+  });
+  try {
+    await deleteOAuth2Token(row.accessToken);
+    message.success($t('ui.actionMessage.deleteSuccess', ['令牌']));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除 OAuth2 令牌 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteOAuth2Token(checkedIds.value.join(','));
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<string[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemOAuth2TokenApi.OAuth2Token[];
+}) {
+  checkedIds.value = records.map((item) => item.accessToken);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOAuth2TokenPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'accessToken',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemOAuth2TokenApi.OAuth2Token>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="OAuth 2.0（SSO 单点登录）"
+        url="https://doc.iocoder.cn/oauth2/"
+      />
+    </template>
+
+    <Grid table-title="令牌列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:oauth2-token:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:oauth2-token:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', ['令牌']),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/operatelog/data.ts b/apps/web-tdesign/src/views/system/operatelog/data.ts
new file mode 100644
index 000000000..3144daa90
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/operatelog/data.ts
@@ -0,0 +1,191 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { formatDateTime } from '@vben/utils';
+
+import { getSimpleUserList } from '#/api/system/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '操作人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择操作人员',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '操作模块',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入操作模块',
+      },
+    },
+    {
+      fieldName: 'subType',
+      label: '操作名',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入操作名',
+      },
+    },
+    {
+      fieldName: 'action',
+      label: '操作内容',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入操作内容',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '操作时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'bizId',
+      label: '业务编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入业务编号',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '日志编号',
+      minWidth: 100,
+    },
+    {
+      field: 'userName',
+      title: '操作人',
+      minWidth: 120,
+    },
+    {
+      field: 'type',
+      title: '操作模块',
+      minWidth: 120,
+    },
+    {
+      field: 'subType',
+      title: '操作名',
+      minWidth: 160,
+    },
+    {
+      field: 'action',
+      title: '操作内容',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '操作时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'bizId',
+      title: '业务编号',
+      minWidth: 120,
+    },
+    {
+      field: 'userIp',
+      title: '操作 IP',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'id',
+      label: '日志编号',
+    },
+    {
+      field: 'traceId',
+      label: '链路追踪',
+      show: (data) => !data?.traceId,
+    },
+    {
+      field: 'userId',
+      label: '操作人编号',
+    },
+    {
+      field: 'userName',
+      label: '操作人名字',
+    },
+    {
+      field: 'userIp',
+      label: '操作人 IP',
+    },
+    {
+      field: 'userAgent',
+      label: '操作人 UA',
+    },
+    {
+      field: 'type',
+      label: '操作模块',
+    },
+    {
+      field: 'subType',
+      label: '操作名',
+    },
+    {
+      field: 'action',
+      label: '操作内容',
+    },
+    {
+      field: 'extra',
+      label: '操作拓展参数',
+      show: (val) => !val,
+    },
+    {
+      field: 'requestUrl',
+      label: '请求 URL',
+      render: (val, data) => {
+        if (data?.requestMethod && val) {
+          return `${data.requestMethod} ${val}`;
+        }
+        return '';
+      },
+    },
+    {
+      field: 'createTime',
+      label: '操作时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'bizId',
+      label: '业务编号',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/operatelog/index.vue b/apps/web-tdesign/src/views/system/operatelog/index.vue
new file mode 100644
index 000000000..a7d3036eb
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/operatelog/index.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportOperateLog, getOperateLogPage } from '#/api/system/operate-log';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportOperateLog(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '操作日志.xls', source: data });
+}
+
+/** 查看操作日志详情 */
+function handleDetail(row: SystemOperateLogApi.OperateLog) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOperateLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemOperateLogApi.OperateLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="系统日志" url="https://doc.iocoder.cn/system-log/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="操作日志列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:operate-log:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:operate-log:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/operatelog/modules/detail.vue b/apps/web-tdesign/src/views/system/operatelog/modules/detail.vue
new file mode 100644
index 000000000..5ada4818a
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/operatelog/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { SystemOperateLogApi } from '#/api/system/operate-log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemOperateLogApi.OperateLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemOperateLogApi.OperateLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="操作日志详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/post/data.ts b/apps/web-tdesign/src/views/system/post/data.ts
new file mode 100644
index 000000000..43e746522
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/post/data.ts
@@ -0,0 +1,145 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '岗位名称',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: '岗位编码',
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '岗位状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '岗位备注',
+      component: 'Textarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '岗位名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入岗位名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '岗位编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入岗位编码',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '岗位状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择岗位状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '岗位编号',
+      minWidth: 200,
+    },
+    {
+      field: 'name',
+      title: '岗位名称',
+      minWidth: 200,
+    },
+    {
+      field: 'code',
+      title: '岗位编码',
+      minWidth: 200,
+    },
+    {
+      field: 'sort',
+      title: '显示顺序',
+      minWidth: 100,
+    },
+    {
+      field: 'remark',
+      title: '岗位备注',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '岗位状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/post/index.vue b/apps/web-tdesign/src/views/system/post/index.vue
new file mode 100644
index 000000000..e80cfe5ca
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/post/index.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemPostApi } from '#/api/system/post';
+
+import { ref } from 'vue';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deletePost,
+  deletePostList,
+  exportPost,
+  getPostPage,
+} from '#/api/system/post';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportPost(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '岗位.xls', source: data });
+}
+
+/** 创建岗位 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑岗位 */
+function handleEdit(row: SystemPostApi.Post) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除岗位 */
+async function handleDelete(row: SystemPostApi.Post) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deletePost(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除岗位 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deletePostList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemPostApi.Post[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getPostPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemPostApi.Post>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="岗位列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['岗位']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:post:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:post:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:post:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:post:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:post:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/post/modules/form.vue b/apps/web-tdesign/src/views/system/post/modules/form.vue
new file mode 100644
index 000000000..7d5943071
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/post/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { SystemPostApi } from '#/api/system/post';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createPost, getPost, updatePost } from '#/api/system/post';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemPostApi.Post>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['岗位'])
+    : $t('ui.actionTitle.create', ['岗位']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemPostApi.Post;
+    try {
+      await (formData.value?.id ? updatePost(data) : createPost(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemPostApi.Post>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPost(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[600px]" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/role/data.ts b/apps/web-tdesign/src/views/system/role/data.ts
new file mode 100644
index 000000000..d9da8fa90
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/role/data.ts
@@ -0,0 +1,255 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  SystemDataScopeEnum,
+} from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '角色名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '角色标识',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入显示顺序',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '角色状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '角色备注',
+      component: 'Textarea',
+    },
+  ];
+}
+
+/** 分配数据权限的表单 */
+export function useAssignDataPermissionFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '角色名称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: '角色标识',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'dataScope',
+      label: '权限范围',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE, 'number'),
+      },
+    },
+    {
+      fieldName: 'dataScopeDeptIds',
+      label: '部门范围',
+      component: 'Input',
+      formItemClass: 'items-start',
+      dependencies: {
+        triggerFields: ['dataScope'],
+        show: (values) => {
+          return values.dataScope === SystemDataScopeEnum.DEPT_CUSTOM;
+        },
+      },
+    },
+  ];
+}
+
+/** 分配菜单的表单 */
+export function useAssignMenuFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '角色名称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '角色标识',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'menuIds',
+      label: '菜单权限',
+      component: 'Input',
+      formItemClass: 'items-start',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '角色名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入角色名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '角色标识',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入角色标识',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '角色状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择角色状态',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '角色编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '角色名称',
+      minWidth: 200,
+    },
+    {
+      field: 'type',
+      title: '角色类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_ROLE_TYPE },
+      },
+    },
+    {
+      field: 'code',
+      title: '角色标识',
+      minWidth: 200,
+    },
+    {
+      field: 'sort',
+      title: '显示顺序',
+      minWidth: 100,
+    },
+    {
+      field: 'remark',
+      title: '角色备注',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '角色状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/role/index.vue b/apps/web-tdesign/src/views/system/role/index.vue
new file mode 100644
index 000000000..c74654f67
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/role/index.vue
@@ -0,0 +1,230 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemRoleApi } from '#/api/system/role';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteRole,
+  deleteRoleList,
+  exportRole,
+  getRolePage,
+} from '#/api/system/role';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import AssignDataPermissionForm from './modules/assign-data-permission-form.vue';
+import AssignMenuForm from './modules/assign-menu-form.vue';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [AssignDataPermissionFormModel, assignDataPermissionFormApi] =
+  useVbenModal({
+    connectedComponent: AssignDataPermissionForm,
+    destroyOnClose: true,
+  });
+
+const [AssignMenuFormModel, assignMenuFormApi] = useVbenModal({
+  connectedComponent: AssignMenuForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportRole(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '角色.xls', source: data });
+}
+
+/** 创建角色 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑角色 */
+function handleEdit(row: SystemRoleApi.Role) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除角色 */
+async function handleDelete(row: SystemRoleApi.Role) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteRole(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除角色 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteRoleList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemRoleApi.Role[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 分配角色的数据权限 */
+function handleAssignDataPermission(row: SystemRoleApi.Role) {
+  assignDataPermissionFormApi.setData(row).open();
+}
+
+/** 分配角色的菜单权限 */
+function handleAssignMenu(row: SystemRoleApi.Role) {
+  assignMenuFormApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getRolePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemRoleApi.Role>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="功能权限"
+        url="https://doc.iocoder.cn/resource-permission"
+      />
+      <DocAlert title="数据权限" url="https://doc.iocoder.cn/data-permission" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <AssignDataPermissionFormModel @success="handleRefresh" />
+    <AssignMenuFormModel @success="handleRefresh" />
+    <Grid table-title="角色列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['角色']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:role:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:role:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:role:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:role:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:role:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '数据权限',
+              variant: 'text',
+              auth: ['system:permission:assign-role-data-scope'],
+              onClick: handleAssignDataPermission.bind(null, row),
+            },
+            {
+              label: '菜单权限',
+              variant: 'text',
+              auth: ['system:permission:assign-role-menu'],
+              onClick: handleAssignMenu.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/role/modules/assign-data-permission-form.vue b/apps/web-tdesign/src/views/system/role/modules/assign-data-permission-form.vue
new file mode 100644
index 000000000..8d821eb8b
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/role/modules/assign-data-permission-form.vue
@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemRoleApi } from '#/api/system/role';
+
+import { ref } from 'vue';
+
+import { Tree, useVbenModal } from '@vben/common-ui';
+import { SystemDataScopeEnum } from '@vben/constants';
+import { handleTree } from '@vben/utils';
+
+import { Checkbox } from 'tdesign-vue-next';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { getDeptList } from '#/api/system/dept';
+import { assignRoleDataScope } from '#/api/system/permission';
+import { getRole } from '#/api/system/role';
+import { $t } from '#/locales';
+
+import { useAssignDataPermissionFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const deptTree = ref<SystemDeptApi.Dept[]>([]); // 部门树
+const deptLoading = ref(false); // 加载部门列表
+const isAllSelected = ref(false); // 全选状态
+const isExpanded = ref(false); // 展开状态
+const isCheckStrictly = ref(true); // 父子联动状态
+const expandedKeys = ref<number[]>([]); // 展开的节点
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useAssignDataPermissionFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    const data = await formApi.getValues();
+    try {
+      await assignRoleDataScope({
+        roleId: data.id,
+        dataScope: data.dataScope,
+        dataScopeDeptIds:
+          data.dataScope === SystemDataScopeEnum.DEPT_CUSTOM
+            ? data.dataScopeDeptIds
+            : undefined,
+      });
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    const data = modalApi.getData<SystemRoleApi.Role>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      // 加载部门列表
+      await loadDeptTree();
+      handleExpandAll();
+      // 设置表单值，一定要在加载树之后
+      await formApi.setValues(await getRole(data.id));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 加载部门树 */
+async function loadDeptTree() {
+  deptLoading.value = true;
+  try {
+    const data = await getDeptList();
+    deptTree.value = handleTree(data) as SystemDeptApi.Dept[];
+  } finally {
+    deptLoading.value = false;
+  }
+}
+
+/** 全选/全不选 */
+function handleSelectAll() {
+  isAllSelected.value = !isAllSelected.value;
+  if (isAllSelected.value) {
+    const allIds = getAllNodeIds(deptTree.value);
+    formApi.setFieldValue('dataScopeDeptIds', allIds);
+  } else {
+    formApi.setFieldValue('dataScopeDeptIds', []);
+  }
+}
+
+/** 展开/折叠所有节点 */
+function handleExpandAll() {
+  isExpanded.value = !isExpanded.value;
+  expandedKeys.value = isExpanded.value ? getAllNodeIds(deptTree.value) : [];
+}
+
+/** 切换父子联动 */
+function handleCheckStrictly() {
+  isCheckStrictly.value = !isCheckStrictly.value;
+}
+
+/** 递归获取所有节点 ID */
+function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
+  nodes.forEach((node: any) => {
+    ids.push(node.id);
+    if (node.children && node.children.length > 0) {
+      getAllNodeIds(node.children, ids);
+    }
+  });
+  return ids;
+}
+</script>
+
+<template>
+  <Modal title="数据权限" class="w-2/5">
+    <Form class="mx-4">
+      <template #dataScopeDeptIds="slotProps">
+        <Spin :spinning="deptLoading" wrapper-class-name="w-full">
+          <Tree
+            :tree-data="deptTree"
+            multiple
+            bordered
+            :default-expanded-keys="expandedKeys"
+            v-bind="slotProps"
+            :check-strictly="!isCheckStrictly"
+            value-field="id"
+            label-field="name"
+          />
+        </Spin>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Checkbox :checked="isAllSelected" @change="handleSelectAll">
+          全选
+        </Checkbox>
+        <Checkbox :checked="isExpanded" @change="handleExpandAll">
+          全部展开
+        </Checkbox>
+        <Checkbox :checked="isCheckStrictly" @change="handleCheckStrictly">
+          父子联动
+        </Checkbox>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/role/modules/assign-menu-form.vue b/apps/web-tdesign/src/views/system/role/modules/assign-menu-form.vue
new file mode 100644
index 000000000..62944edbd
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/role/modules/assign-menu-form.vue
@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import type { SystemMenuApi } from '#/api/system/menu';
+import type { SystemRoleApi } from '#/api/system/role';
+
+import { nextTick, ref } from 'vue';
+
+import { Tree, useVbenModal } from '@vben/common-ui';
+import { SystemMenuTypeEnum } from '@vben/constants';
+import { handleTree } from '@vben/utils';
+
+import { Checkbox } from 'tdesign-vue-next';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { getSimpleMenusList } from '#/api/system/menu';
+import { assignRoleMenu, getRoleMenuList } from '#/api/system/permission';
+import { $t } from '#/locales';
+
+import { useAssignMenuFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const menuTree = ref<SystemMenuApi.Menu[]>([]); // 菜单树
+const menuLoading = ref(false); // 加载菜单列表
+const isAllSelected = ref(false); // 全选状态
+const isExpanded = ref(false); // 展开状态
+const expandedKeys = ref<number[]>([]); // 展开的节点
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useAssignMenuFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await assignRoleMenu({
+        roleId: data.id,
+        menuIds: data.menuIds,
+      });
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载菜单列表
+    await loadMenuTree();
+    const data = modalApi.getData<SystemRoleApi.Role>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      // 加载角色菜单
+      const menuIds = await getRoleMenuList(data.id);
+      await formApi.setFieldValue('menuIds', menuIds);
+
+      await formApi.setValues(data);
+    } finally {
+      await nextTick(); // 菜单过多，渲染较慢，需要等下一次事件循环
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 加载菜单树 */
+async function loadMenuTree() {
+  menuLoading.value = true;
+  try {
+    const data = await getSimpleMenusList();
+    menuTree.value = handleTree(data) as SystemMenuApi.Menu[];
+  } finally {
+    menuLoading.value = false;
+  }
+}
+
+/** 全选/全不选 */
+function handleSelectAll() {
+  isAllSelected.value = !isAllSelected.value;
+  if (isAllSelected.value) {
+    const allIds = getAllNodeIds(menuTree.value);
+    formApi.setFieldValue('menuIds', allIds);
+  } else {
+    formApi.setFieldValue('menuIds', []);
+  }
+}
+
+/** 展开/折叠所有节点 */
+function handleExpandAll() {
+  isExpanded.value = !isExpanded.value;
+  expandedKeys.value = isExpanded.value ? getAllNodeIds(menuTree.value) : [];
+}
+
+/** 递归获取所有节点 ID */
+function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
+  nodes.forEach((node: any) => {
+    ids.push(node.id);
+    if (node.children && node.children.length > 0) {
+      getAllNodeIds(node.children, ids);
+    }
+  });
+  return ids;
+}
+
+function getNodeClass(node: Recordable<any>) {
+  const classes: string[] = [];
+  if (node.value?.type === SystemMenuTypeEnum.BUTTON) {
+    classes.push('inline-flex');
+    if (node.index % 3 >= 1) {
+      classes.push('!pl-0');
+    }
+  }
+
+  return classes.join(' ');
+}
+</script>
+
+<template>
+  <Modal title="菜单权限" class="w-2/5">
+    <Form class="mx-4">
+      <template #menuIds="slotProps">
+        <Spin :spinning="menuLoading" wrapper-class-name="w-full">
+          <Tree
+            :tree-data="menuTree"
+            multiple
+            bordered
+            :default-expanded-keys="expandedKeys"
+            :get-node-class="getNodeClass"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="name"
+          />
+        </Spin>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Checkbox :checked="isAllSelected" @change="handleSelectAll">
+          全选
+        </Checkbox>
+        <Checkbox :checked="isExpanded" @change="handleExpandAll">
+          全部展开
+        </Checkbox>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/role/modules/form.vue b/apps/web-tdesign/src/views/system/role/modules/form.vue
new file mode 100644
index 000000000..18090cfe9
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/role/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { SystemRoleApi } from '#/api/system/role';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createRole, getRole, updateRole } from '#/api/system/role';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemRoleApi.Role>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['角色'])
+    : $t('ui.actionTitle.create', ['角色']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemRoleApi.Role;
+    try {
+      await (formData.value?.id ? updateRole(data) : createRole(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemRoleApi.Role>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getRole(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/channel/data.ts b/apps/web-tdesign/src/views/system/sms/channel/data.ts
new file mode 100644
index 000000000..3320291c2
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/channel/data.ts
@@ -0,0 +1,195 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'signature',
+      label: '短信签名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信签名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '渠道编码',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, 'string'),
+        placeholder: '请选择短信渠道',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '启用状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+    {
+      fieldName: 'apiKey',
+      label: '短信 API 的账号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信 API 的账号',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'apiSecret',
+      label: '短信 API 的密钥',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信 API 的密钥',
+      },
+    },
+    {
+      fieldName: 'callbackUrl',
+      label: '短信发送回调 URL',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信发送回调 URL',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'signature',
+      label: '短信签名',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入短信签名',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '渠道编码',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, 'string'),
+        placeholder: '请选择短信渠道',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'signature',
+      title: '短信签名',
+      minWidth: 120,
+    },
+    {
+      field: 'code',
+      title: '渠道编码',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'status',
+      title: '启用状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'apiKey',
+      title: '短信 API 的账号',
+      minWidth: 180,
+    },
+    {
+      field: 'apiSecret',
+      title: '短信 API 的密钥',
+      minWidth: 180,
+    },
+    {
+      field: 'callbackUrl',
+      title: '短信发送回调 URL',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/sms/channel/index.vue b/apps/web-tdesign/src/views/system/sms/channel/index.vue
new file mode 100644
index 000000000..0a07e13f9
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/channel/index.vue
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSmsChannel,
+  deleteSmsChannelList,
+  getSmsChannelPage,
+} from '#/api/system/sms/channel';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建短信渠道 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑短信渠道 */
+function handleEdit(row: SystemSmsChannelApi.SmsChannel) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除短信渠道 */
+async function handleDelete(row: SystemSmsChannelApi.SmsChannel) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.signature]),
+    duration: 0,
+  });
+  try {
+    await deleteSmsChannel(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.signature]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除短信渠道 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteSmsChannelList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemSmsChannelApi.SmsChannel[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSmsChannelPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemSmsChannelApi.SmsChannel>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="短信配置" url="https://doc.iocoder.cn/sms/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="短信渠道列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['短信渠道']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:sms-channel:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:sms-channel:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:sms-channel:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:sms-channel:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.signature]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/channel/modules/form.vue b/apps/web-tdesign/src/views/system/sms/channel/modules/form.vue
new file mode 100644
index 000000000..86517bb80
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/channel/modules/form.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { SystemSmsChannelApi } from '#/api/system/sms/channel';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createSmsChannel,
+  getSmsChannel,
+  updateSmsChannel,
+} from '#/api/system/sms/channel';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemSmsChannelApi.SmsChannel>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['短信渠道'])
+    : $t('ui.actionTitle.create', ['短信渠道']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemSmsChannelApi.SmsChannel;
+    try {
+      await (formData.value?.id
+        ? updateSmsChannel(data)
+        : createSmsChannel(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemSmsChannelApi.SmsChannel>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSmsChannel(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/log/data.ts b/apps/web-tdesign/src/views/system/sms/log/data.ts
new file mode 100644
index 000000000..3babce416
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/log/data.ts
@@ -0,0 +1,265 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+import { getSimpleSmsChannelList } from '#/api/system/sms/channel';
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'mobile',
+      label: '手机号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入手机号',
+      },
+    },
+    {
+      fieldName: 'channelId',
+      label: '短信渠道',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleSmsChannelList,
+        labelField: 'signature',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择短信渠道',
+      },
+    },
+    {
+      fieldName: 'templateId',
+      label: '模板编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编号',
+      },
+    },
+    {
+      fieldName: 'sendStatus',
+      label: '发送状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SMS_SEND_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择发送状态',
+      },
+    },
+    {
+      fieldName: 'sendTime',
+      label: '发送时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'receiveStatus',
+      label: '接收状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择接收状态',
+      },
+    },
+    {
+      fieldName: 'receiveTime',
+      label: '接收时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'mobile',
+      title: '手机号',
+      minWidth: 120,
+    },
+    {
+      field: 'templateContent',
+      title: '短信内容',
+      minWidth: 300,
+    },
+    {
+      field: 'sendStatus',
+      title: '发送状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS },
+      },
+    },
+    {
+      field: 'sendTime',
+      title: '发送时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'receiveStatus',
+      title: '接收状态',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS },
+      },
+    },
+    {
+      field: 'receiveTime',
+      title: '接收时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'channelCode',
+      title: '短信渠道',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'templateId',
+      title: '模板编号',
+      minWidth: 100,
+    },
+    {
+      field: 'templateType',
+      title: '短信类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'mobile',
+      label: '手机号',
+    },
+    {
+      field: 'channelCode',
+      label: '短信渠道',
+    },
+    {
+      field: 'templateId',
+      label: '模板编号',
+    },
+    {
+      field: 'templateType',
+      label: '模板类型',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'templateContent',
+      label: '短信内容',
+    },
+    {
+      field: 'sendStatus',
+      label: '发送状态',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'sendTime',
+      label: '发送时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'apiSendCode',
+      label: 'API 发送编码',
+    },
+    {
+      field: 'apiSendMsg',
+      label: 'API 发送消息',
+    },
+    {
+      field: 'receiveStatus',
+      label: '接收状态',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'receiveTime',
+      label: '接收时间',
+      render: (val) => formatDateTime(val) as string,
+    },
+    {
+      field: 'apiReceiveCode',
+      label: 'API 接收编码',
+    },
+    {
+      field: 'apiReceiveMsg',
+      label: 'API 接收消息',
+      span: 2,
+    },
+    {
+      field: 'apiRequestId',
+      label: 'API 请求 ID',
+    },
+    {
+      field: 'apiSerialNo',
+      label: 'API 序列号',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/sms/log/index.vue b/apps/web-tdesign/src/views/system/sms/log/index.vue
new file mode 100644
index 000000000..50321510e
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/log/index.vue
@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemSmsLogApi } from '#/api/system/sms/log';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { exportSmsLog, getSmsLogPage } from '#/api/system/sms/log';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportSmsLog(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '短信日志.xls', source: data });
+}
+
+/** 查看短信日志详情 */
+function handleDetail(row: SystemSmsLogApi.SmsLog) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSmsLogPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemSmsLogApi.SmsLog>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="短信配置" url="https://doc.iocoder.cn/sms/" />
+    </template>
+
+    <DetailModal @success="handleRefresh" />
+    <Grid table-title="短信日志列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:sms-log:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:sms-log:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/log/modules/detail.vue b/apps/web-tdesign/src/views/system/sms/log/modules/detail.vue
new file mode 100644
index 000000000..2831f6ff5
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/log/modules/detail.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { SystemSmsLogApi } from '#/api/system/sms/log';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemSmsLogApi.SmsLog>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 2,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemSmsLogApi.SmsLog>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = data;
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="短信日志详情"
+    class="w-[1280px]"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/template/data.ts b/apps/web-tdesign/src/views/system/sms/template/data.ts
new file mode 100644
index 000000000..13786c56a
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/template/data.ts
@@ -0,0 +1,274 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getSimpleSmsChannelList } from '#/api/system/sms/channel';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '短信类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, 'number'),
+        placeholder: '请选择短信类型',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入模板编码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'channelId',
+      label: '短信渠道',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleSmsChannelList,
+        labelField: 'signature',
+        valueField: 'id',
+        placeholder: '请选择短信渠道',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入模板内容',
+        rows: 4,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'apiTemplateId',
+      label: '短信 API 的模板编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入短信 API 的模板编号',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'type',
+      label: '短信类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, 'number'),
+        allowClear: true,
+        placeholder: '请选择短信类型',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '开启状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择开启状态',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '模板编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '模板名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入模板名称',
+      },
+    },
+    {
+      fieldName: 'channelId',
+      label: '短信渠道',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleSmsChannelList,
+        labelField: 'signature',
+        valueField: 'id',
+        allowClear: true,
+        placeholder: '请选择短信渠道',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 发送短信表单 */
+export function useSendSmsFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'content',
+      label: '模板内容',
+      component: 'Textarea',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'templateParams',
+      label: '模板参数',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'type',
+      title: '短信类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE },
+      },
+    },
+    {
+      field: 'name',
+      title: '模板名称',
+      minWidth: 120,
+    },
+    {
+      field: 'code',
+      title: '模板编码',
+      minWidth: 120,
+    },
+    {
+      field: 'content',
+      title: '模板内容',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '开启状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'apiTemplateId',
+      title: '短信 API 的模板编号',
+      minWidth: 180,
+    },
+    {
+      field: 'channelCode',
+      title: '短信渠道',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 120,
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/sms/template/index.vue b/apps/web-tdesign/src/views/system/sms/template/index.vue
new file mode 100644
index 000000000..cd35acdd7
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/template/index.vue
@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSmsTemplate,
+  deleteSmsTemplateList,
+  exportSmsTemplate,
+  getSmsTemplatePage,
+} from '#/api/system/sms/template';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import SendForm from './modules/send-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [SendModal, sendModalApi] = useVbenModal({
+  connectedComponent: SendForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportSmsTemplate(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '短信模板.xls', source: data });
+}
+
+/** 创建短信模板 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑短信模板 */
+function handleEdit(row: SystemSmsTemplateApi.SmsTemplate) {
+  formModalApi.setData(row).open();
+}
+
+/** 发送测试短信 */
+function handleSend(row: SystemSmsTemplateApi.SmsTemplate) {
+  sendModalApi.setData(row).open();
+}
+
+/** 删除短信模板 */
+async function handleDelete(row: SystemSmsTemplateApi.SmsTemplate) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteSmsTemplate(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除短信模板 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteSmsTemplateList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemSmsTemplateApi.SmsTemplate[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSmsTemplatePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemSmsTemplateApi.SmsTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="短信配置" url="https://doc.iocoder.cn/sms/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <SendModal />
+    <Grid table-title="短信模板列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['短信模板']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:sms-template:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:sms-template:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:sms-template:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:sms-template:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '测试',
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:sms-template:send-sms'],
+              onClick: handleSend.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:sms-template:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/template/modules/form.vue b/apps/web-tdesign/src/views/system/sms/template/modules/form.vue
new file mode 100644
index 000000000..ed7483f36
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/template/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createSmsTemplate,
+  getSmsTemplate,
+  updateSmsTemplate,
+} from '#/api/system/sms/template';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemSmsTemplateApi.SmsTemplate>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['短信模板'])
+    : $t('ui.actionTitle.create', ['短信模板']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemSmsTemplateApi.SmsTemplate;
+    try {
+      await (formData.value?.id
+        ? updateSmsTemplate(data)
+        : createSmsTemplate(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplate>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSmsTemplate(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/sms/template/modules/send-form.vue b/apps/web-tdesign/src/views/system/sms/template/modules/send-form.vue
new file mode 100644
index 000000000..13ab53c21
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/sms/template/modules/send-form.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { sendSms } from '#/api/system/sms/template';
+
+import { useSendSmsFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemSmsTemplateApi.SmsTemplate>();
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 构建发送请求
+    const values = await formApi.getValues();
+    const paramsObj: Record<string, string> = {};
+    if (formData.value?.params) {
+      formData.value.params.forEach((param) => {
+        paramsObj[param] = values[`param_${param}`];
+      });
+    }
+    const data: SystemSmsTemplateApi.SmsSendReqVO = {
+      mobile: values.mobile,
+      templateCode: formData.value?.code || '',
+      templateParams: paramsObj,
+    };
+
+    // 提交表单
+    try {
+      await sendSms(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success('短信发送成功');
+    } catch (error) {
+      console.error('发送短信失败', error);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 获取数据
+    const data = modalApi.getData<SystemSmsTemplateApi.SmsTemplate>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+    // 更新 form schema
+    const schema = buildFormSchema();
+    formApi.setState({ schema });
+    // 设置到 values
+    await formApi.setValues({
+      content: data.content,
+    });
+  },
+});
+
+/** 动态构建表单 schema */
+function buildFormSchema() {
+  const schema = useSendSmsFormSchema();
+  if (formData.value?.params) {
+    formData.value.params.forEach((param) => {
+      schema.push({
+        fieldName: `param_${param}`,
+        label: `参数 ${param}`,
+        component: 'Input',
+        componentProps: {
+          placeholder: `请输入参数 ${param}`,
+        },
+        rules: 'required',
+      });
+    });
+  }
+  return schema;
+}
+</script>
+
+<template>
+  <Modal class="w-1/3" title="发送短信">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/social/client/data.ts b/apps/web-tdesign/src/views/system/social/client/data.ts
new file mode 100644
index 000000000..bbcd3c18b
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/social/client/data.ts
@@ -0,0 +1,211 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  SystemUserSocialTypeEnum,
+} from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应用名',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'socialType',
+      label: '社交平台',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE, 'number'),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户端编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户端编号，对应各平台的 appKey',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'clientSecret',
+      label: '客户端密钥',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户端密钥，对应各平台的 appSecret',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'agentId',
+      label: 'agentId',
+      component: 'Input',
+      componentProps: {
+        placeholder: '授权方的网页应用 ID，有则填',
+      },
+      dependencies: {
+        triggerFields: ['socialType'],
+        show: (values) =>
+          values.socialType === SystemUserSocialTypeEnum.WECHAT_ENTERPRISE.type,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '应用名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入应用名',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'socialType',
+      label: '社交平台',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE, 'number'),
+        placeholder: '请选择社交平台',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+        placeholder: '请选择用户类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'clientId',
+      label: '客户端编号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户端编号',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '应用名',
+      minWidth: 120,
+    },
+    {
+      field: 'socialType',
+      title: '社交平台',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SOCIAL_TYPE },
+      },
+    },
+    {
+      field: 'userType',
+      title: '用户类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.USER_TYPE },
+      },
+    },
+    {
+      field: 'clientId',
+      title: '客户端编号',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/social/client/index.vue b/apps/web-tdesign/src/views/system/social/client/index.vue
new file mode 100644
index 000000000..796f2cc36
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/social/client/index.vue
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemSocialClientApi } from '#/api/system/social/client';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSocialClient,
+  deleteSocialClientList,
+  getSocialClientPage,
+} from '#/api/system/social/client';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建社交客户端 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑社交客户端 */
+function handleEdit(row: SystemSocialClientApi.SocialClient) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除社交客户端 */
+async function handleDelete(row: SystemSocialClientApi.SocialClient) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteSocialClient(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除社交客户端 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteSocialClientList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemSocialClientApi.SocialClient[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSocialClientPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemSocialClientApi.SocialClient>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="三方登录" url="https://doc.iocoder.cn/social-user/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="社交客户端列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['社交客户端']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:social-client:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:social-client:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:social-client:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:social-client:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/social/client/modules/form.vue b/apps/web-tdesign/src/views/system/social/client/modules/form.vue
new file mode 100644
index 000000000..2b390b628
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/social/client/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { SystemSocialClientApi } from '#/api/system/social/client';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import {
+  createSocialClient,
+  getSocialClient,
+  updateSocialClient,
+} from '#/api/system/social/client';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemSocialClientApi.SocialClient>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['社交客户端'])
+    : $t('ui.actionTitle.create', ['社交客户端']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemSocialClientApi.SocialClient;
+    try {
+      await (formData.value?.id
+        ? updateSocialClient(data)
+        : createSocialClient(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemSocialClientApi.SocialClient>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSocialClient(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/social/user/data.ts b/apps/web-tdesign/src/views/system/social/user/data.ts
new file mode 100644
index 000000000..afc0b537b
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/social/user/data.ts
@@ -0,0 +1,152 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Image } from 'tdesign-vue-next';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'type',
+      label: '社交平台',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE, 'number'),
+        placeholder: '请选择社交平台',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '用户昵称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户昵称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'openid',
+      label: '社交 openid',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入社交 openid',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'type',
+      title: '社交平台',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_SOCIAL_TYPE },
+      },
+    },
+    {
+      field: 'openid',
+      title: '社交 openid',
+      minWidth: 180,
+    },
+    {
+      field: 'nickname',
+      title: '用户昵称',
+      minWidth: 120,
+    },
+    {
+      field: 'avatar',
+      title: '用户头像',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情页的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'type',
+      label: '社交平台',
+      render: (val) => {
+        return h(DictTag, {
+          type: DICT_TYPE.SYSTEM_SOCIAL_TYPE,
+          value: val,
+        });
+      },
+    },
+    {
+      field: 'nickname',
+      label: '用户昵称',
+    },
+    {
+      field: 'avatar',
+      label: '用户头像',
+      render: (val) => (val ? h(Image, { src: val }) : '无'),
+    },
+    {
+      field: 'token',
+      label: '社交 token',
+    },
+    {
+      field: 'rawTokenInfo',
+      label: '原始 Token 数据',
+    },
+    {
+      field: 'rawUserInfo',
+      label: '原始 User 数据',
+    },
+    {
+      field: 'code',
+      label: '最后一次的认证 code',
+    },
+    {
+      field: 'state',
+      label: '最后一次的认证 state',
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/social/user/index.vue b/apps/web-tdesign/src/views/system/social/user/index.vue
new file mode 100644
index 000000000..0a4389589
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/social/user/index.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemSocialUserApi } from '#/api/system/social/user';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSocialUserPage } from '#/api/system/social/user';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 查看详情 */
+function handleDetail(row: SystemSocialUserApi.SocialUser) {
+  detailModalApi.setData(row).open();
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getSocialUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemSocialUserApi.SocialUser>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="三方登录" url="https://doc.iocoder.cn/social-user/" />
+    </template>
+
+    <DetailModal />
+    <Grid table-title="社交用户列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              variant: 'text',
+              icon: ACTION_ICON.VIEW,
+              auth: ['system:social-user:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/social/user/modules/detail.vue b/apps/web-tdesign/src/views/system/social/user/modules/detail.vue
new file mode 100644
index 000000000..de2b35cbf
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/social/user/modules/detail.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { SystemSocialUserApi } from '#/api/system/social/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getSocialUser } from '#/api/system/social/user';
+import { useDescription } from '#/components/description';
+import { $t } from '#/locales';
+
+import { useDetailSchema } from '../data';
+
+const formData = ref<SystemSocialUserApi.SocialUser>();
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  title: $t('ui.actionTitle.detail'),
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getSocialUser(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="社交用户详情"
+    class="w-1/2"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Descriptions :data="formData" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/tenant/data.ts b/apps/web-tdesign/src/views/system/tenant/data.ts
new file mode 100644
index 000000000..d2a7dbf70
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/tenant/data.ts
@@ -0,0 +1,242 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getTenantPackageList } from '#/api/system/tenant-package';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 关联数据 */
+let tenantPackageList: SystemTenantPackageApi.TenantPackage[] = [];
+getTenantPackageList().then((data) => (tenantPackageList = data));
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '租户名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'packageId',
+      label: '租户套餐',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getTenantPackageList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择租户套餐',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'contactName',
+      label: '联系人',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'contactMobile',
+      label: '联系手机',
+      component: 'Input',
+      rules: 'mobile',
+    },
+    {
+      label: '用户名称',
+      fieldName: 'username',
+      component: 'Input',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
+    },
+    {
+      label: '用户密码',
+      fieldName: 'password',
+      component: 'InputPassword',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
+    },
+    {
+      label: '账号额度',
+      fieldName: 'accountCount',
+      component: 'InputNumber',
+      rules: 'required',
+    },
+    {
+      label: '过期时间',
+      fieldName: 'expireTime',
+      component: 'DatePicker',
+      componentProps: {
+        format: 'YYYY-MM-DD',
+        valueFormat: 'x',
+        placeholder: '请选择过期时间',
+      },
+      rules: 'required',
+    },
+    {
+      label: '绑定域名',
+      fieldName: 'websites',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请输入绑定域名',
+        mode: 'tags',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '租户状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '租户名',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入租户名',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'contactName',
+      label: '联系人',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'contactMobile',
+      label: '联系手机',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系手机',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择状态',
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '租户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '租户名',
+      minWidth: 180,
+    },
+    {
+      field: 'packageId',
+      title: '租户套餐',
+      minWidth: 180,
+      formatter: ({ cellValue }) => {
+        return cellValue === 0
+          ? '系统租户'
+          : tenantPackageList.find((pkg) => pkg.id === cellValue)?.name || '-';
+      },
+    },
+    {
+      field: 'contactName',
+      title: '联系人',
+      minWidth: 100,
+    },
+    {
+      field: 'contactMobile',
+      title: '联系手机',
+      minWidth: 180,
+    },
+    {
+      field: 'accountCount',
+      title: '账号额度',
+      minWidth: 100,
+    },
+    {
+      field: 'expireTime',
+      title: '过期时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'websites',
+      title: '绑定域名',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '租户状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/tenant/index.vue b/apps/web-tdesign/src/views/system/tenant/index.vue
new file mode 100644
index 000000000..51c89ecc7
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/tenant/index.vue
@@ -0,0 +1,186 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemTenantApi } from '#/api/system/tenant';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteTenant,
+  deleteTenantList,
+  exportTenant,
+  getTenantPage,
+} from '#/api/system/tenant';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportTenant(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '租户.xls', source: data });
+}
+
+/** 创建租户 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑租户 */
+function handleEdit(row: SystemTenantApi.Tenant) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除租户 */
+async function handleDelete(row: SystemTenantApi.Tenant) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteTenant(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除租户 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteTenantList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemTenantApi.Tenant[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTenantPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemTenantApi.Tenant>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="SaaS 多租户" url="https://doc.iocoder.cn/saas-tenant/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="租户列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['租户']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:tenant:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['system:tenant:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              auth: ['system:tenant:delete'],
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:tenant:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:tenant:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/tenant/modules/form.vue b/apps/web-tdesign/src/views/system/tenant/modules/form.vue
new file mode 100644
index 000000000..af423bb69
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/tenant/modules/form.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { SystemTenantApi } from '#/api/system/tenant';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createTenant, getTenant, updateTenant } from '#/api/system/tenant';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemTenantApi.Tenant>();
+const getTitle = computed(() => {
+  return formData.value
+    ? $t('ui.actionTitle.edit', ['租户'])
+    : $t('ui.actionTitle.create', ['租户']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  wrapperClass: 'grid-cols-1',
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemTenantApi.Tenant;
+    try {
+      await (formData.value ? updateTenant(data) : createTenant(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemTenantApi.Tenant>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTenant(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/tenantPackage/data.ts b/apps/web-tdesign/src/views/system/tenantPackage/data.ts
new file mode 100644
index 000000000..7ac4e2899
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/tenantPackage/data.ts
@@ -0,0 +1,127 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '套餐名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'menuIds',
+      label: '菜单权限',
+      component: 'Input',
+      formItemClass: 'items-start',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '套餐名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入套餐名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        allowClear: true,
+        placeholder: '请选择状态',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '套餐编号',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '套餐名称',
+      minWidth: 180,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/tenantPackage/index.vue b/apps/web-tdesign/src/views/system/tenantPackage/index.vue
new file mode 100644
index 000000000..7299c4f5c
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/tenantPackage/index.vue
@@ -0,0 +1,173 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteTenantPackage,
+  deleteTenantPackageList,
+  getTenantPackagePage,
+} from '#/api/system/tenant-package';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建租户套餐 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑租户套餐 */
+function handleEdit(row: SystemTenantPackageApi.TenantPackage) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除租户套餐 */
+async function handleDelete(row: SystemTenantPackageApi.TenantPackage) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteTenantPackage(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除租户套餐 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteTenantPackageList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemTenantPackageApi.TenantPackage[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getTenantPackagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemTenantPackageApi.TenantPackage>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="SaaS 多租户" url="https://doc.iocoder.cn/saas-tenant/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="租户套餐列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['套餐']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['system:tenant-package:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:tenant-package:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              variant: 'text',
+              icon: ACTION_ICON.EDIT,
+              auth: ['system:tenant-package:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              variant: 'text',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['system:tenant-package:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/tenantPackage/modules/form.vue b/apps/web-tdesign/src/views/system/tenantPackage/modules/form.vue
new file mode 100644
index 000000000..f77848362
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/tenantPackage/modules/form.vue
@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { SystemMenuApi } from '#/api/system/menu';
+import type { SystemTenantPackageApi } from '#/api/system/tenant-package';
+
+import { computed, ref } from 'vue';
+
+import { Tree, useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { Checkbox } from 'tdesign-vue-next';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { getMenuList } from '#/api/system/menu';
+import {
+  createTenantPackage,
+  getTenantPackage,
+  updateTenantPackage,
+} from '#/api/system/tenant-package';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemTenantPackageApi.TenantPackage>();
+const getTitle = computed(() => {
+  return formData.value
+    ? $t('ui.actionTitle.edit', ['套餐'])
+    : $t('ui.actionTitle.create', ['套餐']);
+});
+const menuTree = ref<SystemMenuApi.Menu[]>([]); // 菜单树
+const menuLoading = ref(false); // 加载菜单列表
+const isAllSelected = ref(false); // 全选状态
+const isExpanded = ref(false); // 展开状态
+const expandedKeys = ref<number[]>([]); // 展开的节点
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as SystemTenantPackageApi.TenantPackage;
+    try {
+      await (formData.value
+        ? updateTenantPackage(data)
+        : createTenantPackage(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载菜单列表
+    await loadMenuTree();
+    // 加载数据
+    const data = modalApi.getData<SystemTenantPackageApi.TenantPackage>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getTenantPackage(data.id);
+      await formApi.setValues(data);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 加载菜单树 */
+async function loadMenuTree() {
+  menuLoading.value = true;
+  try {
+    const data = await getMenuList();
+    menuTree.value = handleTree(data) as SystemMenuApi.Menu[];
+  } finally {
+    menuLoading.value = false;
+  }
+}
+
+/** 全选/全不选 */
+function handleSelectAll() {
+  isAllSelected.value = !isAllSelected.value;
+  if (isAllSelected.value) {
+    const allIds = getAllNodeIds(menuTree.value);
+    formApi.setFieldValue('menuIds', allIds);
+  } else {
+    formApi.setFieldValue('menuIds', []);
+  }
+}
+
+/** 展开/折叠所有节点 */
+function handleExpandAll() {
+  isExpanded.value = !isExpanded.value;
+  expandedKeys.value = isExpanded.value ? getAllNodeIds(menuTree.value) : [];
+}
+
+/** 递归获取所有节点 ID */
+function getAllNodeIds(nodes: any[], ids: number[] = []): number[] {
+  nodes.forEach((node: any) => {
+    ids.push(node.id);
+    if (node.children && node.children.length > 0) {
+      getAllNodeIds(node.children, ids);
+    }
+  });
+  return ids;
+}
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form class="mx-6">
+      <template #menuIds="slotProps">
+        <Spin :spinning="menuLoading" wrapper-class-name="w-full">
+          <Tree
+            class="max-h-96 overflow-y-auto"
+            :tree-data="menuTree"
+            multiple
+            bordered
+            :default-expanded-keys="expandedKeys"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="name"
+          />
+        </Spin>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Checkbox :checked="isAllSelected" @change="handleSelectAll">
+          全选
+        </Checkbox>
+        <Checkbox :checked="isExpanded" @change="handleExpandAll">
+          全部展开
+        </Checkbox>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/user/data.ts b/apps/web-tdesign/src/views/system/user/data.ts
new file mode 100644
index 000000000..fca5ddefd
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/data.ts
@@ -0,0 +1,344 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { $t } from '@vben/locales';
+import { handleTree } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getDeptList } from '#/api/system/dept';
+import { getSimplePostList } from '#/api/system/post';
+import { getSimpleRoleList } from '#/api/system/role';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      label: '用户密码',
+      fieldName: 'password',
+      component: 'InputPassword',
+      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '用户昵称',
+      component: 'Input',
+      rules: 'required',
+    },
+    {
+      fieldName: 'deptId',
+      label: '归属部门',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        api: async () => {
+          const data = await getDeptList();
+          return handleTree(data);
+        },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
+        placeholder: '请选择归属部门',
+        treeDefaultExpandAll: true,
+      },
+    },
+    {
+      fieldName: 'postIds',
+      label: '岗位',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimplePostList,
+        labelField: 'name',
+        valueField: 'id',
+        mode: 'multiple',
+        placeholder: '请选择岗位',
+      },
+    },
+    {
+      fieldName: 'email',
+      label: '邮箱',
+      component: 'Input',
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+      },
+    },
+    {
+      fieldName: 'sex',
+      label: '用户性别',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'status',
+      label: '用户状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+    },
+  ];
+}
+
+/** 重置密码的表单 */
+export function useResetPasswordFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: '请输入新密码',
+      },
+      dependencies: {
+        rules(values) {
+          return z
+            .string({ message: '请输入新密码' })
+            .min(5, '密码长度不能少于 5 个字符')
+            .max(20, '密码长度不能超过 20 个字符')
+            .refine(
+              (value) => value !== values.oldPassword,
+              '新旧密码不能相同',
+            );
+        },
+        triggerFields: ['newPassword', 'oldPassword'],
+      },
+      fieldName: 'newPassword',
+      label: '新密码',
+      rules: 'required',
+    },
+    {
+      component: 'VbenInputPassword',
+      componentProps: {
+        passwordStrength: true,
+        placeholder: $t('authentication.confirmPassword'),
+      },
+      dependencies: {
+        rules(values) {
+          return z
+            .string({ message: '请输入确认密码' })
+            .min(5, '密码长度不能少于 5 个字符')
+            .max(20, '密码长度不能超过 20 个字符')
+            .refine(
+              (value) => value === values.newPassword,
+              '新密码和确认密码不一致',
+            );
+        },
+        triggerFields: ['newPassword', 'confirmPassword'],
+      },
+      fieldName: 'confirmPassword',
+      label: '确认密码',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 分配角色的表单 */
+export function useAssignRoleFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '用户昵称',
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+    },
+    {
+      fieldName: 'roleIds',
+      label: '角色',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleRoleList,
+        labelField: 'name',
+        valueField: 'id',
+        mode: 'multiple',
+        placeholder: '请选择角色',
+      },
+    },
+  ];
+}
+
+/** 用户导入的表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '用户数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的用户数据',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'username',
+      label: '用户名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号码',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: SystemUserApi.User,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'id',
+      title: '用户编号',
+      minWidth: 100,
+    },
+    {
+      field: 'username',
+      title: '用户名称',
+      minWidth: 120,
+    },
+    {
+      field: 'nickname',
+      title: '用户昵称',
+      minWidth: 120,
+    },
+    {
+      field: 'deptName',
+      title: '部门',
+      minWidth: 120,
+    },
+    {
+      field: 'mobile',
+      title: '手机号码',
+      minWidth: 120,
+    },
+    {
+      field: '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',
+    },
+    {
+      title: '操作',
+      width: 180,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-tdesign/src/views/system/user/index.vue b/apps/web-tdesign/src/views/system/user/index.vue
new file mode 100644
index 000000000..c8d8645be
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/index.vue
@@ -0,0 +1,296 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemDeptApi } from '#/api/system/dept';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { ref } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import { Card } from 'tdesign-vue-next';
+
+import { message } from '#/adapter/tdesign';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteUser,
+  deleteUserList,
+  exportUser,
+  getUserPage,
+  updateUserStatus,
+} from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import AssignRoleForm from './modules/assign-role-form.vue';
+import DeptTree from './modules/dept-tree.vue';
+import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
+import ResetPasswordForm from './modules/reset-password-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ResetPasswordModal, resetPasswordModalApi] = useVbenModal({
+  connectedComponent: ResetPasswordForm,
+  destroyOnClose: true,
+});
+
+const [AssignRoleModal, assignRoleModalApi] = useVbenModal({
+  connectedComponent: AssignRoleForm,
+  destroyOnClose: true,
+});
+
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportUser(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '用户.xls', source: data });
+}
+
+/** 选择部门 */
+const searchDeptId = ref<number | undefined>(undefined);
+async function handleDeptSelect(dept: SystemDeptApi.Dept) {
+  searchDeptId.value = dept.id;
+  handleRefresh();
+}
+
+/** 创建用户 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 导入用户 */
+function handleImport() {
+  importModalApi.open();
+}
+
+/** 编辑用户 */
+function handleEdit(row: SystemUserApi.User) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除用户 */
+async function handleDelete(row: SystemUserApi.User) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.username]),
+    duration: 0,
+  });
+  try {
+    await deleteUser(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.username]));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+/** 批量删除用户 */
+async function handleDeleteBatch() {
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deletingBatch'),
+    duration: 0,
+  });
+  try {
+    await deleteUserList(checkedIds.value);
+    checkedIds.value = [];
+    message.success($t('ui.actionMessage.deleteSuccess'));
+    handleRefresh();
+  } finally {
+    message.close(hideLoading);
+  }
+}
+
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: SystemUserApi.User[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 重置密码 */
+function handleResetPassword(row: SystemUserApi.User) {
+  resetPasswordModalApi.setData(row).open();
+}
+
+/** 分配角色 */
+function handleAssignRole(row: SystemUserApi.User) {
+  assignRoleModalApi.setData(row).open();
+}
+
+/** 更新用户状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: SystemUserApi.User,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将${row.username}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+    })
+      .then(async () => {
+        // 更新用户状态
+        await updateUserStatus(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(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            deptId: searchDeptId.value,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<SystemUserApi.User>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="用户体系" url="https://doc.iocoder.cn/user-center/" />
+      <DocAlert title="三方登陆" url="https://doc.iocoder.cn/social-user/" />
+      <DocAlert
+        title="Excel 导入导出"
+        url="https://doc.iocoder.cn/excel-import-and-export/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <ResetPasswordModal @success="handleRefresh" />
+    <AssignRoleModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />
+
+    <div class="flex h-full w-full">
+      <!-- 左侧部门树 -->
+      <Card class="mr-4 h-full w-1/6">
+        <DeptTree @select="handleDeptSelect" />
+      </Card>
+      <!-- 右侧用户列表 -->
+      <div class="w-5/6">
+        <Grid table-title="用户列表">
+          <template #toolbar-tools>
+            <TableAction
+              :actions="[
+                {
+                  label: $t('ui.actionTitle.create', ['用户']),
+                  type: 'primary',
+                  icon: ACTION_ICON.ADD,
+                  auth: ['system:user:create'],
+                  onClick: handleCreate,
+                },
+                {
+                  label: $t('ui.actionTitle.export'),
+                  type: 'primary',
+                  icon: ACTION_ICON.DOWNLOAD,
+                  auth: ['system:user:export'],
+                  onClick: handleExport,
+                },
+                {
+                  label: $t('ui.actionTitle.import', ['用户']),
+                  type: 'primary',
+                  icon: ACTION_ICON.UPLOAD,
+                  auth: ['system:user:import'],
+                  onClick: handleImport,
+                },
+                {
+                  label: $t('ui.actionTitle.deleteBatch'),
+                  type: 'danger',
+                  icon: ACTION_ICON.DELETE,
+                  disabled: isEmpty(checkedIds),
+                  auth: ['system:user:delete'],
+                  onClick: handleDeleteBatch,
+                },
+              ]"
+            />
+          </template>
+          <template #actions="{ row }">
+            <TableAction
+              :actions="[
+                {
+                  label: $t('common.edit'),
+                  variant: 'text',
+                  icon: ACTION_ICON.EDIT,
+                  auth: ['system:user:update'],
+                  onClick: handleEdit.bind(null, row),
+                },
+                {
+                  label: $t('common.delete'),
+                  variant: 'text',
+                  type: 'danger',
+                  icon: ACTION_ICON.DELETE,
+                  auth: ['system:user:delete'],
+                  popConfirm: {
+                    title: $t('ui.actionMessage.deleteConfirm', [row.username]),
+                    confirm: handleDelete.bind(null, row),
+                  },
+                },
+              ]"
+              :drop-down-actions="[
+                {
+                  label: '分配角色',
+                  variant: 'text',
+                  auth: ['system:permission:assign-user-role'],
+                  onClick: handleAssignRole.bind(null, row),
+                },
+                {
+                  label: '重置密码',
+                  variant: 'text',
+                  auth: ['system:user:update-password'],
+                  onClick: handleResetPassword.bind(null, row),
+                },
+              ]"
+            />
+          </template>
+        </Grid>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-tdesign/src/views/system/user/modules/assign-role-form.vue b/apps/web-tdesign/src/views/system/user/modules/assign-role-form.vue
new file mode 100644
index 000000000..2a1352998
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/modules/assign-role-form.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { assignUserRole, getUserRoleList } from '#/api/system/permission';
+import { $t } from '#/locales';
+
+import { useAssignRoleFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useAssignRoleFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const values = await formApi.getValues();
+    try {
+      await assignUserRole({
+        userId: values.id,
+        roleIds: values.roleIds,
+      });
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const roleIds = await getUserRoleList(data.id);
+      // 设置到 values
+      await formApi.setValues({
+        ...data,
+        roleIds,
+      });
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="分配角色">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/user/modules/dept-tree.vue b/apps/web-tdesign/src/views/system/user/modules/dept-tree.vue
new file mode 100644
index 000000000..f41ad8c2f
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/modules/dept-tree.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { SystemDeptApi } from '#/api/system/dept';
+
+import { onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import { Input, Tree } from 'tdesign-vue-next';
+
+import { getSimpleDeptList } from '#/api/system/dept';
+
+const emit = defineEmits(['select']);
+const deptList = ref<SystemDeptApi.Dept[]>([]); // 部门列表
+const deptTree = ref<any[]>([]); // 部门树
+const expandedKeys = ref<number[]>([]); // 展开的节点
+const loading = ref(false); // 加载状态
+const searchValue = ref(''); // 搜索值
+
+/** 处理搜索逻辑 */
+function handleSearch(e: any) {
+  const value = e.target.value;
+  searchValue.value = value;
+  const filteredList = value
+    ? deptList.value.filter((item) =>
+        item.name.toLowerCase().includes(value.toLowerCase()),
+      )
+    : deptList.value;
+  deptTree.value = handleTree(filteredList);
+  // 展开所有节点
+  expandedKeys.value = deptTree.value.map((node) => node.id!);
+}
+
+/** 选中部门 */
+function handleSelect(_selectedKeys: any[], info: any) {
+  emit('select', info.node.dataRef);
+}
+
+/** 初始化 */
+onMounted(async () => {
+  try {
+    loading.value = true;
+    const data = await getSimpleDeptList();
+    deptList.value = data;
+    deptTree.value = handleTree(data);
+  } catch (error) {
+    console.error('获取部门数据失败', error);
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<template>
+  <div>
+    <Input
+      placeholder="搜索部门"
+      allow-clear
+      v-model="searchValue"
+      @change="handleSearch"
+      class="w-full"
+    >
+      <template #prefix>
+        <IconifyIcon icon="lucide:search" class="size-4" />
+      </template>
+    </Input>
+    <Spin :spinning="loading" wrapper-class-name="w-full">
+      <Tree
+        @select="handleSelect"
+        v-if="deptTree.length > 0"
+        class="pt-2"
+        :tree-data="deptTree"
+        :default-expand-all="true"
+        :field-names="{ title: 'name', key: 'id', children: 'children' }"
+      />
+      <div v-else-if="!loading" class="py-4 text-center text-gray-500">
+        暂无数据
+      </div>
+    </Spin>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/system/user/modules/form.vue b/apps/web-tdesign/src/views/system/user/modules/form.vue
new file mode 100644
index 000000000..aa8ce7927
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/modules/form.vue
@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { createUser, getUser, updateUser } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<SystemUserApi.User>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['用户'])
+    : $t('ui.actionTitle.create', ['用户']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as SystemUserApi.User;
+    try {
+      await (formData.value?.id ? updateUser(data) : createUser(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUser(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/user/modules/import-form.vue b/apps/web-tdesign/src/views/system/user/modules/import-form.vue
new file mode 100644
index 000000000..7c9369e50
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/modules/import-form.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'tdesign-vue-next';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, Upload } from 'tdesign-vue-next';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { importUser, importUserTemplate } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await importUser(data.file, data.updateSupport);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: UploadFile) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function handleDownload() {
+  const data = await importUserTemplate();
+  downloadFileFromBlobPart({ fileName: '用户导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal title="导入用户" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <Upload
+            :max-count="1"
+            accept=".xls,.xlsx"
+            :before-upload="beforeUpload"
+          >
+            <Button theme="primary"> 选择 Excel 文件 </Button>
+          </Upload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="handleDownload"> 下载导入模板 </Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/src/views/system/user/modules/reset-password-form.vue b/apps/web-tdesign/src/views/system/user/modules/reset-password-form.vue
new file mode 100644
index 000000000..daada0ff5
--- /dev/null
+++ b/apps/web-tdesign/src/views/system/user/modules/reset-password-form.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { SystemUserApi } from '#/api/system/user';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { message } from '#/adapter/tdesign';
+import { resetUserPassword } from '#/api/system/user';
+import { $t } from '#/locales';
+
+import { useResetPasswordFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useResetPasswordFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await resetUserPassword(data.id, data.newPassword);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<SystemUserApi.User>();
+    if (!data || !data.id) {
+      return;
+    }
+    // 设置到 values
+    await formApi.setValues(data);
+  },
+});
+</script>
+
+<template>
+  <Modal title="重置密码">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-tdesign/vite.config.mts b/apps/web-tdesign/vite.config.mts
index b6360f1d4..71ae65bb5 100644
--- a/apps/web-tdesign/vite.config.mts
+++ b/apps/web-tdesign/vite.config.mts
@@ -6,11 +6,11 @@ export default defineConfig(async () => {
     vite: {
       server: {
         proxy: {
-          '/api': {
+          '/admin-api': {
             changeOrigin: true,
-            rewrite: (path) => path.replace(/^\/api/, ''),
+            rewrite: (path) => path.replace(/^\/admin-api/, ''),
             // mock代理目标地址
-            target: 'http://localhost:5320/api',
+            target: 'http://localhost:48080/admin-api',
             ws: true,
           },
         },
diff --git a/packages/@core/base/shared/src/utils/upload.ts b/packages/@core/base/shared/src/utils/upload.ts
index 3a349ed69..04f6421ff 100644
--- a/packages/@core/base/shared/src/utils/upload.ts
+++ b/packages/@core/base/shared/src/utils/upload.ts
@@ -65,3 +65,127 @@ export function generateAcceptedFileTypes(
 
   return [...mimeTypes, ...extensions].join(',');
 }
+
+/**
+ * 从 URL 中提取文件名
+ *
+ * @param url 文件 URL
+ * @returns 文件名，如果无法提取则返回 'unknown'
+ */
+export function getFileNameFromUrl(url: null | string | undefined): string {
+  // 处理空值
+  if (!url) {
+    return 'unknown';
+  }
+
+  try {
+    const urlObj = new URL(url);
+    const pathname = urlObj.pathname;
+    const fileName = pathname.split('/').pop() || 'unknown';
+    return decodeURIComponent(fileName);
+  } catch {
+    // 如果 URL 解析失败，尝试从字符串中提取
+    const parts = url.split('/');
+    return parts[parts.length - 1] || 'unknown';
+  }
+}
+
+/**
+ * 判断文件是否为图片
+ *
+ * @param filename 文件名
+ * @returns 是否为图片
+ */
+export function isImage(filename: null | string | undefined): boolean {
+  if (!filename) {
+    return false;
+  }
+  const ext = filename.split('.').pop()?.toLowerCase() || '';
+  return ['bmp', 'gif', 'jpeg', 'jpg', 'png', 'svg', 'webp'].includes(ext);
+}
+
+/**
+ * 格式化文件大小
+ *
+ * @param bytes 文件大小（字节）
+ * @returns 格式化后的文件大小字符串
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) {
+    return '0 B';
+  }
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+}
+
+/**
+ * 获取文件图标（Lucide Icons）
+ *
+ * @param filename 文件名
+ * @returns Lucide 图标名称
+ */
+export function getFileIcon(filename: null | string | undefined): string {
+  if (!filename) {
+    return 'lucide:file';
+  }
+  const ext = filename.split('.').pop()?.toLowerCase() || '';
+  if (isImage(ext)) {
+    return 'lucide:image';
+  }
+  if (['pdf'].includes(ext)) {
+    return 'lucide:file-text';
+  }
+  if (['doc', 'docx'].includes(ext)) {
+    return 'lucide:file-text';
+  }
+  if (['xls', 'xlsx'].includes(ext)) {
+    return 'lucide:file-spreadsheet';
+  }
+  if (['ppt', 'pptx'].includes(ext)) {
+    return 'lucide:presentation';
+  }
+  if (['aac', 'm4a', 'mp3', 'wav'].includes(ext)) {
+    return 'lucide:music';
+  }
+  if (['avi', 'mov', 'mp4', 'wmv'].includes(ext)) {
+    return 'lucide:video';
+  }
+  return 'lucide:file';
+}
+
+/**
+ * 获取文件类型样式类（Tailwind CSS 渐变色）
+ *
+ * @param filename 文件名
+ * @returns Tailwind CSS 渐变类名
+ */
+export function getFileTypeClass(filename: null | string | undefined): string {
+  if (!filename) {
+    return 'from-gray-500 to-gray-700';
+  }
+  const ext = filename.split('.').pop()?.toLowerCase() || '';
+  if (isImage(ext)) {
+    return 'from-yellow-400 to-orange-500';
+  }
+  if (['pdf'].includes(ext)) {
+    return 'from-red-500 to-red-700';
+  }
+  if (['doc', 'docx'].includes(ext)) {
+    return 'from-blue-600 to-blue-800';
+  }
+  if (['xls', 'xlsx'].includes(ext)) {
+    return 'from-green-600 to-green-800';
+  }
+  if (['ppt', 'pptx'].includes(ext)) {
+    return 'from-orange-600 to-orange-800';
+  }
+  if (['aac', 'm4a', 'mp3', 'wav'].includes(ext)) {
+    return 'from-purple-500 to-purple-700';
+  }
+  if (['avi', 'mov', 'mp4', 'wmv'].includes(ext)) {
+    return 'from-red-500 to-red-700';
+  }
+  return 'from-gray-500 to-gray-700';
+}
diff --git a/packages/constants/src/system-enum.ts b/packages/constants/src/system-enum.ts
index 40d4df91b..e07125c43 100644
--- a/packages/constants/src/system-enum.ts
+++ b/packages/constants/src/system-enum.ts
@@ -29,11 +29,13 @@ export const AiModelTypeEnum = {
   EMBEDDING: 5, // 向量
   RERANK: 6, // 重排
 };
+
 export interface ImageModel {
   image?: string;
   key: string;
   name: string;
 }
+
 export const OtherPlatformEnum: ImageModel[] = [
   {
     key: AiPlatformEnum.TONG_YI,
@@ -52,6 +54,7 @@ export const OtherPlatformEnum: ImageModel[] = [
     name: '硅基流动',
   },
 ];
+
 /**
  * AI 图像生成状态的枚举
  */
@@ -60,6 +63,7 @@ export const AiImageStatusEnum = {
   SUCCESS: 20, // 已完成
   FAIL: 30, // 已失败
 };
+
 /**
  * AI 音乐生成状态的枚举
  */
@@ -397,6 +401,7 @@ export const MidjourneyModels: ImageModel[] = [
     image: 'https://bigpt8.com/pc/_nuxt/nj.ca79b143.png',
   },
 ];
+
 export const MidjourneyVersions = [
   {
     value: '6.0',
@@ -459,6 +464,7 @@ export const MidjourneySizeList: ImageSize[] = [
     style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
   },
 ];
+
 // ========== PAY 模块 ==========
 /**
  * 支付渠道枚举
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a09ad1257..57d2e7fd7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1050,6 +1050,9 @@ importers:
 
   apps/web-tdesign:
     dependencies:
+      '@tinymce/tinymce-vue':
+        specifier: 'catalog:'
+        version: 6.3.0(tinymce@7.9.1)(vue@3.5.24(typescript@5.9.3))
       '@vben/access':
         specifier: workspace:*
         version: link:../../packages/effects/access
@@ -1095,6 +1098,9 @@ importers:
       '@vueuse/core':
         specifier: 'catalog:'
         version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      cropperjs:
+        specifier: 'catalog:'
+        version: 1.6.2
       dayjs:
         specifier: 'catalog:'
         version: 1.11.19
@@ -1107,6 +1113,9 @@ importers:
       tdesign-vue-next:
         specifier: ^1.17.1
         version: 1.17.2(vue@3.5.24(typescript@5.9.3))
+      tinymce:
+        specifier: 'catalog:'
+        version: 7.9.1
       vue:
         specifier: ^3.5.17
         version: 3.5.24(typescript@5.9.3)