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/package.json b/apps/web-antd/package.json
index da86ccc0e..80aa499ef 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -61,10 +61,11 @@
     "pinia": "catalog:",
     "steady-xml": "catalog:",
     "tinymce": "catalog:",
-    "video.js": "^7.21.5",
+    "video.js": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:",
+    "vue3-print-nb": "catalog:",
     "vue3-signature": "catalog:",
     "vuedraggable": "catalog:"
   }
diff --git a/apps/web-antd/src/api/bpm/model/index.ts b/apps/web-antd/src/api/bpm/model/index.ts
index cd2afbc84..e16627fa1 100644
--- a/apps/web-antd/src/api/bpm/model/index.ts
+++ b/apps/web-antd/src/api/bpm/model/index.ts
@@ -20,6 +20,7 @@ export namespace BpmModelApi {
     suspensionState: number;
     formType?: number;
     formCustomViewPath?: string;
+    formFields?: string[];
   }
 
   /** 流程模型 */
diff --git a/apps/web-antd/src/api/bpm/processInstance/index.ts b/apps/web-antd/src/api/bpm/processInstance/index.ts
index ecbc03855..06fb2fec1 100644
--- a/apps/web-antd/src/api/bpm/processInstance/index.ts
+++ b/apps/web-antd/src/api/bpm/processInstance/index.ts
@@ -20,6 +20,7 @@ export namespace BpmProcessInstanceApi {
 
   export interface User {
     avatar: string;
+    deptName?: string;
     id: number;
     nickname: string;
   }
@@ -101,6 +102,22 @@ export namespace BpmProcessInstanceApi {
     }[];
     taskId: string;
   }
+
+  /** 打印数据任务信息 */
+  export interface PrintTask {
+    description: string;
+    id: number;
+    name: string;
+    signPicUrl?: string;
+  }
+
+  /** 打印数据 */
+  export interface PrintData {
+    printTemplateEnable: boolean;
+    printTemplateHtml?: string;
+    processInstance: ProcessInstance;
+    tasks: PrintTask[];
+  }
 }
 
 /** 查询我的流程实例分页 */
@@ -205,3 +222,10 @@ export async function getProcessInstanceBpmnModelView(id: string) {
     `/bpm/process-instance/get-bpmn-model-view?id=${id}`,
   );
 }
+
+/** 获取流程实例打印数据 */
+export async function getProcessInstancePrintData(id: string) {
+  return requestClient.get<BpmProcessInstanceApi.PrintData>(
+    `/bpm/process-instance/get-print-data?processInstanceId=${id}`,
+  );
+}
diff --git a/apps/web-antd/src/api/mp/draft/index.ts b/apps/web-antd/src/api/mp/draft/index.ts
index 435f13e0b..9032ffd57 100644
--- a/apps/web-antd/src/api/mp/draft/index.ts
+++ b/apps/web-antd/src/api/mp/draft/index.ts
@@ -35,9 +35,13 @@ export function getDraftPage(params: PageParam) {
 
 /** 创建草稿 */
 export function createDraft(accountId: number, articles: MpDraftApi.Article[]) {
-  return requestClient.post('/mp/draft/create', articles, {
-    params: { accountId },
-  });
+  return requestClient.post(
+    '/mp/draft/create',
+    { articles },
+    {
+      params: { accountId },
+    },
+  );
 }
 
 /** 更新草稿 */
@@ -46,9 +50,13 @@ export function updateDraft(
   mediaId: string,
   articles: MpDraftApi.Article[],
 ) {
-  return requestClient.put('/mp/draft/update', articles, {
-    params: { accountId, mediaId },
-  });
+  return requestClient.put(
+    '/mp/draft/update',
+    { articles },
+    {
+      params: { accountId, mediaId },
+    },
+  );
 }
 
 /** 删除草稿 */
diff --git a/apps/web-antd/src/assets/imgs/wechat.png b/apps/web-antd/src/assets/imgs/wechat.png
new file mode 100644
index 000000000..6afc5e41c
Binary files /dev/null and b/apps/web-antd/src/assets/imgs/wechat.png differ
diff --git a/apps/web-antd/src/components/form-create/helpers.ts b/apps/web-antd/src/components/form-create/helpers.ts
index 902efd665..f92780d75 100644
--- a/apps/web-antd/src/components/form-create/helpers.ts
+++ b/apps/web-antd/src/components/form-create/helpers.ts
@@ -1,3 +1,5 @@
+import type { Rule } from '@form-create/ant-design-vue';
+
 import type { Ref } from 'vue';
 
 import type { Menu } from '#/components/form-create/typing';
@@ -34,7 +36,7 @@ export function encodeFields(designerRef: any) {
 
 // 解码表单 Fields
 export function decodeFields(fields: string[]) {
-  const rule: object[] = [];
+  const rule: Rule[] = [];
   fields.forEach((item) => {
     rule.push(formCreate.parseJson(item));
   });
diff --git a/apps/web-antd/src/router/routes/modules/vben.ts b/apps/web-antd/src/router/routes/modules/vben.ts
deleted file mode 100644
index 96f980d10..000000000
--- a/apps/web-antd/src/router/routes/modules/vben.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-// import {
-//   VBEN_DOC_URL,
-//   VBEN_ELE_PREVIEW_URL,
-//   VBEN_GITHUB_URL,
-//   VBEN_LOGO_URL,
-//   VBEN_NAIVE_PREVIEW_URL,
-// } from '@vben/constants';
-//
-// 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: '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; // update by 芋艿：不展示
diff --git a/apps/web-antd/src/utils/index.ts b/apps/web-antd/src/utils/index.ts
index 3a066fd4a..5877010a3 100644
--- a/apps/web-antd/src/utils/index.ts
+++ b/apps/web-antd/src/utils/index.ts
@@ -1,2 +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-antd/src/utils/routerHelper.ts b/apps/web-antd/src/utils/routerHelper.ts
index 6c86773ab..a9e99f54b 100644
--- a/apps/web-antd/src/utils/routerHelper.ts
+++ b/apps/web-antd/src/utils/routerHelper.ts
@@ -1,4 +1,7 @@
-import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import type {
+  RouteLocationNormalized,
+  RouteRecordNormalized,
+} from 'vue-router';
 
 import { defineAsyncComponent } from 'vue';
 
@@ -17,13 +20,19 @@ export function registerComponent(componentPath: string) {
   }
 }
 
-export function getRawRoute(
-  route: RouteLocationNormalizedLoaded,
-): RouteLocationNormalizedLoaded {
+export const getRawRoute = (
+  route: RouteLocationNormalized,
+): RouteLocationNormalized => {
   if (!route) return route;
-  const { matched, ...others } = route;
+  const { matched, ...opt } = route;
   return {
-    ...others,
-    matched: matched ? matched.map((m) => ({ ...m })) : [],
+    ...opt,
+    matched: (matched
+      ? matched.map((item) => ({
+          meta: item.meta,
+          name: item.name,
+          path: item.path,
+        }))
+      : undefined) as RouteRecordNormalized[],
   };
-}
+};
diff --git a/apps/web-antd/src/utils/useUpload.ts b/apps/web-antd/src/utils/useUpload.ts
new file mode 100644
index 000000000..4c87c04ec
--- /dev/null
+++ b/apps/web-antd/src/utils/useUpload.ts
@@ -0,0 +1,63 @@
+import { message } from 'ant-design-vue';
+
+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-antd/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
index 4fce9dacf..14fdf8539 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
@@ -660,16 +660,15 @@ onBeforeUnmount(() => {
       <!-- <div id="js-properties-panel" class="panel"></div> -->
       <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
     </div>
-    <Dialog
+    <Modal
       title="预览"
       v-model:open="previewModelVisible"
-      width="80%"
+      class="max-h-[600px] w-4/5"
       :scroll="true"
-      style="max-height: 600px"
     >
       <div>
         <pre><code v-dompurify-html="highlightedCode(previewResult)" class="hljs"></code></pre>
       </div>
-    </Dialog>
+    </Modal>
   </div>
 </template>
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
index 3c274cf8a..e52eb8ee0 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
@@ -42,6 +42,7 @@ const props = defineProps({
   modelValue: {
     type: Object,
     required: true,
+    default: () => ({}),
   },
 });
 
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue
index b23a01a66..a5a3c02a4 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/router-node-config.vue
@@ -272,7 +272,7 @@ defineExpose({ openDrawer }); // 暴露方法给父组件
         </template>
         <Condition
           :ref="(el) => (conditionRef[index] = el)"
-          :model-value="routerGroups[index] as Record<string, any>"
+          :model-value="routerGroups[index]"
           @update:model-value="(val) => (routerGroups[index] = val)"
         />
       </Card>
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
index 5da27465e..9ead376ff 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
@@ -248,9 +248,8 @@ defineExpose({ validate });
       :rules="rules"
       :label-col="{ span: 4 }"
       :wrapper-col="{ span: 20 }"
-      class="mt-5"
     >
-      <Form.Item label="流程标识" name="key" class="mb-5">
+      <Form.Item label="流程标识" name="key">
         <div class="flex items-center">
           <Input
             class="w-full"
@@ -264,14 +263,11 @@ defineExpose({ validate });
             "
             placement="top"
           >
-            <IconifyIcon
-              icon="lucide:circle-help"
-              class="ml-1 size-5 text-gray-900"
-            />
+            <IconifyIcon icon="lucide:circle-help" class="ml-1 size-5" />
           </Tooltip>
         </div>
       </Form.Item>
-      <Form.Item label="流程名称" name="name" class="mb-5">
+      <Form.Item label="流程名称" name="name">
         <Input
           v-model:value="modelData.name"
           :disabled="!!modelData.id"
@@ -279,7 +275,7 @@ defineExpose({ validate });
           placeholder="请输入流程名称"
         />
       </Form.Item>
-      <Form.Item label="流程分类" name="category" class="mb-5">
+      <Form.Item label="流程分类" name="category">
         <Select
           class="w-full"
           v-model:value="modelData.category"
@@ -295,13 +291,13 @@ defineExpose({ validate });
           </Select.Option>
         </Select>
       </Form.Item>
-      <Form.Item label="流程图标" class="mb-5">
+      <Form.Item label="流程图标">
         <ImageUpload v-model:value="modelData.icon" />
       </Form.Item>
-      <Form.Item label="流程描述" name="description" class="mb-5">
+      <Form.Item label="流程描述" name="description">
         <Input.TextArea v-model:value="modelData.description" allow-clear />
       </Form.Item>
-      <Form.Item label="流程类型" name="type" class="mb-5">
+      <Form.Item label="流程类型" name="type">
         <Radio.Group v-model:value="modelData.type">
           <Radio
             v-for="dict in getDictOptions(DICT_TYPE.BPM_MODEL_TYPE, 'number')"
@@ -312,7 +308,7 @@ defineExpose({ validate });
           </Radio>
         </Radio.Group>
       </Form.Item>
-      <Form.Item label="是否可见" name="visible" class="mb-5">
+      <Form.Item label="是否可见" name="visible">
         <Radio.Group v-model:value="modelData.visible">
           <Radio
             v-for="dict in getDictOptions(
@@ -326,7 +322,7 @@ defineExpose({ validate });
           </Radio>
         </Radio.Group>
       </Form.Item>
-      <Form.Item label="谁可以发起" name="startUserType" class="mb-5">
+      <Form.Item label="谁可以发起" name="startUserType">
         <Select
           v-model:value="modelData.startUserType"
           placeholder="请选择谁可以发起"
@@ -343,15 +339,10 @@ defineExpose({ validate });
           <div
             v-for="user in selectedStartUsers"
             :key="user.id"
-            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
+            class="relative flex h-8 items-center rounded-lg bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
           >
-            <Avatar
-              class="m-1"
-              :size="28"
-              v-if="user.avatar"
-              :src="user.avatar"
-            />
-            <Avatar class="m-1" :size="28" v-else>
+            <Avatar class="m-1 size-7" v-if="user.avatar" :src="user.avatar" />
+            <Avatar class="m-1 size-7" v-else>
               {{ user.nickname?.substring(0, 1) }}
             </Avatar>
             <span class="text-gray-700 dark:text-gray-200">
@@ -359,7 +350,7 @@ defineExpose({ validate });
             </span>
             <IconifyIcon
               icon="lucide:x"
-              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
+              class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500 dark:text-gray-200"
               @click="handleRemoveStartUser(user)"
             />
           </div>
@@ -381,7 +372,7 @@ defineExpose({ validate });
           <div
             v-for="dept in selectedStartDepts"
             :key="dept.id"
-            class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 shadow-sm hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
+            class="relative flex h-8 items-center rounded-lg bg-gray-100 pr-2 shadow-sm hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
           >
             <IconifyIcon icon="lucide:building" class="size-6 px-1" />
             <span class="text-gray-700 dark:text-gray-200">
@@ -405,20 +396,15 @@ defineExpose({ validate });
           </Button>
         </div>
       </Form.Item>
-      <Form.Item label="流程管理员" name="managerUserIds" class="mb-5">
+      <Form.Item label="流程管理员" name="managerUserIds">
         <div class="flex flex-wrap gap-1">
           <div
             v-for="user in selectedManagerUsers"
             :key="user.id"
             class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2 hover:bg-gray-200 dark:border dark:border-gray-500 dark:bg-gray-700 dark:hover:bg-gray-600"
           >
-            <Avatar
-              class="m-1"
-              :size="28"
-              v-if="user.avatar"
-              :src="user.avatar"
-            />
-            <Avatar class="m-1" :size="28" v-else>
+            <Avatar class="m-1 size-7" v-if="user.avatar" :src="user.avatar" />
+            <Avatar class="m-1 size-7" v-else>
               {{ user.nickname?.substring(0, 1) }}
             </Avatar>
             <span class="text-gray-700 dark:text-gray-200">
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue b/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
index 2a4361cba..1e64b37c7 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
@@ -515,5 +515,6 @@ defineExpose({ initData, validate });
         </Col>
       </Row>
     </FormItem>
+    <!-- TODO @jason：这里有个 “自定义打印模板” -->
   </Form>
 </template>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
index 391fa1142..6c0c1b47e 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
@@ -4,7 +4,7 @@ import type { SystemUserApi } from '#/api/system/user';
 
 import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
 
-import { Page } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 import {
   BpmFieldPermissionType,
   BpmModelFormType,
@@ -13,6 +13,7 @@ import {
   DICT_TYPE,
 } from '@vben/constants';
 import {
+  IconifyIcon,
   SvgBpmApproveIcon,
   SvgBpmCancelIcon,
   SvgBpmRejectIcon,
@@ -33,6 +34,7 @@ import { registerComponent } from '#/utils';
 
 import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
 import ProcessInstanceOperationButton from './modules/operation-button.vue';
+import ProcessssPrint from './modules/processs-print.vue';
 import ProcessInstanceSimpleViewer from './modules/simple-bpm-viewer.vue';
 import BpmProcessInstanceTaskList from './modules/task-list.vue';
 import ProcessInstanceTimeline from './modules/time-line.vue';
@@ -189,6 +191,16 @@ const refresh = () => {
   getDetail();
 };
 
+const [PrintModal, printModalApi] = useVbenModal({
+  connectedComponent: ProcessssPrint,
+  destroyOnClose: true,
+});
+
+/** 打开打印对话框 */
+function handlePrint() {
+  printModalApi.setData({ processInstanceId: props.id }).open();
+}
+
 /** 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表 */
 watch(
   () => activeTab.value,
@@ -218,7 +230,14 @@ onMounted(async () => {
       }"
     >
       <template #title>
-        <span class="text-gray-500">编号：{{ id || '-' }}</span>
+        <div class="flex items-center gap-4">
+          <span class="text-gray-500">编号：{{ id || '-' }}</span>
+          <IconifyIcon
+            icon="lucide:printer"
+            class="hover:text-primary cursor-pointer"
+            @click="handlePrint"
+          />
+        </div>
       </template>
 
       <div class="flex h-full flex-col">
@@ -371,6 +390,8 @@ onMounted(async () => {
         </div>
       </template>
     </Card>
+    <!-- 打印对话框 -->
+    <PrintModal />
   </Page>
 </template>
 
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/processs-print.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/processs-print.vue
new file mode 100644
index 000000000..e4e87e14e
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/processs-print.vue
@@ -0,0 +1,315 @@
+<script setup lang="ts">
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { useUserStore } from '@vben/stores';
+import { formatDate } from '@vben/utils';
+
+import { Button } from 'ant-design-vue';
+// @ts-ignore - 安装 vue3-print-nb 局部指令 v-print
+import vPrint from 'vue3-print-nb';
+
+import { getProcessInstancePrintData } from '#/api/bpm/processInstance';
+import { decodeFields } from '#/components/form-create';
+
+const userStore = useUserStore();
+
+const printData = ref<BpmProcessInstanceApi.PrintData>();
+const userName = computed(() => userStore.userInfo?.nickname ?? '');
+const printTime = ref(formatDate(new Date(), 'YYYY-MM-DD HH:mm'));
+const formFields = ref<any[]>([]);
+const printDataMap = ref<Record<string, any>>({});
+
+/** 打印配置 */
+const printObj = ref({
+  id: 'printDivTag',
+  popTitle: '&nbsp;',
+  extraCss: '/print.css',
+  extraHead: '',
+  zIndex: 20_003,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  closable: true,
+  footer: false,
+  title: '打印流程',
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+
+    modalApi.lock();
+    try {
+      const { processInstanceId } = modalApi.getData<{
+        processInstanceId: string;
+      }>();
+      if (processInstanceId) {
+        await fetchPrintData(processInstanceId);
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 获取打印数据 */
+async function fetchPrintData(id: string) {
+  printData.value = await getProcessInstancePrintData(id);
+  initPrintDataMap();
+  parseFormFields();
+}
+
+/** 解析表单字段 */
+function parseFormFields() {
+  if (!printData.value) return;
+
+  const formFieldsObj = decodeFields(
+    printData.value.processInstance.processDefinition?.formFields || [],
+  );
+  const processVariables = printData.value.processInstance.formVariables;
+  const res: any = [];
+
+  for (const item of formFieldsObj) {
+    const id = item.field;
+    const name = item.title;
+    const fieldKey = item.field as string;
+    const variable = processVariables[fieldKey];
+    let html = variable;
+
+    switch (item.type) {
+      case 'checkbox':
+      case 'radio':
+      case 'select': {
+        const options = item.options;
+        const temp: any = [];
+        if (Array.isArray(options)) {
+          if (Array.isArray(variable)) {
+            const labels = options
+              .filter((o: any) => variable.includes(o.value))
+              .map((o: any) => o.label);
+            temp.push(...labels);
+          } else {
+            const opt = options.find((o: any) => o.value === variable);
+            if (opt) {
+              temp.push(opt.label);
+            }
+          }
+        }
+        html = temp.join(',');
+        break;
+      }
+      case 'UploadImg': {
+        const imgEl = document.createElement('img');
+        imgEl.setAttribute('src', variable);
+        imgEl.setAttribute('style', 'max-width: 600px;');
+        html = imgEl.outerHTML;
+        break;
+      }
+      // TODO 更多表单打印展示
+    }
+
+    printDataMap.value[fieldKey] = html;
+    res.push({ id, name, html });
+  }
+
+  formFields.value = res;
+}
+
+/** 初始化打印数据映射 */
+function initPrintDataMap() {
+  if (!printData.value) return;
+
+  printDataMap.value.startUser =
+    printData.value.processInstance.startUser?.nickname || '';
+  printDataMap.value.startUserDept =
+    printData.value.processInstance.startUser?.deptName || '';
+  printDataMap.value.processName = printData.value.processInstance.name;
+  printDataMap.value.processNum = printData.value.processInstance.id;
+  printDataMap.value.startTime = formatDate(
+    printData.value.processInstance.startTime,
+  );
+  printDataMap.value.endTime = formatDate(
+    printData.value.processInstance.endTime,
+  );
+  printDataMap.value.processStatus = getDictLabel(
+    DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+    printData.value.processInstance.status,
+  );
+  printDataMap.value.printUser = userName.value;
+  printDataMap.value.printTime = printTime.value;
+}
+
+/** 获取打印模板 HTML （TODO 需求实现配置打印模板） */
+function getPrintTemplateHTML() {
+  if (!printData.value?.printTemplateHtml) return '';
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(
+    printData.value.printTemplateHtml,
+    'text/html',
+  );
+
+  // table 添加 border
+  const tables = doc.querySelectorAll('table');
+  tables.forEach((item) => {
+    item.setAttribute('border', '1');
+    item.setAttribute(
+      'style',
+      `${item.getAttribute('style') || ''}border-collapse:collapse;`,
+    );
+  });
+
+  // 替换 mentions
+  const mentions = doc.querySelectorAll('[data-w-e-type="mention"]');
+  mentions.forEach((item) => {
+    const htmlElement = item as HTMLElement;
+    const mentionId = JSON.parse(
+      decodeURIComponent(htmlElement.dataset.info ?? ''),
+    ).id;
+    item.innerHTML = printDataMap.value[mentionId] ?? '';
+  });
+
+  // 替换流程记录
+  const processRecords = doc.querySelectorAll(
+    '[data-w-e-type="process-record"]',
+  );
+  const processRecordTable: Element = document.createElement('table');
+
+  if (processRecords.length > 0) {
+    // 构建流程记录 html
+    processRecordTable.setAttribute('border', '1');
+    processRecordTable.setAttribute(
+      'style',
+      'width:100%;border-collapse:collapse;',
+    );
+
+    const headTr = document.createElement('tr');
+    const headTd = document.createElement('td');
+    headTd.setAttribute('colspan', '2');
+    headTd.setAttribute('width', 'auto');
+    headTd.setAttribute('style', 'text-align: center;');
+    headTd.innerHTML = '流程节点';
+    headTr.append(headTd);
+    processRecordTable.append(headTr);
+
+    printData.value?.tasks.forEach((item) => {
+      const tr = document.createElement('tr');
+      const td1 = document.createElement('td');
+      td1.innerHTML = item.name;
+      const td2 = document.createElement('td');
+      td2.innerHTML = item.description;
+      tr.append(td1);
+      tr.append(td2);
+      processRecordTable.append(tr);
+    });
+  }
+
+  processRecords.forEach((item) => {
+    item.innerHTML = processRecordTable.outerHTML;
+  });
+
+  // 返回 html
+  return doc.body.innerHTML;
+}
+</script>
+
+<template>
+  <Modal class="w-2/3">
+    <div id="printDivTag" class="break-all">
+      <!-- eslint-disable vue/no-v-html  使用自定义打印模板 -->
+      <div
+        v-if="printData?.printTemplateEnable"
+        v-html="getPrintTemplateHTML()"
+      ></div>
+      <div v-else-if="printData">
+        <h2 class="mb-3 text-center text-xl font-bold">
+          {{ printData.processInstance.name }}
+        </h2>
+        <div class="mb-2 text-right text-sm">
+          {{ `打印人员: ${userName}` }}
+        </div>
+        <div class="mb-2 flex justify-between text-sm">
+          <div>
+            {{ `流程编号: ${printData.processInstance.id}` }}
+          </div>
+          <div>{{ `打印时间: ${printTime}` }}</div>
+        </div>
+        <table class="mt-3 w-full border-collapse border border-gray-400">
+          <tbody>
+            <tr>
+              <td class="w-1/4 border border-gray-400 p-1.5">发起人</td>
+              <td class="w-1/4 border border-gray-400 p-1.5">
+                {{ printData.processInstance.startUser?.nickname }}
+              </td>
+              <td class="w-1/4 border border-gray-400 p-1.5">发起时间</td>
+              <td class="w-1/4 border border-gray-400 p-1.5">
+                <!-- TODO @jason：这里会告警呢 -->
+                {{ formatDate(printData.processInstance.startTime) }}
+              </td>
+            </tr>
+            <tr>
+              <td class="w-1/4 border border-gray-400 p-1.5">所属部门</td>
+              <td class="w-1/4 border border-gray-400 p-1.5">
+                {{ printData.processInstance.startUser?.deptName }}
+              </td>
+              <td class="w-1/4 border border-gray-400 p-1.5">流程状态</td>
+              <td class="w-1/4 border border-gray-400 p-1.5">
+                {{
+                  getDictLabel(
+                    DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
+                    printData.processInstance.status,
+                  )
+                }}
+              </td>
+            </tr>
+            <tr>
+              <td
+                class="w-full border border-gray-400 p-1.5 text-center"
+                colspan="4"
+              >
+                <h4>表单内容</h4>
+              </td>
+            </tr>
+            <tr v-for="item in formFields" :key="item.id">
+              <td class="w-1/5 border border-gray-400 p-1.5">
+                {{ item.name }}
+              </td>
+              <td class="w-4/5 border border-gray-400 p-1.5" colspan="3">
+                <div v-html="item.html"></div>
+              </td>
+            </tr>
+            <tr>
+              <td
+                class="w-full border border-gray-400 p-1.5 text-center"
+                colspan="4"
+              >
+                <h4>流程节点</h4>
+              </td>
+            </tr>
+            <tr v-for="item in printData.tasks" :key="item.id">
+              <td class="w-1/5 border border-gray-400 p-1.5">
+                {{ item.name }}
+              </td>
+              <td class="w-4/5 border border-gray-400 p-1.5" colspan="3">
+                {{ item.description }}
+                <div v-if="item.signPicUrl && item.signPicUrl.length > 0">
+                  <img class="h-10 w-[90px]" :src="item.signPicUrl" alt="" />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <Button @click="modalApi.close()">取 消</Button>
+        <Button v-print="printObj" type="primary">打 印</Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue b/apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue
index e416cd887..edcba724b 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue
@@ -197,6 +197,27 @@ const emptyMessage = computed(() => {
   }
 });
 
+// 计算属性：无配置消息
+// const noConfigMessage = computed(() => {
+//   switch (props.type) {
+//     case JsonParamsInputTypeEnum.CUSTOM: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
+//     }
+//     case JsonParamsInputTypeEnum.EVENT: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
+//     }
+//     case JsonParamsInputTypeEnum.PROPERTY: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
+//     }
+//     case JsonParamsInputTypeEnum.SERVICE: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
+//     }
+//     default: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
+//     }
+//   }
+// });
+
 /**
  * 处理参数变化事件
  */
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..0272acd0d 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,6 +133,7 @@ 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">
@@ -159,6 +160,7 @@ function handleSliderChange(prop: string) {
               <template #tip>建议宽度 750px</template>
             </UploadImg>
           </FormItem>
+          <!-- TODO @xingyu：没完全对齐 -->
           <Tree :tree-data="treeData" default-expand-all :block-node="true">
             <template #title="{ dataRef }">
               <FormItem
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 88%
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..fc840dde3 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,11 +22,13 @@ 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>
 
@@ -35,7 +38,7 @@ const formData = useVModel(props, 'modelValue', emit);
       <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">
+          <RadioGroup v-model:value="formData.type">
             <Tooltip class="item" content="默认" placement="bottom">
               <RadioButton value="default">
                 <IconifyIcon icon="system-uicons:carousel" class="size-6" />
@@ -48,18 +51,26 @@ const formData = useVModel(props, 'modelValue', emit);
             </Tooltip>
           </RadioGroup>
         </FormItem>
+        <FormItem label="高度" prop="height">
+          <InputNumber
+            v-model:value="formData.height"
+            class="mr-[10px] !w-1/2"
+            controls-position="right"
+          />
+          px
+        </FormItem>
         <FormItem label="指示器" prop="indicator">
-          <RadioGroup v-model="formData.indicator">
+          <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" />
+          <Switch v-model:checked="formData.autoplay" />
         </FormItem>
         <FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
           <Slider
-            v-model="formData.interval"
+            v-model:value="formData.interval"
             :max="10"
             :min="0.5"
             :step="0.5"
@@ -75,7 +86,7 @@ const formData = useVModel(props, 'modelValue', emit);
         <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">
+              <RadioGroup v-model:value="element.type">
                 <Radio value="img">图片</Radio>
                 <Radio value="video">视频</Radio>
               </RadioGroup>
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..0a57272d7 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,9 +55,10 @@ watch(
   },
   { immediate: true, deep: true },
 );
+
+/** 初始化 */
 onMounted(() => {
-  // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
 });
 </script>
 <template>
@@ -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/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..ecf917b31 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" fit="contain" class="!h-7 !w-7">
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
               <IconifyIcon
@@ -64,33 +60,15 @@ const handleActive = (index: number) => {
     <Button type="primary" size="large" 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%-384px/2)] top-0 z-[11] h-full w-[384px] 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..9c1b5e2d0 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,40 @@ 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 }"
-      :model="formData"
-      class="mt-2"
-    >
+    <Form label-width="80px" :model="formData" class="mt-2">
       <FormItem label="上传图片" prop="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
           height="50px"
           width="auto"
-          class="min-w-20"
+          class="min-w-[80px]"
           :show-description="false"
         />
+        <p class="text-xs text-gray-500">推荐宽度 750</p>
       </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" plain class="w-full" @click="handleOpenEditDialog">
       设置热区
     </Button>
   </ComponentContainerProperty>
+
   <!-- 热区编辑对话框 -->
   <HotZoneEditDialog
     ref="editDialogRef"
@@ -58,26 +56,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..b67f591ae 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>
 
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..1d7ecf89a 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; // 一个方块的大小
+
 /**
  * 计算方块的行数
  * 行数用于计算魔方的总体高度，存在以下情况：
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..62573bcc0 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
@@ -57,6 +57,7 @@ const handleHotAreaSelected = (_: any, index: number) => {
           </FormItem>
         </template>
       </template>
+      <!-- TODO @芋艿：距离不一致，需要看看怎么统一； -->
       <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..25bb580bb 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,7 +19,9 @@ 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>
 
@@ -27,12 +30,11 @@ const formData = useVModel(props, 'modelValue', emit);
     <!-- 表单 -->
     <Form label-width="80px" :model="formData" class="mt-2">
       <FormItem label="每行数量" prop="column">
-        <RadioGroup v-model="formData.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
@@ -47,17 +49,17 @@ const formData = useVModel(props, 'modelValue', emit);
                 width="80px"
                 :show-description="false"
               >
-                <template #tip> 建议尺寸：44 * 44 </template>
+                <template #tip> 建议尺寸：44 * 44</template>
               </UploadImg>
             </FormItem>
             <FormItem label="标题" prop="title">
-              <ColorInput
+              <InputWithColor
                 v-model="element.title"
                 v-model:color="element.titleColor"
               />
             </FormItem>
             <FormItem label="副标题" prop="subtitle">
-              <ColorInput
+              <InputWithColor
                 v-model="element.subtitle"
                 v-model:color="element.subtitleColor"
               />
@@ -70,7 +72,7 @@ const formData = useVModel(props, 'modelValue', emit);
             </FormItem>
             <template v-if="element.badge.show">
               <FormItem label="角标内容" prop="badge.text">
-                <ColorInput
+                <InputWithColor
                   v-model="element.badge.text"
                   v-model:color="element.badge.textColor"
                 />
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..88606b4eb 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>
 
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..8bee2e656 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
@@ -7,22 +7,19 @@ import { 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/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..c894f76f4 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,18 @@
 <script lang="ts" setup>
 import type { NavigationBarCellProperty } from '../config';
 
-import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/util';
-
 import { computed, ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
 import {
   FormItem,
-  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 +23,7 @@ import {
   MagicCubeEditor,
 } from '#/views/mall/promotion/components';
 
-// 导航栏属性面板
+/** 导航栏单元格属性面板 */
 defineOptions({ name: 'NavigationBarCellProperty' });
 
 const props = defineProps({
@@ -36,54 +36,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 :prop="`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,38 +101,69 @@ const handleHotAreaSelected = (
       </FormItem>
       <!-- 1. 文字 -->
       <template v-if="cell.type === 'text'">
-        <FormItem label="内容">
+        <FormItem :prop="`cell[${cellIndex}].text`" label="内容">
           <Input v-model:value="cell!.text" :maxlength="10" show-count />
         </FormItem>
-        <FormItem label="颜色">
+        <FormItem :prop="`cell[${cellIndex}].text`" label="颜色">
           <ColorInput v-model="cell!.textColor" />
         </FormItem>
-        <FormItem label="链接">
+        <FormItem :prop="`cell[${cellIndex}].url`" label="链接">
           <AppLinkInput v-model="cell.url" />
         </FormItem>
       </template>
       <!-- 2. 图片 -->
       <template v-else-if="cell.type === 'image'">
-        <FormItem label="图片">
+        <FormItem :prop="`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 :prop="`cell[${cellIndex}].url`" label="链接">
           <AppLinkInput v-model="cell.url" />
         </FormItem>
       </template>
       <!-- 3. 搜索框 -->
       <template v-else>
-        <FormItem label="提示文字">
+        <FormItem label="框体颜色" prop="backgroundColor">
+          <ColorInput v-model="cell.backgroundColor" />
+        </FormItem>
+        <FormItem class="lef" label="文本颜色" prop="textColor">
+          <ColorInput v-model="cell.textColor" />
+        </FormItem>
+        <FormItem :prop="`cell[${cellIndex}].placeholder`" label="提示文字">
           <Input v-model:value="cell.placeholder" :maxlength="10" show-count />
         </FormItem>
-        <FormItem label="圆角">
-          <Slider v-model:value="cell.borderRadius" :max="100" :min="0" />
+        <FormItem label="文本位置" prop="placeholderPosition">
+          <RadioGroup v-model:value="cell!.placeholderPosition">
+            <Tooltip content="居左" placement="top">
+              <RadioButton value="left">
+                <IconifyIcon icon="ant-design:align-left-outlined" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip content="居中" placement="top">
+              <RadioButton value="center">
+                <IconifyIcon icon="ant-design:align-center-outlined" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="扫一扫" prop="showScan">
+          <Switch v-model:checked="cell!.showScan" />
+        </FormItem>
+        <FormItem :prop="`cell[${cellIndex}].borderRadius`" label="圆角">
+          <Slider
+            v-model:value="cell.borderRadius"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
         </FormItem>
       </template>
     </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/page-config/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
index 135d303d2..566574d03 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"
@@ -47,5 +40,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </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 81%
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..64f76a98d 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="{
@@ -40,5 +41,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 100%
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
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..1db1c3879 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(),
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..063f795c9 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,9 +66,10 @@ watch(
   },
   { immediate: true, deep: true },
 );
+
+/** 初始化 */
 onMounted(() => {
-  // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
 });
 </script>
 <template>
@@ -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..7984bfff0 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,7 +40,7 @@ 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">
@@ -117,5 +118,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </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..625be419a 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,
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..cab29484b 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();
 });
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..4dee43418 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
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..b1ee9c74a 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>
@@ -184,5 +172,3 @@ onMounted(async () => {
     </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..1011e27a3 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,32 +65,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
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..74af60c87 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,32 +65,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
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..cad3dac6f 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';
 
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/tab-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
index 90747a4ed..1f0eeab08 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,18 @@ 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"
+        >
           <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 +53,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..324414cec 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"
@@ -142,5 +143,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..c7c9e5ba1 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,7 +11,10 @@ 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"
@@ -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/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-order/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
index 1451ac12d..073883447 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,7 +5,8 @@ import { Image } from 'ant-design-vue';
 
 /** 用户订单 */
 defineOptions({ name: 'UserOrder' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserOrderProperty }>();
 </script>
 <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..8c8cd52e3 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,7 +5,8 @@ import { Image } from 'ant-design-vue';
 
 /** 用户资产 */
 defineOptions({ name: 'UserWallet' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserWalletProperty }>();
 </script>
 <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/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
index aa3445b8e..2f8f615db 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>
 
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/mp/autoReply/components/ReplyForm.vue b/apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue
new file mode 100644
index 000000000..d90e51a34
--- /dev/null
+++ b/apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { computed, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
+
+import { WxReplySelect } from '#/views/mp/modules/wx-reply';
+
+import { MsgType } from './types';
+
+defineOptions({ name: 'ReplyForm' });
+
+const props = defineProps<{
+  modelValue: any;
+  msgType: MsgType;
+  reply: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:reply', v: Reply): void;
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const reply = computed<Reply>({
+  get: () => props.reply,
+  set: (val) => emit('update:reply', val),
+});
+
+const replyForm = computed<any>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const formRef = ref(); // 表单 ref
+
+const RequestMessageTypes = [
+  'text',
+  'image',
+  'voice',
+  'video',
+  'shortvideo',
+  'location',
+  'link',
+]; // 允许选择的请求消息类型
+
+// 表单校验规则
+const rules = {
+  requestKeyword: [
+    { required: true, message: '请求的关键字不能为空', trigger: 'blur' },
+  ] as Rule[],
+  requestMatch: [
+    { required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' },
+  ] as Rule[],
+} as Record<string, Rule[]>;
+
+defineExpose({
+  resetFields: () => formRef.value?.resetFields(),
+  validate: async () => {
+    await formRef.value?.validate();
+  },
+});
+</script>
+
+<template>
+  <!-- TODO @hw：可以使用 <Form class="mx-4" /> 这种组件形式么？ 融合到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules/form.vue -->
+  <div>
+    <Form
+      ref="formRef"
+      :model="replyForm"
+      :rules="rules"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <FormItem
+        label="消息类型"
+        name="requestMessageType"
+        v-if="msgType === MsgType.Message"
+      >
+        <Select
+          v-model:value="replyForm.requestMessageType"
+          placeholder="请选择"
+        >
+          <SelectOption
+            v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE).filter(
+              (d) => RequestMessageTypes.includes(d.value as string),
+            )"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem
+        label="匹配类型"
+        name="requestMatch"
+        v-if="msgType === MsgType.Keyword"
+      >
+        <Select
+          v-model:value="replyForm.requestMatch"
+          placeholder="请选择匹配类型"
+          allow-clear
+        >
+          <SelectOption
+            v-for="dict in getDictOptions(
+              DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
+              'number',
+            )"
+            :key="String(dict.value)"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem
+        label="关键词"
+        name="requestKeyword"
+        v-if="msgType === MsgType.Keyword"
+      >
+        <Input
+          v-model:value="replyForm.requestKeyword"
+          placeholder="请输入内容"
+          allow-clear
+        />
+      </FormItem>
+      <FormItem label="回复消息">
+        <WxReplySelect v-model="reply" />
+      </FormItem>
+    </Form>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue b/apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue
new file mode 100644
index 000000000..5948a91cc
--- /dev/null
+++ b/apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue
@@ -0,0 +1,55 @@
+<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';
+// TODO @hw：迁移到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
+defineOptions({ name: 'ReplyContentCell' });
+
+const props = defineProps<{
+  row: any;
+}>();
+</script>
+
+<template>
+  <div>
+    <div v-if="props.row.responseMessageType === 'text'">
+      {{ props.row.responseContent }}
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'voice'">
+      <WxVoicePlayer
+        v-if="props.row.responseMediaUrl"
+        :url="props.row.responseMediaUrl"
+      />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'image'">
+      <a target="_blank" :href="props.row.responseMediaUrl">
+        <img :src="props.row.responseMediaUrl" style="width: 100px" />
+      </a>
+    </div>
+    <div
+      v-else-if="
+        props.row.responseMessageType === 'video' ||
+        props.row.responseMessageType === 'shortvideo'
+      "
+    >
+      <WxVideoPlayer
+        v-if="props.row.responseMediaUrl"
+        :url="props.row.responseMediaUrl"
+        style="margin-top: 10px"
+      />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'news'">
+      <WxNews :articles="props.row.responseArticles" />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'music'">
+      <WxMusic
+        :title="props.row.responseTitle"
+        :description="props.row.responseDescription"
+        :thumb-media-url="props.row.responseThumbMediaUrl"
+        :music-url="props.row.responseMusicUrl"
+        :hq-music-url="props.row.responseHqMusicUrl"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mp/autoReply/components/types.ts b/apps/web-antd/src/views/mp/autoReply/components/types.ts
new file mode 100644
index 000000000..f07a7d758
--- /dev/null
+++ b/apps/web-antd/src/views/mp/autoReply/components/types.ts
@@ -0,0 +1,7 @@
+// 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
+// 作为 tab.name，enum 的数字不能随意修改，与 api 参数相关
+export enum MsgType {
+  Follow = 1,
+  Keyword = 3,
+  Message = 2,
+}
diff --git a/apps/web-antd/src/views/mp/autoReply/data.ts b/apps/web-antd/src/views/mp/autoReply/data.ts
new file mode 100644
index 000000000..e3cbef345
--- /dev/null
+++ b/apps/web-antd/src/views/mp/autoReply/data.ts
@@ -0,0 +1,88 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+import { markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { WxAccountSelect } from '#/views/mp/modules/wx-account-select';
+
+import { MsgType } from './components/types';
+
+/** 获取表格列配置 */
+export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
+  const columns: VxeGridPropTypes.Columns = [];
+  // 请求消息类型列（仅消息回复显示）
+  if (msgType === MsgType.Message) {
+    columns.push({
+      field: 'requestMessageType',
+      title: '请求消息类型',
+      minWidth: 120,
+    });
+  }
+
+  // 关键词列（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    columns.push({
+      field: 'requestKeyword',
+      title: '关键词',
+      minWidth: 150,
+    });
+  }
+
+  // 匹配类型列（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    columns.push({
+      field: 'requestMatch',
+      title: '匹配类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH },
+      },
+    });
+  }
+
+  // 回复消息类型列
+  columns.push(
+    {
+      field: 'responseMessageType',
+      title: '回复消息类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_MESSAGE_TYPE },
+      },
+    },
+    {
+      field: 'responseContent',
+      title: '回复内容',
+      minWidth: 200,
+      slots: { default: 'replyContent' },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  );
+  return columns;
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: markRaw(WxAccountSelect),
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/autoReply/index.vue b/apps/web-antd/src/views/mp/autoReply/index.vue
index 06996f6d1..504f79dd7 100644
--- a/apps/web-antd/src/views/mp/autoReply/index.vue
+++ b/apps/web-antd/src/views/mp/autoReply/index.vue
@@ -1,29 +1,261 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { Button } from 'ant-design-vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+import {
+  confirm,
+  ContentWrap,
+  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 { $t } from '#/locales';
+
+import ReplyContentCell from './components/ReplyTable.vue';
+import { MsgType } from './components/types';
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'MpAutoReply' });
+
+const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
+
+/** 切换回复类型 */
+async function onTabChange(tabName: string) {
+  msgType.value = tabName;
+  await nextTick();
+  // 更新 columns
+  const columns = useGridColumns(Number(msgType.value) as MsgType);
+  if (columns) {
+    // 使用 setGridOptions 更新列配置
+    gridApi.setGridOptions({ columns });
+    // 等待列配置更新完成
+    await nextTick();
+  }
+  // 查询数据
+  await gridApi.query();
+  updateTableDataLength();
+}
+
+/** 新增按钮操作 */
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+  formModalApi
+    .setData({
+      isCreating: true,
+      msgType: Number(msgType.value) as MsgType,
+      accountId: formValues.accountId,
+    })
+    .open();
+}
+
+/** 修改按钮操作 */
+async function handleEdit(row: any) {
+  const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
+  formModalApi
+    .setData({
+      isCreating: false,
+      msgType: Number(msgType.value) as MsgType,
+      row: data,
+    })
+    .open();
+}
+
+/** 删除按钮操作 */
+async function handleDelete(row: any) {
+  await confirm('是否确认删除此数据?');
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', ['自动回复']),
+    duration: 0,
+  });
+  try {
+    await MpAutoReplyApi.deleteAutoReply(row.id);
+    message.success('删除成功');
+    await gridApi.query();
+    // 查询完成后更新数据长度
+    updateTableDataLength();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    submitOnChange: true, // 表单值变化时自动提交，这样 accountId 会被正确传递到查询函数
+  },
+  gridOptions: {
+    columns: useGridColumns(Number(msgType.value) as MsgType),
+    height: 'calc(100vh - 300px)',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await MpAutoReplyApi.getAutoReplyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: Number(msgType.value) as MsgType,
+            ...formValues,
+          });
+        },
+      },
+      autoLoad: false, // 禁用自动加载，等表单初始化完成后再加载
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+// TODO @hw：按道理说，不太需呀哦这个？可以微信讨论下哈；
+const tableDataLength = ref(0); // 表格数据长度，用于判断是否显示新增按钮
+
+/** 更新表格数据长度（避免在模板中直接调用 getTableData 导致响应式循环） */
+function updateTableDataLength() {
+  try {
+    if (!gridApi.grid) {
+      return;
+    }
+    const tableData = gridApi.grid.getTableData();
+    tableDataLength.value = tableData?.tableData?.length || 0;
+  } catch {
+    tableDataLength.value = 0;
+  }
+}
+
+// TODO @hw：这个要不改成，直接 tableaction 那判断；
+// 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
+const showCreateButton = computed(() => {
+  if (Number(msgType.value) !== MsgType.Follow) {
+    return true;
+  }
+  return tableDataLength.value <= 0;
+});
+
+// TODO @hw：看看能不能参考 tag/index.vue 简化下
+/** 页面挂载后，等待表单初始化完成再加载数据 */
+onMounted(async () => {
+  // 等待 WxAccountSelect 组件加载并设置默认值
+  await nextTick();
+  if (!gridApi.formApi) {
+    return;
+  }
+  const formValues = await gridApi.formApi.getValues();
+  // 如果 accountId 有值，说明已经准备好了
+  if (formValues.accountId) {
+    // 设置为最新提交的值
+    gridApi.formApi.setLatestSubmissionValues(formValues);
+    // 触发首次查询
+    await gridApi.query();
+    updateTableDataLength();
+  }
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
-    <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/autoReply/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/autoReply/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <!-- 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,
+              },
+            ]"
+          />
+        </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>
   </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
new file mode 100644
index 000000000..86089d473
--- /dev/null
+++ b/apps/web-antd/src/views/mp/autoReply/modules/form.vue
@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+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 ReplyForm from '../components/ReplyForm.vue';
+import { MsgType } from '../components/types';
+
+const emit = defineEmits(['success']);
+
+const formRef = ref<InstanceType<typeof ReplyForm> | null>(null);
+
+const formData = ref<{ isCreating: boolean; msgType: MsgType; row?: any }>();
+const replyForm = ref<any>({});
+const reply = ref<Reply>({
+  type: ReplyType.Text,
+  accountId: -1,
+});
+const getTitle = computed(() => {
+  return formData.value?.isCreating
+    ? $t('ui.actionTitle.create', ['自动回复'])
+    : $t('ui.actionTitle.edit', ['自动回复']);
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+
+    // 处理回复消息
+    const submitForm: any = { ...replyForm.value };
+    submitForm.responseMessageType = reply.value.type;
+    submitForm.responseContent = reply.value.content;
+    submitForm.responseMediaId = reply.value.mediaId;
+    submitForm.responseMediaUrl = reply.value.url;
+    submitForm.responseTitle = reply.value.title;
+    submitForm.responseDescription = reply.value.description;
+    submitForm.responseThumbMediaId = reply.value.thumbMediaId;
+    submitForm.responseThumbMediaUrl = reply.value.thumbMediaUrl;
+    submitForm.responseArticles = reply.value.articles;
+    submitForm.responseMusicUrl = reply.value.musicUrl;
+    submitForm.responseHqMusicUrl = reply.value.hqMusicUrl;
+
+    modalApi.lock();
+    try {
+      if (replyForm.value.id === undefined) {
+        await createAutoReply(submitForm);
+        message.success('新增成功');
+      } else {
+        await updateAutoReply(submitForm);
+        message.success('修改成功');
+      }
+      await modalApi.close();
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      replyForm.value = {};
+      reply.value = {
+        type: ReplyType.Text,
+        accountId: -1,
+      };
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      accountId?: number;
+      isCreating: boolean;
+      msgType: MsgType;
+      row?: any;
+    }>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+
+    if (data.isCreating) {
+      // 新建：初始化表单
+      replyForm.value = {
+        id: undefined,
+        accountId: data.accountId || -1,
+        type: data.msgType,
+        requestKeyword: undefined,
+        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
+        requestMessageType: undefined,
+      };
+      reply.value = {
+        type: ReplyType.Text,
+        accountId: data.accountId || -1,
+      };
+    } else if (data.row) {
+      // 编辑：加载数据
+      const rowData = data.row;
+      replyForm.value = { ...rowData };
+      delete replyForm.value.responseMessageType;
+      delete replyForm.value.responseContent;
+      delete replyForm.value.responseMediaId;
+      delete replyForm.value.responseMediaUrl;
+      delete replyForm.value.responseDescription;
+      delete replyForm.value.responseArticles;
+      reply.value = {
+        type: rowData.responseMessageType,
+        accountId: data.accountId || -1,
+        content: rowData.responseContent,
+        mediaId: rowData.responseMediaId,
+        url: rowData.responseMediaUrl,
+        title: rowData.responseTitle,
+        description: rowData.responseDescription,
+        thumbMediaId: rowData.responseThumbMediaId,
+        thumbMediaUrl: rowData.responseThumbMediaUrl,
+        articles: rowData.responseArticles,
+        musicUrl: rowData.responseMusicUrl,
+        hqMusicUrl: rowData.responseHqMusicUrl,
+      };
+    }
+  },
+});
+</script>
+
+<template>
+  <!-- TODO @hw：可以使用 <Form class="mx-4" /> 这种组件形式么？ -->
+  <Modal :title="getTitle" class="w-4/5">
+    <ReplyForm
+      v-if="formData"
+      v-model="replyForm"
+      v-model:reply="reply"
+      :msg-type="formData.msgType"
+      ref="formRef"
+    />
+  </Modal>
+</template>
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
new file mode 100644
index 000000000..2958e18b9
--- /dev/null
+++ b/apps/web-antd/src/views/mp/draft/components/cover-select.vue
@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'ant-design-vue';
+
+import type { NewsItem } from './types';
+
+import { computed, inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+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';
+
+const props = defineProps<{
+  isFirst: boolean;
+  modelValue: NewsItem;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: NewsItem): void;
+}>();
+
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传永久素材的地址
+const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
+const newsItem = computed<NewsItem>({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+const accountId = inject<number>('accountId');
+const showImageDialog = ref(false);
+
+const fileList = ref<UploadFile[]>([]);
+interface UploadData {
+  type: UploadType;
+  accountId: number;
+}
+const uploadData: UploadData = reactive({
+  type: UploadType.Image,
+  accountId: accountId!,
+});
+
+/** 素材选择完成事件*/
+function onMaterialSelected(item: any) {
+  showImageDialog.value = false;
+  newsItem.value.thumbMediaId = item.mediaId;
+  newsItem.value.thumbUrl = item.url;
+}
+// TODO @hw：注释都补充下哈；
+const onBeforeUpload = (file: UploadFile) =>
+  useBeforeUpload(UploadType.Image, 2)(file as any);
+
+// TODO @hw：注释都补充下哈；
+function onUploadChange(info: any) {
+  if (info.file.status === 'done') {
+    onUploadSuccess(info.file.response || info.file);
+  } else if (info.file.status === 'error') {
+    onUploadError(info.file.error || new Error('上传失败'));
+  }
+}
+
+// TODO @hw：注释都补充下哈；
+function onUploadSuccess(res: any) {
+  if (res.code !== 0) {
+    message.error(`上传出错：${res.msg}`);
+    return false;
+  }
+
+  // 重置上传文件的表单
+  fileList.value = [];
+  // 设置草稿的封面字段
+  newsItem.value.thumbMediaId = res.data.mediaId;
+  newsItem.value.thumbUrl = res.data.url;
+}
+
+// TODO @hw：注释都补充下哈；
+function onUploadError(err: Error) {
+  message.error(`上传失败: ${err.message}`);
+}
+</script>
+
+<template>
+  <div>
+    <p>封面:</p>
+    <!-- TODO @hw：我貌似上传不成功。不确定是不是我这边的问题；；；可以微信沟通下哈。 -->
+    <div class="thumb-div">
+      <Image
+        v-if="newsItem.thumbUrl"
+        style="width: 300px; max-height: 300px"
+        :src="newsItem.thumbUrl"
+        :preview="false"
+      />
+      <IconifyIcon
+        v-else
+        icon="lucide:plus"
+        class="avatar-uploader-icon"
+        :class="isFirst ? 'avatar' : 'avatar1'"
+      />
+      <div class="thumb-but">
+        <div class="flex items-center justify-center">
+          <Upload
+            :action="UPLOAD_URL"
+            :headers="HEADERS"
+            :file-list="fileList"
+            :data="{ ...uploadData }"
+            :before-upload="onBeforeUpload"
+            @change="onUploadChange"
+          >
+            <template #default>
+              <Button size="small" type="primary">本地上传</Button>
+            </template>
+          </Upload>
+          <!-- TODO @hw：tindwind -->
+          <Button
+            size="small"
+            type="primary"
+            @click="showImageDialog = true"
+            style="margin-left: 5px"
+          >
+            素材库选择
+          </Button>
+        </div>
+
+        <div class="upload-tip">
+          支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
+        </div>
+      </div>
+      <!-- TODO @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 -->
+      <Modal
+        title="选择图片"
+        v-model:open="showImageDialog"
+        width="80%"
+        destroy-on-close
+      >
+        <WxMaterialSelect
+          type="image"
+          :account-id="accountId!"
+          @select-material="onMaterialSelected"
+        />
+      </Modal>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
+.upload-tip {
+  margin-top: 5px;
+  margin-left: 5px;
+  font-size: 12px;
+  color: #999;
+}
+
+.thumb-div {
+  display: inline-block;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+
+  .avatar-uploader-icon {
+    width: 120px;
+    height: 120px;
+    font-size: 28px;
+    line-height: 120px;
+    color: #8c939d;
+    text-align: center;
+    border: 1px solid #d9d9d9;
+  }
+
+  .avatar {
+    width: 230px;
+    height: 120px;
+  }
+
+  .avatar1 {
+    width: 120px;
+    height: 120px;
+  }
+
+  .thumb-but {
+    margin: 5px;
+  }
+}
+</style>
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
new file mode 100644
index 000000000..6e4f12af4
--- /dev/null
+++ b/apps/web-antd/src/views/mp/draft/components/draft-table.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { Article } from './types';
+
+import { WxNews } from '#/views/mp/modules/wx-news';
+
+defineOptions({ name: 'DraftTableCell' });
+
+const props = defineProps<{
+  row: Article;
+}>();
+</script>
+
+<template>
+  <div class="p-2.5">
+    <div v-if="props.row.content && props.row.content.newsItem">
+      <WxNews :articles="props.row.content.newsItem" />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mp/draft/components/news-form.vue b/apps/web-antd/src/views/mp/draft/components/news-form.vue
new file mode 100644
index 000000000..365137fd5
--- /dev/null
+++ b/apps/web-antd/src/views/mp/draft/components/news-form.vue
@@ -0,0 +1,338 @@
+<script lang="ts" setup>
+import type { NewsItem } from './types';
+
+import { computed, ref } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Col, Input, Layout, Row, Textarea } from 'ant-design-vue';
+
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+
+import CoverSelect from './cover-select.vue';
+import { createEmptyNewsItem } from './types';
+
+defineOptions({ name: 'NewsForm' });
+
+const props = defineProps<{
+  isCreating: boolean;
+  modelValue: NewsItem[] | null;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: NewsItem[]): void;
+}>();
+
+const newsList = computed<NewsItem[]>({
+  get() {
+    return props.modelValue === null
+      ? [createEmptyNewsItem()]
+      : props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+const activeNewsIndex = ref(0);
+const activeNewsItem = computed(() => {
+  const item = newsList.value[activeNewsIndex.value];
+  if (!item) {
+    return createEmptyNewsItem();
+  }
+  return item;
+});
+
+// TODO @hw：注释使用 /** */
+// 将图文向下移动
+function moveDownNews(index: number) {
+  const current = newsList.value[index];
+  const next = newsList.value[index + 1];
+  if (current && next) {
+    newsList.value[index] = next;
+    newsList.value[index + 1] = current;
+    activeNewsIndex.value = index + 1;
+  }
+}
+
+// 将图文向上移动
+function moveUpNews(index: number) {
+  const current = newsList.value[index];
+  const prev = newsList.value[index - 1];
+  if (current && prev) {
+    newsList.value[index] = prev;
+    newsList.value[index - 1] = current;
+    activeNewsIndex.value = index - 1;
+  }
+}
+
+// 删除指定 index 的图文
+async function removeNews(index: number) {
+  await confirm('确定删除该图文吗?');
+  newsList.value.splice(index, 1);
+  if (activeNewsIndex.value === index) {
+    activeNewsIndex.value = 0;
+  }
+}
+
+// 添加一个图文
+function plusNews() {
+  newsList.value.push(createEmptyNewsItem());
+  activeNewsIndex.value = newsList.value.length - 1;
+}
+</script>
+
+<template>
+  <Layout>
+    <Layout.Sider width="40%" theme="light">
+      <div class="select-item">
+        <div v-for="(news, index) in newsList" :key="index">
+          <div
+            class="news-main father"
+            v-if="index === 0"
+            :class="{ activeAddNews: activeNewsIndex === index }"
+            @click="activeNewsIndex = index"
+          >
+            <div class="news-content">
+              <img class="material-img" :src="news.thumbUrl" />
+              <div class="news-content-title">{{ news.title }}</div>
+            </div>
+            <div class="child" v-if="newsList.length > 1">
+              <Button
+                type="default"
+                shape="circle"
+                size="small"
+                @click="() => moveDownNews(index)"
+              >
+                <IconifyIcon icon="lucide:arrow-down" />
+              </Button>
+              <Button
+                v-if="isCreating"
+                type="primary"
+                danger
+                shape="circle"
+                size="small"
+                @click="() => removeNews(index)"
+              >
+                <IconifyIcon icon="lucide:trash-2" />
+              </Button>
+            </div>
+          </div>
+          <div
+            class="news-main-item father"
+            v-if="index > 0"
+            :class="{ activeAddNews: activeNewsIndex === index }"
+            @click="activeNewsIndex = index"
+          >
+            <div class="news-content-item">
+              <div class="news-content-item-title">{{ news.title }}</div>
+              <div class="news-content-item-img">
+                <img class="material-img" :src="news.thumbUrl" width="100%" />
+              </div>
+            </div>
+            <div class="child">
+              <Button
+                v-if="newsList.length > index + 1"
+                shape="circle"
+                type="default"
+                size="small"
+                @click="() => moveDownNews(index)"
+              >
+                <IconifyIcon icon="lucide:arrow-down" />
+              </Button>
+              <Button
+                v-if="index > 0"
+                type="default"
+                shape="circle"
+                size="small"
+                @click="() => moveUpNews(index)"
+              >
+                <IconifyIcon icon="lucide:arrow-up" />
+              </Button>
+              <Button
+                v-if="isCreating"
+                type="primary"
+                danger
+                size="small"
+                shape="circle"
+                @click="() => removeNews(index)"
+              >
+                <IconifyIcon icon="lucide:trash-2" />
+              </Button>
+            </div>
+          </div>
+        </div>
+        <Row justify="center" class="ope-row">
+          <Button
+            type="primary"
+            shape="circle"
+            @click="plusNews"
+            v-if="newsList.length < 8 && isCreating"
+          >
+            <IconifyIcon icon="lucide:plus" />
+          </Button>
+        </Row>
+      </div>
+    </Layout.Sider>
+    <Layout.Content :style="{ backgroundColor: '#fff' }">
+      <div v-if="newsList.length > 0 && activeNewsItem">
+        <!-- 标题、作者、原文地址 -->
+        <Row :gutter="20">
+          <Col :span="24">
+            <Input
+              v-model:value="activeNewsItem.title"
+              placeholder="请输入标题（必填）"
+            />
+          </Col>
+          <Col :span="24" style="margin-top: 5px">
+            <Input
+              v-model:value="activeNewsItem.author"
+              placeholder="请输入作者"
+            />
+          </Col>
+          <Col :span="24" style="margin-top: 5px">
+            <Input
+              v-model:value="activeNewsItem.contentSourceUrl"
+              placeholder="请输入原文地址"
+            />
+          </Col>
+        </Row>
+        <!-- 封面和摘要 -->
+        <Row :gutter="20">
+          <Col :span="12">
+            <CoverSelect
+              v-model="activeNewsItem"
+              :is-first="activeNewsIndex === 0"
+            />
+          </Col>
+          <Col :span="12">
+            <p>摘要:</p>
+            <Textarea
+              :rows="8"
+              v-model:value="activeNewsItem.digest"
+              placeholder="请输入摘要"
+              class="digest"
+              :maxlength="120"
+              :show-count="true"
+            />
+          </Col>
+        </Row>
+        <!--富文本编辑器组件-->
+        <Row>
+          <Col :span="24">
+            <RichTextarea v-model="activeNewsItem.content" />
+          </Col>
+        </Row>
+      </div>
+    </Layout.Content>
+  </Layout>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
+.ope-row {
+  padding-top: 5px;
+  margin-top: 5px;
+  text-align: center;
+  border-top: 1px solid #eaeaea;
+}
+
+:deep(.ant-row) {
+  margin-bottom: 20px;
+}
+
+:deep(.ant-row:last-child) {
+  margin-bottom: 0;
+}
+
+.digest {
+  display: inline-block;
+  width: 100%;
+  vertical-align: top;
+}
+
+/* 新增图文 */
+.news-main {
+  width: 100%;
+  height: 120px;
+  margin: auto;
+  background-color: #fff;
+}
+
+.news-content {
+  position: relative;
+  width: 100%;
+  height: 120px;
+  background-color: #acadae;
+}
+
+.news-content-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: inline-block;
+  width: 98%;
+  height: 25px;
+  padding: 1%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 15px;
+  color: #fff;
+  white-space: nowrap;
+  background-color: black;
+  opacity: 0.65;
+}
+
+.news-main-item {
+  width: 100%;
+  padding: 5px 0;
+  margin: auto;
+  background-color: #fff;
+  border-top: 1px solid #eaeaea;
+}
+
+.news-content-item {
+  position: relative;
+  margin-left: -3px;
+}
+
+.news-content-item-title {
+  display: inline-block;
+  width: 70%;
+  font-size: 12px;
+}
+
+.news-content-item-img {
+  display: inline-block;
+  width: 25%;
+  background-color: #acadae;
+}
+
+.select-item {
+  width: 60%;
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+
+  .activeAddNews {
+    border: 5px solid #2bb673;
+  }
+}
+
+.father .child {
+  position: relative;
+  bottom: 25px;
+  display: none;
+  text-align: center;
+}
+
+.father:hover .child {
+  display: block;
+}
+
+.material-img {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/draft/components/types.ts b/apps/web-antd/src/views/mp/draft/components/types.ts
new file mode 100644
index 000000000..43c6f60af
--- /dev/null
+++ b/apps/web-antd/src/views/mp/draft/components/types.ts
@@ -0,0 +1,42 @@
+// TODO @hw：要不把 components 里的部分，拿到 modules 里。
+interface NewsItem {
+  title: string;
+  thumbMediaId: string;
+  author: string;
+  digest: string;
+  showCoverPic: number;
+  content: string;
+  contentSourceUrl: string;
+  needOpenComment: number;
+  onlyFansCanComment: number;
+  thumbUrl: string;
+  picUrl?: string; // 用于预览封面
+}
+
+interface NewsItemList {
+  newsItem: NewsItem[];
+}
+
+interface Article {
+  mediaId: string;
+  content: NewsItemList;
+  updateTime: number;
+}
+
+const createEmptyNewsItem = (): NewsItem => {
+  return {
+    title: '',
+    thumbMediaId: '',
+    author: '',
+    digest: '',
+    showCoverPic: 0,
+    content: '',
+    contentSourceUrl: '',
+    needOpenComment: 0,
+    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
new file mode 100644
index 000000000..2ee398fd1
--- /dev/null
+++ b/apps/web-antd/src/views/mp/draft/data.ts
@@ -0,0 +1,42 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { markRaw } from 'vue';
+
+import { WxAccountSelect } from '#/views/mp/modules/wx-account-select';
+
+/** 获取表格列配置 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'content',
+      title: '图文内容',
+      minWidth: 300,
+      slots: { default: 'content' },
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+// TODO @hw：这里的公众号选择，要改参考 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/tag/data.ts；相关联的代码还简单点~
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: markRaw(WxAccountSelect),
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/draft/index.vue b/apps/web-antd/src/views/mp/draft/index.vue
index 9f1b6297b..e1185adcc 100644
--- a/apps/web-antd/src/views/mp/draft/index.vue
+++ b/apps/web-antd/src/views/mp/draft/index.vue
@@ -1,29 +1,313 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { Article } from './components/types';
 
-import { Button } from 'ant-design-vue';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { nextTick, onMounted, provide, ref, watch } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+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 { createEmptyNewsItem } from '#/views/mp/draft/components/types';
+
+import DraftTableCell from './components/draft-table.vue';
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'MpDraft' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+// TODO @hw：下面的方法，放到这个前面，和别的保持一致；
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          // 更新 accountId
+          if (formValues?.accountId) {
+            accountId.value = formValues.accountId;
+          }
+          const drafts = await MpDraftApi.getDraftPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+          // 处理 API 返回的数据，兼容不同的数据结构
+          // TODO @wx：看 yudao-ui-admin-vue3/src/views/mp/draft/index.vue 项目里，转换没这么复杂。。。是不是这里有办法简化下？
+          const formattedList: Article[] = drafts.list.map((draft: any) => {
+            // 如果已经是 content.newsItem 格式，直接使用
+            if (draft.content?.newsItem) {
+              const newsItem = draft.content.newsItem.map((item: any) => ({
+                ...item,
+                picUrl: item.thumbUrl || item.picUrl,
+              }));
+              return {
+                mediaId: draft.mediaId,
+                content: {
+                  newsItem,
+                },
+                updateTime:
+                  draft.updateTime ||
+                  (draft.createTime
+                    ? new Date(draft.createTime).getTime()
+                    : Date.now()),
+              };
+            }
+            // 如果是 articles 格式，转换为 content.newsItem 格式
+            if (draft.articles) {
+              const newsItem = draft.articles.map((article: any) => ({
+                ...article,
+                thumbUrl: article.thumbUrl || article.thumbMediaId,
+                picUrl: article.thumbUrl || article.thumbMediaId,
+              }));
+              return {
+                mediaId: draft.mediaId,
+                content: {
+                  newsItem,
+                },
+                updateTime:
+                  draft.updateTime ||
+                  (draft.createTime
+                    ? new Date(draft.createTime).getTime()
+                    : Date.now()),
+              };
+            }
+            // 默认返回空结构
+            return {
+              mediaId: draft.mediaId || '',
+              content: {
+                newsItem: [],
+              },
+              updateTime: draft.updateTime || Date.now(),
+            };
+          });
+          return {
+            page: {
+              total: drafts.total,
+            },
+            result: formattedList,
+          };
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Article>,
+});
+
+// 提供 accountId 给子组件
+// TODO @hw：参考 tag/index.vue 放到 formValues.accountId;
+const accountId = ref<number>(-1);
+
+// 监听表单提交，更新 accountId
+// TODO @hw：看看这个 watch、provide 能不能简化掉；
+watch(
+  () => gridApi.formApi?.getLatestSubmissionValues?.()?.accountId,
+  (newAccountId) => {
+    if (newAccountId !== undefined) {
+      accountId.value = newAccountId;
+    }
+  },
+);
+
+provide('accountId', accountId);
+
+/** 新增按钮操作 */
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    message.warning('请先选择公众号');
+    return;
+  }
+  formModalApi
+    .setData({
+      isCreating: true,
+      accountId,
+      newsList: [createEmptyNewsItem()],
+    })
+    .open();
+}
+
+/** 修改按钮操作 */
+async function handleEdit(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    message.warning('请先选择公众号');
+    return;
+  }
+  formModalApi
+    .setData({
+      isCreating: false,
+      accountId,
+      mediaId: row.mediaId,
+      newsList: structuredClone(row.content.newsItem),
+    })
+    .open();
+}
+
+/** 发布按钮操作 */
+async function handlePublish(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  // TODO @hw：看看能不能去掉 -1 的判断哈？
+  if (!accountId || accountId === -1) {
+    message.warning('请先选择公众号');
+    return;
+  }
+  await confirm(
+    '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。' +
+      '已发布内容不会推送给用户，也不会展示在公众号主页中。 ' +
+      '发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。',
+  );
+  const hideLoading = message.loading({
+    content: '发布中...',
+    duration: 0,
+  });
+  // TODO @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
+  try {
+    await MpFreePublishApi.submitFreePublish(accountId, row.mediaId);
+    message.success('发布成功');
+    await gridApi.query();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 删除按钮操作 */
+async function handleDelete(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    message.warning('请先选择公众号');
+    return;
+  }
+  await confirm('此操作将永久删除该草稿, 是否继续?');
+  const hideLoading = message.loading({
+    content: '删除中...',
+    duration: 0,
+  });
+  try {
+    await MpDraftApi.deleteDraft(accountId, row.mediaId);
+    message.success('删除成功');
+    await gridApi.query();
+  } finally {
+    hideLoading();
+  }
+}
+
+// TODO @hw：看看能不能参考 tag/index.vue 简化下
+// 页面挂载后，等待表单初始化完成再加载数据
+onMounted(async () => {
+  await nextTick();
+  if (gridApi.formApi) {
+    const formValues = await gridApi.formApi.getValues();
+    if (formValues.accountId) {
+      accountId.value = formValues.accountId;
+      gridApi.formApi.setLatestSubmissionValues(formValues);
+      await gridApi.query();
+    }
+  }
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
-    <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/draft/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/draft/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <!-- TODO @hw：参考别的模块 @success 调用 refresh 方法； -->
+    <FormModal
+      @success="
+        () => {
+          gridApi.query();
+        }
+      "
+    />
+
+    <Grid table-title="草稿列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['图文草稿']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mp:draft:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #content="{ row }">
+        <DraftTableCell :row="row" />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '发布',
+              type: 'link',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['mp:free-publish:submit'],
+              onClick: handlePublish.bind(null, row),
+            },
+            {
+              label: '编辑',
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:draft:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:draft:delete'],
+              popConfirm: {
+                title: '是否确认删除此数据?',
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
+
+<style lang="scss" scoped>
+:deep(.vxe-table--body-wrapper) {
+  .vxe-table--body {
+    .vxe-body--column {
+      .vxe-cell {
+        padding: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/draft/modules/form.vue b/apps/web-antd/src/views/mp/draft/modules/form.vue
new file mode 100644
index 000000000..25ce21bc7
--- /dev/null
+++ b/apps/web-antd/src/views/mp/draft/modules/form.vue
@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import type { NewsItem } from '../components/types';
+
+import { computed, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+
+import { message, Spin } from 'ant-design-vue';
+
+import { createDraft, updateDraft } from '#/api/mp/draft';
+
+import NewsForm from '../components/news-form.vue';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<{
+  accountId: number;
+  // TODO @hw：是不是通过 id 字段判断是否为新增？类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue
+  isCreating: boolean;
+  mediaId?: string;
+  newsList?: NewsItem[];
+}>();
+const newsList = ref<NewsItem[]>([]);
+// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
+const isSubmitting = ref(false);
+// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
+const isSaved = ref(false);
+
+const getTitle = computed(() => {
+  return formData.value?.isCreating ? '新建图文' : '修改图文';
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!formData.value) {
+      return;
+    }
+
+    isSubmitting.value = true;
+    modalApi.lock();
+    try {
+      if (formData.value.isCreating) {
+        await createDraft(formData.value.accountId, newsList.value);
+        message.success('新增成功');
+      } else if (formData.value.mediaId) {
+        await updateDraft(
+          formData.value.accountId,
+          formData.value.mediaId,
+          newsList.value,
+        );
+        message.success('更新成功');
+      }
+      isSaved.value = true;
+      await modalApi.close();
+      emit('success');
+    } finally {
+      isSubmitting.value = false;
+      modalApi.unlock();
+    }
+  },
+  async onBeforeClose() {
+    // 如果已经成功保存，直接关闭，不显示提示
+    if (isSaved.value) {
+      return true;
+    }
+    try {
+      await confirm('修改内容可能还未保存，确定关闭吗?');
+      return true;
+    } catch {
+      return false;
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      newsList.value = [];
+      isSaved.value = false;
+      return;
+    }
+    isSaved.value = false;
+    const data = modalApi.getData<{
+      accountId: number;
+      isCreating: boolean;
+      mediaId?: string;
+      newsList?: NewsItem[];
+    }>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+    newsList.value = data.newsList || [];
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5" destroy-on-close>
+    <Spin :spinning="isSubmitting">
+      <NewsForm
+        v-if="formData"
+        v-model="newsList"
+        :is-creating="formData.isCreating"
+      />
+    </Spin>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mp/menu/components/assets/iphone_backImg.png b/apps/web-antd/src/views/mp/menu/components/assets/iphone_backImg.png
new file mode 100644
index 000000000..bb09591a7
Binary files /dev/null and b/apps/web-antd/src/views/mp/menu/components/assets/iphone_backImg.png differ
diff --git a/apps/web-antd/src/views/mp/menu/components/assets/menu_foot.png b/apps/web-antd/src/views/mp/menu/components/assets/menu_foot.png
new file mode 100644
index 000000000..4a89d4bd2
Binary files /dev/null and b/apps/web-antd/src/views/mp/menu/components/assets/menu_foot.png differ
diff --git a/apps/web-antd/src/views/mp/menu/components/assets/menu_head.png b/apps/web-antd/src/views/mp/menu/components/assets/menu_head.png
new file mode 100644
index 000000000..248cfb761
Binary files /dev/null and b/apps/web-antd/src/views/mp/menu/components/assets/menu_head.png differ
diff --git a/apps/web-antd/src/views/mp/menu/components/index.ts b/apps/web-antd/src/views/mp/menu/components/index.ts
new file mode 100644
index 000000000..02a277aba
--- /dev/null
+++ b/apps/web-antd/src/views/mp/menu/components/index.ts
@@ -0,0 +1,5 @@
+// TODO @hw：如果只有自己组件里用，一般是 modules，所以这个目录要改成 modules 哈（自己模块的一部分）；如果要给外部的组件用，可以叫 components；
+export { default as MenuEditor } from './menu-editor.vue';
+export { default as MenuPreviewer } from './menu-previewer.vue';
+export * from './menuOptions';
+export type * from './types';
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
new file mode 100644
index 000000000..6044b520d
--- /dev/null
+++ b/apps/web-antd/src/views/mp/menu/components/menu-editor.vue
@@ -0,0 +1,292 @@
+<script lang="ts" setup>
+// TODO @hw：名字可以缩写成 editor.vue，文件名
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Col,
+  Input,
+  message,
+  Modal,
+  Row,
+  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 menuOptions from './menuOptions';
+
+const props = defineProps<{
+  accountId: number;
+  isParent: boolean;
+  modelValue: any;
+}>();
+
+const emit = defineEmits<{
+  (e: 'delete', v: void): void;
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const menu = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+const showNewsDialog = ref(false);
+const hackResetWxReplySelect = ref(false);
+const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
+
+watch(menu, () => {
+  hackResetWxReplySelect.value = false; // 销毁组件
+  nextTick(() => {
+    hackResetWxReplySelect.value = true; // 重建组件
+  });
+});
+
+// ======================== 菜单编辑（素材选择） ========================
+/** 选择素材 */
+function selectMaterial(item: any) {
+  const articleId = item.articleId;
+  const articles = item.content.newsItem;
+  // 提示，针对多图文
+  if (articles.length > 1) {
+    message.warning('您选择的是多图文，将默认跳转第一篇');
+  }
+  showNewsDialog.value = false;
+
+  // 设置菜单的回复
+  menu.value.articleId = articleId;
+  menu.value.replyArticles = [];
+  articles.forEach((article: any) => {
+    menu.value.replyArticles.push({
+      title: article.title,
+      description: article.digest,
+      picUrl: article.picUrl,
+      url: article.url,
+    });
+  });
+}
+
+/** 删除素材 */
+function deleteMaterial() {
+  delete menu.value.articleId;
+  delete menu.value.replyArticles;
+}
+</script>
+
+<template>
+  <div>
+    <div class="configure-page">
+      <div class="delete-btn">
+        <Button type="primary" danger @click="emit('delete')">
+          <IconifyIcon icon="lucide:trash-2" />
+          删除当前菜单
+        </Button>
+      </div>
+      <div>
+        <span>菜单名称：</span>
+        <Input
+          class="input-width"
+          v-model:value="menu.name"
+          placeholder="请输入菜单名称"
+          :maxlength="isParent ? 4 : 7"
+          allow-clear
+        />
+      </div>
+      <div v-if="isLeave">
+        <div class="menu-content">
+          <span>菜单标识：</span>
+          <Input
+            class="input-width"
+            v-model:value="menu.menuKey"
+            placeholder="请输入菜单 KEY"
+            allow-clear
+          />
+        </div>
+        <div class="menu-content">
+          <span>菜单内容：</span>
+          <Select
+            v-model:value="menu.type"
+            placeholder="请选择"
+            class="input-width"
+            allow-clear
+          >
+            <Select.Option
+              v-for="item in menuOptions"
+              :label="item.label"
+              :value="item.value"
+              :key="item.value"
+            >
+              {{ item.label }}
+            </Select.Option>
+          </Select>
+        </div>
+        <div class="configur-content" v-if="menu.type === 'view'">
+          <span>跳转链接：</span>
+          <Input
+            class="input-width"
+            v-model:value="menu.url"
+            placeholder="请输入链接"
+            allow-clear
+          />
+        </div>
+        <!-- TODO @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； -->
+        <div class="configur-content" v-if="menu.type === 'miniprogram'">
+          <div class="applet">
+            <span>小程序的 appid ：</span>
+            <Input
+              class="input-width"
+              v-model:value="menu.miniProgramAppId"
+              placeholder="请输入小程序的appid"
+              allow-clear
+            />
+          </div>
+          <div class="applet">
+            <span>小程序的页面路径：</span>
+            <Input
+              class="input-width"
+              v-model:value="menu.miniProgramPagePath"
+              placeholder="请输入小程序的页面路径，如：pages/index"
+              allow-clear
+            />
+          </div>
+          <div class="applet">
+            <span>小程序的备用网页：</span>
+            <Input
+              class="input-width"
+              v-model:value="menu.url"
+              placeholder="不支持小程序的老版本客户端将打开本网页"
+              allow-clear
+            />
+          </div>
+          <p class="blue">
+            tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
+          </p>
+        </div>
+        <div
+          class="configur-content"
+          v-if="menu.type === 'article_view_limited'"
+        >
+          <Row>
+            <div class="select-item" v-if="menu && menu.replyArticles">
+              <WxNews :articles="menu.replyArticles" />
+              <Row class="ope-row" justify="center" align="middle">
+                <Button
+                  type="primary"
+                  danger
+                  shape="circle"
+                  @click="deleteMaterial"
+                >
+                  <IconifyIcon icon="lucide:trash-2" />
+                </Button>
+              </Row>
+            </div>
+            <div v-else>
+              <Row justify="center">
+                <!-- TODO @hw：html 标签里的 style 要用 tindwind 替代下； -->
+                <Col :span="24" style="text-align: center">
+                  <Button type="primary" @click="showNewsDialog = true">
+                    素材库选择
+                    <IconifyIcon icon="lucide:circle-check" />
+                  </Button>
+                </Col>
+              </Row>
+            </div>
+            <Modal
+              title="选择图文"
+              v-model:open="showNewsDialog"
+              width="80%"
+              destroy-on-close
+            >
+              <WxMaterialSelect
+                type="news"
+                :account-id="props.accountId"
+                @select-material="selectMaterial"
+              />
+            </Modal>
+          </Row>
+        </div>
+        <!-- TODO @hw：貌似这个组件出不来 -->
+        <div
+          class="configur-content"
+          v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
+        >
+          <WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
+        </div>
+        <!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
+:deep(.ant-input) {
+  // width: 70%;
+  margin-right: 2%;
+}
+
+.configure-page {
+  .delete-btn {
+    margin-bottom: 15px;
+    text-align: right;
+  }
+
+  .menu-content {
+    margin-top: 20px;
+  }
+
+  .configur-content {
+    padding: 20px 10px;
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+
+    .select-item {
+      width: 280px;
+      padding: 10px;
+      margin: 0 auto 10px;
+      border: 1px solid #eaeaea;
+
+      .ope-row {
+        padding-top: 10px;
+        text-align: center;
+      }
+    }
+  }
+
+  .blue {
+    margin-top: 10px;
+    color: #29b6f6;
+  }
+
+  .applet {
+    margin-bottom: 20px;
+
+    span {
+      width: 20%;
+    }
+  }
+
+  .input-width {
+    width: 240px;
+  }
+
+  .material {
+    .input-width {
+      width: 30%;
+    }
+
+    :deep(.ant-input) {
+      width: 80%;
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/menu/components/menu-previewer.vue b/apps/web-antd/src/views/mp/menu/components/menu-previewer.vue
new file mode 100644
index 000000000..cbdc1bee5
--- /dev/null
+++ b/apps/web-antd/src/views/mp/menu/components/menu-previewer.vue
@@ -0,0 +1,256 @@
+<script lang="ts" setup>
+// TODO @hw：名字可以缩写成 previewer.vue，文件名
+import type { Menu } from './types';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import draggable from 'vuedraggable';
+
+const props = defineProps<{
+  accountId: number;
+  activeIndex: string;
+  modelValue: Menu[];
+  parentIndex: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Menu[]): void;
+  (e: 'menuClicked', parent: Menu, x: number): void;
+  (e: 'submenuClicked', child: Menu, x: number, y: number): void;
+}>();
+
+const menuList = computed<Menu[]>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+/** 添加横向一级菜单 */
+function addMenu() {
+  const index = menuList.value.length;
+  const menu = {
+    name: '菜单名称',
+    children: [],
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
+    },
+  };
+  menuList.value[index] = menu;
+  menuClicked(menu, index - 1);
+}
+
+/** 添加横向二级菜单；parent 表示要操作的父菜单 */
+function addSubMenu(i: number, parent: any) {
+  const subMenuKeyLength = parent.children.length; // 获取二级菜单 key 长度
+  // TODO @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
+  const addButton = {
+    name: '子菜单名称',
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
+    },
+  };
+  parent.children[subMenuKeyLength] = addButton;
+  subMenuClicked(parent.children[subMenuKeyLength], i, subMenuKeyLength);
+}
+
+/** 一级菜单点击 */
+function menuClicked(parent: Menu, x: number) {
+  emit('menuClicked', parent, x);
+}
+
+/** 二级菜单点击 */
+function subMenuClicked(child: Menu, x: number, y: number) {
+  emit('submenuClicked', child, x, y);
+}
+
+/**
+ * 处理一级菜单展开后被拖动，激活(展开)原来活动的一级菜单
+ *
+ * @param options - 拖动参数对象
+ * @param options.oldIndex - 一级菜单拖动前的位置
+ * @param options.newIndex - 一级菜单拖动后的位置
+ */
+function onParentDragEnd({
+  oldIndex,
+  newIndex,
+}: {
+  newIndex: number;
+  oldIndex: number;
+}) {
+  // 二级菜单没有展开，直接返回
+  if (props.activeIndex === '__MENU_NOT_SELECTED__') {
+    return;
+  }
+
+  // 使用一个辅助数组来模拟菜单移动，然后找到展开的二级菜单的新下标`newParent`
+  const positions = Array.from({ length: menuList.value.length }).fill(false);
+  positions[props.parentIndex] = true;
+  const [out] = positions.splice(oldIndex, 1); // 移出菜单，保存到变量out
+  positions.splice(newIndex, 0, out ?? false); // 把out变量插入被移出的菜单
+  const newParentIndex = positions.indexOf(true);
+
+  // 找到菜单元素，触发一级菜单点击
+  const parent = menuList.value[newParentIndex];
+  if (parent && newParentIndex !== -1) {
+    emit('menuClicked', parent, newParentIndex);
+  }
+}
+
+/**
+ * 处理二级菜单展开后被拖动，激活被拖动的菜单
+ *
+ * @param options - 拖动参数对象
+ * @param options.newIndex - 二级菜单拖动后的位置
+ */
+function onChildDragEnd({ newIndex }: { newIndex: number }) {
+  const x = props.parentIndex;
+  const y = newIndex;
+  const children = menuList.value[x]?.children;
+  if (children && children?.length > 0) {
+    const child = children[y];
+    if (child) {
+      emit('submenuClicked', child, x, y);
+    }
+  }
+}
+</script>
+
+<template>
+  <draggable
+    v-model="menuList"
+    item-key="id"
+    ghost-class="draggable-ghost"
+    :animation="400"
+    @end="onParentDragEnd"
+  >
+    <template #item="{ element: parent, index: x }">
+      <div class="menu-bottom">
+        <!-- 一级菜单 -->
+        <div
+          @click="menuClicked(parent, x)"
+          class="menu-item"
+          :class="{ active: props.activeIndex === `${x}` }"
+        >
+          <IconifyIcon icon="lucide:panel-right-open" color="black" />
+          {{ parent.name }}
+        </div>
+        <!-- 以下为二级菜单-->
+        <div class="submenu" v-if="props.parentIndex === x && parent.children">
+          <draggable
+            v-model="parent.children"
+            item-key="id"
+            ghost-class="draggable-ghost"
+            :animation="400"
+            @end="onChildDragEnd"
+          >
+            <template #item="{ element: child, index: y }">
+              <div class="menu-bottom subtitle">
+                <div
+                  class="menu-sub-item"
+                  v-if="parent.children"
+                  :class="{ active: props.activeIndex === `${x}-${y}` }"
+                  @click="subMenuClicked(child, x, y)"
+                >
+                  {{ child.name }}
+                </div>
+              </div>
+            </template>
+          </draggable>
+          <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
+          <div
+            class="menu-bottom menu-addicon"
+            v-if="!parent.children || parent.children.length < 5"
+            @click="addSubMenu(x, parent)"
+          >
+            <IconifyIcon icon="lucide:plus" class="plus" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </draggable>
+
+  <!-- 一级菜单加号 -->
+  <div
+    class="menu-bottom menu-addicon"
+    v-if="menuList.length < 3"
+    @click="addMenu"
+  >
+    <IconifyIcon icon="lucide:plus" class="plus" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
+.menu-bottom {
+  position: relative;
+  float: left;
+  box-sizing: border-box;
+  display: block;
+  width: 85.5px;
+  text-align: center;
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #ebedee;
+
+  &.menu-addicon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 46px;
+    line-height: 46px;
+
+    .plus {
+      color: #2bb673;
+    }
+  }
+
+  .menu-item {
+    // text-align: center;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+
+    &.active {
+      border: 1px solid #2bb673;
+    }
+  }
+
+  .menu-sub-item {
+    box-sizing: border-box;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+
+    &.active {
+      border: 1px solid #2bb673;
+    }
+  }
+}
+
+/* 第二级菜单 */
+.submenu {
+  position: absolute;
+  bottom: 45px;
+  width: 85.5px;
+
+  .subtitle {
+    box-sizing: border-box;
+    background-color: #fff;
+  }
+}
+
+.draggable-ghost {
+  background: #f7fafc;
+  border: 1px solid #4299e1;
+  opacity: 0.5;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/menu/components/menuOptions.ts b/apps/web-antd/src/views/mp/menu/components/menuOptions.ts
new file mode 100644
index 000000000..565f0e221
--- /dev/null
+++ b/apps/web-antd/src/views/mp/menu/components/menuOptions.ts
@@ -0,0 +1,43 @@
+// TODO @hw：这个要不合并到 types 里；
+export default [
+  {
+    value: 'view',
+    label: '跳转网页',
+  },
+  {
+    value: 'miniprogram',
+    label: '跳转小程序',
+  },
+  {
+    value: 'click',
+    label: '点击回复',
+  },
+  {
+    value: 'article_view_limited',
+    label: '跳转图文消息',
+  },
+  {
+    value: 'scancode_push',
+    label: '扫码直接返回结果',
+  },
+  {
+    value: 'scancode_waitmsg',
+    label: '扫码回复',
+  },
+  {
+    value: 'pic_sysphoto',
+    label: '系统拍照发图',
+  },
+  {
+    value: 'pic_photo_or_album',
+    label: '拍照或者相册',
+  },
+  {
+    value: 'pic_weixin',
+    label: '微信相册',
+  },
+  {
+    value: 'location_select',
+    label: '选择地理位置',
+  },
+];
diff --git a/apps/web-antd/src/views/mp/menu/components/types.ts b/apps/web-antd/src/views/mp/menu/components/types.ts
new file mode 100644
index 000000000..928534ea9
--- /dev/null
+++ b/apps/web-antd/src/views/mp/menu/components/types.ts
@@ -0,0 +1,73 @@
+export interface Replay {
+  title: string;
+  description: string;
+  picUrl: string;
+  url: string;
+}
+
+export type MenuType =
+  | ''
+  | 'article_view_limited'
+  | 'click'
+  | 'location_select'
+  | 'pic_photo_or_album'
+  | 'pic_sysphoto'
+  | 'pic_weixin'
+  | 'scancode_push'
+  | 'scancode_waitmsg'
+  | 'view';
+
+interface _RawMenu {
+  // db
+  id: number;
+  parentId: number;
+  accountId: number;
+  appId: string;
+  createTime: number;
+
+  // mp-native
+  name: string;
+  menuKey: string;
+  type: MenuType;
+  url: string;
+  miniProgramAppId: string;
+  miniProgramPagePath: string;
+  articleId: string;
+  replyMessageType: string;
+  replyContent: string;
+  replyMediaId: string;
+  replyMediaUrl: string;
+  replyThumbMediaId: string;
+  replyThumbMediaUrl: string;
+  replyTitle: string;
+  replyDescription: string;
+  replyArticles: Replay;
+  replyMusicUrl: string;
+  replyHqMusicUrl: string;
+}
+
+export type RawMenu = Partial<_RawMenu>;
+
+interface _Reply {
+  type: string;
+  accountId: number;
+  content: string;
+  mediaId: string;
+  url: string;
+  thumbMediaId: string;
+  thumbMediaUrl: string;
+  title: string;
+  description: string;
+  articles: null | Replay[];
+  musicUrl: string;
+  hqMusicUrl: string;
+}
+
+export type Reply = Partial<_Reply>;
+
+interface _Menu extends RawMenu {
+  children: _Menu[];
+  reply: Reply;
+}
+
+export type Menu = Partial<_Menu>;
diff --git a/apps/web-antd/src/views/mp/menu/data.ts b/apps/web-antd/src/views/mp/menu/data.ts
new file mode 100644
index 000000000..2a22837ba
--- /dev/null
+++ b/apps/web-antd/src/views/mp/menu/data.ts
@@ -0,0 +1,9 @@
+/** 菜单未选中标识 */
+export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__';
+
+/** 菜单级别枚举 */
+export enum Level {
+  Child = '2',
+  Parent = '1',
+  Undefined = '0',
+}
diff --git a/apps/web-antd/src/views/mp/menu/index.vue b/apps/web-antd/src/views/mp/menu/index.vue
index 8d4042f12..b7228d0ae 100644
--- a/apps/web-antd/src/views/mp/menu/index.vue
+++ b/apps/web-antd/src/views/mp/menu/index.vue
@@ -1,29 +1,399 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { Menu, RawMenu } from './components/types';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+
+import { confirm, ContentWrap, DocAlert, Page } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { Button, Form, message } from 'ant-design-vue';
+
+import { deleteMenu, getMenuList, saveMenu } from '#/api/mp/menu';
+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' });
+
+// ======================== 列表查询 ========================
+const loading = ref(false); // 遮罩层
+const accountId = ref(-1);
+const accountName = ref<string>('');
+const menuList = ref<Menu[]>([]);
+
+// ======================== 菜单操作 ========================
+// 当前选中菜单编码：
+//  * 一级（'x'）
+//  * 二级（'x-y'）
+//  * 未选中（MENU_NOT_SELECTED）
+const activeIndex = ref<string>(MENU_NOT_SELECTED);
+// 二级菜单显示标志: 归属的一级菜单index
+// * 未初始化：-1
+// * 初始化：x
+const parentIndex = ref(-1);
+
+// ======================== 菜单编辑 ========================
+const showRightPanel = ref(false); // 右边配置显示默认详情还是配置详情
+const isParent = ref<boolean>(true); // 是否一级菜单，控制MenuEditor中name字段长度
+const activeMenu = ref<Menu>({}); // 选中菜单，MenuEditor的modelValue
+
+// 一些临时值放在这里进行判断，如果放在 activeMenu，由于引用关系，menu 也会多了多余的参数
+const tempSelfObj = ref<{
+  grand: Level;
+  x: number;
+  y: number;
+}>({
+  grand: Level.Undefined,
+  x: 0,
+  y: 0,
+});
+const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
+
+/** 侦听公众号变化 */
+function onAccountChanged(id: number, name: string) {
+  accountId.value = id;
+  accountName.value = name;
+  getList();
+}
+
+/** 查询并转换菜单 */
+async function getList() {
+  loading.value = true;
+  try {
+    const data = await getMenuList(accountId.value);
+    const menuData = menuListToFrontend(data);
+    menuList.value = handleTree(menuData, 'id') as Menu[];
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  resetForm();
+  getList();
+}
+
+/** 将后端返回的 menuList，转换成前端的 menuList */
+function menuListToFrontend(list: any[]) {
+  if (!list) {
+    return [];
+  }
+
+  const result: RawMenu[] = [];
+  list.forEach((item: RawMenu) => {
+    const menu: any = {
+      ...item,
+    };
+    menu.reply = {
+      type: item.replyMessageType,
+      accountId: item.accountId,
+      content: item.replyContent,
+      mediaId: item.replyMediaId,
+      url: item.replyMediaUrl,
+      title: item.replyTitle,
+      description: item.replyDescription,
+      thumbMediaId: item.replyThumbMediaId,
+      thumbMediaUrl: item.replyThumbMediaUrl,
+      articles: item.replyArticles,
+      musicUrl: item.replyMusicUrl,
+      hqMusicUrl: item.replyHqMusicUrl,
+    };
+    result.push(menu as RawMenu);
+  });
+  return result;
+}
+
+/** 重置表单，清空表单数据 */
+function resetForm() {
+  // 菜单操作
+  activeIndex.value = MENU_NOT_SELECTED;
+  parentIndex.value = -1;
+
+  // 菜单编辑
+  showRightPanel.value = false;
+  activeMenu.value = {};
+  tempSelfObj.value = { grand: Level.Undefined, x: 0, y: 0 };
+  dialogNewsVisible.value = false;
+}
+
+// ======================== 菜单操作 ========================
+/** 一级菜单点击事件 */
+function menuClicked(parent: Menu, x: number) {
+  // 右侧的表单相关
+  showRightPanel.value = true; // 右边菜单
+  activeMenu.value = parent; // 这个如果放在顶部，flag 会没有。因为重新赋值了。
+  tempSelfObj.value.grand = Level.Parent; // 表示一级菜单
+  tempSelfObj.value.x = x; // 表示一级菜单索引
+  isParent.value = true;
+
+  // 左侧的选中
+  activeIndex.value = `${x}`; // 菜单选中样式
+  parentIndex.value = x; // 二级菜单显示标志
+}
+
+/** 二级菜单点击事件 */
+function subMenuClicked(child: Menu, x: number, y: number) {
+  // 右侧的表单相关
+  showRightPanel.value = true; // 右边菜单
+  activeMenu.value = child; // 将点击的数据放到临时变量，对象有引用作用
+  tempSelfObj.value.grand = Level.Child; // 表示二级菜单
+  tempSelfObj.value.x = x; // 表示一级菜单索引
+  tempSelfObj.value.y = y; // 表示二级菜单索引
+  isParent.value = false;
+
+  // 左侧的选中
+  activeIndex.value = `${x}-${y}`;
+}
+
+/** 删除当前菜单 */
+async function onDeleteMenu() {
+  await confirm('确定要删除吗?');
+  if (tempSelfObj.value.grand === Level.Parent) {
+    // 一级菜单的删除方法
+    menuList.value.splice(tempSelfObj.value.x, 1);
+  } else if (tempSelfObj.value.grand === Level.Child) {
+    // 二级菜单的删除方法
+    menuList.value[tempSelfObj.value.x]?.children?.splice(
+      tempSelfObj.value.y,
+      1,
+    );
+  }
+  // 提示
+  message.success('删除成功');
+
+  // 处理菜单的选中
+  activeMenu.value = {};
+  showRightPanel.value = false;
+  activeIndex.value = MENU_NOT_SELECTED;
+}
+
+// ======================== 菜单编辑 ========================
+/** 保存菜单 */
+async function onSave() {
+  await confirm('确定要保存吗?');
+  const hideLoading = message.loading({
+    content: '保存中...',
+    duration: 0,
+  });
+  try {
+    await saveMenu(accountId.value, menuListToBackend());
+    await getList();
+    message.success('发布成功');
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 清空菜单 */
+async function onClear() {
+  await confirm('确定要删除吗?');
+  const hideLoading = message.loading({
+    content: '删除中...',
+    duration: 0,
+  });
+  try {
+    await deleteMenu(accountId.value);
+    handleQuery();
+    message.success('清空成功');
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 将前端的 menuList，转换成后端接收的 menuList */
+function menuListToBackend() {
+  const result: any[] = [];
+  menuList.value.forEach((item) => {
+    const menu = menuToBackend(item);
+    result.push(menu);
+
+    // 处理子菜单
+    if (!item.children || item.children.length <= 0) {
+      return;
+    }
+    menu.children = [];
+    item.children.forEach((subItem) => {
+      menu.children.push(menuToBackend(subItem));
+    });
+  });
+  return result;
+}
+
+/** 将前端的 menu，转换成后端接收的 menu */
+// TODO: @芋艿，需要根据后台 API 删除不需要的字段
+function menuToBackend(menu: any) {
+  const result = {
+    ...menu,
+    children: undefined, // 不处理子节点
+    reply: undefined, // 稍后复制
+  };
+  result.replyMessageType = menu.reply.type;
+  result.replyContent = menu.reply.content;
+  result.replyMediaId = menu.reply.mediaId;
+  result.replyMediaUrl = menu.reply.url;
+  result.replyTitle = menu.reply.title;
+  result.replyDescription = menu.reply.description;
+  result.replyThumbMediaId = menu.reply.thumbMediaId;
+  result.replyThumbMediaUrl = menu.reply.thumbMediaUrl;
+  result.replyArticles = menu.reply.articles;
+  result.replyMusicUrl = menu.reply.musicUrl;
+  result.replyHqMusicUrl = menu.reply.hqMusicUrl;
+  return result;
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
-    <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/menu/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/menu/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <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">
+        <!--左边配置菜单-->
+        <div class="left">
+          <div class="weixin-hd">
+            <div class="weixin-title">{{ accountName }}</div>
+          </div>
+          <div class="clearfix weixin-menu">
+            <MenuPreviewer
+              v-model="menuList"
+              :account-id="accountId"
+              :active-index="activeIndex"
+              :parent-index="parentIndex"
+              @menu-clicked="(parent, x) => menuClicked(parent, x)"
+              @submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
+            />
+          </div>
+          <div class="save-div">
+            <Button
+              class="save-btn"
+              type="primary"
+              @click="onSave"
+              v-access:code="['mp:menu:save']"
+            >
+              保存并发布菜单
+            </Button>
+            <Button
+              class="save-btn"
+              danger
+              @click="onClear"
+              v-access:code="['mp:menu:delete']"
+            >
+              清空菜单
+            </Button>
+          </div>
+        </div>
+        <!--右边配置-->
+        <div class="right" v-if="showRightPanel">
+          <MenuEditor
+            :account-id="accountId"
+            :is-parent="isParent"
+            v-model="activeMenu"
+            @delete="onDeleteMenu"
+          />
+        </div>
+        <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
+        <div v-else class="right">
+          <p>请选择菜单配置</p>
+        </div>
+      </div>
+    </ContentWrap>
   </Page>
 </template>
+
+<style lang="scss" scoped>
+/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
+
+/* 公共颜色变量 */
+.clearfix {
+  *zoom: 1;
+}
+
+.clearfix::after {
+  clear: both;
+  display: table;
+  content: '';
+}
+
+div {
+  text-align: left;
+}
+
+.weixin-hd {
+  position: relative;
+  bottom: 426px;
+  left: 0;
+  width: 300px;
+  height: 64px;
+  color: #fff;
+  text-align: center;
+  background: transparent url('./components/assets/menu_head.png') no-repeat 0 0;
+  background-position: 0 0;
+  background-size: 100%;
+}
+
+.weixin-title {
+  position: absolute;
+  top: 33px;
+  left: 0;
+  width: 100%;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+}
+
+.weixin-menu {
+  padding-left: 43px;
+  font-size: 12px;
+  background: transparent url('./components/assets/menu_foot.png') no-repeat 0 0;
+}
+
+.public-account-management {
+  width: 1200px;
+  // min-width: 1200px;
+  margin: 0 auto;
+
+  .left {
+    position: relative;
+    float: left;
+    box-sizing: border-box;
+    display: block;
+    width: 350px;
+    height: 715px;
+    padding: 518px 25px 88px;
+    background: url('./components/assets/iphone_backImg.png') no-repeat;
+    background-size: 100% auto;
+
+    .save-div {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      justify-content: center;
+      margin-top: 15px;
+    }
+  }
+
+  /* 右边菜单内容 */
+  .right {
+    float: left;
+    box-sizing: border-box;
+    width: 63%;
+    padding: 20px;
+    margin-left: 20px;
+    background-color: #e8e7e7;
+  }
+}
+</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
new file mode 100644
index 000000000..148f26872
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-account-select/index.ts
@@ -0,0 +1,2 @@
+// 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
new file mode 100644
index 000000000..d4f66e74b
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue
@@ -0,0 +1,123 @@
+<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/index.ts b/apps/web-antd/src/views/mp/modules/wx-location/index.ts
new file mode 100644
index 000000000..029a666a9
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-location/index.ts
@@ -0,0 +1 @@
+export { default as WxLocation } from './wx-location.vue';
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
new file mode 100644
index 000000000..fd1b60bc2
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-location/wx-location.vue
@@ -0,0 +1,65 @@
+<!--
+  【微信消息 - 定位】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/index.ts b/apps/web-antd/src/views/mp/modules/wx-material-select/index.ts
new file mode 100644
index 000000000..27cf66886
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-material-select/index.ts
@@ -0,0 +1,3 @@
+export * from './types';
+
+export { default as WxMaterialSelect } from './wx-material-select.vue';
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
new file mode 100644
index 000000000..2e4f8a8f5
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-material-select/types.ts
@@ -0,0 +1,12 @@
+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
new file mode 100644
index 000000000..fcd0b3cfb
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-material-select/wx-material-select.vue
@@ -0,0 +1,282 @@
+<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/card.scss b/apps/web-antd/src/views/mp/modules/wx-msg/card.scss
new file mode 100644
index 000000000..58fde79fd
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-msg/card.scss
@@ -0,0 +1,116 @@
+.avue-card {
+  &__item {
+    box-sizing: border-box;
+    height: 200px;
+    margin-bottom: 16px;
+    font-size: 14px;
+    font-feature-settings: 'tnum';
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    color: rgb(0 0 0 / 65%);
+    cursor: pointer;
+    list-style: none;
+    background-color: #fff;
+    border: 1px solid #e8e8e8;
+
+    &:hover {
+      border-color: rgb(0 0 0 / 9%);
+      box-shadow: 0 2px 8px rgb(0 0 0 / 9%);
+    }
+
+    &--add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      font-size: 16px;
+      color: rgb(0 0 0 / 45%);
+      background-color: #fff;
+      border: 1px dashed #000;
+      border-color: #d9d9d9;
+      border-radius: 2px;
+
+      i {
+        margin-right: 10px;
+      }
+
+      &:hover {
+        color: #40a9ff;
+        background-color: #fff;
+        border-color: #40a9ff;
+      }
+    }
+  }
+
+  &__body {
+    display: flex;
+    padding: 24px;
+  }
+
+  &__detail {
+    flex: 1;
+  }
+
+  &__avatar {
+    width: 48px;
+    height: 48px;
+    margin-right: 12px;
+    overflow: hidden;
+    border-radius: 48px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__title {
+    margin-bottom: 12px;
+    font-size: 16px;
+    color: rgb(0 0 0 / 85%);
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  &__info {
+    display: -webkit-box;
+    height: 64px;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    color: rgb(0 0 0 / 45%);
+    -webkit-box-orient: vertical;
+  }
+
+  &__menu {
+    display: flex;
+    justify-content: space-around;
+    height: 50px;
+    line-height: 50px;
+    color: rgb(0 0 0 / 45%);
+    text-align: center;
+    background: #f7f9fa;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+}
+
+/** joolun 额外加的 */
+.avue-comment__main {
+  flex: unset !important;
+  margin: 0 8px !important;
+  border-radius: 5px !important;
+}
+
+.avue-comment__header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.avue-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/modules/wx-msg/comment.scss
new file mode 100644
index 000000000..219e2e5d4
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-msg/comment.scss
@@ -0,0 +1,109 @@
+/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
+.avue-comment {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+
+  &--reverse {
+    flex-direction: row-reverse;
+
+    .avue-comment__main {
+      &::before,
+      &::after {
+        right: -8px;
+        left: auto;
+        border-width: 8px 0 8px 8px;
+      }
+
+      &::before {
+        border-left-color: #dedede;
+      }
+
+      &::after {
+        margin-right: 1px;
+        margin-left: auto;
+        border-left-color: #f8f8f8;
+      }
+    }
+  }
+
+  &__avatar {
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    vertical-align: middle;
+    border: 1px solid transparent;
+    border-radius: 50%;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 15px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #eee;
+  }
+
+  &__author {
+    font-size: 14px;
+    font-weight: 700;
+    color: #999;
+  }
+
+  &__main {
+    position: relative;
+    flex: 1;
+    margin: 0 20px;
+    border: 1px solid #dedede;
+    border-radius: 2px;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 10px;
+      right: 100%;
+      left: -8px;
+      display: block;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+      content: ' ';
+      border-color: transparent;
+      border-style: solid solid outset;
+      border-width: 8px 8px 8px 0;
+    }
+
+    &::before {
+      z-index: 1;
+      border-right-color: #dedede;
+    }
+
+    &::after {
+      z-index: 2;
+      margin-left: 1px;
+      border-right-color: #f8f8f8;
+    }
+  }
+
+  &__body {
+    padding: 15px;
+    overflow: hidden;
+    font-family:
+      'Segoe UI', 'Lucida Grande', Helvetica, Arial, 'Microsoft YaHei',
+      FreeSans, Arimo, 'Droid Sans', 'wenquanyi micro hei', 'Hiragino Sans GB',
+      'Hiragino Sans GB W3', FontAwesome, sans-serif;
+    font-size: 14px;
+    color: #333;
+    background: #fff;
+  }
+
+  blockquote {
+    padding: 1px 0 1px 15px;
+    margin: 0;
+    font-family:
+      Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai,
+      FontAwesome, serif;
+    border-left: 4px solid #ddd;
+  }
+}
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/index.ts b/apps/web-antd/src/views/mp/modules/wx-msg/index.ts
new file mode 100644
index 000000000..42150e8a0
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-msg/index.ts
@@ -0,0 +1,3 @@
+export * from './types';
+
+export { default as WxMsg } from './wx-msg.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue b/apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue
new file mode 100644
index 000000000..780e97d5c
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue
@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+const props = defineProps<{
+  item: any;
+}>();
+
+const item = ref(props.item);
+</script>
+
+<template>
+  <div>
+    <div v-if="item.event === 'subscribe'">
+      <Tag color="success">关注</Tag>
+    </div>
+    <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 }}】
+    </div>
+    <div v-else-if="item.event === 'VIEW'">
+      <Tag>点击菜单链接</Tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'scancode_waitmsg'">
+      <Tag>扫码结果</Tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'scancode_push'">
+      <Tag>扫码结果</Tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'pic_sysphoto'">
+      <Tag>系统拍照发图</Tag>
+    </div>
+    <div v-else-if="item.event === 'pic_photo_or_album'">
+      <Tag>拍照或者相册</Tag>
+    </div>
+    <div v-else-if="item.event === 'pic_weixin'">
+      <Tag>微信相册</Tag>
+    </div>
+    <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>
+  </div>
+</template>
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
new file mode 100644
index 000000000..d7659b1bc
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-msg/msg-list.vue
@@ -0,0 +1,78 @@
+<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/msg.vue b/apps/web-antd/src/views/mp/modules/wx-msg/msg.vue
new file mode 100644
index 000000000..a46f81dd5
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-msg/msg.vue
@@ -0,0 +1,85 @@
+<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 MsgEvent from './msg-event.vue';
+import { MsgType } from './types';
+
+defineOptions({ name: 'Msg' });
+
+const props = defineProps<{
+  item: any;
+}>();
+
+const item = ref<any>(props.item);
+</script>
+
+<template>
+  <div>
+    <MsgEvent v-if="item.type === MsgType.Event" :item="item" />
+
+    <div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
+
+    <div v-else-if="item.type === MsgType.Voice">
+      <WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Image">
+      <a target="_blank" :href="item.mediaUrl">
+        <img :src="item.mediaUrl" class="w-[100px]" />
+      </a>
+    </div>
+
+    <div
+      v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
+      class="text-center"
+    >
+      <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>
+      </a>
+      <div
+        class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
+        style="height: unset"
+      >
+        {{ item.description }}
+      </div>
+    </div>
+
+    <div v-else-if="item.type === MsgType.Location">
+      <WxLocation
+        :label="item.label"
+        :location-y="item.locationY"
+        :location-x="item.locationX"
+      />
+    </div>
+
+    <div v-else-if="item.type === MsgType.News" class="w-[300px]">
+      <WxNews :articles="item.articles" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Music">
+      <WxMusic
+        :title="item.title"
+        :description="item.description"
+        :thumb-media-url="item.thumbMediaUrl"
+        :music-url="item.musicUrl"
+        :hq-music-url="item.hqMusicUrl"
+      />
+    </div>
+  </div>
+</template>
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
new file mode 100644
index 000000000..e988954ad
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-msg/types.ts
@@ -0,0 +1,17 @@
+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-msg/wx-msg.vue b/apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue
new file mode 100644
index 000000000..a08347caf
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue
@@ -0,0 +1,197 @@
+<!--
+  - 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 { 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 MsgList from './msg-list.vue';
+
+defineOptions({ name: 'WxMsg' });
+
+const props = defineProps({
+  userId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const accountId = ref(-1); // 公众号ID，需要通过userId初始化
+const loading = ref(false); // 消息列表是否正在加载中
+const hasMore = ref(true); // 是否可以加载更多
+const list = ref<any[]>([]); // 消息列表
+const queryParams = reactive({
+  pageNo: 1, // 当前页数
+  pageSize: 14, // 每页显示多少条
+  accountId,
+});
+
+const user: User = reactive({
+  nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
+  avatar: profile,
+  accountId, // 公众号账号编号
+});
+
+// ========= 消息发送 =========
+const sendLoading = ref(false); // 发送消息是否加载中
+const reply = ref<Reply>({
+  type: ReplyType.Text,
+  accountId: -1,
+  articles: [],
+}); // 微信发送消息
+
+const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null); // WxReplySelect组件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;
+  accountId.value = data.accountId;
+  reply.value.accountId = data.accountId;
+
+  refreshChange();
+});
+
+/** 执行发送 */
+async function sendMsg() {
+  if (!unref(reply)) {
+    return;
+  }
+  // 公众号限制：客服消息，公众号只允许发送一条
+  if (
+    reply.value.type === ReplyType.News &&
+    reply.value.articles &&
+    reply.value.articles.length > 1
+  ) {
+    reply.value.articles = [reply.value.articles[0]];
+    message.success('图文消息条数限制在 1 条以内，已默认发送第一条');
+  }
+
+  // 注意：sendMessage API 需要 openid，但这里传入的是 userId
+  // 这可能是后端 API 的特殊处理，使用类型断言绕过类型检查
+  const data = await sendMessage({
+    userId: props.userId,
+    ...reply.value,
+  } as any);
+  sendLoading.value = false;
+
+  list.value = [...list.value, data];
+  await scrollToBottom();
+
+  // 发送后清空数据
+  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(
+      {
+        pageNo: page.pageNo,
+        pageSize: page.pageSize,
+        userId: props.userId,
+        accountId: page.accountId,
+      },
+      params,
+    ),
+  );
+
+  const scrollHeight = msgDivRef.value?.scrollHeight ?? 0;
+  // 处理数据
+  const data = dataTemp.list.reverse();
+  list.value = [...data, ...list.value];
+  loading.value = false;
+  if (data.length < queryParams.pageSize || data.length === 0) {
+    hasMore.value = false;
+  }
+  queryParams.pageNo = page.pageNo;
+  queryParams.pageSize = page.pageSize;
+  // 滚动到原来的位置
+  if (queryParams.pageNo === 1) {
+    // 定位到消息底部
+    await scrollToBottom();
+  } else if (data.length > 0) {
+    // 定位滚动条
+    await nextTick();
+    if (scrollHeight !== 0 && msgDivRef.value) {
+      msgDivRef.value.scrollTop =
+        msgDivRef.value.scrollHeight - scrollHeight - 100;
+    }
+  }
+}
+
+/** 刷新消息 */
+function refreshChange() {
+  getPage(queryParams);
+}
+
+/** 定位到消息底部 */
+async function scrollToBottom() {
+  await nextTick();
+  if (msgDivRef.value) {
+    msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight;
+  }
+}
+</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>
+
+        <!-- 消息列表 -->
+        <MsgList :list="list" :account-id="accountId" :user="user" />
+      </div>
+    </Spin>
+
+    <Spin :spinning="sendLoading">
+      <div class="p-[10px]">
+        <WxReplySelect ref="replySelectRef" v-model="reply" />
+        <Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
+          发送(S)
+        </Button>
+      </div>
+    </Spin>
+  </ContentWrap>
+</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-music/index.ts b/apps/web-antd/src/views/mp/modules/wx-music/index.ts
new file mode 100644
index 000000000..f0bdd7753
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-music/index.ts
@@ -0,0 +1 @@
+export { default as WxMusic } from './wx-music.vue';
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
new file mode 100644
index 000000000..e4f36f909
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-music/wx-music.vue
@@ -0,0 +1,71 @@
+<!--
+  【微信消息 - 音乐】
+-->
+<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-news/index.ts b/apps/web-antd/src/views/mp/modules/wx-news/index.ts
new file mode 100644
index 000000000..13d17905d
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-news/index.ts
@@ -0,0 +1 @@
+export { default as WxNews } from './wx-news.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue b/apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue
new file mode 100644
index 000000000..0c8daa6ab
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue
@@ -0,0 +1,127 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  【微信消息 - 图文】
+  芋道源码：
+  ① 代码优化，补充注释，提升阅读性
+-->
+<script lang="ts" setup>
+import { Image } from 'ant-design-vue';
+
+defineOptions({ name: 'WxNews' });
+
+const props = withDefaults(
+  defineProps<{
+    articles?: any[] | null;
+  }>(),
+  {
+    articles: null,
+  },
+);
+
+defineExpose({
+  articles: props.articles,
+});
+</script>
+
+<template>
+  <div class="news-home">
+    <div v-for="(article, index) in articles" :key="index" class="news-div">
+      <!-- 头条 -->
+      <a v-if="index === 0" :href="article.url" target="_blank">
+        <div class="news-main">
+          <div class="news-content">
+            <Image
+              :src="article.picUrl || article.thumbUrl"
+              class="material-img"
+              :preview="false"
+              style="width: 100%; height: 120px"
+            />
+            <div class="news-content-title">
+              <span>{{ article.title }}</span>
+            </div>
+          </div>
+        </div>
+      </a>
+      <!-- 二条/三条等等 -->
+      <a v-else :href="article.url" target="_blank">
+        <div class="news-main-item">
+          <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%"
+              />
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/** TODO @hw：tindwind 替代 */
+.news-home {
+  width: 100%;
+  margin: auto;
+  background-color: #fff;
+}
+
+.news-main {
+  width: 100%;
+  margin: auto;
+}
+
+.news-content {
+  position: relative;
+  width: 100%;
+  background-color: #acadae;
+}
+
+.news-content-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  box-sizing: unset !important;
+  display: inline-block;
+  width: 98%;
+  padding: 1%;
+  font-size: 12px;
+  color: #fff;
+  white-space: normal;
+  background-color: black;
+  opacity: 0.65;
+}
+
+.news-main-item {
+  padding: 5px 0;
+  background-color: #fff;
+  border-top: 1px solid #eaeaea;
+}
+
+.news-content-item {
+  position: relative;
+}
+
+.news-content-item-title {
+  display: inline-block;
+  width: 70%;
+  margin-left: 1%;
+  font-size: 10px;
+  white-space: normal;
+}
+
+.news-content-item-img {
+  display: inline-block;
+  width: 25%;
+  margin-right: 1%;
+  background-color: #acadae;
+}
+
+.material-img {
+  width: 100%;
+}
+</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
new file mode 100644
index 000000000..9e0a3165f
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-reply/index.ts
@@ -0,0 +1,2 @@
+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
new file mode 100644
index 000000000..b629f0902
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-reply/tab-image.vue
@@ -0,0 +1,154 @@
+<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
new file mode 100644
index 000000000..5e9347b71
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-reply/tab-music.vue
@@ -0,0 +1,153 @@
+<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-news.vue b/apps/web-antd/src/views/mp/modules/wx-reply/tab-news.vue
new file mode 100644
index 000000000..fbc4eed64
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-reply/tab-news.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import { computed, ref } from 'vue';
+
+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 { NewsType } from './types';
+
+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),
+});
+
+const showDialog = ref(false);
+
+/** 选择素材 */
+function selectMaterial(item: any) {
+  showDialog.value = false;
+  reply.value.articles = item.content.newsItem;
+}
+
+/** 删除图文 */
+function onDelete() {
+  reply.value.articles = [];
+}
+</script>
+
+<template>
+  <div>
+    <Row>
+      <div
+        class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
+        v-if="reply.articles && reply.articles.length > 0"
+      >
+        <WxNews :articles="reply.articles" />
+        <Col class="pt-[10px] text-center">
+          <Button type="primary" danger shape="circle" @click="onDelete">
+            <IconifyIcon icon="ep:delete" />
+          </Button>
+        </Col>
+      </div>
+      <!-- 选择素材 -->
+      <Col :span="24" v-if="!reply.content">
+        <Row class="text-center" align="middle">
+          <Col :span="24">
+            <Button type="primary" @click="showDialog = true">
+              {{
+                newsType === NewsType.Published
+                  ? '选择已发布图文'
+                  : '选择草稿箱图文'
+              }}
+              <IconifyIcon icon="ep:circle-check" />
+            </Button>
+          </Col>
+        </Row>
+      </Col>
+      <Modal
+        title="选择图文"
+        v-model:open="showDialog"
+        width="90%"
+        destroy-on-close
+      >
+        <WxMaterialSelect
+          type="news"
+          :account-id="reply.accountId"
+          :news-type="newsType"
+          @select-material="selectMaterial"
+        />
+      </Modal>
+    </Row>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-text.vue b/apps/web-antd/src/views/mp/modules/wx-reply/tab-text.vue
new file mode 100644
index 000000000..cb96dbf60
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-reply/tab-text.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { Input } 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;
+}>();
+
+const content = computed({
+  get: () => props.modelValue,
+  set: (val: null | string) => {
+    emit('update:modelValue', val);
+    emit('input', val);
+  },
+});
+</script>
+
+<template>
+  <Input.TextArea
+    :rows="5"
+    placeholder="请输入内容"
+    v-model:value="content as string"
+    class="w-full"
+  />
+</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
new file mode 100644
index 000000000..579a819c1
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-reply/tab-video.vue
@@ -0,0 +1,197 @@
+<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
new file mode 100644
index 000000000..420b56b27
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-reply/tab-voice.vue
@@ -0,0 +1,151 @@
+<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-reply/types.ts b/apps/web-antd/src/views/mp/modules/wx-reply/types.ts
new file mode 100644
index 000000000..67571ef59
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-reply/types.ts
@@ -0,0 +1,58 @@
+import type { Ref } from 'vue';
+
+import { unref } from 'vue';
+
+enum ReplyType {
+  Image = 'image',
+  Music = 'music',
+  News = 'news',
+  Text = 'text',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+interface _Reply {
+  accountId: number;
+  type: ReplyType;
+  name?: null | string;
+  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',
+}
+
+/** 利用旧的reply[accountId, type]初始化新的Reply */
+const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
+  return {
+    accountId: unref(old).accountId,
+    type: unref(old).type,
+    name: null,
+    content: null,
+    mediaId: null,
+    url: null,
+    title: null,
+    description: null,
+    thumbMediaId: null,
+    thumbMediaUrl: null,
+    musicUrl: null,
+    hqMusicUrl: null,
+    introduction: null,
+    articles: [],
+  };
+};
+
+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/modules/wx-reply/wx-reply.vue
new file mode 100644
index 000000000..225e8ab35
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-reply/wx-reply.vue
@@ -0,0 +1,137 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  芋道源码：
+  ① 移除多余的 rep 为前缀的变量，让 message 消息更简单
+  ② 代码优化，补充注释，提升阅读性
+  ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
+  ④ 支持发送【视频】消息时，支持新建视频
+-->
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import { computed, ref, unref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Row, Tabs } from 'ant-design-vue';
+
+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';
+
+defineOptions({ name: 'WxReplySelect' });
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: Reply;
+    newsType?: NewsType;
+  }>(),
+  {
+    newsType: () => NewsType.Published,
+  },
+);
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+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进行赋值会产生了循环调用
+
+watch(
+  currentTab,
+  (newTab, oldTab) => {
+    // 第一次进入：oldTab 为 undefined
+    // 判断 newTab 是因为 Reply 为 Partial
+    if (oldTab === undefined || newTab === undefined) {
+      return;
+    }
+
+    tabCache.set(oldTab, unref(reply));
+
+    // 从缓存里面取出新tab内容，有则覆盖Reply，没有则创建空Reply
+    const temp = tabCache.get(newTab);
+    if (temp) {
+      reply.value = temp;
+    } else {
+      const newData = createEmptyReply(reply);
+      newData.type = newTab;
+      reply.value = newData;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 清除除了`type`, `accountId`的字段 */
+function clear() {
+  reply.value = createEmptyReply(reply);
+}
+
+defineExpose({
+  clear,
+});
+</script>
+
+<template>
+  <Tabs v-model:active-key="currentTab" type="card">
+    <!-- 类型 1：文本 -->
+    <Tabs.TabPane :key="ReplyType.Text">
+      <template #tab>
+        <Row align="middle"><IconifyIcon icon="ep:document" /> 文本</Row>
+      </template>
+      <TabText v-model="reply.content" />
+    </Tabs.TabPane>
+
+    <!-- 类型 2：图片 -->
+    <Tabs.TabPane :key="ReplyType.Image">
+      <template #tab>
+        <Row align="middle">
+          <IconifyIcon icon="ep:picture" class="mr-5px" /> 图片
+        </Row>
+      </template>
+      <TabImage v-model="reply" />
+    </Tabs.TabPane>
+
+    <!-- 类型 3：语音 -->
+    <Tabs.TabPane :key="ReplyType.Voice">
+      <template #tab>
+        <Row align="middle"><IconifyIcon icon="ep:phone" /> 语音</Row>
+      </template>
+      <TabVoice v-model="reply" />
+    </Tabs.TabPane>
+
+    <!-- 类型 4：视频 -->
+    <Tabs.TabPane :key="ReplyType.Video">
+      <template #tab>
+        <Row align="middle"><IconifyIcon icon="ep:share" /> 视频</Row>
+      </template>
+      <TabVideo v-model="reply" />
+    </Tabs.TabPane>
+
+    <!-- 类型 5：图文 -->
+    <Tabs.TabPane :key="ReplyType.News">
+      <template #tab>
+        <Row align="middle"><IconifyIcon icon="ep:reading" /> 图文</Row>
+      </template>
+      <TabNews v-model="reply" :news-type="newsType" />
+    </Tabs.TabPane>
+
+    <!-- 类型 6：音乐 -->
+    <Tabs.TabPane :key="ReplyType.Music">
+      <template #tab>
+        <Row align="middle"><IconifyIcon icon="ep:service" />音乐</Row>
+      </template>
+      <TabMusic v-model="reply" />
+    </Tabs.TabPane>
+  </Tabs>
+</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-video-play/index.ts b/apps/web-antd/src/views/mp/modules/wx-video-play/index.ts
new file mode 100644
index 000000000..5cda5edeb
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-video-play/index.ts
@@ -0,0 +1 @@
+export { default as WxVideoPlayer } from './wx-video-play.vue';
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
new file mode 100644
index 000000000..dc1c1d642
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-video-play/wx-video-play.vue
@@ -0,0 +1,80 @@
+<!--
+  - 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/index.ts b/apps/web-antd/src/views/mp/modules/wx-voice-play/index.ts
new file mode 100644
index 000000000..0ecc27ead
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-voice-play/index.ts
@@ -0,0 +1 @@
+export { default as WxVoicePlayer } from './wx-voice-play.vue';
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
new file mode 100644
index 000000000..14a582b7e
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/wx-voice-play/wx-voice-play.vue
@@ -0,0 +1,110 @@
+<!--
+  - 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-antd/src/views/mp/user/modules/form.vue b/apps/web-antd/src/views/mp/user/modules/form.vue
index a2854f78d..5677de9e9 100644
--- a/apps/web-antd/src/views/mp/user/modules/form.vue
+++ b/apps/web-antd/src/views/mp/user/modules/form.vue
@@ -39,11 +39,11 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    /** 提交表单 */
+    // 提交表单
     const values = (await formApi.getValues()) as MpUserApi.User;
     try {
       await updateUser({ ...formData.value, ...values });
-      /** 关闭并提示 */
+      // 关闭并提示
       await modalApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
@@ -56,7 +56,7 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-    /** 加载数据 */
+    // 加载数据
     const data = modalApi.getData<{ id: number }>();
     if (!data || !data.id) {
       return;
@@ -64,7 +64,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = await getUser(data.id);
-      /** 设置到 values */
+      // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index aa96e8564..7031134e8 100644
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -43,14 +43,17 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
+    "@videojs-player/vue": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
+    "benz-amr-recorder": "catalog:",
     "cropperjs": "catalog:",
     "dayjs": "catalog:",
     "element-plus": "catalog:",
     "highlight.js": "catalog:",
     "pinia": "catalog:",
     "tinymce": "catalog:",
+    "video.js": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:",
diff --git a/apps/web-ele/src/api/mp/draft/index.ts b/apps/web-ele/src/api/mp/draft/index.ts
index 435f13e0b..9032ffd57 100644
--- a/apps/web-ele/src/api/mp/draft/index.ts
+++ b/apps/web-ele/src/api/mp/draft/index.ts
@@ -35,9 +35,13 @@ export function getDraftPage(params: PageParam) {
 
 /** 创建草稿 */
 export function createDraft(accountId: number, articles: MpDraftApi.Article[]) {
-  return requestClient.post('/mp/draft/create', articles, {
-    params: { accountId },
-  });
+  return requestClient.post(
+    '/mp/draft/create',
+    { articles },
+    {
+      params: { accountId },
+    },
+  );
 }
 
 /** 更新草稿 */
@@ -46,9 +50,13 @@ export function updateDraft(
   mediaId: string,
   articles: MpDraftApi.Article[],
 ) {
-  return requestClient.put('/mp/draft/update', articles, {
-    params: { accountId, mediaId },
-  });
+  return requestClient.put(
+    '/mp/draft/update',
+    { articles },
+    {
+      params: { accountId, mediaId },
+    },
+  );
 }
 
 /** 删除草稿 */
diff --git a/apps/web-ele/src/assets/imgs/wechat.png b/apps/web-ele/src/assets/imgs/wechat.png
new file mode 100644
index 000000000..6afc5e41c
Binary files /dev/null and b/apps/web-ele/src/assets/imgs/wechat.png differ
diff --git a/apps/web-ele/src/locales/langs/en-US/demos.json b/apps/web-ele/src/locales/langs/en-US/demos.json
deleted file mode 100644
index 6eddebb53..000000000
--- a/apps/web-ele/src/locales/langs/en-US/demos.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "title": "Demos",
-  "elementPlus": "Element Plus",
-  "form": "Form",
-  "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-ele/src/locales/langs/zh-CN/demos.json b/apps/web-ele/src/locales/langs/zh-CN/demos.json
deleted file mode 100644
index ba6d6ccd0..000000000
--- a/apps/web-ele/src/locales/langs/zh-CN/demos.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "title": "演示",
-  "elementPlus": "Element Plus",
-  "form": "表单演示",
-  "vben": {
-    "title": "项目",
-    "about": "关于",
-    "document": "文档",
-    "antdv": "Ant Design Vue 版本",
-    "naive-ui": "Naive UI 版本",
-    "element-plus": "Element Plus 版本"
-  }
-}
diff --git a/apps/web-ele/src/router/routes/modules/vben.ts b/apps/web-ele/src/router/routes/modules/vben.ts
deleted file mode 100644
index 96f980d10..000000000
--- a/apps/web-ele/src/router/routes/modules/vben.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-// import {
-//   VBEN_DOC_URL,
-//   VBEN_ELE_PREVIEW_URL,
-//   VBEN_GITHUB_URL,
-//   VBEN_LOGO_URL,
-//   VBEN_NAIVE_PREVIEW_URL,
-// } from '@vben/constants';
-//
-// 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: '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; // update by 芋艿：不展示
diff --git a/apps/web-ele/src/utils/index.ts b/apps/web-ele/src/utils/index.ts
index 3a066fd4a..e64084b6c 100644
--- a/apps/web-ele/src/utils/index.ts
+++ b/apps/web-ele/src/utils/index.ts
@@ -1,2 +1,30 @@
+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-ele/src/utils/routerHelper.ts b/apps/web-ele/src/utils/routerHelper.ts
index 477a640ce..31164d7ba 100644
--- a/apps/web-ele/src/utils/routerHelper.ts
+++ b/apps/web-ele/src/utils/routerHelper.ts
@@ -1,3 +1,8 @@
+import type {
+  RouteLocationNormalized,
+  RouteRecordNormalized,
+} from 'vue-router';
+
 import { defineAsyncComponent } from 'vue';
 
 const modules = import.meta.glob('../views/**/*.{vue,tsx}');
@@ -13,3 +18,20 @@ export function registerComponent(componentPath: string) {
     }
   }
 }
+
+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-ele/src/utils/tree.ts b/apps/web-ele/src/utils/tree.ts
new file mode 100644
index 000000000..172ed2ba1
--- /dev/null
+++ b/apps/web-ele/src/utils/tree.ts
@@ -0,0 +1,442 @@
+interface TreeHelperConfig {
+  id: string;
+  children: string;
+  pid: string;
+}
+
+const DEFAULT_CONFIG: TreeHelperConfig = {
+  id: 'id',
+  children: 'children',
+  pid: 'pid',
+};
+export const defaultProps = {
+  children: 'children',
+  label: 'name',
+  value: 'id',
+  isLeaf: 'leaf',
+  emitPath: false, // 用于 cascader 组件：在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
+};
+
+const getConfig = (config: Partial<TreeHelperConfig>) =>
+  Object.assign({}, DEFAULT_CONFIG, config);
+
+// tree from list
+export const listToTree = <T = any>(
+  list: any[],
+  config: Partial<TreeHelperConfig> = {},
+): T[] => {
+  const conf = getConfig(config) as TreeHelperConfig;
+  const nodeMap = new Map();
+  const result: T[] = [];
+  const { id, children, pid } = conf;
+
+  for (const node of list) {
+    node[children] = node[children] || [];
+    nodeMap.set(node[id], node);
+  }
+  for (const node of list) {
+    const parent = nodeMap.get(node[pid]);
+    (parent ? parent.children : result).push(node);
+  }
+  return result;
+};
+
+export const treeToList = <T = any>(
+  tree: any,
+  config: Partial<TreeHelperConfig> = {},
+): T => {
+  config = getConfig(config);
+  const { children } = config;
+  const result: any = [...tree];
+  for (let i = 0; i < result.length; i++) {
+    const childNodes = result[i][children];
+    if (!childNodes) continue;
+    result.splice(i + 1, 0, ...childNodes);
+  }
+  return result;
+};
+
+export const findNode = <T = any>(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {},
+): null | T => {
+  config = getConfig(config);
+  const { children } = config;
+  const list = [...tree];
+  for (const node of list) {
+    if (func(node)) return node;
+    const childNodes = node[children];
+    if (childNodes) {
+      list.push(...childNodes);
+    }
+  }
+  return null;
+};
+
+export const findNodeAll = <T = any>(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {},
+): T[] => {
+  config = getConfig(config);
+  const { children } = config;
+  const list = [...tree];
+  const result: T[] = [];
+  for (const node of list) {
+    func(node) && result.push(node);
+    const childNodes = node[children];
+    if (childNodes) {
+      list.push(...childNodes);
+    }
+  }
+  return result;
+};
+
+export const findPath = <T = any>(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {},
+): null | T | T[] => {
+  config = getConfig(config);
+  const path: T[] = [];
+  const list = [...tree];
+  const visitedSet = new Set();
+  const { children } = config;
+  while (list.length > 0) {
+    const node = list[0];
+    if (visitedSet.has(node)) {
+      path.pop();
+      list.shift();
+    } else {
+      visitedSet.add(node);
+      const childNodes = node[children];
+      if (childNodes) {
+        list.unshift(...childNodes);
+      }
+      path.push(node);
+      if (func(node)) {
+        return path;
+      }
+    }
+  }
+  return null;
+};
+
+export const findPathAll = (
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {},
+) => {
+  config = getConfig(config);
+  const path: any[] = [];
+  const list = [...tree];
+  const result: any[] = [];
+  const visitedSet = new Set();
+  const { children } = config;
+  while (list.length > 0) {
+    const node = list[0];
+    if (visitedSet.has(node)) {
+      path.pop();
+      list.shift();
+    } else {
+      visitedSet.add(node);
+      const childNodes = node[children];
+      if (childNodes) {
+        list.unshift(...childNodes);
+      }
+      path.push(node);
+      func(node) && result.push([...path]);
+    }
+  }
+  return result;
+};
+
+export const filter = <T = any>(
+  tree: T[],
+  func: (n: T) => boolean,
+  config: Partial<TreeHelperConfig> = {},
+): T[] => {
+  config = getConfig(config);
+  const children = config.children as string;
+
+  function listFilter(list: T[]) {
+    return list
+      .map((node: any) => ({ ...node }))
+      .filter((node) => {
+        node[children] = node[children] && listFilter(node[children]);
+        return func(node) || node[children]?.length > 0;
+      });
+  }
+
+  return listFilter(tree);
+};
+
+export const forEach = <T = any>(
+  tree: T[],
+  func: (n: T) => any,
+  config: Partial<TreeHelperConfig> = {},
+): void => {
+  config = getConfig(config);
+  const list: any[] = [...tree];
+  const { children } = config;
+  for (let i = 0; i < list.length; i++) {
+    // func 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿
+    if (func(list[i])) {
+      return;
+    }
+    children &&
+      list[i][children] &&
+      list.splice(i + 1, 0, ...list[i][children]);
+  }
+};
+
+/**
+ * @description: Extract tree specified structure
+ */
+export const treeMap = <T = any>(
+  treeData: T[],
+  opt: { children?: string; conversion: Fn },
+): T[] => {
+  return treeData.map((item) => treeMapEach(item, opt));
+};
+
+/**
+ * @description: Extract tree specified structure
+ */
+export const treeMapEach = (
+  data: any,
+  { children = 'children', conversion }: { children?: string; conversion: Fn },
+) => {
+  const haveChildren =
+    Array.isArray(data[children]) && data[children].length > 0;
+  const conversionData = conversion(data) || {};
+  return haveChildren
+    ? {
+        ...conversionData,
+        [children]: data[children].map((i: number) =>
+          treeMapEach(i, {
+            children,
+            conversion,
+          }),
+        ),
+      }
+    : {
+        ...conversionData,
+      };
+};
+
+/**
+ * 递归遍历树结构
+ * @param treeDatas 树
+ * @param callBack 回调
+ * @param parentNode 父节点
+ */
+export const eachTree = (treeDatas: any[], callBack: Fn, parentNode = {}) => {
+  treeDatas.forEach((element) => {
+    const newNode = callBack(element, parentNode) || element;
+    if (element.children) {
+      eachTree(element.children, callBack, newNode);
+    }
+  });
+};
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ */
+export const handleTree = (
+  data: any[],
+  id?: string,
+  parentId?: string,
+  children?: string,
+) => {
+  if (!Array.isArray(data)) {
+    console.warn('data must be an array');
+    return [];
+  }
+  const config = {
+    id: id || 'id',
+    parentId: parentId || 'parentId',
+    childrenList: children || 'children',
+  };
+
+  const childrenListMap = {};
+  const nodeIds = {};
+  const tree: any[] = [];
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (
+      childrenListMap[parentId] === null ||
+      childrenListMap[parentId] === undefined
+    ) {
+      childrenListMap[parentId] = [];
+    }
+    nodeIds[d[config.id]] = d;
+    childrenListMap[parentId].push(d);
+  }
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (nodeIds[parentId] === null || nodeIds[parentId] === undefined) {
+      tree.push(d);
+    }
+  }
+
+  for (const t of tree) {
+    adaptToChildrenList(t);
+  }
+
+  function adaptToChildrenList(o) {
+    if (childrenListMap[o[config.id]] !== null) {
+      o[config.childrenList] = childrenListMap[o[config.id]];
+    }
+    if (o[config.childrenList]) {
+      for (const c of o[config.childrenList]) {
+        adaptToChildrenList(c);
+      }
+    }
+  }
+
+  return tree;
+};
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ * @param {*} rootId 根Id 默认 0
+ */
+// @ts-ignore: 遗留函数，保持原有逻辑不变
+export const handleTree2 = (data, id, parentId, children, rootId) => {
+  id = id || 'id';
+  parentId = parentId || 'parentId';
+  // children = children || 'children'
+  rootId =
+    rootId ||
+    Math.min(
+      ...data.map((item) => {
+        return item[parentId];
+      }),
+    ) ||
+    0;
+  // 对源数据深度克隆
+  const cloneData = structuredClone(data);
+  // 循环所有项
+  const treeData = cloneData.filter((father) => {
+    const branchArr = cloneData.filter((child) => {
+      // 返回每一项的子级数组
+      return father[id] === child[parentId];
+    });
+    branchArr.length > 0 ? (father.children = branchArr) : '';
+    // 返回第一层
+    return father[parentId] === rootId;
+  });
+  return treeData === '' ? data : treeData;
+};
+
+/**
+ * 校验选中的节点，是否为指定 level
+ *
+ * @param tree 要操作的树结构数据
+ * @param nodeId 需要判断在什么层级的数据
+ * @param level 检查的级别, 默认检查到二级
+ * @return true 是；false 否
+ */
+export const checkSelectedNode = (
+  tree: any[],
+  nodeId: any,
+  level = 2,
+): boolean => {
+  if (tree === undefined || !Array.isArray(tree) || tree.length === 0) {
+    console.warn('tree must be an array');
+    return false;
+  }
+
+  // 校验是否是一级节点
+  if (tree.some((item) => item.id === nodeId)) {
+    return false;
+  }
+
+  // 递归计数
+  let count = 1;
+
+  // 深层次校验
+  function performAThoroughValidation(arr: any[]): boolean {
+    count += 1;
+    for (const item of arr) {
+      if (item.id === nodeId) {
+        return true;
+      } else if (
+        item.children !== undefined &&
+        item.children.length > 0 &&
+        performAThoroughValidation(item.children)
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  for (const item of tree) {
+    count = 1;
+    if (
+      performAThoroughValidation(item.children) && // 找到后对比是否是期望的层级
+      count >= level
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+/**
+ * 获取节点的完整结构
+ * @param tree 树数据
+ * @param nodeId 节点 id
+ */
+export const treeToString = (tree: any[], nodeId) => {
+  if (tree === undefined || !Array.isArray(tree) || tree.length === 0) {
+    console.warn('tree must be an array');
+    return '';
+  }
+  // 校验是否是一级节点
+  const node = tree.find((item) => item.id === nodeId);
+  if (node !== undefined) {
+    return node.name;
+  }
+  let str = '';
+
+  function performAThoroughValidation(arr) {
+    if (arr === undefined || !Array.isArray(arr) || arr.length === 0) {
+      return false;
+    }
+    for (const item of arr) {
+      if (item.id === nodeId) {
+        str += ` / ${item.name}`;
+        return true;
+      } else if (item.children !== undefined && item.children.length > 0) {
+        str += ` / ${item.name}`;
+        if (performAThoroughValidation(item.children)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  for (const item of tree) {
+    str = `${item.name}`;
+    if (performAThoroughValidation(item.children)) {
+      break;
+    }
+  }
+  return str;
+};
diff --git a/apps/web-ele/src/utils/useUpload.ts b/apps/web-ele/src/utils/useUpload.ts
new file mode 100644
index 000000000..05da55f58
--- /dev/null
+++ b/apps/web-ele/src/utils/useUpload.ts
@@ -0,0 +1,67 @@
+import type { UploadRawFile } from 'element-plus';
+
+import { ElMessage } from 'element-plus';
+
+const message = ElMessage; // 消息
+
+enum UploadType {
+  Image = 'image',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+const useBeforeUpload = (type: UploadType, maxSizeMB: number) => {
+  const fn = (rawFile: UploadRawFile): 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(rawFile.type)) {
+      message.error(`上传${name}格式不对!`);
+      return false;
+    }
+    // 大小不正确
+    if (rawFile.size / 1024 / 1024 > maxSizeMB) {
+      message.error(`上传${name}大小不能超过${maxSizeMB}M!`);
+      return false;
+    }
+
+    return true;
+  };
+
+  return fn;
+};
+
+export { UploadType, useBeforeUpload };
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/mp/autoReply/data.ts b/apps/web-ele/src/views/mp/autoReply/data.ts
new file mode 100644
index 000000000..541ad2cdc
--- /dev/null
+++ b/apps/web-ele/src/views/mp/autoReply/data.ts
@@ -0,0 +1,90 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+
+import { MsgType } from './modules/types';
+
+/** 获取表格列配置 */
+export function useGridColumns(
+  msgType: MsgType,
+): VxeTableGridOptions['columns'] {
+  const columns: VxeTableGridOptions['columns'] = [];
+  // 请求消息类型列（仅消息回复显示）
+  if (msgType === MsgType.Message) {
+    columns.push({
+      field: 'requestMessageType',
+      title: '请求消息类型',
+      minWidth: 120,
+    });
+  }
+
+  // 关键词列（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    columns.push({
+      field: 'requestKeyword',
+      title: '关键词',
+      minWidth: 150,
+    });
+  }
+
+  // 匹配类型列（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    columns.push({
+      field: 'requestMatch',
+      title: '匹配类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH },
+      },
+    });
+  }
+
+  // 回复消息类型列
+  columns.push(
+    {
+      field: 'responseMessageType',
+      title: '回复消息类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_MESSAGE_TYPE },
+      },
+    },
+    {
+      field: 'responseContent',
+      title: '回复内容',
+      minWidth: 200,
+      slots: { default: 'replyContent' },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  );
+  return columns;
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: markRaw(WxAccountSelect),
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mp/autoReply/index.vue b/apps/web-ele/src/views/mp/autoReply/index.vue
new file mode 100644
index 000000000..fed1b9f6b
--- /dev/null
+++ b/apps/web-ele/src/views/mp/autoReply/index.vue
@@ -0,0 +1,253 @@
+<script lang="ts" setup>
+import type { TabPaneName } from 'element-plus';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+import { ContentWrap, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import {
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElRow,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import ReplyContentCell from './modules/ReplyTable.vue';
+import { MsgType } from './modules/types';
+
+defineOptions({ name: 'MpAutoReply' });
+
+const msgType = ref<MsgType>(MsgType.Keyword); // 消息类型
+async function onTabChange(_tabName: TabPaneName) {
+  // 等待 msgType 更新完成
+  await nextTick();
+  const columns = useGridColumns(msgType.value);
+  if (columns) {
+    // 使用 setGridOptions 更新列配置
+    gridApi.setGridOptions({ columns });
+    // 等待列配置更新完成
+    await nextTick();
+  }
+  await gridApi.query();
+  // 查询完成后更新数据长度
+  updateTableDataLength();
+}
+
+/** 新增按钮操作 */
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+
+  formModalApi
+    .setData({
+      isCreating: true,
+      msgType: msgType.value,
+      accountId: formValues.accountId,
+    })
+    .open();
+}
+
+/** 修改按钮操作 */
+async function handleEdit(row: any) {
+  const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
+  formModalApi
+    .setData({ isCreating: false, msgType: msgType.value, row: data })
+    .open();
+}
+
+/** 删除按钮操作 */
+async function handleDelete(row: any) {
+  await ElMessageBox.confirm('是否确认删除此数据?');
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', ['自动回复']),
+  });
+  try {
+    await MpAutoReplyApi.deleteAutoReply(row.id);
+    ElMessage.success('删除成功');
+    await gridApi.query();
+    // 查询完成后更新数据长度
+    updateTableDataLength();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    // 表单值变化时自动提交，这样 accountId 会被正确传递到查询函数
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(msgType.value),
+    height: 'calc(100vh - 300px)',
+    // height: '600px',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await MpAutoReplyApi.getAutoReplyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: msgType.value,
+            ...formValues,
+          });
+        },
+      },
+      // 禁用自动加载，等表单初始化完成后再加载
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+// 表格数据长度，用于判断是否显示新增按钮
+const tableDataLength = ref(0);
+
+// 更新表格数据长度（避免在模板中直接调用 getTableData 导致响应式循环）
+function updateTableDataLength() {
+  try {
+    if (!gridApi.grid) {
+      return;
+    }
+    const tableData = gridApi.grid.getTableData();
+    tableDataLength.value = tableData?.tableData?.length || 0;
+  } catch {
+    tableDataLength.value = 0;
+  }
+}
+
+// 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
+const showCreateButton = computed(() => {
+  if (msgType.value !== MsgType.Follow) {
+    return true;
+  }
+  return tableDataLength.value <= 0;
+});
+
+// 页面挂载后，等待表单初始化完成再加载数据
+onMounted(async () => {
+  // 等待 WxAccountSelect 组件加载并设置默认值
+  await nextTick();
+  if (gridApi.formApi) {
+    const formValues = await gridApi.formApi.getValues();
+    // 如果 accountId 有值，说明已经准备好了
+    if (formValues.accountId) {
+      // 设置为最新提交的值
+      gridApi.formApi.setLatestSubmissionValues(formValues);
+      // 触发首次查询
+      await gridApi.query();
+      updateTableDataLength();
+    }
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
+
+    <!-- tab 切换 -->
+    <ContentWrap>
+      <ElTabs v-model="msgType" @tab-change="onTabChange">
+        <!-- tab 项 -->
+        <ElTabPane :name="MsgType.Follow">
+          <template #label>
+            <ElRow align="middle">
+              <Icon icon="ep:star" class="mr-2px" /> 关注时回复
+            </ElRow>
+          </template>
+        </ElTabPane>
+        <ElTabPane :name="MsgType.Message">
+          <template #label>
+            <ElRow align="middle">
+              <Icon icon="ep:chat-line-round" class="mr-2px" /> 消息回复
+            </ElRow>
+          </template>
+        </ElTabPane>
+        <ElTabPane :name="MsgType.Keyword">
+          <template #label>
+            <ElRow align="middle">
+              <Icon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
+            </ElRow>
+          </template>
+        </ElTabPane>
+      </ElTabs>
+      <!-- 列表 -->
+      <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,
+              },
+            ]"
+          />
+        </template>
+        <template #replyContent="{ row }">
+          <ReplyContentCell :row="row" />
+        </template>
+        <template #actions="{ row }">
+          <TableAction
+            :actions="[
+              {
+                label: $t('common.edit'),
+                type: 'primary',
+                link: true,
+                icon: ACTION_ICON.EDIT,
+                auth: ['mp:auto-reply:update'],
+                onClick: handleEdit.bind(null, row),
+              },
+              {
+                label: $t('common.delete'),
+                type: 'danger',
+                link: true,
+                icon: ACTION_ICON.DELETE,
+                auth: ['mp:auto-reply:delete'],
+                popConfirm: {
+                  title: '是否确认删除此数据?',
+                  confirm: handleDelete.bind(null, row),
+                },
+              },
+            ]"
+          />
+        </template>
+      </Grid>
+    </ContentWrap>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue b/apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue
new file mode 100644
index 000000000..f55afc365
--- /dev/null
+++ b/apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { FormInstance } from 'element-plus';
+
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { computed, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+import WxReplySelect from '#/views/mp/modules/wx-reply';
+
+import { MsgType } from './types';
+
+defineOptions({ name: 'ReplyForm' });
+
+const props = defineProps<{
+  modelValue: any;
+  msgType: MsgType;
+  reply: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:reply', v: Reply): void;
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const reply = computed<Reply>({
+  get: () => props.reply,
+  set: (val) => emit('update:reply', val),
+});
+
+const replyForm = computed<any>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const formRef = ref<FormInstance | null>(null); // 表单 ref
+
+const RequestMessageTypes = [
+  'text',
+  'image',
+  'voice',
+  'video',
+  'shortvideo',
+  'location',
+  'link',
+]; // 允许选择的请求消息类型
+
+// 表单校验
+const rules = {
+  requestKeyword: [
+    { required: true, message: '请求的关键字不能为空', trigger: 'blur' },
+  ],
+  requestMatch: [
+    { required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' },
+  ],
+};
+
+defineExpose({
+  resetFields: () => formRef.value?.resetFields(),
+  validate: async () => formRef.value?.validate(),
+});
+</script>
+
+<template>
+  <div>
+    <ElForm ref="formRef" :model="replyForm" :rules="rules" label-width="80px">
+      <ElFormItem
+        label="消息类型"
+        prop="requestMessageType"
+        v-if="msgType === MsgType.Message"
+      >
+        <ElSelect v-model="replyForm.requestMessageType" placeholder="请选择">
+          <template
+            v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
+            :key="dict.value"
+          >
+            <ElOption
+              v-if="RequestMessageTypes.includes(dict.value as string)"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </template>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        label="匹配类型"
+        prop="requestMatch"
+        v-if="msgType === MsgType.Keyword"
+      >
+        <ElSelect
+          v-model="replyForm.requestMatch"
+          placeholder="请选择匹配类型"
+          clearable
+        >
+          <ElOption
+            v-for="dict in getDictOptions(
+              DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
+              'number',
+            )"
+            :key="String(dict.value)"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        label="关键词"
+        prop="requestKeyword"
+        v-if="msgType === MsgType.Keyword"
+      >
+        <ElInput
+          v-model="replyForm.requestKeyword"
+          placeholder="请输入内容"
+          clearable
+        />
+      </ElFormItem>
+      <ElFormItem label="回复消息">
+        <WxReplySelect v-model="reply" />
+      </ElFormItem>
+    </ElForm>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue b/apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue
new file mode 100644
index 000000000..bdfb41ade
--- /dev/null
+++ b/apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue
@@ -0,0 +1,55 @@
+<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';
+
+defineOptions({ name: 'ReplyContentCell' });
+
+const props = defineProps<{
+  row: any;
+}>();
+</script>
+
+<template>
+  <div>
+    <div v-if="props.row.responseMessageType === 'text'">
+      {{ props.row.responseContent }}
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'voice'">
+      <WxVoicePlayer
+        v-if="props.row.responseMediaUrl"
+        :url="props.row.responseMediaUrl"
+      />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'image'">
+      <a target="_blank" :href="props.row.responseMediaUrl">
+        <img :src="props.row.responseMediaUrl" style="width: 100px" />
+      </a>
+    </div>
+    <div
+      v-else-if="
+        props.row.responseMessageType === 'video' ||
+        props.row.responseMessageType === 'shortvideo'
+      "
+    >
+      <WxVideoPlayer
+        v-if="props.row.responseMediaUrl"
+        :url="props.row.responseMediaUrl"
+        style="margin-top: 10px"
+      />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'news'">
+      <WxNews :articles="props.row.responseArticles" />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'music'">
+      <WxMusic
+        :title="props.row.responseTitle"
+        :description="props.row.responseDescription"
+        :thumb-media-url="props.row.responseThumbMediaUrl"
+        :music-url="props.row.responseMusicUrl"
+        :hq-music-url="props.row.responseHqMusicUrl"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/form.vue b/apps/web-ele/src/views/mp/autoReply/modules/form.vue
new file mode 100644
index 000000000..b2502c2b9
--- /dev/null
+++ b/apps/web-ele/src/views/mp/autoReply/modules/form.vue
@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import { $t } from '#/locales';
+import { ReplyType } from '#/views/mp/modules/wx-reply/modules/types';
+
+import ReplyForm from './ReplyForm.vue';
+import { MsgType } from './types';
+
+const emit = defineEmits(['success']);
+
+const formRef = ref<InstanceType<typeof ReplyForm> | null>(null);
+
+const formData = ref<{ isCreating: boolean; msgType: MsgType; row?: any }>();
+const replyForm = ref<any>({});
+const reply = ref<Reply>({
+  type: ReplyType.Text,
+  accountId: -1,
+});
+
+const getTitle = computed(() => {
+  return formData.value?.isCreating
+    ? $t('ui.actionTitle.create', ['自动回复'])
+    : $t('ui.actionTitle.edit', ['自动回复']);
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+
+    // 处理回复消息
+    const submitForm: any = { ...replyForm.value };
+    submitForm.responseMessageType = reply.value.type;
+    submitForm.responseContent = reply.value.content;
+    submitForm.responseMediaId = reply.value.mediaId;
+    submitForm.responseMediaUrl = reply.value.url;
+    submitForm.responseTitle = reply.value.title;
+    submitForm.responseDescription = reply.value.description;
+    submitForm.responseThumbMediaId = reply.value.thumbMediaId;
+    submitForm.responseThumbMediaUrl = reply.value.thumbMediaUrl;
+    submitForm.responseArticles = reply.value.articles;
+    submitForm.responseMusicUrl = reply.value.musicUrl;
+    submitForm.responseHqMusicUrl = reply.value.hqMusicUrl;
+
+    modalApi.lock();
+    try {
+      if (replyForm.value.id === undefined) {
+        await MpAutoReplyApi.createAutoReply(submitForm);
+        ElMessage.success('新增成功');
+      } else {
+        await MpAutoReplyApi.updateAutoReply(submitForm);
+        ElMessage.success('修改成功');
+      }
+      await modalApi.close();
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      replyForm.value = {};
+      reply.value = {
+        type: ReplyType.Text,
+        accountId: -1,
+      };
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      accountId?: number;
+      isCreating: boolean;
+      msgType: MsgType;
+      row?: any;
+    }>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+
+    if (data.isCreating) {
+      // 新建：初始化表单
+      replyForm.value = {
+        id: undefined,
+        accountId: data.accountId || -1,
+        type: data.msgType,
+        requestKeyword: undefined,
+        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
+        requestMessageType: undefined,
+      };
+      reply.value = {
+        type: ReplyType.Text,
+        accountId: data.accountId || -1,
+      };
+    } else if (data.row) {
+      // 编辑：加载数据
+      const rowData = data.row;
+      replyForm.value = { ...rowData };
+      delete replyForm.value.responseMessageType;
+      delete replyForm.value.responseContent;
+      delete replyForm.value.responseMediaId;
+      delete replyForm.value.responseMediaUrl;
+      delete replyForm.value.responseDescription;
+      delete replyForm.value.responseArticles;
+      reply.value = {
+        type: rowData.responseMessageType,
+        accountId: data.accountId || -1,
+        content: rowData.responseContent,
+        mediaId: rowData.responseMediaId,
+        url: rowData.responseMediaUrl,
+        title: rowData.responseTitle,
+        description: rowData.responseDescription,
+        thumbMediaId: rowData.responseThumbMediaId,
+        thumbMediaUrl: rowData.responseThumbMediaUrl,
+        articles: rowData.responseArticles,
+        musicUrl: rowData.responseMusicUrl,
+        hqMusicUrl: rowData.responseHqMusicUrl,
+      };
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <ReplyForm
+      v-if="formData"
+      v-model="replyForm"
+      v-model:reply="reply"
+      :msg-type="formData.msgType"
+      ref="formRef"
+    />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/types.ts b/apps/web-ele/src/views/mp/autoReply/modules/types.ts
new file mode 100644
index 000000000..f07a7d758
--- /dev/null
+++ b/apps/web-ele/src/views/mp/autoReply/modules/types.ts
@@ -0,0 +1,7 @@
+// 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
+// 作为 tab.name，enum 的数字不能随意修改，与 api 参数相关
+export enum MsgType {
+  Follow = 1,
+  Keyword = 3,
+  Message = 2,
+}
diff --git a/apps/web-ele/src/views/mp/draft/data.ts b/apps/web-ele/src/views/mp/draft/data.ts
new file mode 100644
index 000000000..89492f63e
--- /dev/null
+++ b/apps/web-ele/src/views/mp/draft/data.ts
@@ -0,0 +1,41 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { markRaw } from 'vue';
+
+import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+
+/** 获取表格列配置 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'content',
+      title: '图文内容',
+      minWidth: 300,
+      slots: { default: 'content' },
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: markRaw(WxAccountSelect),
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mp/draft/index.vue b/apps/web-ele/src/views/mp/draft/index.vue
new file mode 100644
index 000000000..adca0ec51
--- /dev/null
+++ b/apps/web-ele/src/views/mp/draft/index.vue
@@ -0,0 +1,316 @@
+<script lang="ts" setup>
+import type { Article } from './modules/types';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { nextTick, onMounted, provide, ref, watch } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as MpDraftApi from '#/api/mp/draft';
+import * as MpFreePublishApi from '#/api/mp/freePublish';
+import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import DraftTableCell from './modules/draft-table.vue';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'MpDraft' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          // 更新 accountId
+          if (formValues?.accountId) {
+            accountId.value = formValues.accountId;
+          }
+          const drafts = await MpDraftApi.getDraftPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+          // 处理 API 返回的数据，兼容不同的数据结构
+          const formattedList: Article[] = drafts.list.map((draft: any) => {
+            // 如果已经是 content.newsItem 格式，直接使用
+            if (draft.content?.newsItem) {
+              const newsItem = draft.content.newsItem.map((item: any) => ({
+                ...item,
+                picUrl: item.thumbUrl || item.picUrl,
+              }));
+              return {
+                mediaId: draft.mediaId,
+                content: {
+                  newsItem,
+                },
+                updateTime:
+                  draft.updateTime ||
+                  (draft.createTime
+                    ? new Date(draft.createTime).getTime()
+                    : Date.now()),
+              };
+            }
+            // 如果是 articles 格式，转换为 content.newsItem 格式
+            if (draft.articles) {
+              const newsItem = draft.articles.map((article: any) => ({
+                ...article,
+                thumbUrl: article.thumbUrl || article.thumbMediaId,
+                picUrl: article.thumbUrl || article.thumbMediaId,
+              }));
+              return {
+                mediaId: draft.mediaId,
+                content: {
+                  newsItem,
+                },
+                updateTime:
+                  draft.updateTime ||
+                  (draft.createTime
+                    ? new Date(draft.createTime).getTime()
+                    : Date.now()),
+              };
+            }
+            // 默认返回空结构
+            return {
+              mediaId: draft.mediaId || '',
+              content: {
+                newsItem: [],
+              },
+              updateTime: draft.updateTime || Date.now(),
+            };
+          });
+          return {
+            page: {
+              total: drafts.total,
+            },
+            result: formattedList,
+          };
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Article>,
+});
+
+// 提供 accountId 给子组件
+const accountId = ref<number>(-1);
+
+// 监听表单提交，更新 accountId
+watch(
+  () => gridApi.formApi?.getLatestSubmissionValues?.()?.accountId,
+  (newAccountId) => {
+    if (newAccountId !== undefined) {
+      accountId.value = newAccountId;
+    }
+  },
+);
+
+provide('accountId', accountId);
+
+/** 新增按钮操作 */
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+
+  formModalApi
+    .setData({
+      isCreating: true,
+      accountId,
+      newsList: [createEmptyNewsItem()],
+    })
+    .open();
+}
+
+/** 修改按钮操作 */
+async function handleEdit(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+
+  formModalApi
+    .setData({
+      isCreating: false,
+      accountId,
+      mediaId: row.mediaId,
+      newsList: structuredClone(row.content.newsItem),
+    })
+    .open();
+}
+
+/** 发布按钮操作 */
+async function handlePublish(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+
+  const content =
+    '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。' +
+    '已发布内容不会推送给用户，也不会展示在公众号主页中。 ' +
+    '发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。';
+  try {
+    await ElMessageBox.confirm(content);
+    const loadingInstance = ElLoading.service({
+      text: '发布中...',
+    });
+    try {
+      await MpFreePublishApi.submitFreePublish(accountId, row.mediaId);
+      ElMessage.success('发布成功');
+      await gridApi.query();
+    } finally {
+      loadingInstance.close();
+    }
+  } catch {
+    //
+  }
+}
+
+/** 删除按钮操作 */
+async function handleDelete(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+
+  try {
+    await ElMessageBox.confirm('此操作将永久删除该草稿, 是否继续?');
+    const loadingInstance = ElLoading.service({
+      text: '删除中...',
+    });
+    try {
+      await MpDraftApi.deleteDraft(accountId, row.mediaId);
+      ElMessage.success('删除成功');
+      await gridApi.query();
+    } finally {
+      loadingInstance.close();
+    }
+  } catch {
+    //
+  }
+}
+
+// 页面挂载后，等待表单初始化完成再加载数据
+onMounted(async () => {
+  await nextTick();
+  if (gridApi.formApi) {
+    const formValues = await gridApi.formApi.getValues();
+    if (formValues.accountId) {
+      accountId.value = formValues.accountId;
+      gridApi.formApi.setLatestSubmissionValues(formValues);
+      await gridApi.query();
+    }
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+
+    <FormModal
+      @success="
+        () => {
+          gridApi.query();
+        }
+      "
+    />
+
+    <Grid table-title="草稿列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mp:draft:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #content="{ row }">
+        <DraftTableCell :row="row" />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '发布',
+              type: 'success',
+              link: true,
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['mp:free-publish:submit'],
+              onClick: handlePublish.bind(null, row),
+            },
+            {
+              label: '编辑',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:draft:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:draft:delete'],
+              popConfirm: {
+                title: '是否确认删除此数据?',
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+:deep(.vxe-table--body-wrapper) {
+  .vxe-table--body {
+    .vxe-body--column {
+      .vxe-cell {
+        padding: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/mp/draft/mock.js b/apps/web-ele/src/views/mp/draft/mock.js
new file mode 100644
index 000000000..04b12c873
--- /dev/null
+++ b/apps/web-ele/src/views/mp/draft/mock.js
@@ -0,0 +1,164 @@
+export default {
+  list: [
+    {
+      mediaId:
+        'r6ryvl6LrxBU0miaST4Y-q-G9pdsmZw0OYG4FzHQkKfpLfEwIH51wy2bxisx8PvW',
+      content: {
+        newsItem: [
+          {
+            title: '我是标题（OOO）',
+            author: '我是作者',
+            digest: '我是摘要',
+            content: '我是内容',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9XaFphcmtJVFh3VEc4Q1MxQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN2QxTE56SFBCYXc2RE9NcUxIeS1CQjJuUHhTWjBlN2VOeGRpRi1fZUhwN1FNQjdrQV9yRU9EU0hibHREZmZoVW5acnZrN3ZjaWsxejR3RGpKczBzTHFIM0dFNFZWVkpBc0dWWlAzUEhlVmpnfn4%3D&chksm=1f6354802814dd969ef83c0f3babe555c614270b30bc383beaf7ffd13b0257f0fe5ced9af694#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
+          },
+          {
+            title: '我是标题（XXX）',
+            author: '我是作者',
+            digest: '我是摘要',
+            content: '我是内容',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9yTlYwOEs1clpwcE5OUEhCQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN0NSMjFqN3N1aUZMbFNVLTZHN2ZDME9qOGp2THk2RFNlSTlKZ3Y1czFVZDdQQm5IeUg3dEppSUtpQUh5SExOOTRkT3dHNUdBdHdWSWlOendlREV3dS1jUEVQbFpiVTZmVW5iRWhZcGdkNTFRfn4%3D&chksm=1f6354802814dd96a403151cd44c7da4eecf0e475d25423e46ecd795b513bafd829a75daef9b#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
+          },
+        ],
+      },
+      updateTime: 1_673_655_730,
+    },
+    {
+      mediaId:
+        'r6ryvl6LrxBU0miaST4Y-jGpXnO73ihN0lsNXknCRQHapp2xgHMRxHKG50LituFe',
+      content: {
+        newsItem: [
+          {
+            title: '我是标题（修改）',
+            author: '我是作者',
+            digest: '我是摘要',
+            content: '我是内容',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl95WVFXYndIZnZJd0t5cjgvQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN1dlNURPbWswbEF4RDd5dVJTdjQ4cm9Cc0Q1TWhpMUh6SE1hVEE3ZHljaHhlZjZYSGF5N2JNSHpDTlh6ajNZbkpGTGpTcUQ4M3NMdW41ZUpXNFZZQ1VKbVlaMVp5ekxEV1czREdsY1dOYTZnfn4%3D&chksm=1f6354be2814dda8e6238037c2ebd52b1c8e80e93249a861ad80e4d40e5ca7207233475ca689#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
+          },
+        ],
+      },
+      updateTime: 1_673_655_584,
+    },
+    {
+      mediaId:
+        'r6ryvl6LrxBU0miaST4Y-v5SrbNCPpD6M_p3TmSrYwTjKogs-0DMJgmjMyNZPeMO',
+      content: {
+        newsItem: [
+          {
+            title: '1321',
+            author: '3232',
+            digest: '1333',
+            content: '<p>444</p>',
+            contentSourceUrl: 'http://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-tlQmcl3RdC-Jcgns6IQtf7zenGy3b86WLT7GzUcrb1T',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9jelJiaDAzbmdpSkJOZ2M2QWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNDNXVVc2ZDRYeTY0Zm1weXR6dE9vQWh1TzEwbEpUVnRfVzJyaGFDNXBkZ0ZXM2JFOTNaRHNhOHRUeFdEanhMeS01X01kMUNWQ1BpRER3cjYwTl9pMnpFLUJhZXFucVVfM1pDUXlTUEl1S25nfn4%3D&chksm=1f6354bc2814ddaa56a90ad5bc3d078601c8d1589ba01827a8170587bc830ff9747b5f59c3a0#rd',
+            thumbUrl:
+              'http://mmbiz.qpic.cn/mmbiz_png/btUmCVHwbJUoicwBiacjVeQbu6QxgBVrukfSJXz509boa21SpH8OVHAqXCJiaiaAaHQJNxwwsa0gHRXVr0G5EZYamw/0?wx_fmt=png',
+          },
+        ],
+      },
+      updateTime: 1_673_628_969,
+    },
+    {
+      mediaId:
+        'r6ryvl6LrxBU0miaST4Y-vdWrisK5EZbk4Y3tzh8P0PG0eEUbnQrh0BcsEb3WNP0',
+      content: {
+        newsItem: [
+          {
+            title: 'tudou',
+            author: 'haha',
+            digest: '312',
+            content: '<p>132312</p>',
+            contentSourceUrl: 'http://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qdkJ1ZjBoUmg2Uk9TS3RlQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNVg2aTJsaC1fMkU2eXNacUplN3VDTTZFZkhtMjhuTUZvWkxsNDBRSXExY2tiVXRHb09TaHgtREhzY3doZ0JYeC1TSTZ5eWZldXJsOWtfbV8yMi1aYkcyZ2pOY0haM0Ntb3VSWEtxUGVFRlNBfn4%3D&chksm=1f6354ba2814ddacf0184b24d310483641ef190b1faac098c285eb416c70017e2f54decfa1af#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG.png',
+          },
+        ],
+      },
+      updateTime: 1_673_628_760,
+    },
+    {
+      mediaId:
+        'r6ryvl6LrxBU0miaST4Y-u9kTIm1DhWZDdXyxsxUVv2Z5DAB99IPxkIRTUUD206k',
+      content: {
+        newsItem: [
+          {
+            title: '12',
+            author: '333',
+            digest: '123',
+            content: '123',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qVVhpSDZUaFJWTzBBWWRVQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNWRnTDJWYmF2NER0clV1bThmQ0xUR3hqQnJkZ3BJSUNmNDJmc0lCZ1dadkVnZ3Z5bkN4YWtVUjhoaWZWYzZURUR4NnpMd0Y4Z3U5aUdib0lkMzI4Rjg3SG9JX2FycTMxbUctOHplaTlQVVhnfn4%3D&chksm=1f6354b62814dda076c778af33f06580165d8aa81f7798d55cfabb1886b5c74d9b2124a3535c#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8.jpg',
+          },
+        ],
+      },
+      updateTime: 1_673_626_494,
+    },
+    {
+      mediaId:
+        'r6ryvl6LrxBU0miaST4Y-sO24upobaENDmeByfBTfaozB3aOqSMAV0lGy-UkHXE7',
+      content: {
+        newsItem: [
+          {
+            title: '我是标题',
+            author: '我是作者',
+            digest: '我是摘要',
+            content: '我是内容',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9LT2dqRnpMNUpsR0hjYWtBQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNGNmazZTdlE5WkxvU0tfX2V5cjV2WjJiR0xjQUhyREFSZWo2eWNrUW9EYVh6ZkpWRXBLR3FmTEV6YldBMno3Q2ZvVXBSdzlaVDc3aFhndEpQWUwzWmFMUWt0YVVURE1VZ1FsQTdPMlRtc3JBfn4%3D&chksm=1f6354aa2814ddbcc2637382f963a8742993ac38ebcebe6e3411df5ac82ac7bbdb391be6494a#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
+          },
+        ],
+      },
+      updateTime: 1_673_534_279,
+    },
+  ],
+  total: 6,
+};
diff --git a/apps/web-ele/src/views/mp/draft/modules/cover-select.vue b/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
new file mode 100644
index 000000000..29439f556
--- /dev/null
+++ b/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus';
+
+import type { NewsItem } from './types';
+
+import { computed, inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import { ElButton, ElDialog, ElImage, ElMessage, ElUpload } from 'element-plus';
+
+import { UploadType, useBeforeUpload } from '#/utils/useUpload';
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+
+// 设置上传的请求头部
+
+const props = defineProps<{
+  isFirst: boolean;
+  modelValue: NewsItem;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: NewsItem): void;
+}>();
+
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传永久素材的地址
+const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
+const newsItem = computed<NewsItem>({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+const accountId = inject<number>('accountId');
+const showImageDialog = ref(false);
+
+const fileList = ref<UploadFiles>([]);
+interface UploadData {
+  type: UploadType;
+  accountId: number;
+}
+const uploadData: UploadData = reactive({
+  type: UploadType.Image,
+  accountId: accountId!,
+});
+
+/** 素材选择完成事件*/
+function onMaterialSelected(item: any) {
+  showImageDialog.value = false;
+  newsItem.value.thumbMediaId = item.mediaId;
+  newsItem.value.thumbUrl = item.url;
+}
+
+const onBeforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
+  useBeforeUpload(UploadType.Image, 2)(rawFile);
+
+function onUploadSuccess(res: any) {
+  if (res.code !== 0) {
+    ElMessage.error(`上传出错：${res.msg}`);
+    return false;
+  }
+
+  // 重置上传文件的表单
+  fileList.value = [];
+
+  // 设置草稿的封面字段
+  newsItem.value.thumbMediaId = res.data.mediaId;
+  newsItem.value.thumbUrl = res.data.url;
+}
+
+function onUploadError(err: Error) {
+  ElMessage.error(`上传失败: ${err.message}`);
+}
+</script>
+
+<template>
+  <div>
+    <p>封面:</p>
+    <div class="thumb-div">
+      <ElImage
+        v-if="newsItem.thumbUrl"
+        style="width: 300px; max-height: 300px"
+        :src="newsItem.thumbUrl"
+        fit="contain"
+      />
+      <IconifyIcon
+        v-else
+        icon="ep:plus"
+        class="avatar-uploader-icon"
+        :class="isFirst ? 'avatar' : 'avatar1'"
+      />
+      <div class="thumb-but">
+        <ElUpload
+          :action="UPLOAD_URL"
+          :headers="HEADERS"
+          multiple
+          :limit="1"
+          :file-list="fileList"
+          :data="uploadData"
+          :before-upload="onBeforeUpload"
+          :on-error="onUploadError"
+          :on-success="onUploadSuccess"
+        >
+          <template #trigger>
+            <ElButton size="small" type="primary">本地上传</ElButton>
+          </template>
+          <ElButton
+            size="small"
+            type="primary"
+            @click="showImageDialog = true"
+            style="margin-left: 5px"
+          >
+            素材库选择
+          </ElButton>
+          <template #tip>
+            <div class="el-upload__tip">
+              支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
+            </div>
+          </template>
+        </ElUpload>
+      </div>
+      <ElDialog
+        title="选择图片"
+        v-model="showImageDialog"
+        width="80%"
+        append-to-body
+        destroy-on-close
+      >
+        <WxMaterialSelect
+          type="image"
+          :account-id="accountId!"
+          @select-material="onMaterialSelected"
+        />
+      </ElDialog>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-upload__tip {
+  margin-left: 5px;
+}
+
+.thumb-div {
+  display: inline-block;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+
+  .avatar-uploader-icon {
+    width: 120px;
+    height: 120px;
+    font-size: 28px;
+    line-height: 120px;
+    color: #8c939d;
+    text-align: center;
+    border: 1px solid #d9d9d9;
+  }
+
+  .avatar {
+    width: 230px;
+    height: 120px;
+  }
+
+  .avatar1 {
+    width: 120px;
+    height: 120px;
+  }
+
+  .thumb-but {
+    margin: 5px;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/mp/draft/modules/draft-table.vue b/apps/web-ele/src/views/mp/draft/modules/draft-table.vue
new file mode 100644
index 000000000..46f6e7440
--- /dev/null
+++ b/apps/web-ele/src/views/mp/draft/modules/draft-table.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { Article } from './types';
+
+import WxNews from '#/views/mp/modules/wx-news';
+
+defineOptions({ name: 'DraftTableCell' });
+
+const props = defineProps<{
+  row: Article;
+}>();
+</script>
+
+<template>
+  <div class="draft-content">
+    <div v-if="props.row.content && props.row.content.newsItem">
+      <WxNews :articles="props.row.content.newsItem" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.draft-content {
+  padding: 10px;
+}
+</style>
diff --git a/apps/web-ele/src/views/mp/draft/modules/form.vue b/apps/web-ele/src/views/mp/draft/modules/form.vue
new file mode 100644
index 000000000..fde1c5e20
--- /dev/null
+++ b/apps/web-ele/src/views/mp/draft/modules/form.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import type { NewsItem } from './types';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import * as MpDraftApi from '#/api/mp/draft';
+
+import NewsForm from './news-form.vue';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<{
+  accountId: number;
+  isCreating: boolean;
+  mediaId?: string;
+  newsList?: NewsItem[];
+}>();
+const newsList = ref<NewsItem[]>([]);
+const isSubmitting = ref(false);
+const isSaved = ref(false);
+
+const getTitle = computed(() => {
+  return formData.value?.isCreating ? '新建图文' : '修改图文';
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!formData.value) {
+      return;
+    }
+
+    isSubmitting.value = true;
+    modalApi.lock();
+    try {
+      if (formData.value.isCreating) {
+        await MpDraftApi.createDraft(formData.value.accountId, newsList.value);
+        ElMessage.success('新增成功');
+      } else if (formData.value.mediaId) {
+        await MpDraftApi.updateDraft(
+          formData.value.accountId,
+          formData.value.mediaId,
+          newsList.value,
+        );
+        ElMessage.success('更新成功');
+      }
+      isSaved.value = true;
+      await modalApi.close();
+      emit('success');
+    } finally {
+      isSubmitting.value = false;
+      modalApi.unlock();
+    }
+  },
+  async onBeforeClose() {
+    // 如果已经成功保存，直接关闭，不显示提示
+    if (isSaved.value) {
+      return true;
+    }
+    try {
+      await ElMessageBox.confirm('修改内容可能还未保存，确定关闭吗?');
+      return true;
+    } catch {
+      return false;
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      newsList.value = [];
+      isSaved.value = false;
+      return;
+    }
+    isSaved.value = false;
+    const data = modalApi.getData<{
+      accountId: number;
+      isCreating: boolean;
+      mediaId?: string;
+      newsList?: NewsItem[];
+    }>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+    newsList.value = data.newsList || [];
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5" destroy-on-close>
+    <NewsForm
+      v-if="formData"
+      v-model="newsList"
+      v-loading="isSubmitting"
+      :is-creating="formData.isCreating"
+    />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mp/draft/modules/news-form.vue b/apps/web-ele/src/views/mp/draft/modules/news-form.vue
new file mode 100644
index 000000000..e013eb21e
--- /dev/null
+++ b/apps/web-ele/src/views/mp/draft/modules/news-form.vue
@@ -0,0 +1,341 @@
+<script lang="ts" setup>
+import type { NewsItem } from './types';
+
+import { computed, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElAside,
+  ElButton,
+  ElCol,
+  ElContainer,
+  ElInput,
+  ElMain,
+  ElMessageBox,
+  ElRow,
+} from 'element-plus';
+
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+
+import CoverSelect from './cover-select.vue';
+import { createEmptyNewsItem } from './types';
+
+defineOptions({ name: 'NewsForm' });
+
+const props = defineProps<{
+  isCreating: boolean;
+  modelValue: NewsItem[] | null;
+}>();
+
+// v-model=newsList
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: NewsItem[]): void;
+}>();
+
+const newsList = computed<NewsItem[]>({
+  get() {
+    return props.modelValue === null
+      ? [createEmptyNewsItem()]
+      : props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+const activeNewsIndex = ref(0);
+const activeNewsItem = computed(() => {
+  const item = newsList.value[activeNewsIndex.value];
+  if (!item) {
+    return createEmptyNewsItem();
+  }
+  return item;
+});
+
+// 将图文向下移动
+function moveDownNews(index: number) {
+  const current = newsList.value[index];
+  const next = newsList.value[index + 1];
+  if (current && next) {
+    newsList.value[index] = next;
+    newsList.value[index + 1] = current;
+    activeNewsIndex.value = index + 1;
+  }
+}
+
+// 将图文向上移动
+function moveUpNews(index: number) {
+  const current = newsList.value[index];
+  const prev = newsList.value[index - 1];
+  if (current && prev) {
+    newsList.value[index] = prev;
+    newsList.value[index - 1] = current;
+    activeNewsIndex.value = index - 1;
+  }
+}
+
+// 删除指定 index 的图文
+async function removeNews(index: number) {
+  try {
+    await ElMessageBox.confirm('确定删除该图文吗?');
+    newsList.value.splice(index, 1);
+    if (activeNewsIndex.value === index) {
+      activeNewsIndex.value = 0;
+    }
+  } catch {
+    // empty
+  }
+}
+
+// 添加一个图文
+function plusNews() {
+  newsList.value.push(createEmptyNewsItem());
+  activeNewsIndex.value = newsList.value.length - 1;
+}
+</script>
+
+<template>
+  <ElContainer>
+    <ElAside width="40%">
+      <div class="select-item">
+        <div v-for="(news, index) in newsList" :key="index">
+          <div
+            class="news-main father"
+            v-if="index === 0"
+            :class="{ activeAddNews: activeNewsIndex === index }"
+            @click="activeNewsIndex = index"
+          >
+            <div class="news-content">
+              <img class="material-img" :src="news.thumbUrl" />
+              <div class="news-content-title">{{ news.title }}</div>
+            </div>
+            <div class="child" v-if="newsList.length > 1">
+              <ElButton
+                type="info"
+                circle
+                size="small"
+                @click="() => moveDownNews(index)"
+              >
+                <IconifyIcon icon="ep:arrow-down-bold" />
+              </ElButton>
+              <ElButton
+                v-if="isCreating"
+                type="danger"
+                circle
+                size="small"
+                @click="() => removeNews(index)"
+              >
+                <IconifyIcon icon="ep:delete" />
+              </ElButton>
+            </div>
+          </div>
+          <div
+            class="news-main-item father"
+            v-if="index > 0"
+            :class="{ activeAddNews: activeNewsIndex === index }"
+            @click="activeNewsIndex = index"
+          >
+            <div class="news-content-item">
+              <div class="news-content-item-title">{{ news.title }}</div>
+              <div class="news-content-item-img">
+                <img class="material-img" :src="news.thumbUrl" width="100%" />
+              </div>
+            </div>
+            <div class="child">
+              <ElButton
+                v-if="newsList.length > index + 1"
+                circle
+                type="info"
+                size="small"
+                @click="() => moveDownNews(index)"
+              >
+                <IconifyIcon icon="ep:arrow-down-bold" />
+              </ElButton>
+              <ElButton
+                v-if="index > 0"
+                type="info"
+                circle
+                size="small"
+                @click="() => moveUpNews(index)"
+              >
+                <IconifyIcon icon="ep:arrow-up-bold" />
+              </ElButton>
+              <ElButton
+                v-if="isCreating"
+                type="danger"
+                size="small"
+                circle
+                @click="() => removeNews(index)"
+              >
+                <IconifyIcon icon="ep:delete" />
+              </ElButton>
+            </div>
+          </div>
+        </div>
+        <ElRow justify="center" class="ope-row">
+          <ElButton
+            type="primary"
+            circle
+            @click="plusNews"
+            v-if="newsList.length < 8 && isCreating"
+          >
+            <IconifyIcon icon="ep:plus" />
+          </ElButton>
+        </ElRow>
+      </div>
+    </ElAside>
+    <ElMain>
+      <div v-if="newsList.length > 0 && activeNewsItem">
+        <!-- 标题、作者、原文地址 -->
+        <ElRow :gutter="20">
+          <ElInput
+            v-model="activeNewsItem.title"
+            placeholder="请输入标题（必填）"
+          />
+          <ElInput
+            v-model="activeNewsItem.author"
+            placeholder="请输入作者"
+            style="margin-top: 5px"
+          />
+          <ElInput
+            v-model="activeNewsItem.contentSourceUrl"
+            placeholder="请输入原文地址"
+            style="margin-top: 5px"
+          />
+        </ElRow>
+        <!-- 封面和摘要 -->
+        <ElRow :gutter="20">
+          <ElCol :span="12">
+            <CoverSelect
+              v-model="activeNewsItem"
+              :is-first="activeNewsIndex === 0"
+            />
+          </ElCol>
+          <ElCol :span="12">
+            <p>摘要:</p>
+            <ElInput
+              :rows="8"
+              type="textarea"
+              v-model="activeNewsItem.digest"
+              placeholder="请输入摘要"
+              class="digest"
+              maxlength="120"
+            />
+          </ElCol>
+        </ElRow>
+        <!--富文本编辑器组件-->
+        <ElRow>
+          <RichTextarea v-model="activeNewsItem.content" />
+        </ElRow>
+      </div>
+    </ElMain>
+  </ElContainer>
+</template>
+
+<style lang="scss" scoped>
+.ope-row {
+  padding-top: 5px;
+  margin-top: 5px;
+  text-align: center;
+  border-top: 1px solid #eaeaea;
+}
+
+.el-row {
+  margin-bottom: 20px;
+}
+
+.el-row:last-child {
+  margin-bottom: 0;
+}
+
+.digest {
+  display: inline-block;
+  width: 100%;
+  vertical-align: top;
+}
+
+/* 新增图文 */
+.news-main {
+  width: 100%;
+  height: 120px;
+  margin: auto;
+  background-color: #fff;
+}
+
+.news-content {
+  position: relative;
+  width: 100%;
+  height: 120px;
+  background-color: #acadae;
+}
+
+.news-content-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: inline-block;
+  width: 98%;
+  height: 25px;
+  padding: 1%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 15px;
+  color: #fff;
+  white-space: nowrap;
+  background-color: black;
+  opacity: 0.65;
+}
+
+.news-main-item {
+  width: 100%;
+  padding: 5px 0;
+  margin: auto;
+  background-color: #fff;
+  border-top: 1px solid #eaeaea;
+}
+
+.news-content-item {
+  position: relative;
+  margin-left: -3px;
+}
+
+.news-content-item-title {
+  display: inline-block;
+  width: 70%;
+  font-size: 12px;
+}
+
+.news-content-item-img {
+  display: inline-block;
+  width: 25%;
+  background-color: #acadae;
+}
+
+.select-item {
+  width: 60%;
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+
+  .activeAddNews {
+    border: 5px solid #2bb673;
+  }
+}
+
+.father .child {
+  position: relative;
+  bottom: 25px;
+  display: none;
+  text-align: center;
+}
+
+.father:hover .child {
+  display: block;
+}
+
+.material-img {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/apps/web-ele/src/views/mp/draft/modules/types.ts b/apps/web-ele/src/views/mp/draft/modules/types.ts
new file mode 100644
index 000000000..774e3a2cb
--- /dev/null
+++ b/apps/web-ele/src/views/mp/draft/modules/types.ts
@@ -0,0 +1,41 @@
+interface NewsItem {
+  title: string;
+  thumbMediaId: string;
+  author: string;
+  digest: string;
+  showCoverPic: number;
+  content: string;
+  contentSourceUrl: string;
+  needOpenComment: number;
+  onlyFansCanComment: number;
+  thumbUrl: string;
+  picUrl?: string; // 用于预览封面
+}
+
+interface NewsItemList {
+  newsItem: NewsItem[];
+}
+
+interface Article {
+  mediaId: string;
+  content: NewsItemList;
+  updateTime: number;
+}
+
+const createEmptyNewsItem = (): NewsItem => {
+  return {
+    title: '',
+    thumbMediaId: '',
+    author: '',
+    digest: '',
+    showCoverPic: 0,
+    content: '',
+    contentSourceUrl: '',
+    needOpenComment: 0,
+    onlyFansCanComment: 0,
+    thumbUrl: '',
+  };
+};
+
+export type { Article, NewsItem, NewsItemList };
+export { createEmptyNewsItem };
diff --git a/apps/web-ele/src/views/mp/menu/assets/iphone_backImg.png b/apps/web-ele/src/views/mp/menu/assets/iphone_backImg.png
new file mode 100644
index 000000000..bb09591a7
Binary files /dev/null and b/apps/web-ele/src/views/mp/menu/assets/iphone_backImg.png differ
diff --git a/apps/web-ele/src/views/mp/menu/assets/menu_foot.png b/apps/web-ele/src/views/mp/menu/assets/menu_foot.png
new file mode 100644
index 000000000..4a89d4bd2
Binary files /dev/null and b/apps/web-ele/src/views/mp/menu/assets/menu_foot.png differ
diff --git a/apps/web-ele/src/views/mp/menu/assets/menu_head.png b/apps/web-ele/src/views/mp/menu/assets/menu_head.png
new file mode 100644
index 000000000..248cfb761
Binary files /dev/null and b/apps/web-ele/src/views/mp/menu/assets/menu_head.png differ
diff --git a/apps/web-ele/src/views/mp/menu/data.ts b/apps/web-ele/src/views/mp/menu/data.ts
new file mode 100644
index 000000000..2a22837ba
--- /dev/null
+++ b/apps/web-ele/src/views/mp/menu/data.ts
@@ -0,0 +1,9 @@
+/** 菜单未选中标识 */
+export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__';
+
+/** 菜单级别枚举 */
+export enum Level {
+  Child = '2',
+  Parent = '1',
+  Undefined = '0',
+}
diff --git a/apps/web-ele/src/views/mp/menu/index.vue b/apps/web-ele/src/views/mp/menu/index.vue
new file mode 100644
index 000000000..bc725817d
--- /dev/null
+++ b/apps/web-ele/src/views/mp/menu/index.vue
@@ -0,0 +1,413 @@
+<script lang="ts" setup>
+import type { Menu, RawMenu } from './modules/types';
+
+import { ref } from 'vue';
+
+import { confirm, ContentWrap, DocAlert, Page } from '@vben/common-ui';
+
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElLoading,
+  ElMessage,
+} from 'element-plus';
+
+import * as MpMenuApi from '#/api/mp/menu';
+import * as UtilsTree from '#/utils/tree';
+import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
+import MenuEditor from '#/views/mp/menu/modules/menu-editor.vue';
+import MenuPreviewer from '#/views/mp/menu/modules/menu-previewer.vue';
+import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+
+defineOptions({ name: 'MpMenu' });
+
+// ======================== 列表查询 ========================
+const loading = ref(false); // 遮罩层
+const accountId = ref(-1);
+const accountName = ref<string>('');
+const menuList = ref<Menu[]>([]);
+
+// ======================== 菜单操作 ========================
+// 当前选中菜单编码：
+//  * 一级（'x'）
+//  * 二级（'x-y'）
+//  * 未选中（MENU_NOT_SELECTED）
+const activeIndex = ref<string>(MENU_NOT_SELECTED);
+// 二级菜单显示标志: 归属的一级菜单index
+// * 未初始化：-1
+// * 初始化：x
+const parentIndex = ref(-1);
+
+// ======================== 菜单编辑 ========================
+const showRightPanel = ref(false); // 右边配置显示默认详情还是配置详情
+const isParent = ref<boolean>(true); // 是否一级菜单，控制MenuEditor中name字段长度
+const activeMenu = ref<Menu>({}); // 选中菜单，MenuEditor的modelValue
+
+// 一些临时值放在这里进行判断，如果放在 activeMenu，由于引用关系，menu 也会多了多余的参数
+const tempSelfObj = ref<{
+  grand: Level;
+  x: number;
+  y: number;
+}>({
+  grand: Level.Undefined,
+  x: 0,
+  y: 0,
+});
+const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
+
+/** 侦听公众号变化 */
+function onAccountChanged(id: number, name: string) {
+  accountId.value = id;
+  accountName.value = name;
+  getList();
+}
+
+/** 查询并转换菜单 */
+async function getList() {
+  loading.value = true;
+  try {
+    const data = await MpMenuApi.getMenuList(accountId.value);
+    const menuData = menuListToFrontend(data);
+    menuList.value = UtilsTree.handleTree(menuData, 'id');
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  resetForm();
+  getList();
+}
+
+/** 将后端返回的 menuList，转换成前端的 menuList */
+function menuListToFrontend(list: any[]) {
+  if (!list) return [];
+
+  const result: RawMenu[] = [];
+  list.forEach((item: RawMenu) => {
+    const menu: any = {
+      ...item,
+    };
+    menu.reply = {
+      type: item.replyMessageType,
+      accountId: item.accountId,
+      content: item.replyContent,
+      mediaId: item.replyMediaId,
+      url: item.replyMediaUrl,
+      title: item.replyTitle,
+      description: item.replyDescription,
+      thumbMediaId: item.replyThumbMediaId,
+      thumbMediaUrl: item.replyThumbMediaUrl,
+      articles: item.replyArticles,
+      musicUrl: item.replyMusicUrl,
+      hqMusicUrl: item.replyHqMusicUrl,
+    };
+    result.push(menu as RawMenu);
+  });
+  return result;
+}
+
+/** 重置表单，清空表单数据 */
+function resetForm() {
+  // 菜单操作
+  activeIndex.value = MENU_NOT_SELECTED;
+  parentIndex.value = -1;
+
+  // 菜单编辑
+  showRightPanel.value = false;
+  activeMenu.value = {};
+  tempSelfObj.value = { grand: Level.Undefined, x: 0, y: 0 };
+  dialogNewsVisible.value = false;
+}
+
+// ======================== 菜单操作 ========================
+/** 一级菜单点击事件 */
+function menuClicked(parent: Menu, x: number) {
+  // 右侧的表单相关
+  showRightPanel.value = true; // 右边菜单
+  activeMenu.value = parent; // 这个如果放在顶部，flag 会没有。因为重新赋值了。
+  tempSelfObj.value.grand = Level.Parent; // 表示一级菜单
+  tempSelfObj.value.x = x; // 表示一级菜单索引
+  isParent.value = true;
+
+  // 左侧的选中
+  activeIndex.value = `${x}`; // 菜单选中样式
+  parentIndex.value = x; // 二级菜单显示标志
+}
+
+/** 二级菜单点击事件 */
+function subMenuClicked(child: Menu, x: number, y: number) {
+  // 右侧的表单相关
+  showRightPanel.value = true; // 右边菜单
+  activeMenu.value = child; // 将点击的数据放到临时变量，对象有引用作用
+  tempSelfObj.value.grand = Level.Child; // 表示二级菜单
+  tempSelfObj.value.x = x; // 表示一级菜单索引
+  tempSelfObj.value.y = y; // 表示二级菜单索引
+  isParent.value = false;
+
+  // 左侧的选中
+  activeIndex.value = `${x}-${y}`;
+}
+
+/** 删除当前菜单 */
+async function onDeleteMenu() {
+  try {
+    await confirm('确定要删除吗?');
+    if (tempSelfObj.value.grand === Level.Parent) {
+      // 一级菜单的删除方法
+      menuList.value.splice(tempSelfObj.value.x, 1);
+    } else if (tempSelfObj.value.grand === Level.Child) {
+      // 二级菜单的删除方法
+      menuList.value[tempSelfObj.value.x]?.children?.splice(
+        tempSelfObj.value.y,
+        1,
+      );
+    }
+    // 提示
+    ElMessage.success('删除成功');
+
+    // 处理菜单的选中
+    activeMenu.value = {};
+    showRightPanel.value = false;
+    activeIndex.value = MENU_NOT_SELECTED;
+  } catch {
+    //
+  }
+}
+
+// ======================== 菜单编辑 ========================
+/** 保存菜单 */
+async function onSave() {
+  try {
+    await confirm('确定要保存吗?');
+    const loadingInstance = ElLoading.service({
+      text: '保存中...',
+    });
+    try {
+      await MpMenuApi.saveMenu(accountId.value, menuListToBackend());
+      getList();
+      ElMessage.success('发布成功');
+    } finally {
+      loadingInstance.close();
+    }
+  } catch {
+    //
+  }
+}
+
+/** 清空菜单 */
+async function onClear() {
+  try {
+    await confirm('确定要删除吗?');
+    const loadingInstance = ElLoading.service({
+      text: '删除中...',
+    });
+    try {
+      await MpMenuApi.deleteMenu(accountId.value);
+      handleQuery();
+      ElMessage.success('清空成功');
+    } finally {
+      loadingInstance.close();
+    }
+  } catch {
+    //
+  }
+}
+
+/** 将前端的 menuList，转换成后端接收的 menuList */
+function menuListToBackend() {
+  const result: any[] = [];
+  menuList.value.forEach((item) => {
+    const menu = menuToBackend(item);
+    result.push(menu);
+
+    // 处理子菜单
+    if (!item.children || item.children.length <= 0) {
+      return;
+    }
+    menu.children = [];
+    item.children.forEach((subItem) => {
+      menu.children.push(menuToBackend(subItem));
+    });
+  });
+  return result;
+}
+
+/** 将前端的 menu，转换成后端接收的 menu */
+// TODO: @芋艿，需要根据后台API删除不需要的字段
+function menuToBackend(menu: any) {
+  const result = {
+    ...menu,
+    children: undefined, // 不处理子节点
+    reply: undefined, // 稍后复制
+  };
+  result.replyMessageType = menu.reply.type;
+  result.replyContent = menu.reply.content;
+  result.replyMediaId = menu.reply.mediaId;
+  result.replyMediaUrl = menu.reply.url;
+  result.replyTitle = menu.reply.title;
+  result.replyDescription = menu.reply.description;
+  result.replyThumbMediaId = menu.reply.thumbMediaId;
+  result.replyThumbMediaUrl = menu.reply.thumbMediaUrl;
+  result.replyArticles = menu.reply.articles;
+  result.replyMusicUrl = menu.reply.musicUrl;
+  result.replyHqMusicUrl = menu.reply.hqMusicUrl;
+
+  return result;
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
+    </template>
+
+    <!-- 搜索工作栏 -->
+    <!-- <ContentWrap> -->
+    <ElForm :inline="true" label-width="68px" class="-mb-15px w-240px">
+      <ElFormItem label="公众号" prop="accountId" class="w-240px">
+        <WxAccountSelect @change="onAccountChanged" />
+      </ElFormItem>
+    </ElForm>
+    <!-- </ContentWrap> -->
+
+    <ContentWrap>
+      <div class="clearfix public-account-management" v-loading="loading">
+        <!--左边配置菜单-->
+        <div class="left">
+          <div class="weixin-hd">
+            <div class="weixin-title">{{ accountName }}</div>
+          </div>
+          <div class="clearfix weixin-menu">
+            <MenuPreviewer
+              v-model="menuList"
+              :account-id="accountId"
+              :active-index="activeIndex"
+              :parent-index="parentIndex"
+              @menu-clicked="(parent, x) => menuClicked(parent, x)"
+              @submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
+            />
+          </div>
+          <div class="save-div">
+            <ElButton
+              class="save-btn"
+              type="success"
+              @click="onSave"
+              v-access:code="['mp:menu:save']"
+            >
+              保存并发布菜单
+            </ElButton>
+            <ElButton
+              class="save-btn"
+              type="danger"
+              @click="onClear"
+              v-access:code="['mp:menu:delete']"
+            >
+              清空菜单
+            </ElButton>
+          </div>
+        </div>
+        <!--右边配置-->
+        <div class="right" v-if="showRightPanel">
+          <MenuEditor
+            :account-id="accountId"
+            :is-parent="isParent"
+            v-model="activeMenu"
+            @delete="onDeleteMenu"
+          />
+        </div>
+        <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
+        <div v-else class="right">
+          <p>请选择菜单配置</p>
+        </div>
+      </div>
+    </ContentWrap>
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+/* 公共颜色变量 */
+.clearfix {
+  *zoom: 1;
+}
+
+.clearfix::after {
+  clear: both;
+  display: table;
+  content: '';
+}
+
+div {
+  text-align: left;
+}
+
+.weixin-hd {
+  position: relative;
+  bottom: 426px;
+  left: 0;
+  width: 300px;
+  height: 64px;
+  color: #fff;
+  text-align: center;
+  background: transparent url('./assets/menu_head.png') no-repeat 0 0;
+  background-position: 0 0;
+  background-size: 100%;
+}
+
+.weixin-title {
+  position: absolute;
+  top: 33px;
+  left: 0;
+  width: 100%;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+}
+
+.weixin-menu {
+  padding-left: 43px;
+  font-size: 12px;
+  background: transparent url('./assets/menu_foot.png') no-repeat 0 0;
+}
+
+.public-account-management {
+  width: 1200px;
+  // min-width: 1200px;
+  margin: 0 auto;
+
+  .left {
+    position: relative;
+    float: left;
+    box-sizing: border-box;
+    display: block;
+    width: 350px;
+    height: 715px;
+    padding: 518px 25px 88px;
+    background: url('./assets/iphone_backImg.png') no-repeat;
+    background-size: 100% auto;
+
+    .save-div {
+      margin-top: 15px;
+      text-align: center;
+
+      .save-btn {
+        bottom: 20px;
+        left: 100px;
+      }
+    }
+  }
+
+  /* 右边菜单内容 */
+  .right {
+    float: left;
+    box-sizing: border-box;
+    width: 63%;
+    padding: 20px;
+    margin-left: 20px;
+    background-color: #e8e7e7;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue b/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
new file mode 100644
index 000000000..00193bcf2
--- /dev/null
+++ b/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
@@ -0,0 +1,280 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElCol,
+  ElDialog,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElRow,
+  ElSelect,
+} from 'element-plus';
+
+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 menuOptions from './menuOptions';
+
+const props = defineProps<{
+  accountId: number;
+  isParent: boolean;
+  modelValue: any;
+}>();
+
+const emit = defineEmits<{
+  (e: 'delete', v: void): void;
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const menu = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+const showNewsDialog = ref(false);
+const hackResetWxReplySelect = ref(false);
+const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
+
+watch(menu, () => {
+  hackResetWxReplySelect.value = false; // 销毁组件
+  nextTick(() => {
+    hackResetWxReplySelect.value = true; // 重建组件
+  });
+});
+
+// ======================== 菜单编辑（素材选择） ========================
+/** 选择素材 */
+function selectMaterial(item: any) {
+  const articleId = item.articleId;
+  const articles = item.content.newsItem;
+  // 提示，针对多图文
+  if (articles.length > 1) {
+    ElMessage.warning('您选择的是多图文，将默认跳转第一篇');
+  }
+  showNewsDialog.value = false;
+
+  // 设置菜单的回复
+  menu.value.articleId = articleId;
+  menu.value.replyArticles = [];
+  articles.forEach((article: any) => {
+    menu.value.replyArticles.push({
+      title: article.title,
+      description: article.digest,
+      picUrl: article.picUrl,
+      url: article.url,
+    });
+  });
+}
+
+/** 删除素材 */
+function deleteMaterial() {
+  delete menu.value.articleId;
+  delete menu.value.replyArticles;
+}
+</script>
+
+<template>
+  <div>
+    <div class="configure-page">
+      <div class="delete-btn">
+        <ElButton type="danger" @click="emit('delete')">
+          <IconifyIcon icon="ep:delete" />
+          删除当前菜单
+        </ElButton>
+      </div>
+      <div>
+        <span>菜单名称：</span>
+        <ElInput
+          class="input-width"
+          v-model="menu.name"
+          placeholder="请输入菜单名称"
+          :maxlength="isParent ? 4 : 7"
+          clearable
+        />
+      </div>
+      <div v-if="isLeave">
+        <div class="menu-content">
+          <span>菜单标识：</span>
+          <ElInput
+            class="input-width"
+            v-model="menu.menuKey"
+            placeholder="请输入菜单 KEY"
+            clearable
+          />
+        </div>
+        <div class="menu-content">
+          <span>菜单内容：</span>
+          <ElSelect
+            v-model="menu.type"
+            clearable
+            placeholder="请选择"
+            class="menu_option"
+          >
+            <ElOption
+              v-for="item in menuOptions"
+              :label="item.label"
+              :value="item.value"
+              :key="item.value"
+            />
+          </ElSelect>
+        </div>
+        <div class="configur-content" v-if="menu.type === 'view'">
+          <span>跳转链接：</span>
+          <ElInput
+            class="input-width"
+            v-model="menu.url"
+            placeholder="请输入链接"
+            clearable
+          />
+        </div>
+        <div class="configur-content" v-if="menu.type === 'miniprogram'">
+          <div class="applet">
+            <span>小程序的 appid ：</span>
+            <ElInput
+              class="input-width"
+              v-model="menu.miniProgramAppId"
+              placeholder="请输入小程序的appid"
+              clearable
+            />
+          </div>
+          <div class="applet">
+            <span>小程序的页面路径：</span>
+            <ElInput
+              class="input-width"
+              v-model="menu.miniProgramPagePath"
+              placeholder="请输入小程序的页面路径，如：pages/index"
+              clearable
+            />
+          </div>
+          <div class="applet">
+            <span>小程序的备用网页：</span>
+            <ElInput
+              class="input-width"
+              v-model="menu.url"
+              placeholder="不支持小程序的老版本客户端将打开本网页"
+              clearable
+            />
+          </div>
+          <p class="blue">
+            tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
+          </p>
+        </div>
+        <div
+          class="configur-content"
+          v-if="menu.type === 'article_view_limited'"
+        >
+          <ElRow>
+            <div class="select-item" v-if="menu && menu.replyArticles">
+              <WxNews :articles="menu.replyArticles" />
+              <ElRow class="ope-row" justify="center" align="middle">
+                <ElButton type="danger" circle @click="deleteMaterial">
+                  <IconifyIcon icon="ep:delete" />
+                </ElButton>
+              </ElRow>
+            </div>
+            <div v-else>
+              <ElRow justify="center">
+                <ElCol :span="24" style="text-align: center">
+                  <ElButton type="success" @click="showNewsDialog = true">
+                    素材库选择
+                    <IconifyIcon icon="ep:circle-check" />
+                  </ElButton>
+                </ElCol>
+              </ElRow>
+            </div>
+            <ElDialog
+              title="选择图文"
+              v-model="showNewsDialog"
+              width="80%"
+              destroy-on-close
+            >
+              <WxMaterialSelect
+                type="news"
+                :account-id="props.accountId"
+                @select-material="selectMaterial"
+              />
+            </ElDialog>
+          </ElRow>
+        </div>
+        <div
+          class="configur-content"
+          v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
+        >
+          <WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-input {
+  width: 70%;
+  margin-right: 2%;
+}
+
+.configure-page {
+  .delete-btn {
+    margin-bottom: 15px;
+    text-align: right;
+  }
+
+  .menu-content {
+    margin-top: 20px;
+  }
+
+  .configur-content {
+    padding: 20px 10px;
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+
+    .select-item {
+      width: 280px;
+      padding: 10px;
+      margin: 0 auto 10px;
+      border: 1px solid #eaeaea;
+
+      .ope-row {
+        padding-top: 10px;
+        text-align: center;
+      }
+    }
+  }
+
+  .blue {
+    margin-top: 10px;
+    color: #29b6f6;
+  }
+
+  .applet {
+    margin-bottom: 20px;
+
+    span {
+      width: 20%;
+    }
+  }
+
+  .input-width {
+    width: 40%;
+  }
+
+  .material {
+    .input-width {
+      width: 30%;
+    }
+
+    .el-textarea {
+      width: 80%;
+    }
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue b/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue
new file mode 100644
index 000000000..ab1a37978
--- /dev/null
+++ b/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue
@@ -0,0 +1,252 @@
+<script lang="ts" setup>
+import type { Menu } from './types';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import draggable from 'vuedraggable';
+
+const props = defineProps<{
+  accountId: number;
+  activeIndex: string;
+  modelValue: Menu[];
+  parentIndex: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Menu[]): void;
+  (e: 'menuClicked', parent: Menu, x: number): void;
+  (e: 'submenuClicked', child: Menu, x: number, y: number): void;
+}>();
+
+const menuList = computed<Menu[]>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+/** 添加横向一级菜单 */
+function addMenu() {
+  const index = menuList.value.length;
+  const menu = {
+    name: '菜单名称',
+    children: [],
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
+    },
+  };
+  menuList.value[index] = menu;
+  menuClicked(menu, index - 1);
+}
+
+/** 添加横向二级菜单；parent 表示要操作的父菜单 */
+function addSubMenu(i: number, parent: any) {
+  const subMenuKeyLength = parent.children.length; // 获取二级菜单key长度
+  const addButton = {
+    name: '子菜单名称',
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
+    },
+  };
+  parent.children[subMenuKeyLength] = addButton;
+  subMenuClicked(parent.children[subMenuKeyLength], i, subMenuKeyLength);
+}
+
+/** 一级菜单点击 */
+function menuClicked(parent: Menu, x: number) {
+  emit('menuClicked', parent, x);
+}
+
+/** 二级菜单点击 */
+function subMenuClicked(child: Menu, x: number, y: number) {
+  emit('submenuClicked', child, x, y);
+}
+
+/**
+ * 处理一级菜单展开后被拖动，激活(展开)原来活动的一级菜单
+ *
+ * @param options - 拖动参数对象
+ * @param options.oldIndex - 一级菜单拖动前的位置
+ * @param options.newIndex - 一级菜单拖动后的位置
+ */
+function onParentDragEnd({
+  oldIndex,
+  newIndex,
+}: {
+  newIndex: number;
+  oldIndex: number;
+}) {
+  // 二级菜单没有展开，直接返回
+  if (props.activeIndex === '__MENU_NOT_SELECTED__') {
+    return;
+  }
+
+  // 使用一个辅助数组来模拟菜单移动，然后找到展开的二级菜单的新下标`newParent`
+  const positions = Array.from({ length: menuList.value.length }).fill(false);
+  positions[props.parentIndex] = true;
+  const [out] = positions.splice(oldIndex, 1); // 移出菜单，保存到变量out
+  positions.splice(newIndex, 0, out ?? false); // 把out变量插入被移出的菜单
+  const newParentIndex = positions.indexOf(true);
+
+  // 找到菜单元素，触发一级菜单点击
+  const parent = menuList.value[newParentIndex];
+  if (parent && newParentIndex !== -1) {
+    emit('menuClicked', parent, newParentIndex);
+  }
+}
+
+/**
+ * 处理二级菜单展开后被拖动，激活被拖动的菜单
+ *
+ * @param options - 拖动参数对象
+ * @param options.newIndex - 二级菜单拖动后的位置
+ */
+function onChildDragEnd({ newIndex }: { newIndex: number }) {
+  const x = props.parentIndex;
+  const y = newIndex;
+  const children = menuList.value[x]?.children;
+  if (children && children?.length > 0) {
+    const child = children[y];
+    if (child) {
+      emit('submenuClicked', child, x, y);
+    }
+  }
+}
+</script>
+
+<template>
+  <draggable
+    v-model="menuList"
+    item-key="id"
+    ghost-class="draggable-ghost"
+    :animation="400"
+    @end="onParentDragEnd"
+  >
+    <template #item="{ element: parent, index: x }">
+      <div class="menu-bottom">
+        <!-- 一级菜单 -->
+        <div
+          @click="menuClicked(parent, x)"
+          class="menu-item"
+          :class="{ active: props.activeIndex === `${x}` }"
+        >
+          <IconifyIcon icon="ep:fold" color="black" />{{ parent.name }}
+        </div>
+        <!-- 以下为二级菜单-->
+        <div class="submenu" v-if="props.parentIndex === x && parent.children">
+          <draggable
+            v-model="parent.children"
+            item-key="id"
+            ghost-class="draggable-ghost"
+            :animation="400"
+            @end="onChildDragEnd"
+          >
+            <template #item="{ element: child, index: y }">
+              <div class="menu-bottom subtitle">
+                <div
+                  class="menu-sub-item"
+                  v-if="parent.children"
+                  :class="{ active: props.activeIndex === `${x}-${y}` }"
+                  @click="subMenuClicked(child, x, y)"
+                >
+                  {{ child.name }}
+                </div>
+              </div>
+            </template>
+          </draggable>
+          <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
+          <div
+            class="menu-bottom menu-addicon"
+            v-if="!parent.children || parent.children.length < 5"
+            @click="addSubMenu(x, parent)"
+          >
+            <IconifyIcon icon="ep:plus" class="plus" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </draggable>
+
+  <!-- 一级菜单加号 -->
+  <div
+    class="menu-bottom menu-addicon"
+    v-if="menuList.length < 3"
+    @click="addMenu"
+  >
+    <IconifyIcon icon="ep:plus" class="plus" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.menu-bottom {
+  position: relative;
+  float: left;
+  box-sizing: border-box;
+  display: block;
+  width: 85.5px;
+  text-align: center;
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #ebedee;
+
+  &.menu-addicon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 46px;
+    line-height: 46px;
+
+    .plus {
+      color: #2bb673;
+    }
+  }
+
+  .menu-item {
+    // text-align: center;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+
+    &.active {
+      border: 1px solid #2bb673;
+    }
+  }
+
+  .menu-sub-item {
+    box-sizing: border-box;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+
+    &.active {
+      border: 1px solid #2bb673;
+    }
+  }
+}
+
+/* 第二级菜单 */
+.submenu {
+  position: absolute;
+  bottom: 45px;
+  width: 85.5px;
+
+  .subtitle {
+    box-sizing: border-box;
+    background-color: #fff;
+  }
+}
+
+.draggable-ghost {
+  background: #f7fafc;
+  border: 1px solid #4299e1;
+  opacity: 0.5;
+}
+</style>
diff --git a/apps/web-ele/src/views/mp/menu/modules/menuOptions.ts b/apps/web-ele/src/views/mp/menu/modules/menuOptions.ts
new file mode 100644
index 000000000..9ba818fc4
--- /dev/null
+++ b/apps/web-ele/src/views/mp/menu/modules/menuOptions.ts
@@ -0,0 +1,42 @@
+export default [
+  {
+    value: 'view',
+    label: '跳转网页',
+  },
+  {
+    value: 'miniprogram',
+    label: '跳转小程序',
+  },
+  {
+    value: 'click',
+    label: '点击回复',
+  },
+  {
+    value: 'article_view_limited',
+    label: '跳转图文消息',
+  },
+  {
+    value: 'scancode_push',
+    label: '扫码直接返回结果',
+  },
+  {
+    value: 'scancode_waitmsg',
+    label: '扫码回复',
+  },
+  {
+    value: 'pic_sysphoto',
+    label: '系统拍照发图',
+  },
+  {
+    value: 'pic_photo_or_album',
+    label: '拍照或者相册',
+  },
+  {
+    value: 'pic_weixin',
+    label: '微信相册',
+  },
+  {
+    value: 'location_select',
+    label: '选择地理位置',
+  },
+];
diff --git a/apps/web-ele/src/views/mp/menu/modules/types.ts b/apps/web-ele/src/views/mp/menu/modules/types.ts
new file mode 100644
index 000000000..928534ea9
--- /dev/null
+++ b/apps/web-ele/src/views/mp/menu/modules/types.ts
@@ -0,0 +1,73 @@
+export interface Replay {
+  title: string;
+  description: string;
+  picUrl: string;
+  url: string;
+}
+
+export type MenuType =
+  | ''
+  | 'article_view_limited'
+  | 'click'
+  | 'location_select'
+  | 'pic_photo_or_album'
+  | 'pic_sysphoto'
+  | 'pic_weixin'
+  | 'scancode_push'
+  | 'scancode_waitmsg'
+  | 'view';
+
+interface _RawMenu {
+  // db
+  id: number;
+  parentId: number;
+  accountId: number;
+  appId: string;
+  createTime: number;
+
+  // mp-native
+  name: string;
+  menuKey: string;
+  type: MenuType;
+  url: string;
+  miniProgramAppId: string;
+  miniProgramPagePath: string;
+  articleId: string;
+  replyMessageType: string;
+  replyContent: string;
+  replyMediaId: string;
+  replyMediaUrl: string;
+  replyThumbMediaId: string;
+  replyThumbMediaUrl: string;
+  replyTitle: string;
+  replyDescription: string;
+  replyArticles: Replay;
+  replyMusicUrl: string;
+  replyHqMusicUrl: string;
+}
+
+export type RawMenu = Partial<_RawMenu>;
+
+interface _Reply {
+  type: string;
+  accountId: number;
+  content: string;
+  mediaId: string;
+  url: string;
+  thumbMediaId: string;
+  thumbMediaUrl: string;
+  title: string;
+  description: string;
+  articles: null | Replay[];
+  musicUrl: string;
+  hqMusicUrl: string;
+}
+
+export type Reply = Partial<_Reply>;
+
+interface _Menu extends RawMenu {
+  children: _Menu[];
+  reply: Reply;
+}
+
+export type Menu = Partial<_Menu>;
diff --git a/apps/web-ele/src/views/mp/modules/wx-account-select/index.ts b/apps/web-ele/src/views/mp/modules/wx-account-select/index.ts
new file mode 100644
index 000000000..374d993fe
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-account-select/index.ts
@@ -0,0 +1 @@
+export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-account-select/main.vue b/apps/web-ele/src/views/mp/modules/wx-account-select/main.vue
new file mode 100644
index 000000000..c76b8c5d5
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-account-select/main.vue
@@ -0,0 +1,142 @@
+<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 { ElMessage } from 'element-plus';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+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 message = ElMessage; // 消息弹窗
+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;
+    }
+  }
+}
+
+/** 公众号变化 */
+function onChanged(id?: number) {
+  if (id) {
+    currentId.value = id;
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  handleQuery();
+});
+</script>
+
+<template>
+  <el-select
+    v-model="currentId"
+    placeholder="请选择公众号"
+    class="!w-240px"
+    @change="onChanged"
+  >
+    <el-option
+      v-for="item in accountList"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+<style lang="scss" scoped>
+:deep(.el-select__wrapper) {
+  width: 240px !important;
+}
+</style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-location/index.ts b/apps/web-ele/src/views/mp/modules/wx-location/index.ts
new file mode 100644
index 000000000..374d993fe
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-location/index.ts
@@ -0,0 +1 @@
+export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-location/main.vue b/apps/web-ele/src/views/mp/modules/wx-location/main.vue
new file mode 100644
index 000000000..784b45553
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-location/main.vue
@@ -0,0 +1,61 @@
+<!--
+  【微信消息 - 定位】TODO @Dhb52 目前未启用
+-->
+<script lang="ts" setup>
+defineOptions({ name: 'WxLocation' });
+
+const props = defineProps({
+  locationX: {
+    required: true,
+    type: Number,
+  },
+  locationY: {
+    required: true,
+    type: Number,
+  },
+  label: {
+    // 地名
+    required: true,
+    type: String,
+  },
+  qqMapKey: {
+    // 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>
+    <el-link
+      type="primary"
+      target="_blank"
+      :href="`https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${
+        locationY
+      }&pointy=${locationX}&name=${label}&ref=yudao`"
+    >
+      <el-col>
+        <el-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`"
+          />
+        </el-row>
+        <el-row>
+          <Icon icon="ep:location" />
+          {{ label }}
+        </el-row>
+      </el-col>
+    </el-link>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mp/modules/wx-material-select/index.ts b/apps/web-ele/src/views/mp/modules/wx-material-select/index.ts
new file mode 100644
index 000000000..f4fcea0ba
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-material-select/index.ts
@@ -0,0 +1,3 @@
+export { default } from './main.vue';
+
+export { MaterialType, NewsType } from './types';
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
new file mode 100644
index 000000000..727132162
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-material-select/main.vue
@@ -0,0 +1,300 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  芋道源码：
+  ① 移除 avue 组件，使用 ElementUI 原生组件
+-->
+<script lang="ts" setup>
+import { onMounted, reactive, ref } from 'vue';
+
+import { formatTime } from '@vben/utils';
+
+import * as MpDraftApi from '#/api/mp/draft';
+import * as MpFreePublishApi from '#/api/mp/freePublish';
+import * as MpMaterialApi 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 MpMaterialApi.getMaterialPage({
+    ...queryParams,
+    type: props.type,
+  });
+  list.value = data.list;
+  total.value = data.total;
+}
+
+/** 获取已发布图文分页 */
+async function getFreePublishPageFun() {
+  const data = await MpFreePublishApi.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 MpDraftApi.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;
+}
+
+onMounted(async () => {
+  getPage();
+});
+</script>
+
+<template>
+  <div class="pb-30px">
+    <!-- 类型：image -->
+    <div v-if="props.type === 'image'">
+      <div class="waterfall" v-loading="loading">
+        <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>
+          <el-row class="ope-row">
+            <el-button type="success" @click="selectMaterialFun(item)">
+              选择
+              <Icon icon="ep:circle-check" />
+            </el-button>
+          </el-row>
+        </div>
+      </div>
+      <!-- 分页组件 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getMaterialPageFun"
+      />
+    </div>
+    <!-- 类型：voice -->
+    <div v-else-if="props.type === 'voice'">
+      <!-- 列表 -->
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="编号" align="center" prop="mediaId" />
+        <el-table-column label="文件名" align="center" prop="name" />
+        <el-table-column label="语音" align="center">
+          <template #default="scope">
+            <WxVoicePlayer :url="scope.row.url" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="上传时间"
+          align="center"
+          prop="createTime"
+          width="180"
+          :formatter="
+            (row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
+          "
+        />
+        <el-table-column label="操作" align="center" fixed="right">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              link
+              @click="selectMaterialFun(scope.row)"
+            >
+              选择
+              <Icon icon="ep:plus" />
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页组件 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getPage"
+      />
+    </div>
+    <!-- 类型：video -->
+    <div v-else-if="props.type === 'video'">
+      <!-- 列表 -->
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="编号" align="center" prop="mediaId" />
+        <el-table-column label="文件名" align="center" prop="name" />
+        <el-table-column label="标题" align="center" prop="title" />
+        <el-table-column label="介绍" align="center" prop="introduction" />
+        <el-table-column label="视频" align="center">
+          <template #default="scope">
+            <WxVideoPlayer :url="scope.row.url" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="上传时间"
+          align="center"
+          prop="createTime"
+          width="180"
+          :formatter="
+            (row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
+          "
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+          fixed="right"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button
+              type="primary"
+              link
+              @click="selectMaterialFun(scope.row)"
+            >
+              选择
+              <Icon icon="akar-icons:circle-plus" />
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页组件 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getMaterialPageFun"
+      />
+    </div>
+    <!-- 类型：news -->
+    <div v-else-if="props.type === 'news'">
+      <div class="waterfall" v-loading="loading">
+        <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" />
+            <el-row class="ope-row">
+              <el-button type="success" @click="selectMaterialFun(item)">
+                选择
+                <Icon icon="ep:circle-check" />
+              </el-button>
+            </el-row>
+          </div>
+        </div>
+      </div>
+      <!-- 分页组件 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getMaterialPageFun"
+      />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+@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-ele/src/views/mp/modules/wx-material-select/types.ts b/apps/web-ele/src/views/mp/modules/wx-material-select/types.ts
new file mode 100644
index 000000000..3d44c5db7
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-material-select/types.ts
@@ -0,0 +1,11 @@
+export enum NewsType {
+  Draft = '2',
+  Published = '1',
+}
+
+export enum MaterialType {
+  Image = 'image',
+  News = 'news',
+  Video = 'video',
+  Voice = 'voice',
+}
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
new file mode 100644
index 000000000..58fde79fd
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-msg/card.scss
@@ -0,0 +1,116 @@
+.avue-card {
+  &__item {
+    box-sizing: border-box;
+    height: 200px;
+    margin-bottom: 16px;
+    font-size: 14px;
+    font-feature-settings: 'tnum';
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    color: rgb(0 0 0 / 65%);
+    cursor: pointer;
+    list-style: none;
+    background-color: #fff;
+    border: 1px solid #e8e8e8;
+
+    &:hover {
+      border-color: rgb(0 0 0 / 9%);
+      box-shadow: 0 2px 8px rgb(0 0 0 / 9%);
+    }
+
+    &--add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      font-size: 16px;
+      color: rgb(0 0 0 / 45%);
+      background-color: #fff;
+      border: 1px dashed #000;
+      border-color: #d9d9d9;
+      border-radius: 2px;
+
+      i {
+        margin-right: 10px;
+      }
+
+      &:hover {
+        color: #40a9ff;
+        background-color: #fff;
+        border-color: #40a9ff;
+      }
+    }
+  }
+
+  &__body {
+    display: flex;
+    padding: 24px;
+  }
+
+  &__detail {
+    flex: 1;
+  }
+
+  &__avatar {
+    width: 48px;
+    height: 48px;
+    margin-right: 12px;
+    overflow: hidden;
+    border-radius: 48px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__title {
+    margin-bottom: 12px;
+    font-size: 16px;
+    color: rgb(0 0 0 / 85%);
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  &__info {
+    display: -webkit-box;
+    height: 64px;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    color: rgb(0 0 0 / 45%);
+    -webkit-box-orient: vertical;
+  }
+
+  &__menu {
+    display: flex;
+    justify-content: space-around;
+    height: 50px;
+    line-height: 50px;
+    color: rgb(0 0 0 / 45%);
+    text-align: center;
+    background: #f7f9fa;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+}
+
+/** joolun 额外加的 */
+.avue-comment__main {
+  flex: unset !important;
+  margin: 0 8px !important;
+  border-radius: 5px !important;
+}
+
+.avue-comment__header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.avue-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
new file mode 100644
index 000000000..219e2e5d4
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-msg/comment.scss
@@ -0,0 +1,109 @@
+/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
+.avue-comment {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+
+  &--reverse {
+    flex-direction: row-reverse;
+
+    .avue-comment__main {
+      &::before,
+      &::after {
+        right: -8px;
+        left: auto;
+        border-width: 8px 0 8px 8px;
+      }
+
+      &::before {
+        border-left-color: #dedede;
+      }
+
+      &::after {
+        margin-right: 1px;
+        margin-left: auto;
+        border-left-color: #f8f8f8;
+      }
+    }
+  }
+
+  &__avatar {
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    vertical-align: middle;
+    border: 1px solid transparent;
+    border-radius: 50%;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 15px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #eee;
+  }
+
+  &__author {
+    font-size: 14px;
+    font-weight: 700;
+    color: #999;
+  }
+
+  &__main {
+    position: relative;
+    flex: 1;
+    margin: 0 20px;
+    border: 1px solid #dedede;
+    border-radius: 2px;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 10px;
+      right: 100%;
+      left: -8px;
+      display: block;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+      content: ' ';
+      border-color: transparent;
+      border-style: solid solid outset;
+      border-width: 8px 8px 8px 0;
+    }
+
+    &::before {
+      z-index: 1;
+      border-right-color: #dedede;
+    }
+
+    &::after {
+      z-index: 2;
+      margin-left: 1px;
+      border-right-color: #f8f8f8;
+    }
+  }
+
+  &__body {
+    padding: 15px;
+    overflow: hidden;
+    font-family:
+      'Segoe UI', 'Lucida Grande', Helvetica, Arial, 'Microsoft YaHei',
+      FreeSans, Arimo, 'Droid Sans', 'wenquanyi micro hei', 'Hiragino Sans GB',
+      'Hiragino Sans GB W3', FontAwesome, sans-serif;
+    font-size: 14px;
+    color: #333;
+    background: #fff;
+  }
+
+  blockquote {
+    padding: 1px 0 1px 15px;
+    margin: 0;
+    font-family:
+      Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai,
+      FontAwesome, serif;
+    border-left: 4px solid #ddd;
+  }
+}
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/index.ts b/apps/web-ele/src/views/mp/modules/wx-msg/index.ts
new file mode 100644
index 000000000..048afc95f
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-msg/index.ts
@@ -0,0 +1,3 @@
+export { default } from './main.vue';
+
+export { MsgType } from './types';
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/main.vue b/apps/web-ele/src/views/mp/modules/wx-msg/main.vue
new file mode 100644
index 000000000..5d9ad4039
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-msg/main.vue
@@ -0,0 +1,202 @@
+<!--
+  - 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 { ElMessage } from 'element-plus';
+
+import { getMessagePage, sendMessage } from '#/api/mp/message';
+import { getUser } from '#/api/mp/user';
+import profile from '#/assets/imgs/profile.jpg';
+import WxReplySelect, { ReplyType } from '#/views/mp/modules/wx-reply';
+
+import MsgList from './modules/msg-list.vue';
+
+defineOptions({ name: 'WxMsg' });
+
+const props = defineProps({
+  userId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const message = ElMessage; // 消息弹窗
+const accountId = ref(-1); // 公众号ID，需要通过userId初始化
+const loading = ref(false); // 消息列表是否正在加载中
+const hasMore = ref(true); // 是否可以加载更多
+const list = ref<any[]>([]); // 消息列表
+const queryParams = reactive({
+  pageNo: 1, // 当前页数
+  pageSize: 14, // 每页显示多少条
+  accountId,
+});
+
+// 由于微信不再提供昵称，直接使用"用户"展示
+const user: User = reactive({
+  nickname: '用户',
+  avatar: profile,
+  accountId, // 公众号账号编号
+});
+
+// ========= 消息发送 =========
+const sendLoading = ref(false); // 发送消息是否加载中
+// 微信发送消息
+const reply = ref<Reply>({
+  type: ReplyType.Text,
+  accountId: -1,
+  articles: [],
+});
+
+const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null); // WxReplySelect组件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;
+  accountId.value = data.accountId;
+  reply.value.accountId = data.accountId;
+
+  refreshChange();
+});
+
+/** 执行发送 */
+async function sendMsg() {
+  if (!unref(reply)) {
+    return;
+  }
+  // 公众号限制：客服消息，公众号只允许发送一条
+  if (
+    reply.value.type === ReplyType.News &&
+    reply.value.articles &&
+    reply.value.articles.length > 1
+  ) {
+    reply.value.articles = [reply.value.articles[0]];
+    message.success('图文消息条数限制在 1 条以内，已默认发送第一条');
+  }
+
+  // 注意：sendMessage API 需要 openid，但这里传入的是 userId
+  // 这可能是后端 API 的特殊处理，使用类型断言绕过类型检查
+  const data = await sendMessage({
+    userId: props.userId,
+    ...reply.value,
+  } as any);
+  sendLoading.value = false;
+
+  list.value = [...list.value, data];
+  await scrollToBottom();
+
+  // 发送后清空数据
+  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(
+      {
+        pageNo: page.pageNo,
+        pageSize: page.pageSize,
+        userId: props.userId,
+        accountId: page.accountId,
+      },
+      params,
+    ),
+  );
+
+  const scrollHeight = msgDivRef.value?.scrollHeight ?? 0;
+  // 处理数据
+  const data = dataTemp.list.reverse();
+  list.value = [...data, ...list.value];
+  loading.value = false;
+  if (data.length < queryParams.pageSize || data.length === 0) {
+    hasMore.value = false;
+  }
+  queryParams.pageNo = page.pageNo;
+  queryParams.pageSize = page.pageSize;
+  // 滚动到原来的位置
+  if (queryParams.pageNo === 1) {
+    // 定位到消息底部
+    await scrollToBottom();
+  } else if (data.length > 0) {
+    // 定位滚动条
+    await nextTick();
+    if (scrollHeight !== 0 && msgDivRef.value) {
+      msgDivRef.value.scrollTop =
+        msgDivRef.value.scrollHeight - scrollHeight - 100;
+    }
+  }
+}
+
+/** 刷新消息 */
+function refreshChange() {
+  getPage(queryParams);
+}
+
+/** 定位到消息底部 */
+async function scrollToBottom() {
+  await nextTick();
+  if (msgDivRef.value) {
+    msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight;
+  }
+}
+</script>
+
+<template>
+  <ContentWrap>
+    <div
+      class="ml-[10px] mr-[10px] h-[50vh] overflow-auto bg-[#eaeaea]"
+      ref="msgDivRef"
+    >
+      <!-- 加载更多 -->
+      <div v-loading="loading"></div>
+      <div v-if="!loading">
+        <div
+          class="cursor-pointer py-5 text-center"
+          v-if="hasMore"
+          @click="loadMore"
+        >
+          <span class="text-[#999]">点击加载更多</span>
+        </div>
+        <div class="py-5 text-center" v-if="!hasMore">
+          <span class="text-[#999]">没有更多了</span>
+        </div>
+      </div>
+
+      <!-- 消息列表 -->
+      <MsgList :list="list" :account-id="accountId" :user="user" />
+    </div>
+
+    <div class="p-[10px]" v-loading="sendLoading">
+      <WxReplySelect ref="replySelectRef" v-model="reply" />
+      <el-button type="success" class="float-right mb-2 mt-2" @click="sendMsg">
+        发送(S)
+      </el-button>
+    </div>
+  </ContentWrap>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-event.vue b/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-event.vue
new file mode 100644
index 000000000..70c193082
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-event.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps<{
+  item: any;
+}>();
+
+const item = ref(props.item);
+</script>
+
+<template>
+  <div>
+    <div v-if="item.event === 'subscribe'">
+      <el-tag type="success">关注</el-tag>
+    </div>
+    <div v-else-if="item.event === 'unsubscribe'">
+      <el-tag type="danger">取消关注</el-tag>
+    </div>
+    <div v-else-if="item.event === 'CLICK'">
+      <el-tag>点击菜单</el-tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'VIEW'">
+      <el-tag>点击菜单链接</el-tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'scancode_waitmsg'">
+      <el-tag>扫码结果</el-tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'scancode_push'">
+      <el-tag>扫码结果</el-tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'pic_sysphoto'">
+      <el-tag>系统拍照发图</el-tag>
+    </div>
+    <div v-else-if="item.event === 'pic_photo_or_album'">
+      <el-tag>拍照或者相册</el-tag>
+    </div>
+    <div v-else-if="item.event === 'pic_weixin'">
+      <el-tag>微信相册</el-tag>
+    </div>
+    <div v-else-if="item.event === 'location_select'">
+      <el-tag>选择地理位置</el-tag>
+    </div>
+    <div v-else-if="item.event === 'SCAN'">
+      <el-tag>扫码</el-tag>
+    </div>
+    <div v-else>
+      <el-tag type="danger">未知事件类型</el-tag>
+    </div>
+  </div>
+</template>
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
new file mode 100644
index 000000000..e1f86a43e
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-list.vue
@@ -0,0 +1,77 @@
+<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;
+}>();
+
+// 使用常量对象替代枚举，避免 linter 误报
+const SendFrom = {
+  MpBot: 2,
+  User: 1,
+} as const;
+
+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  */
+@import url('../comment.scss');
+@import url('../card.scss');
+</style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg.vue b/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg.vue
new file mode 100644
index 000000000..27c5318e8
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+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 { MsgType } from '../types';
+import MsgEvent from './msg-event.vue';
+
+defineOptions({ name: 'Msg' });
+
+const props = defineProps<{
+  item: any;
+}>();
+
+const item = ref<any>(props.item);
+</script>
+
+<template>
+  <div>
+    <MsgEvent v-if="item.type === MsgType.Event" :item="item" />
+
+    <div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
+
+    <div v-else-if="item.type === MsgType.Voice">
+      <WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Image">
+      <a target="_blank" :href="item.mediaUrl">
+        <img :src="item.mediaUrl" class="w-[100px]" />
+      </a>
+    </div>
+
+    <div
+      v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
+      class="text-center"
+    >
+      <WxVideoPlayer :url="item.mediaUrl" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Link" class="flex-1">
+      <el-link
+        type="success"
+        :underline="false"
+        target="_blank"
+        :href="item.url"
+      >
+        <div
+          class="mb-3 text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]"
+        >
+          <i class="el-icon-link"></i>{{ item.title }}
+        </div>
+      </el-link>
+      <div
+        class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
+        style="height: unset"
+      >
+        {{ item.description }}
+      </div>
+    </div>
+
+    <div v-else-if="item.type === MsgType.Location">
+      <WxLocation
+        :label="item.label"
+        :location-y="item.locationY"
+        :location-x="item.locationX"
+      />
+    </div>
+
+    <div v-else-if="item.type === MsgType.News" class="w-[300px]">
+      <WxNews :articles="item.articles" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Music">
+      <WxMusic
+        :title="item.title"
+        :description="item.description"
+        :thumb-media-url="item.thumbMediaUrl"
+        :music-url="item.musicUrl"
+        :hq-music-url="item.hqMusicUrl"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/types.ts b/apps/web-ele/src/views/mp/modules/wx-msg/types.ts
new file mode 100644
index 000000000..e988954ad
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-msg/types.ts
@@ -0,0 +1,17 @@
+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-ele/src/views/mp/modules/wx-music/index.ts b/apps/web-ele/src/views/mp/modules/wx-music/index.ts
new file mode 100644
index 000000000..374d993fe
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-music/index.ts
@@ -0,0 +1 @@
+export { default } from './main.vue';
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
new file mode 100644
index 000000000..e097e1dfc
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-music/main.vue
@@ -0,0 +1,70 @@
+<!--
+  【微信消息 - 音乐】
+-->
+<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>
+    <el-link
+      type="success"
+      :underline="false"
+      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">
+          <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>
+    </el-link>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
+@import url('../wx-msg/card.scss');
+</style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-news/index.ts b/apps/web-ele/src/views/mp/modules/wx-news/index.ts
new file mode 100644
index 000000000..374d993fe
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-news/index.ts
@@ -0,0 +1 @@
+export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-news/main.vue b/apps/web-ele/src/views/mp/modules/wx-news/main.vue
new file mode 100644
index 000000000..f93893c92
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-news/main.vue
@@ -0,0 +1,123 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  【微信消息 - 图文】
+  芋道源码：
+  ① 代码优化，补充注释，提升阅读性
+-->
+<script lang="ts" setup>
+defineOptions({ name: 'WxNews' });
+
+const props = withDefaults(
+  defineProps<{
+    articles?: any[] | null;
+  }>(),
+  {
+    articles: null,
+  },
+);
+
+defineExpose({
+  articles: props.articles,
+});
+</script>
+
+<template>
+  <div class="news-home">
+    <div v-for="(article, index) in articles" :key="index" class="news-div">
+      <!-- 头条 -->
+      <a v-if="index === 0" :href="article.url" target="_blank">
+        <div class="news-main">
+          <div class="news-content">
+            <el-image
+              :src="article.picUrl || article.thumbUrl"
+              class="material-img"
+              style="width: 100%; height: 120px"
+            />
+            <div class="news-content-title">
+              <span>{{ article.title }}</span>
+            </div>
+          </div>
+        </div>
+      </a>
+      <!-- 二条/三条等等 -->
+      <a v-else :href="article.url" target="_blank">
+        <div class="news-main-item">
+          <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%"
+              />
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.news-home {
+  width: 100%;
+  margin: auto;
+  background-color: #fff;
+}
+
+.news-main {
+  width: 100%;
+  margin: auto;
+}
+
+.news-content {
+  position: relative;
+  width: 100%;
+  background-color: #acadae;
+}
+
+.news-content-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  box-sizing: unset !important;
+  display: inline-block;
+  width: 98%;
+  padding: 1%;
+  font-size: 12px;
+  color: #fff;
+  white-space: normal;
+  background-color: black;
+  opacity: 0.65;
+}
+
+.news-main-item {
+  padding: 5px 0;
+  background-color: #fff;
+  border-top: 1px solid #eaeaea;
+}
+
+.news-content-item {
+  position: relative;
+}
+
+.news-content-item-title {
+  display: inline-block;
+  width: 70%;
+  margin-left: 1%;
+  font-size: 10px;
+  white-space: normal;
+}
+
+.news-content-item-img {
+  display: inline-block;
+  width: 25%;
+  margin-right: 1%;
+  background-color: #acadae;
+}
+
+.material-img {
+  width: 100%;
+}
+</style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/index.ts b/apps/web-ele/src/views/mp/modules/wx-reply/index.ts
new file mode 100644
index 000000000..8696f5c53
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-reply/index.ts
@@ -0,0 +1,8 @@
+export { default } from './main.vue';
+
+export {
+  createEmptyReply,
+  NewsType,
+  type Reply,
+  ReplyType,
+} from './modules/types';
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/main.vue b/apps/web-ele/src/views/mp/modules/wx-reply/main.vue
new file mode 100644
index 000000000..929176a6f
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-reply/main.vue
@@ -0,0 +1,140 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  芋道源码：
+  ① 移除多余的 rep 为前缀的变量，让 message 消息更简单
+  ② 代码优化，补充注释，提升阅读性
+  ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
+  ④ 支持发送【视频】消息时，支持新建视频
+-->
+<script lang="ts" setup>
+import type { Reply } from './modules/types';
+
+import { computed, ref, unref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElRow, ElTabPane, ElTabs } from 'element-plus';
+
+import TabImage from './modules/tab-image.vue';
+import TabMusic from './modules/tab-music.vue';
+import TabNews from './modules/tab-news.vue';
+import TabText from './modules/tab-text.vue';
+import TabVideo from './modules/tab-video.vue';
+import TabVoice from './modules/tab-voice.vue';
+import { createEmptyReply, NewsType, ReplyType } from './modules/types';
+
+defineOptions({ name: 'WxReplySelect' });
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: Reply;
+    newsType?: NewsType;
+  }>(),
+  {
+    newsType: () => NewsType.Published,
+  },
+);
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+// 作为多个标签保存各自Reply的缓存
+const tabCache = new Map<ReplyType, Reply>();
+// 采用独立的ref来保存当前tab，避免在watch标签变化，对reply进行赋值会产生了循环调用
+const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text);
+
+watch(
+  currentTab,
+  (newTab, oldTab) => {
+    // 第一次进入：oldTab 为 undefined
+    // 判断 newTab 是因为 Reply 为 Partial
+    if (oldTab === undefined || newTab === undefined) {
+      return;
+    }
+
+    tabCache.set(oldTab, unref(reply));
+
+    // 从缓存里面取出新tab内容，有则覆盖Reply，没有则创建空Reply
+    const temp = tabCache.get(newTab);
+    if (temp) {
+      reply.value = temp;
+    } else {
+      const newData = createEmptyReply(reply);
+      newData.type = newTab;
+      reply.value = newData;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 清除除了`type`, `accountId`的字段 */
+function clear() {
+  reply.value = createEmptyReply(reply);
+}
+
+defineExpose({
+  clear,
+});
+</script>
+
+<template>
+  <ElTabs type="border-card" v-model="currentTab">
+    <!-- 类型 1：文本 -->
+    <ElTabPane :name="ReplyType.Text">
+      <template #label>
+        <ElRow align="middle"><IconifyIcon icon="ep:document" /> 文本</ElRow>
+      </template>
+      <TabText v-model="reply.content" />
+    </ElTabPane>
+
+    <!-- 类型 2：图片 -->
+    <ElTabPane :name="ReplyType.Image">
+      <template #label>
+        <ElRow align="middle">
+          <IconifyIcon icon="ep:picture" class="mr-5px" /> 图片
+        </ElRow>
+      </template>
+      <TabImage v-model="reply" />
+    </ElTabPane>
+
+    <!-- 类型 3：语音 -->
+    <ElTabPane :name="ReplyType.Voice">
+      <template #label>
+        <ElRow align="middle"><IconifyIcon icon="ep:phone" /> 语音</ElRow>
+      </template>
+      <TabVoice v-model="reply" />
+    </ElTabPane>
+
+    <!-- 类型 4：视频 -->
+    <ElTabPane :name="ReplyType.Video">
+      <template #label>
+        <ElRow align="middle"><IconifyIcon icon="ep:share" /> 视频</ElRow>
+      </template>
+      <TabVideo v-model="reply" />
+    </ElTabPane>
+
+    <!-- 类型 5：图文 -->
+    <ElTabPane :name="ReplyType.News">
+      <template #label>
+        <ElRow align="middle"><IconifyIcon icon="ep:reading" /> 图文</ElRow>
+      </template>
+      <TabNews v-model="reply" :news-type="newsType" />
+    </ElTabPane>
+
+    <!-- 类型 6：音乐 -->
+    <ElTabPane :name="ReplyType.Music">
+      <template #label>
+        <ElRow align="middle"><IconifyIcon icon="ep:service" />音乐</ElRow>
+      </template>
+      <TabMusic v-model="reply" />
+    </ElTabPane>
+  </ElTabs>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-image.vue b/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-image.vue
new file mode 100644
index 000000000..2cd0b7d96
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-image.vue
@@ -0,0 +1,161 @@
+<script lang="ts" setup>
+import type { UploadRawFile } from 'element-plus';
+
+import type { Reply } from './types';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import {
+  ElButton,
+  ElCol,
+  ElDialog,
+  ElMessage,
+  ElRow,
+  ElUpload,
+} from 'element-plus';
+
+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 message = ElMessage;
+
+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(rawFile: UploadRawFile) {
+  return useBeforeUpload(UploadType.Image, 2)(rawFile);
+}
+
+/** 上传成功 */
+function onUploadSuccess(res: any) {
+  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>
+      <ElRow class="pt-[10px] text-center" justify="center">
+        <ElButton type="danger" circle @click="onDelete">
+          <IconifyIcon icon="ep:delete" />
+        </ElButton>
+      </ElRow>
+    </div>
+    <!-- 情况二：未做完上述操作 -->
+    <ElRow v-else class="text-center" align="middle">
+      <!-- 选择素材 -->
+      <ElCol
+        :span="12"
+        class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
+      >
+        <ElButton type="success" @click="showDialog = true">
+          素材库选择 <IconifyIcon icon="ep:circle-check" />
+        </ElButton>
+        <ElDialog
+          title="选择图片"
+          v-model="showDialog"
+          width="90%"
+          append-to-body
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="image"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </ElDialog>
+      </ElCol>
+      <!-- 文件上传 -->
+      <ElCol
+        :span="12"
+        class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
+      >
+        <ElUpload
+          :action="UPLOAD_URL"
+          :headers="HEADERS"
+          multiple
+          :limit="1"
+          :file-list="fileList"
+          :data="uploadData"
+          :before-upload="beforeImageUpload"
+          :on-success="onUploadSuccess"
+        >
+          <ElButton type="primary">上传图片</ElButton>
+          <template #tip>
+            <span>
+              <div class="text-center leading-[18px]">
+                支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
+              </div>
+            </span>
+          </template>
+        </ElUpload>
+      </ElCol>
+    </ElRow>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-music.vue b/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-music.vue
new file mode 100644
index 000000000..fa46da9fe
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-music.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import type { UploadRawFile } from 'element-plus';
+
+import type { Reply } from './types';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import {
+  ElButton,
+  ElCol,
+  ElDialog,
+  ElInput,
+  ElMessage,
+  ElRow,
+  ElUpload,
+} from 'element-plus';
+
+import { UploadType, useBeforeUpload } from '#/utils/useUpload';
+// import { getAccessToken } from '@/utils/auth'
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+
+// 设置上传的请求头部
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+const message = ElMessage;
+
+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(rawFile: UploadRawFile) {
+  return useBeforeUpload(UploadType.Image, 2)(rawFile);
+}
+
+/** 上传成功 */
+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.thumbMediaId = item.mediaId;
+  reply.value.thumbMediaUrl = item.url;
+}
+</script>
+
+<template>
+  <div>
+    <ElRow align="middle" justify="center">
+      <ElCol :span="6">
+        <ElRow align="middle" justify="center" class="inline-block text-center">
+          <ElCol :span="24">
+            <ElRow align="middle" justify="center">
+              <img
+                class="w-[100px]"
+                v-if="reply.thumbMediaUrl"
+                :src="reply.thumbMediaUrl"
+              />
+              <IconifyIcon v-else icon="ep:plus" />
+            </ElRow>
+            <ElRow align="middle" justify="center" class="mt-[2%]">
+              <div>
+                <ElUpload
+                  :action="UPLOAD_URL"
+                  :headers="HEADERS"
+                  multiple
+                  :limit="1"
+                  :file-list="fileList"
+                  :data="uploadData"
+                  :before-upload="beforeImageUpload"
+                  :on-success="onUploadSuccess"
+                >
+                  <template #trigger>
+                    <ElButton type="primary" link>本地上传</ElButton>
+                  </template>
+                  <ElButton
+                    type="primary"
+                    link
+                    @click="showDialog = true"
+                    class="ml-[5px]"
+                  >
+                    素材库选择
+                  </ElButton>
+                </ElUpload>
+              </div>
+            </ElRow>
+          </ElCol>
+        </ElRow>
+        <ElDialog
+          title="选择图片"
+          v-model="showDialog"
+          width="80%"
+          append-to-body
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="image"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </ElDialog>
+      </ElCol>
+      <ElCol :span="18">
+        <ElInput v-model="reply.title" placeholder="请输入标题" />
+        <div class="my-5"></div>
+        <ElInput v-model="reply.description" placeholder="请输入描述" />
+      </ElCol>
+    </ElRow>
+    <div class="my-5"></div>
+    <ElInput v-model="reply.musicUrl" placeholder="请输入音乐链接" />
+    <div class="my-5"></div>
+    <ElInput v-model="reply.hqMusicUrl" placeholder="请输入高质量音乐链接" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-news.vue b/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-news.vue
new file mode 100644
index 000000000..bbc976307
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-news.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import { computed, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus';
+
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+import WxNews from '#/views/mp/modules/wx-news';
+
+import { NewsType } from './types';
+
+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),
+});
+
+const showDialog = ref(false);
+
+/** 选择素材 */
+function selectMaterial(item: any) {
+  showDialog.value = false;
+  reply.value.articles = item.content.newsItem;
+}
+
+/** 删除图文 */
+function onDelete() {
+  reply.value.articles = [];
+}
+</script>
+
+<template>
+  <div>
+    <ElRow>
+      <div
+        class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
+        v-if="reply.articles && reply.articles.length > 0"
+      >
+        <WxNews :articles="reply.articles" />
+        <ElCol class="pt-[10px] text-center">
+          <ElButton type="danger" circle @click="onDelete">
+            <IconifyIcon icon="ep:delete" />
+          </ElButton>
+        </ElCol>
+      </div>
+      <!-- 选择素材 -->
+      <ElCol :span="24" v-if="!reply.content">
+        <ElRow class="text-center" align="middle">
+          <ElCol :span="24">
+            <ElButton type="success" @click="showDialog = true">
+              {{
+                newsType === NewsType.Published
+                  ? '选择已发布图文'
+                  : '选择草稿箱图文'
+              }}
+              <IconifyIcon icon="ep:circle-check" />
+            </ElButton>
+          </ElCol>
+        </ElRow>
+      </ElCol>
+      <ElDialog
+        title="选择图文"
+        v-model="showDialog"
+        width="90%"
+        append-to-body
+        destroy-on-close
+      >
+        <WxMaterialSelect
+          type="news"
+          :account-id="reply.accountId"
+          :news-type="newsType"
+          @select-material="selectMaterial"
+        />
+      </ElDialog>
+    </ElRow>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-text.vue b/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-text.vue
new file mode 100644
index 000000000..790f7fabd
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-text.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { ElInput } from 'element-plus';
+
+const props = defineProps<{
+  modelValue?: null | string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: null | string): void;
+  (e: 'input', v: null | string): void;
+}>();
+
+const content = computed({
+  get: () => props.modelValue,
+  set: (val: null | string) => {
+    emit('update:modelValue', val);
+    emit('input', val);
+  },
+});
+</script>
+
+<template>
+  <ElInput
+    type="textarea"
+    :rows="5"
+    placeholder="请输入内容"
+    v-model="content"
+    class="w-full"
+  />
+</template>
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-video.vue b/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-video.vue
new file mode 100644
index 000000000..65be7db2e
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-video.vue
@@ -0,0 +1,146 @@
+<script lang="ts" setup>
+import type { UploadRawFile } from 'element-plus';
+
+import type { Reply } from './types';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import {
+  ElButton,
+  ElCol,
+  ElDialog,
+  ElInput,
+  ElMessage,
+  ElRow,
+  ElUpload,
+} from 'element-plus';
+
+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 message = ElMessage;
+
+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(rawFile: UploadRawFile) {
+  return useBeforeUpload(UploadType.Video, 10)(rawFile);
+}
+
+/** 上传成功 */
+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>
+    <ElRow>
+      <ElInput v-model="reply.title" class="mb-[2%]" placeholder="请输入标题" />
+      <ElInput
+        class="mb-[2%]"
+        v-model="reply.description"
+        placeholder="请输入描述"
+      />
+      <ElRow class="w-full pt-[10px] text-center" justify="center">
+        <WxVideoPlayer v-if="reply.url" :url="reply.url" />
+      </ElRow>
+      <ElCol>
+        <ElRow class="text-center" align="middle">
+          <!-- 选择素材 -->
+          <ElCol :span="12">
+            <ElButton type="success" @click="showDialog = true">
+              素材库选择 <IconifyIcon icon="ep:circle-check" />
+            </ElButton>
+            <ElDialog
+              title="选择视频"
+              v-model="showDialog"
+              width="90%"
+              append-to-body
+              destroy-on-close
+            >
+              <WxMaterialSelect
+                type="video"
+                :account-id="reply.accountId"
+                @select-material="selectMaterial"
+              />
+            </ElDialog>
+          </ElCol>
+          <!-- 文件上传 -->
+          <ElCol :span="12">
+            <ElUpload
+              :action="UPLOAD_URL"
+              :headers="HEADERS"
+              multiple
+              :limit="1"
+              :file-list="fileList"
+              :data="uploadData"
+              :before-upload="beforeVideoUpload"
+              :on-success="onUploadSuccess"
+            >
+              <ElButton type="primary">
+                新建视频 <IconifyIcon icon="ep:upload" />
+              </ElButton>
+            </ElUpload>
+          </ElCol>
+        </ElRow>
+      </ElCol>
+    </ElRow>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-voice.vue b/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-voice.vue
new file mode 100644
index 000000000..295828191
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-voice.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { UploadRawFile } from 'element-plus';
+
+import type { Reply } from './types';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import {
+  ElButton,
+  ElCol,
+  ElDialog,
+  ElMessage,
+  ElRow,
+  ElUpload,
+} from 'element-plus';
+
+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 message = ElMessage;
+
+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(rawFile: UploadRawFile) {
+  return useBeforeUpload(UploadType.Voice, 10)(rawFile);
+}
+
+/** 上传成功 */
+function onUploadSuccess(res: any) {
+  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>
+      <ElRow class="w-full pt-[10px] text-center" justify="center">
+        <WxVoicePlayer :url="reply.url" />
+      </ElRow>
+      <ElRow class="w-full pt-[10px] text-center" justify="center">
+        <ElButton type="danger" circle @click="onDelete">
+          <IconifyIcon icon="ep:delete" />
+        </ElButton>
+      </ElRow>
+    </div>
+    <ElRow v-else class="text-center">
+      <!-- 选择素材 -->
+      <ElCol
+        :span="12"
+        class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
+      >
+        <ElButton type="success" @click="showDialog = true">
+          素材库选择<IconifyIcon icon="ep:circle-check" />
+        </ElButton>
+        <ElDialog
+          title="选择语音"
+          v-model="showDialog"
+          width="90%"
+          append-to-body
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="voice"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </ElDialog>
+      </ElCol>
+      <!-- 文件上传 -->
+      <ElCol
+        :span="12"
+        class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
+      >
+        <ElUpload
+          :action="UPLOAD_URL"
+          :headers="HEADERS"
+          multiple
+          :limit="1"
+          :file-list="fileList"
+          :data="uploadData"
+          :before-upload="beforeVoiceUpload"
+          :on-success="onUploadSuccess"
+        >
+          <ElButton type="primary">点击上传</ElButton>
+          <template #tip>
+            <div class="text-center leading-[18px]">
+              格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
+            </div>
+          </template>
+        </ElUpload>
+      </ElCol>
+    </ElRow>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/types.ts b/apps/web-ele/src/views/mp/modules/wx-reply/modules/types.ts
new file mode 100644
index 000000000..67571ef59
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-reply/modules/types.ts
@@ -0,0 +1,58 @@
+import type { Ref } from 'vue';
+
+import { unref } from 'vue';
+
+enum ReplyType {
+  Image = 'image',
+  Music = 'music',
+  News = 'news',
+  Text = 'text',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+interface _Reply {
+  accountId: number;
+  type: ReplyType;
+  name?: null | string;
+  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',
+}
+
+/** 利用旧的reply[accountId, type]初始化新的Reply */
+const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
+  return {
+    accountId: unref(old).accountId,
+    type: unref(old).type,
+    name: null,
+    content: null,
+    mediaId: null,
+    url: null,
+    title: null,
+    description: null,
+    thumbMediaId: null,
+    thumbMediaUrl: null,
+    musicUrl: null,
+    hqMusicUrl: null,
+    introduction: null,
+    articles: [],
+  };
+};
+
+export { createEmptyReply, NewsType, type Reply, ReplyType };
diff --git a/apps/web-ele/src/views/mp/modules/wx-video-play/index.ts b/apps/web-ele/src/views/mp/modules/wx-video-play/index.ts
new file mode 100644
index 000000000..374d993fe
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-video-play/index.ts
@@ -0,0 +1 @@
+export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-video-play/main.vue b/apps/web-ele/src/views/mp/modules/wx-video-play/main.vue
new file mode 100644
index 000000000..1b7260576
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-video-play/main.vue
@@ -0,0 +1,75 @@
+<!--
+  - 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 { VideoPlayer } from '@videojs-player/vue';
+
+import 'video.js/dist/video-js.css';
+
+defineOptions({ name: 'WxVideoPlayer' });
+
+const props = defineProps({
+  url: {
+    type: String,
+    required: true,
+  },
+});
+
+const dialogVideo = ref(false);
+
+// const handleEvent = (log) => {
+//   console.log('Basic player event', log)
+// }
+
+const playVideo = () => {
+  dialogVideo.value = true;
+};
+</script>
+
+<template>
+  <div @click="playVideo()">
+    <!-- 提示 -->
+    <div>
+      <Icon icon="ep:video-play" :size="32" class="mr-5px" />
+      <p class="text-sm">点击播放视频</p>
+    </div>
+
+    <!-- 弹窗播放 -->
+    <el-dialog v-model="dialogVideo" title="视频播放" append-to-body>
+      <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())"-->
+    </el-dialog>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mp/modules/wx-voice-play/index.ts b/apps/web-ele/src/views/mp/modules/wx-voice-play/index.ts
new file mode 100644
index 000000000..374d993fe
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-voice-play/index.ts
@@ -0,0 +1 @@
+export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-voice-play/main.vue b/apps/web-ele/src/views/mp/modules/wx-voice-play/main.vue
new file mode 100644
index 000000000..23b721380
--- /dev/null
+++ b/apps/web-ele/src/views/mp/modules/wx-voice-play/main.vue
@@ -0,0 +1,108 @@
+<!--
+  - 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';
+
+// 因为微信语音是 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();
+
+/** 处理点击，播放或暂停 */
+const playVoice = () => {
+  // 情况一：未初始化，则创建 BenzAMRRecorder
+  if (amr.value === undefined) {
+    amrInit();
+    return;
+  }
+  // 情况二：已经初始化，则根据情况播放或暂时
+  if (amr.value.isPlaying()) {
+    amrStop();
+  } else {
+    amrPlay();
+  }
+};
+
+/** 音频初始化 */
+const amrInit = () => {
+  amr.value = new BenzAMRRecorder();
+  // 设置播放
+  amr.value.initWithUrl(props.url).then(() => {
+    amrPlay();
+    duration.value = amr.value.getDuration();
+  });
+  // 监听暂停
+  amr.value.onEnded(() => {
+    playing.value = false;
+  });
+};
+
+/** 音频播放 */
+const amrPlay = () => {
+  playing.value = true;
+  amr.value.play();
+};
+
+/** 音频暂停 */
+const amrStop = () => {
+  playing.value = false;
+  amr.value.stop();
+};
+// TODO 芋艿：下面样式有点问题
+</script>
+
+<template>
+  <div class="wx-voice-div" @click="playVoice">
+    <el-icon>
+      <Icon v-if="playing !== true" icon="ep:video-play" :size="32" />
+      <Icon v-else icon="ep:video-pause" :size="32" />
+      <span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
+    </el-icon>
+    <div v-if="content">
+      <el-tag type="success" size="small">语音识别</el-tag>
+      {{ content }}
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.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-tdesign/.env b/apps/web-tdesign/.env
new file mode 100644
index 000000000..50f5cdbba
--- /dev/null
+++ b/apps/web-tdesign/.env
@@ -0,0 +1,35 @@
+# 应用标题
+VITE_APP_TITLE=芋道管理系统
+
+# 应用命名空间，用于缓存、store等功能的前缀，确保隔离
+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.analyze b/apps/web-tdesign/.env.analyze
new file mode 100644
index 000000000..ffafa8dd5
--- /dev/null
+++ b/apps/web-tdesign/.env.analyze
@@ -0,0 +1,7 @@
+# public path
+VITE_BASE=/
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/api
+
+VITE_VISUALIZER=true
diff --git a/apps/web-tdesign/.env.development b/apps/web-tdesign/.env.development
new file mode 100644
index 000000000..5c71e36f2
--- /dev/null
+++ b/apps/web-tdesign/.env.development
@@ -0,0 +1,21 @@
+# 端口号
+VITE_PORT=5999
+
+VITE_BASE=/
+
+# 请求路径
+VITE_BASE_URL=http://127.0.0.1:48080
+# 接口地址
+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
new file mode 100644
index 000000000..910fd64cc
--- /dev/null
+++ b/apps/web-tdesign/.env.production
@@ -0,0 +1,23 @@
+VITE_BASE=/
+
+# 请求路径
+VITE_BASE_URL=http://127.0.0.1:48080
+# 接口地址
+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
+
+# 是否开启 PWA
+VITE_PWA=false
+
+# vue-router 的模式
+VITE_ROUTER_HISTORY=hash
+
+# 是否注入全局loading
+VITE_INJECT_APP_LOADING=true
+
+# 打包后是否生成dist.zip
+VITE_ARCHIVER=true
diff --git a/apps/web-tdesign/index.html b/apps/web-tdesign/index.html
new file mode 100644
index 000000000..480eb84de
--- /dev/null
+++ b/apps/web-tdesign/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta name="description" content="A Modern Back-end Management System" />
+    <meta name="keywords" content="Vben Admin Vue3 Vite" />
+    <meta name="author" content="Vben" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <!-- 由 vite 注入 VITE_APP_TITLE 变量，在 .env 文件内配置 -->
+    <title><%= VITE_APP_TITLE %></title>
+    <link rel="icon" href="/favicon.ico" />
+    <script>
+      // 生产环境下注入百度统计
+      if (window._VBEN_ADMIN_PRO_APP_CONF_) {
+        var _hmt = _hmt || [];
+        (function () {
+          var hm = document.createElement('script');
+          hm.src =
+            'https://hm.baidu.com/hm.js?b38e689f40558f20a9a686d7f6f33edf';
+          var s = document.getElementsByTagName('script')[0];
+          s.parentNode.insertBefore(hm, s);
+        })();
+      }
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/web-tdesign/package.json b/apps/web-tdesign/package.json
new file mode 100644
index 000000000..6386cce56
--- /dev/null
+++ b/apps/web-tdesign/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "@vben/web-tdesign",
+  "version": "5.5.9",
+  "homepage": "https://vben.pro",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "apps/web-tdesign"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "vben",
+    "email": "ann.vben@gmail.com",
+    "url": "https://github.com/anncwb"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "pnpm vite build --mode production",
+    "build:analyze": "pnpm vite build --mode analyze",
+    "dev": "pnpm vite --mode development",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit --skipLibCheck"
+  },
+  "imports": {
+    "#/*": "./src/*"
+  },
+  "dependencies": {
+    "@tinymce/tinymce-vue": "catalog:",
+    "@vben/access": "workspace:*",
+    "@vben/common-ui": "workspace:*",
+    "@vben/constants": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/icons": "workspace:*",
+    "@vben/layouts": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "@vben/plugins": "workspace:*",
+    "@vben/preferences": "workspace:*",
+    "@vben/request": "workspace:*",
+    "@vben/stores": "workspace:*",
+    "@vben/styles": "workspace:*",
+    "@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:"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12"
+  }
+}
diff --git a/apps/web-tdesign/postcss.config.mjs b/apps/web-tdesign/postcss.config.mjs
new file mode 100644
index 000000000..3d8070455
--- /dev/null
+++ b/apps/web-tdesign/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';
diff --git a/apps/web-tdesign/public/favicon.ico b/apps/web-tdesign/public/favicon.ico
new file mode 100644
index 000000000..fcf9818e2
Binary files /dev/null and b/apps/web-tdesign/public/favicon.ico differ
diff --git a/apps/web-tdesign/src/adapter/component/index.ts b/apps/web-tdesign/src/adapter/component/index.ts
new file mode 100644
index 000000000..b7fc05478
--- /dev/null
+++ b/apps/web-tdesign/src/adapter/component/index.ts
@@ -0,0 +1,229 @@
+import type { Component } from 'vue';
+
+import type { BaseFormComponentType } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
+
+import { defineAsyncComponent, defineComponent, h, ref } from 'vue';
+
+import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { notification } from '#/adapter/tdesign';
+
+/**
+ * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
+ * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
+ */
+
+const AutoComplete = defineAsyncComponent(
+  () => import('tdesign-vue-next/es/auto-complete'),
+);
+const Button = defineAsyncComponent(() => import('tdesign-vue-next/es/button'));
+const Checkbox = defineAsyncComponent(
+  () => import('tdesign-vue-next/es/checkbox'),
+);
+const CheckboxGroup = defineAsyncComponent(() =>
+  import('tdesign-vue-next/es/checkbox').then((res) => res.CheckboxGroup),
+);
+const DatePicker = defineAsyncComponent(
+  () => import('tdesign-vue-next/es/date-picker'),
+);
+const Divider = defineAsyncComponent(
+  () => import('tdesign-vue-next/es/divider'),
+);
+const Input = defineAsyncComponent(() => import('tdesign-vue-next/es/input'));
+const InputNumber = defineAsyncComponent(
+  () => import('tdesign-vue-next/es/input-number'),
+);
+// const InputPassword = defineAsyncComponent(() =>
+//   import('tdesign-vue-next/es/input').then((res) => res.InputPassword),
+// );
+// const Mentions = defineAsyncComponent(
+//   () => import('tdesign-vue-next/es/mentions'),
+// );
+const Radio = defineAsyncComponent(() => import('tdesign-vue-next/es/radio'));
+const RadioGroup = defineAsyncComponent(() =>
+  import('tdesign-vue-next/es/radio').then((res) => res.RadioGroup),
+);
+const RangePicker = defineAsyncComponent(() =>
+  import('tdesign-vue-next/es/date-picker').then((res) => res.DateRangePicker),
+);
+const Rate = defineAsyncComponent(() => import('tdesign-vue-next/es/rate'));
+const Select = defineAsyncComponent(() => import('tdesign-vue-next/es/select'));
+const Space = defineAsyncComponent(() => import('tdesign-vue-next/es/space'));
+const Switch = defineAsyncComponent(() => import('tdesign-vue-next/es/switch'));
+const Textarea = defineAsyncComponent(
+  () => import('tdesign-vue-next/es/textarea'),
+);
+const TimePicker = defineAsyncComponent(
+  () => import('tdesign-vue-next/es/time-picker'),
+);
+const TreeSelect = defineAsyncComponent(
+  () => import('tdesign-vue-next/es/tree-select'),
+);
+const Upload = defineAsyncComponent(() => import('tdesign-vue-next/es/upload'));
+
+const withDefaultPlaceholder = <T extends Component>(
+  component: T,
+  type: 'input' | 'select',
+  componentProps: Recordable<any> = {},
+) => {
+  return defineComponent({
+    name: component.name,
+    inheritAttrs: false,
+    setup: (props: any, { attrs, expose, slots }) => {
+      const placeholder =
+        props?.placeholder ||
+        attrs?.placeholder ||
+        $t(`ui.placeholder.${type}`);
+      // 透传组件暴露的方法
+      const innerRef = ref();
+      expose(
+        new Proxy(
+          {},
+          {
+            get: (_target, key) => innerRef.value?.[key],
+            has: (_target, key) => key in (innerRef.value || {}),
+          },
+        ),
+      );
+      return () =>
+        h(
+          component,
+          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
+          slots,
+        );
+    },
+  });
+};
+
+// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
+export type ComponentType =
+  | 'ApiSelect'
+  | 'ApiTreeSelect'
+  | 'AutoComplete'
+  | 'Checkbox'
+  | 'CheckboxGroup'
+  | 'DatePicker'
+  | 'DefaultButton'
+  | 'Divider'
+  | 'IconPicker'
+  | 'Input'
+  | 'InputNumber'
+  // | 'InputPassword'
+  // | 'Mentions'
+  | 'PrimaryButton'
+  | 'Radio'
+  | 'RadioGroup'
+  | 'RangePicker'
+  | 'Rate'
+  | 'Select'
+  | 'Space'
+  | 'Switch'
+  | 'Textarea'
+  | 'TimePicker'
+  | 'TreeSelect'
+  | 'Upload'
+  | BaseFormComponentType;
+
+async function initComponentAdapter() {
+  const components: Partial<Record<ComponentType, Component>> = {
+    // 如果你的组件体积比较大，可以使用异步加载
+    // Button: () =>
+    // import('xxx').then((res) => res.Button),
+    ApiSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiSelect',
+      },
+      'select',
+      {
+        component: Select,
+        loadingSlot: 'suffixIcon',
+        visibleEvent: 'onDropdownVisibleChange',
+        modelPropName: 'value',
+      },
+    ),
+    ApiTreeSelect: withDefaultPlaceholder(
+      {
+        ...ApiComponent,
+        name: 'ApiTreeSelect',
+      },
+      'select',
+      {
+        component: TreeSelect,
+        fieldNames: { label: 'label', value: 'value', children: 'children' },
+        loadingSlot: 'suffixIcon',
+        modelPropName: 'value',
+        optionsPropName: 'treeData',
+        visibleEvent: 'onVisibleChange',
+      },
+    ),
+    AutoComplete,
+    Checkbox,
+    CheckboxGroup,
+    DatePicker,
+    // 自定义默认按钮
+    DefaultButton: (props, { attrs, slots }) => {
+      return h(Button, { ...props, attrs, theme: 'default' }, slots);
+    },
+    Divider,
+    IconPicker: withDefaultPlaceholder(IconPicker, 'select', {
+      iconSlot: 'addonAfter',
+      inputComponent: Input,
+      modelValueProp: 'value',
+    }),
+    Input: withDefaultPlaceholder(Input, 'input'),
+    InputNumber: withDefaultPlaceholder(InputNumber, 'input'),
+    // InputPassword: withDefaultPlaceholder(InputPassword, 'input'),
+    // Mentions: withDefaultPlaceholder(Mentions, 'input'),
+    // 自定义主要按钮
+    PrimaryButton: (props, { attrs, slots }) => {
+      let ghost = false;
+      let variant = props.variant;
+      if (props.variant === 'ghost') {
+        ghost = true;
+        variant = 'base';
+      }
+      return h(
+        Button,
+        { ...props, ghost, variant, attrs, theme: 'primary' },
+        slots,
+      );
+    },
+    Radio,
+    RadioGroup,
+    RangePicker: (props, { attrs, slots }) => {
+      return h(
+        RangePicker,
+        { ...props, modelValue: props.modelValue ?? [], attrs },
+        slots,
+      );
+    },
+    Rate,
+    Select: withDefaultPlaceholder(Select, 'select'),
+    Space,
+    Switch,
+    Textarea: withDefaultPlaceholder(Textarea, 'input'),
+    TimePicker,
+    TreeSelect: withDefaultPlaceholder(TreeSelect, 'select'),
+    Upload,
+  };
+
+  // 将组件注册到全局共享状态中
+  globalShareState.setComponents(components);
+
+  // 定义全局共享状态中的消息提示
+  globalShareState.defineMessage({
+    // 复制成功消息提示
+    copyPreferencesSuccess: (title, content) => {
+      notification.success({
+        title,
+        content,
+        placement: 'bottom-right',
+      });
+    },
+  });
+}
+
+export { initComponentAdapter };
diff --git a/apps/web-tdesign/src/adapter/form.ts b/apps/web-tdesign/src/adapter/form.ts
new file mode 100644
index 000000000..ed0945142
--- /dev/null
+++ b/apps/web-tdesign/src/adapter/form.ts
@@ -0,0 +1,49 @@
+import type {
+  VbenFormSchema as FormSchema,
+  VbenFormProps,
+} from '@vben/common-ui';
+
+import type { ComponentType } from './component';
+
+import { setupVbenForm, useVbenForm as useForm, z } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+async function initSetupVbenForm() {
+  setupVbenForm<ComponentType>({
+    config: {
+      // tdesign组件库默认都是 v-model:value
+      baseModelPropName: 'value',
+
+      // 一些组件是 v-model:checked 或者 v-model:fileList
+      modelPropNameMap: {
+        Checkbox: 'checked',
+        Radio: 'checked',
+        Switch: 'checked',
+        Upload: 'fileList',
+      },
+    },
+    defineRules: {
+      // 输入项目必填国际化适配
+      required: (value, _params, ctx) => {
+        if (value === undefined || value === null || value.length === 0) {
+          return $t('ui.formRules.required', [ctx.label]);
+        }
+        return true;
+      },
+      // 选择项目必填国际化适配
+      selectRequired: (value, _params, ctx) => {
+        if (value === undefined || value === null) {
+          return $t('ui.formRules.selectRequired', [ctx.label]);
+        }
+        return true;
+      },
+    },
+  });
+}
+
+const useVbenForm = useForm<ComponentType>;
+
+export { initSetupVbenForm, useVbenForm, z };
+
+export type VbenFormSchema = FormSchema<ComponentType>;
+export type { VbenFormProps };
diff --git a/apps/web-tdesign/src/adapter/tdesign.ts b/apps/web-tdesign/src/adapter/tdesign.ts
new file mode 100644
index 000000000..70c67601e
--- /dev/null
+++ b/apps/web-tdesign/src/adapter/tdesign.ts
@@ -0,0 +1,5 @@
+export {
+  DialogPlugin as dialog,
+  MessagePlugin as message,
+  NotifyPlugin as notification,
+} from 'tdesign-vue-next';
diff --git a/apps/web-tdesign/src/adapter/vxe-table.ts b/apps/web-tdesign/src/adapter/vxe-table.ts
new file mode 100644
index 000000000..24caaefb4
--- /dev/null
+++ b/apps/web-tdesign/src/adapter/vxe-table.ts
@@ -0,0 +1,232 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import { h } from 'vue';
+
+import {
+  AsyncVxeColumn,
+  AsyncVxeTable,
+  createRequiredValidation,
+  setupVbenVxeTable,
+  useVbenVxeGrid,
+} from '@vben/plugins/vxe-table';
+import {
+  erpCountInputFormatter,
+  erpNumberFormatter,
+  fenToYuan,
+  formatPast2,
+} from '@vben/utils';
+
+import { Button, Image, ImageViewer, Switch, Tag } from 'tdesign-vue-next';
+
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+
+import { useVbenForm } from './form';
+
+setupVbenVxeTable({
+  configVxeTable: (vxeUI) => {
+    vxeUI.setConfig({
+      grid: {
+        align: 'center',
+        border: false,
+        columnConfig: {
+          resizable: true,
+        },
+        minHeight: 180,
+        formConfig: {
+          // 全局禁用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: 'list',
+            total: 'total',
+          },
+          showActiveMsg: true,
+          showResponseMsg: false,
+        },
+        pagerConfig: {
+          enabled: true,
+        },
+        sortConfig: {
+          multiple: true,
+        },
+        round: true,
+        showOverflow: true,
+        size: 'small',
+      } as VxeTableGridOptions,
+    });
+
+    // 表格配置项可以用 cellRender: { name: 'CellImage' },
+    vxeUI.renderer.add('CellImage', {
+      renderTableDefault(_renderOpts, params) {
+        const { column, row } = params;
+        return h(Image, { src: row[column.field] });
+      },
+    });
+
+    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', 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 { 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
new file mode 100644
index 000000000..604644a1f
--- /dev/null
+++ b/apps/web-tdesign/src/api/core/auth.ts
@@ -0,0 +1,161 @@
+import type { AuthPermissionInfo } from '@vben/types';
+
+import { baseRequestClient, requestClient } from '#/api/request';
+
+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 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>('/system/auth/login', data, {
+    headers: {
+      isEncrypt: false,
+    },
+  });
+}
+
+/** 刷新 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 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
new file mode 100644
index 000000000..269586ee8
--- /dev/null
+++ b/apps/web-tdesign/src/api/core/index.ts
@@ -0,0 +1 @@
+export * from './auth';
diff --git a/apps/web-tdesign/src/api/index.ts b/apps/web-tdesign/src/api/index.ts
new file mode 100644
index 000000000..4b0e04137
--- /dev/null
+++ b/apps/web-tdesign/src/api/index.ts
@@ -0,0 +1 @@
+export * from './core';
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
new file mode 100644
index 000000000..3ecbee4d4
--- /dev/null
+++ b/apps/web-tdesign/src/api/request.ts
@@ -0,0 +1,186 @@
+/**
+ * 该文件可自行根据业务逻辑进行调整
+ */
+import type { RequestClientOptions } from '@vben/request';
+
+import { isTenantEnable, useAppConfig } from '@vben/hooks';
+import { preferences } from '@vben/preferences';
+import {
+  authenticateResponseInterceptor,
+  defaultResponseInterceptor,
+  errorMessageResponseInterceptor,
+  RequestClient,
+} from '@vben/request';
+import { useAccessStore } from '@vben/stores';
+import { createApiEncrypt } from '@vben/utils';
+
+import { message } from '#/adapter/tdesign';
+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({
+    ...options,
+    baseURL,
+  });
+
+  /**
+   * 重新认证逻辑
+   */
+  async function doReAuthenticate() {
+    console.warn('Access token or refresh token is invalid or expired. ');
+    const accessStore = useAccessStore();
+    const authStore = useAuthStore();
+    accessStore.setAccessToken(null);
+    if (
+      preferences.app.loginExpiredMode === 'modal' &&
+      accessStore.isAccessChecked
+    ) {
+      accessStore.setLoginExpired(true);
+    } else {
+      await authStore.logout();
+    }
+  }
+
+  /**
+   * 刷新token逻辑
+   */
+  async function doRefreshToken() {
+    const accessStore = useAccessStore();
+    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;
+  }
+
+  function formatToken(token: null | string) {
+    return token ? `Bearer ${token}` : null;
+  }
+
+  // 请求头处理
+  client.addRequestInterceptor({
+    fulfilled: async (config) => {
+      const accessStore = useAccessStore();
+
+      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({
+      codeField: 'code',
+      dataField: 'data',
+      successCode: 0,
+    }),
+  );
+
+  // token过期的处理
+  client.addResponseInterceptor(
+    authenticateResponseInterceptor({
+      client,
+      doReAuthenticate,
+      doRefreshToken,
+      enableRefreshToken: preferences.app.enableRefreshToken,
+      formatToken,
+    }),
+  );
+
+  // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
+  client.addResponseInterceptor(
+    errorMessageResponseInterceptor((msg: string, error) => {
+      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
+      // 当前mock接口返回的错误字段是 error 或者 message
+      const responseData = error?.response?.data ?? {};
+      const errorMessage =
+        responseData?.error ?? responseData?.message ?? responseData.msg ?? '';
+      // add by 芋艿：特殊：避免 401 “账号未登录”，重复提示。因为，此时会跳转到登录界面，只需提示一次！！！
+      if (error?.data?.code === 401) {
+        return;
+      }
+      // 如果没有错误信息，则会根据状态码进行提示
+      message.error(errorMessage || msg);
+    }),
+  );
+
+  return client;
+}
+
+export const requestClient = createRequestClient(apiURL, {
+  responseReturn: 'data',
+});
+
+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/app.vue b/apps/web-tdesign/src/app.vue
new file mode 100644
index 000000000..57d5951cc
--- /dev/null
+++ b/apps/web-tdesign/src/app.vue
@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import type { GlobalConfigProvider } from 'tdesign-vue-next';
+
+import { onMounted } from 'vue';
+
+import { usePreferences } from '@vben/preferences';
+
+import { merge } from 'lodash-es';
+import { ConfigProvider } from 'tdesign-vue-next';
+import zhConfig from 'tdesign-vue-next/es/locale/zh_CN';
+
+defineOptions({ name: 'App' });
+const { isDark } = usePreferences();
+
+onMounted(() => {
+  document.documentElement.setAttribute(
+    'theme-mode',
+    isDark.value ? 'dark' : '',
+  );
+});
+
+const customConfig: GlobalConfigProvider = {
+  // 可以在此处定义更多自定义配置，具体可配置内容参看 API 文档
+  calendar: {},
+  table: {},
+  pagination: {},
+};
+const globalConfig = merge(zhConfig, customConfig);
+</script>
+
+<template>
+  <ConfigProvider :global-config="globalConfig">
+    <RouterView />
+  </ConfigProvider>
+</template>
diff --git a/apps/web-tdesign/src/bootstrap.ts b/apps/web-tdesign/src/bootstrap.ts
new file mode 100644
index 000000000..edcccea4c
--- /dev/null
+++ b/apps/web-tdesign/src/bootstrap.ts
@@ -0,0 +1,78 @@
+import { createApp, watchEffect } from 'vue';
+
+import { registerAccessDirective } from '@vben/access';
+import { registerLoadingDirective } from '@vben/common-ui/es/loading';
+import { preferences } from '@vben/preferences';
+import { initStores } from '@vben/stores';
+import '@vben/styles';
+import '@vben/styles/antd';
+
+import { useTitle } from '@vueuse/core';
+
+import { $t, setupI18n } from '#/locales';
+
+import { initComponentAdapter } from './adapter/component';
+import { initSetupVbenForm } from './adapter/form';
+import App from './app.vue';
+import { router } from './router';
+
+// 引入组件库的少量全局样式变量
+
+async function bootstrap(namespace: string) {
+  // 初始化组件适配器
+  await initComponentAdapter();
+
+  // 初始化表单组件
+  await initSetupVbenForm();
+
+  // // 设置弹窗的默认配置
+  // setDefaultModalProps({
+  //   fullscreenButton: false,
+  // });
+  // // 设置抽屉的默认配置
+  // setDefaultDrawerProps({
+  //   zIndex: 1020,
+  // });
+
+  const app = createApp(App);
+
+  // 注册v-loading指令
+  registerLoadingDirective(app, {
+    loading: 'loading', // 在这里可以自定义指令名称，也可以明确提供false表示不注册这个指令
+    spinning: 'spinning',
+  });
+
+  // 国际化 i18n 配置
+  await setupI18n(app);
+
+  // 配置 pinia-tore
+  await initStores(app, { namespace });
+
+  // 安装权限指令
+  registerAccessDirective(app);
+
+  // 初始化 tippy
+  const { initTippy } = await import('@vben/common-ui/es/tippy');
+  initTippy(app);
+
+  // 配置路由及路由守卫
+  app.use(router);
+
+  // 配置Motion插件
+  const { MotionPlugin } = await import('@vben/plugins/motion');
+  app.use(MotionPlugin);
+
+  // 动态更新标题
+  watchEffect(() => {
+    if (preferences.app.dynamicTitle) {
+      const routeTitle = router.currentRoute.value.meta?.title;
+      const pageTitle =
+        (routeTitle ? `${$t(routeTitle)} - ` : '') + preferences.app.name;
+      useTitle(pageTitle);
+    }
+  });
+
+  app.mount('#app');
+}
+
+export { bootstrap };
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/layouts/auth.vue b/apps/web-tdesign/src/layouts/auth.vue
new file mode 100644
index 000000000..18d415bc7
--- /dev/null
+++ b/apps/web-tdesign/src/layouts/auth.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { AuthPageLayout } from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const appName = computed(() => preferences.app.name);
+const logo = computed(() => preferences.logo.source);
+</script>
+
+<template>
+  <AuthPageLayout
+    :app-name="appName"
+    :logo="logo"
+    :page-description="$t('authentication.pageDesc')"
+    :page-title="$t('authentication.pageTitle')"
+  >
+    <!-- 自定义工具栏 -->
+    <!-- <template #toolbar></template> -->
+  </AuthPageLayout>
+</template>
diff --git a/apps/web-tdesign/src/layouts/basic.vue b/apps/web-tdesign/src/layouts/basic.vue
new file mode 100644
index 000000000..805b8a73d
--- /dev/null
+++ b/apps/web-tdesign/src/layouts/basic.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type { NotificationItem } from '@vben/layouts';
+
+import { computed, ref, watch } from 'vue';
+
+import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
+import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
+import { useWatermark } from '@vben/hooks';
+import { BookOpenText, CircleHelp, SvgGithubIcon } from '@vben/icons';
+import {
+  BasicLayout,
+  LockScreen,
+  Notification,
+  UserDropdown,
+} from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+import { useAccessStore, useUserStore } from '@vben/stores';
+import { openWindow } from '@vben/utils';
+
+import { $t } from '#/locales';
+import { useAuthStore } from '#/store';
+import LoginForm from '#/views/_core/authentication/login.vue';
+
+const notifications = ref<NotificationItem[]>([
+  {
+    avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
+    date: '3小时前',
+    isRead: true,
+    message: '描述信息描述信息描述信息',
+    title: '收到了 14 份新周报',
+  },
+  {
+    avatar: 'https://avatar.vercel.sh/1',
+    date: '刚刚',
+    isRead: false,
+    message: '描述信息描述信息描述信息',
+    title: '朱偏右 回复了你',
+  },
+  {
+    avatar: 'https://avatar.vercel.sh/1',
+    date: '2024-01-01',
+    isRead: false,
+    message: '描述信息描述信息描述信息',
+    title: '曲丽丽 评论了你',
+  },
+  {
+    avatar: 'https://avatar.vercel.sh/satori',
+    date: '1天前',
+    isRead: false,
+    message: '描述信息描述信息描述信息',
+    title: '代办提醒',
+  },
+]);
+
+const userStore = useUserStore();
+const authStore = useAuthStore();
+const accessStore = useAccessStore();
+const { destroyWatermark, updateWatermark } = useWatermark();
+const showDot = computed(() =>
+  notifications.value.some((item) => !item.isRead),
+);
+
+const menus = computed(() => [
+  {
+    handler: () => {
+      openWindow(VBEN_DOC_URL, {
+        target: '_blank',
+      });
+    },
+    icon: BookOpenText,
+    text: $t('ui.widgets.document'),
+  },
+  {
+    handler: () => {
+      openWindow(VBEN_GITHUB_URL, {
+        target: '_blank',
+      });
+    },
+    icon: SvgGithubIcon,
+    text: 'GitHub',
+  },
+  {
+    handler: () => {
+      openWindow(`${VBEN_GITHUB_URL}/issues`, {
+        target: '_blank',
+      });
+    },
+    icon: CircleHelp,
+    text: $t('ui.widgets.qa'),
+  },
+]);
+
+const avatar = computed(() => {
+  return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
+});
+
+async function handleLogout() {
+  await authStore.logout(false);
+}
+
+function handleNoticeClear() {
+  notifications.value = [];
+}
+
+function handleMakeAll() {
+  notifications.value.forEach((item) => (item.isRead = true));
+}
+watch(
+  () => ({
+    enable: preferences.app.watermark,
+    content: preferences.app.watermarkContent,
+  }),
+  async ({ enable, content }) => {
+    if (enable) {
+      await updateWatermark({
+        content:
+          content ||
+          `${userStore.userInfo?.username} - ${userStore.userInfo?.realName}`,
+      });
+    } else {
+      destroyWatermark();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <BasicLayout @clear-preferences-and-logout="handleLogout">
+    <template #user-dropdown>
+      <UserDropdown
+        :avatar
+        :menus
+        :text="userStore.userInfo?.realName"
+        description="ann.vben@gmail.com"
+        tag-text="Pro"
+        @logout="handleLogout"
+      />
+    </template>
+    <template #notification>
+      <Notification
+        :dot="showDot"
+        :notifications="notifications"
+        @clear="handleNoticeClear"
+        @make-all="handleMakeAll"
+      />
+    </template>
+    <template #extra>
+      <AuthenticationLoginExpiredModal
+        v-model:open="accessStore.loginExpired"
+        :avatar
+      >
+        <LoginForm />
+      </AuthenticationLoginExpiredModal>
+    </template>
+    <template #lock-screen>
+      <LockScreen :avatar @to-login="handleLogout" />
+    </template>
+  </BasicLayout>
+</template>
diff --git a/apps/web-tdesign/src/layouts/index.ts b/apps/web-tdesign/src/layouts/index.ts
new file mode 100644
index 000000000..a43207805
--- /dev/null
+++ b/apps/web-tdesign/src/layouts/index.ts
@@ -0,0 +1,6 @@
+const BasicLayout = () => import('./basic.vue');
+const AuthPageLayout = () => import('./auth.vue');
+
+const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
+
+export { AuthPageLayout, BasicLayout, IFrameView };
diff --git a/apps/web-tdesign/src/locales/README.md b/apps/web-tdesign/src/locales/README.md
new file mode 100644
index 000000000..7b451032e
--- /dev/null
+++ b/apps/web-tdesign/src/locales/README.md
@@ -0,0 +1,3 @@
+# locale
+
+每个app使用的国际化可能不同，这里用于扩展国际化的功能，例如扩展 dayjs、antd组件库的多语言切换，以及app本身的国际化文件。
diff --git a/apps/web-tdesign/src/locales/index.ts b/apps/web-tdesign/src/locales/index.ts
new file mode 100644
index 000000000..6d98579af
--- /dev/null
+++ b/apps/web-tdesign/src/locales/index.ts
@@ -0,0 +1,77 @@
+import type { App } from 'vue';
+
+import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
+
+import {
+  $t,
+  setupI18n as coreSetup,
+  loadLocalesMapFromDir,
+} from '@vben/locales';
+import { preferences } from '@vben/preferences';
+
+import dayjs from 'dayjs';
+
+const modules = import.meta.glob('./langs/**/*.json');
+
+const localesMap = loadLocalesMapFromDir(
+  /\.\/langs\/([^/]+)\/(.*)\.json$/,
+  modules,
+);
+/**
+ * 加载应用特有的语言包
+ * 这里也可以改造为从服务端获取翻译数据
+ * @param lang
+ */
+async function loadMessages(lang: SupportedLanguagesType) {
+  const [appLocaleMessages] = await Promise.all([
+    localesMap[lang]?.(),
+    loadThirdPartyMessage(lang),
+  ]);
+  return appLocaleMessages?.default;
+}
+
+/**
+ * 加载第三方组件库的语言包
+ * @param lang
+ */
+async function loadThirdPartyMessage(lang: SupportedLanguagesType) {
+  await loadDayjsLocale(lang);
+}
+
+/**
+ * 加载dayjs的语言包
+ * @param lang
+ */
+async function loadDayjsLocale(lang: SupportedLanguagesType) {
+  let locale;
+  switch (lang) {
+    case 'en-US': {
+      locale = await import('dayjs/locale/en');
+      break;
+    }
+    case 'zh-CN': {
+      locale = await import('dayjs/locale/zh-cn');
+      break;
+    }
+    // 默认使用英语
+    default: {
+      locale = await import('dayjs/locale/en');
+    }
+  }
+  if (locale) {
+    dayjs.locale(locale);
+  } else {
+    console.error(`Failed to load dayjs locale for ${lang}`);
+  }
+}
+
+async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
+  await coreSetup(app, {
+    defaultLocale: preferences.app.locale,
+    loadMessages,
+    missingWarn: !import.meta.env.PROD,
+    ...options,
+  });
+}
+
+export { $t, setupI18n };
diff --git a/apps/web-tdesign/src/locales/langs/en-US/page.json b/apps/web-tdesign/src/locales/langs/en-US/page.json
new file mode 100644
index 000000000..00a8c90b2
--- /dev/null
+++ b/apps/web-tdesign/src/locales/langs/en-US/page.json
@@ -0,0 +1,33 @@
+{
+  "auth": {
+    "login": "Login",
+    "register": "Register",
+    "codeLogin": "Code Login",
+    "qrcodeLogin": "Qr Code Login",
+    "forgetPassword": "Forget Password"
+  },
+  "dashboard": {
+    "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/page.json b/apps/web-tdesign/src/locales/langs/zh-CN/page.json
new file mode 100644
index 000000000..eefc4924b
--- /dev/null
+++ b/apps/web-tdesign/src/locales/langs/zh-CN/page.json
@@ -0,0 +1,33 @@
+{
+  "auth": {
+    "login": "登录",
+    "register": "注册",
+    "codeLogin": "验证码登录",
+    "qrcodeLogin": "二维码登录",
+    "forgetPassword": "忘记密码"
+  },
+  "dashboard": {
+    "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/main.ts b/apps/web-tdesign/src/main.ts
new file mode 100644
index 000000000..5d728a02a
--- /dev/null
+++ b/apps/web-tdesign/src/main.ts
@@ -0,0 +1,31 @@
+import { initPreferences } from '@vben/preferences';
+import { unmountGlobalLoading } from '@vben/utils';
+
+import { overridesPreferences } from './preferences';
+
+/**
+ * 应用初始化完成之后再进行页面加载渲染
+ */
+async function initApplication() {
+  // name用于指定项目唯一标识
+  // 用于区分不同项目的偏好设置以及存储数据的key前缀以及其他一些需要隔离的数据
+  const env = import.meta.env.PROD ? 'prod' : 'dev';
+  const appVersion = import.meta.env.VITE_APP_VERSION;
+  const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${appVersion}-${env}`;
+
+  // app偏好设置初始化
+  await initPreferences({
+    namespace,
+    overrides: overridesPreferences,
+  });
+
+  // 启动应用并挂载
+  // vue应用主要逻辑及视图
+  const { bootstrap } = await import('./bootstrap');
+  await bootstrap(namespace);
+
+  // 移除并销毁loading
+  unmountGlobalLoading();
+}
+
+initApplication();
diff --git a/apps/web-tdesign/src/preferences.ts b/apps/web-tdesign/src/preferences.ts
new file mode 100644
index 000000000..73eb135cb
--- /dev/null
+++ b/apps/web-tdesign/src/preferences.ts
@@ -0,0 +1,25 @@
+import { defineOverridesPreferences } from '@vben/preferences';
+
+/**
+ * @description 项目配置文件
+ * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ * !!! 更改配置后请清空缓存，否则可能不生效
+ */
+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
new file mode 100644
index 000000000..c4b161a5d
--- /dev/null
+++ b/apps/web-tdesign/src/router/access.ts
@@ -0,0 +1,41 @@
+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 { BasicLayout, IFrameView } from '#/layouts';
+
+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,
+    IFrameView,
+  };
+
+  return await generateAccessible(preferences.app.accessMode, {
+    ...options,
+    fetchMenuListAsync: async () => {
+      // 由于 yudao 通过 accessStore 读取，所以不在进行 message.loading 提示
+      // 补充说明：accessStore.accessMenus 一开始是 AppRouteRecordRaw 类型（后端加载），后面被赋值成 MenuRecordRaw 类型（前端转换）
+      const accessMenus = accessStore.accessMenus as AppRouteRecordRaw[];
+      return convertServerMenuToRouteRecordStringComponent(accessMenus);
+    },
+    // 可以指定没有权限跳转403页面
+    forbiddenComponent,
+    // 如果 route.meta.menuVisibleWithForbidden = true
+    layoutMap,
+    pageMap,
+  });
+}
+
+export { generateAccess };
diff --git a/apps/web-tdesign/src/router/guard.ts b/apps/web-tdesign/src/router/guard.ts
new file mode 100644
index 000000000..593867acf
--- /dev/null
+++ b/apps/web-tdesign/src/router/guard.ts
@@ -0,0 +1,155 @@
+import type { Router } from 'vue-router';
+
+import { LOGIN_PATH } from '@vben/constants';
+import { $t } from '@vben/locales';
+import { preferences } from '@vben/preferences';
+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';
+
+import { generateAccess } from './access';
+
+/**
+ * 通用守卫配置
+ * @param router
+ */
+function setupCommonGuard(router: Router) {
+  // 记录已经加载的页面
+  const loadedPaths = new Set<string>();
+
+  router.beforeEach((to) => {
+    to.meta.loaded = loadedPaths.has(to.path);
+
+    // 页面加载进度条
+    if (!to.meta.loaded && preferences.transition.progress) {
+      startProgress();
+    }
+    return true;
+  });
+
+  router.afterEach((to) => {
+    // 记录页面是否加载,如果已经加载，后续的页面切换动画等效果不在重复执行
+
+    loadedPaths.add(to.path);
+
+    // 关闭页面加载进度条
+    if (preferences.transition.progress) {
+      stopProgress();
+    }
+  });
+}
+
+/**
+ * 权限访问守卫配置
+ * @param router
+ */
+function setupAccessGuard(router: Router) {
+  router.beforeEach(async (to, from) => {
+    const accessStore = useAccessStore();
+    const userStore = useUserStore();
+    const authStore = useAuthStore();
+    const dictStore = useDictStore();
+
+    // 基本路由，这些路由不需要进入权限拦截
+    if (coreRouteNames.includes(to.name as string)) {
+      if (to.path === LOGIN_PATH && accessStore.accessToken) {
+        return decodeURIComponent(
+          (to.query?.redirect as string) ||
+            userStore.userInfo?.homePath ||
+            preferences.app.defaultHomePath,
+        );
+      }
+      return true;
+    }
+
+    // accessToken 检查
+    if (!accessStore.accessToken) {
+      // 明确声明忽略权限访问权限，则可以访问
+      if (to.meta.ignoreAccess) {
+        return true;
+      }
+
+      // 没有访问权限，跳转登录页面
+      if (to.fullPath !== LOGIN_PATH) {
+        return {
+          path: LOGIN_PATH,
+          // 如不需要，直接删除 query
+          query:
+            to.fullPath === preferences.app.defaultHomePath
+              ? {}
+              : { redirect: encodeURIComponent(to.fullPath) },
+          // 携带当前跳转的页面，登录后重新跳转该页面
+          replace: true,
+        };
+      }
+      return to;
+    }
+
+    // 是否已经生成过动态路由
+    if (accessStore.isAccessChecked) {
+      return true;
+    }
+
+    // 加载字典数据（不阻塞加载）
+    dictStore.setDictCacheByApi(getSimpleDictDataList);
+
+    // 生成路由表
+    // 当前登录用户拥有的角色标识列表
+    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({
+      roles: userRoles,
+      router,
+      // 则会在菜单中显示，但是访问会被重定向到403
+      routes: accessRoutes,
+    });
+
+    // 保存菜单信息和路由信息
+    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
+        : to.fullPath)) as string;
+
+    return {
+      ...router.resolve(decodeURIComponent(redirectPath)),
+      replace: true,
+    };
+  });
+}
+
+/**
+ * 项目守卫配置
+ * @param router
+ */
+function createRouterGuard(router: Router) {
+  /** 通用 */
+  setupCommonGuard(router);
+  /** 权限访问 */
+  setupAccessGuard(router);
+}
+
+export { createRouterGuard };
diff --git a/apps/web-tdesign/src/router/index.ts b/apps/web-tdesign/src/router/index.ts
new file mode 100644
index 000000000..5acec55ea
--- /dev/null
+++ b/apps/web-tdesign/src/router/index.ts
@@ -0,0 +1,40 @@
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router';
+
+import { resetStaticRoutes } from '@vben/utils';
+
+import { createRouterGuard } from './guard';
+import { routes } from './routes';
+import { setupBaiduTongJi } from './tongji';
+
+/**
+ *  @zh_CN 创建vue-router实例
+ */
+const router = createRouter({
+  history:
+    import.meta.env.VITE_ROUTER_HISTORY === 'hash'
+      ? createWebHashHistory(import.meta.env.VITE_BASE)
+      : createWebHistory(import.meta.env.VITE_BASE),
+  // 应该添加到路由的初始路由列表。
+  routes,
+  scrollBehavior: (to, _from, savedPosition) => {
+    if (savedPosition) {
+      return savedPosition;
+    }
+    return to.hash ? { behavior: 'smooth', el: to.hash } : { left: 0, top: 0 };
+  },
+  // 是否应该禁止尾部斜杠。
+  // strict: true,
+});
+
+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
new file mode 100644
index 000000000..22fd0017c
--- /dev/null
+++ b/apps/web-tdesign/src/router/routes/core.ts
@@ -0,0 +1,114 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
+
+import { $t } from '#/locales';
+
+const BasicLayout = () => import('#/layouts/basic.vue');
+const AuthPageLayout = () => import('#/layouts/auth.vue');
+/** 全局404页面 */
+const fallbackNotFoundRoute: RouteRecordRaw = {
+  component: () => import('#/views/_core/fallback/not-found.vue'),
+  meta: {
+    hideInBreadcrumb: true,
+    hideInMenu: true,
+    hideInTab: true,
+    title: '404',
+  },
+  name: 'FallbackNotFound',
+  path: '/:path(.*)*',
+};
+
+/** 基本路由，这些路由是必须存在的 */
+const coreRoutes: RouteRecordRaw[] = [
+  /**
+   * 根路由
+   * 使用基础布局，作为所有页面的父级容器，子级就不必配置BasicLayout。
+   * 此路由必须存在，且不应修改
+   */
+  {
+    component: BasicLayout,
+    meta: {
+      hideInBreadcrumb: true,
+      title: 'Root',
+    },
+    name: 'Root',
+    path: '/',
+    redirect: preferences.app.defaultHomePath,
+    children: [],
+  },
+  {
+    component: AuthPageLayout,
+    meta: {
+      hideInTab: true,
+      title: 'Authentication',
+    },
+    name: 'Authentication',
+    path: '/auth',
+    redirect: LOGIN_PATH,
+    children: [
+      {
+        name: 'Login',
+        path: 'login',
+        component: () => import('#/views/_core/authentication/login.vue'),
+        meta: {
+          title: $t('page.auth.login'),
+        },
+      },
+      {
+        name: 'CodeLogin',
+        path: 'code-login',
+        component: () => import('#/views/_core/authentication/code-login.vue'),
+        meta: {
+          title: $t('page.auth.codeLogin'),
+        },
+      },
+      {
+        name: 'QrCodeLogin',
+        path: 'qrcode-login',
+        component: () =>
+          import('#/views/_core/authentication/qrcode-login.vue'),
+        meta: {
+          title: $t('page.auth.qrcodeLogin'),
+        },
+      },
+      {
+        name: 'ForgetPassword',
+        path: 'forget-password',
+        component: () =>
+          import('#/views/_core/authentication/forget-password.vue'),
+        meta: {
+          title: $t('page.auth.forgetPassword'),
+        },
+      },
+      {
+        name: 'Register',
+        path: 'register',
+        component: () => import('#/views/_core/authentication/register.vue'),
+        meta: {
+          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'),
+        },
+      },
+    ],
+  },
+];
+
+export { coreRoutes, fallbackNotFoundRoute };
diff --git a/apps/web-tdesign/src/router/routes/index.ts b/apps/web-tdesign/src/router/routes/index.ts
new file mode 100644
index 000000000..738f9d3d9
--- /dev/null
+++ b/apps/web-tdesign/src/router/routes/index.ts
@@ -0,0 +1,47 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { mergeRouteModules, traverseTreeValues } from '@vben/utils';
+
+import { coreRoutes, fallbackNotFoundRoute } from './core';
+
+const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
+  eager: true,
+});
+
+// 有需要可以自行打开注释，并创建文件夹
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
+// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+
+/** 动态路由 */
+const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
+
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统(不会显示在菜单中) */
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
+// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
+const staticRoutes: RouteRecordRaw[] = [];
+const externalRoutes: RouteRecordRaw[] = [];
+
+/** 路由列表，由基本路由、外部路由和404兜底路由组成
+ *  无需走权限验证（会一直显示在菜单中） */
+const routes: RouteRecordRaw[] = [
+  ...coreRoutes,
+  ...externalRoutes,
+  fallbackNotFoundRoute,
+];
+
+/** 基本路由列表，这些路由不需要进入权限拦截 */
+const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name);
+
+/** 有权限校验的路由列表，包含动态路由和静态路由 */
+const accessRoutes = [...dynamicRoutes, ...staticRoutes];
+
+// 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/dashboard.ts b/apps/web-tdesign/src/router/routes/modules/dashboard.ts
new file mode 100644
index 000000000..5254dc65d
--- /dev/null
+++ b/apps/web-tdesign/src/router/routes/modules/dashboard.ts
@@ -0,0 +1,38 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    meta: {
+      icon: 'lucide:layout-dashboard',
+      order: -1,
+      title: $t('page.dashboard.title'),
+    },
+    name: 'Dashboard',
+    path: '/dashboard',
+    children: [
+      {
+        name: 'Analytics',
+        path: '/analytics',
+        component: () => import('#/views/dashboard/analytics/index.vue'),
+        meta: {
+          affixTab: true,
+          icon: 'lucide:area-chart',
+          title: $t('page.dashboard.analytics'),
+        },
+      },
+      {
+        name: 'Workspace',
+        path: '/workspace',
+        component: () => import('#/views/dashboard/workspace/index.vue'),
+        meta: {
+          icon: 'carbon:workspace',
+          title: $t('page.dashboard.workspace'),
+        },
+      },
+    ],
+  },
+];
+
+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/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
new file mode 100644
index 000000000..5727a5a70
--- /dev/null
+++ b/apps/web-tdesign/src/store/auth.ts
@@ -0,0 +1,157 @@
+import type { AuthPermissionInfo, Recordable, UserInfo } from '@vben/types';
+
+import type { AuthApi } from '#/api';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
+import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
+
+import { defineStore } from 'pinia';
+
+import { notification } from '#/adapter/tdesign';
+import {
+  getAuthPermissionInfoApi,
+  loginApi,
+  logoutApi,
+  register,
+  smsLogin,
+  socialLogin,
+} from '#/api';
+import { $t } from '#/locales';
+
+export const useAuthStore = defineStore('auth', () => {
+  const accessStore = useAccessStore();
+  const userStore = useUserStore();
+  const router = useRouter();
+
+  const loginLoading = ref(false);
+
+  /**
+   * 异步处理登录操作
+   * 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;
+      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.setRefreshToken(refreshToken);
+
+        // 获取用户信息并存储到 userStore、accessStore 中
+        // TODO @芋艿：清理掉 accessCodes 相关的逻辑
+        // const [fetchUserInfoResult, accessCodes] = await Promise.all([
+        //   fetchUserInfo(),
+        //   // getAccessCodesApi(),
+        // ]);
+        const fetchUserInfoResult = await fetchUserInfo();
+
+        userInfo = fetchUserInfoResult.user;
+
+        if (accessStore.loginExpired) {
+          accessStore.setLoginExpired(false);
+        } else {
+          onSuccess
+            ? await onSuccess?.()
+            : await router.push(
+                userInfo.homePath || preferences.app.defaultHomePath,
+              );
+        }
+
+        if (userInfo?.nickname) {
+          notification.success({
+            title: $t('authentication.loginSuccess'),
+            content: `${$t('authentication.loginSuccessDesc')}:${userInfo?.nickname}`,
+            duration: 3000,
+          });
+        }
+      }
+    } finally {
+      loginLoading.value = false;
+    }
+
+    return {
+      userInfo,
+    };
+  }
+
+  async function logout(redirect: boolean = true) {
+    try {
+      const accessToken = accessStore.accessToken as string;
+      if (accessToken) {
+        await logoutApi(accessToken);
+      }
+    } catch {
+      // 不做任何处理
+    }
+    resetAllStores();
+    accessStore.setLoginExpired(false);
+
+    // 回登录页带上当前路由地址
+    await router.replace({
+      path: LOGIN_PATH,
+      query: redirect
+        ? {
+            redirect: encodeURIComponent(router.currentRoute.value.fullPath),
+          }
+        : {},
+    });
+  }
+
+  async function fetchUserInfo() {
+    // 加载
+    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() {
+    loginLoading.value = false;
+  }
+
+  return {
+    $reset,
+    authLogin,
+    fetchUserInfo,
+    loginLoading,
+    logout,
+  };
+});
diff --git a/apps/web-tdesign/src/store/index.ts b/apps/web-tdesign/src/store/index.ts
new file mode 100644
index 000000000..269586ee8
--- /dev/null
+++ b/apps/web-tdesign/src/store/index.ts
@@ -0,0 +1 @@
+export * from './auth';
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/README.md b/apps/web-tdesign/src/views/_core/README.md
new file mode 100644
index 000000000..8248afe6c
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/README.md
@@ -0,0 +1,3 @@
+# \_core
+
+此目录包含应用程序正常运行所需的基本视图。这些视图是应用程序布局中使用的视图。
diff --git a/apps/web-tdesign/src/views/_core/about/index.vue b/apps/web-tdesign/src/views/_core/about/index.vue
new file mode 100644
index 000000000..0ee524335
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/about/index.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { About } from '@vben/common-ui';
+
+defineOptions({ name: 'About' });
+</script>
+
+<template>
+  <About />
+</template>
diff --git a/apps/web-tdesign/src/views/_core/authentication/code-login.vue b/apps/web-tdesign/src/views/_core/authentication/code-login.vue
new file mode 100644
index 000000000..481e3363f
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/authentication/code-login.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
+
+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 = 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: 'mobile',
+      label: $t('authentication.mobile'),
+      rules: z
+        .string()
+        .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 = 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'),
+      rules: z.string().length(CODE_LENGTH, {
+        message: $t('authentication.codeTip', [CODE_LENGTH]),
+      }),
+    },
+  ];
+});
+/**
+ * 异步处理登录操作
+ * Asynchronously handle the login process
+ * @param values 登录表单数据
+ */
+async function handleLogin(values: Recordable<any>) {
+  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"
+  />
+</template>
diff --git a/apps/web-tdesign/src/views/_core/authentication/forget-password.vue b/apps/web-tdesign/src/views/_core/authentication/forget-password.vue
new file mode 100644
index 000000000..f950b5b93
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/authentication/forget-password.vue
@@ -0,0 +1,215 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '@vben/common-ui';
+import type { Recordable } from '@vben/types';
+
+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: $t('authentication.mobile'),
+      },
+      fieldName: 'mobile',
+      label: $t('authentication.mobile'),
+      rules: z
+        .string()
+        .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'),
+    },
+  ];
+});
+
+/**
+ * 处理重置密码操作
+ * @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"
+  />
+</template>
diff --git a/apps/web-tdesign/src/views/_core/authentication/login.vue b/apps/web-tdesign/src/views/_core/authentication/login.vue
new file mode 100644
index 000000000..aa1db4c53
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/authentication/login.vue
@@ -0,0 +1,192 @@
+<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 } 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 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: 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"
+      @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/qrcode-login.vue b/apps/web-tdesign/src/views/_core/authentication/qrcode-login.vue
new file mode 100644
index 000000000..23f5f2dad
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/authentication/qrcode-login.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { AuthenticationQrCodeLogin } from '@vben/common-ui';
+import { LOGIN_PATH } from '@vben/constants';
+
+defineOptions({ name: 'QrCodeLogin' });
+</script>
+
+<template>
+  <AuthenticationQrCodeLogin :login-path="LOGIN_PATH" />
+</template>
diff --git a/apps/web-tdesign/src/views/_core/authentication/register.vue b/apps/web-tdesign/src/views/_core/authentication/register.vue
new file mode 100644
index 000000000..734f4c27d
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/authentication/register.vue
@@ -0,0 +1,221 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '@vben/common-ui';
+
+import type { AuthApi } from '#/api/core/auth';
+
+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: {
+        placeholder: $t('authentication.usernameTip'),
+      },
+      fieldName: 'username',
+      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: {
+        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'),
+    },
+    {
+      component: 'VbenCheckbox',
+      fieldName: 'agreePolicy',
+      renderComponentContent: () => ({
+        default: () =>
+          h('span', [
+            $t('authentication.agree'),
+            h(
+              'a',
+              {
+                class: 'vben-link ml-1 ',
+                href: '',
+              },
+              `${$t('authentication.privacyPolicy')} & ${$t('authentication.terms')}`,
+            ),
+          ]),
+      }),
+      rules: z.boolean().refine((value) => !!value, {
+        message: $t('authentication.agreeTip'),
+      }),
+    },
+  ];
+});
+</script>
+
+<template>
+  <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/fallback/coming-soon.vue b/apps/web-tdesign/src/views/_core/fallback/coming-soon.vue
new file mode 100644
index 000000000..f394930f2
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/fallback/coming-soon.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+</script>
+
+<template>
+  <Fallback status="coming-soon" />
+</template>
diff --git a/apps/web-tdesign/src/views/_core/fallback/forbidden.vue b/apps/web-tdesign/src/views/_core/fallback/forbidden.vue
new file mode 100644
index 000000000..8ea65fedb
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/fallback/forbidden.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'Fallback403Demo' });
+</script>
+
+<template>
+  <Fallback status="403" />
+</template>
diff --git a/apps/web-tdesign/src/views/_core/fallback/internal-error.vue b/apps/web-tdesign/src/views/_core/fallback/internal-error.vue
new file mode 100644
index 000000000..819a47d5e
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/fallback/internal-error.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'Fallback500Demo' });
+</script>
+
+<template>
+  <Fallback status="500" />
+</template>
diff --git a/apps/web-tdesign/src/views/_core/fallback/not-found.vue b/apps/web-tdesign/src/views/_core/fallback/not-found.vue
new file mode 100644
index 000000000..4d178e9cb
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/fallback/not-found.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'Fallback404Demo' });
+</script>
+
+<template>
+  <Fallback status="404" />
+</template>
diff --git a/apps/web-tdesign/src/views/_core/fallback/offline.vue b/apps/web-tdesign/src/views/_core/fallback/offline.vue
new file mode 100644
index 000000000..5de4a88de
--- /dev/null
+++ b/apps/web-tdesign/src/views/_core/fallback/offline.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'FallbackOfflineDemo' });
+</script>
+
+<template>
+  <Fallback status="offline" />
+</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/dashboard/analytics/analytics-trends.vue b/apps/web-tdesign/src/views/dashboard/analytics/analytics-trends.vue
new file mode 100644
index 000000000..f1f0b232a
--- /dev/null
+++ b/apps/web-tdesign/src/views/dashboard/analytics/analytics-trends.vue
@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    grid: {
+      bottom: 0,
+      containLabel: true,
+      left: '1%',
+      right: '1%',
+      top: '2 %',
+    },
+    series: [
+      {
+        areaStyle: {},
+        data: [
+          111, 2000, 6000, 16_000, 33_333, 55_555, 64_000, 33_333, 18_000,
+          36_000, 70_000, 42_444, 23_222, 13_000, 8000, 4000, 1200, 333, 222,
+          111,
+        ],
+        itemStyle: {
+          color: '#5ab1ef',
+        },
+        smooth: true,
+        type: 'line',
+      },
+      {
+        areaStyle: {},
+        data: [
+          33, 66, 88, 333, 3333, 6200, 20_000, 3000, 1200, 13_000, 22_000,
+          11_000, 2221, 1201, 390, 198, 60, 30, 22, 11,
+        ],
+        itemStyle: {
+          color: '#019680',
+        },
+        smooth: true,
+        type: 'line',
+      },
+    ],
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#019680',
+          width: 1,
+        },
+      },
+      trigger: 'axis',
+    },
+    // xAxis: {
+    //   axisTick: {
+    //     show: false,
+    //   },
+    //   boundaryGap: false,
+    //   data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+    //   type: 'category',
+    // },
+    xAxis: {
+      axisTick: {
+        show: false,
+      },
+      boundaryGap: false,
+      data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      splitLine: {
+        lineStyle: {
+          type: 'solid',
+          width: 1,
+        },
+        show: true,
+      },
+      type: 'category',
+    },
+    yAxis: [
+      {
+        axisTick: {
+          show: false,
+        },
+        max: 80_000,
+        splitArea: {
+          show: true,
+        },
+        splitNumber: 4,
+        type: 'value',
+      },
+    ],
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/apps/web-tdesign/src/views/dashboard/analytics/analytics-visits-data.vue b/apps/web-tdesign/src/views/dashboard/analytics/analytics-visits-data.vue
new file mode 100644
index 000000000..190fb41f4
--- /dev/null
+++ b/apps/web-tdesign/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    legend: {
+      bottom: 0,
+      data: ['访问', '趋势'],
+    },
+    radar: {
+      indicator: [
+        {
+          name: '网页',
+        },
+        {
+          name: '移动端',
+        },
+        {
+          name: 'Ipad',
+        },
+        {
+          name: '客户端',
+        },
+        {
+          name: '第三方',
+        },
+        {
+          name: '其它',
+        },
+      ],
+      radius: '60%',
+      splitNumber: 8,
+    },
+    series: [
+      {
+        areaStyle: {
+          opacity: 1,
+          shadowBlur: 0,
+          shadowColor: 'rgba(0,0,0,.2)',
+          shadowOffsetX: 0,
+          shadowOffsetY: 10,
+        },
+        data: [
+          {
+            itemStyle: {
+              color: '#b6a2de',
+            },
+            name: '访问',
+            value: [90, 50, 86, 40, 50, 20],
+          },
+          {
+            itemStyle: {
+              color: '#5ab1ef',
+            },
+            name: '趋势',
+            value: [70, 75, 70, 76, 20, 85],
+          },
+        ],
+        itemStyle: {
+          // borderColor: '#fff',
+          borderRadius: 10,
+          borderWidth: 2,
+        },
+        symbolSize: 0,
+        type: 'radar',
+      },
+    ],
+    tooltip: {},
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/apps/web-tdesign/src/views/dashboard/analytics/analytics-visits-sales.vue b/apps/web-tdesign/src/views/dashboard/analytics/analytics-visits-sales.vue
new file mode 100644
index 000000000..02f509123
--- /dev/null
+++ b/apps/web-tdesign/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    series: [
+      {
+        animationDelay() {
+          return Math.random() * 400;
+        },
+        animationEasing: 'exponentialInOut',
+        animationType: 'scale',
+        center: ['50%', '50%'],
+        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+        data: [
+          { name: '外包', value: 500 },
+          { name: '定制', value: 310 },
+          { name: '技术支持', value: 274 },
+          { name: '远程', value: 400 },
+        ].sort((a, b) => {
+          return a.value - b.value;
+        }),
+        name: '商业占比',
+        radius: '80%',
+        roseType: 'radius',
+        type: 'pie',
+      },
+    ],
+
+    tooltip: {
+      trigger: 'item',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/apps/web-tdesign/src/views/dashboard/analytics/analytics-visits-source.vue b/apps/web-tdesign/src/views/dashboard/analytics/analytics-visits-source.vue
new file mode 100644
index 000000000..0915c7af7
--- /dev/null
+++ b/apps/web-tdesign/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    legend: {
+      bottom: '2%',
+      left: 'center',
+    },
+    series: [
+      {
+        animationDelay() {
+          return Math.random() * 100;
+        },
+        animationEasing: 'exponentialInOut',
+        animationType: 'scale',
+        avoidLabelOverlap: false,
+        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+        data: [
+          { name: '搜索引擎', value: 1048 },
+          { name: '直接访问', value: 735 },
+          { name: '邮件营销', value: 580 },
+          { name: '联盟广告', value: 484 },
+        ],
+        emphasis: {
+          label: {
+            fontSize: '12',
+            fontWeight: 'bold',
+            show: true,
+          },
+        },
+        itemStyle: {
+          // borderColor: '#fff',
+          borderRadius: 10,
+          borderWidth: 2,
+        },
+        label: {
+          position: 'center',
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        name: '访问来源',
+        radius: ['40%', '65%'],
+        type: 'pie',
+      },
+    ],
+    tooltip: {
+      trigger: 'item',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/apps/web-tdesign/src/views/dashboard/analytics/analytics-visits.vue b/apps/web-tdesign/src/views/dashboard/analytics/analytics-visits.vue
new file mode 100644
index 000000000..7e0f10133
--- /dev/null
+++ b/apps/web-tdesign/src/views/dashboard/analytics/analytics-visits.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    grid: {
+      bottom: 0,
+      containLabel: true,
+      left: '1%',
+      right: '1%',
+      top: '2 %',
+    },
+    series: [
+      {
+        barMaxWidth: 80,
+        // color: '#4f69fd',
+        data: [
+          3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000,
+          3200, 4800,
+        ],
+        type: 'bar',
+      },
+    ],
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          // color: '#4f69fd',
+          width: 1,
+        },
+      },
+      trigger: 'axis',
+    },
+    xAxis: {
+      data: Array.from({ length: 12 }).map((_item, index) => `${index + 1}月`),
+      type: 'category',
+    },
+    yAxis: {
+      max: 8000,
+      splitNumber: 4,
+      type: 'value',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/apps/web-tdesign/src/views/dashboard/analytics/index.vue b/apps/web-tdesign/src/views/dashboard/analytics/index.vue
new file mode 100644
index 000000000..5e3d6d285
--- /dev/null
+++ b/apps/web-tdesign/src/views/dashboard/analytics/index.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { AnalysisOverviewItem } from '@vben/common-ui';
+import type { TabOption } from '@vben/types';
+
+import {
+  AnalysisChartCard,
+  AnalysisChartsTabs,
+  AnalysisOverview,
+} from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';
+
+import AnalyticsTrends from './analytics-trends.vue';
+import AnalyticsVisitsData from './analytics-visits-data.vue';
+import AnalyticsVisitsSales from './analytics-visits-sales.vue';
+import AnalyticsVisitsSource from './analytics-visits-source.vue';
+import AnalyticsVisits from './analytics-visits.vue';
+
+const overviewItems: AnalysisOverviewItem[] = [
+  {
+    icon: SvgCardIcon,
+    title: '用户量',
+    totalTitle: '总用户量',
+    totalValue: 120_000,
+    value: 2000,
+  },
+  {
+    icon: SvgCakeIcon,
+    title: '访问量',
+    totalTitle: '总访问量',
+    totalValue: 500_000,
+    value: 20_000,
+  },
+  {
+    icon: SvgDownloadIcon,
+    title: '下载量',
+    totalTitle: '总下载量',
+    totalValue: 120_000,
+    value: 8000,
+  },
+  {
+    icon: SvgBellIcon,
+    title: '使用量',
+    totalTitle: '总使用量',
+    totalValue: 50_000,
+    value: 5000,
+  },
+];
+
+const chartTabs: TabOption[] = [
+  {
+    label: '流量趋势',
+    value: 'trends',
+  },
+  {
+    label: '月访问量',
+    value: 'visits',
+  },
+];
+</script>
+
+<template>
+  <div class="p-5">
+    <AnalysisOverview :items="overviewItems" />
+    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
+      <template #trends>
+        <AnalyticsTrends />
+      </template>
+      <template #visits>
+        <AnalyticsVisits />
+      </template>
+    </AnalysisChartsTabs>
+
+    <div class="mt-5 w-full md:flex">
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问数量">
+        <AnalyticsVisitsData />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问来源">
+        <AnalyticsVisitsSource />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
+        <AnalyticsVisitsSales />
+      </AnalysisChartCard>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-tdesign/src/views/dashboard/workspace/index.vue b/apps/web-tdesign/src/views/dashboard/workspace/index.vue
new file mode 100644
index 000000000..b95d61381
--- /dev/null
+++ b/apps/web-tdesign/src/views/dashboard/workspace/index.vue
@@ -0,0 +1,266 @@
+<script lang="ts" setup>
+import type {
+  WorkbenchProjectItem,
+  WorkbenchQuickNavItem,
+  WorkbenchTodoItem,
+  WorkbenchTrendItem,
+} from '@vben/common-ui';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import {
+  AnalysisChartCard,
+  WorkbenchHeader,
+  WorkbenchProject,
+  WorkbenchQuickNav,
+  WorkbenchTodo,
+  WorkbenchTrends,
+} from '@vben/common-ui';
+import { preferences } from '@vben/preferences';
+import { useUserStore } from '@vben/stores';
+import { openWindow } from '@vben/utils';
+
+import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';
+
+const userStore = useUserStore();
+
+// 这是一个示例数据，实际项目中需要根据实际情况进行调整
+// url 也可以是内部路由，在 navTo 方法中识别处理，进行内部跳转
+// 例如：url: /dashboard/workspace
+const projectItems: WorkbenchProjectItem[] = [
+  {
+    color: '',
+    content: '不要等待机会，而要创造机会。',
+    date: '2021-04-01',
+    group: '开源组',
+    icon: 'carbon:logo-github',
+    title: 'Github',
+    url: 'https://github.com',
+  },
+  {
+    color: '#3fb27f',
+    content: '现在的你决定将来的你。',
+    date: '2021-04-01',
+    group: '算法组',
+    icon: 'ion:logo-vue',
+    title: 'Vue',
+    url: 'https://vuejs.org',
+  },
+  {
+    color: '#e18525',
+    content: '没有什么才能比努力更重要。',
+    date: '2021-04-01',
+    group: '上班摸鱼',
+    icon: 'ion:logo-html5',
+    title: 'Html5',
+    url: 'https://developer.mozilla.org/zh-CN/docs/Web/HTML',
+  },
+  {
+    color: '#bf0c2c',
+    content: '热情和欲望可以突破一切难关。',
+    date: '2021-04-01',
+    group: 'UI',
+    icon: 'ion:logo-angular',
+    title: 'Angular',
+    url: 'https://angular.io',
+  },
+  {
+    color: '#00d8ff',
+    content: '健康的身体是实现目标的基石。',
+    date: '2021-04-01',
+    group: '技术牛',
+    icon: 'bx:bxl-react',
+    title: 'React',
+    url: 'https://reactjs.org',
+  },
+  {
+    color: '#EBD94E',
+    content: '路是走出来的，而不是空想出来的。',
+    date: '2021-04-01',
+    group: '架构组',
+    icon: 'ion:logo-javascript',
+    title: 'Js',
+    url: 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript',
+  },
+];
+
+// 同样，这里的 url 也可以使用以 http 开头的外部链接
+const quickNavItems: WorkbenchQuickNavItem[] = [
+  {
+    color: '#1fdaca',
+    icon: 'ion:home-outline',
+    title: '首页',
+    url: '/',
+  },
+  {
+    color: '#bf0c2c',
+    icon: 'ion:grid-outline',
+    title: '仪表盘',
+    url: '/dashboard',
+  },
+  {
+    color: '#e18525',
+    icon: 'ion:layers-outline',
+    title: '组件',
+    url: '/demos/features/icons',
+  },
+  {
+    color: '#3fb27f',
+    icon: 'ion:settings-outline',
+    title: '系统管理',
+    url: '/demos/features/login-expired', // 这里的 URL 是示例，实际项目中需要根据实际情况进行调整
+  },
+  {
+    color: '#4daf1bc9',
+    icon: 'ion:key-outline',
+    title: '权限管理',
+    url: '/demos/access/page-control',
+  },
+  {
+    color: '#00d8ff',
+    icon: 'ion:bar-chart-outline',
+    title: '图表',
+    url: '/analytics',
+  },
+];
+
+const todoItems = ref<WorkbenchTodoItem[]>([
+  {
+    completed: false,
+    content: `审查最近提交到Git仓库的前端代码，确保代码质量和规范。`,
+    date: '2024-07-30 11:00:00',
+    title: '审查前端代码提交',
+  },
+  {
+    completed: true,
+    content: `检查并优化系统性能，降低CPU使用率。`,
+    date: '2024-07-30 11:00:00',
+    title: '系统性能优化',
+  },
+  {
+    completed: false,
+    content: `进行系统安全检查，确保没有安全漏洞或未授权的访问。 `,
+    date: '2024-07-30 11:00:00',
+    title: '安全检查',
+  },
+  {
+    completed: false,
+    content: `更新项目中的所有npm依赖包，确保使用最新版本。`,
+    date: '2024-07-30 11:00:00',
+    title: '更新项目依赖',
+  },
+  {
+    completed: false,
+    content: `修复用户报告的页面UI显示问题，确保在不同浏览器中显示一致。 `,
+    date: '2024-07-30 11:00:00',
+    title: '修复UI显示问题',
+  },
+]);
+const trendItems: WorkbenchTrendItem[] = [
+  {
+    avatar: 'svg:avatar-1',
+    content: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
+    date: '刚刚',
+    title: '威廉',
+  },
+  {
+    avatar: 'svg:avatar-2',
+    content: `关注了 <a>威廉</a> `,
+    date: '1个小时前',
+    title: '艾文',
+  },
+  {
+    avatar: 'svg:avatar-3',
+    content: `发布了 <a>个人动态</a> `,
+    date: '1天前',
+    title: '克里斯',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: `发表文章 <a>如何编写一个Vite插件</a> `,
+    date: '2天前',
+    title: 'Vben',
+  },
+  {
+    avatar: 'svg:avatar-1',
+    content: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
+    date: '3天前',
+    title: '皮特',
+  },
+  {
+    avatar: 'svg:avatar-2',
+    content: `关闭了问题 <a>如何运行项目</a> `,
+    date: '1周前',
+    title: '杰克',
+  },
+  {
+    avatar: 'svg:avatar-3',
+    content: `发布了 <a>个人动态</a> `,
+    date: '1周前',
+    title: '威廉',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: `推送了代码到 <a>Github</a>`,
+    date: '2021-04-01 20:00',
+    title: '威廉',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: `发表文章 <a>如何编写使用 Admin Vben</a> `,
+    date: '2021-03-01 20:00',
+    title: 'Vben',
+  },
+];
+
+const router = useRouter();
+
+// 这是一个示例方法，实际项目中需要根据实际情况进行调整
+// This is a sample method, adjust according to the actual project requirements
+function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
+  if (nav.url?.startsWith('http')) {
+    openWindow(nav.url);
+    return;
+  }
+  if (nav.url?.startsWith('/')) {
+    router.push(nav.url).catch((error) => {
+      console.error('Navigation failed:', error);
+    });
+  } else {
+    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
+  }
+}
+</script>
+
+<template>
+  <div class="p-5">
+    <WorkbenchHeader
+      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
+    >
+      <template #title>
+        早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
+      </template>
+      <template #description> 今日晴，20℃ - 32℃！ </template>
+    </WorkbenchHeader>
+
+    <div class="mt-5 flex flex-col lg:flex-row">
+      <div class="mr-4 w-full lg:w-3/5">
+        <WorkbenchProject :items="projectItems" title="项目" @click="navTo" />
+        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
+      </div>
+      <div class="w-full lg:w-2/5">
+        <WorkbenchQuickNav
+          :items="quickNavItems"
+          class="mt-5 lg:mt-0"
+          title="快捷导航"
+          @click="navTo"
+        />
+        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
+        <AnalysisChartCard class="mt-5" title="访问来源">
+          <AnalyticsVisitsSource />
+        </AnalysisChartCard>
+      </div>
+    </div>
+  </div>
+</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/tailwind.config.mjs b/apps/web-tdesign/tailwind.config.mjs
new file mode 100644
index 000000000..f17f556fa
--- /dev/null
+++ b/apps/web-tdesign/tailwind.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';
diff --git a/apps/web-tdesign/tsconfig.json b/apps/web-tdesign/tsconfig.json
new file mode 100644
index 000000000..02c287fe6
--- /dev/null
+++ b/apps/web-tdesign/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web-app.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "#/*": ["./src/*"]
+    }
+  },
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/apps/web-tdesign/tsconfig.node.json b/apps/web-tdesign/tsconfig.node.json
new file mode 100644
index 000000000..c2f0d86cc
--- /dev/null
+++ b/apps/web-tdesign/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "noEmit": false
+  },
+  "include": ["vite.config.mts"]
+}
diff --git a/apps/web-tdesign/vite.config.mts b/apps/web-tdesign/vite.config.mts
new file mode 100644
index 000000000..71ae65bb5
--- /dev/null
+++ b/apps/web-tdesign/vite.config.mts
@@ -0,0 +1,20 @@
+import { defineConfig } from '@vben/vite-config';
+
+export default defineConfig(async () => {
+  return {
+    application: {},
+    vite: {
+      server: {
+        proxy: {
+          '/admin-api': {
+            changeOrigin: true,
+            rewrite: (path) => path.replace(/^\/admin-api/, ''),
+            // mock代理目标地址
+            target: 'http://localhost:48080/admin-api',
+            ws: true,
+          },
+        },
+      },
+    },
+  };
+});
diff --git a/cspell.json b/cspell.json
index 325df9358..ce570510f 100644
--- a/cspell.json
+++ b/cspell.json
@@ -46,6 +46,7 @@
     "prefixs",
     "publint",
     "qrcode",
+    "reka",
     "rollup",
     "shadcn",
     "sonner",
diff --git a/docs/src/en/guide/essentials/development.md b/docs/src/en/guide/essentials/development.md
index 9ff832b7b..437810f7a 100644
--- a/docs/src/en/guide/essentials/development.md
+++ b/docs/src/en/guide/essentials/development.md
@@ -60,6 +60,8 @@ The execution command is: `pnpm run [script]` or `npm run [script]`.
     "build:ele": "pnpm run build --filter=@vben/web-ele",
     // Build the web-naive application separately
     "build:naive": "pnpm run build --filter=@vben/naive",
+    // Build the web-tdesign application separately
+    "build:tdesign": "pnpm run build --filter=@vben/web-tdesign",
     // Build the playground application separately
     "build:play": "pnpm run build --filter=@vben/playground",
     // Changeset version management
diff --git a/docs/src/en/guide/introduction/thin.md b/docs/src/en/guide/introduction/thin.md
index a310ef398..7ca0468da 100644
--- a/docs/src/en/guide/introduction/thin.md
+++ b/docs/src/en/guide/introduction/thin.md
@@ -56,6 +56,7 @@ After slimming down, you may need to adjust commands according to your project.
     "build:docs": "pnpm run build --filter=@vben/docs",
     "build:ele": "pnpm run build --filter=@vben/web-ele",
     "build:naive": "pnpm run build --filter=@vben/web-naive",
+    "build:tdesign": "pnpm run build --filter=@vben/web-tdesign",
     "build:play": "pnpm run build --filter=@vben/playground",
     "dev:antd": "pnpm -F @vben/web-antd run dev",
     "dev:docs": "pnpm -F @vben/docs run dev",
diff --git a/docs/src/guide/essentials/development.md b/docs/src/guide/essentials/development.md
index cb55b6b5c..7f4e5107c 100644
--- a/docs/src/guide/essentials/development.md
+++ b/docs/src/guide/essentials/development.md
@@ -60,6 +60,8 @@ npm 脚本是项目常见的配置，用于执行一些常见的任务，比如
     "build:ele": "pnpm run build --filter=@vben/web-ele",
     // 单独构建 web-naive 应用
     "build:naive": "pnpm run build --filter=@vben/naive",
+    // 单独构建 web-tdesign 应用
+    "build:tdesign": "pnpm run build --filter=@vben/web-tdesign",
     // 单独构建 playground 应用
     "build:play": "pnpm run build --filter=@vben/playground",
     // changeset 版本管理
diff --git a/docs/src/guide/introduction/thin.md b/docs/src/guide/introduction/thin.md
index 808840058..157d51ffc 100644
--- a/docs/src/guide/introduction/thin.md
+++ b/docs/src/guide/introduction/thin.md
@@ -60,6 +60,7 @@ pnpm install
     "build:docs": "pnpm run build --filter=@vben/docs",
     "build:ele": "pnpm run build --filter=@vben/web-ele",
     "build:naive": "pnpm run build --filter=@vben/web-naive",
+    "build:tdesign": "pnpm run build --filter=@vben/web-tdesign",
     "build:play": "pnpm run build --filter=@vben/playground",
     "dev:antd": "pnpm -F @vben/web-antd run dev",
     "dev:docs": "pnpm -F @vben/docs run dev",
diff --git a/internal/tailwind-config/src/index.ts b/internal/tailwind-config/src/index.ts
index 93332a3f4..8bbf1f6ec 100644
--- a/internal/tailwind-config/src/index.ts
+++ b/internal/tailwind-config/src/index.ts
@@ -175,18 +175,18 @@ export default {
       keyframes: {
         'accordion-down': {
           from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 'var(--reka-accordion-content-height)' },
         },
         'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
+          from: { height: 'var(--reka-accordion-content-height)' },
           to: { height: '0' },
         },
         'collapsible-down': {
           from: { height: '0' },
-          to: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 'var(--reka-collapsible-content-height)' },
         },
         'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
+          from: { height: 'var(--reka-collapsible-content-height)' },
           to: { height: '0' },
         },
         float: {
diff --git a/package.json b/package.json
index 0745b1137..1fa7eb49f 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "build:docs": "pnpm run build --filter=@vben/docs",
     "build:ele": "pnpm run build --filter=@vben/web-ele",
     "build:naive": "pnpm run build --filter=@vben/web-naive",
+    "build:tdesign": "pnpm run build --filter=@vben/web-tdesign",
     "build:play": "pnpm run build --filter=@vben/playground",
     "changeset": "pnpm exec changeset",
     "check": "pnpm run check:circular && pnpm run check:dep && pnpm run check:type && pnpm check:cspell",
@@ -46,6 +47,7 @@
     "dev:docs": "pnpm -F @vben/docs run dev",
     "dev:ele": "pnpm -F @vben/web-ele run dev",
     "dev:naive": "pnpm -F @vben/web-naive run dev",
+    "dev:tdesign": "pnpm -F @vben/web-tdesign run dev",
     "dev:play": "pnpm -F @vben/playground run dev",
     "format": "vsh lint --format",
     "lint": "vsh lint",
diff --git a/packages/@core/base/shared/src/constants/vben.ts b/packages/@core/base/shared/src/constants/vben.ts
index 777768852..da513da16 100644
--- a/packages/@core/base/shared/src/constants/vben.ts
+++ b/packages/@core/base/shared/src/constants/vben.ts
@@ -27,3 +27,5 @@ export const VBEN_ELE_PREVIEW_URL = 'https://ele.vben.pro';
 export const VBEN_NAIVE_PREVIEW_URL = 'https://naive.vben.pro';
 
 export const VBEN_ANT_PREVIEW_URL = 'https://ant.vben.pro';
+
+export const VBEN_TD_PREVIEW_URL = 'https://tdesign.vben.pro';
diff --git a/packages/@core/base/shared/src/utils/date.ts b/packages/@core/base/shared/src/utils/date.ts
index f77b824a9..2f53041f1 100644
--- a/packages/@core/base/shared/src/utils/date.ts
+++ b/packages/@core/base/shared/src/utils/date.ts
@@ -7,7 +7,19 @@ dayjs.extend(timezone);
 
 type FormatDate = Date | dayjs.Dayjs | number | string;
 
-export function formatDate(time: FormatDate, format = 'YYYY-MM-DD') {
+type Format =
+  | 'HH'
+  | 'HH:mm'
+  | 'HH:mm:ss'
+  | 'YYYY'
+  | 'YYYY-MM'
+  | 'YYYY-MM-DD'
+  | 'YYYY-MM-DD HH'
+  | 'YYYY-MM-DD HH:mm'
+  | 'YYYY-MM-DD HH:mm:ss'
+  | (string & {});
+
+export function formatDate(time?: FormatDate, format: Format = 'YYYY-MM-DD') {
   try {
     const date = dayjs.isDayjs(time) ? time : dayjs(time);
     if (!date.isValid()) {
@@ -16,11 +28,11 @@ export function formatDate(time: FormatDate, format = 'YYYY-MM-DD') {
     return date.tz().format(format);
   } catch (error) {
     console.error(`Error formatting date: ${error}`);
-    return String(time);
+    return String(time ?? '');
   }
 }
 
-export function formatDateTime(time: FormatDate) {
+export function formatDateTime(time?: FormatDate) {
   return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
 }
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
index dc84a18ac..e12729a4e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -13,7 +13,7 @@ export interface VbenButtonProps {
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    *
-   * Read our [Composition](https://www.radix-vue.com/guides/composition.html) guide for more details.
+   * Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
    */
   asChild?: boolean;
   class?: any;
diff --git a/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts b/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
index dc2f70ece..aef32dfa4 100644
--- a/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
+++ b/packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts
@@ -59,7 +59,7 @@ export function useTabsViewScroll(props: TabsProps) {
     }
 
     const viewportEl = scrollbarEl?.querySelector(
-      'div[data-radix-scroll-area-viewport]',
+      'div[data-reka-scroll-area-viewport]',
     );
 
     scrollViewportEl.value = viewportEl;
diff --git a/packages/icons/src/svg/icons/tdesign-logo.svg b/packages/icons/src/svg/icons/tdesign-logo.svg
new file mode 100644
index 000000000..bdbba5cd9
--- /dev/null
+++ b/packages/icons/src/svg/icons/tdesign-logo.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <rect id="b1" x="0" y="0" width="32" height="32" style="fill:none;"/>
+    <g id="b11" serif:id="b1">
+        <g>
+            <g transform="matrix(1.155236,0,0,1.133743,3.49525,-0.501586)">
+                <path d="M7.972,26.181L3.28,26.181C3.203,26.181 3.126,26.165 3.055,26.132C2.984,26.1 2.921,26.053 2.87,25.994C2.819,25.936 2.782,25.867 2.76,25.792C2.737,25.718 2.732,25.639 2.742,25.562L3.656,20.403L9.441,20.403L8.498,25.748C8.473,25.869 8.407,25.978 8.311,26.057C8.216,26.136 8.096,26.18 7.972,26.181Z" style="fill:rgb(0,155,255);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(1.155236,0,0,1.133743,3.49525,-0.501586)">
+                <clipPath id="_clip1">
+                    <path d="M21.178,8.787L5.698,8.787L6.716,3.002L21.988,3.002C22.071,2.994 22.156,3.006 22.234,3.037C22.312,3.067 22.382,3.115 22.439,3.178C22.495,3.24 22.536,3.315 22.558,3.396C22.58,3.477 22.583,3.562 22.566,3.645L21.71,8.353C21.687,8.477 21.621,8.588 21.523,8.667C21.426,8.747 21.303,8.789 21.178,8.787Z" clip-rule="nonzero"/>
+                </clipPath>
+                <g clip-path="url(#_clip1)">
+                    <g transform="matrix(0.865624,-0,-0,0.882034,-3.025571,0.442416)">
+                        <use xlink:href="#_Image2" x="10.078" y="2.9" width="20px" height="7px"/>
+                    </g>
+                </g>
+            </g>
+            <g transform="matrix(1.155236,0,0,1.133743,3.49525,-0.501586)">
+                <path d="M5.698,8.787L0.55,8.787C0.471,8.788 0.393,8.772 0.321,8.739C0.249,8.707 0.185,8.66 0.134,8.6C0.082,8.541 0.044,8.471 0.022,8.395C-0,8.32 -0.006,8.24 0.006,8.162L0.845,3.448C0.868,3.323 0.933,3.211 1.031,3.129C1.128,3.048 1.25,3.003 1.377,3.002L6.716,3.002L5.698,8.787Z" style="fill:rgb(0,100,255);fill-rule:nonzero;"/>
+            </g>
+            <g transform="matrix(1.155236,0,0,1.133743,3.49525,-0.501586)">
+                <clipPath id="_clip3">
+                    <path d="M9.447,20.385L3.65,20.385L5.698,8.799L11.494,8.799L9.447,20.385Z" clip-rule="nonzero"/>
+                </clipPath>
+                <g clip-path="url(#_clip3)">
+                    <g transform="matrix(0.865624,-0,-0,0.882034,-3.025571,0.442416)">
+                        <use xlink:href="#_Image4" x="7.712" y="9.474" width="10px" height="14px"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+    <defs>
+        <image id="_Image2" width="20px" height="7px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAsUlEQVQokW2R267CMAwEB/7/RxGoXFrKoSS7PMQJrnQSrZKn8dg+nGwDLJq468zsC7MmFk8svrLqxtN3Vj14eeHPM2+vvL2y8eLjjeINUTHiCGBMpSAK1RURcX6FaW/7i+bS084RaKCIelwCrKhef6AB7Zc9sLpZZLvK3i7DesBhybBswJ1dAqcCRsjdK9s5hpZbdkkzLAMyYO6w+O9w+t9Qzgspv1bTQka7jnYDlqf4BQuSDbEWXdA2AAAAAElFTkSuQmCC"/>
+        <image id="_Image4" width="10px" height="14px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAOCAYAAAAWo42rAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAR0lEQVQokZ2PQQrAIAwEx5L/3/ys2qbXglRGc1sYZjeFmom4oBkMgqaEO8ZuwfFJixVBtxuPqhf1M/hrfASVENzW6J7mchi89l8Tj8VznSAAAAAASUVORK5CYII="/>
+    </defs>
+</svg>
diff --git a/packages/icons/src/svg/index.ts b/packages/icons/src/svg/index.ts
index 00fe7e65d..1e81686c6 100644
--- a/packages/icons/src/svg/index.ts
+++ b/packages/icons/src/svg/index.ts
@@ -16,6 +16,7 @@ const SvgGoogleIcon = createIconifyIcon('svg:google');
 const SvgQQChatIcon = createIconifyIcon('svg:qqchat');
 const SvgWeChatIcon = createIconifyIcon('svg:wechat');
 const SvgDingDingIcon = createIconifyIcon('svg:dingding');
+const SvgTDesignIcon = createIconifyIcon('svg:tdesign-logo');
 
 /** AI */
 const SvgGptIcon = createIconifyIcon('svg:gpt');
@@ -65,6 +66,7 @@ export {
   SvgGptIcon,
   SvgMockIcon,
   SvgQQChatIcon,
+  SvgTDesignIcon,
   SvgWalletIcon,
   SvgWeChatIcon,
   SvgWxAppIcon,
diff --git a/packages/locales/src/i18n.ts b/packages/locales/src/i18n.ts
index e3c75bde6..6378f2c59 100644
--- a/packages/locales/src/i18n.ts
+++ b/packages/locales/src/i18n.ts
@@ -108,7 +108,7 @@ async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
 
   // 在控制台打印警告
   i18n.global.setMissingHandler((locale, key) => {
-    if (options.missingWarn && key.includes('.')) {
+    if (options.missingWarn && key !== 'OAuth 2.0' && key.includes('.')) {
       console.warn(
         `[intlify] Not found '${key}' key in '${locale}' locale messages.`,
       );
diff --git a/playground/src/api/request.ts b/playground/src/api/request.ts
index e741552dd..a88553613 100644
--- a/playground/src/api/request.ts
+++ b/playground/src/api/request.ts
@@ -29,11 +29,15 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
     baseURL,
     transformResponse: (data: any, header: AxiosResponseHeaders) => {
       // storeAsString指示将BigInt存储为字符串，设为false则会存储为内置的BigInt类型
-      return header.getContentType()?.toString().includes('application/json')
-        ? cloneDeep(
-            JSONBigInt({ storeAsString: true, strict: true }).parse(data),
-          )
-        : data;
+      if (
+        header.getContentType()?.toString().includes('application/json') &&
+        typeof data === 'string'
+      ) {
+        return cloneDeep(
+          JSONBigInt({ storeAsString: true, strict: true }).parse(data),
+        );
+      }
+      return data;
     },
   });
 
diff --git a/playground/src/locales/langs/en-US/demos.json b/playground/src/locales/langs/en-US/demos.json
index 44b12780e..8697ea3c6 100644
--- a/playground/src/locales/langs/en-US/demos.json
+++ b/playground/src/locales/langs/en-US/demos.json
@@ -65,6 +65,7 @@
     "document": "Document",
     "antdv": "Ant Design Vue Version",
     "naive-ui": "Naive UI Version",
-    "element-plus": "Element Plus Version"
+    "element-plus": "Element Plus Version",
+    "tdesign": "TDesign Vue Version"
   }
 }
diff --git a/playground/src/locales/langs/zh-CN/demos.json b/playground/src/locales/langs/zh-CN/demos.json
index 5cd87ce56..b7823b72e 100644
--- a/playground/src/locales/langs/zh-CN/demos.json
+++ b/playground/src/locales/langs/zh-CN/demos.json
@@ -66,6 +66,7 @@
     "document": "文档",
     "antdv": "Ant Design Vue 版本",
     "naive-ui": "Naive UI 版本",
-    "element-plus": "Element Plus 版本"
+    "element-plus": "Element Plus 版本",
+    "tdesign": "TDesign Vue 版本"
   }
 }
diff --git a/playground/src/router/routes/modules/vben.ts b/playground/src/router/routes/modules/vben.ts
index ec44d58ab..1c1777980 100644
--- a/playground/src/router/routes/modules/vben.ts
+++ b/playground/src/router/routes/modules/vben.ts
@@ -7,8 +7,9 @@ import {
   VBEN_GITHUB_URL,
   VBEN_LOGO_URL,
   VBEN_NAIVE_PREVIEW_URL,
+  VBEN_TD_PREVIEW_URL,
 } from '@vben/constants';
-import { SvgAntdvLogoIcon } from '@vben/icons';
+import { SvgAntdvLogoIcon, SvgTDesignIcon } from '@vben/icons';
 
 import { IFrameView } from '#/layouts';
 import { $t } from '#/locales';
@@ -77,6 +78,17 @@ const routes: RouteRecordRaw[] = [
           title: $t('demos.vben.element-plus'),
         },
       },
+      {
+        name: 'VbenTDesign',
+        path: '/vben-admin/tdesign',
+        component: IFrameView,
+        meta: {
+          badgeType: 'dot',
+          icon: SvgTDesignIcon,
+          link: VBEN_TD_PREVIEW_URL,
+          title: $t('demos.vben.tdesign'),
+        },
+      },
     ],
   },
   {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4ae2e0939..a92a95f32 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,7 +44,11 @@ catalogs:
       version: 3.2.31
     '@iconify/json':
       specifier: ^2.2.354
+<<<<<<< HEAD
       version: 2.2.398
+=======
+      version: 2.2.405
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     '@iconify/tailwind':
       specifier: ^1.2.0
       version: 1.2.0
@@ -74,7 +78,7 @@ catalogs:
       version: 1.56.1
     '@pnpm/workspace.read-manifest':
       specifier: ^1000.2.0
-      version: 1000.2.5
+      version: 1000.2.6
     '@stylistic/stylelint-plugin':
       specifier: ^3.1.3
       version: 3.1.3
@@ -159,6 +163,9 @@ catalogs:
     '@vee-validate/zod':
       specifier: ^4.15.1
       version: 4.15.1
+    '@videojs-player/vue':
+      specifier: ^1.0.0
+      version: 1.0.0
     '@vite-pwa/vitepress':
       specifier: ^1.0.0
       version: 1.0.1
@@ -170,7 +177,11 @@ catalogs:
       version: 5.1.1
     '@vue/shared':
       specifier: ^3.5.17
+<<<<<<< HEAD
       version: 3.5.22
+=======
+      version: 3.5.24
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     '@vue/test-utils':
       specifier: ^2.4.6
       version: 2.4.6
@@ -201,6 +212,9 @@ catalogs:
     axios-mock-adapter:
       specifier: ^2.1.0
       version: 2.1.0
+    benz-amr-recorder:
+      specifier: ^1.1.5
+      version: 1.1.5
     bpmn-js:
       specifier: ^17.11.1
       version: 17.11.1
@@ -233,7 +247,7 @@ catalogs:
       version: 5.65.20
     commitlint-plugin-function-rules:
       specifier: ^4.0.2
-      version: 4.1.0
+      version: 4.1.1
     consola:
       specifier: ^3.4.2
       version: 3.4.2
@@ -470,7 +484,7 @@ catalogs:
       version: 6.0.1
     rollup:
       specifier: ^4.44.1
-      version: 4.52.5
+      version: 4.53.1
     rollup-plugin-visualizer:
       specifier: ^5.14.0
       version: 5.14.0
@@ -546,9 +560,16 @@ catalogs:
     vee-validate:
       specifier: ^4.15.1
       version: 4.15.1
+    video.js:
+      specifier: ^7.21.6
+      version: 7.21.7
     vite:
       specifier: ^7.1.2
+<<<<<<< HEAD
       version: 7.1.11
+=======
+      version: 7.2.2
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     vite-plugin-compression:
       specifier: ^0.5.1
       version: 0.5.1
@@ -597,6 +618,9 @@ catalogs:
     vue-tsc:
       specifier: 2.2.10
       version: 2.2.10
+    vue3-print-nb:
+      specifier: ^0.1.4
+      version: 0.1.4
     vue3-signature:
       specifier: ^0.2.4
       version: 0.2.4
@@ -605,10 +629,17 @@ catalogs:
       version: 4.1.0
     vxe-pc-ui:
       specifier: ^4.9.29
+<<<<<<< HEAD
       version: 4.10.5
     vxe-table:
       specifier: ^4.16.11
       version: 4.17.0
+=======
+      version: 4.10.18
+    vxe-table:
+      specifier: ^4.16.11
+      version: 4.17.12
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     watermark-js-plus:
       specifier: ^1.6.2
       version: 1.6.3
@@ -672,10 +703,17 @@ importers:
         version: link:scripts/vsh
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 6.0.1(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       '@vitejs/plugin-vue-jsx':
         specifier: 'catalog:'
         version: 5.1.1(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 6.0.1(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.24(typescript@5.9.3))
+      '@vitejs/plugin-vue-jsx':
+        specifier: 'catalog:'
+        version: 5.1.1(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@vue/test-utils':
         specifier: 'catalog:'
         version: 2.4.6
@@ -714,16 +752,27 @@ importers:
         version: 5.9.3
       unbuild:
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 3.6.1(sass@1.93.2)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
       vite:
         specifier: 'catalog:'
         version: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+=======
+        version: 3.6.1(sass@1.93.3)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.24(typescript@5.9.3))
+      vite:
+        specifier: 'catalog:'
+        version: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       vitest:
         specifier: 'catalog:'
         version: 3.2.4(@types/node@24.10.0)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vue:
         specifier: ^3.5.17
+<<<<<<< HEAD
         version: 3.5.22(typescript@5.9.3)
+=======
+        version: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       vue-tsc:
         specifier: 'catalog:'
         version: 2.2.10(typescript@5.9.3)
@@ -751,6 +800,7 @@ importers:
     dependencies:
       '@form-create/ant-design-vue':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 3.2.31(vue@3.5.22(typescript@5.9.3))
       '@form-create/antd-designer':
         specifier: 'catalog:'
@@ -758,6 +808,15 @@ importers:
       '@tinymce/tinymce-vue':
         specifier: 'catalog:'
         version: 6.3.0(tinymce@7.9.1)(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 3.2.32(vue@3.5.24(typescript@5.9.3))
+      '@form-create/antd-designer':
+        specifier: 'catalog:'
+        version: 3.3.2(vue@3.5.24(typescript@5.9.3))
+      '@tinymce/tinymce-vue':
+        specifier: 'catalog:'
+        version: 6.3.0(tinymce@7.9.1)(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@vben/access':
         specifier: workspace:*
         version: link:../../packages/effects/access
@@ -801,6 +860,7 @@ importers:
         specifier: workspace:*
         version: link:../../packages/utils
       '@videojs-player/vue':
+<<<<<<< HEAD
         specifier: ^1.0.0
         version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.7)(vue@3.5.22(typescript@5.9.3))
       '@vueuse/components':
@@ -817,6 +877,21 @@ importers:
         version: 4.2.6(vue@3.5.22(typescript@5.9.3))
       benz-amr-recorder:
         specifier: ^1.1.5
+=======
+        specifier: 'catalog:'
+        version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.7)(vue@3.5.24(typescript@5.9.3))
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      '@vueuse/integrations':
+        specifier: 'catalog:'
+        version: 14.0.0(async-validator@4.2.5)(axios@1.13.2)(focus-trap@7.6.6)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.24(typescript@5.9.3))
+      ant-design-vue:
+        specifier: 'catalog:'
+        version: 4.2.6(vue@3.5.24(typescript@5.9.3))
+      benz-amr-recorder:
+        specifier: 'catalog:'
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
         version: 1.1.5
       bpmn-js:
         specifier: 'catalog:'
@@ -847,7 +922,11 @@ importers:
         version: 11.11.1
       pinia:
         specifier: ^3.0.3
+<<<<<<< HEAD
         version: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       steady-xml:
         specifier: 'catalog:'
         version: 0.1.0
@@ -855,6 +934,7 @@ importers:
         specifier: 'catalog:'
         version: 7.9.1
       video.js:
+<<<<<<< HEAD
         specifier: ^7.21.5
         version: 7.21.7
       vue:
@@ -872,11 +952,34 @@ importers:
       vuedraggable:
         specifier: 'catalog:'
         version: 4.1.0(vue@3.5.22(typescript@5.9.3))
+=======
+        specifier: 'catalog:'
+        version: 7.21.7
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+      vue-dompurify-html:
+        specifier: 'catalog:'
+        version: 5.3.0(vue@3.5.24(typescript@5.9.3))
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+      vue3-print-nb:
+        specifier: 'catalog:'
+        version: 0.1.4(typescript@5.9.3)
+      vue3-signature:
+        specifier: 'catalog:'
+        version: 0.2.4(vue@3.5.24(typescript@5.9.3))
+      vuedraggable:
+        specifier: 'catalog:'
+        version: 4.1.0(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   apps/web-ele:
     dependencies:
       '@form-create/designer':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 3.3.1(vue@3.5.22(typescript@5.9.3))
       '@form-create/element-ui':
         specifier: 'catalog:'
@@ -884,6 +987,15 @@ importers:
       '@tinymce/tinymce-vue':
         specifier: 'catalog:'
         version: 6.3.0(tinymce@7.9.1)(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 3.3.1(vue@3.5.24(typescript@5.9.3))
+      '@form-create/element-ui':
+        specifier: 'catalog:'
+        version: 3.2.32(vue@3.5.24(typescript@5.9.3))
+      '@tinymce/tinymce-vue':
+        specifier: 'catalog:'
+        version: 6.3.0(tinymce@7.9.1)(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@vben/access':
         specifier: workspace:*
         version: link:../../packages/effects/access
@@ -926,12 +1038,25 @@ importers:
       '@vben/utils':
         specifier: workspace:*
         version: link:../../packages/utils
+      '@videojs-player/vue':
+        specifier: 'catalog:'
+        version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.7)(vue@3.5.24(typescript@5.9.3))
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
       '@vueuse/integrations':
         specifier: 'catalog:'
         version: 14.0.0(async-validator@4.2.5)(axios@1.12.2)(focus-trap@7.6.5)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      '@vueuse/integrations':
+        specifier: 'catalog:'
+        version: 14.0.0(async-validator@4.2.5)(axios@1.13.2)(focus-trap@7.6.6)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.24(typescript@5.9.3))
+      benz-amr-recorder:
+        specifier: 'catalog:'
+        version: 1.1.5
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       cropperjs:
         specifier: 'catalog:'
         version: 1.6.2
@@ -940,18 +1065,30 @@ importers:
         version: 1.11.18
       element-plus:
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 2.11.5(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 2.11.7(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       highlight.js:
         specifier: 'catalog:'
         version: 11.11.1
       pinia:
         specifier: ^3.0.3
+<<<<<<< HEAD
         version: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       tinymce:
         specifier: 'catalog:'
         version: 7.9.1
+      video.js:
+        specifier: 'catalog:'
+        version: 7.21.7
       vue:
         specifier: ^3.5.17
+<<<<<<< HEAD
         version: 3.5.22(typescript@5.9.3)
       vue-dompurify-html:
         specifier: 'catalog:'
@@ -962,6 +1099,18 @@ importers:
       vuedraggable:
         specifier: 'catalog:'
         version: 4.1.0(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 3.5.24(typescript@5.9.3)
+      vue-dompurify-html:
+        specifier: 'catalog:'
+        version: 5.3.0(vue@3.5.24(typescript@5.9.3))
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+      vuedraggable:
+        specifier: 'catalog:'
+        version: 4.1.0(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     devDependencies:
       unplugin-element-plus:
         specifier: 'catalog:'
@@ -1013,12 +1162,17 @@ importers:
         version: link:../../packages/utils
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       dayjs:
         specifier: 'catalog:'
         version: 1.11.18
       naive-ui:
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 2.43.1(vue@3.5.22(typescript@5.9.3))
       pinia:
         specifier: ^3.0.3
@@ -1029,6 +1183,97 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 2.43.1(vue@3.5.24(typescript@5.9.3))
+      pinia:
+        specifier: ^3.0.3
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+
+  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
+      '@vben/common-ui':
+        specifier: workspace:*
+        version: link:../../packages/effects/common-ui
+      '@vben/constants':
+        specifier: workspace:*
+        version: link:../../packages/constants
+      '@vben/hooks':
+        specifier: workspace:*
+        version: link:../../packages/effects/hooks
+      '@vben/icons':
+        specifier: workspace:*
+        version: link:../../packages/icons
+      '@vben/layouts':
+        specifier: workspace:*
+        version: link:../../packages/effects/layouts
+      '@vben/locales':
+        specifier: workspace:*
+        version: link:../../packages/locales
+      '@vben/plugins':
+        specifier: workspace:*
+        version: link:../../packages/effects/plugins
+      '@vben/preferences':
+        specifier: workspace:*
+        version: link:../../packages/preferences
+      '@vben/request':
+        specifier: workspace:*
+        version: link:../../packages/effects/request
+      '@vben/stores':
+        specifier: workspace:*
+        version: link:../../packages/stores
+      '@vben/styles':
+        specifier: workspace:*
+        version: link:../../packages/styles
+      '@vben/types':
+        specifier: workspace:*
+        version: link:../../packages/types
+      '@vben/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      '@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
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.21
+      pinia:
+        specifier: ^3.0.3
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3))
+      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)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+    devDependencies:
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   docs:
     dependencies:
@@ -1049,23 +1294,38 @@ importers:
         version: link:../packages/styles
       ant-design-vue:
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 4.2.6(vue@3.5.22(typescript@5.9.3))
       lucide-vue-next:
         specifier: 'catalog:'
         version: 0.507.0(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 4.2.6(vue@3.5.24(typescript@5.9.3))
+      lucide-vue-next:
+        specifier: 'catalog:'
+        version: 0.507.0(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       medium-zoom:
         specifier: 'catalog:'
         version: 1.1.0
       reka-ui:
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 2.6.0(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 2.6.0(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       vitepress-plugin-group-icons:
         specifier: 'catalog:'
         version: 1.6.4(markdown-it@14.1.0)(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))
     devDependencies:
       '@nolebase/vitepress-plugin-git-changelog':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 2.18.2(vitepress@1.6.4(@algolia/client-search@5.43.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3))(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@vben/vite-config':
         specifier: workspace:*
         version: link:../internal/vite-config
@@ -1074,10 +1334,17 @@ importers:
         version: 1.0.1(vite-plugin-pwa@1.1.0(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0))
       vitepress:
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 1.6.4(@algolia/client-search@5.40.1)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3)
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
+=======
+        version: 1.6.4(@algolia/client-search@5.43.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3)
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   internal/lint-configs/commitlint-config:
     dependencies:
@@ -1092,7 +1359,7 @@ importers:
         version: link:../../node-utils
       commitlint-plugin-function-rules:
         specifier: 'catalog:'
-        version: 4.1.0(@commitlint/lint@19.8.1)
+        version: 4.1.1(@commitlint/lint@19.8.1)
       cz-git:
         specifier: 'catalog:'
         version: 1.12.0
@@ -1268,7 +1535,11 @@ importers:
     dependencies:
       '@iconify/json':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 2.2.398
+=======
+        version: 2.2.405
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@iconify/tailwind':
         specifier: 'catalog:'
         version: 1.2.0
@@ -1317,13 +1588,21 @@ importers:
         version: link:../../packages/types
       vite:
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+=======
+        version: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   internal/vite-config:
     dependencies:
       '@intlify/unplugin-vue-i18n':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 6.0.8(@vue/compiler-dom@3.5.22)(eslint@9.38.0(jiti@2.6.1))(rollup@4.52.5)(typescript@5.9.3)(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 6.0.8(@vue/compiler-dom@3.5.24)(eslint@9.39.1(jiti@2.6.1))(rollup@4.53.1)(typescript@5.9.3)(vue-i18n@11.1.12(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@jspm/generator':
         specifier: 'catalog:'
         version: 2.7.4
@@ -1347,14 +1626,21 @@ importers:
         version: 2.0.3
       vite-plugin-pwa:
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 1.1.0(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(workbox-build@7.3.0)(workbox-window@7.3.0)
       vite-plugin-vue-devtools:
         specifier: 'catalog:'
         version: 7.7.7(rollup@4.52.5)(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 1.1.0(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(workbox-build@7.3.0)(workbox-window@7.3.0)
+      vite-plugin-vue-devtools:
+        specifier: 'catalog:'
+        version: 7.7.7(rollup@4.53.1)(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     devDependencies:
       '@pnpm/workspace.read-manifest':
         specifier: 'catalog:'
-        version: 1000.2.5
+        version: 1000.2.6
       '@types/archiver':
         specifier: 'catalog:'
         version: 6.0.3
@@ -1366,10 +1652,17 @@ importers:
         version: link:../node-utils
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 6.0.1(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       '@vitejs/plugin-vue-jsx':
         specifier: 'catalog:'
         version: 5.1.1(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 6.0.1(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.24(typescript@5.9.3))
+      '@vitejs/plugin-vue-jsx':
+        specifier: 'catalog:'
+        version: 5.1.1(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       dayjs:
         specifier: 'catalog:'
         version: 1.11.18
@@ -1378,15 +1671,16 @@ importers:
         version: 16.6.1
       rollup:
         specifier: 'catalog:'
-        version: 4.52.5
+        version: 4.53.1
       rollup-plugin-visualizer:
         specifier: 'catalog:'
-        version: 5.14.0(rollup@4.52.5)
+        version: 5.14.0(rollup@4.53.1)
       sass:
         specifier: 'catalog:'
         version: 1.93.2
       vite:
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vite-plugin-compression:
         specifier: 'catalog:'
@@ -1397,6 +1691,18 @@ importers:
       vite-plugin-html:
         specifier: 'catalog:'
         version: 3.2.2(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+=======
+        version: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+      vite-plugin-compression:
+        specifier: 'catalog:'
+        version: 0.5.1(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
+      vite-plugin-dts:
+        specifier: 'catalog:'
+        version: 4.5.4(@types/node@24.10.0)(rollup@4.53.1)(typescript@5.9.3)(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
+      vite-plugin-html:
+        specifier: 'catalog:'
+        version: 3.2.2(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       vite-plugin-lazy-import:
         specifier: 'catalog:'
         version: 1.0.7
@@ -1407,6 +1713,7 @@ importers:
     dependencies:
       '@iconify/vue':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 5.0.0(vue@3.5.22(typescript@5.9.3))
       lucide-vue-next:
         specifier: 'catalog:'
@@ -1414,6 +1721,15 @@ importers:
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
+=======
+        version: 5.0.0(vue@3.5.24(typescript@5.9.3))
+      lucide-vue-next:
+        specifier: 'catalog:'
+        version: 0.507.0(vue@3.5.24(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/@core/base/shared:
     dependencies:
@@ -1422,10 +1738,17 @@ importers:
         version: 4.2.0
       '@tanstack/vue-store':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 0.7.7(vue@3.5.22(typescript@5.9.3))
       '@vue/shared':
         specifier: 'catalog:'
         version: 3.5.22
+=======
+        version: 0.7.7(vue@3.5.24(typescript@5.9.3))
+      '@vue/shared':
+        specifier: 'catalog:'
+        version: 3.5.24
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1486,10 +1809,17 @@ importers:
     dependencies:
       vue:
         specifier: ^3.5.17
+<<<<<<< HEAD
         version: 3.5.22(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
         version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 3.5.24(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/@core/composables:
     dependencies:
@@ -1498,16 +1828,27 @@ importers:
         version: link:../base/shared
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
       reka-ui:
         specifier: 'catalog:'
         version: 2.6.0(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      reka-ui:
+        specifier: 'catalog:'
+        version: 2.6.0(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       sortablejs:
         specifier: 'catalog:'
         version: 1.15.6
       vue:
         specifier: ^3.5.17
+<<<<<<< HEAD
         version: 3.5.22(typescript@5.9.3)
+=======
+        version: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     devDependencies:
       '@types/sortablejs':
         specifier: 'catalog:'
@@ -1523,10 +1864,17 @@ importers:
         version: link:../base/typings
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/@core/ui-kit/form-ui:
     dependencies:
@@ -1547,6 +1895,7 @@ importers:
         version: link:../../base/typings
       '@vee-validate/zod':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 4.15.1(vue@3.5.22(typescript@5.9.3))(zod@3.25.76)
       '@vueuse/core':
         specifier: 'catalog:'
@@ -1557,6 +1906,18 @@ importers:
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
+=======
+        version: 4.15.1(vue@3.5.24(typescript@5.9.3))(zod@3.25.76)
+      '@vueuse/core':
+        specifier: 'catalog:'
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      vee-validate:
+        specifier: 'catalog:'
+        version: 4.15.1(vue@3.5.24(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       zod:
         specifier: 'catalog:'
         version: 3.25.76
@@ -1583,10 +1944,17 @@ importers:
         version: link:../../base/typings
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/@core/ui-kit/menu-ui:
     dependencies:
@@ -1607,10 +1975,17 @@ importers:
         version: link:../../base/typings
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/@core/ui-kit/popup-ui:
     dependencies:
@@ -1631,10 +2006,17 @@ importers:
         version: link:../../base/typings
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/@core/ui-kit/shadcn-ui:
     dependencies:
@@ -1652,12 +2034,17 @@ importers:
         version: link:../../base/typings
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       class-variance-authority:
         specifier: 'catalog:'
         version: 0.7.1
       lucide-vue-next:
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 0.507.0(vue@3.5.22(typescript@5.9.3))
       reka-ui:
         specifier: 'catalog:'
@@ -1668,6 +2055,18 @@ importers:
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
+=======
+        version: 0.507.0(vue@3.5.24(typescript@5.9.3))
+      reka-ui:
+        specifier: 'catalog:'
+        version: 2.6.0(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3))
+      vee-validate:
+        specifier: 'catalog:'
+        version: 4.15.1(vue@3.5.24(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/@core/ui-kit/tabs-ui:
     dependencies:
@@ -1685,10 +2084,17 @@ importers:
         version: link:../../base/typings
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/constants:
     dependencies:
@@ -1712,7 +2118,11 @@ importers:
         version: link:../../utils
       vue:
         specifier: ^3.5.17
+<<<<<<< HEAD
         version: 3.5.22(typescript@5.9.3)
+=======
+        version: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/effects/common-ui:
     dependencies:
@@ -1748,10 +2158,17 @@ importers:
         version: link:../../types
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
       '@vueuse/integrations':
         specifier: 'catalog:'
         version: 14.0.0(async-validator@4.2.5)(axios@1.12.2)(focus-trap@7.6.5)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      '@vueuse/integrations':
+        specifier: 'catalog:'
+        version: 14.0.0(async-validator@4.2.5)(axios@1.13.2)(focus-trap@7.6.6)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       json-bigint:
         specifier: 'catalog:'
         version: 1.0.0
@@ -1763,6 +2180,7 @@ importers:
         version: 6.3.7
       vue:
         specifier: ^3.5.17
+<<<<<<< HEAD
         version: 3.5.22(typescript@5.9.3)
       vue-json-viewer:
         specifier: 'catalog:'
@@ -1773,6 +2191,18 @@ importers:
       vue-tippy:
         specifier: 'catalog:'
         version: 6.7.1(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 3.5.24(typescript@5.9.3)
+      vue-json-viewer:
+        specifier: 'catalog:'
+        version: 3.0.4(vue@3.5.24(typescript@5.9.3))
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+      vue-tippy:
+        specifier: 'catalog:'
+        version: 6.7.1(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     devDependencies:
       '@types/qrcode':
         specifier: 'catalog:'
@@ -1797,6 +2227,7 @@ importers:
         version: link:../../utils
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
@@ -1804,6 +2235,15 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       watermark-js-plus:
         specifier: 'catalog:'
         version: 1.6.3
@@ -1860,6 +2300,7 @@ importers:
         version: link:../../utils
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
@@ -1867,12 +2308,25 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/effects/plugins:
     dependencies:
       '@tinyflow-ai/vue':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 1.1.7(svelte@5.41.1)(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 1.1.9(svelte@5.43.5)(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@vben-core/form-ui':
         specifier: workspace:*
         version: link:../../@core/ui-kit/form-ui
@@ -1902,10 +2356,17 @@ importers:
         version: link:../../utils
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
       '@vueuse/motion':
         specifier: 'catalog:'
         version: 3.0.3(magicast@0.3.5)(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      '@vueuse/motion':
+        specifier: 'catalog:'
+        version: 3.0.3(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       codemirror:
         specifier: 'catalog:'
         version: 5.65.20
@@ -1929,6 +2390,7 @@ importers:
         version: 0.16.0(markmap-common@0.16.0)
       vue:
         specifier: ^3.5.17
+<<<<<<< HEAD
         version: 3.5.22(typescript@5.9.3)
       vxe-pc-ui:
         specifier: 'catalog:'
@@ -1936,6 +2398,15 @@ importers:
       vxe-table:
         specifier: 'catalog:'
         version: 4.17.0(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 3.5.24(typescript@5.9.3)
+      vxe-pc-ui:
+        specifier: 'catalog:'
+        version: 4.10.18(vue@3.5.24(typescript@5.9.3))
+      vxe-table:
+        specifier: 'catalog:'
+        version: 4.17.12(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     devDependencies:
       '@types/codemirror':
         specifier: 'catalog:'
@@ -1985,10 +2456,17 @@ importers:
         version: link:../@core/composables
       vue:
         specifier: ^3.5.17
+<<<<<<< HEAD
         version: 3.5.22(typescript@5.9.3)
       vue-i18n:
         specifier: 'catalog:'
         version: 11.1.12(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 3.5.24(typescript@5.9.3)
+      vue-i18n:
+        specifier: 'catalog:'
+        version: 11.1.12(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/preferences:
     dependencies:
@@ -2012,19 +2490,33 @@ importers:
         version: link:../@core/base/typings
       pinia:
         specifier: ^3.0.3
+<<<<<<< HEAD
         version: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
       pinia-plugin-persistedstate:
         specifier: 'catalog:'
         version: 4.5.0(@nuxt/kit@3.19.3(magicast@0.3.5))(pinia@3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)))
+=======
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3))
+      pinia-plugin-persistedstate:
+        specifier: 'catalog:'
+        version: 4.7.1(@nuxt/kit@3.20.1)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3)))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       secure-ls:
         specifier: 'catalog:'
         version: 2.0.0
       vue:
         specifier: ^3.5.17
+<<<<<<< HEAD
         version: 3.5.22(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
         version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 3.5.24(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/styles:
     dependencies:
@@ -2039,10 +2531,17 @@ importers:
         version: link:../@core/base/typings
       vue:
         specifier: ^3.5.17
+<<<<<<< HEAD
         version: 3.5.22(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
         version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 3.5.24(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   packages/utils:
     dependencies:
@@ -2054,13 +2553,21 @@ importers:
         version: link:../@core/base/typings
       vue-router:
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   playground:
     dependencies:
       '@tanstack/vue-query':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 5.90.5(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 5.90.7(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@vben-core/menu-ui':
         specifier: workspace:*
         version: link:../packages/@core/ui-kit/menu-ui
@@ -2108,10 +2615,17 @@ importers:
         version: link:../packages/utils
       '@vueuse/core':
         specifier: 'catalog:'
+<<<<<<< HEAD
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
       ant-design-vue:
         specifier: 'catalog:'
         version: 4.2.6(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 13.9.0(vue@3.5.24(typescript@5.9.3))
+      ant-design-vue:
+        specifier: 'catalog:'
+        version: 4.2.6(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       dayjs:
         specifier: 'catalog:'
         version: 1.11.18
@@ -2120,6 +2634,7 @@ importers:
         version: 1.0.0
       pinia:
         specifier: ^3.0.3
+<<<<<<< HEAD
         version: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
@@ -2127,6 +2642,15 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+=======
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.17
+        version: 3.5.24(typescript@5.9.3)
+      vue-router:
+        specifier: 'catalog:'
+        version: 4.6.3(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     devDependencies:
       '@types/json-bigint':
         specifier: 'catalog:'
@@ -2164,8 +2688,13 @@ importers:
 
 packages:
 
+<<<<<<< HEAD
   '@algolia/abtesting@1.6.1':
     resolution: {integrity: sha512-wV/gNRkzb7sI9vs1OneG129hwe3Q5zPj7zigz3Ps7M5Lpo2hSorrOnXNodHEOV+yXE/ks4Pd+G3CDFIjFTWhMQ==}
+=======
+  '@algolia/abtesting@1.9.0':
+    resolution: {integrity: sha512-4q9QCxFPiDIx1n5w41A1JMkrXI8p0ugCQnCGFtCKZPmWtwgWCqwVRncIbp++81xSELFZVQUfiB7Kbsla1tIBSw==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     engines: {node: '>= 14.0.0'}
 
   '@algolia/autocomplete-core@1.17.7':
@@ -2188,6 +2717,7 @@ packages:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
 
+<<<<<<< HEAD
   '@algolia/client-abtesting@5.40.1':
     resolution: {integrity: sha512-cxKNATPY5t+Mv8XAVTI57altkaPH+DZi4uMrnexPxPHODMljhGYY+GDZyHwv9a+8CbZHcY372OkxXrDMZA4Lnw==}
     engines: {node: '>= 14.0.0'}
@@ -2238,6 +2768,58 @@ packages:
 
   '@algolia/requester-node-http@5.40.1':
     resolution: {integrity: sha512-H1gYPojO6krWHnUXu/T44DrEun/Wl95PJzMXRcM/szstNQczSbwq6wIFJPI9nyE95tarZfUNU3rgorT+wZ6iCQ==}
+=======
+  '@algolia/client-abtesting@5.43.0':
+    resolution: {integrity: sha512-YsKYkohIMxiYEAu8nppZi5EioYDUIo9Heoor8K8vMUnkUtGCOEU/Q4p5OWaYSSBx3evo09Ga9rG4jsKViIcDzQ==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-analytics@5.43.0':
+    resolution: {integrity: sha512-kDGJWt3nzf0nu5RPFXQhNGl6Q0cn35fazxVWXhd0Fw3Vo6gcVfrcezcBenHb66laxnVJ7uwr1uKhmsu3Wy25sQ==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-common@5.43.0':
+    resolution: {integrity: sha512-RAFipkAnI8xhL/Sgi/gpXgNWN5HDM6F7z4NNNOcI8ZMYysZEBsqVXojg/WdKEKkQCOHVTZ3mooIjc5BaQdyVtA==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-insights@5.43.0':
+    resolution: {integrity: sha512-PmVs83THco8Qig3cAjU9a5eAGaSxsfgh7PdmWMQFE/MCmIcLPv0MVpgfcGGyPjZGYvPC4cg+3q7JJxcNSsEaTg==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-personalization@5.43.0':
+    resolution: {integrity: sha512-Bs4zMLXvkAr19FSOZWNizlNUpRFxZVxtvyEJ+q3n3+hPZUcKjo0LIh15qghhRcQPEihjBN6Gr/U+AqRfOCsvnA==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-query-suggestions@5.43.0':
+    resolution: {integrity: sha512-pwHv+z8TZAKbwAWt9+v2gIqlqcCFiMdteTdgdPn2yOBRx4WUQdsIWAaG9GiV3by8jO51FuFQnTohhauuI63y3A==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/client-search@5.43.0':
+    resolution: {integrity: sha512-wKy6x6fKcnB1CsfeNNdGp4dzLzz04k8II3JLt6Sp81F8s57Ks3/K9qsysmL9SJa8P486s719bBttVLE8JJYurQ==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/ingestion@1.43.0':
+    resolution: {integrity: sha512-TA21h2KwqCUyPXhSAWF3R2UES/FAnzjaVPDI6cRPXeadX+pdrGN0GWat5gSUATJVcMHECn+lGvuMMRxO86o2Pg==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/monitoring@1.43.0':
+    resolution: {integrity: sha512-rvWVEiA1iLcFmHS3oIXGIBreHIxNZqEFDjiNyRtLEffgd62kul2DjXM7H5bOouDMTo1ywMWT9OeQnzrhlTGAwA==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/recommend@5.43.0':
+    resolution: {integrity: sha512-scCijGd38npvH2uHbYhO4f1SR8It5R2FZqOjNcMfw/7Ph7Hxvl+cd7Mo6RzIxsNRcLW5RrwjtpTK3gpDe8r/WQ==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/requester-browser-xhr@5.43.0':
+    resolution: {integrity: sha512-jMkRLWJYr4Hcmpl89e4vIWs69Mkf8Uwx7MG5ZKk2UxW3G3TmouGjI0Ph5mVPmg3Jf1UG3AdmVDc4XupzycT1Jw==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/requester-fetch@5.43.0':
+    resolution: {integrity: sha512-KyQiVz+HdYtissC0J9KIGhHhKytQyJX+82GVsbv5rSCXbETnAoojvUyCn+3KRtWUvMDYCsZ+Y7hM71STTUJUJg==}
+    engines: {node: '>= 14.0.0'}
+
+  '@algolia/requester-node-http@5.43.0':
+    resolution: {integrity: sha512-UnUBNY0U+oT0bkYDsEqVsCkErC2w7idk4CRiLSzicqY8tGylD9oP0j13X/fse1CuiAFCCr3jfl+cBlN6dC0OFw==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     engines: {node: '>= 14.0.0'}
 
   '@alloc/quick-lru@5.2.0':
@@ -3940,6 +4522,7 @@ packages:
   '@iconify-json/octicon@1.2.16':
     resolution: {integrity: sha512-lVf3SbtRK0kNLAK7PxBoiyNGRZVdKpi+9y2/DXv8nWeFgBhU/ctK8D1s4wd0FNp1ZMyrh7K2MXmbnENcDOIUhA==}
 
+<<<<<<< HEAD
   '@iconify-json/simple-icons@1.2.55':
     resolution: {integrity: sha512-9vc04pmup/zcef8hDypWU8nMwMaFVkWuUzWkxyL++DVp5AA8baoJHK6RyKN1v+cvfR2agxkUb053XVggzFFkTA==}
 
@@ -3948,6 +4531,19 @@ packages:
 
   '@iconify/json@2.2.398':
     resolution: {integrity: sha512-SEUDjkyAenAKMd5hDfzNzeObZw+KgQdIHaOuWA4yv89qSf2s0dJ7L1iXhRjtEZxFnuXQ2D67uFiHmE+90jvDGQ==}
+=======
+  '@iconify-json/octicon@1.2.18':
+    resolution: {integrity: sha512-rj94lgRl70HXovRxD+xSOpSql6cj3N8rv3ouSh7UJEuAFim0RcCEt2JQhr8hiS5Lj1D65EQP7oSNMrVOkYi8kg==}
+
+  '@iconify-json/simple-icons@1.2.58':
+    resolution: {integrity: sha512-XtXEoRALqztdNc9ujYBj2tTCPKdIPKJBdLNDebFF46VV1aOAwTbAYMgNsK5GMCpTJupLCmpBWDn+gX5SpECorQ==}
+
+  '@iconify-json/vscode-icons@1.2.33':
+    resolution: {integrity: sha512-2lKDybGxXXeLeeqeNT2YVDYXs5va0YMHf06w3GemS22j/0CCTpKwKDK7REaibsCq3bRV8qX0RJDM4AbREE7L+w==}
+
+  '@iconify/json@2.2.405':
+    resolution: {integrity: sha512-wpZMsZoqt6tHbipJ/JmkhRK1TWkmRrTBfL2pi48qXyqUxF56+OEUVB61VkcQ1hMKj/tDAIicFSirkaRZkMwliw==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@iconify/tailwind@1.2.0':
     resolution: {integrity: sha512-KgpIHWOTcRYw1XcoUqyNSrmYyfLLqZYu3AmP8zdfLk0F5TqRO8YerhlvlQmGfn7rJXgPeZN569xPAJnJ53zZxA==}
@@ -3963,8 +4559,8 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  '@inquirer/external-editor@1.0.2':
-    resolution: {integrity: sha512-yy9cOoBnx58TlsPrIxauKIFQTiyH+0MK4e97y4sV9ERbI+zDxw7i2hxHLCIEGIE/8PPvDxGhgzIOTSOWcs6/MQ==}
+  '@inquirer/external-editor@1.0.3':
+    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
     engines: {node: '>=18'}
     peerDependencies:
       '@types/node': '>=18'
@@ -4173,8 +4769,13 @@ packages:
     resolution: {integrity: sha512-/xGlezI6xfGO9NwuJlnwz/K14qD1kCSAGtacBHnGzeAIuJGazcp45KP5NuyARXoKb7cwulAGWVsbeSxdG/cb0Q==}
     engines: {node: ^18.17.0 || >=20.5.0}
 
+<<<<<<< HEAD
   '@nuxt/kit@3.19.3':
     resolution: {integrity: sha512-ze46EW5xW+UxDvinvPkYt2MzR355Az1lA3bpX8KDialgnCwr+IbkBij/udbUEC6ZFbidPkfK1eKl4ESN7gMY+w==}
+=======
+  '@nuxt/kit@3.20.1':
+    resolution: {integrity: sha512-TIslaylfI5kd3AxX5qts0qyrIQ9Uq3HAA1bgIIJ+c+zpDfK338YS+YrCWxBBzDMECRCbAS58mqAd2MtJfG1ENA==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     engines: {node: '>=18.12.0'}
 
   '@one-ini/wasm@0.1.1':
@@ -4307,12 +4908,12 @@ packages:
     resolution: {integrity: sha512-c83qWb22rNRuB0UaVCI0uRPNRr8Z0FWnEIvT47jiHAmOIUHbBOg5XvV7pM5x+rKn9HRpjxquDbXYSXr3fAKFcw==}
     engines: {node: '>=12'}
 
-  '@pnpm/types@1000.9.0':
-    resolution: {integrity: sha512-UvDTCxnbyqkTg2X0dBOuZ4IdFJ8g4UFu0Ybv/5/cZAxCWVhNl1hC/Xc9hR4tZrlBL0NRFePLRhO/iw9LmA1lbw==}
+  '@pnpm/types@1001.0.0':
+    resolution: {integrity: sha512-9P7I8Zv8hvAO81+D5KVmwveH4nmxhBNFEEeb77YYPV72bkyqzKTR6I8OGEs7TNZ6gPHufF+lIyBVEqO6SMFpJA==}
     engines: {node: '>=18.12'}
 
-  '@pnpm/workspace.read-manifest@1000.2.5':
-    resolution: {integrity: sha512-kiFdZbwoIqNEwfBVSprSXuaKHdlORingq2uR4ofH9F8r8lwpIY/2bACl6VuFASHGSZ1Bs3Oy6VicSMPQRsKTJg==}
+  '@pnpm/workspace.read-manifest@1000.2.6':
+    resolution: {integrity: sha512-XfdmbSiej5AdyclbLeI7kvQ7GQ/2GL0hILpaATQUwgVFR7oijscpcBEKtuN8AZXZSHBfuJXzsGAHIwBAyPrXLg==}
     engines: {node: '>=18.12'}
 
   '@polka/url@1.0.0-next.29':
@@ -4447,124 +5048,124 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/rollup-android-arm-eabi@4.52.5':
-    resolution: {integrity: sha512-8c1vW4ocv3UOMp9K+gToY5zL2XiiVw3k7f1ksf4yO1FlDFQ1C2u72iACFnSOceJFsWskc2WZNqeRhFRPzv+wtQ==}
+  '@rollup/rollup-android-arm-eabi@4.53.1':
+    resolution: {integrity: sha512-bxZtughE4VNVJlL1RdoSE545kc4JxL7op57KKoi59/gwuU5rV6jLWFXXc8jwgFoT6vtj+ZjO+Z2C5nrY0Cl6wA==}
     cpu: [arm]
     os: [android]
 
-  '@rollup/rollup-android-arm64@4.52.5':
-    resolution: {integrity: sha512-mQGfsIEFcu21mvqkEKKu2dYmtuSZOBMmAl5CFlPGLY94Vlcm+zWApK7F/eocsNzp8tKmbeBP8yXyAbx0XHsFNA==}
+  '@rollup/rollup-android-arm64@4.53.1':
+    resolution: {integrity: sha512-44a1hreb02cAAfAKmZfXVercPFaDjqXCK+iKeVOlJ9ltvnO6QqsBHgKVPTu+MJHSLLeMEUbeG2qiDYgbFPU48g==}
     cpu: [arm64]
     os: [android]
 
-  '@rollup/rollup-darwin-arm64@4.52.5':
-    resolution: {integrity: sha512-takF3CR71mCAGA+v794QUZ0b6ZSrgJkArC+gUiG6LB6TQty9T0Mqh3m2ImRBOxS2IeYBo4lKWIieSvnEk2OQWA==}
+  '@rollup/rollup-darwin-arm64@4.53.1':
+    resolution: {integrity: sha512-usmzIgD0rf1syoOZ2WZvy8YpXK5G1V3btm3QZddoGSa6mOgfXWkkv+642bfUUldomgrbiLQGrPryb7DXLovPWQ==}
     cpu: [arm64]
     os: [darwin]
 
-  '@rollup/rollup-darwin-x64@4.52.5':
-    resolution: {integrity: sha512-W901Pla8Ya95WpxDn//VF9K9u2JbocwV/v75TE0YIHNTbhqUTv9w4VuQ9MaWlNOkkEfFwkdNhXgcLqPSmHy0fA==}
+  '@rollup/rollup-darwin-x64@4.53.1':
+    resolution: {integrity: sha512-is3r/k4vig2Gt8mKtTlzzyaSQ+hd87kDxiN3uDSDwggJLUV56Umli6OoL+/YZa/KvtdrdyNfMKHzL/P4siOOmg==}
     cpu: [x64]
     os: [darwin]
 
-  '@rollup/rollup-freebsd-arm64@4.52.5':
-    resolution: {integrity: sha512-QofO7i7JycsYOWxe0GFqhLmF6l1TqBswJMvICnRUjqCx8b47MTo46W8AoeQwiokAx3zVryVnxtBMcGcnX12LvA==}
+  '@rollup/rollup-freebsd-arm64@4.53.1':
+    resolution: {integrity: sha512-QJ1ksgp/bDJkZB4daldVmHaEQkG4r8PUXitCOC2WRmRaSaHx5RwPoI3DHVfXKwDkB+Sk6auFI/+JHacTekPRSw==}
     cpu: [arm64]
     os: [freebsd]
 
-  '@rollup/rollup-freebsd-x64@4.52.5':
-    resolution: {integrity: sha512-jr21b/99ew8ujZubPo9skbrItHEIE50WdV86cdSoRkKtmWa+DDr6fu2c/xyRT0F/WazZpam6kk7IHBerSL7LDQ==}
+  '@rollup/rollup-freebsd-x64@4.53.1':
+    resolution: {integrity: sha512-J6ma5xgAzvqsnU6a0+jgGX/gvoGokqpkx6zY4cWizRrm0ffhHDpJKQgC8dtDb3+MqfZDIqs64REbfHDMzxLMqQ==}
     cpu: [x64]
     os: [freebsd]
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
-    resolution: {integrity: sha512-PsNAbcyv9CcecAUagQefwX8fQn9LQ4nZkpDboBOttmyffnInRy8R8dSg6hxxl2Re5QhHBf6FYIDhIj5v982ATQ==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.53.1':
+    resolution: {integrity: sha512-JzWRR41o2U3/KMNKRuZNsDUAcAVUYhsPuMlx5RUldw0E4lvSIXFUwejtYz1HJXohUmqs/M6BBJAUBzKXZVddbg==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
-    resolution: {integrity: sha512-Fw4tysRutyQc/wwkmcyoqFtJhh0u31K+Q6jYjeicsGJJ7bbEq8LwPWV/w0cnzOqR2m694/Af6hpFayLJZkG2VQ==}
+  '@rollup/rollup-linux-arm-musleabihf@4.53.1':
+    resolution: {integrity: sha512-L8kRIrnfMrEoHLHtHn+4uYA52fiLDEDyezgxZtGUTiII/yb04Krq+vk3P2Try+Vya9LeCE9ZHU8CXD6J9EhzHQ==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-arm64-gnu@4.52.5':
-    resolution: {integrity: sha512-a+3wVnAYdQClOTlyapKmyI6BLPAFYs0JM8HRpgYZQO02rMR09ZcV9LbQB+NL6sljzG38869YqThrRnfPMCDtZg==}
+  '@rollup/rollup-linux-arm64-gnu@4.53.1':
+    resolution: {integrity: sha512-ysAc0MFRV+WtQ8li8hi3EoFi7us6d1UzaS/+Dp7FYZfg3NdDljGMoVyiIp6Ucz7uhlYDBZ/zt6XI0YEZbUO11Q==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-arm64-musl@4.52.5':
-    resolution: {integrity: sha512-AvttBOMwO9Pcuuf7m9PkC1PUIKsfaAJ4AYhy944qeTJgQOqJYJ9oVl2nYgY7Rk0mkbsuOpCAYSs6wLYB2Xiw0Q==}
+  '@rollup/rollup-linux-arm64-musl@4.53.1':
+    resolution: {integrity: sha512-UV6l9MJpDbDZZ/fJvqNcvO1PcivGEf1AvKuTcHoLjVZVFeAMygnamCTDikCVMRnA+qJe+B3pSbgX2+lBMqgBhA==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-loong64-gnu@4.52.5':
-    resolution: {integrity: sha512-DkDk8pmXQV2wVrF6oq5tONK6UHLz/XcEVow4JTTerdeV1uqPeHxwcg7aFsfnSm9L+OO8WJsWotKM2JJPMWrQtA==}
+  '@rollup/rollup-linux-loong64-gnu@4.53.1':
+    resolution: {integrity: sha512-UDUtelEprkA85g95Q+nj3Xf0M4hHa4DiJ+3P3h4BuGliY4NReYYqwlc0Y8ICLjN4+uIgCEvaygYlpf0hUj90Yg==}
     cpu: [loong64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
-    resolution: {integrity: sha512-W/b9ZN/U9+hPQVvlGwjzi+Wy4xdoH2I8EjaCkMvzpI7wJUs8sWJ03Rq96jRnHkSrcHTpQe8h5Tg3ZzUPGauvAw==}
+  '@rollup/rollup-linux-ppc64-gnu@4.53.1':
+    resolution: {integrity: sha512-vrRn+BYhEtNOte/zbc2wAUQReJXxEx2URfTol6OEfY2zFEUK92pkFBSXRylDM7aHi+YqEPJt9/ABYzmcrS4SgQ==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
-    resolution: {integrity: sha512-sjQLr9BW7R/ZiXnQiWPkErNfLMkkWIoCz7YMn27HldKsADEKa5WYdobaa1hmN6slu9oWQbB6/jFpJ+P2IkVrmw==}
+  '@rollup/rollup-linux-riscv64-gnu@4.53.1':
+    resolution: {integrity: sha512-gto/1CxHyi4A7YqZZNznQYrVlPSaodOBPKM+6xcDSCMVZN/Fzb4K+AIkNz/1yAYz9h3Ng+e2fY9H6bgawVq17w==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-riscv64-musl@4.52.5':
-    resolution: {integrity: sha512-hq3jU/kGyjXWTvAh2awn8oHroCbrPm8JqM7RUpKjalIRWWXE01CQOf/tUNWNHjmbMHg/hmNCwc/Pz3k1T/j/Lg==}
+  '@rollup/rollup-linux-riscv64-musl@4.53.1':
+    resolution: {integrity: sha512-KZ6Vx7jAw3aLNjFR8eYVcQVdFa/cvBzDNRFM3z7XhNNunWjA03eUrEwJYPk0G8V7Gs08IThFKcAPS4WY/ybIrQ==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-linux-s390x-gnu@4.52.5':
-    resolution: {integrity: sha512-gn8kHOrku8D4NGHMK1Y7NA7INQTRdVOntt1OCYypZPRt6skGbddska44K8iocdpxHTMMNui5oH4elPH4QOLrFQ==}
+  '@rollup/rollup-linux-s390x-gnu@4.53.1':
+    resolution: {integrity: sha512-HvEixy2s/rWNgpwyKpXJcHmE7om1M89hxBTBi9Fs6zVuLU4gOrEMQNbNsN/tBVIMbLyysz/iwNiGtMOpLAOlvA==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-gnu@4.52.5':
-    resolution: {integrity: sha512-hXGLYpdhiNElzN770+H2nlx+jRog8TyynpTVzdlc6bndktjKWyZyiCsuDAlpd+j+W+WNqfcyAWz9HxxIGfZm1Q==}
+  '@rollup/rollup-linux-x64-gnu@4.53.1':
+    resolution: {integrity: sha512-E/n8x2MSjAQgjj9IixO4UeEUeqXLtiA7pyoXCFYLuXpBA/t2hnbIdxHfA7kK9BFsYAoNU4st1rHYdldl8dTqGA==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rollup/rollup-linux-x64-musl@4.52.5':
-    resolution: {integrity: sha512-arCGIcuNKjBoKAXD+y7XomR9gY6Mw7HnFBv5Rw7wQRvwYLR7gBAgV7Mb2QTyjXfTveBNFAtPt46/36vV9STLNg==}
+  '@rollup/rollup-linux-x64-musl@4.53.1':
+    resolution: {integrity: sha512-IhJ087PbLOQXCN6Ui/3FUkI9pWNZe/Z7rEIVOzMsOs1/HSAECCvSZ7PkIbkNqL/AZn6WbZvnoVZw/qwqYMo4/w==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rollup/rollup-openharmony-arm64@4.52.5':
-    resolution: {integrity: sha512-QoFqB6+/9Rly/RiPjaomPLmR/13cgkIGfA40LHly9zcH1S0bN2HVFYk3a1eAyHQyjs3ZJYlXvIGtcCs5tko9Cw==}
+  '@rollup/rollup-openharmony-arm64@4.53.1':
+    resolution: {integrity: sha512-0++oPNgLJHBblreu0SFM7b3mAsBJBTY0Ksrmu9N6ZVrPiTkRgda52mWR7TKhHAsUb9noCjFvAw9l6ZO1yzaVbA==}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rollup/rollup-win32-arm64-msvc@4.52.5':
-    resolution: {integrity: sha512-w0cDWVR6MlTstla1cIfOGyl8+qb93FlAVutcor14Gf5Md5ap5ySfQ7R9S/NjNaMLSFdUnKGEasmVnu3lCMqB7w==}
+  '@rollup/rollup-win32-arm64-msvc@4.53.1':
+    resolution: {integrity: sha512-VJXivz61c5uVdbmitLkDlbcTk9Or43YC2QVLRkqp86QoeFSqI81bNgjhttqhKNMKnQMWnecOCm7lZz4s+WLGpQ==}
     cpu: [arm64]
     os: [win32]
 
-  '@rollup/rollup-win32-ia32-msvc@4.52.5':
-    resolution: {integrity: sha512-Aufdpzp7DpOTULJCuvzqcItSGDH73pF3ko/f+ckJhxQyHtp67rHw3HMNxoIdDMUITJESNE6a8uh4Lo4SLouOUg==}
+  '@rollup/rollup-win32-ia32-msvc@4.53.1':
+    resolution: {integrity: sha512-NmZPVTUOitCXUH6erJDzTQ/jotYw4CnkMDjCYRxNHVD9bNyfrGoIse684F9okwzKCV4AIHRbUkeTBc9F2OOH5Q==}
     cpu: [ia32]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-gnu@4.52.5':
-    resolution: {integrity: sha512-UGBUGPFp1vkj6p8wCRraqNhqwX/4kNQPS57BCFc8wYh0g94iVIW33wJtQAx3G7vrjjNtRaxiMUylM0ktp/TRSQ==}
+  '@rollup/rollup-win32-x64-gnu@4.53.1':
+    resolution: {integrity: sha512-2SNj7COIdAf6yliSpLdLG8BEsp5lgzRehgfkP0Av8zKfQFKku6JcvbobvHASPJu4f3BFxej5g+HuQPvqPhHvpQ==}
     cpu: [x64]
     os: [win32]
 
-  '@rollup/rollup-win32-x64-msvc@4.52.5':
-    resolution: {integrity: sha512-TAcgQh2sSkykPRWLrdyy2AiceMckNf5loITqXxFI5VuQjS5tSuw3WlwdN8qv8vzjLAUTvYaH/mVjSFpbkFbpTg==}
+  '@rollup/rollup-win32-x64-msvc@4.53.1':
+    resolution: {integrity: sha512-rLarc1Ofcs3DHtgSzFO31pZsCh8g05R2azN1q3fF+H423Co87My0R+tazOEvYVKXSLh8C4LerMK41/K7wlklcg==}
     cpu: [x64]
     os: [win32]
 
@@ -4953,12 +5554,21 @@ packages:
   '@types/tern@0.23.9':
     resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==}
 
+  '@types/tinycolor2@1.4.6':
+    resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
+<<<<<<< HEAD
+=======
+  '@types/validator@13.15.4':
+    resolution: {integrity: sha512-LSFfpSnJJY9wbC0LQxgvfb+ynbHftFo0tMsFOl/J4wexLnYMmDSPaj2ZyDv3TkfL1UePxPrxOWJfbiRS8mQv7A==}
+
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
   '@types/video.js@7.3.58':
     resolution: {integrity: sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==}
 
@@ -5274,6 +5884,7 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+<<<<<<< HEAD
   '@vue/compiler-core@3.5.22':
     resolution: {integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==}
 
@@ -5285,6 +5896,19 @@ packages:
 
   '@vue/compiler-ssr@3.5.22':
     resolution: {integrity: sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==}
+=======
+  '@vue/compiler-core@3.5.24':
+    resolution: {integrity: sha512-eDl5H57AOpNakGNAkFDH+y7kTqrQpJkZFXhWZQGyx/5Wh7B1uQYvcWkvZi11BDhscPgj8N7XV3oRwiPnx1Vrig==}
+
+  '@vue/compiler-dom@3.5.24':
+    resolution: {integrity: sha512-1QHGAvs53gXkWdd3ZMGYuvQFXHW4ksKWPG8HP8/2BscrbZ0brw183q2oNWjMrSWImYLHxHrx1ItBQr50I/q2zw==}
+
+  '@vue/compiler-sfc@3.5.24':
+    resolution: {integrity: sha512-8EG5YPRgmTB+YxYBM3VXy8zHD9SWHUJLIGPhDovo3Z8VOgvP+O7UP5vl0J4BBPWYD9vxtBabzW1EuEZ+Cqs14g==}
+
+  '@vue/compiler-ssr@3.5.24':
+    resolution: {integrity: sha512-trOvMWNBMQ/odMRHW7Ae1CdfYx+7MuiQu62Jtu36gMLXcaoqKvAyh+P73sYG9ll+6jLB6QPovqoKGGZROzkFFg==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
@@ -5322,6 +5946,7 @@ packages:
       typescript:
         optional: true
 
+<<<<<<< HEAD
   '@vue/reactivity@3.5.22':
     resolution: {integrity: sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==}
 
@@ -5338,6 +5963,24 @@ packages:
 
   '@vue/shared@3.5.22':
     resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
+=======
+  '@vue/reactivity@3.5.24':
+    resolution: {integrity: sha512-BM8kBhtlkkbnyl4q+HiF5R5BL0ycDPfihowulm02q3WYp2vxgPcJuZO866qa/0u3idbMntKEtVNuAUp5bw4teg==}
+
+  '@vue/runtime-core@3.5.24':
+    resolution: {integrity: sha512-RYP/byyKDgNIqfX/gNb2PB55dJmM97jc9wyF3jK7QUInYKypK2exmZMNwnjueWwGceEkP6NChd3D2ZVEp9undQ==}
+
+  '@vue/runtime-dom@3.5.24':
+    resolution: {integrity: sha512-Z8ANhr/i0XIluonHVjbUkjvn+CyrxbXRIxR7wn7+X7xlcb7dJsfITZbkVOeJZdP8VZwfrWRsWdShH6pngMxRjw==}
+
+  '@vue/server-renderer@3.5.24':
+    resolution: {integrity: sha512-Yh2j2Y4G/0/4z/xJ1Bad4mxaAk++C2v4kaa8oSYTMJBJ00/ndPuxCnWeot0/7/qafQFLh5pr6xeV6SdMcE/G1w==}
+    peerDependencies:
+      vue: ^3.5.17
+
+  '@vue/shared@3.5.24':
+    resolution: {integrity: sha512-9cwHL2EsJBdi8NY22pngYYWzkTDhld6fAD6jlaeloNGciNSJL6bLpbxVgXl96X00Jtc6YWQv96YA/0sxex/k1A==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
@@ -5488,8 +6131,13 @@ packages:
     resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
     engines: {node: '>=10.0.0'}
 
+<<<<<<< HEAD
   '@xyflow/svelte@1.4.0':
     resolution: {integrity: sha512-LXokbj1nEP8FROE/y9/xU11G4dM2+mGBiMmPU714Mmk+bGnyot+nZmyR8Y7OFBUahY1mnMNfeclLPJKGy3r7tA==}
+=======
+  '@xyflow/svelte@1.4.1':
+    resolution: {integrity: sha512-CAegVmLMpX64G6JnhiU7ezoIOY7aX88cf1fSOV8FutKdZNMxcJBykhvaXunOBf7jjDs9X887RH8Jgdl1rMwXww==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     peerDependencies:
       svelte: ^5.25.0
 
@@ -5562,8 +6210,13 @@ packages:
   ajv@8.17.1:
     resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
+<<<<<<< HEAD
   algoliasearch@5.40.1:
     resolution: {integrity: sha512-iUNxcXUNg9085TJx0HJLjqtDE0r1RZ0GOGrt8KNQqQT5ugu8lZsHuMUYW/e0lHhq6xBvmktU9Bw4CXP9VQeKrg==}
+=======
+  algoliasearch@5.43.0:
+    resolution: {integrity: sha512-hbkK41JsuGYhk+atBDxlcKxskjDCh3OOEDpdKZPtw+3zucBqhlojRG5e5KtCmByGyYvwZswVeaSWglgLn2fibg==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     engines: {node: '>= 14.0.0'}
 
   alien-signals@0.4.14:
@@ -5760,8 +6413,13 @@ packages:
   balanced-match@2.0.0:
     resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
 
+<<<<<<< HEAD
   bare-events@2.8.0:
     resolution: {integrity: sha512-AOhh6Bg5QmFIXdViHbMc2tLDsBIRxdkIaIddPslJF9Z5De3APBScuqGP2uThXnIpqFrgoxMNC6km7uXNIMLHXA==}
+=======
+  bare-events@2.8.2:
+    resolution: {integrity: sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     peerDependencies:
       bare-abort-controller: '*'
     peerDependenciesMeta:
@@ -5798,8 +6456,13 @@ packages:
   bintrees@1.0.2:
     resolution: {integrity: sha512-VOMgTMwjAaUG580SXn3LacVgjurrbMme7ZZNYGSSV7mmtY6QQRh0Eg3pwIcntQ77DErK1L0NxkbetjcoXzVwKw==}
 
+<<<<<<< HEAD
   birpc@2.6.1:
     resolution: {integrity: sha512-LPnFhlDpdSH6FJhJyn4M0kFO7vtQ5iPw24FnG0y21q09xC7e8+1LeR31S1MAIrDAHp4m7aas4bEkTDTvMAtebQ==}
+=======
+  birpc@2.8.0:
+    resolution: {integrity: sha512-Bz2a4qD/5GRhiHSwj30c/8kC8QGj12nNDwz3D4ErQ4Xhy35dsSDvF+RA/tWpjyU0pdGtSDiEk6B5fBGE1qNVhw==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
@@ -6130,8 +6793,8 @@ packages:
     resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
     engines: {node: '>= 12.0.0'}
 
-  commitlint-plugin-function-rules@4.1.0:
-    resolution: {integrity: sha512-H4JTuIBA56eUgm4F4ifkataV9aVrEi1J0iwrrOSUti+6fbJ7JWZR6dcl9oiz/SbTzR9vVzq4Hk633CgcTiFTCA==}
+  commitlint-plugin-function-rules@4.1.1:
+    resolution: {integrity: sha512-ibvzq+9K6xWDn3+6GvJM0A007WTXuff+Z0qvVG4i36zNIvJ6fN+rsGWNK05MU8mMGrqQ0aOKKbc3QIQkOO+f5Q==}
     engines: {node: '>=20'}
     peerDependencies:
       '@commitlint/lint': '>=19 <21'
@@ -6880,8 +7543,13 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
+<<<<<<< HEAD
   electron-to-chromium@1.5.238:
     resolution: {integrity: sha512-khBdc+w/Gv+cS8e/Pbnaw/FXcBUeKrRVik9IxfXtgREOWyJhR4tj43n3amkVogJ/yeQUqzkrZcFhtIxIdqmmcQ==}
+=======
+  electron-to-chromium@1.5.249:
+    resolution: {integrity: sha512-5vcfL3BBe++qZ5kuFhD/p8WOM1N9m3nwvJPULJx+4xf2usSlZFJ0qoNYO2fOX4hi3ocuDcmDobtA+5SFr4OmBg==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   element-plus@2.11.5:
     resolution: {integrity: sha512-O+bIVHQCjUDm4GiIznDXRoS8ar2TpWLwfOGnN/Aam0VXf5kbuc4SxdKKJdovWNxmxeqbcwjsSZPKgtXNcqys4A==}
@@ -8710,8 +9378,13 @@ packages:
   min-dash@4.2.3:
     resolution: {integrity: sha512-VLMYQI5+FcD9Ad24VcB08uA83B07OhueAlZ88jBK6PyupTvEJwllTMUqMy0wPGYs7pZUEtEEMWdHB63m3LtEcg==}
 
+<<<<<<< HEAD
   min-document@2.19.0:
     resolution: {integrity: sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==}
+=======
+  min-document@2.19.1:
+    resolution: {integrity: sha512-8lqe85PkqQJzIcs2iD7xW/WSxcncC3/DPVbTOafKNJDIMXwGfwXS350mH4SJslomntN2iYtFBuC0yNO3CEap6g==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   min-dom@4.2.1:
     resolution: {integrity: sha512-TMoL8SEEIhUWYgkj7XMSgxmwSyGI+4fP2KFFGnN3FbHfbGHVdsLYSz8LoIsgPhz4dWRmLvxWWSMgzZMJW5sZuA==}
@@ -9189,8 +9862,8 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
-  path-scurry@2.0.0:
-    resolution: {integrity: sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==}
+  path-scurry@2.0.1:
+    resolution: {integrity: sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==}
     engines: {node: 20 || >=22}
 
   path-type@4.0.0:
@@ -10126,8 +10799,8 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
 
-  rollup@4.52.5:
-    resolution: {integrity: sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==}
+  rollup@4.53.1:
+    resolution: {integrity: sha512-n2I0V0lN3E9cxxMqBCT3opWOiQBzRN7UG60z/WDKqdX2zHUS/39lezBcsckZFsV6fUTSnfqI7kHf60jDAPGKug==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
@@ -10661,8 +11334,13 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+<<<<<<< HEAD
   svelte@5.41.1:
     resolution: {integrity: sha512-0a/huwc8e2es+7KFi70esqsReRfRbrT8h1cJSY/+z1lF0yKM6TT+//HYu28Yxstr50H7ifaqZRDGd0KuKDxP7w==}
+=======
+  svelte@5.43.5:
+    resolution: {integrity: sha512-HQoZArIewxQVNedseDsgMgnRSC4XOXczxXLF9rOJaPIJkg58INOPUiL8aEtzqZIXNSZJyw8NmqObwg/voajiHQ==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     engines: {node: '>=18'}
 
   sver@1.8.4:
@@ -10719,6 +11397,17 @@ packages:
     resolution: {integrity: sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==}
     engines: {node: '>=18'}
 
+  tdesign-icons-vue-next@0.4.1:
+    resolution: {integrity: sha512-uDPuTLRORnGcTyVGNoentNaK4V+ZcBmhYwcY3KqDaQQ5rrPeLMxu0ZVmgOEf0JtF2QZiqAxY7vodNEiLUdoRKA==}
+    peerDependencies:
+      vue: ^3.5.17
+
+  tdesign-vue-next@1.17.2:
+    resolution: {integrity: sha512-nTofPSKGQguOS+Lb62fDiLS1Rs3Ngzb8rE8sPEjfMdDjdFZ5kEUgvVp+J+8GKfgwVRAZRjv//qSzZVt6cqgXxA==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      vue: ^3.5.17
+
   temp-dir@2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
     engines: {node: '>=8'}
@@ -10769,6 +11458,9 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
+  tinycolor2@1.6.0:
+    resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
@@ -11149,6 +11841,10 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  validator@13.15.22:
+    resolution: {integrity: sha512-uT/YQjiyLJP7HSrv/dPZqK9L28xf8hsNca01HSz1dfmI0DgMfjopp1rO/z13NeGF1tVystF0Ejx3y4rUKPw+bQ==}
+    engines: {node: '>= 0.10'}
+
   vdirs@0.1.8:
     resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
     peerDependencies:
@@ -11270,8 +11966,13 @@ packages:
       terser:
         optional: true
 
+<<<<<<< HEAD
   vite@7.1.11:
     resolution: {integrity: sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==}
+=======
+  vite@7.2.2:
+    resolution: {integrity: sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -11425,13 +12126,21 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
+  vue3-print-nb@0.1.4:
+    resolution: {integrity: sha512-LExI7viEzplR6ZKQ2b+V4U0cwGYbVD4fut/XHvk3UPGlT5CcvIGs6VlwGp107aKgk6P8Pgx4rco3Rehv2lti3A==}
+
   vue3-signature@0.2.4:
     resolution: {integrity: sha512-XFwwFVK9OG3F085pKIq2SlNVqx32WdFH+TXbGEWc5FfEKpx8oMmZuAwZZ50K/pH2FgmJSE8IRwU9DDhrLpd6iA==}
     peerDependencies:
       vue: ^3.5.17
 
+<<<<<<< HEAD
   vue@3.5.22:
     resolution: {integrity: sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==}
+=======
+  vue@3.5.24:
+    resolution: {integrity: sha512-uTHDOpVQTMjcGgrqFPSb8iO2m1DUvo+WbGqoXQz8Y1CeBYQ0FXf2z1gLRaBtHjlRz7zZUBHxjVB5VTLzYkvftg==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -11448,11 +12157,19 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
+<<<<<<< HEAD
   vxe-pc-ui@4.10.5:
     resolution: {integrity: sha512-ASGSBIhEXRYmro/kVzK+es5DOchWvFXegM2osqrCIKQcFTAkLzLU4mZc8jOihNaxwy212819w8kLdS9KDwpvSg==}
 
   vxe-table@4.17.0:
     resolution: {integrity: sha512-IpyY5uzgMt4NEgTl0brAFe/xSyrBK8U0763uCG8LUe8TbGVuWMD5bCP9DYqkjK7cBmJjXtzwxlQ6I3auzCGd3Q==}
+=======
+  vxe-pc-ui@4.10.18:
+    resolution: {integrity: sha512-YNlD9vs5AfEbtne2adCUDT5qt+7gN9FvczjamYpPm+2G8pi2Vs7T7VlxMhXh6jzFIymzFn6UfV3oszgpG8cS0A==}
+
+  vxe-table@4.17.12:
+    resolution: {integrity: sha512-gutC0uNC0Et2kelZH7Cn/808m+DUm7Cef9fNTRBy+oZkieqqoBkXajf2pBTnVry+72nsXfSyg9dUMKYm6hqPcg==}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
@@ -11735,6 +12452,7 @@ packages:
 
 snapshots:
 
+<<<<<<< HEAD
   '@algolia/abtesting@1.6.1':
     dependencies:
       '@algolia/client-common': 5.40.1
@@ -11746,19 +12464,39 @@ snapshots:
     dependencies:
       '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)(search-insights@2.17.3)
       '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)
+=======
+  '@algolia/abtesting@1.9.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+      '@algolia/requester-browser-xhr': 5.43.0
+      '@algolia/requester-fetch': 5.43.0
+      '@algolia/requester-node-http': 5.43.0
+
+  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.43.0)(algoliasearch@5.43.0)(search-insights@2.17.3)':
+    dependencies:
+      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.43.0)(algoliasearch@5.43.0)(search-insights@2.17.3)
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.43.0)(algoliasearch@5.43.0)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
       - search-insights
 
+<<<<<<< HEAD
   '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)(search-insights@2.17.3)':
     dependencies:
       '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)
+=======
+  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.43.0)(algoliasearch@5.43.0)(search-insights@2.17.3)':
+    dependencies:
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.43.0)(algoliasearch@5.43.0)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
 
+<<<<<<< HEAD
   '@algolia/autocomplete-preset-algolia@1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)':
     dependencies:
       '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)
@@ -11846,6 +12584,95 @@ snapshots:
   '@algolia/requester-node-http@5.40.1':
     dependencies:
       '@algolia/client-common': 5.40.1
+=======
+  '@algolia/autocomplete-preset-algolia@1.17.7(@algolia/client-search@5.43.0)(algoliasearch@5.43.0)':
+    dependencies:
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.43.0)(algoliasearch@5.43.0)
+      '@algolia/client-search': 5.43.0
+      algoliasearch: 5.43.0
+
+  '@algolia/autocomplete-shared@1.17.7(@algolia/client-search@5.43.0)(algoliasearch@5.43.0)':
+    dependencies:
+      '@algolia/client-search': 5.43.0
+      algoliasearch: 5.43.0
+
+  '@algolia/client-abtesting@5.43.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+      '@algolia/requester-browser-xhr': 5.43.0
+      '@algolia/requester-fetch': 5.43.0
+      '@algolia/requester-node-http': 5.43.0
+
+  '@algolia/client-analytics@5.43.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+      '@algolia/requester-browser-xhr': 5.43.0
+      '@algolia/requester-fetch': 5.43.0
+      '@algolia/requester-node-http': 5.43.0
+
+  '@algolia/client-common@5.43.0': {}
+
+  '@algolia/client-insights@5.43.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+      '@algolia/requester-browser-xhr': 5.43.0
+      '@algolia/requester-fetch': 5.43.0
+      '@algolia/requester-node-http': 5.43.0
+
+  '@algolia/client-personalization@5.43.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+      '@algolia/requester-browser-xhr': 5.43.0
+      '@algolia/requester-fetch': 5.43.0
+      '@algolia/requester-node-http': 5.43.0
+
+  '@algolia/client-query-suggestions@5.43.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+      '@algolia/requester-browser-xhr': 5.43.0
+      '@algolia/requester-fetch': 5.43.0
+      '@algolia/requester-node-http': 5.43.0
+
+  '@algolia/client-search@5.43.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+      '@algolia/requester-browser-xhr': 5.43.0
+      '@algolia/requester-fetch': 5.43.0
+      '@algolia/requester-node-http': 5.43.0
+
+  '@algolia/ingestion@1.43.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+      '@algolia/requester-browser-xhr': 5.43.0
+      '@algolia/requester-fetch': 5.43.0
+      '@algolia/requester-node-http': 5.43.0
+
+  '@algolia/monitoring@1.43.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+      '@algolia/requester-browser-xhr': 5.43.0
+      '@algolia/requester-fetch': 5.43.0
+      '@algolia/requester-node-http': 5.43.0
+
+  '@algolia/recommend@5.43.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+      '@algolia/requester-browser-xhr': 5.43.0
+      '@algolia/requester-fetch': 5.43.0
+      '@algolia/requester-node-http': 5.43.0
+
+  '@algolia/requester-browser-xhr@5.43.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+
+  '@algolia/requester-fetch@5.43.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+
+  '@algolia/requester-node-http@5.43.0':
+    dependencies:
+      '@algolia/client-common': 5.43.0
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@alloc/quick-lru@5.2.0': {}
 
@@ -11855,11 +12682,19 @@ snapshots:
 
   '@ant-design/icons-svg@4.4.2': {}
 
+<<<<<<< HEAD
   '@ant-design/icons-vue@7.0.1(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@ant-design/colors': 6.0.0
       '@ant-design/icons-svg': 4.4.2
       vue: 3.5.22(typescript@5.9.3)
+=======
+  '@ant-design/icons-vue@7.0.1(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-svg': 4.4.2
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@antfu/install-pkg@1.1.0':
     dependencies:
@@ -12758,7 +13593,7 @@ snapshots:
       '@changesets/should-skip-package': 0.1.2
       '@changesets/types': 6.1.0
       '@changesets/write': 0.4.0
-      '@inquirer/external-editor': 1.0.2(@types/node@24.10.0)
+      '@inquirer/external-editor': 1.0.3(@types/node@24.10.0)
       '@manypkg/get-packages': 1.1.3
       ansi-colors: 4.1.3
       ci-info: 3.9.0
@@ -13244,9 +14079,15 @@ snapshots:
     dependencies:
       css-render: 0.15.14
 
+<<<<<<< HEAD
   '@css-render/vue3-ssr@0.15.14(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       vue: 3.5.22(typescript@5.9.3)
+=======
+  '@css-render/vue3-ssr@0.15.14(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@csstools/cascade-layer-name-parser@2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
     dependencies:
@@ -13545,9 +14386,15 @@ snapshots:
 
   '@docsearch/css@3.8.2': {}
 
+<<<<<<< HEAD
   '@docsearch/js@3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)':
     dependencies:
       '@docsearch/react': 3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)
+=======
+  '@docsearch/js@3.8.2(@algolia/client-search@5.43.0)(search-insights@2.17.3)':
+    dependencies:
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.43.0)(search-insights@2.17.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       preact: 10.27.2
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -13556,12 +14403,21 @@ snapshots:
       - react-dom
       - search-insights
 
+<<<<<<< HEAD
   '@docsearch/react@3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)':
     dependencies:
       '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)(search-insights@2.17.3)
       '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)
       '@docsearch/css': 3.8.2
       algoliasearch: 5.40.1
+=======
+  '@docsearch/react@3.8.2(@algolia/client-search@5.43.0)(search-insights@2.17.3)':
+    dependencies:
+      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.43.0)(algoliasearch@5.43.0)(search-insights@2.17.3)
+      '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.43.0)(algoliasearch@5.43.0)
+      '@docsearch/css': 3.8.2
+      algoliasearch: 5.43.0
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     optionalDependencies:
       search-insights: 2.17.3
     transitivePeerDependencies:
@@ -13569,9 +14425,15 @@ snapshots:
 
   '@dual-bundle/import-meta-resolve@4.2.1': {}
 
+<<<<<<< HEAD
   '@element-plus/icons-vue@2.3.2(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       vue: 3.5.22(typescript@5.9.3)
+=======
+  '@element-plus/icons-vue@2.3.2(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@emnapi/core@1.6.0':
     dependencies:
@@ -13746,21 +14608,34 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+<<<<<<< HEAD
   '@floating-ui/vue@1.1.9(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@floating-ui/dom': 1.7.4
       '@floating-ui/utils': 0.2.10
       vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
+=======
+  '@floating-ui/vue@1.1.9(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@floating-ui/utils': 0.2.10
+      vue-demi: 0.14.10(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
+<<<<<<< HEAD
   '@form-create/ant-design-vue@3.2.31(vue@3.5.22(typescript@5.9.3))':
+=======
+  '@form-create/ant-design-vue@3.2.32(vue@3.5.24(typescript@5.9.3))':
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@form-create/component-antdv-frame': 3.2.31
       '@form-create/component-antdv-group': 3.2.31
       '@form-create/component-antdv-upload': 3.2.31
       '@form-create/component-subform': 3.1.34
+<<<<<<< HEAD
       '@form-create/core': 3.2.31(vue@3.5.22(typescript@5.9.3))
       '@form-create/utils': 3.2.31
       vue: 3.5.22(typescript@5.9.3)
@@ -13776,6 +14651,23 @@ snapshots:
       signature_pad: 5.1.1
       vue: 3.5.22(typescript@5.9.3)
       vuedraggable: 4.1.0(vue@3.5.22(typescript@5.9.3))
+=======
+      '@form-create/core': 3.2.32(vue@3.5.24(typescript@5.9.3))
+      '@form-create/utils': 3.2.31
+      vue: 3.5.24(typescript@5.9.3)
+
+  '@form-create/antd-designer@3.3.2(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@form-create/ant-design-vue': 3.2.32(vue@3.5.24(typescript@5.9.3))
+      '@form-create/component-wangeditor': 3.2.14
+      '@form-create/utils': 3.2.31
+      ant-design-vue: 4.2.6(vue@3.5.24(typescript@5.9.3))
+      codemirror: 6.65.7
+      js-beautify: 1.15.4
+      signature_pad: 5.1.1
+      vue: 3.5.24(typescript@5.9.3)
+      vuedraggable: 4.1.0(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@form-create/component-antdv-frame@3.2.31':
     dependencies:
@@ -13823,6 +14715,7 @@ snapshots:
     dependencies:
       wangeditor: 4.7.15
 
+<<<<<<< HEAD
   '@form-create/core@3.2.31(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@form-create/utils': 3.2.31
@@ -13843,6 +14736,28 @@ snapshots:
       - '@vue/composition-api'
 
   '@form-create/element-ui@3.2.31(vue@3.5.22(typescript@5.9.3))':
+=======
+  '@form-create/core@3.2.32(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@form-create/utils': 3.2.31
+      vue: 3.5.24(typescript@5.9.3)
+
+  '@form-create/designer@3.3.1(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@form-create/component-wangeditor': 3.2.14
+      '@form-create/element-ui': 3.2.32(vue@3.5.24(typescript@5.9.3))
+      '@form-create/utils': 3.2.31
+      codemirror: 6.65.7
+      element-plus: 2.11.7(vue@3.5.24(typescript@5.9.3))
+      js-beautify: 1.15.4
+      signature_pad: 5.1.1
+      vue: 3.5.24(typescript@5.9.3)
+      vuedraggable: 4.1.0(vue@3.5.24(typescript@5.9.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
+  '@form-create/element-ui@3.2.32(vue@3.5.24(typescript@5.9.3))':
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@form-create/component-elm-checkbox': 3.2.31
       '@form-create/component-elm-frame': 3.2.31
@@ -13852,9 +14767,15 @@ snapshots:
       '@form-create/component-elm-tree': 3.2.31
       '@form-create/component-elm-upload': 3.2.31
       '@form-create/component-subform': 3.1.34
+<<<<<<< HEAD
       '@form-create/core': 3.2.31(vue@3.5.22(typescript@5.9.3))
       '@form-create/utils': 3.2.31
       vue: 3.5.22(typescript@5.9.3)
+=======
+      '@form-create/core': 3.2.32(vue@3.5.24(typescript@5.9.3))
+      '@form-create/utils': 3.2.31
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@form-create/utils@3.2.31': {}
 
@@ -13877,11 +14798,19 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+<<<<<<< HEAD
   '@iconify-json/octicon@1.2.16':
     dependencies:
       '@iconify/types': 2.0.0
 
   '@iconify-json/simple-icons@1.2.55':
+=======
+  '@iconify-json/octicon@1.2.18':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/simple-icons@1.2.58':
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@iconify/types': 2.0.0
 
@@ -13889,7 +14818,11 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+<<<<<<< HEAD
   '@iconify/json@2.2.398':
+=======
+  '@iconify/json@2.2.405':
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 2.0.3
@@ -13913,12 +14846,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+<<<<<<< HEAD
   '@iconify/vue@5.0.0(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@iconify/types': 2.0.0
       vue: 3.5.22(typescript@5.9.3)
+=======
+  '@iconify/vue@5.0.0(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
-  '@inquirer/external-editor@1.0.2(@types/node@24.10.0)':
+  '@inquirer/external-editor@1.0.3(@types/node@24.10.0)':
     dependencies:
       chardet: 2.1.0
       iconv-lite: 0.7.0
@@ -13933,7 +14873,11 @@ snapshots:
     dependencies:
       '@swc/helpers': 0.5.17
 
+<<<<<<< HEAD
   '@intlify/bundle-utils@10.0.1(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))':
+=======
+  '@intlify/bundle-utils@10.0.1(vue-i18n@11.1.12(vue@3.5.24(typescript@5.9.3)))':
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@intlify/message-compiler': 11.1.12
       '@intlify/shared': 11.1.12
@@ -13945,7 +14889,11 @@ snapshots:
       source-map-js: 1.2.1
       yaml-eslint-parser: 1.3.0
     optionalDependencies:
+<<<<<<< HEAD
       vue-i18n: 11.1.12(vue@3.5.22(typescript@5.9.3))
+=======
+      vue-i18n: 11.1.12(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@intlify/core-base@11.1.12':
     dependencies:
@@ -13959,6 +14907,7 @@ snapshots:
 
   '@intlify/shared@11.1.12': {}
 
+<<<<<<< HEAD
   '@intlify/unplugin-vue-i18n@6.0.8(@vue/compiler-dom@3.5.22)(eslint@9.38.0(jiti@2.6.1))(rollup@4.52.5)(typescript@5.9.3)(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
@@ -13968,6 +14917,17 @@ snapshots:
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       '@typescript-eslint/scope-manager': 8.46.2
       '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
+=======
+  '@intlify/unplugin-vue-i18n@6.0.8(@vue/compiler-dom@3.5.24)(eslint@9.39.1(jiti@2.6.1))(rollup@4.53.1)(typescript@5.9.3)(vue-i18n@11.1.12(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@intlify/bundle-utils': 10.0.1(vue-i18n@11.1.12(vue@3.5.24(typescript@5.9.3)))
+      '@intlify/shared': 11.1.12
+      '@intlify/vue-i18n-extensions': 8.0.0(@intlify/shared@11.1.12)(@vue/compiler-dom@3.5.24)(vue-i18n@11.1.12(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.1)
+      '@typescript-eslint/scope-manager': 8.46.3
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       debug: 4.4.3
       fast-glob: 3.3.3
       js-yaml: 4.1.0
@@ -13976,9 +14936,15 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
       unplugin: 1.16.1
+<<<<<<< HEAD
       vue: 3.5.22(typescript@5.9.3)
     optionalDependencies:
       vue-i18n: 11.1.12(vue@3.5.22(typescript@5.9.3))
+=======
+      vue: 3.5.24(typescript@5.9.3)
+    optionalDependencies:
+      vue-i18n: 11.1.12(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - '@vue/compiler-dom'
       - eslint
@@ -13986,14 +14952,24 @@ snapshots:
       - supports-color
       - typescript
 
+<<<<<<< HEAD
   '@intlify/vue-i18n-extensions@8.0.0(@intlify/shared@11.1.12)(@vue/compiler-dom@3.5.22)(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))':
+=======
+  '@intlify/vue-i18n-extensions@8.0.0(@intlify/shared@11.1.12)(@vue/compiler-dom@3.5.24)(vue-i18n@11.1.12(vue@3.5.24(typescript@5.9.3)))(vue@3.5.24(typescript@5.9.3))':
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@babel/parser': 7.28.4
     optionalDependencies:
       '@intlify/shared': 11.1.12
+<<<<<<< HEAD
       '@vue/compiler-dom': 3.5.22
       vue: 3.5.22(typescript@5.9.3)
       vue-i18n: 11.1.12(vue@3.5.22(typescript@5.9.3))
+=======
+      '@vue/compiler-dom': 3.5.24
+      vue: 3.5.24(typescript@5.9.3)
+      vue-i18n: 11.1.12(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@ioredis/commands@1.4.0': {}
 
@@ -14185,6 +15161,7 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
+<<<<<<< HEAD
   '@nolebase/ui@2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@iconify-json/octicon': 1.2.16
@@ -14196,6 +15173,19 @@ snapshots:
     dependencies:
       '@iconify-json/octicon': 1.2.16
       '@nolebase/ui': 2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
+=======
+  '@nolebase/ui@2.18.2(vitepress@1.6.4(@algolia/client-search@5.43.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3))(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@iconify-json/octicon': 1.2.18
+      less: 4.4.2
+      vitepress: 1.6.4(@algolia/client-search@5.43.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3)
+      vue: 3.5.24(typescript@5.9.3)
+
+  '@nolebase/vitepress-plugin-git-changelog@2.18.2(vitepress@1.6.4(@algolia/client-search@5.43.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3))(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@iconify-json/octicon': 1.2.18
+      '@nolebase/ui': 2.18.2(vitepress@1.6.4(@algolia/client-search@5.43.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3))(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       colorette: 2.0.20
       date-fns: 4.1.0
       defu: 6.1.4
@@ -14205,7 +15195,11 @@ snapshots:
       gray-matter: 4.0.3
       less: 4.4.2
       uncrypto: 0.1.3
+<<<<<<< HEAD
       vitepress: 1.6.4(@algolia/client-search@5.40.1)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3)
+=======
+      vitepress: 1.6.4(@algolia/client-search@5.43.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - vue
 
@@ -14213,7 +15207,11 @@ snapshots:
     dependencies:
       semver: 7.7.3
 
+<<<<<<< HEAD
   '@nuxt/kit@3.19.3(magicast@0.3.5)':
+=======
+  '@nuxt/kit@3.20.1':
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       c12: 3.3.1(magicast@0.3.5)
       consola: 3.4.2
@@ -14336,13 +15334,13 @@ snapshots:
       '@pnpm/network.ca-file': 1.0.2
       config-chain: 1.1.13
 
-  '@pnpm/types@1000.9.0': {}
+  '@pnpm/types@1001.0.0': {}
 
-  '@pnpm/workspace.read-manifest@1000.2.5':
+  '@pnpm/workspace.read-manifest@1000.2.6':
     dependencies:
       '@pnpm/constants': 1001.3.1
       '@pnpm/error': 1000.0.5
-      '@pnpm/types': 1000.9.0
+      '@pnpm/types': 1001.0.0
       read-yaml-file: 2.1.0
 
   '@polka/url@1.0.0-next.29': {}
@@ -14367,9 +15365,9 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-beta.44': {}
 
-  '@rollup/plugin-alias@5.1.1(rollup@4.52.5)':
+  '@rollup/plugin-alias@5.1.1(rollup@4.53.1)':
     optionalDependencies:
-      rollup: 4.52.5
+      rollup: 4.53.1
 
   '@rollup/plugin-babel@5.3.1(@babel/core@7.28.4)(rollup@2.79.2)':
     dependencies:
@@ -14380,9 +15378,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+<<<<<<< HEAD
   '@rollup/plugin-commonjs@28.0.8(rollup@4.52.5)':
+=======
+  '@rollup/plugin-commonjs@28.0.9(rollup@4.53.1)':
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.1)
       commondir: 1.0.1
       estree-walker: 2.0.2
       fdir: 6.5.0(picomatch@4.0.3)
@@ -14390,21 +15392,21 @@ snapshots:
       magic-string: 0.30.19
       picomatch: 4.0.3
     optionalDependencies:
-      rollup: 4.52.5
+      rollup: 4.53.1
 
-  '@rollup/plugin-inject@5.0.5(rollup@4.52.5)':
+  '@rollup/plugin-inject@5.0.5(rollup@4.53.1)':
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.1)
       estree-walker: 2.0.2
       magic-string: 0.30.19
     optionalDependencies:
-      rollup: 4.52.5
+      rollup: 4.53.1
 
-  '@rollup/plugin-json@6.1.0(rollup@4.52.5)':
+  '@rollup/plugin-json@6.1.0(rollup@4.53.1)':
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.1)
     optionalDependencies:
-      rollup: 4.52.5
+      rollup: 4.53.1
 
   '@rollup/plugin-node-resolve@15.3.1(rollup@2.79.2)':
     dependencies:
@@ -14416,15 +15418,15 @@ snapshots:
     optionalDependencies:
       rollup: 2.79.2
 
-  '@rollup/plugin-node-resolve@16.0.3(rollup@4.52.5)':
+  '@rollup/plugin-node-resolve@16.0.3(rollup@4.53.1)':
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.1)
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.11
     optionalDependencies:
-      rollup: 4.52.5
+      rollup: 4.53.1
 
   '@rollup/plugin-replace@2.4.2(rollup@2.79.2)':
     dependencies:
@@ -14432,12 +15434,19 @@ snapshots:
       magic-string: 0.25.9
       rollup: 2.79.2
 
+<<<<<<< HEAD
   '@rollup/plugin-replace@6.0.2(rollup@4.52.5)':
     dependencies:
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       magic-string: 0.30.19
+=======
+  '@rollup/plugin-replace@6.0.3(rollup@4.53.1)':
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.1)
+      magic-string: 0.30.21
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     optionalDependencies:
-      rollup: 4.52.5
+      rollup: 4.53.1
 
   '@rollup/plugin-terser@0.4.4(rollup@2.79.2)':
     dependencies:
@@ -14447,13 +15456,13 @@ snapshots:
     optionalDependencies:
       rollup: 2.79.2
 
-  '@rollup/plugin-terser@0.4.4(rollup@4.52.5)':
+  '@rollup/plugin-terser@0.4.4(rollup@4.53.1)':
     dependencies:
       serialize-javascript: 6.0.2
       smob: 1.5.0
       terser: 5.44.0
     optionalDependencies:
-      rollup: 4.52.5
+      rollup: 4.53.1
 
   '@rollup/pluginutils@3.1.0(rollup@2.79.2)':
     dependencies:
@@ -14475,78 +15484,78 @@ snapshots:
     optionalDependencies:
       rollup: 2.79.2
 
-  '@rollup/pluginutils@5.3.0(rollup@4.52.5)':
+  '@rollup/pluginutils@5.3.0(rollup@4.53.1)':
     dependencies:
       '@types/estree': 1.0.8
       estree-walker: 2.0.2
       picomatch: 4.0.3
     optionalDependencies:
-      rollup: 4.52.5
+      rollup: 4.53.1
 
-  '@rollup/rollup-android-arm-eabi@4.52.5':
+  '@rollup/rollup-android-arm-eabi@4.53.1':
     optional: true
 
-  '@rollup/rollup-android-arm64@4.52.5':
+  '@rollup/rollup-android-arm64@4.53.1':
     optional: true
 
-  '@rollup/rollup-darwin-arm64@4.52.5':
+  '@rollup/rollup-darwin-arm64@4.53.1':
     optional: true
 
-  '@rollup/rollup-darwin-x64@4.52.5':
+  '@rollup/rollup-darwin-x64@4.53.1':
     optional: true
 
-  '@rollup/rollup-freebsd-arm64@4.52.5':
+  '@rollup/rollup-freebsd-arm64@4.53.1':
     optional: true
 
-  '@rollup/rollup-freebsd-x64@4.52.5':
+  '@rollup/rollup-freebsd-x64@4.53.1':
     optional: true
 
-  '@rollup/rollup-linux-arm-gnueabihf@4.52.5':
+  '@rollup/rollup-linux-arm-gnueabihf@4.53.1':
     optional: true
 
-  '@rollup/rollup-linux-arm-musleabihf@4.52.5':
+  '@rollup/rollup-linux-arm-musleabihf@4.53.1':
     optional: true
 
-  '@rollup/rollup-linux-arm64-gnu@4.52.5':
+  '@rollup/rollup-linux-arm64-gnu@4.53.1':
     optional: true
 
-  '@rollup/rollup-linux-arm64-musl@4.52.5':
+  '@rollup/rollup-linux-arm64-musl@4.53.1':
     optional: true
 
-  '@rollup/rollup-linux-loong64-gnu@4.52.5':
+  '@rollup/rollup-linux-loong64-gnu@4.53.1':
     optional: true
 
-  '@rollup/rollup-linux-ppc64-gnu@4.52.5':
+  '@rollup/rollup-linux-ppc64-gnu@4.53.1':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-gnu@4.52.5':
+  '@rollup/rollup-linux-riscv64-gnu@4.53.1':
     optional: true
 
-  '@rollup/rollup-linux-riscv64-musl@4.52.5':
+  '@rollup/rollup-linux-riscv64-musl@4.53.1':
     optional: true
 
-  '@rollup/rollup-linux-s390x-gnu@4.52.5':
+  '@rollup/rollup-linux-s390x-gnu@4.53.1':
     optional: true
 
-  '@rollup/rollup-linux-x64-gnu@4.52.5':
+  '@rollup/rollup-linux-x64-gnu@4.53.1':
     optional: true
 
-  '@rollup/rollup-linux-x64-musl@4.52.5':
+  '@rollup/rollup-linux-x64-musl@4.53.1':
     optional: true
 
-  '@rollup/rollup-openharmony-arm64@4.52.5':
+  '@rollup/rollup-openharmony-arm64@4.53.1':
     optional: true
 
-  '@rollup/rollup-win32-arm64-msvc@4.52.5':
+  '@rollup/rollup-win32-arm64-msvc@4.53.1':
     optional: true
 
-  '@rollup/rollup-win32-ia32-msvc@4.52.5':
+  '@rollup/rollup-win32-ia32-msvc@4.53.1':
     optional: true
 
-  '@rollup/rollup-win32-x64-gnu@4.52.5':
+  '@rollup/rollup-win32-x64-gnu@4.53.1':
     optional: true
 
-  '@rollup/rollup-win32-x64-msvc@4.52.5':
+  '@rollup/rollup-win32-x64-msvc@4.53.1':
     optional: true
 
   '@rushstack/node-core-library@5.17.1(@types/node@24.10.0)':
@@ -14662,9 +15671,15 @@ snapshots:
       magic-string: 0.25.9
       string.prototype.matchall: 4.0.12
 
+<<<<<<< HEAD
   '@svelte-put/shortcut@4.1.0(svelte@5.41.1)':
     dependencies:
       svelte: 5.41.1
+=======
+  '@svelte-put/shortcut@4.1.0(svelte@5.43.5)':
+    dependencies:
+      svelte: 5.43.5
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@sveltejs/acorn-typescript@1.0.6(acorn@8.15.0)':
     dependencies:
@@ -14696,11 +15711,16 @@ snapshots:
 
   '@tanstack/virtual-core@3.13.12': {}
 
+<<<<<<< HEAD
   '@tanstack/vue-query@5.90.5(vue@3.5.22(typescript@5.9.3))':
+=======
+  '@tanstack/vue-query@5.90.7(vue@3.5.24(typescript@5.9.3))':
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@tanstack/match-sorter-utils': 8.19.4
       '@tanstack/query-core': 5.90.5
       '@vue/devtools-api': 6.6.4
+<<<<<<< HEAD
       vue: 3.5.22(typescript@5.9.3)
       vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
 
@@ -14732,6 +15752,39 @@ snapshots:
   '@tinymce/tinymce-vue@6.3.0(tinymce@7.9.1)(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       vue: 3.5.22(typescript@5.9.3)
+=======
+      vue: 3.5.24(typescript@5.9.3)
+      vue-demi: 0.14.10(vue@3.5.24(typescript@5.9.3))
+
+  '@tanstack/vue-store@0.7.7(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@tanstack/store': 0.7.7
+      vue: 3.5.24(typescript@5.9.3)
+      vue-demi: 0.14.10(vue@3.5.24(typescript@5.9.3))
+
+  '@tanstack/vue-virtual@3.13.12(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.12
+      vue: 3.5.24(typescript@5.9.3)
+
+  '@tinyflow-ai/ui@1.1.9(svelte@5.43.5)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@xyflow/svelte': 1.4.1(svelte@5.43.5)
+    transitivePeerDependencies:
+      - svelte
+
+  '@tinyflow-ai/vue@1.1.9(svelte@5.43.5)(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@tinyflow-ai/ui': 1.1.9(svelte@5.43.5)
+      vue: 3.5.24(typescript@5.9.3)
+    transitivePeerDependencies:
+      - svelte
+
+  '@tinymce/tinymce-vue@6.3.0(tinymce@7.9.1)(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     optionalDependencies:
       tinymce: 7.9.1
 
@@ -14985,10 +16038,17 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.8
 
+  '@types/tinycolor2@1.4.6': {}
+
   '@types/trusted-types@2.0.7': {}
 
   '@types/unist@3.0.3': {}
 
+<<<<<<< HEAD
+=======
+  '@types/validator@13.15.4': {}
+
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
   '@types/video.js@7.3.58': {}
 
   '@types/web-bluetooth@0.0.16': {}
@@ -15187,18 +16247,25 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
+<<<<<<< HEAD
   '@vee-validate/zod@4.15.1(vue@3.5.22(typescript@5.9.3))(zod@3.25.76)':
     dependencies:
       type-fest: 4.41.0
       vee-validate: 4.15.1(vue@3.5.22(typescript@5.9.3))
+=======
+  '@vee-validate/zod@4.15.1(vue@3.5.24(typescript@5.9.3))(zod@3.25.76)':
+    dependencies:
+      type-fest: 4.41.0
+      vee-validate: 4.15.1(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       zod: 3.25.76
     transitivePeerDependencies:
       - vue
 
-  '@vercel/nft@0.30.3(rollup@4.52.5)':
+  '@vercel/nft@0.30.3(rollup@4.53.1)':
     dependencies:
       '@mapbox/node-pre-gyp': 2.0.0
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.1)
       acorn: 8.15.0
       acorn-import-attributes: 1.9.5(acorn@8.15.0)
       async-sema: 3.1.1
@@ -15214,12 +16281,46 @@ snapshots:
       - rollup
       - supports-color
 
+<<<<<<< HEAD
   '@videojs-player/vue@1.0.0(@types/video.js@7.3.58)(video.js@7.21.7)(vue@3.5.22(typescript@5.9.3))':
+=======
+  '@videojs-player/vue@1.0.0(@types/video.js@7.3.58)(video.js@7.21.7)(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@types/video.js': 7.3.58
+      video.js: 7.21.7
+      vue: 3.5.24(typescript@5.9.3)
+
+  '@videojs/http-streaming@2.16.3(video.js@7.21.7)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@videojs/vhs-utils': 3.0.5
+      aes-decrypter: 3.1.3
+      global: 4.4.0
+      m3u8-parser: 4.8.0
+      mpd-parser: 0.22.1
+      mux.js: 6.0.1
+      video.js: 7.21.7
+
+  '@videojs/vhs-utils@3.0.5':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      global: 4.4.0
+      url-toolkit: 2.2.5
+
+  '@videojs/xhr@2.6.0':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      global: 4.4.0
+      is-function: 1.0.2
+
+  '@vite-pwa/vitepress@1.0.1(vite-plugin-pwa@1.1.0(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1))(workbox-build@7.3.0)(workbox-window@7.3.0))':
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@types/video.js': 7.3.58
       video.js: 7.21.7
       vue: 3.5.22(typescript@5.9.3)
 
+<<<<<<< HEAD
   '@videojs/http-streaming@2.16.3(video.js@7.21.7)':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -15269,6 +16370,30 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.29
       vite: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vue: 3.5.22(typescript@5.9.3)
+=======
+  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+      '@rolldown/pluginutils': 1.0.0-beta.47
+      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.5)
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+      vue: 3.5.24(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vitejs/plugin-vue@5.2.4(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1))(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      vite: 5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)
+      vue: 3.5.24(typescript@5.9.3)
+
+  '@vitejs/plugin-vue@6.0.1(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.0-beta.29
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@vitest/expect@3.2.4':
     dependencies:
@@ -15278,13 +16403,21 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
+<<<<<<< HEAD
   '@vitest/mocker@3.2.4(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))':
+=======
+  '@vitest/mocker@3.2.4(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))':
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.19
     optionalDependencies:
+<<<<<<< HEAD
       vite: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+=======
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -15335,8 +16468,13 @@ snapshots:
       '@babel/traverse': 7.28.4
       '@babel/types': 7.28.4
       '@vue/babel-helper-vue-transform-on': 1.5.0
+<<<<<<< HEAD
       '@vue/babel-plugin-resolve-type': 1.5.0(@babel/core@7.28.4)
       '@vue/shared': 3.5.22
+=======
+      '@vue/babel-plugin-resolve-type': 1.5.0(@babel/core@7.28.5)
+      '@vue/shared': 3.5.24
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     optionalDependencies:
       '@babel/core': 7.28.4
     transitivePeerDependencies:
@@ -15348,6 +16486,7 @@ snapshots:
       '@babel/core': 7.28.4
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
+<<<<<<< HEAD
       '@babel/parser': 7.28.4
       '@vue/compiler-sfc': 3.5.22
     transitivePeerDependencies:
@@ -15357,10 +16496,22 @@ snapshots:
     dependencies:
       '@babel/parser': 7.28.4
       '@vue/shared': 3.5.22
+=======
+      '@babel/parser': 7.28.5
+      '@vue/compiler-sfc': 3.5.24
+    transitivePeerDependencies:
+      - supports-color
+
+  '@vue/compiler-core@3.5.24':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@vue/shared': 3.5.24
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
+<<<<<<< HEAD
   '@vue/compiler-dom@3.5.22':
     dependencies:
       '@vue/compiler-core': 3.5.22
@@ -15373,15 +16524,36 @@ snapshots:
       '@vue/compiler-dom': 3.5.22
       '@vue/compiler-ssr': 3.5.22
       '@vue/shared': 3.5.22
+=======
+  '@vue/compiler-dom@3.5.24':
+    dependencies:
+      '@vue/compiler-core': 3.5.24
+      '@vue/shared': 3.5.24
+
+  '@vue/compiler-sfc@3.5.24':
+    dependencies:
+      '@babel/parser': 7.28.5
+      '@vue/compiler-core': 3.5.24
+      '@vue/compiler-dom': 3.5.24
+      '@vue/compiler-ssr': 3.5.24
+      '@vue/shared': 3.5.24
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       estree-walker: 2.0.2
       magic-string: 0.30.19
       postcss: 8.5.6
       source-map-js: 1.2.1
 
+<<<<<<< HEAD
   '@vue/compiler-ssr@3.5.22':
     dependencies:
       '@vue/compiler-dom': 3.5.22
       '@vue/shared': 3.5.22
+=======
+  '@vue/compiler-ssr@3.5.24':
+    dependencies:
+      '@vue/compiler-dom': 3.5.24
+      '@vue/shared': 3.5.24
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@vue/compiler-vue2@2.7.16':
     dependencies:
@@ -15394,22 +16566,35 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.7.7
 
+<<<<<<< HEAD
   '@vue/devtools-core@7.7.7(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+=======
+  '@vue/devtools-core@7.7.7(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.24(typescript@5.9.3))':
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@vue/devtools-kit': 7.7.7
       '@vue/devtools-shared': 7.7.7
       mitt: 3.0.1
       nanoid: 5.1.6
       pathe: 2.0.3
+<<<<<<< HEAD
       vite-hot-client: 2.1.0(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
       vue: 3.5.22(typescript@5.9.3)
+=======
+      vite-hot-client: 2.1.0(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - vite
 
   '@vue/devtools-kit@7.7.7':
     dependencies:
       '@vue/devtools-shared': 7.7.7
+<<<<<<< HEAD
       birpc: 2.6.1
+=======
+      birpc: 2.8.0
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       hookable: 5.5.3
       mitt: 3.0.1
       perfect-debounce: 1.0.0
@@ -15423,9 +16608,15 @@ snapshots:
   '@vue/language-core@2.2.0(typescript@5.9.3)':
     dependencies:
       '@volar/language-core': 2.4.23
+<<<<<<< HEAD
       '@vue/compiler-dom': 3.5.22
       '@vue/compiler-vue2': 2.7.16
       '@vue/shared': 3.5.22
+=======
+      '@vue/compiler-dom': 3.5.24
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.24
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       alien-signals: 0.4.14
       minimatch: 9.0.5
       muggle-string: 0.4.1
@@ -15436,9 +16627,15 @@ snapshots:
   '@vue/language-core@2.2.10(typescript@5.9.3)':
     dependencies:
       '@volar/language-core': 2.4.23
+<<<<<<< HEAD
       '@vue/compiler-dom': 3.5.22
       '@vue/compiler-vue2': 2.7.16
       '@vue/shared': 3.5.22
+=======
+      '@vue/compiler-dom': 3.5.24
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.24
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       alien-signals: 1.0.13
       minimatch: 9.0.5
       muggle-string: 0.4.1
@@ -15446,6 +16643,7 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+<<<<<<< HEAD
   '@vue/reactivity@3.5.22':
     dependencies:
       '@vue/shared': 3.5.22
@@ -15469,6 +16667,31 @@ snapshots:
       vue: 3.5.22(typescript@5.9.3)
 
   '@vue/shared@3.5.22': {}
+=======
+  '@vue/reactivity@3.5.24':
+    dependencies:
+      '@vue/shared': 3.5.24
+
+  '@vue/runtime-core@3.5.24':
+    dependencies:
+      '@vue/reactivity': 3.5.24
+      '@vue/shared': 3.5.24
+
+  '@vue/runtime-dom@3.5.24':
+    dependencies:
+      '@vue/reactivity': 3.5.24
+      '@vue/runtime-core': 3.5.24
+      '@vue/shared': 3.5.24
+      csstype: 3.1.3
+
+  '@vue/server-renderer@3.5.24(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@vue/compiler-ssr': 3.5.24
+      '@vue/shared': 3.5.24
+      vue: 3.5.24(typescript@5.9.3)
+
+  '@vue/shared@3.5.24': {}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@vue/test-utils@2.4.6':
     dependencies:
@@ -15486,6 +16709,7 @@ snapshots:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 12.8.2
       '@vueuse/shared': 12.8.2(typescript@5.9.3)
+<<<<<<< HEAD
       vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - typescript
@@ -15510,6 +16734,32 @@ snapshots:
       '@vueuse/metadata': 9.13.0
       '@vueuse/shared': 9.13.0(vue@3.5.22(typescript@5.9.3))
       vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
+=======
+      vue: 3.5.24(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@vueuse/core@13.9.0(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 13.9.0
+      '@vueuse/shared': 13.9.0(vue@3.5.24(typescript@5.9.3))
+      vue: 3.5.24(typescript@5.9.3)
+
+  '@vueuse/core@14.0.0(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.0.0
+      '@vueuse/shared': 14.0.0(vue@3.5.24(typescript@5.9.3))
+      vue: 3.5.24(typescript@5.9.3)
+
+  '@vueuse/core@9.13.0(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.13.0
+      '@vueuse/shared': 9.13.0(vue@3.5.24(typescript@5.9.3))
+      vue-demi: 0.14.10(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -15518,7 +16768,11 @@ snapshots:
     dependencies:
       '@vueuse/core': 12.8.2(typescript@5.9.3)
       '@vueuse/shared': 12.8.2(typescript@5.9.3)
+<<<<<<< HEAD
       vue: 3.5.22(typescript@5.9.3)
+=======
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     optionalDependencies:
       async-validator: 4.2.5
       axios: 1.12.2
@@ -15529,11 +16783,19 @@ snapshots:
     transitivePeerDependencies:
       - typescript
 
+<<<<<<< HEAD
   '@vueuse/integrations@14.0.0(async-validator@4.2.5)(axios@1.12.2)(focus-trap@7.6.5)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@vueuse/core': 14.0.0(vue@3.5.22(typescript@5.9.3))
       '@vueuse/shared': 14.0.0(vue@3.5.22(typescript@5.9.3))
       vue: 3.5.22(typescript@5.9.3)
+=======
+  '@vueuse/integrations@14.0.0(async-validator@4.2.5)(axios@1.13.2)(focus-trap@7.6.6)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@vueuse/core': 14.0.0(vue@3.5.24(typescript@5.9.3))
+      '@vueuse/shared': 14.0.0(vue@3.5.24(typescript@5.9.3))
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     optionalDependencies:
       async-validator: 4.2.5
       axios: 1.12.2
@@ -15550,22 +16812,36 @@ snapshots:
 
   '@vueuse/metadata@9.13.0': {}
 
+<<<<<<< HEAD
   '@vueuse/motion@3.0.3(magicast@0.3.5)(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@vueuse/core': 13.9.0(vue@3.5.22(typescript@5.9.3))
       '@vueuse/shared': 13.9.0(vue@3.5.22(typescript@5.9.3))
+=======
+  '@vueuse/motion@3.0.3(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      '@vueuse/core': 13.9.0(vue@3.5.24(typescript@5.9.3))
+      '@vueuse/shared': 13.9.0(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       defu: 6.1.4
       framesync: 6.1.2
       popmotion: 11.0.5
       style-value-types: 5.1.2
+<<<<<<< HEAD
       vue: 3.5.22(typescript@5.9.3)
     optionalDependencies:
       '@nuxt/kit': 3.19.3(magicast@0.3.5)
+=======
+      vue: 3.5.24(typescript@5.9.3)
+    optionalDependencies:
+      '@nuxt/kit': 3.20.1
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - magicast
 
   '@vueuse/shared@12.8.2(typescript@5.9.3)':
     dependencies:
+<<<<<<< HEAD
       vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - typescript
@@ -15581,10 +16857,28 @@ snapshots:
   '@vueuse/shared@9.13.0(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
+=======
+      vue: 3.5.24(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@vueuse/shared@13.9.0(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.24(typescript@5.9.3)
+
+  '@vueuse/shared@14.0.0(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.24(typescript@5.9.3)
+
+  '@vueuse/shared@9.13.0(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
+<<<<<<< HEAD
   '@vxe-ui/core@4.2.12(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       dom-zindex: 1.0.6
@@ -15592,6 +16886,21 @@ snapshots:
       xe-utils: 3.7.9
 
   '@xmldom/xmldom@0.8.11': {}
+=======
+  '@vxe-ui/core@4.2.13(vue@3.5.24(typescript@5.9.3))':
+    dependencies:
+      dom-zindex: 1.0.6
+      vue: 3.5.24(typescript@5.9.3)
+      xe-utils: 3.7.9
+
+  '@xmldom/xmldom@0.8.11': {}
+
+  '@xyflow/svelte@1.4.1(svelte@5.43.5)':
+    dependencies:
+      '@svelte-put/shortcut': 4.1.0(svelte@5.43.5)
+      '@xyflow/system': 0.0.72
+      svelte: 5.43.5
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   '@xyflow/svelte@1.4.0(svelte@5.41.1)':
     dependencies:
@@ -15679,6 +16988,7 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
+<<<<<<< HEAD
   algoliasearch@5.40.1:
     dependencies:
       '@algolia/abtesting': 1.6.1
@@ -15695,6 +17005,24 @@ snapshots:
       '@algolia/requester-browser-xhr': 5.40.1
       '@algolia/requester-fetch': 5.40.1
       '@algolia/requester-node-http': 5.40.1
+=======
+  algoliasearch@5.43.0:
+    dependencies:
+      '@algolia/abtesting': 1.9.0
+      '@algolia/client-abtesting': 5.43.0
+      '@algolia/client-analytics': 5.43.0
+      '@algolia/client-common': 5.43.0
+      '@algolia/client-insights': 5.43.0
+      '@algolia/client-personalization': 5.43.0
+      '@algolia/client-query-suggestions': 5.43.0
+      '@algolia/client-search': 5.43.0
+      '@algolia/ingestion': 1.43.0
+      '@algolia/monitoring': 1.43.0
+      '@algolia/recommend': 5.43.0
+      '@algolia/requester-browser-xhr': 5.43.0
+      '@algolia/requester-fetch': 5.43.0
+      '@algolia/requester-node-http': 5.43.0
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   alien-signals@0.4.14: {}
 
@@ -15720,10 +17048,17 @@ snapshots:
 
   ansi-styles@6.2.3: {}
 
+<<<<<<< HEAD
   ant-design-vue@4.2.6(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@ant-design/colors': 6.0.0
       '@ant-design/icons-vue': 7.0.1(vue@3.5.22(typescript@5.9.3))
+=======
+  ant-design-vue@4.2.6(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@ant-design/colors': 6.0.0
+      '@ant-design/icons-vue': 7.0.1(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@babel/runtime': 7.28.4
       '@ctrl/tinycolor': 4.2.0
       '@emotion/hash': 0.9.2
@@ -15742,8 +17077,13 @@ snapshots:
       shallow-equal: 1.2.1
       stylis: 4.3.6
       throttle-debounce: 5.0.2
+<<<<<<< HEAD
       vue: 3.5.22(typescript@5.9.3)
       vue-types: 3.0.2(vue@3.5.22(typescript@5.9.3))
+=======
+      vue: 3.5.24(typescript@5.9.3)
+      vue-types: 3.0.2(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       warning: 4.0.3
 
   any-promise@1.3.0: {}
@@ -15906,7 +17246,11 @@ snapshots:
 
   balanced-match@2.0.0: {}
 
+<<<<<<< HEAD
   bare-events@2.8.0: {}
+=======
+  bare-events@2.8.2: {}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   base64-js@1.5.1: {}
 
@@ -15918,6 +17262,12 @@ snapshots:
 
   benz-recorderjs@1.0.5: {}
 
+  benz-amr-recorder@1.1.5:
+    dependencies:
+      benz-recorderjs: 1.0.5
+
+  benz-recorderjs@1.0.5: {}
+
   better-path-resolve@1.0.0:
     dependencies:
       is-windows: 1.0.2
@@ -15932,7 +17282,11 @@ snapshots:
 
   bintrees@1.0.2: {}
 
+<<<<<<< HEAD
   birpc@2.6.1: {}
+=======
+  birpc@2.8.0: {}
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   boolbase@1.0.0: {}
 
@@ -15998,11 +17352,19 @@ snapshots:
 
   browserslist@4.26.3:
     dependencies:
+<<<<<<< HEAD
       baseline-browser-mapping: 2.8.19
       caniuse-lite: 1.0.30001751
       electron-to-chromium: 1.5.238
       node-releases: 2.0.26
       update-browserslist-db: 1.1.3(browserslist@4.26.3)
+=======
+      baseline-browser-mapping: 2.8.25
+      caniuse-lite: 1.0.30001754
+      electron-to-chromium: 1.5.249
+      node-releases: 2.0.27
+      update-browserslist-db: 1.1.4(browserslist@4.27.0)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   buffer-crc32@1.0.0: {}
 
@@ -16203,7 +17565,11 @@ snapshots:
   circular-dependency-scanner@2.3.0:
     dependencies:
       '@ast-grep/napi': 0.37.0
+<<<<<<< HEAD
       '@vue/compiler-sfc': 3.5.22
+=======
+      '@vue/compiler-sfc': 3.5.24
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       commander: 12.1.0
       get-tsconfig: 4.13.0
       graph-cycles: 3.0.0
@@ -16328,7 +17694,7 @@ snapshots:
 
   comment-parser@1.4.1: {}
 
-  commitlint-plugin-function-rules@4.1.0(@commitlint/lint@19.8.1):
+  commitlint-plugin-function-rules@4.1.1(@commitlint/lint@19.8.1):
     dependencies:
       '@commitlint/lint': 19.8.1
 
@@ -16930,9 +18296,15 @@ snapshots:
 
   depcheck@1.4.7:
     dependencies:
+<<<<<<< HEAD
       '@babel/parser': 7.28.4
       '@babel/traverse': 7.28.4
       '@vue/compiler-sfc': 3.5.22
+=======
+      '@babel/parser': 7.28.5
+      '@babel/traverse': 7.28.5
+      '@vue/compiler-sfc': 3.5.24
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       callsite: 1.0.0
       camelcase: 6.3.0
       cosmiconfig: 7.1.0
@@ -17132,17 +18504,30 @@ snapshots:
     dependencies:
       jake: 10.9.4
 
+<<<<<<< HEAD
   electron-to-chromium@1.5.238: {}
 
   element-plus@2.11.5(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@ctrl/tinycolor': 4.2.0
       '@element-plus/icons-vue': 2.3.2(vue@3.5.22(typescript@5.9.3))
+=======
+  electron-to-chromium@1.5.249: {}
+
+  element-plus@2.11.7(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@ctrl/tinycolor': 4.2.0
+      '@element-plus/icons-vue': 2.3.2(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@floating-ui/dom': 1.7.4
       '@popperjs/core': '@sxzz/popperjs-es@2.11.7'
       '@types/lodash': 4.17.20
       '@types/lodash-es': 4.17.12
+<<<<<<< HEAD
       '@vueuse/core': 9.13.0(vue@3.5.22(typescript@5.9.3))
+=======
+      '@vueuse/core': 9.13.0(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       async-validator: 4.2.5
       dayjs: 1.11.18
       lodash: 4.17.21
@@ -17150,7 +18535,11 @@ snapshots:
       lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
       memoize-one: 6.0.0
       normalize-wheel-es: 1.2.0
+<<<<<<< HEAD
       vue: 3.5.22(typescript@5.9.3)
+=======
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -17634,7 +19023,11 @@ snapshots:
 
   events-universal@1.0.1:
     dependencies:
+<<<<<<< HEAD
       bare-events: 2.8.0
+=======
+      bare-events: 2.8.2
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - bare-abort-controller
 
@@ -17805,7 +19198,7 @@ snapshots:
     dependencies:
       magic-string: 0.30.19
       mlly: 1.8.0
-      rollup: 4.52.5
+      rollup: 4.53.1
 
   flat-cache@4.0.1:
     dependencies:
@@ -18008,7 +19401,7 @@ snapshots:
       minimatch: 10.0.3
       minipass: 7.1.2
       package-json-from-dist: 1.0.1
-      path-scurry: 2.0.0
+      path-scurry: 2.0.1
 
   glob@7.2.3:
     dependencies:
@@ -18049,7 +19442,11 @@ snapshots:
 
   global@4.4.0:
     dependencies:
+<<<<<<< HEAD
       min-document: 2.19.0
+=======
+      min-document: 2.19.1
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       process: 0.11.10
 
   globals@14.0.0: {}
@@ -18938,9 +20335,15 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
+<<<<<<< HEAD
   lucide-vue-next@0.507.0(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       vue: 3.5.22(typescript@5.9.3)
+=======
+  lucide-vue-next@0.507.0(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   luxon@3.7.2: {}
 
@@ -19106,7 +20509,11 @@ snapshots:
 
   min-dash@4.2.3: {}
 
+<<<<<<< HEAD
   min-document@2.19.0:
+=======
+  min-document@2.19.1:
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       dom-walk: 0.1.2
 
@@ -19173,7 +20580,11 @@ snapshots:
 
   mitt@3.0.1: {}
 
+<<<<<<< HEAD
   mkdist@2.4.1(sass@1.93.2)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3)):
+=======
+  mkdist@2.4.1(sass@1.93.3)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.24(typescript@5.9.3)):
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       autoprefixer: 10.4.21(postcss@8.5.6)
       citty: 0.1.6
@@ -19191,7 +20602,11 @@ snapshots:
     optionalDependencies:
       sass: 1.93.2
       typescript: 5.9.3
+<<<<<<< HEAD
       vue: 3.5.22(typescript@5.9.3)
+=======
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       vue-tsc: 2.2.10(typescript@5.9.3)
 
   mlly@1.8.0:
@@ -19245,10 +20660,17 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
+<<<<<<< HEAD
   naive-ui@2.43.1(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@css-render/plugin-bem': 0.15.14(css-render@0.15.14)
       '@css-render/vue3-ssr': 0.15.14(vue@3.5.22(typescript@5.9.3))
+=======
+  naive-ui@2.43.1(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@css-render/plugin-bem': 0.15.14(css-render@0.15.14)
+      '@css-render/vue3-ssr': 0.15.14(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@types/katex': 0.16.7
       '@types/lodash': 4.17.20
       '@types/lodash-es': 4.17.12
@@ -19263,10 +20685,17 @@ snapshots:
       lodash-es: 4.17.21
       seemly: 0.3.10
       treemate: 0.3.11
+<<<<<<< HEAD
       vdirs: 0.1.8(vue@3.5.22(typescript@5.9.3))
       vooks: 0.2.12(vue@3.5.22(typescript@5.9.3))
       vue: 3.5.22(typescript@5.9.3)
       vueuc: 0.4.65(vue@3.5.22(typescript@5.9.3))
+=======
+      vdirs: 0.1.8(vue@3.5.24(typescript@5.9.3))
+      vooks: 0.2.12(vue@3.5.24(typescript@5.9.3))
+      vue: 3.5.24(typescript@5.9.3)
+      vueuc: 0.4.65(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   nanoid@3.3.11: {}
 
@@ -19289,6 +20718,7 @@ snapshots:
   nitropack@2.12.7:
     dependencies:
       '@cloudflare/kv-asset-handler': 0.4.0
+<<<<<<< HEAD
       '@rollup/plugin-alias': 5.1.1(rollup@4.52.5)
       '@rollup/plugin-commonjs': 28.0.8(rollup@4.52.5)
       '@rollup/plugin-inject': 5.0.5(rollup@4.52.5)
@@ -19297,6 +20727,16 @@ snapshots:
       '@rollup/plugin-replace': 6.0.2(rollup@4.52.5)
       '@rollup/plugin-terser': 0.4.4(rollup@4.52.5)
       '@vercel/nft': 0.30.3(rollup@4.52.5)
+=======
+      '@rollup/plugin-alias': 5.1.1(rollup@4.53.1)
+      '@rollup/plugin-commonjs': 28.0.9(rollup@4.53.1)
+      '@rollup/plugin-inject': 5.0.5(rollup@4.53.1)
+      '@rollup/plugin-json': 6.1.0(rollup@4.53.1)
+      '@rollup/plugin-node-resolve': 16.0.3(rollup@4.53.1)
+      '@rollup/plugin-replace': 6.0.3(rollup@4.53.1)
+      '@rollup/plugin-terser': 0.4.4(rollup@4.53.1)
+      '@vercel/nft': 0.30.3(rollup@4.53.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       archiver: 7.0.1
       c12: 3.3.1(magicast@0.3.5)
       chokidar: 4.0.3
@@ -19338,8 +20778,8 @@ snapshots:
       pkg-types: 2.3.0
       pretty-bytes: 7.1.0
       radix3: 1.1.2
-      rollup: 4.52.5
-      rollup-plugin-visualizer: 6.0.5(rollup@4.52.5)
+      rollup: 4.53.1
+      rollup-plugin-visualizer: 6.0.5(rollup@4.53.1)
       scule: 1.3.0
       semver: 7.7.3
       serve-placeholder: 2.0.2
@@ -19689,7 +21129,7 @@ snapshots:
       lru-cache: 10.4.3
       minipass: 7.1.2
 
-  path-scurry@2.0.0:
+  path-scurry@2.0.1:
     dependencies:
       lru-cache: 11.2.2
       minipass: 7.1.2
@@ -19720,12 +21160,17 @@ snapshots:
 
   pify@4.0.1: {}
 
+<<<<<<< HEAD
   pinia-plugin-persistedstate@4.5.0(@nuxt/kit@3.19.3(magicast@0.3.5))(pinia@3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))):
+=======
+  pinia-plugin-persistedstate@4.7.1(@nuxt/kit@3.20.1)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3))):
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       deep-pick-omit: 1.2.1
       defu: 6.1.4
       destr: 2.0.5
     optionalDependencies:
+<<<<<<< HEAD
       '@nuxt/kit': 3.19.3(magicast@0.3.5)
       pinia: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
 
@@ -19733,6 +21178,15 @@ snapshots:
     dependencies:
       '@vue/devtools-api': 7.7.7
       vue: 3.5.22(typescript@5.9.3)
+=======
+      '@nuxt/kit': 3.20.1
+      pinia: 3.0.4(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3))
+
+  pinia@3.0.4(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.7
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     optionalDependencies:
       typescript: 5.9.3
 
@@ -20464,6 +21918,7 @@ snapshots:
     dependencies:
       jsesc: 3.1.0
 
+<<<<<<< HEAD
   reka-ui@2.6.0(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@floating-ui/dom': 1.7.4
@@ -20471,12 +21926,25 @@ snapshots:
       '@internationalized/date': 3.10.0
       '@internationalized/number': 3.6.5
       '@tanstack/vue-virtual': 3.13.12(vue@3.5.22(typescript@5.9.3))
+=======
+  reka-ui@2.6.0(typescript@5.9.3)(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@floating-ui/vue': 1.1.9(vue@3.5.24(typescript@5.9.3))
+      '@internationalized/date': 3.10.0
+      '@internationalized/number': 3.6.5
+      '@tanstack/vue-virtual': 3.13.12(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@vueuse/core': 12.8.2(typescript@5.9.3)
       '@vueuse/shared': 12.8.2(typescript@5.9.3)
       aria-hidden: 1.2.6
       defu: 6.1.4
       ohash: 2.0.11
+<<<<<<< HEAD
       vue: 3.5.22(typescript@5.9.3)
+=======
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - '@vue/composition-api'
       - typescript
@@ -20537,62 +22005,67 @@ snapshots:
 
   robust-predicates@3.0.2: {}
 
-  rollup-plugin-dts@6.2.3(rollup@4.52.5)(typescript@5.9.3):
+  rollup-plugin-dts@6.2.3(rollup@4.53.1)(typescript@5.9.3):
     dependencies:
+<<<<<<< HEAD
       magic-string: 0.30.19
       rollup: 4.52.5
+=======
+      magic-string: 0.30.21
+      rollup: 4.53.1
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       typescript: 5.9.3
     optionalDependencies:
       '@babel/code-frame': 7.27.1
 
-  rollup-plugin-visualizer@5.14.0(rollup@4.52.5):
+  rollup-plugin-visualizer@5.14.0(rollup@4.53.1):
     dependencies:
       open: 8.4.2
       picomatch: 4.0.3
       source-map: 0.7.6
       yargs: 17.7.2
     optionalDependencies:
-      rollup: 4.52.5
+      rollup: 4.53.1
 
-  rollup-plugin-visualizer@6.0.5(rollup@4.52.5):
+  rollup-plugin-visualizer@6.0.5(rollup@4.53.1):
     dependencies:
       open: 8.4.2
       picomatch: 4.0.3
       source-map: 0.7.6
       yargs: 17.7.2
     optionalDependencies:
-      rollup: 4.52.5
+      rollup: 4.53.1
 
   rollup@2.79.2:
     optionalDependencies:
       fsevents: 2.3.3
 
-  rollup@4.52.5:
+  rollup@4.53.1:
     dependencies:
       '@types/estree': 1.0.8
     optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.52.5
-      '@rollup/rollup-android-arm64': 4.52.5
-      '@rollup/rollup-darwin-arm64': 4.52.5
-      '@rollup/rollup-darwin-x64': 4.52.5
-      '@rollup/rollup-freebsd-arm64': 4.52.5
-      '@rollup/rollup-freebsd-x64': 4.52.5
-      '@rollup/rollup-linux-arm-gnueabihf': 4.52.5
-      '@rollup/rollup-linux-arm-musleabihf': 4.52.5
-      '@rollup/rollup-linux-arm64-gnu': 4.52.5
-      '@rollup/rollup-linux-arm64-musl': 4.52.5
-      '@rollup/rollup-linux-loong64-gnu': 4.52.5
-      '@rollup/rollup-linux-ppc64-gnu': 4.52.5
-      '@rollup/rollup-linux-riscv64-gnu': 4.52.5
-      '@rollup/rollup-linux-riscv64-musl': 4.52.5
-      '@rollup/rollup-linux-s390x-gnu': 4.52.5
-      '@rollup/rollup-linux-x64-gnu': 4.52.5
-      '@rollup/rollup-linux-x64-musl': 4.52.5
-      '@rollup/rollup-openharmony-arm64': 4.52.5
-      '@rollup/rollup-win32-arm64-msvc': 4.52.5
-      '@rollup/rollup-win32-ia32-msvc': 4.52.5
-      '@rollup/rollup-win32-x64-gnu': 4.52.5
-      '@rollup/rollup-win32-x64-msvc': 4.52.5
+      '@rollup/rollup-android-arm-eabi': 4.53.1
+      '@rollup/rollup-android-arm64': 4.53.1
+      '@rollup/rollup-darwin-arm64': 4.53.1
+      '@rollup/rollup-darwin-x64': 4.53.1
+      '@rollup/rollup-freebsd-arm64': 4.53.1
+      '@rollup/rollup-freebsd-x64': 4.53.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.53.1
+      '@rollup/rollup-linux-arm-musleabihf': 4.53.1
+      '@rollup/rollup-linux-arm64-gnu': 4.53.1
+      '@rollup/rollup-linux-arm64-musl': 4.53.1
+      '@rollup/rollup-linux-loong64-gnu': 4.53.1
+      '@rollup/rollup-linux-ppc64-gnu': 4.53.1
+      '@rollup/rollup-linux-riscv64-gnu': 4.53.1
+      '@rollup/rollup-linux-riscv64-musl': 4.53.1
+      '@rollup/rollup-linux-s390x-gnu': 4.53.1
+      '@rollup/rollup-linux-x64-gnu': 4.53.1
+      '@rollup/rollup-linux-x64-musl': 4.53.1
+      '@rollup/rollup-openharmony-arm64': 4.53.1
+      '@rollup/rollup-win32-arm64-msvc': 4.53.1
+      '@rollup/rollup-win32-ia32-msvc': 4.53.1
+      '@rollup/rollup-win32-x64-gnu': 4.53.1
+      '@rollup/rollup-win32-x64-msvc': 4.53.1
       fsevents: 2.3.3
 
   rotated-array-set@3.0.0: {}
@@ -21195,7 +22668,11 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+<<<<<<< HEAD
   svelte@5.41.1:
+=======
+  svelte@5.43.5:
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@jridgewell/remapping': 2.3.5
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -21299,6 +22776,28 @@ snapshots:
       minizlib: 3.1.0
       yallist: 5.0.0
 
+  tdesign-icons-vue-next@0.4.1(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      vue: 3.5.24(typescript@5.9.3)
+
+  tdesign-vue-next@1.17.2(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@popperjs/core': 2.11.8
+      '@types/lodash-es': 4.17.12
+      '@types/sortablejs': 1.15.9
+      '@types/tinycolor2': 1.4.6
+      '@types/validator': 13.15.4
+      dayjs: 1.11.19
+      lodash-es: 4.17.21
+      mitt: 3.0.1
+      sortablejs: 1.15.6
+      tdesign-icons-vue-next: 0.4.1(vue@3.5.24(typescript@5.9.3))
+      tinycolor2: 1.6.0
+      validator: 13.15.22
+      vue: 3.5.24(typescript@5.9.3)
+
   temp-dir@2.0.0: {}
 
   tempy@0.6.0:
@@ -21345,6 +22844,8 @@ snapshots:
 
   tinybench@2.9.0: {}
 
+  tinycolor2@1.6.0: {}
+
   tinyexec@0.3.2: {}
 
   tinyexec@1.0.1: {}
@@ -21494,6 +22995,7 @@ snapshots:
       has-symbols: 1.1.0
       which-boxed-primitive: 1.1.1
 
+<<<<<<< HEAD
   unbuild@3.6.1(sass@1.93.2)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@4.52.5)
@@ -21502,6 +23004,16 @@ snapshots:
       '@rollup/plugin-node-resolve': 16.0.3(rollup@4.52.5)
       '@rollup/plugin-replace': 6.0.2(rollup@4.52.5)
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+=======
+  unbuild@3.6.1(sass@1.93.3)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@rollup/plugin-alias': 5.1.1(rollup@4.53.1)
+      '@rollup/plugin-commonjs': 28.0.9(rollup@4.53.1)
+      '@rollup/plugin-json': 6.1.0(rollup@4.53.1)
+      '@rollup/plugin-node-resolve': 16.0.3(rollup@4.53.1)
+      '@rollup/plugin-replace': 6.0.3(rollup@4.53.1)
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       citty: 0.1.6
       consola: 3.4.2
       defu: 6.1.4
@@ -21509,14 +23021,19 @@ snapshots:
       fix-dts-default-cjs-exports: 1.0.1
       hookable: 5.5.3
       jiti: 2.6.1
+<<<<<<< HEAD
       magic-string: 0.30.19
       mkdist: 2.4.1(sass@1.93.2)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
+=======
+      magic-string: 0.30.21
+      mkdist: 2.4.1(sass@1.93.3)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       mlly: 1.8.0
       pathe: 2.0.3
       pkg-types: 2.3.0
       pretty-bytes: 7.1.0
-      rollup: 4.52.5
-      rollup-plugin-dts: 6.2.3(rollup@4.52.5)(typescript@5.9.3)
+      rollup: 4.53.1
+      rollup-plugin-dts: 6.2.3(rollup@4.53.1)(typescript@5.9.3)
       scule: 1.3.0
       tinyglobby: 0.2.15
       untyped: 2.0.0
@@ -21741,6 +23258,7 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+<<<<<<< HEAD
   vdirs@0.1.8(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       evtd: 0.2.4
@@ -21751,6 +23269,20 @@ snapshots:
       '@vue/devtools-api': 7.7.7
       type-fest: 4.41.0
       vue: 3.5.22(typescript@5.9.3)
+=======
+  validator@13.15.22: {}
+
+  vdirs@0.1.8(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      evtd: 0.2.4
+      vue: 3.5.24(typescript@5.9.3)
+
+  vee-validate@4.15.1(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 7.7.7
+      type-fest: 4.41.0
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   vfile-message@4.0.3:
     dependencies:
@@ -21777,6 +23309,19 @@ snapshots:
       safe-json-parse: 4.0.0
       videojs-font: 3.2.0
       videojs-vtt.js: 0.15.5
+<<<<<<< HEAD
+=======
+
+  videojs-font@3.2.0: {}
+
+  videojs-vtt.js@0.15.5:
+    dependencies:
+      global: 4.4.0
+
+  vite-hot-client@2.1.0(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)):
+    dependencies:
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   videojs-font@3.2.0: {}
 
@@ -21794,7 +23339,11 @@ snapshots:
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
+<<<<<<< HEAD
       vite: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+=======
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -21809,11 +23358,16 @@ snapshots:
       - tsx
       - yaml
 
+<<<<<<< HEAD
   vite-plugin-compression@0.5.1(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
+=======
+  vite-plugin-compression@0.5.1(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)):
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       chalk: 4.1.2
       debug: 4.4.3
       fs-extra: 10.1.0
+<<<<<<< HEAD
       vite: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
@@ -21822,6 +23376,16 @@ snapshots:
     dependencies:
       '@microsoft/api-extractor': 7.53.2(@types/node@24.10.0)
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+=======
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-dts@4.5.4(@types/node@24.10.0)(rollup@4.53.1)(typescript@5.9.3)(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)):
+    dependencies:
+      '@microsoft/api-extractor': 7.54.0(@types/node@24.10.0)
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@volar/typescript': 2.4.23
       '@vue/language-core': 2.2.0(typescript@5.9.3)
       compare-versions: 6.1.1
@@ -21831,13 +23395,21 @@ snapshots:
       magic-string: 0.30.19
       typescript: 5.9.3
     optionalDependencies:
+<<<<<<< HEAD
       vite: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+=======
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
+<<<<<<< HEAD
   vite-plugin-html@3.2.2(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
+=======
+  vite-plugin-html@3.2.2(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)):
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@rollup/pluginutils': 4.2.1
       colorette: 2.0.20
@@ -21851,12 +23423,18 @@ snapshots:
       html-minifier-terser: 6.1.0
       node-html-parser: 5.4.2
       pathe: 0.2.0
+<<<<<<< HEAD
       vite: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
 
   vite-plugin-inspect@0.8.9(rollup@4.52.5)(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
+=======
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+
+  vite-plugin-inspect@0.8.9(rollup@4.53.1)(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)):
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@antfu/utils': 0.7.10
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.1)
       debug: 4.4.3
       error-stack-parser-es: 0.1.5
       fs-extra: 11.3.2
@@ -21864,16 +23442,20 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 3.0.2
+<<<<<<< HEAD
       vite: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+=======
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - rollup
       - supports-color
 
   vite-plugin-lazy-import@1.0.7:
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.1)
       es-module-lexer: 1.7.0
-      rollup: 4.52.5
+      rollup: 4.53.1
       xe-utils: 3.7.9
 
   vite-plugin-pwa@1.1.0(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0):
@@ -21887,33 +23469,54 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+<<<<<<< HEAD
   vite-plugin-pwa@1.1.0(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(workbox-build@7.3.0)(workbox-window@7.3.0):
+=======
+  vite-plugin-pwa@1.1.0(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(workbox-build@7.3.0)(workbox-window@7.3.0):
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       debug: 4.4.3
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.15
+<<<<<<< HEAD
       vite: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+=======
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       workbox-build: 7.3.0
       workbox-window: 7.3.0
     transitivePeerDependencies:
       - supports-color
 
+<<<<<<< HEAD
   vite-plugin-vue-devtools@7.7.7(rollup@4.52.5)(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-core': 7.7.7(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+=======
+  vite-plugin-vue-devtools@7.7.7(rollup@4.53.1)(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-core': 7.7.7(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@vue/devtools-kit': 7.7.7
       '@vue/devtools-shared': 7.7.7
       execa: 9.6.0
       sirv: 3.0.2
+<<<<<<< HEAD
       vite: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vite-plugin-inspect: 0.8.9(rollup@4.52.5)(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
       vite-plugin-vue-inspector: 5.3.2(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+=======
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+      vite-plugin-inspect: 0.8.9(rollup@4.53.1)(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
+      vite-plugin-vue-inspector: 5.3.2(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - '@nuxt/kit'
       - rollup
       - supports-color
       - vue
 
+<<<<<<< HEAD
   vite-plugin-vue-inspector@5.3.2(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       '@babel/core': 7.28.4
@@ -21926,6 +23529,20 @@ snapshots:
       kolorist: 1.8.0
       magic-string: 0.30.19
       vite: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+=======
+  vite-plugin-vue-inspector@5.3.2(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)):
+    dependencies:
+      '@babel/core': 7.28.5
+      '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.5)
+      '@vue/compiler-dom': 3.5.24
+      kolorist: 1.8.0
+      magic-string: 0.30.21
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - supports-color
 
@@ -21933,7 +23550,7 @@ snapshots:
     dependencies:
       esbuild: 0.25.3
       postcss: 8.5.6
-      rollup: 4.52.5
+      rollup: 4.53.1
     optionalDependencies:
       '@types/node': 24.10.0
       fsevents: 2.3.3
@@ -21941,13 +23558,17 @@ snapshots:
       sass: 1.93.2
       terser: 5.44.0
 
+<<<<<<< HEAD
   vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+=======
+  vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1):
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       esbuild: 0.25.3
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
       postcss: 8.5.6
-      rollup: 4.52.5
+      rollup: 4.53.1
       tinyglobby: 0.2.15
     optionalDependencies:
       '@types/node': 24.10.0
@@ -21968,26 +23589,45 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+<<<<<<< HEAD
   vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3):
     dependencies:
       '@docsearch/css': 3.8.2
       '@docsearch/js': 3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)
       '@iconify-json/simple-icons': 1.2.55
+=======
+  vitepress@1.6.4(@algolia/client-search@5.43.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3):
+    dependencies:
+      '@docsearch/css': 3.8.2
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.43.0)(search-insights@2.17.3)
+      '@iconify-json/simple-icons': 1.2.58
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@shikijs/core': 2.5.0
       '@shikijs/transformers': 2.5.0
       '@shikijs/types': 2.5.0
       '@types/markdown-it': 14.1.2
+<<<<<<< HEAD
       '@vitejs/plugin-vue': 5.2.4(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(vue@3.5.22(typescript@5.9.3))
       '@vue/devtools-api': 7.7.7
       '@vue/shared': 3.5.22
+=======
+      '@vitejs/plugin-vue': 5.2.4(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1))(vue@3.5.24(typescript@5.9.3))
+      '@vue/devtools-api': 7.7.7
+      '@vue/shared': 3.5.24
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@vueuse/core': 12.8.2(typescript@5.9.3)
       '@vueuse/integrations': 12.8.2(async-validator@4.2.5)(axios@1.12.2)(focus-trap@7.6.5)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.9.3)
       focus-trap: 7.6.5
       mark.js: 8.11.1
       minisearch: 7.2.0
       shiki: 2.5.0
+<<<<<<< HEAD
       vite: 5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
       vue: 3.5.22(typescript@5.9.3)
+=======
+      vite: 5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     optionalDependencies:
       postcss: 8.5.6
     transitivePeerDependencies:
@@ -22021,7 +23661,11 @@ snapshots:
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
+<<<<<<< HEAD
       '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+=======
+      '@vitest/mocker': 3.2.4(vite@7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -22039,8 +23683,13 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
+<<<<<<< HEAD
       vite: 7.1.11(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vite-node: 3.2.4(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+=======
+      vite: 7.2.2(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.10.0
@@ -22059,10 +23708,17 @@ snapshots:
       - tsx
       - yaml
 
+<<<<<<< HEAD
   vooks@0.2.12(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       evtd: 0.2.4
       vue: 3.5.22(typescript@5.9.3)
+=======
+  vooks@0.2.12(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      evtd: 0.2.4
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   vscode-languageserver-textdocument@1.0.12: {}
 
@@ -22070,6 +23726,7 @@ snapshots:
 
   vue-component-type-helpers@2.2.12: {}
 
+<<<<<<< HEAD
   vue-demi@0.14.10(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       vue: 3.5.22(typescript@5.9.3)
@@ -22078,6 +23735,16 @@ snapshots:
     dependencies:
       dompurify: 3.3.0
       vue: 3.5.22(typescript@5.9.3)
+=======
+  vue-demi@0.14.10(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      vue: 3.5.24(typescript@5.9.3)
+
+  vue-dompurify-html@5.3.0(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      dompurify: 3.3.0
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
@@ -22091,11 +23758,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+<<<<<<< HEAD
   vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)):
+=======
+  vue-i18n@11.1.12(vue@3.5.24(typescript@5.9.3)):
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     dependencies:
       '@intlify/core-base': 11.1.12
       '@intlify/shared': 11.1.12
       '@vue/devtools-api': 6.6.4
+<<<<<<< HEAD
       vue: 3.5.22(typescript@5.9.3)
 
   vue-json-viewer@3.0.4(vue@3.5.22(typescript@5.9.3)):
@@ -22112,6 +23784,24 @@ snapshots:
     dependencies:
       tippy.js: 6.3.7
       vue: 3.5.22(typescript@5.9.3)
+=======
+      vue: 3.5.24(typescript@5.9.3)
+
+  vue-json-viewer@3.0.4(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      clipboard: 2.0.11
+      vue: 3.5.24(typescript@5.9.3)
+
+  vue-router@4.6.3(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.24(typescript@5.9.3)
+
+  vue-tippy@6.7.1(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      tippy.js: 6.3.7
+      vue: 3.5.24(typescript@5.9.3)
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
 
   vue-tsc@2.2.10(typescript@5.9.3):
     dependencies:
@@ -22119,6 +23809,7 @@ snapshots:
       '@vue/language-core': 2.2.10(typescript@5.9.3)
       typescript: 5.9.3
 
+<<<<<<< HEAD
   vue-types@3.0.2(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       is-plain-object: 3.0.1
@@ -22148,10 +23839,48 @@ snapshots:
   vueuc@0.4.65(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@css-render/vue3-ssr': 0.15.14(vue@3.5.22(typescript@5.9.3))
+=======
+  vue-types@3.0.2(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      is-plain-object: 3.0.1
+      vue: 3.5.24(typescript@5.9.3)
+
+  vue3-print-nb@0.1.4(typescript@5.9.3):
+    dependencies:
+      vue: 3.5.24(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  vue3-signature@0.2.4(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      default-passive-events: 2.0.0
+      signature_pad: 3.0.0-beta.4
+      vue: 3.5.24(typescript@5.9.3)
+
+  vue@3.5.24(typescript@5.9.3):
+    dependencies:
+      '@vue/compiler-dom': 3.5.24
+      '@vue/compiler-sfc': 3.5.24
+      '@vue/runtime-dom': 3.5.24
+      '@vue/server-renderer': 3.5.24(vue@3.5.24(typescript@5.9.3))
+      '@vue/shared': 3.5.24
+    optionalDependencies:
+      typescript: 5.9.3
+
+  vuedraggable@4.1.0(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      sortablejs: 1.14.0
+      vue: 3.5.24(typescript@5.9.3)
+
+  vueuc@0.4.65(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@css-render/vue3-ssr': 0.15.14(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
       '@juggle/resize-observer': 3.4.0
       css-render: 0.15.14
       evtd: 0.2.4
       seemly: 0.3.10
+<<<<<<< HEAD
       vdirs: 0.1.8(vue@3.5.22(typescript@5.9.3))
       vooks: 0.2.12(vue@3.5.22(typescript@5.9.3))
       vue: 3.5.22(typescript@5.9.3)
@@ -22165,6 +23894,21 @@ snapshots:
   vxe-table@4.17.0(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       vxe-pc-ui: 4.10.5(vue@3.5.22(typescript@5.9.3))
+=======
+      vdirs: 0.1.8(vue@3.5.24(typescript@5.9.3))
+      vooks: 0.2.12(vue@3.5.24(typescript@5.9.3))
+      vue: 3.5.24(typescript@5.9.3)
+
+  vxe-pc-ui@4.10.18(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      '@vxe-ui/core': 4.2.13(vue@3.5.24(typescript@5.9.3))
+    transitivePeerDependencies:
+      - vue
+
+  vxe-table@4.17.12(vue@3.5.24(typescript@5.9.3)):
+    dependencies:
+      vxe-pc-ui: 4.10.18(vue@3.5.24(typescript@5.9.3))
+>>>>>>> d4f9bb20dd825e0e6bca96a43fc33f7e4bf6b2ef
     transitivePeerDependencies:
       - vue
 
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index f7b3e1299..c83f3bb4a 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -78,11 +78,13 @@ catalog:
   '@vueuse/core': ^13.4.0
   '@vueuse/integrations': ^14.0.0
   '@vueuse/motion': ^3.0.3
+  '@videojs-player/vue': ^1.0.0
   ant-design-vue: ^4.2.6
   archiver: ^7.0.1
   autoprefixer: ^10.4.21
   axios: ^1.10.0
   axios-mock-adapter: ^2.1.0
+  benz-amr-recorder: ^1.1.5
   bpmn-js: ^17.11.1
   bpmn-js-properties-panel: 5.23.0
   bpmn-js-token-simulation: ^0.36.3
@@ -218,10 +220,12 @@ catalog:
   vue-router: ^4.5.1
   vue-tippy: ^6.7.1
   vue-tsc: 2.2.10
+  vue3-print-nb: "^0.1.4"
   vue3-signature: ^0.2.4
   vuedraggable: ^4.1.0
   vxe-pc-ui: ^4.9.29
   vxe-table: ^4.16.11
+  video.js: ^7.21.6
   watermark-js-plus: ^1.6.2
   zod: ^3.25.67
   zod-defaults: ^0.1.3
diff --git a/vben-admin.code-workspace b/vben-admin.code-workspace
index aa8205bda..33df5a752 100644
--- a/vben-admin.code-workspace
+++ b/vben-admin.code-workspace
@@ -16,6 +16,10 @@
       "name": "@vben/web-naive",
       "path": "apps/web-naive",
     },
+    {
+      "name": "@vben/web-tdesign",
+      "path": "apps/web-tdesign",
+    },
     {
       "name": "@vben/docs",
       "path": "docs",