From 1fba0aafb261f3e5b784851fd707ca4772a25f49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?cls=5F=E5=AE=81=E6=B3=A2=E6=9C=AC=E6=9C=BA?=
 <908705107@qq.com>
Date: Thu, 11 Jun 2026 19:39:38 +0800
Subject: [PATCH] feat: restore lightweight admin modules

---
 web/apps/web-ele/package.json                 |    2 +
 web/apps/web-ele/src/adapter/vxe-table.ts     |  258 ++++
 .../src/api/online-dev/page-manager.ts        |  238 +++
 .../dashboard-design/DashboardRenderer.vue    |  142 ++
 .../components/WidgetRenderer.vue             |  313 ++++
 .../components/widgets/AnnouncementList.vue   |  298 ++++
 .../components/widgets/ApprovalCenter.vue     |  118 ++
 .../components/widgets/CalendarWidget.vue     |   71 +
 .../components/widgets/ClockWidget.vue        |  125 ++
 .../components/widgets/CountdownWidget.vue    |  155 ++
 .../components/widgets/MyApps.vue             |  109 ++
 .../components/widgets/NoticeList.vue         |  269 ++++
 .../components/widgets/QuickLinks.vue         |  120 ++
 .../components/widgets/ServerMonitor.vue      |  294 ++++
 .../components/widgets/WeatherWidget.vue      |  364 +++++
 .../components/widgets/WelcomeCard.vue        |  115 ++
 .../src/components/dashboard-design/index.ts  |   12 +
 .../dashboard-design/utils/dataFetcher.ts     |  314 ++++
 web/apps/web-ele/src/locales/index.ts         |    9 +
 .../web-ele/src/locales/langs/zh-CN/dict.json |   22 +
 .../src/locales/langs/zh-CN/menu-title.json   |    8 +
 .../locales/langs/zh-CN/system-config.json    |   46 +
 .../src/locales/langs/zh-CN/ui-config.json    |   95 ++
 web/apps/web-ele/src/router/access.ts         |   46 +-
 web/apps/web-ele/src/router/light-menu.ts     |   54 +
 .../web-ele/src/views/_core/about/index.vue   |   25 +
 .../account-settings/api-token-management.vue |  330 +++++
 .../src/views/_core/account-settings/data.ts  |  165 +++
 .../_core/account-settings/device-item.vue    |  137 ++
 .../account-settings/device-management.vue    |  229 +++
 .../views/_core/account-settings/index.vue    |  184 +++
 .../modules/password-form.vue                 |  168 +++
 .../account-settings/modules/profile-form.vue |  293 ++++
 web/apps/web-ele/src/views/_core/dept/data.ts |   74 +
 .../web-ele/src/views/_core/dept/index.vue    |  159 ++
 .../_core/dept/modules/dept-form-modal.vue    |  209 +++
 .../views/_core/dept/modules/dept-tree.vue    |  501 +++++++
 .../views/_core/dept/modules/user-form.vue    |   72 +
 web/apps/web-ele/src/views/_core/dict/data.ts |  194 +++
 .../web-ele/src/views/_core/dict/index.vue    |   39 +
 .../_core/dict/modules/dict-form-modal.vue    |   99 ++
 .../dict/modules/dict-item-form-modal.vue     |   92 ++
 .../_core/dict/modules/dict-item-list.vue     |  683 +++++++++
 .../views/_core/dict/modules/dict-list.vue    |  297 ++++
 .../components/CreateFolderDialog.vue         |   93 ++
 .../file-manager/components/FileList.vue      |  547 +++++++
 .../file-manager/components/FileToolbar.vue   |  296 ++++
 .../file-manager/components/FolderTree.vue    |  121 ++
 .../file-manager/components/RenameDialog.vue  |   99 ++
 .../composables/useFileManager.ts             |  129 ++
 .../src/views/_core/file-manager/index.vue    |   21 +
 .../web-ele/src/views/_core/login-log/data.ts |  242 ++++
 .../src/views/_core/login-log/index.vue       |  191 +++
 .../_core/login-log/modules/detail-drawer.vue |  180 +++
 .../_core/menu/modules/menu-form-modal.vue    |    5 +-
 .../views/_core/menu/modules/menu-form.vue    |    3 +-
 .../views/_core/menu/modules/menu-tree.vue    |    9 +-
 .../src/views/_core/page-render/index.vue     |   37 +-
 .../modules/permission-left-panel.vue         |    5 +-
 web/apps/web-ele/src/views/_core/post/data.ts |  187 +++
 .../web-ele/src/views/_core/post/index.vue    |  160 +++
 .../_core/post/modules/post-form-modal.vue    |   84 ++
 .../views/_core/post/modules/post-list.vue    |  291 ++++
 .../views/_core/post/modules/user-form.vue    |   76 +
 .../role/modules/permission-assign-panel.vue  |   34 +-
 .../src/views/_core/system-config/index.vue   |  294 ++++
 .../system-config/modules/config-form.vue     |  206 +++
 .../modules/model-config-form.vue             | 1279 +++++++++++++++++
 .../src/views/_core/ui-config/index.vue       |  219 +++
 .../ui-config/modules/app-settings-form.vue   |  619 ++++++++
 .../ui-config/modules/login-config-form.vue   |  331 +++++
 .../ui-config/modules/ui-preferences-form.vue |  664 +++++++++
 web/pnpm-lock.yaml                            |   54 +-
 73 files changed, 13943 insertions(+), 80 deletions(-)
 create mode 100644 web/apps/web-ele/src/adapter/vxe-table.ts
 create mode 100644 web/apps/web-ele/src/api/online-dev/page-manager.ts
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/DashboardRenderer.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/components/WidgetRenderer.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/components/widgets/AnnouncementList.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/components/widgets/ApprovalCenter.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/components/widgets/CalendarWidget.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/components/widgets/ClockWidget.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/components/widgets/CountdownWidget.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/components/widgets/MyApps.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/components/widgets/NoticeList.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/components/widgets/QuickLinks.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/components/widgets/ServerMonitor.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/components/widgets/WeatherWidget.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/components/widgets/WelcomeCard.vue
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/index.ts
 create mode 100644 web/apps/web-ele/src/components/dashboard-design/utils/dataFetcher.ts
 create mode 100644 web/apps/web-ele/src/locales/langs/zh-CN/dict.json
 create mode 100644 web/apps/web-ele/src/locales/langs/zh-CN/system-config.json
 create mode 100644 web/apps/web-ele/src/locales/langs/zh-CN/ui-config.json
 create mode 100644 web/apps/web-ele/src/router/light-menu.ts
 create mode 100644 web/apps/web-ele/src/views/_core/about/index.vue
 create mode 100644 web/apps/web-ele/src/views/_core/account-settings/api-token-management.vue
 create mode 100644 web/apps/web-ele/src/views/_core/account-settings/data.ts
 create mode 100644 web/apps/web-ele/src/views/_core/account-settings/device-item.vue
 create mode 100644 web/apps/web-ele/src/views/_core/account-settings/device-management.vue
 create mode 100644 web/apps/web-ele/src/views/_core/account-settings/index.vue
 create mode 100644 web/apps/web-ele/src/views/_core/account-settings/modules/password-form.vue
 create mode 100644 web/apps/web-ele/src/views/_core/account-settings/modules/profile-form.vue
 create mode 100644 web/apps/web-ele/src/views/_core/dept/data.ts
 create mode 100644 web/apps/web-ele/src/views/_core/dept/index.vue
 create mode 100644 web/apps/web-ele/src/views/_core/dept/modules/dept-form-modal.vue
 create mode 100644 web/apps/web-ele/src/views/_core/dept/modules/dept-tree.vue
 create mode 100644 web/apps/web-ele/src/views/_core/dept/modules/user-form.vue
 create mode 100644 web/apps/web-ele/src/views/_core/dict/data.ts
 create mode 100644 web/apps/web-ele/src/views/_core/dict/index.vue
 create mode 100644 web/apps/web-ele/src/views/_core/dict/modules/dict-form-modal.vue
 create mode 100644 web/apps/web-ele/src/views/_core/dict/modules/dict-item-form-modal.vue
 create mode 100644 web/apps/web-ele/src/views/_core/dict/modules/dict-item-list.vue
 create mode 100644 web/apps/web-ele/src/views/_core/dict/modules/dict-list.vue
 create mode 100644 web/apps/web-ele/src/views/_core/file-manager/components/CreateFolderDialog.vue
 create mode 100644 web/apps/web-ele/src/views/_core/file-manager/components/FileList.vue
 create mode 100644 web/apps/web-ele/src/views/_core/file-manager/components/FileToolbar.vue
 create mode 100644 web/apps/web-ele/src/views/_core/file-manager/components/FolderTree.vue
 create mode 100644 web/apps/web-ele/src/views/_core/file-manager/components/RenameDialog.vue
 create mode 100644 web/apps/web-ele/src/views/_core/file-manager/composables/useFileManager.ts
 create mode 100644 web/apps/web-ele/src/views/_core/file-manager/index.vue
 create mode 100644 web/apps/web-ele/src/views/_core/login-log/data.ts
 create mode 100644 web/apps/web-ele/src/views/_core/login-log/index.vue
 create mode 100644 web/apps/web-ele/src/views/_core/login-log/modules/detail-drawer.vue
 create mode 100644 web/apps/web-ele/src/views/_core/post/data.ts
 create mode 100644 web/apps/web-ele/src/views/_core/post/index.vue
 create mode 100644 web/apps/web-ele/src/views/_core/post/modules/post-form-modal.vue
 create mode 100644 web/apps/web-ele/src/views/_core/post/modules/post-list.vue
 create mode 100644 web/apps/web-ele/src/views/_core/post/modules/user-form.vue
 create mode 100644 web/apps/web-ele/src/views/_core/system-config/index.vue
 create mode 100644 web/apps/web-ele/src/views/_core/system-config/modules/config-form.vue
 create mode 100644 web/apps/web-ele/src/views/_core/system-config/modules/model-config-form.vue
 create mode 100644 web/apps/web-ele/src/views/_core/ui-config/index.vue
 create mode 100644 web/apps/web-ele/src/views/_core/ui-config/modules/app-settings-form.vue
 create mode 100644 web/apps/web-ele/src/views/_core/ui-config/modules/login-config-form.vue
 create mode 100644 web/apps/web-ele/src/views/_core/ui-config/modules/ui-preferences-form.vue

diff --git a/web/apps/web-ele/package.json b/web/apps/web-ele/package.json
index 5b2b65b..6111541 100644
--- a/web/apps/web-ele/package.json
+++ b/web/apps/web-ele/package.json
@@ -37,6 +37,7 @@
     "@vben/layouts": "workspace:*",
     "@vben/locales": "workspace:*",
     "@vben/preferences": "workspace:*",
+    "@vben/plugins": "workspace:*",
     "@vben/request": "workspace:*",
     "@vben/stores": "workspace:*",
     "@vben/styles": "workspace:*",
@@ -50,6 +51,7 @@
     "cron-parser": "^4.9.0",
     "dayjs": "catalog:",
     "element-plus": "catalog:",
+    "grid-layout-plus": "^1.1.1",
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-router": "catalog:"
diff --git a/web/apps/web-ele/src/adapter/vxe-table.ts b/web/apps/web-ele/src/adapter/vxe-table.ts
new file mode 100644
index 0000000..330e025
--- /dev/null
+++ b/web/apps/web-ele/src/adapter/vxe-table.ts
@@ -0,0 +1,258 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+import type { Recordable } from '@vben/types';
+
+import { h } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { $t, $te } from '@vben/locales';
+import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+import { get, isFunction, isString } from '@vben/utils';
+
+import {
+  ElButton,
+  ElImage,
+  ElPopconfirm,
+  ElTag,
+  ElTooltip,
+} from 'element-plus';
+
+import { useVbenForm } from './form';
+
+setupVbenVxeTable({
+  configVxeTable: (vxeUI) => {
+    vxeUI.setConfig({
+      grid: {
+        align: 'center',
+        border: false,
+        columnConfig: {
+          resizable: true,
+        },
+        formConfig: {
+          enabled: false,
+        },
+        minHeight: 180,
+        proxyConfig: {
+          autoLoad: true,
+          response: {
+            list: '',
+            result: 'items',
+            total: 'total',
+          },
+          showActionMsg: true,
+          showResponseMsg: false,
+        },
+        round: true,
+        showOverflow: true,
+        size: 'medium',
+      } as VxeTableGridOptions,
+    });
+
+    vxeUI.renderer.add('CellImage', {
+      renderTableDefault(_renderOpts, params) {
+        const { column, row } = params;
+        const src = row[column.field];
+        return h(ElImage, { previewSrcList: [src], src });
+      },
+    });
+
+    vxeUI.renderer.add('CellLink', {
+      renderTableDefault(renderOpts) {
+        const { props } = renderOpts;
+        return h(
+          ElButton,
+          { link: true, size: 'small' },
+          { default: () => props?.text },
+        );
+      },
+    });
+
+    vxeUI.renderer.add('CellTag', {
+      renderTableDefault({ options, props }, { column, row }) {
+        const value = get(row, column.field);
+        const tagOptions = options ?? [
+          { label: $t('common.enabled'), type: 'success', value: true },
+          { label: $t('common.disabled'), type: 'danger', value: false },
+        ];
+        const tagItem = tagOptions.find((item) => item.value === value);
+        return h(
+          ElTag,
+          {
+            type: tagItem?.type ?? 'info',
+            ...props,
+          },
+          { default: () => tagItem?.label ?? value },
+        );
+      },
+    });
+
+    vxeUI.renderer.add('CellOperation', {
+      renderTableDefault({ attrs, options, props }, { column, row }) {
+        const defaultProps = { link: true, size: 'small', ...props };
+        const align =
+          column.align === 'center'
+            ? 'center'
+            : column.align === 'left'
+              ? 'start'
+              : 'end';
+        const presets: Recordable<Recordable<any>> = {
+          delete: {
+            icon: 'ep:delete',
+            text: $t('common.delete'),
+            type: 'danger',
+          },
+          edit: {
+            icon: 'ep:edit',
+            text: $t('common.edit'),
+            type: 'primary',
+          },
+        };
+        const operations: Array<Recordable<any>> = (
+          options || ['edit', 'delete']
+        )
+          .map((opt) => {
+            if (isString(opt)) {
+              return presets[opt]
+                ? { code: opt, ...presets[opt], ...defaultProps }
+                : {
+                    code: opt,
+                    text: $te(`common.${opt}`) ? $t(`common.${opt}`) : opt,
+                    type: 'primary',
+                    ...defaultProps,
+                  };
+            }
+
+            const buttonConfig = {
+              ...defaultProps,
+              ...presets[opt.code],
+              ...opt,
+            };
+            if (!buttonConfig.type && !presets[opt.code]) {
+              buttonConfig.type = 'primary';
+            }
+            return buttonConfig;
+          })
+          .map((opt) => {
+            const optBtn: Recordable<any> = {};
+            Object.keys(opt).forEach((key) => {
+              optBtn[key] = isFunction(opt[key]) ? opt[key](row) : opt[key];
+            });
+            return optBtn;
+          })
+          .filter((opt) => opt.show !== false);
+
+        function renderBtn(opt: Recordable<any>, listen = true) {
+          const { code, icon, text, ...btnProps } = opt;
+          const buttonType =
+            btnProps.type === 'danger'
+              ? 'danger'
+              : btnProps.type === 'primary'
+                ? 'primary'
+                : 'default';
+
+          const button = h(
+            ElButton,
+            {
+              ...btnProps,
+              circle: !!icon,
+              link: true,
+              onClick: listen
+                ? () =>
+                    attrs?.onClick?.({
+                      code,
+                      row,
+                    })
+                : undefined,
+              size: 'small',
+              type: buttonType,
+            },
+            {
+              default: () =>
+                icon ? h(IconifyIcon, { class: 'size-4', icon }) : text,
+            },
+          );
+
+          if (!icon) return button;
+
+          return h(
+            ElTooltip,
+            {
+              content: text,
+              placement: 'top',
+            },
+            {
+              default: () => button,
+            },
+          );
+        }
+
+        function renderConfirm(opt: Recordable<any>) {
+          const { icon, text } = opt;
+
+          const button = h(
+            ElButton,
+            {
+              circle: !!icon,
+              link: true,
+              size: 'small',
+              title: icon ? text : undefined,
+              type: 'danger',
+            },
+            {
+              default: () =>
+                icon ? h(IconifyIcon, { class: 'size-4', icon }) : text,
+            },
+          );
+
+          return h(
+            ElPopconfirm,
+            {
+              cancelButtonText: $t('common.cancel'),
+              confirmButtonText: $t('common.confirm'),
+              confirmButtonType: 'danger',
+              onConfirm: () => {
+                attrs?.onClick?.({
+                  code: opt.code,
+                  row,
+                });
+              },
+              title: $t('ui.actionTitle.delete', [attrs?.nameTitle || '']),
+            },
+            {
+              default: () =>
+                $t('ui.actionMessage.deleteConfirm', [
+                  row[attrs?.nameField || 'name'],
+                ]),
+              reference: () => button,
+            },
+          );
+        }
+
+        const btns = operations.map((opt) =>
+          opt.code === 'delete' ? renderConfirm(opt) : renderBtn(opt),
+        );
+        return h(
+          'div',
+          {
+            class: 'flex table-operations',
+            style: { justifyContent: align },
+          },
+          btns,
+        );
+      },
+    });
+  },
+  useVbenForm,
+});
+
+export type OnActionClickParams<T = Recordable<any>> = {
+  code: string;
+  row: T;
+};
+
+export type OnActionClickFn<T = Recordable<any>> = (
+  params: OnActionClickParams<T>,
+) => void;
+
+export { useVbenVxeGrid };
+
+export type * from '@vben/plugins/vxe-table';
diff --git a/web/apps/web-ele/src/api/online-dev/page-manager.ts b/web/apps/web-ele/src/api/online-dev/page-manager.ts
new file mode 100644
index 0000000..fbde211
--- /dev/null
+++ b/web/apps/web-ele/src/api/online-dev/page-manager.ts
@@ -0,0 +1,238 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * 页面管理 API
+ * 页面元数据的 CRUD、发布、复制、导入导出
+ */
+
+// ============ 类型定义 ============
+
+/** 页面元数据 */
+export interface PageMeta {
+  id: string;
+  application_id?: string;
+  name: string;
+  code: string;
+  category: string;
+  description: string;
+  status: string;
+  version: number;
+  page_config: Record<string, any>;
+  sort: number;
+  sys_create_datetime: string;
+  sys_update_datetime: string;
+}
+
+/** 页面列表项 */
+export interface PageMetaListItem {
+  id: string;
+  application_id?: string;
+  application_name?: string;
+  application_code?: string;
+  name: string;
+  code: string;
+  category: string;
+  description: string;
+  status: string;
+  version: number;
+  sort: number;
+  sys_create_datetime: string;
+  sys_update_datetime: string;
+}
+
+/** 创建页面请求 */
+export interface PageMetaCreateInput {
+  application_id?: string;
+  name: string;
+  code: string;
+  category?: string;
+  description?: string;
+  sort?: number;
+  page_config?: Record<string, any>;
+}
+
+/** 更新页面请求 */
+export interface PageMetaUpdateInput {
+  name?: string;
+  category?: string;
+  description?: string;
+  sort?: number;
+  page_config?: Record<string, any>;
+}
+
+/** 导入页面请求 */
+export interface PageImportInput {
+  application_id?: string;
+  name: string;
+  code: string;
+  category?: string;
+  description?: string;
+  page_config?: Record<string, any>;
+}
+
+/** 导入预检查请求 */
+export interface PageImportCheckInput {
+  code: string;
+}
+
+/** 导入预检查结果 */
+export interface PageImportCheckResult {
+  code_exists: boolean;
+  can_import: boolean;
+}
+
+/** 列表查询参数 */
+export interface PageListParams {
+  page?: number;
+  pageSize?: number;
+  applicationId?: string;
+  name?: string;
+  code?: string;
+  category?: string;
+  status?: string;
+}
+
+/** 发布配置 */
+export interface PagePublishInput {
+  /** 菜单名称 */
+  menu_name: string;
+  /** 上级菜单ID */
+  menu_parent_id?: string;
+  /** 菜单图标 */
+  menu_icon?: string;
+  /** 菜单排序 */
+  menu_order?: number;
+}
+
+/** 分页响应 */
+interface PagePaginatedResponse<T> {
+  items: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
+// ============ 页面元数据 API ============
+
+/**
+ * 获取页面列表（分页）
+ */
+export async function getPageListApi(params?: PageListParams) {
+  return requestClient.get<PagePaginatedResponse<PageMetaListItem>>(
+    '/api/online_dev/page/list',
+    { params },
+  );
+}
+
+/**
+ * 获取分类列表
+ */
+export async function getPageCategoriesApi() {
+  return requestClient.get<string[]>('/api/online_dev/page/categories');
+}
+
+/**
+ * 获取页面详情
+ */
+export async function getPageDetailApi(pageId: string) {
+  return requestClient.get<PageMeta>(`/api/online_dev/page/${pageId}`);
+}
+
+/**
+ * 根据编码获取页面
+ */
+export async function getPageByCodeApi(code: string) {
+  return requestClient.get<PageMeta>(`/api/online_dev/page/code/${code}`);
+}
+
+/**
+ * 创建页面
+ */
+export async function createPageApi(data: PageMetaCreateInput) {
+  return requestClient.post<PageMeta>('/api/online_dev/page', data);
+}
+
+/**
+ * 更新页面
+ */
+export async function updatePageApi(pageId: string, data: PageMetaUpdateInput) {
+  return requestClient.put<PageMeta>(`/api/online_dev/page/${pageId}`, data);
+}
+
+/**
+ * 删除页面
+ */
+export async function deletePageApi(pageId: string) {
+  return requestClient.delete<PageMeta>(`/api/online_dev/page/${pageId}`);
+}
+
+/**
+ * 批量删除页面
+ */
+export async function batchDeletePageApi(ids: string[]) {
+  return requestClient.delete<{ count: number }>('/api/online_dev/page/batch', {
+    params: { ids },
+  });
+}
+
+/**
+ * 发布页面
+ */
+export async function publishPageApi(pageId: string, data: PagePublishInput) {
+  return requestClient.post<PageMeta>(
+    `/api/online_dev/page/${pageId}/publish`,
+    data,
+  );
+}
+
+/**
+ * 取消发布页面
+ */
+export async function unpublishPageApi(pageId: string) {
+  return requestClient.post<PageMeta>(
+    `/api/online_dev/page/${pageId}/unpublish`,
+  );
+}
+
+/**
+ * 复制页面
+ */
+export async function copyPageApi(
+  pageId: string,
+  newCode: string,
+  newName?: string,
+) {
+  return requestClient.post<PageMeta>(
+    `/api/online_dev/page/${pageId}/copy`,
+    null,
+    {
+      params: { new_code: newCode, new_name: newName },
+    },
+  );
+}
+
+/**
+ * 导出页面配置（返回 JSON 文件）
+ */
+export async function exportPageConfigApi(pageId: string) {
+  return requestClient.get<Blob>(`/api/online_dev/page/${pageId}/export`, {
+    responseType: 'blob',
+  });
+}
+
+/**
+ * 导入预检查
+ */
+export async function checkImportPageApi(data: PageImportCheckInput) {
+  return requestClient.post<PageImportCheckResult>(
+    '/api/online_dev/page/import/check',
+    data,
+  );
+}
+
+/**
+ * 导入页面配置
+ */
+export async function importPageConfigApi(data: PageImportInput) {
+  return requestClient.post<PageMeta>('/api/online_dev/page/import', data);
+}
diff --git a/web/apps/web-ele/src/components/dashboard-design/DashboardRenderer.vue b/web/apps/web-ele/src/components/dashboard-design/DashboardRenderer.vue
new file mode 100644
index 0000000..debc5b0
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/DashboardRenderer.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import type { DashboardConfig } from './store/dashboardDesignStore';
+
+/**
+ * 仪表盘渲染器
+ * 用于在实际页面中展示设计好的仪表盘配置
+ */
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { ElEmpty } from 'element-plus';
+import { GridItem, GridLayout } from 'grid-layout-plus';
+
+import WidgetRenderer from './components/WidgetRenderer.vue';
+
+const props = defineProps<{
+  // 仪表盘配置 JSON 字符串或对象
+  config: DashboardConfig | string;
+}>();
+
+// 解析后的配置
+const dashboardConfig = ref<DashboardConfig | null>(null);
+
+// 解析配置
+const parseConfig = () => {
+  if (!props.config) {
+    dashboardConfig.value = null;
+    return;
+  }
+
+  if (typeof props.config === 'string') {
+    try {
+      dashboardConfig.value = JSON.parse(props.config);
+    } catch {
+      console.error('Invalid dashboard config JSON');
+      dashboardConfig.value = null;
+    }
+  } else {
+    dashboardConfig.value = props.config;
+  }
+};
+
+onMounted(parseConfig);
+watch(() => props.config, parseConfig);
+
+// 布局数据
+const layout = computed(() => {
+  if (!dashboardConfig.value) return [];
+  return dashboardConfig.value.widgets.map((w) => ({
+    i: w.i,
+    x: w.x,
+    y: w.y,
+    w: w.w,
+    h: w.h,
+  }));
+});
+
+// 获取 widget 配置
+const getWidget = (i: string) => {
+  if (!dashboardConfig.value) return null;
+  return dashboardConfig.value.widgets.find((w) => w.i === i);
+};
+
+// 获取动画延迟（交错入场效果）
+const getAnimationDelay = (i: string) => {
+  if (!dashboardConfig.value) return 0;
+  const index = dashboardConfig.value.widgets.findIndex((w) => w.i === i);
+  return index * 80; // 每个组件延迟 80ms
+};
+</script>
+
+<template>
+  <div
+    class="dashboard-renderer h-full"
+    :style="
+      dashboardConfig?.backgroundColor?.includes('gradient')
+        ? { background: dashboardConfig.backgroundColor }
+        : { backgroundColor: dashboardConfig?.backgroundColor || '' }
+    "
+  >
+    <div v-if="dashboardConfig && layout.length > 0">
+      <GridLayout
+        :layout="layout"
+        :col-num="dashboardConfig.columns"
+        :row-height="dashboardConfig.rowHeight"
+        :margin="dashboardConfig.margin"
+        :is-draggable="false"
+        :is-resizable="false"
+        :vertical-compact="true"
+        :use-css-transforms="true"
+        :style="
+          dashboardConfig.showOuterMargin
+            ? {}
+            : {
+                marginLeft: `-${dashboardConfig.margin[0]}px`,
+                marginRight: `-${dashboardConfig.margin[0]}px`,
+                marginTop: `-${dashboardConfig.margin[1]}px`,
+                width: `calc(100% + ${dashboardConfig.margin[0] * 2}px)`,
+              }
+        "
+      >
+        <GridItem
+          v-for="item in layout"
+          :key="item.i"
+          :i="item.i"
+          :x="item.x"
+          :y="item.y"
+          :w="item.w"
+          :h="item.h"
+          class="dashboard-widget"
+        >
+          <WidgetRenderer
+            v-if="getWidget(item.i)"
+            :widget="getWidget(item.i)!"
+            :is-design-mode="false"
+            :animation-delay="getAnimationDelay(item.i)"
+          />
+        </GridItem>
+      </GridLayout>
+    </div>
+
+    <ElEmpty
+      v-else
+      :description="$t('dashboard-design.noConfigTip')"
+      class="py-20"
+    />
+  </div>
+</template>
+
+<style scoped>
+.dashboard-renderer {
+  background-color: var(--el-bg-color-page);
+}
+
+.dashboard-widget {
+  overflow: hidden;
+  background: var(--el-bg-color);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
+}
+</style>
diff --git a/web/apps/web-ele/src/components/dashboard-design/components/WidgetRenderer.vue b/web/apps/web-ele/src/components/dashboard-design/components/WidgetRenderer.vue
new file mode 100644
index 0000000..9beb5f1
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/components/WidgetRenderer.vue
@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import type {
+  DashboardWidget,
+  WidgetMaterial,
+} from '../store/dashboardDesignStore';
+
+import {
+  computed,
+  defineAsyncComponent,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from 'vue';
+
+import { Loader2 } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import {
+  defaultWidgetStyle,
+  useDashboardDesignStore,
+} from '../store/dashboardDesignStore';
+import { createRefreshTimer, fetchWidgetData } from '../utils/dataFetcher';
+
+const props = defineProps<{
+  animationDelay?: number; // 入场动画延迟（毫秒）
+  isDesignMode?: boolean;
+  material?: WidgetMaterial;
+  widget: DashboardWidget;
+}>();
+
+// 入场动画状态
+const isEntered = ref(false);
+// 数据更新动画状态
+const isUpdating = ref(false);
+
+// 组件映射
+const widgetComponents: Record<
+  string,
+  ReturnType<typeof defineAsyncComponent>
+> = {
+  'notice-list': defineAsyncComponent(() => import('./widgets/NoticeList.vue')),
+  'announcement-list': defineAsyncComponent(
+    () => import('./widgets/AnnouncementList.vue'),
+  ),
+  'quick-links': defineAsyncComponent(() => import('./widgets/QuickLinks.vue')),
+  'welcome-card': defineAsyncComponent(
+    () => import('./widgets/WelcomeCard.vue'),
+  ),
+  calendar: defineAsyncComponent(() => import('./widgets/CalendarWidget.vue')),
+  countdown: defineAsyncComponent(
+    () => import('./widgets/CountdownWidget.vue'),
+  ),
+  clock: defineAsyncComponent(() => import('./widgets/ClockWidget.vue')),
+  weather: defineAsyncComponent(() => import('./widgets/WeatherWidget.vue')),
+  'approval-center': defineAsyncComponent(
+    () => import('./widgets/ApprovalCenter.vue'),
+  ),
+  'my-apps': defineAsyncComponent(() => import('./widgets/MyApps.vue')),
+  'server-monitor': defineAsyncComponent(
+    () => import('./widgets/ServerMonitor.vue'),
+  ),
+};
+
+const store = useDashboardDesignStore();
+
+const currentComponent = computed(() => {
+  return widgetComponents[props.widget.type];
+});
+
+// 从 paramBindings 解析出实际参数值
+function resolveParams(): Record<string, any> | undefined {
+  const bindings = props.widget.dataSource?.paramBindings;
+  if (!bindings || bindings.length === 0) return undefined;
+  const params: Record<string, any> = {};
+  for (const b of bindings) {
+    if (b.paramName && b.globalKey) {
+      const val = store.globalParams[b.globalKey];
+      if (val !== undefined && val !== '') {
+        params[b.paramName] = val;
+      }
+    }
+  }
+  return Object.keys(params).length > 0 ? params : undefined;
+}
+
+// 动态数据
+const dynamicProps = ref<Record<string, any>>({});
+const isLoading = ref(false);
+const hasError = ref(false);
+
+// 合并后的 widget（静态 props + 动态 props）
+const mergedWidget = computed(() => {
+  return {
+    ...props.widget,
+    props: {
+      ...props.widget.props,
+      ...dynamicProps.value,
+    },
+  };
+});
+
+// 计算样式（只应用容器级别的样式，不影响组件内部）
+const widgetStyle = computed(() => {
+  const style = { ...defaultWidgetStyle, ...props.widget.style };
+  const css: Record<string, string> = {};
+
+  // 背景（默认使用主题背景色，支持渐变色）
+  const bgValue = style.backgroundColor || 'var(--el-bg-color)';
+  if (bgValue.includes('gradient')) {
+    css.background = bgValue;
+  } else {
+    css.backgroundColor = bgValue;
+  }
+
+  // 边框
+  if (style.borderWidth && style.borderWidth > 0) {
+    css.borderWidth = `${style.borderWidth}px`;
+    css.borderStyle = style.borderStyle || 'solid';
+    css.borderColor = style.borderColor || 'var(--el-border-color)';
+  }
+
+  // 圆角
+  if (style.borderRadius !== undefined) {
+    css.borderRadius = `${style.borderRadius}px`;
+  }
+
+  // 阴影
+  if (style.shadowEnabled) {
+    const color = style.shadowColor || 'rgba(0, 0, 0, 0.1)';
+    const blur = style.shadowBlur || 4;
+    const x = style.shadowOffsetX || 0;
+    const y = style.shadowOffsetY || 1;
+    css.boxShadow = `${x}px ${y}px ${blur}px ${color}`;
+  } else {
+    css.boxShadow = 'none';
+  }
+
+  return css;
+});
+
+// 加载数据
+const loadData = async () => {
+  if (!props.widget.dataSource || props.widget.dataSource.type === 'static') {
+    dynamicProps.value = {};
+    return;
+  }
+
+  isLoading.value = true;
+  hasError.value = false;
+
+  try {
+    const params = resolveParams();
+    const result = await fetchWidgetData(
+      props.widget.dataSource,
+      props.widget.props,
+      params,
+    );
+
+    // 数据更新动画
+    if (isEntered.value && Object.keys(dynamicProps.value).length > 0) {
+      isUpdating.value = true;
+      setTimeout(() => {
+        isUpdating.value = false;
+      }, 300);
+    }
+
+    dynamicProps.value = result.props;
+  } catch (error) {
+    console.error('[WidgetRenderer] loadData error', error);
+    hasError.value = true;
+  } finally {
+    isLoading.value = false;
+  }
+};
+
+// 刷新定时器清理函数
+let cleanupTimer: (() => void) | null = null;
+
+// 设置刷新定时器
+const setupRefreshTimer = () => {
+  if (cleanupTimer) {
+    cleanupTimer();
+    cleanupTimer = null;
+  }
+
+  // 支持 api 和 dataSource 类型的自动刷新
+  const dsType = props.widget.dataSource?.type;
+  if (!props.isDesignMode && (dsType === 'api' || dsType === 'dataSource')) {
+    cleanupTimer = createRefreshTimer(props.widget.dataSource, loadData);
+  }
+};
+
+// 监听数据源变化
+watch(
+  () => props.widget.dataSource,
+  () => {
+    loadData();
+    setupRefreshTimer();
+  },
+  { deep: true },
+);
+
+// 监听全局筛选参数变化，有 paramBindings 的组件重新加载数据
+watch(
+  () => store.globalParamsVersion,
+  () => {
+    if (props.isDesignMode) return;
+    const bindings = props.widget.dataSource?.paramBindings;
+    if (bindings && bindings.length > 0) {
+      loadData();
+    }
+  },
+);
+
+onMounted(() => {
+  loadData();
+  setupRefreshTimer();
+
+  // 入场动画
+  const delay = props.animationDelay || 0;
+  setTimeout(() => {
+    isEntered.value = true;
+  }, delay);
+});
+
+onUnmounted(() => {
+  if (cleanupTimer) {
+    cleanupTimer();
+  }
+});
+
+// 动画类名
+const animationClass = computed(() => {
+  return {
+    'widget-enter': true,
+    'widget-entered': isEntered.value,
+    'widget-updating': isUpdating.value,
+  };
+});
+</script>
+
+<template>
+  <div
+    class="widget-renderer relative h-full w-full overflow-hidden"
+    :class="animationClass"
+    :style="widgetStyle"
+  >
+    <!-- 加载状态 -->
+    <div
+      v-if="isLoading"
+      class="absolute inset-0 z-10 flex items-center justify-center bg-white/50"
+    >
+      <Loader2 class="text-primary h-6 w-6 animate-spin" />
+    </div>
+
+    <!-- 错误状态 -->
+    <div v-if="hasError && !isLoading" class="absolute right-2 top-2 z-10">
+      <span class="text-xs text-red-500">{{
+        $t('dashboard-design.loadDataError')
+      }}</span>
+    </div>
+
+    <!-- 组件内容 -->
+    <component
+      :is="currentComponent"
+      v-if="currentComponent"
+      :widget="mergedWidget"
+      :is-design-mode="isDesignMode"
+    />
+    <div
+      v-else
+      class="flex h-full w-full items-center justify-center text-gray-400"
+    >
+      {{ $t('dashboard-design.unknownWidget') }}: {{ widget.type }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes pulse-update {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    box-shadow: 0 0 0 2px var(--el-color-primary-light-5);
+    transform: scale(1.02);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+.widget-enter {
+  opacity: 0;
+  transform: translateY(20px) scale(0.95);
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.widget-entered {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+/* 数据更新动画 */
+.widget-updating {
+  animation: pulse-update 0.3s ease-in-out;
+}
+
+/* 入场动画 */
+</style>
diff --git a/web/apps/web-ele/src/components/dashboard-design/components/widgets/AnnouncementList.vue b/web/apps/web-ele/src/components/dashboard-design/components/widgets/AnnouncementList.vue
new file mode 100644
index 0000000..cbe48df
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/components/widgets/AnnouncementList.vue
@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import type { DashboardWidget } from '../../store/dashboardDesignStore';
+
+import type { UserAnnouncement } from '#/api/core/announcement';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { CheckCheck, Megaphone } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { ElButton, ElEmpty, ElScrollbar, ElTag } from 'element-plus';
+
+import {
+  getUserAnnouncementDetailApi,
+  getUserAnnouncementListApi,
+} from '#/api/core/announcement';
+import { ZqDialog } from '#/components/zq-dialog';
+
+const props = defineProps<{
+  widget: DashboardWidget;
+}>();
+
+// 实际公告数据
+const announcements = ref<UserAnnouncement[]>([]);
+const loading = ref(false);
+
+// 详情弹窗
+const detailVisible = ref(false);
+const currentAnnouncement = ref<null | UserAnnouncement>(null);
+const detailLoading = ref(false);
+
+// 未读数量
+const unreadCount = computed(
+  () => announcements.value.filter((a) => !a.is_read).length,
+);
+
+// 获取优先级配置
+const getPriorityConfig = (priority: number) => {
+  switch (priority) {
+    case 1: {
+      return {
+        type: 'warning' as const,
+        label: $t('dashboard-design.widgets.announcement.priority.important'),
+      };
+    }
+    case 2: {
+      return {
+        type: 'danger' as const,
+        label: $t('dashboard-design.widgets.announcement.priority.urgent'),
+      };
+    }
+    default: {
+      return {
+        type: 'info' as const,
+        label: $t('dashboard-design.widgets.announcement.priority.normal'),
+      };
+    }
+  }
+};
+
+// 格式化时间
+const formatTime = (dateStr?: string) => {
+  if (!dateStr) return '';
+  // 处理 "2025-12-01 21:47:29" 格式，替换空格为T以兼容所有浏览器
+  const date = new Date(dateStr.replace(' ', 'T'));
+  if (isNaN(date.getTime())) return dateStr;
+
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const minutes = Math.floor(diff / 60_000);
+  const hours = Math.floor(diff / 3_600_000);
+  const days = Math.floor(diff / 86_400_000);
+
+  if (minutes < 1)
+    return $t('dashboard-design.widgets.announcement.time.justNow');
+  if (minutes < 60)
+    return `${minutes}${$t('dashboard-design.widgets.announcement.time.minutesAgo')}`;
+  if (hours < 24)
+    return `${hours}${$t('dashboard-design.widgets.announcement.time.hoursAgo')}`;
+  if (days < 7)
+    return `${days}${$t('dashboard-design.widgets.announcement.time.daysAgo')}`;
+  return date.toLocaleDateString();
+};
+
+// 加载公告数据
+const loadAnnouncements = async () => {
+  loading.value = true;
+  try {
+    const limit = props.widget.props.limit || 5;
+    const res = await getUserAnnouncementListApi({ page: 1, pageSize: limit });
+    announcements.value = res.items || [];
+  } catch (error) {
+    console.error('Failed to load announcements:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 查看公告详情（会自动标记已读）
+const viewDetail = async (item: UserAnnouncement) => {
+  detailVisible.value = true;
+  detailLoading.value = true;
+
+  try {
+    // 获取详情会自动标记已读
+    const detail = await getUserAnnouncementDetailApi(item.id);
+    currentAnnouncement.value = detail;
+    // 更新列表中的已读状态
+    item.is_read = true;
+  } catch (error) {
+    console.error('Failed to load announcement detail:', error);
+    currentAnnouncement.value = item;
+  } finally {
+    detailLoading.value = false;
+  }
+};
+
+// 全部已读（逐个标记）
+const markAllRead = async () => {
+  if (unreadCount.value === 0) return;
+
+  const unreadItems = announcements.value.filter((a) => !a.is_read);
+  for (const item of unreadItems) {
+    try {
+      await getUserAnnouncementDetailApi(item.id);
+      item.is_read = true;
+    } catch (error) {
+      console.error('Failed to mark as read:', error);
+    }
+  }
+};
+
+onMounted(() => {
+  loadAnnouncements();
+});
+</script>
+
+<template>
+  <div class="announcement-list flex h-full flex-col p-3">
+    <div class="mb-3 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <Megaphone class="text-muted-foreground h-4 w-4" />
+        <span class="text-muted-foreground text-sm font-medium">{{
+          widget.props.title
+        }}</span>
+        <ElTag v-if="unreadCount > 0" type="danger" size="small" round>
+          {{ unreadCount }}
+        </ElTag>
+      </div>
+      <ElButton
+        v-if="unreadCount > 0"
+        type="primary"
+        text
+        size="small"
+        @click="markAllRead"
+      >
+        <CheckCheck class="mr-1 h-3.5 w-3.5" />
+        {{ $t('dashboard-design.widgets.announcement.markAllRead') }}
+      </ElButton>
+    </div>
+    <ElScrollbar class="flex-1">
+      <div v-if="announcements.length > 0" class="space-y-2">
+        <div
+          v-for="item in announcements"
+          :key="item.id"
+          class="cursor-pointer rounded-md p-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
+          :class="{ 'opacity-60': item.is_read }"
+          @click="viewDetail(item)"
+        >
+          <div class="flex items-start gap-2">
+            <ElTag
+              v-if="item.is_top"
+              type="danger"
+              size="small"
+              effect="dark"
+              class="flex-shrink-0"
+            >
+              {{ $t('dashboard-design.widgets.announcement.top') }}
+            </ElTag>
+            <ElTag
+              :type="getPriorityConfig(item.priority).type"
+              size="small"
+              class="flex-shrink-0"
+            >
+              {{ getPriorityConfig(item.priority).label }}
+            </ElTag>
+            <div class="min-w-0 flex-1">
+              <div class="truncate text-sm font-medium">{{ item.title }}</div>
+            </div>
+          </div>
+          <div
+            v-if="item.summary"
+            class="text-muted-foreground mt-1 line-clamp-2 text-xs"
+          >
+            {{ item.summary }}
+          </div>
+          <div
+            class="text-muted-foreground mt-1 flex items-center justify-between text-xs"
+          >
+            <span>{{ item.publisher_name }}</span>
+            <span>{{ formatTime(item.publish_time) }}</span>
+          </div>
+        </div>
+      </div>
+      <ElEmpty
+        v-else
+        :description="$t('dashboard-design.widgets.announcement.noData')"
+        :image-size="60"
+      />
+    </ElScrollbar>
+
+    <!-- 公告详情弹窗 -->
+    <ZqDialog
+      v-model="detailVisible"
+      :title="currentAnnouncement?.title"
+      width="800px"
+      destroy-on-close
+      append-to-body
+    >
+      <div class="min-h-[500px]" v-loading="detailLoading">
+        <!-- <div v-if="detailLoading" class="py-8 text-center text-gray-400">
+          {{ $t('dashboard-design.widgets.announcement.loading') }}
+        </div> -->
+        <div v-if="currentAnnouncement" class="space-y-4">
+          <div class="flex items-center gap-2">
+            <ElTag
+              v-if="currentAnnouncement.is_top"
+              type="danger"
+              size="small"
+              effect="dark"
+            >
+              {{ $t('dashboard-design.widgets.announcement.top') }}
+            </ElTag>
+            <ElTag
+              :type="getPriorityConfig(currentAnnouncement.priority).type"
+              size="small"
+            >
+              {{ getPriorityConfig(currentAnnouncement.priority).label }}
+            </ElTag>
+            <span class="text-muted-foreground text-xs">{{
+              formatTime(currentAnnouncement.publish_time)
+            }}</span>
+          </div>
+          <!-- 摘要 -->
+          <div
+            v-if="currentAnnouncement.summary"
+            class="border-l-4 border-[var(--el-color-primary)] bg-[var(--el-fill-color-light)] py-3 pl-4 pr-3 text-sm text-[var(--el-text-color-regular)]"
+          >
+            {{ currentAnnouncement.summary }}
+          </div>
+          <!-- 富文本内容 -->
+          <div
+            class="announcement-content prose max-w-none"
+            v-html="
+              currentAnnouncement.content ||
+              $t('dashboard-design.widgets.announcement.noContent')
+            "
+          ></div>
+          <div class="text-muted-foreground text-xs">
+            {{ $t('dashboard-design.widgets.announcement.publisher')
+            }}{{ currentAnnouncement.publisher_name }}
+          </div>
+        </div>
+      </div>
+    </ZqDialog>
+  </div>
+</template>
+
+<style scoped>
+/* 背景色由 WidgetRenderer 控制 */
+
+.announcement-content :deep(img) {
+  max-width: 100%;
+}
+
+.announcement-content :deep(table) {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.announcement-content :deep(td),
+.announcement-content :deep(th) {
+  border: 1px solid var(--el-border-color);
+  padding: 8px;
+}
+
+.announcement-content :deep(blockquote) {
+  border-left: 4px solid var(--el-border-color);
+  padding-left: 16px;
+  margin: 8px 0;
+  color: var(--el-text-color-secondary);
+}
+
+.announcement-content :deep(a) {
+  color: var(--el-color-primary);
+  text-decoration: underline;
+}
+</style>
diff --git a/web/apps/web-ele/src/components/dashboard-design/components/widgets/ApprovalCenter.vue b/web/apps/web-ele/src/components/dashboard-design/components/widgets/ApprovalCenter.vue
new file mode 100644
index 0000000..65c5c48
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/components/widgets/ApprovalCenter.vue
@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import type { DashboardWidget } from '#/components/dashboard-design';
+
+import { computed } from 'vue';
+
+import {
+  ChevronRight,
+  ClipboardCheck,
+  ClipboardList,
+  FilePen,
+  Play,
+  Send,
+  UserCheck,
+} from '@vben/icons';
+import { $t } from '@vben/locales';
+
+const props = defineProps<{
+  widget: DashboardWidget;
+}>();
+
+// 审批中心菜单项
+const menuItems = computed(() => [
+  {
+    key: 'initiated',
+    title: $t('dashboard-design.widgets.approvalCenter.initiated'),
+    icon: Send,
+    color: 'rgba(59, 130, 246, 0.85)',
+    path: '/workflow/initiated',
+  },
+  {
+    key: 'pending',
+    title: $t('dashboard-design.widgets.approvalCenter.pending'),
+    icon: ClipboardList,
+    color: 'rgba(245, 158, 11, 0.85)',
+    path: '/workflow/pending',
+  },
+  {
+    key: 'handling',
+    title: $t('dashboard-design.widgets.approvalCenter.handling'),
+    icon: FilePen,
+    color: 'rgba(139, 92, 246, 0.85)',
+    path: '/workflow/pending',
+  },
+  {
+    key: 'handled',
+    title: $t('dashboard-design.widgets.approvalCenter.handled'),
+    icon: ClipboardCheck,
+    color: 'rgba(14, 165, 233, 0.85)',
+    path: '/workflow/handled',
+  },
+  {
+    key: 'copy',
+    title: $t('dashboard-design.widgets.approvalCenter.copy'),
+    icon: UserCheck,
+    color: 'rgba(249, 115, 22, 0.85)',
+    path: '/workflow/copy',
+  },
+  {
+    key: 'start',
+    title: $t('dashboard-design.widgets.approvalCenter.start'),
+    icon: Play,
+    color: 'rgba(20, 184, 166, 0.85)',
+    path: '/workflow/start',
+  },
+]);
+
+// 路由前缀
+const routePrefix = computed(
+  () => props.widget.props.routePrefix || '/app/workflow_center',
+);
+
+// 点击菜单项
+const handleClick = (item: { path: string }) => {
+  window.open(`${routePrefix.value}${item.path}`, '_blank');
+};
+
+// 点击更多
+const handleMore = () => {
+  window.open(`${routePrefix.value}/workflow/pending`, '_blank');
+};
+</script>
+
+<template>
+  <div class="approval-center flex h-full flex-col p-4">
+    <!-- 头部 -->
+    <div class="mb-4 flex items-center justify-between">
+      <span class="text-sm font-medium">{{ widget.props.title }}</span>
+      <button
+        v-if="widget.props.showMore"
+        type="button"
+        class="text-muted-foreground hover:text-primary flex items-center gap-0.5 text-xs transition-colors"
+        @click="handleMore"
+      >
+        {{ $t('dashboard-design.widgets.approvalCenter.more') }}
+        <ChevronRight class="h-3.5 w-3.5" />
+      </button>
+    </div>
+    <!-- 菜单网格 -->
+    <div class="flex flex-1 items-center justify-around gap-2">
+      <div
+        v-for="item in menuItems"
+        :key="item.key"
+        class="flex cursor-pointer flex-col items-center gap-2 transition-transform hover:scale-105"
+        @click="handleClick(item)"
+      >
+        <div
+          class="flex h-11 w-11 items-center justify-center rounded-full"
+          :style="{ backgroundColor: item.color }"
+        >
+          <component :is="item.icon" class="h-5 w-5 text-white" />
+        </div>
+        <span class="text-muted-foreground whitespace-nowrap text-xs">{{
+          item.title
+        }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/apps/web-ele/src/components/dashboard-design/components/widgets/CalendarWidget.vue b/web/apps/web-ele/src/components/dashboard-design/components/widgets/CalendarWidget.vue
new file mode 100644
index 0000000..23dd43f
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/components/widgets/CalendarWidget.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { DashboardWidget } from '../../store/dashboardDesignStore';
+
+import { ref } from 'vue';
+
+import { Calendar } from '@vben/icons';
+
+import { ElCalendar } from 'element-plus';
+
+defineProps<{
+  widget: DashboardWidget;
+}>();
+
+const selectedDate = ref(new Date());
+</script>
+
+<template>
+  <div class="calendar-widget flex h-full flex-col p-3">
+    <div class="mb-2 flex items-center gap-2">
+      <Calendar class="text-muted-foreground h-4 w-4" />
+      <span class="text-muted-foreground text-sm font-medium">{{
+        widget.props.title
+      }}</span>
+    </div>
+    <div class="min-h-0 flex-1 overflow-hidden">
+      <ElCalendar v-model="selectedDate" class="compact-calendar" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 背景色由 WidgetRenderer 控制 */
+
+.compact-calendar {
+  --el-calendar-border: none;
+}
+
+:deep(.el-calendar) {
+  height: 100%;
+}
+
+:deep(.el-calendar__header) {
+  padding: 8px 0;
+}
+
+:deep(.el-calendar__body) {
+  padding: 0;
+}
+
+:deep(.el-calendar-table thead th) {
+  padding: 4px 0;
+  font-size: 12px;
+}
+
+:deep(.el-calendar-table .el-calendar-day) {
+  height: 32px;
+  padding: 2px;
+  font-size: 12px;
+}
+
+:deep(.el-calendar-table td.is-selected .el-calendar-day) {
+  color: white;
+  background-color: var(--el-color-primary);
+  border-radius: 4px;
+}
+
+:deep(.el-calendar-table td.is-today .el-calendar-day) {
+  font-weight: bold;
+  color: var(--el-color-primary);
+}
+</style>
diff --git a/web/apps/web-ele/src/components/dashboard-design/components/widgets/ClockWidget.vue b/web/apps/web-ele/src/components/dashboard-design/components/widgets/ClockWidget.vue
new file mode 100644
index 0000000..9b6f635
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/components/widgets/ClockWidget.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { DashboardWidget } from '../../store/dashboardDesignStore';
+
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+import { preferences } from '@vben/preferences';
+
+const props = defineProps<{
+  widget: DashboardWidget;
+}>();
+
+const locale = computed(() => preferences.app.locale);
+
+const currentTime = ref('');
+const currentDate = ref('');
+
+let timer: null | ReturnType<typeof setInterval> = null;
+
+const updateTime = () => {
+  const now = new Date();
+
+  // 处理时区
+  const date = now;
+  if (props.widget.props.timezone && props.widget.props.timezone !== 'local') {
+    try {
+      const options: Intl.DateTimeFormatOptions = {
+        timeZone: props.widget.props.timezone,
+        hour: '2-digit',
+        minute: '2-digit',
+        second: props.widget.props.showSeconds ? '2-digit' : undefined,
+        hour12: !props.widget.props.format24,
+      };
+      currentTime.value = now.toLocaleTimeString(locale.value, options);
+
+      const dateOptions: Intl.DateTimeFormatOptions = {
+        timeZone: props.widget.props.timezone,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        weekday: 'short',
+      };
+      currentDate.value = now.toLocaleDateString(locale.value, dateOptions);
+      return;
+    } catch {
+      // 时区无效，使用本地时间
+    }
+  }
+
+  // 本地时间
+  const hours = props.widget.props.format24
+    ? String(date.getHours()).padStart(2, '0')
+    : String(date.getHours() % 12 || 12).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const seconds = String(date.getSeconds()).padStart(2, '0');
+  const ampm = props.widget.props.format24
+    ? ''
+    : (date.getHours() >= 12
+      ? ' PM'
+      : ' AM');
+
+  currentTime.value = props.widget.props.showSeconds
+    ? `${hours}:${minutes}:${seconds}${ampm}`
+    : `${hours}:${minutes}${ampm}`;
+
+  const weekdays = $t(
+    'dashboard-design.widgets.clock.weekdays',
+  ) as unknown as string[];
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  const weekday = weekdays[date.getDay()];
+
+  const yearSuffix = $t('dashboard-design.widgets.clock.year');
+  const monthSuffix = $t('dashboard-design.widgets.clock.month');
+  const daySuffix = $t('dashboard-design.widgets.clock.day');
+
+  currentDate.value = `${year}${yearSuffix}${month}${monthSuffix}${day}${daySuffix} ${weekday}`;
+};
+
+onMounted(() => {
+  updateTime();
+  timer = setInterval(updateTime, 1000);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+});
+</script>
+
+<template>
+  <div
+    class="clock-widget flex h-full flex-col items-center justify-center p-3"
+  >
+    <div v-if="widget.props.title" class="text-muted-foreground mb-2 text-sm">
+      {{ widget.props.title }}
+    </div>
+
+    <div class="time-display">
+      {{ currentTime }}
+    </div>
+
+    <div v-if="widget.props.showDate" class="date-display">
+      {{ currentDate }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.time-display {
+  font-size: 2.5rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--el-text-color-primary);
+}
+
+.date-display {
+  margin-top: 8px;
+  font-size: 0.875rem;
+  color: var(--el-text-color-secondary);
+}
+</style>
diff --git a/web/apps/web-ele/src/components/dashboard-design/components/widgets/CountdownWidget.vue b/web/apps/web-ele/src/components/dashboard-design/components/widgets/CountdownWidget.vue
new file mode 100644
index 0000000..4e87591
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/components/widgets/CountdownWidget.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import type { DashboardWidget } from '../../store/dashboardDesignStore';
+
+import { onMounted, onUnmounted, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+const props = defineProps<{
+  widget: DashboardWidget;
+}>();
+
+// 剩余时间
+const remainingTime = ref({
+  days: 0,
+  hours: 0,
+  minutes: 0,
+  seconds: 0,
+  finished: false,
+});
+
+let timer: null | ReturnType<typeof setInterval> = null;
+
+const calculateRemaining = () => {
+  const targetTime = new Date(props.widget.props.targetTime).getTime();
+  const now = Date.now();
+  const diff = targetTime - now;
+
+  if (diff <= 0) {
+    remainingTime.value = {
+      days: 0,
+      hours: 0,
+      minutes: 0,
+      seconds: 0,
+      finished: true,
+    };
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+    return;
+  }
+
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+
+  remainingTime.value = { days, hours, minutes, seconds, finished: false };
+};
+
+onMounted(() => {
+  calculateRemaining();
+  timer = setInterval(calculateRemaining, 1000);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+});
+
+const padZero = (num: number) => String(num).padStart(2, '0');
+</script>
+
+<template>
+  <div class="countdown-widget flex h-full flex-col p-3">
+    <div
+      v-if="widget.props.title"
+      class="text-muted-foreground mb-2 text-sm font-medium"
+    >
+      {{ widget.props.title }}
+    </div>
+
+    <div class="flex flex-1 items-center justify-center">
+      <template v-if="!remainingTime.finished">
+        <div class="flex items-center gap-2">
+          <template v-if="widget.props.showDays">
+            <div class="time-block">
+              <div class="time-value">{{ remainingTime.days }}</div>
+              <div class="time-label">
+                {{ $t('dashboard-design.widgets.countdown.day') }}
+              </div>
+            </div>
+            <span class="time-separator">:</span>
+          </template>
+
+          <template v-if="widget.props.showHours">
+            <div class="time-block">
+              <div class="time-value">{{ padZero(remainingTime.hours) }}</div>
+              <div class="time-label">
+                {{ $t('dashboard-design.widgets.countdown.hour') }}
+              </div>
+            </div>
+            <span class="time-separator">:</span>
+          </template>
+
+          <template v-if="widget.props.showMinutes">
+            <div class="time-block">
+              <div class="time-value">{{ padZero(remainingTime.minutes) }}</div>
+              <div class="time-label">
+                {{ $t('dashboard-design.widgets.countdown.minute') }}
+              </div>
+            </div>
+            <span v-if="widget.props.showSeconds" class="time-separator">:</span>
+          </template>
+
+          <template v-if="widget.props.showSeconds">
+            <div class="time-block">
+              <div class="time-value">{{ padZero(remainingTime.seconds) }}</div>
+              <div class="time-label">
+                {{ $t('dashboard-design.widgets.countdown.second') }}
+              </div>
+            </div>
+          </template>
+        </div>
+      </template>
+
+      <div v-else class="text-muted-foreground text-lg">
+        {{
+          widget.props.finishedText ||
+          $t('dashboard-design.widgets.countdown.finished')
+        }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.time-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 48px;
+}
+
+.time-value {
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--el-color-primary);
+}
+
+.time-label {
+  margin-top: 4px;
+  font-size: 0.75rem;
+  color: var(--el-text-color-secondary);
+}
+
+.time-separator {
+  margin-bottom: 16px;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--el-text-color-secondary);
+}
+</style>
diff --git a/web/apps/web-ele/src/components/dashboard-design/components/widgets/MyApps.vue b/web/apps/web-ele/src/components/dashboard-design/components/widgets/MyApps.vue
new file mode 100644
index 0000000..65a8780
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/components/widgets/MyApps.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { DashboardWidget } from '#/components/dashboard-design';
+import type { ApplicationListItem } from '#/api/core/application';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { AppWindow, ChevronRight, IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { ElEmpty, ElScrollbar } from 'element-plus';
+
+import { getApplicationListApi } from '#/api/core/application';
+
+const props = defineProps<{
+  widget: DashboardWidget;
+}>();
+
+// 应用列表
+const appList = ref<ApplicationListItem[]>([]);
+const loading = ref(false);
+
+// 最大显示数量
+const maxCount = computed(() => props.widget.props.maxCount || 8);
+
+// 显示的应用列表
+const displayApps = computed(() => appList.value.slice(0, maxCount.value));
+
+// 加载已发布的应用列表
+const loadApps = async () => {
+  loading.value = true;
+  try {
+    const res = await getApplicationListApi({
+      page: 1,
+      pageSize: 100,
+      status: 'published',
+    });
+    appList.value = res.items || [];
+  } catch (error) {
+    console.error('Failed to load applications:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 点击应用
+const handleClick = (app: ApplicationListItem) => {
+  window.open(`${window.location.origin}/app/${app.code}`, '_blank');
+};
+
+// 点击更多
+const handleMore = () => {
+  window.open(`${window.location.origin}/application`, '_blank');
+};
+
+onMounted(() => {
+  loadApps();
+});
+</script>
+
+<template>
+  <div class="my-apps flex h-full flex-col p-4" v-loading="loading">
+    <!-- 头部 -->
+    <div class="mb-4 flex items-center justify-between">
+      <span class="text-sm font-medium">{{ widget.props.title }}</span>
+      <button
+        v-if="widget.props.showMore"
+        type="button"
+        class="text-muted-foreground hover:text-primary flex items-center gap-0.5 text-xs transition-colors"
+        @click="handleMore"
+      >
+        {{ $t('dashboard-design.widgets.myApps.more') }}
+        <ChevronRight class="h-3.5 w-3.5" />
+      </button>
+    </div>
+    <!-- 应用网格 -->
+    <ElScrollbar class="flex-1">
+      <div
+        v-if="displayApps.length > 0"
+        class="flex flex-wrap gap-4"
+      >
+        <div
+          v-for="app in displayApps"
+          :key="app.id"
+          class="flex cursor-pointer flex-col items-center gap-2 transition-transform hover:scale-105 m-4"
+          style="width: 72px"
+          @click="handleClick(app)"
+        >
+          <div
+            class="flex h-12 w-12 items-center justify-center rounded-xl"
+            style="background: linear-gradient(135deg, var(--el-color-primary-light-3), var(--el-color-primary))"
+          >
+            <IconifyIcon
+              v-if="app.icon"
+              :icon="app.icon"
+              class="h-6 w-6 text-white"
+            />
+            <AppWindow v-else class="h-6 w-6 text-white" />
+          </div>
+          <span class="text-muted-foreground w-full truncate text-center text-xs">{{ app.name }}</span>
+        </div>
+      </div>
+      <ElEmpty
+        v-else-if="!loading"
+        :description="$t('dashboard-design.widgets.myApps.noData')"
+        :image-size="60"
+      />
+    </ElScrollbar>
+  </div>
+</template>
diff --git a/web/apps/web-ele/src/components/dashboard-design/components/widgets/NoticeList.vue b/web/apps/web-ele/src/components/dashboard-design/components/widgets/NoticeList.vue
new file mode 100644
index 0000000..5555849
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/components/widgets/NoticeList.vue
@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import type { DashboardWidget } from '../../store/dashboardDesignStore';
+
+import type { Message } from '#/api/core/message';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { Bell, CheckCheck, ExternalLink } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { ElButton, ElDialog, ElEmpty, ElScrollbar, ElTag } from 'element-plus';
+
+import {
+  getMessageListApi,
+  markAllAsReadApi,
+  markAsReadApi,
+} from '#/api/core/message';
+
+const props = defineProps<{
+  widget: DashboardWidget;
+}>();
+
+// 实际消息数据
+const messages = ref<Message[]>([]);
+const loading = ref(false);
+
+// 详情弹窗
+const detailVisible = ref(false);
+const currentMessage = ref<Message | null>(null);
+
+// 未读数量
+const unreadCount = computed(
+  () => messages.value.filter((m) => m.status === 'unread').length,
+);
+
+// 获取消息类型配置
+const getTypeConfig = (type: string) => {
+  switch (type) {
+    case 'announcement': {
+      return {
+        type: 'success' as const,
+        label: $t('message.typeMap.announcement'),
+      };
+    }
+    case 'system': {
+      return { type: 'info' as const, label: $t('message.typeMap.system') };
+    }
+    case 'todo': {
+      return { type: 'warning' as const, label: $t('message.typeMap.todo') };
+    }
+    case 'workflow': {
+      return {
+        type: 'primary' as const,
+        label: $t('message.typeMap.workflow'),
+      };
+    }
+    default: {
+      return { type: 'info' as const, label: $t('message.type') };
+    }
+  }
+};
+
+// 跳转到审批链接
+const handleGoToLink = (message: Message) => {
+  if (!message.link_type || !message.link_id) return;
+
+  // 根据 link_type 跳转到不同页面
+  let url = '';
+  if (message.link_type === 'workflow_task') {
+    // 跳转到待办任务页面，带上任务ID
+    url = `/app/workflow_center/workflow/pending?id=${message.link_id}`;
+  } else if (message.link_type === 'workflow_instance') {
+    // 跳转到我发起的页面，带上实例ID
+    url = `/app/workflow_center/workflow/initiated?id=${message.link_id}`;
+  }
+
+  if (url) {
+    window.open(url, '_blank');
+  }
+};
+
+// 格式化时间
+const formatTime = (dateStr: string) => {
+  if (!dateStr) return '';
+  // 处理 "2025-12-01 21:47:29" 格式，替换空格为T以兼容所有浏览器
+  const date = new Date(dateStr.replace(' ', 'T'));
+  if (isNaN(date.getTime())) return dateStr;
+
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const minutes = Math.floor(diff / 60_000);
+  const hours = Math.floor(diff / 3_600_000);
+  const days = Math.floor(diff / 86_400_000);
+
+  if (minutes < 1)
+    return $t('dashboard-design.widgets.announcement.time.justNow');
+  if (minutes < 60)
+    return `${minutes}${$t('dashboard-design.widgets.announcement.time.minutesAgo')}`;
+  if (hours < 24)
+    return `${hours}${$t('dashboard-design.widgets.announcement.time.hoursAgo')}`;
+  if (days < 7)
+    return `${days}${$t('dashboard-design.widgets.announcement.time.daysAgo')}`;
+  return date.toLocaleDateString();
+};
+
+// 加载消息数据
+const loadMessages = async () => {
+  loading.value = true;
+  try {
+    const limit = props.widget.props.limit || 5;
+    const res = await getMessageListApi({ page: 1, pageSize: limit });
+    messages.value = res.items || [];
+  } catch (error) {
+    console.error('Failed to load messages:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 查看消息详情
+const viewDetail = async (msg: Message) => {
+  currentMessage.value = msg;
+  detailVisible.value = true;
+
+  // 标记为已读
+  if (msg.status === 'unread') {
+    try {
+      await markAsReadApi(msg.id);
+      msg.status = 'read';
+    } catch (error) {
+      console.error('Failed to mark as read:', error);
+    }
+  }
+};
+
+// 全部已读
+const markAllRead = async () => {
+  if (unreadCount.value === 0) return;
+
+  try {
+    await markAllAsReadApi();
+    messages.value.forEach((msg) => {
+      msg.status = 'read';
+    });
+  } catch (error) {
+    console.error('Failed to mark all as read:', error);
+  }
+};
+
+onMounted(() => {
+  loadMessages();
+});
+</script>
+
+<template>
+  <div class="notice-list flex h-full flex-col p-3">
+    <div class="mb-3 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <Bell class="text-muted-foreground h-4 w-4" />
+        <span class="text-muted-foreground text-sm font-medium">{{
+          widget.props.title
+        }}</span>
+        <ElTag v-if="unreadCount > 0" type="danger" size="small" round>
+          {{ unreadCount }}
+        </ElTag>
+      </div>
+      <ElButton
+        v-if="unreadCount > 0"
+        type="primary"
+        text
+        size="small"
+        @click="markAllRead"
+      >
+        <CheckCheck class="mr-1 h-3.5 w-3.5" />
+        {{ $t('dashboard-design.widgets.announcement.markAllRead') }}
+      </ElButton>
+    </div>
+    <ElScrollbar class="flex-1">
+      <div v-if="messages.length > 0" class="space-y-2">
+        <div
+          v-for="msg in messages"
+          :key="msg.id"
+          class="flex cursor-pointer items-start gap-2 rounded-md p-2 transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
+          :class="{ 'opacity-60': msg.status === 'read' }"
+          @click="viewDetail(msg)"
+        >
+          <ElTag
+            :type="getTypeConfig(msg.msg_type).type"
+            size="small"
+            class="flex-shrink-0"
+          >
+            {{ getTypeConfig(msg.msg_type).label }}
+          </ElTag>
+          <div class="min-w-0 flex-1">
+            <div class="truncate text-sm">{{ msg.title }}</div>
+            <div class="text-muted-foreground mt-1 flex items-center text-xs">
+              <span v-if="msg.content" class="flex-1 truncate">{{
+                msg.content
+              }}</span>
+              <span class="ml-2 flex-shrink-0">{{
+                formatTime(msg.created_at)
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <ElEmpty
+        v-else
+        :description="
+          $t('message.noData') ||
+          $t('dashboard-design.widgets.announcement.noData')
+        "
+        :image-size="60"
+      />
+    </ElScrollbar>
+
+    <!-- 消息详情弹窗 -->
+    <ElDialog
+      v-model="detailVisible"
+      :title="currentMessage?.title"
+      width="600px"
+      destroy-on-close
+      append-to-body
+    >
+      <div v-if="currentMessage" class="min-h-[500px] space-y-4">
+        <div class="flex items-center gap-2">
+          <ElTag
+            :type="getTypeConfig(currentMessage.msg_type).type"
+            size="small"
+          >
+            {{ getTypeConfig(currentMessage.msg_type).label }}
+          </ElTag>
+          <span class="text-muted-foreground text-xs">{{
+            formatTime(currentMessage.created_at)
+          }}</span>
+        </div>
+        <div class="whitespace-pre-wrap text-sm leading-relaxed">
+          {{
+            currentMessage.content ||
+            $t('dashboard-design.widgets.announcement.noContent')
+          }}
+        </div>
+
+        <!-- 审批链接按钮 -->
+        <div
+          v-if="currentMessage.link_type && currentMessage.link_id"
+          class="mt-4"
+        >
+          <ElButton type="text" @click="handleGoToLink(currentMessage)">
+            <ExternalLink class="mr-1 h-3.5 w-3.5" />
+            查看详情
+          </ElButton>
+        </div>
+
+        <div
+          v-if="currentMessage.sender_name"
+          class="text-muted-foreground text-xs"
+        >
+          {{ $t('message.sender') || '发送者：'
+          }}{{ currentMessage.sender_name }}
+        </div>
+      </div>
+    </ElDialog>
+  </div>
+</template>
+
+<style scoped>
+/* 背景色由 WidgetRenderer 控制 */
+</style>
diff --git a/web/apps/web-ele/src/components/dashboard-design/components/widgets/QuickLinks.vue b/web/apps/web-ele/src/components/dashboard-design/components/widgets/QuickLinks.vue
new file mode 100644
index 0000000..ec167b4
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/components/widgets/QuickLinks.vue
@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import type { DashboardWidget } from '#/components/dashboard-design';
+
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Grid, IconifyIcon } from '@vben/icons';
+
+import { useAppContextStore } from '#/store/app-context';
+
+const props = defineProps<{
+  widget: DashboardWidget;
+}>();
+
+const router = useRouter();
+const appContextStore = useAppContextStore();
+
+// 计算网格样式
+const gridStyle = computed(() => {
+  const cols = props.widget.props.columns || 4;
+  const rows = props.widget.props.rows || 2;
+  return {
+    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+    gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
+  };
+});
+
+// 计算总格子数
+const totalCells = computed(() => {
+  const cols = props.widget.props.columns || 4;
+  const rows = props.widget.props.rows || 2;
+  return cols * rows;
+});
+
+// 获取指定位置的菜单
+const getMenuAt = (index: number) => {
+  const menus = props.widget.props.menus || [];
+  return menus[index] || null;
+};
+
+// 图标颜色样式
+const iconColorStyle = computed(() => {
+  const color = props.widget.props.iconColor;
+  return color ? { color } : {};
+});
+
+// 获取 item 背景样式（支持渐变色）
+const getItemBgStyle = (menu: any) => {
+  if (!menu?.bgColor) return {};
+  if (menu.bgColor.includes('gradient')) {
+    return { background: menu.bgColor };
+  }
+  return { backgroundColor: menu.bgColor };
+};
+
+// 点击菜单项
+const handleClick = (menu: any) => {
+  if (!menu || !menu.path) return;
+
+  // 外链
+  if (menu.path.startsWith('http://') || menu.path.startsWith('https://')) {
+    window.open(menu.path, '_blank');
+    return;
+  }
+
+  // 路由跳转（子应用模式下始终使用 /app/{code} 前缀）
+  const code = appContextStore.appCode;
+  const targetPath = code ? `/app/${code}${menu.path}` : menu.path;
+  router.push(targetPath);
+};
+</script>
+
+<template>
+  <div class="quick-links flex h-full flex-col p-3">
+    <div class="mb-3 flex items-center gap-2">
+      <Grid class="text-muted-foreground h-4 w-4" />
+      <span class="text-muted-foreground text-sm font-medium">{{
+        widget.props.title
+      }}</span>
+    </div>
+    <div class="grid flex-1 gap-2" :style="gridStyle">
+      <template v-for="idx in totalCells" :key="idx">
+        <div
+          v-if="getMenuAt(idx - 1)"
+          class="flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800"
+          :style="getItemBgStyle(getMenuAt(idx - 1))"
+          @click="handleClick(getMenuAt(idx - 1))"
+        >
+          <IconifyIcon
+            v-if="getMenuAt(idx - 1)?.icon"
+            :icon="getMenuAt(idx - 1).icon"
+            class="h-6 w-6"
+            :class="{ 'text-primary': !widget.props.iconColor }"
+            :style="iconColorStyle"
+          />
+          <Grid
+            v-else
+            class="h-6 w-6"
+            :class="{ 'text-primary': !widget.props.iconColor }"
+            :style="iconColorStyle"
+          />
+          <span
+            class="text-muted-foreground w-full truncate text-center text-xs"
+            >{{ getMenuAt(idx - 1)?.title }}</span
+          >
+        </div>
+        <div
+          v-else
+          class="flex flex-col items-center justify-center gap-1 rounded-lg p-2"
+        >
+          <!-- 空位占位 -->
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 背景色由 WidgetRenderer 控制 */
+</style>
diff --git a/web/apps/web-ele/src/components/dashboard-design/components/widgets/ServerMonitor.vue b/web/apps/web-ele/src/components/dashboard-design/components/widgets/ServerMonitor.vue
new file mode 100644
index 0000000..cdcaaa6
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/components/widgets/ServerMonitor.vue
@@ -0,0 +1,294 @@
+<script setup lang="ts">
+import type {
+  RealtimeStats,
+  ServerMonitorResponse,
+} from '#/api/core/server-monitor';
+import type { DashboardWidget } from '#/components/dashboard-design';
+
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+import { Cpu, Database, HardDrive, Network } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { ElProgress } from 'element-plus';
+
+import {
+  getRealtimeStatsApi,
+  getServerOverviewApi,
+} from '#/api/core/server-monitor';
+
+const props = defineProps<{
+  widget: DashboardWidget;
+}>();
+
+const loading = ref(false);
+const serverData = ref<null | ServerMonitorResponse>(null);
+const realtimeData = ref<null | RealtimeStats>(null);
+let timer: null | ReturnType<typeof setInterval> = null;
+
+// 刷新间隔
+const refreshInterval = computed(
+  () => props.widget.props.refreshInterval || 5000,
+);
+
+// 区域背景色
+function getAreaStyle(colorProp: string) {
+  const color = props.widget.props[colorProp];
+  if (!color) return {};
+  if (color.includes('gradient')) return { background: color };
+  return { backgroundColor: color };
+}
+
+// 格式化字节
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${(bytes / k ** i).toFixed(1)} ${sizes[i]}`;
+}
+
+// 格式化内存（后端返回 GB）
+function formatMemory(gb: number): string {
+  if (gb === 0) return '0 GB';
+  if (gb < 1) return `${(gb * 1024).toFixed(0)} MB`;
+  return `${gb.toFixed(1)} GB`;
+}
+
+// 格式化速度
+function formatSpeed(bytesPerSecond: number): string {
+  return `${formatBytes(bytesPerSecond)}/s`;
+}
+
+// 使用率颜色
+function getProgressColor(percent: number): string {
+  if (percent >= 90) return 'var(--el-color-danger)';
+  if (percent >= 70) return 'var(--el-color-warning)';
+  return 'var(--el-color-success)';
+}
+
+// 格式化运行时间
+function formatUptime(seconds: number): string {
+  const days = Math.floor(seconds / 86_400);
+  const hours = Math.floor((seconds % 86_400) / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const parts = [];
+  if (days > 0)
+    parts.push(`${days}${$t('dashboard-design.widgets.serverMonitor.days')}`);
+  if (hours > 0)
+    parts.push(`${hours}${$t('dashboard-design.widgets.serverMonitor.hours')}`);
+  if (minutes > 0)
+    parts.push(
+      `${minutes}${$t('dashboard-design.widgets.serverMonitor.minutes')}`,
+    );
+  return parts.join(' ') || '-';
+}
+
+// 加载数据
+async function loadData(showLoading = false) {
+  if (showLoading) loading.value = true;
+  try {
+    const [overview, realtime] = await Promise.all([
+      getServerOverviewApi(),
+      getRealtimeStatsApi(),
+    ]);
+    serverData.value = overview;
+    realtimeData.value = realtime;
+  } catch (error) {
+    console.error('Failed to load server monitor data:', error);
+  } finally {
+    if (showLoading) loading.value = false;
+  }
+}
+
+// 自动刷新
+function startAutoRefresh() {
+  if (timer) return;
+  timer = setInterval(() => {
+    getRealtimeStatsApi()
+      .then((data) => {
+        realtimeData.value = data;
+      })
+      .catch(() => {});
+  }, refreshInterval.value);
+}
+
+function stopAutoRefresh() {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+}
+
+onMounted(async () => {
+  await loadData(true);
+  startAutoRefresh();
+});
+
+onUnmounted(() => {
+  stopAutoRefresh();
+});
+</script>
+
+<template>
+  <div class="server-monitor flex h-full flex-col p-4" v-loading="loading">
+    <!-- 头部 -->
+    <div class="mb-6 flex items-center justify-between">
+      <span class="text-sm font-medium">{{ widget.props.title }}</span>
+      <span class="text-muted-foreground text-xs">
+        {{ serverData?.basic_info?.hostname || '-' }}
+        ({{ serverData?.basic_info?.ip_address || '-' }})
+      </span>
+    </div>
+
+    <!-- 指标网格 -->
+    <div class="grid max-h-[150px] flex-1 grid-cols-2 gap-3 lg:grid-cols-4">
+      <!-- CPU -->
+      <div
+        class="flex flex-col justify-between rounded-lg p-4"
+        :class="{ 'bg-secondary/50': !widget.props.cpuBgColor }"
+        :style="getAreaStyle('cpuBgColor')"
+      >
+        <div class="mb-2 flex items-center gap-2">
+          <div
+            class="flex h-7 w-7 items-center justify-center rounded-md"
+            style="background: rgba(59, 130, 246, 0.15)"
+          >
+            <Cpu class="h-4 w-4" style="color: var(--el-color-primary)" />
+          </div>
+          <span class="text-muted-foreground text-xs">CPU</span>
+        </div>
+        <div class="mb-1 text-xl font-bold">
+          {{ realtimeData?.cpu_percent?.toFixed(1) || '0.0' }}%
+        </div>
+        <ElProgress
+          :percentage="Number(realtimeData?.cpu_percent?.toFixed(1) || 0)"
+          :color="getProgressColor(realtimeData?.cpu_percent || 0)"
+          :show-text="false"
+          :stroke-width="4"
+        />
+        <div class="text-muted-foreground mt-1 text-xs">
+          {{ serverData?.cpu_info?.physical_cores || 0
+          }}{{ $t('dashboard-design.widgets.serverMonitor.core') }}
+          {{ serverData?.cpu_info?.total_cores || 0
+          }}{{ $t('dashboard-design.widgets.serverMonitor.thread') }}
+        </div>
+      </div>
+
+      <!-- 内存 -->
+      <div
+        class="flex flex-col justify-between rounded-lg p-4"
+        :class="{ 'bg-secondary/50': !widget.props.memoryBgColor }"
+        :style="getAreaStyle('memoryBgColor')"
+      >
+        <div class="mb-2 flex items-center gap-2">
+          <div
+            class="flex h-7 w-7 items-center justify-center rounded-md"
+            style="background: rgba(34, 197, 94, 0.15)"
+          >
+            <Database class="h-4 w-4" style="color: var(--el-color-success)" />
+          </div>
+          <span class="text-muted-foreground text-xs">{{
+            $t('dashboard-design.widgets.serverMonitor.memory')
+          }}</span>
+        </div>
+        <div class="mb-1 text-xl font-bold">
+          {{ realtimeData?.memory_percent?.toFixed(1) || '0.0' }}%
+        </div>
+        <ElProgress
+          :percentage="Number(realtimeData?.memory_percent?.toFixed(1) || 0)"
+          :color="getProgressColor(realtimeData?.memory_percent || 0)"
+          :show-text="false"
+          :stroke-width="4"
+        />
+        <div class="text-muted-foreground mt-1 text-xs">
+          {{ formatMemory(realtimeData?.memory_details?.used || 0) }}
+          / {{ formatMemory(realtimeData?.memory_details?.total || 0) }}
+        </div>
+      </div>
+
+      <!-- 磁盘 -->
+      <div
+        class="flex flex-col justify-between rounded-lg p-4"
+        :class="{ 'bg-secondary/50': !widget.props.diskBgColor }"
+        :style="getAreaStyle('diskBgColor')"
+      >
+        <div class="mb-2 flex items-center gap-2">
+          <div
+            class="flex h-7 w-7 items-center justify-center rounded-md"
+            style="background: rgba(139, 92, 246, 0.15)"
+          >
+            <HardDrive class="h-4 w-4" style="color: var(--el-color-warning)" />
+          </div>
+          <span class="text-muted-foreground text-xs">{{
+            $t('dashboard-design.widgets.serverMonitor.disk')
+          }}</span>
+        </div>
+        <div class="space-y-0.5 text-sm">
+          <div class="flex items-center justify-between">
+            <span class="text-muted-foreground text-xs">{{
+              $t('dashboard-design.widgets.serverMonitor.read')
+            }}</span>
+            <span class="text-xs font-medium">{{
+              formatSpeed(realtimeData?.disk_io?.read_speed || 0)
+            }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-muted-foreground text-xs">{{
+              $t('dashboard-design.widgets.serverMonitor.write')
+            }}</span>
+            <span class="text-xs font-medium">{{
+              formatSpeed(realtimeData?.disk_io?.write_speed || 0)
+            }}</span>
+          </div>
+        </div>
+        <div class="text-muted-foreground mt-1 text-xs">
+          {{ $t('dashboard-design.widgets.serverMonitor.totalRW') }}:
+          {{ formatBytes(realtimeData?.disk_total?.read_bytes || 0) }} /
+          {{ formatBytes(realtimeData?.disk_total?.write_bytes || 0) }}
+        </div>
+      </div>
+
+      <!-- 网络 -->
+      <div
+        class="flex flex-col justify-between rounded-lg p-4"
+        :class="{ 'bg-secondary/50': !widget.props.networkBgColor }"
+        :style="getAreaStyle('networkBgColor')"
+      >
+        <div class="mb-2 flex items-center gap-2">
+          <div
+            class="flex h-7 w-7 items-center justify-center rounded-md"
+            style="background: rgba(249, 115, 22, 0.15)"
+          >
+            <Network class="h-4 w-4" style="color: var(--el-color-danger)" />
+          </div>
+          <span class="text-muted-foreground text-xs">{{
+            $t('dashboard-design.widgets.serverMonitor.network')
+          }}</span>
+        </div>
+        <div class="space-y-0.5 text-sm">
+          <div class="flex items-center justify-between">
+            <span class="text-muted-foreground text-xs">{{
+              $t('dashboard-design.widgets.serverMonitor.upload')
+            }}</span>
+            <span class="text-xs font-medium">{{
+              formatSpeed(realtimeData?.network_io?.upload_speed || 0)
+            }}</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-muted-foreground text-xs">{{
+              $t('dashboard-design.widgets.serverMonitor.download')
+            }}</span>
+            <span class="text-xs font-medium">{{
+              formatSpeed(realtimeData?.network_io?.download_speed || 0)
+            }}</span>
+          </div>
+        </div>
+        <div class="text-muted-foreground mt-1 text-xs">
+          {{ $t('dashboard-design.widgets.serverMonitor.uptime') }}:
+          {{ formatUptime(serverData?.boot_time?.uptime_seconds || 0) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/web/apps/web-ele/src/components/dashboard-design/components/widgets/WeatherWidget.vue b/web/apps/web-ele/src/components/dashboard-design/components/widgets/WeatherWidget.vue
new file mode 100644
index 0000000..dd2f77b
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/components/widgets/WeatherWidget.vue
@@ -0,0 +1,364 @@
+<script setup lang="ts">
+import type { DashboardWidget } from '../../store/dashboardDesignStore';
+
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import {
+  Cloud,
+  CloudDrizzle,
+  CloudFog,
+  CloudRain,
+  CloudSnow,
+  CloudSun,
+  Sun,
+  Zap,
+} from '@vben/icons';
+import { $t } from '@vben/locales';
+
+const props = defineProps<{
+  widget: DashboardWidget;
+}>();
+
+// 实时天气数据
+const weatherData = ref<null | {
+  humidity: number;
+  temperature: number;
+  weatherCode: number;
+  windDirection: number;
+  windSpeed: number;
+}>(null);
+const error = ref(false);
+const locatedCityName = ref('');
+let timer: null | ReturnType<typeof setInterval> = null;
+
+// 显示的城市名：优先手动配置，其次自动定位
+const displayCityName = computed(() => {
+  return props.widget.props.cityName || locatedCityName.value || '-';
+});
+
+// 反向地理编码获取城市名
+async function reverseGeocode(lat: number, lon: number) {
+  try {
+    const res = await fetch(
+      `https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lon}&localityLanguage=zh`,
+    );
+    if (!res.ok) return;
+    const data = await res.json();
+    locatedCityName.value =
+      data?.city || data?.locality || data?.principalSubdivision || '';
+  } catch {
+    // 反向编码失败不影响天气显示
+  }
+}
+
+// WMO Weather Code 映射
+function getWeatherInfo(code: number): {
+  color: string;
+  icon: any;
+  label: string;
+} {
+  // 晴天
+  if (code === 0)
+    return {
+      icon: Sun,
+      color: '#f59e0b',
+      label: $t('dashboard-design.widgets.weather.codes.clear'),
+    };
+  // 少云/多云
+  if (code === 1)
+    return {
+      icon: CloudSun,
+      color: '#60a5fa',
+      label: $t('dashboard-design.widgets.weather.codes.mainlyClear'),
+    };
+  if (code === 2)
+    return {
+      icon: CloudSun,
+      color: '#60a5fa',
+      label: $t('dashboard-design.widgets.weather.codes.partlyCloudy'),
+    };
+  if (code === 3)
+    return {
+      icon: Cloud,
+      color: '#9ca3af',
+      label: $t('dashboard-design.widgets.weather.codes.overcast'),
+    };
+  // 雾
+  if (code === 45 || code === 48)
+    return {
+      icon: CloudFog,
+      color: '#9ca3af',
+      label: $t('dashboard-design.widgets.weather.codes.fog'),
+    };
+  // 毛毛雨
+  if (code >= 51 && code <= 57)
+    return {
+      icon: CloudDrizzle,
+      color: '#60a5fa',
+      label: $t('dashboard-design.widgets.weather.codes.drizzle'),
+    };
+  // 雨
+  if (code >= 61 && code <= 67)
+    return {
+      icon: CloudRain,
+      color: '#3b82f6',
+      label: $t('dashboard-design.widgets.weather.codes.rain'),
+    };
+  // 雪
+  if (code >= 71 && code <= 77)
+    return {
+      icon: CloudSnow,
+      color: '#a5b4fc',
+      label: $t('dashboard-design.widgets.weather.codes.snow'),
+    };
+  // 阵雨
+  if (code >= 80 && code <= 82)
+    return {
+      icon: CloudRain,
+      color: '#3b82f6',
+      label: $t('dashboard-design.widgets.weather.codes.showers'),
+    };
+  // 阵雪
+  if (code >= 85 && code <= 86)
+    return {
+      icon: CloudSnow,
+      color: '#a5b4fc',
+      label: $t('dashboard-design.widgets.weather.codes.snowShowers'),
+    };
+  // 雷暴
+  if (code >= 95 && code <= 99)
+    return {
+      icon: Zap,
+      color: '#eab308',
+      label: $t('dashboard-design.widgets.weather.codes.thunderstorm'),
+    };
+  return {
+    icon: Sun,
+    color: '#f59e0b',
+    label: $t('dashboard-design.widgets.weather.codes.clear'),
+  };
+}
+
+// 风向角度转文字
+function getWindDirection(degree: number): string {
+  const dirs = [
+    $t('dashboard-design.widgets.weather.windDir.n'),
+    $t('dashboard-design.widgets.weather.windDir.ne'),
+    $t('dashboard-design.widgets.weather.windDir.e'),
+    $t('dashboard-design.widgets.weather.windDir.se'),
+    $t('dashboard-design.widgets.weather.windDir.s'),
+    $t('dashboard-design.widgets.weather.windDir.sw'),
+    $t('dashboard-design.widgets.weather.windDir.w'),
+    $t('dashboard-design.widgets.weather.windDir.nw'),
+  ];
+  const index = Math.round(degree / 45) % 8;
+  return dirs[index] || '';
+}
+
+// 当前天气信息
+const currentWeather = computed(() => {
+  if (!weatherData.value) return null;
+  const info = getWeatherInfo(weatherData.value.weatherCode);
+  return {
+    ...info,
+    temperature: Math.round(weatherData.value.temperature),
+    humidity: weatherData.value.humidity,
+    wind: `${getWindDirection(weatherData.value.windDirection)} ${weatherData.value.windSpeed.toFixed(0)} km/h`,
+  };
+});
+
+// 获取天气数据
+async function fetchWeather() {
+  const lat = props.widget.props.latitude;
+  const lon = props.widget.props.longitude;
+  if (!lat || !lon) return;
+
+  try {
+    error.value = false;
+    const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m,wind_direction_10m&timezone=auto`;
+    const res = await fetch(url);
+    if (!res.ok) throw new Error('API error');
+    const data = await res.json();
+    if (data.current) {
+      weatherData.value = {
+        temperature: data.current.temperature_2m,
+        humidity: data.current.relative_humidity_2m,
+        weatherCode: data.current.weather_code,
+        windSpeed: data.current.wind_speed_10m,
+        windDirection: data.current.wind_direction_10m,
+      };
+    }
+  } catch {
+    error.value = true;
+    console.error('Failed to fetch weather data');
+  }
+}
+
+// 自动刷新
+function startAutoRefresh() {
+  stopAutoRefresh();
+  const interval = (props.widget.props.refreshInterval || 30) * 60 * 1000; // 分钟转毫秒
+  timer = setInterval(fetchWeather, interval);
+}
+
+function stopAutoRefresh() {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+}
+
+// 监听经纬度变化重新获取
+watch(
+  () => [props.widget.props.latitude, props.widget.props.longitude],
+  () => {
+    fetchWeather();
+  },
+);
+
+onMounted(async () => {
+  // 如果开启自动定位且没有经纬度
+  if (props.widget.props.autoLocate && !props.widget.props.latitude) {
+    try {
+      const pos = await new Promise<GeolocationPosition>((resolve, reject) => {
+        navigator.geolocation.getCurrentPosition(resolve, reject, {
+          timeout: 5000,
+        });
+      });
+      const lat = pos.coords.latitude;
+      const lon = pos.coords.longitude;
+      // 并行获取天气数据和城市名
+      const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}&current=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m,wind_direction_10m&timezone=auto`;
+      const [res] = await Promise.all([fetch(url), reverseGeocode(lat, lon)]);
+      const data = await res.json();
+      if (data.current) {
+        weatherData.value = {
+          temperature: data.current.temperature_2m,
+          humidity: data.current.relative_humidity_2m,
+          weatherCode: data.current.weather_code,
+          windSpeed: data.current.wind_speed_10m,
+          windDirection: data.current.wind_direction_10m,
+        };
+      }
+    } catch {
+      // 定位失败，使用默认经纬度
+      await fetchWeather();
+    }
+  } else {
+    await fetchWeather();
+  }
+  startAutoRefresh();
+});
+
+onUnmounted(() => {
+  stopAutoRefresh();
+});
+</script>
+
+<template>
+  <div class="weather-widget flex h-full flex-col p-3">
+    <div
+      v-if="widget.props.title"
+      class="text-muted-foreground mb-2 text-sm font-medium"
+    >
+      {{ widget.props.title }}
+    </div>
+
+    <!-- 加载/错误状态 -->
+    <div
+      v-if="!currentWeather && !error"
+      class="flex flex-1 items-center justify-center"
+    >
+      <span class="text-muted-foreground text-xs">{{
+        $t('dashboard-design.widgets.weather.loading')
+      }}</span>
+    </div>
+    <div
+      v-else-if="error && !currentWeather"
+      class="flex flex-1 items-center justify-center"
+    >
+      <span class="text-muted-foreground text-xs">{{
+        $t('dashboard-design.widgets.weather.error')
+      }}</span>
+    </div>
+
+    <!-- 天气数据 -->
+    <div v-else-if="currentWeather" class="flex flex-1 items-center gap-4">
+      <!-- 天气图标和温度 -->
+      <div class="flex items-center gap-3">
+        <component
+          :is="currentWeather.icon"
+          class="h-12 w-12"
+          :style="{ color: currentWeather.color }"
+        />
+        <div>
+          <div class="temperature">{{ currentWeather.temperature }}°</div>
+          <div class="weather-text">
+            {{ currentWeather.label }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 详细信息 -->
+      <div class="weather-details">
+        <div class="detail-item">
+          <span class="detail-label">{{
+            $t('dashboard-design.widgets.weather.city')
+          }}</span>
+          <span class="detail-value">{{ displayCityName }}</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">{{
+            $t('dashboard-design.widgets.weather.humidity')
+          }}</span>
+          <span class="detail-value">{{ currentWeather.humidity }}%</span>
+        </div>
+        <div class="detail-item">
+          <span class="detail-label">{{
+            $t('dashboard-design.widgets.weather.wind')
+          }}</span>
+          <span class="detail-value">{{ currentWeather.wind }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.temperature {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--el-text-color-primary);
+}
+
+.weather-text {
+  margin-top: 4px;
+  font-size: 0.875rem;
+  color: var(--el-text-color-secondary);
+}
+
+.weather-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-left: 16px;
+  border-left: 1px solid var(--el-border-color-lighter);
+}
+
+.detail-item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  font-size: 0.75rem;
+}
+
+.detail-label {
+  min-width: 32px;
+  color: var(--el-text-color-secondary);
+}
+
+.detail-value {
+  color: var(--el-text-color-primary);
+}
+</style>
diff --git a/web/apps/web-ele/src/components/dashboard-design/components/widgets/WelcomeCard.vue b/web/apps/web-ele/src/components/dashboard-design/components/widgets/WelcomeCard.vue
new file mode 100644
index 0000000..966b5e1
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/components/widgets/WelcomeCard.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { DashboardWidget } from '../../store/dashboardDesignStore';
+
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+import { Smile } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { useUserStore } from '@vben/stores';
+
+import { UserAvatar } from '#/components/user-avatar';
+
+defineProps<{
+  widget: DashboardWidget;
+}>();
+
+const userStore = useUserStore();
+
+// 用户信息
+const userInfo = computed(() => userStore.userInfo);
+// 用户名
+const userName = computed(() => userStore.userInfo?.realName || '');
+
+const currentTime = ref(new Date());
+let timer: null | ReturnType<typeof setInterval> = null;
+
+onMounted(() => {
+  timer = setInterval(() => {
+    currentTime.value = new Date();
+  }, 1000);
+});
+
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer);
+  }
+});
+
+const greeting = computed(() => {
+  const hour = currentTime.value.getHours();
+  if (hour < 6) return $t('dashboard-design.widgets.welcome.greeting.night');
+  if (hour < 9) return $t('dashboard-design.widgets.welcome.greeting.morning');
+  if (hour < 12)
+    return $t('dashboard-design.widgets.welcome.greeting.morning2');
+  if (hour < 14) return $t('dashboard-design.widgets.welcome.greeting.noon');
+  if (hour < 18)
+    return $t('dashboard-design.widgets.welcome.greeting.afternoon');
+  if (hour < 22) return $t('dashboard-design.widgets.welcome.greeting.evening');
+  return $t('dashboard-design.widgets.welcome.greeting.night');
+});
+
+const formattedTime = computed(() => {
+  return currentTime.value.toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+});
+
+const formattedDate = computed(() => {
+  return currentTime.value.toLocaleDateString('zh-CN', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    weekday: 'long',
+  });
+});
+</script>
+
+<template>
+  <div class="welcome-card flex h-full items-center justify-between p-4">
+    <div class="flex items-center gap-4">
+      <!-- 用户头像 -->
+      <UserAvatar
+        v-if="userInfo"
+        :name="userName"
+        :avatar="userInfo.avatar"
+        :size="48"
+        :font-size="20"
+        :show-popover="false"
+        :shadow="false"
+        class="flex-shrink-0"
+      />
+      <div
+        v-else
+        class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full"
+        style="
+          background: linear-gradient(
+            135deg,
+            var(--el-color-primary-light-3),
+            var(--el-color-primary)
+          );
+        "
+      >
+        <Smile class="h-6 w-6 text-white" />
+      </div>
+      <div>
+        <div class="text-lg font-semibold">
+          {{ greeting }}，{{ userName
+          }}{{ widget.props.title ? `，${widget.props.title}` : '' }}
+        </div>
+        <div class="text-muted-foreground text-sm">
+          {{ widget.props.subtitle }}
+        </div>
+      </div>
+    </div>
+    <div v-if="widget.props.showTime" class="text-right">
+      <div class="text-2xl font-bold tabular-nums">{{ formattedTime }}</div>
+      <div class="text-muted-foreground text-sm">{{ formattedDate }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 背景色由 WidgetRenderer 控制 */
+</style>
diff --git a/web/apps/web-ele/src/components/dashboard-design/index.ts b/web/apps/web-ele/src/components/dashboard-design/index.ts
new file mode 100644
index 0000000..c54b902
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/index.ts
@@ -0,0 +1,12 @@
+export { default as DashboardRenderer } from './DashboardRenderer.vue';
+
+export type {
+  DashboardConfig,
+  DashboardWidget,
+  DataSourceConfig,
+  DataSourceType,
+  WidgetMaterial,
+  WidgetType,
+} from './store/dashboardDesignStore';
+
+export { createRefreshTimer, fetchWidgetData } from './utils/dataFetcher';
diff --git a/web/apps/web-ele/src/components/dashboard-design/utils/dataFetcher.ts b/web/apps/web-ele/src/components/dashboard-design/utils/dataFetcher.ts
new file mode 100644
index 0000000..c097dd2
--- /dev/null
+++ b/web/apps/web-ele/src/components/dashboard-design/utils/dataFetcher.ts
@@ -0,0 +1,314 @@
+import type {
+  DataSourceConfig,
+  FieldMapping,
+} from '../store/dashboardDesignStore';
+
+import { $t } from '@vben/locales';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 根据路径获取对象中的值
+ * @param obj 对象
+ * @param path 路径，如 'data.list' 或 'data.items[0].name'
+ */
+export function getValueByPath(obj: any, path: string): any {
+  if (!obj || !path) return obj;
+
+  const keys = path.replaceAll(/\[(\d+)\]/g, '.$1').split('.');
+  let result = obj;
+
+  for (const key of keys) {
+    if (result === null || result === undefined) return undefined;
+    result = result[key];
+  }
+
+  return result;
+}
+
+/**
+ * 根据路径设置对象中的值
+ */
+export function setValueByPath(obj: any, path: string, value: any): void {
+  if (!obj || !path) return;
+
+  const keys = path.split('.');
+  let current = obj;
+
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i]!;
+    if (current[key] === undefined) {
+      current[key] = {};
+    }
+    current = current[key];
+  }
+
+  current[keys[keys.length - 1]!] = value;
+}
+
+/**
+ * 应用字段映射
+ */
+export function applyFieldMappings(
+  data: any,
+  mappings: FieldMapping[] | undefined,
+  targetProps: Record<string, any>,
+): Record<string, any> {
+  if (!mappings || mappings.length === 0) {
+    return { ...targetProps, ...data };
+  }
+
+  const result = { ...targetProps };
+
+  for (const mapping of mappings) {
+    const value = getValueByPath(data, mapping.source);
+    if (value !== undefined) {
+      setValueByPath(result, mapping.target, value);
+    }
+  }
+
+  return result;
+}
+
+/**
+ * 数据获取工具
+ */
+export async function fetchWidgetData(
+  dataSource: DataSourceConfig | undefined,
+  defaultProps: Record<string, any>,
+  params?: Record<string, any>,
+): Promise<{ data: any; props: Record<string, any> }> {
+  if (!dataSource || dataSource.type === 'static') {
+    return { data: null, props: defaultProps };
+  }
+
+  // 通用数据源类型
+  if (dataSource.type === 'dataSource' && dataSource.dataSourceCode) {
+    try {
+      const response = await requestClient.get(
+        `/api/core/data-source/execute/${dataSource.dataSourceCode}`,
+        { params: params && Object.keys(params).length > 0 ? params : undefined },
+      );
+
+      // 后端返回格式是 {data: ...}，需要提取 data 字段
+      const rawData = response?.data ?? response;
+
+      // 数据源返回的数据可能是数组或对象（图表数据源返回 {xAxisData, seriesData} 格式）
+      const extractedData = dataSource.dataPath
+        ? getValueByPath(rawData, dataSource.dataPath)
+        : rawData;
+
+      // 检查是否是图表数据格式（包含 xAxisData 或 seriesData 或 indicator 或 value）
+      if (
+        extractedData &&
+        typeof extractedData === 'object' &&
+        !Array.isArray(extractedData) &&
+        ('xAxisData' in extractedData ||
+          'seriesData' in extractedData ||
+          'indicator' in extractedData ||
+          'yAxisData' in extractedData ||
+          ('value' in extractedData && 'max' in extractedData))
+      ) {
+        // 图表数据格式，直接合并到 props
+        const mappedProps = { ...defaultProps, ...extractedData };
+        // 如果有额外的字段映射，也应用
+        if (dataSource.fieldMappings && dataSource.fieldMappings.length > 0) {
+          return {
+            data: extractedData,
+            props: applyFieldMappings(
+              extractedData,
+              dataSource.fieldMappings,
+              mappedProps,
+            ),
+          };
+        }
+        return { data: extractedData, props: mappedProps };
+      }
+
+      // 普通数据，应用字段映射
+      const mappedProps = applyFieldMappings(
+        extractedData,
+        dataSource.fieldMappings,
+        defaultProps,
+      );
+
+      return { data: extractedData, props: mappedProps };
+    } catch (error) {
+      console.error('Failed to fetch data source:', error);
+      return { data: null, props: defaultProps };
+    }
+  }
+
+  // API 类型
+  if (dataSource.type === 'api' && dataSource.apiUrl) {
+    try {
+      const method = dataSource.apiMethod || 'GET';
+      const params = dataSource.apiParams || {};
+      const body = dataSource.apiBody || {};
+      const headers = dataSource.apiHeaders || {};
+
+      let response: any;
+
+      response = await (method === 'GET'
+        ? requestClient.get(dataSource.apiUrl, {
+            params,
+            headers,
+          })
+        : requestClient.post(dataSource.apiUrl, body, {
+            params,
+            headers,
+          }));
+
+      // 根据 dataPath 提取数据
+      const extractedData = dataSource.dataPath
+        ? getValueByPath(response, dataSource.dataPath)
+        : response;
+
+      // 应用字段映射
+      const mappedProps = applyFieldMappings(
+        extractedData,
+        dataSource.fieldMappings,
+        defaultProps,
+      );
+
+      return { data: extractedData, props: mappedProps };
+    } catch (error) {
+      console.error('Failed to fetch widget data:', error);
+      return { data: null, props: defaultProps };
+    }
+  }
+
+  return { data: null, props: defaultProps };
+}
+
+/**
+ * 创建自动刷新定时器
+ */
+export function createRefreshTimer(
+  dataSource: DataSourceConfig | undefined,
+  callback: () => void,
+): (() => void) | null {
+  if (
+    !dataSource?.refreshEnabled ||
+    !dataSource.refreshInterval ||
+    dataSource.refreshInterval <= 0
+  ) {
+    return null;
+  }
+
+  const timer = setInterval(callback, dataSource.refreshInterval * 1000);
+
+  return () => clearInterval(timer);
+}
+
+/**
+ * 获取组件支持的字段映射目标
+ */
+export function getWidgetFieldTargets(
+  widgetType: string,
+): { key: string; label: string }[] {
+  const commonFields = [
+    { key: 'title', label: $t('dashboard-design.attribute.fieldLabels.title') },
+  ];
+
+  const fieldMap: Record<string, { key: string; label: string }[]> = {
+    'stat-card': [
+      ...commonFields,
+      {
+        key: 'value',
+        label: $t('dashboard-design.attribute.fieldLabels.value'),
+      },
+      {
+        key: 'trend',
+        label: $t('dashboard-design.attribute.fieldLabels.trend'),
+      },
+      {
+        key: 'trendLabel',
+        label: $t('dashboard-design.attribute.fieldLabels.trendLabel'),
+      },
+      {
+        key: 'prefix',
+        label: $t('dashboard-design.attribute.fieldLabels.prefix'),
+      },
+      {
+        key: 'suffix',
+        label: $t('dashboard-design.attribute.fieldLabels.suffix'),
+      },
+    ],
+    'progress-card': [
+      ...commonFields,
+      {
+        key: 'percentage',
+        label: $t('dashboard-design.attribute.fieldLabels.percentage'),
+      },
+    ],
+    'chart-line': [
+      ...commonFields,
+      {
+        key: 'xAxisData',
+        label: $t('dashboard-design.attribute.fieldLabels.xAxisData'),
+      },
+      {
+        key: 'seriesData',
+        label: $t('dashboard-design.attribute.fieldLabels.seriesData'),
+      },
+    ],
+    'chart-bar': [
+      ...commonFields,
+      {
+        key: 'xAxisData',
+        label: $t('dashboard-design.attribute.fieldLabels.xAxisData'),
+      },
+      {
+        key: 'seriesData',
+        label: $t('dashboard-design.attribute.fieldLabels.seriesData'),
+      },
+    ],
+    'chart-pie': [
+      ...commonFields,
+      {
+        key: 'seriesData',
+        label: $t('dashboard-design.attribute.fieldLabels.seriesData'),
+      },
+    ],
+    'chart-gauge': [
+      ...commonFields,
+      {
+        key: 'value',
+        label: $t('dashboard-design.attribute.fieldLabels.currentValue'),
+      },
+      { key: 'min', label: $t('dashboard-design.attribute.fieldLabels.min') },
+      { key: 'max', label: $t('dashboard-design.attribute.fieldLabels.max') },
+    ],
+    'todo-list': [
+      ...commonFields,
+      {
+        key: 'items',
+        label: $t('dashboard-design.attribute.fieldLabels.listData'),
+      },
+    ],
+    'notice-list': [
+      ...commonFields,
+      {
+        key: 'items',
+        label: $t('dashboard-design.attribute.fieldLabels.listData'),
+      },
+    ],
+    'ranking-list': [
+      ...commonFields,
+      {
+        key: 'items',
+        label: $t('dashboard-design.attribute.fieldLabels.listData'),
+      },
+    ],
+    'quick-links': [
+      ...commonFields,
+      {
+        key: 'links',
+        label: $t('dashboard-design.attribute.fieldLabels.linkData'),
+      },
+    ],
+  };
+
+  return fieldMap[widgetType] || commonFields;
+}
diff --git a/web/apps/web-ele/src/locales/index.ts b/web/apps/web-ele/src/locales/index.ts
index ca526aa..94592ce 100644
--- a/web/apps/web-ele/src/locales/index.ts
+++ b/web/apps/web-ele/src/locales/index.ts
@@ -32,11 +32,20 @@ const baseModules = import.meta.glob([
 const businessModules = import.meta.glob([
   './langs/zh-CN/ai-platform.json',
   './langs/zh-CN/announcement.json',
+  './langs/zh-CN/dashboard-design.json',
+  './langs/zh-CN/dept.json',
+  './langs/zh-CN/dict.json',
+  './langs/zh-CN/file-manager.json',
+  './langs/zh-CN/loginLog.json',
   './langs/zh-CN/menu.json',
   './langs/zh-CN/message.json',
   './langs/zh-CN/permission.json',
+  './langs/zh-CN/post.json',
   './langs/zh-CN/role.json',
+  './langs/zh-CN/server-monitor.json',
   './langs/zh-CN/system.json',
+  './langs/zh-CN/system-config.json',
+  './langs/zh-CN/ui-config.json',
   './langs/zh-CN/user.json',
 ]);
 
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/dict.json b/web/apps/web-ele/src/locales/langs/zh-CN/dict.json
new file mode 100644
index 0000000..f450b14
--- /dev/null
+++ b/web/apps/web-ele/src/locales/langs/zh-CN/dict.json
@@ -0,0 +1,22 @@
+{
+  "name": "字典",
+  "title": "字典管理",
+  "dictName": "字典名称",
+  "dictCode": "字典编码",
+  "remark": "备注",
+  "remarkPlaceholder": "请输入备注",
+  "status": "状态",
+  "operation": "操作",
+  "edit": "编辑",
+  "codeFormatError": "字典编码只能包含字母、数字和下划线",
+  "selectDictFirst": "请先选择字典",
+  "noData": "暂无数据",
+  "itemName": "字典项",
+  "itemLabel": "标签",
+  "itemValue": "值",
+  "itemIcon": "图标",
+  "sort": "排序",
+  "isGlobal": "全局可见",
+  "globalTag": "全局",
+  "mainApp": "主应用"
+}
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/menu-title.json b/web/apps/web-ele/src/locales/langs/zh-CN/menu-title.json
index 08b367f..f88538d 100644
--- a/web/apps/web-ele/src/locales/langs/zh-CN/menu-title.json
+++ b/web/apps/web-ele/src/locales/langs/zh-CN/menu-title.json
@@ -9,9 +9,17 @@
   "codex": "Codex",
   "startChat": "开始聊天",
   "systemManagement": "系统管理",
+  "systemTools": "系统工具",
   "applicationManagement": "应用管理",
   "systemMonitoring": "系统监控",
   "userManagement": "用户管理",
+  "departmentManagement": "部门管理",
+  "positionManagement": "岗位管理",
+  "dictionaryManagement": "字典管理",
+  "fileManagement": "文件管理",
+  "serverMonitoring": "服务器监控",
+  "uiConfig": "界面配置",
+  "loginLog": "登录日志",
   "roleManagement": "角色权限",
   "permissionManagement": "API管理",
   "menuManagement": "菜单管理",
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/system-config.json b/web/apps/web-ele/src/locales/langs/zh-CN/system-config.json
new file mode 100644
index 0000000..cb460e5
--- /dev/null
+++ b/web/apps/web-ele/src/locales/langs/zh-CN/system-config.json
@@ -0,0 +1,46 @@
+{
+  "title": "系统配置",
+  "ssoConfig": "SSO配置",
+  "notifyConfig": "通知配置",
+  "modelConfig": "模型配置",
+  "save": "保存",
+  "reset": "恢复默认",
+  "resetConfirm": "确定要恢复该分组为默认配置吗？这将删除数据库中的自定义配置。",
+  "saveSuccess": "保存成功",
+  "saveError": "保存失败",
+  "resetSuccess": "已恢复为默认配置",
+  "resetError": "恢复失败",
+  "secretTip": "敏感字段会脱敏显示，留空不会修改原值。",
+  "groups": {
+    "oauth_gitee": "Gitee",
+    "oauth_github": "GitHub",
+    "oauth_qq": "QQ",
+    "oauth_google": "Google",
+    "oauth_wechat": "微信",
+    "oauth_microsoft": "Microsoft",
+    "notify_email": "邮件通知",
+    "notify_sms": "短信通知",
+    "notify_wechat_mp": "微信公众号"
+  },
+  "fields": {
+    "client_id": "Client ID",
+    "client_secret": "Client Secret",
+    "redirect_uri": "Web 回调地址",
+    "h5_redirect_uri": "H5 回调地址",
+    "app_id": "App ID",
+    "app_key": "App Key",
+    "app_secret": "App Secret",
+    "smtp_host": "SMTP 服务器",
+    "smtp_port": "SMTP 端口",
+    "smtp_user": "SMTP 用户名",
+    "smtp_password": "SMTP 密码",
+    "smtp_use_tls": "使用 TLS",
+    "smtp_from_name": "发件人名称",
+    "smtp_from_email": "发件人邮箱",
+    "provider": "服务商",
+    "providerAliyun": "阿里云",
+    "providerTencent": "腾讯云",
+    "todo_pc_url": "待办 PC 端跳转地址",
+    "todo_app_url": "待办移动端跳转地址"
+  }
+}
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/ui-config.json b/web/apps/web-ele/src/locales/langs/zh-CN/ui-config.json
new file mode 100644
index 0000000..d805121
--- /dev/null
+++ b/web/apps/web-ele/src/locales/langs/zh-CN/ui-config.json
@@ -0,0 +1,95 @@
+{
+  "title": "界面配置",
+  "appConfig": "应用配置",
+  "styleConfig": "样式配置",
+  "logoConfig": "Logo配置",
+  "save": "保存",
+  "saveSuccess": "保存成功",
+  "saveError": "保存失败",
+  "app": {
+    "title": "应用配置",
+    "name": "应用名称",
+    "namePlaceholder": "请输入应用名称",
+    "defaultHomePath": "默认首页路径",
+    "defaultHomePathPlaceholder": "请输入默认首页路径",
+    "locale": "默认语言",
+    "dynamicTitle": "动态标题",
+    "dynamicTitleTip": "开启后页面标题会根据当前路由变化",
+    "watermark": "水印",
+    "watermarkTip": "开启后页面会显示水印",
+    "watermarkContent": "水印内容",
+    "watermarkContentPlaceholder": "请输入水印内容",
+    "enablePreferences": "启用偏好设置",
+    "enablePreferencesTip": "开启后用户可以在界面中修改偏好设置",
+    "layout": "布局模式",
+    "layoutOptions": {
+      "sidebar-nav": "侧边导航",
+      "header-nav": "顶部导航",
+      "mixed-nav": "混合导航",
+      "header-sidebar-nav": "顶部+侧边导航"
+    }
+  },
+  "theme": {
+    "mode": "主题模式",
+    "modeOptions": {
+      "light": "浅色",
+      "dark": "深色",
+      "auto": "跟随系统"
+    },
+    "colorPrimary": "主题色",
+    "radius": "圆角大小",
+    "builtinType": "内置主题",
+    "semiDarkSidebar": "深色侧边栏",
+    "semiDarkHeader": "深色顶栏"
+  },
+  "logo": {
+    "enable": "启用 Logo",
+    "source": "Logo 图片",
+    "sourcePlaceholder": "请输入 Logo 图片 URL 或上传",
+    "fit": "适应方式",
+    "fitOptions": {
+      "contain": "包含",
+      "cover": "覆盖",
+      "fill": "填充",
+      "none": "无",
+      "scale-down": "缩小"
+    }
+  },
+  "copyright": {
+    "enable": "启用版权",
+    "companyName": "公司名称",
+    "companyNamePlaceholder": "请输入公司名称",
+    "companySiteLink": "公司网站",
+    "companySiteLinkPlaceholder": "请输入公司网站链接",
+    "date": "版权年份",
+    "datePlaceholder": "请输入版权年份",
+    "icp": "ICP备案号",
+    "icpPlaceholder": "请输入ICP备案号",
+    "icpLink": "ICP备案链接",
+    "icpLinkPlaceholder": "请输入ICP备案链接",
+    "policeIcp": "公安备案号",
+    "policeIcpPlaceholder": "请输入公安备案号",
+    "policeIcpLink": "公安备案链接",
+    "policeIcpLinkPlaceholder": "请输入公安备案链接",
+    "loginOnly": "仅登录页显示",
+    "loginOnlyTip": "开启后版权信息仅在登录页面显示"
+  },
+  "loginConfig": {
+    "title": "登录配置",
+    "enableThirdPartyLogin": "启用第三方登录",
+    "enableThirdPartyLoginTip": "开启后登录页会显示第三方登录区域",
+    "enabledProviders": "启用的登录方式",
+    "enabledProvidersTip": "选择需要在登录页面显示的第三方登录方式",
+    "providers": {
+      "gitee": "Gitee",
+      "github": "GitHub",
+      "google": "Google",
+      "microsoft": "Microsoft",
+      "qq": "QQ",
+      "wechat": "微信",
+      "wecom": "企业微信",
+      "dingtalk": "钉钉",
+      "feishu": "飞书"
+    }
+  }
+}
diff --git a/web/apps/web-ele/src/router/access.ts b/web/apps/web-ele/src/router/access.ts
index aa82424..38dbc69 100644
--- a/web/apps/web-ele/src/router/access.ts
+++ b/web/apps/web-ele/src/router/access.ts
@@ -11,28 +11,9 @@ import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';
 import { useAppContextStore } from '#/store/app-context';
 
-const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
+import { isLightMenuName } from './light-menu';
 
-const lightMenuNames = new Set([
-  'AIAgent',
-  'AIKnowledgeDetail',
-  'AIModelConfig',
-  'AIPlatform',
-  'AIWorkflow',
-  'AIWorkflowRuns',
-  'AnnouncementList',
-  'AnnouncementManage',
-  'Codex',
-  'ControlCenter',
-  'KnowledgeBase',
-  'Message',
-  'MessageList',
-  'SystemManagement',
-  'SystemMenu',
-  'SystemPermission',
-  'SystemRole',
-  'UserManagement',
-]);
+const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
 
 function normalizeViewPath(path: string) {
   const normalizedPath = path.replace(/^(\.\/|\.\.\/)+/, '');
@@ -85,7 +66,7 @@ function normalizeBackendRoute<
 }
 
 function isLightMenuRoute(route: { name?: string }) {
-  return !route.name || lightMenuNames.has(route.name);
+  return isLightMenuName(route.name);
 }
 
 function filterAvailableRoutes<
@@ -102,12 +83,16 @@ function filterAvailableRoutes<
   layoutMap: ComponentRecordType,
 ): T[] {
   return routes
-    .filter(isLightMenuRoute)
     .map((route) => {
       const normalizedRoute = normalizeBackendRoute(route);
       const children = normalizedRoute.children
         ? filterAvailableRoutes(normalizedRoute.children, pageMap, layoutMap)
         : undefined;
+      const routeAllowed = isLightMenuRoute(normalizedRoute);
+
+      if (!routeAllowed && !children?.length) {
+        return undefined;
+      }
 
       if (
         !normalizedRoute.component &&
@@ -117,6 +102,12 @@ function filterAvailableRoutes<
         return undefined;
       }
 
+      if (!routeAllowed && children?.length) {
+        const groupRoute = { ...normalizedRoute, children };
+        delete groupRoute.component;
+        return groupRoute;
+      }
+
       if (!hasPageComponent(normalizedRoute.component, pageMap, layoutMap)) {
         if (!children?.length) return undefined;
 
@@ -135,15 +126,24 @@ async function generateAccess(options: GenerateMenuAndRoutesOptions) {
     '../views/_core/agent-chat/**/*.vue',
     '../views/_core/announcement/index.vue',
     '../views/_core/announcement/list.vue',
+    '../views/_core/account-settings/index.vue',
     '../views/_core/authentication/login.vue',
     '../views/_core/authentication/oauth-callback.vue',
+    '../views/_core/dept/index.vue',
+    '../views/_core/dict/index.vue',
     '../views/_core/fallback/**/*.vue',
+    '../views/_core/file-manager/index.vue',
     '../views/_core/file-preview/index.vue',
+    '../views/_core/login-log/index.vue',
     '../views/_core/menu/index.vue',
     '../views/_core/message/index.vue',
     '../views/_core/page-render/index.vue',
     '../views/_core/permission/index.vue',
+    '../views/_core/post/index.vue',
     '../views/_core/role/index.vue',
+    '../views/_core/server-monitor/index.vue',
+    '../views/_core/system-config/index.vue',
+    '../views/_core/ui-config/index.vue',
     '../views/_core/user/index.vue',
     '../views/ai-platform/agent/editor/index.vue',
     '../views/ai-platform/agent/index.vue',
diff --git a/web/apps/web-ele/src/router/light-menu.ts b/web/apps/web-ele/src/router/light-menu.ts
new file mode 100644
index 0000000..a951218
--- /dev/null
+++ b/web/apps/web-ele/src/router/light-menu.ts
@@ -0,0 +1,54 @@
+export const LIGHT_MENU_NAMES = new Set([
+  'AIAgent',
+  'AIKnowledgeDetail',
+  'AIModelConfig',
+  'AIPlatform',
+  'AIWorkflow',
+  'AIWorkflowRuns',
+  'AccountSettings',
+  'AnnouncementList',
+  'AnnouncementManage',
+  'Codex',
+  'ControlCenter',
+  'FileManager',
+  'KnowledgeBase',
+  'LoginLog',
+  'Message',
+  'MessageList',
+  'ServerMonitor',
+  'SystemConfigManager',
+  'SystemDept',
+  'SystemDict',
+  'SystemFileManager',
+  'SystemLoginLog',
+  'SystemManagement',
+  'SystemMenu',
+  'SystemPost',
+  'SystemPermission',
+  'SystemRole',
+  'UIConfigManager',
+  'UserManagement',
+  'userSettings',
+]);
+
+export function isLightMenuName(name?: string) {
+  return !name || LIGHT_MENU_NAMES.has(name);
+}
+
+export function filterLightMenuTree<
+  T extends { children?: T[]; name?: string },
+>(routes: T[]): T[] {
+  return routes
+    .map((route) => {
+      const children = route.children
+        ? filterLightMenuTree(route.children)
+        : undefined;
+
+      if (!isLightMenuName(route.name) && !children?.length) {
+        return undefined;
+      }
+
+      return children ? { ...route, children } : route;
+    })
+    .filter(Boolean) as T[];
+}
diff --git a/web/apps/web-ele/src/views/_core/about/index.vue b/web/apps/web-ele/src/views/_core/about/index.vue
new file mode 100644
index 0000000..4189a77
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/about/index.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { About } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+defineOptions({ name: 'About' });
+
+const labels = {
+  author: $t('about.author'),
+  basicInfo: $t('about.basicInfo'),
+  buildTime: $t('about.buildTime'),
+  devDependencies: $t('about.devDependencies'),
+  docUrl: $t('about.docUrl'),
+  github: $t('about.github'),
+  homepage: $t('about.homepage'),
+  license: $t('about.license'),
+  previewUrl: $t('about.previewUrl'),
+  productionDependencies: $t('about.productionDependencies'),
+  version: $t('about.version'),
+  viewDetails: $t('about.viewDetails'),
+};
+</script>
+
+<template>
+  <About :labels="labels" />
+</template>
diff --git a/web/apps/web-ele/src/views/_core/account-settings/api-token-management.vue b/web/apps/web-ele/src/views/_core/account-settings/api-token-management.vue
new file mode 100644
index 0000000..cd7072d
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/account-settings/api-token-management.vue
@@ -0,0 +1,330 @@
+<script lang="ts" setup>
+import type { ApiTokenApi } from '#/api/core/api-token';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+import { Copy, KeyRound, Plus, Trash2 } from '@vben/icons';
+
+import {
+  ElAlert,
+  ElButton,
+  ElDatePicker,
+  ElEmpty,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+  ElTag,
+  ElTooltip,
+} from 'element-plus';
+
+import {
+  createApiTokenApi,
+  getApiTokenListApi,
+  revokeApiTokenApi,
+} from '#/api/core/api-token';
+import { ZqDialog } from '#/components/zq-dialog';
+
+defineOptions({ name: 'ApiTokenManagement' });
+
+const tokens = ref<ApiTokenApi.TokenItem[]>([]);
+const loading = ref(false);
+
+const createDialogVisible = ref(false);
+const createLoading = ref(false);
+const createForm = ref<ApiTokenApi.CreateTokenRequest>({
+  name: '',
+  expires_at: null,
+  description: '',
+});
+
+const createdToken = ref<null | string>(null);
+const showTokenDialog = ref(false);
+const tokenCopied = ref(false);
+
+async function loadTokens() {
+  loading.value = true;
+  try {
+    tokens.value = await getApiTokenListApi();
+  } catch {
+    ElMessage.error($t('apiToken.loadError'));
+  } finally {
+    loading.value = false;
+  }
+}
+
+function openCreateDialog() {
+  createForm.value = { name: '', expires_at: null, description: '' };
+  createDialogVisible.value = true;
+}
+
+async function handleCreate() {
+  if (!createForm.value.name.trim()) {
+    ElMessage.warning($t('apiToken.nameRequired'));
+    return;
+  }
+
+  createLoading.value = true;
+  try {
+    const payload: ApiTokenApi.CreateTokenRequest = {
+      name: createForm.value.name.trim(),
+      description: createForm.value.description || undefined,
+    };
+    if (createForm.value.expires_at) {
+      payload.expires_at = new Date(
+        createForm.value.expires_at,
+      ).toISOString();
+    }
+    const result = await createApiTokenApi(payload);
+    createdToken.value = result.token;
+    tokenCopied.value = false;
+    createDialogVisible.value = false;
+    showTokenDialog.value = true;
+    await loadTokens();
+  } catch {
+    ElMessage.error($t('apiToken.createError'));
+  } finally {
+    createLoading.value = false;
+  }
+}
+
+async function handleRevoke(token: ApiTokenApi.TokenItem) {
+  try {
+    await ElMessageBox.confirm(
+      $t('apiToken.revokeConfirm', [token.name]),
+      $t('apiToken.revokeTitle'),
+      { type: 'warning', confirmButtonText: $t('apiToken.confirmRevoke') },
+    );
+    await revokeApiTokenApi(token.id);
+    ElMessage.success($t('apiToken.revokeSuccess'));
+    await loadTokens();
+  } catch {
+    // cancelled
+  }
+}
+
+async function copyToken() {
+  if (!createdToken.value) return;
+  try {
+    await navigator.clipboard.writeText(createdToken.value);
+    tokenCopied.value = true;
+    ElMessage.success($t('apiToken.copySuccess'));
+  } catch {
+    ElMessage.error($t('apiToken.copyError'));
+  }
+}
+
+function getExpirationStatus(token: ApiTokenApi.TokenItem) {
+  if (!token.expires_at) {
+    return { label: $t('apiToken.neverExpires'), type: 'success' as const };
+  }
+  const now = new Date();
+  const expiresAt = new Date(token.expires_at);
+  if (expiresAt < now) {
+    return { label: $t('apiToken.expired'), type: 'danger' as const };
+  }
+  const daysLeft = Math.ceil(
+    (expiresAt.getTime() - now.getTime()) / (1000 * 60 * 60 * 24),
+  );
+  if (daysLeft <= 7) {
+    return {
+      label: $t('apiToken.expiresSoon', [daysLeft]),
+      type: 'warning' as const,
+    };
+  }
+  return { label: token.expires_at, type: 'info' as const };
+}
+
+function formatDate(dateStr?: null | string) {
+  if (!dateStr) return '-';
+  return dateStr;
+}
+
+const expirationShortcuts = computed(() => [
+  {
+    text: $t('apiToken.days7'),
+    value: () => {
+      const d = new Date();
+      d.setDate(d.getDate() + 7);
+      return d;
+    },
+  },
+  {
+    text: $t('apiToken.days30'),
+    value: () => {
+      const d = new Date();
+      d.setDate(d.getDate() + 30);
+      return d;
+    },
+  },
+  {
+    text: $t('apiToken.days60'),
+    value: () => {
+      const d = new Date();
+      d.setDate(d.getDate() + 60);
+      return d;
+    },
+  },
+  {
+    text: $t('apiToken.days90'),
+    value: () => {
+      const d = new Date();
+      d.setDate(d.getDate() + 90);
+      return d;
+    },
+  },
+  {
+    text: $t('apiToken.days365'),
+    value: () => {
+      const d = new Date();
+      d.setFullYear(d.getFullYear() + 1);
+      return d;
+    },
+  },
+]);
+
+onMounted(() => {
+  loadTokens();
+});
+</script>
+
+<template>
+  <div class="api-token-management">
+    <!-- Header -->
+    <div class="mb-4 flex items-center justify-between">
+      <p class="text-sm text-[var(--el-text-color-secondary)]">
+        {{ $t('apiToken.description') }}
+      </p>
+      <ElButton type="primary" @click="openCreateDialog">
+        <Plus class="mr-1 h-4 w-4" />
+        {{ $t('apiToken.createToken') }}
+      </ElButton>
+    </div>
+
+    <!-- Token List -->
+    <div v-if="tokens.length > 0" class="space-y-3">
+      <div
+        v-for="token in tokens"
+        :key="token.id"
+        class="flex items-center justify-between rounded-lg border border-[var(--el-border-color)] p-4 transition-colors hover:bg-[var(--el-fill-color-light)]"
+      >
+        <div class="flex-1">
+          <div class="flex items-center gap-2">
+            <KeyRound class="h-4 w-4 text-[var(--el-color-primary)]" />
+            <span class="font-medium text-[var(--el-text-color-primary)]">
+              {{ token.name }}
+            </span>
+            <ElTag
+              :type="getExpirationStatus(token).type"
+              size="small"
+              effect="light"
+            >
+              {{ getExpirationStatus(token).label }}
+            </ElTag>
+          </div>
+          <div
+            class="mt-2 flex items-center gap-4 text-xs text-[var(--el-text-color-secondary)]"
+          >
+            <span>{{ token.token_prefix }}</span>
+            <span v-if="token.description">{{ token.description }}</span>
+            <span>
+              {{ $t('apiToken.createdAt') }}:
+              {{ formatDate(token.sys_create_datetime) }}
+            </span>
+            <span>
+              {{ $t('apiToken.lastUsed') }}:
+              {{ formatDate(token.last_used_at) }}
+            </span>
+          </div>
+        </div>
+        <ElTooltip :content="$t('apiToken.revokeToken')" placement="top">
+          <ElButton
+            type="danger"
+            text
+            circle
+            @click="handleRevoke(token)"
+          >
+            <Trash2 class="h-4 w-4" />
+          </ElButton>
+        </ElTooltip>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <ElEmpty v-else-if="!loading" :description="$t('apiToken.empty')" />
+
+    <!-- Create Token Dialog -->
+    <ZqDialog
+      v-model="createDialogVisible"
+      :title="$t('apiToken.createToken')"
+      :confirm-loading="createLoading"
+      width="480px"
+      @confirm="handleCreate"
+    >
+      <ElForm label-position="top">
+        <ElFormItem :label="$t('apiToken.tokenName')" required>
+          <ElInput
+            v-model="createForm.name"
+            :placeholder="$t('apiToken.tokenNamePlaceholder')"
+            maxlength="100"
+            show-word-limit
+          />
+        </ElFormItem>
+
+        <ElFormItem :label="$t('apiToken.expirationDate')">
+          <ElDatePicker
+            v-model="createForm.expires_at"
+            type="datetime"
+            :placeholder="$t('apiToken.neverExpiresHint')"
+            :shortcuts="expirationShortcuts"
+            :disabled-date="(date: Date) => date < new Date()"
+            class="w-full"
+            clearable
+          />
+        </ElFormItem>
+
+        <ElFormItem :label="$t('apiToken.tokenDescription')">
+          <ElInput
+            v-model="createForm.description"
+            type="textarea"
+            :rows="2"
+            :placeholder="$t('apiToken.tokenDescriptionPlaceholder')"
+            maxlength="500"
+            show-word-limit
+          />
+        </ElFormItem>
+      </ElForm>
+    </ZqDialog>
+
+    <!-- Token Display Dialog -->
+    <ZqDialog
+      v-model="showTokenDialog"
+      :title="$t('apiToken.tokenCreated')"
+      width="560px"
+      :show-footer="false"
+    >
+      <ElAlert
+        :title="$t('apiToken.tokenWarning')"
+        type="warning"
+        show-icon
+        :closable="false"
+        class="mb-4"
+      />
+      <div
+        class="flex items-center gap-2 rounded-lg bg-[var(--el-fill-color)] p-3"
+      >
+        <code
+          class="flex-1 break-all text-sm text-[var(--el-text-color-primary)]"
+        >
+          {{ createdToken }}
+        </code>
+        <ElButton type="primary" size="small" @click="copyToken">
+          <Copy class="mr-1 h-3.5 w-3.5" />
+          {{ tokenCopied ? $t('apiToken.copied') : $t('apiToken.copy') }}
+        </ElButton>
+      </div>
+    </ZqDialog>
+  </div>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/account-settings/data.ts b/web/apps/web-ele/src/views/_core/account-settings/data.ts
new file mode 100644
index 0000000..5886178
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/account-settings/data.ts
@@ -0,0 +1,165 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { $t } from '@vben/locales';
+
+import { z } from '#/adapter/form';
+
+/**
+ * 获取性别选项
+ */
+export function getGenderOptions() {
+  return [
+    { label: $t('user.unknown'), value: 0 },
+    { label: $t('user.male'), value: 1 },
+    { label: $t('user.female'), value: 2 },
+  ];
+}
+
+/**
+ * 获取基本信息表单配置
+ */
+export function getProfileFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: $t('user.userName'),
+      rules: z
+        .string()
+        .min(2, $t('ui.formRules.minLength', [$t('user.userName'), 2]))
+        .max(64, $t('ui.formRules.maxLength', [$t('user.userName'), 64]))
+        .optional()
+        .or(z.literal('')),
+    },
+    {
+      component: 'ImageSelector',
+      componentProps: {
+        enableCrop: true,
+        cropShape: 'circle',
+        maxSize: 2,
+        placeholder: $t('user.selectAvatar'),
+      },
+      fieldName: 'avatar',
+      label: $t('user.avatar'),
+      help: $t('user.avatarHelp'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'email',
+      label: $t('user.email'),
+      rules: z
+        .string()
+        .email($t('user.emailFormatError'))
+        .max(255, $t('ui.formRules.maxLength', [$t('user.email'), 255]))
+        .optional()
+        .or(z.literal('')),
+    },
+    {
+      component: 'Input',
+      fieldName: 'mobile',
+      label: $t('user.mobile'),
+      rules: z
+        .string()
+        .regex(/^1[3-9]\d{9}$/, $t('user.mobileFormatError'))
+        .optional()
+        .or(z.literal('')),
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: getGenderOptions(),
+        isButton: true,
+      },
+      defaultValue: 0,
+      fieldName: 'gender',
+      label: $t('user.gender'),
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: $t('user.selectBirthday'),
+        valueFormat: 'YYYY-MM-DD',
+      },
+      fieldName: 'birthday',
+      label: $t('user.birthday'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'city',
+      label: $t('user.city'),
+      rules: z
+        .string()
+        .max(100, $t('ui.formRules.maxLength', [$t('user.city'), 100]))
+        .optional()
+        .or(z.literal('')),
+    },
+    {
+      component: 'Input',
+      fieldName: 'address',
+      label: $t('user.address'),
+      rules: z
+        .string()
+        .max(200, $t('ui.formRules.maxLength', [$t('user.address'), 200]))
+        .optional()
+        .or(z.literal('')),
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: $t('user.bioPlaceholder'),
+        rows: 3,
+      },
+      fieldName: 'bio',
+      label: $t('user.bio'),
+    },
+  ];
+}
+
+/**
+ * 获取密码修改表单配置
+ */
+export function getPasswordFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        type: 'password',
+        showPassword: true,
+        placeholder: $t('user.oldPasswordPlaceholder'),
+      },
+      fieldName: 'old_password',
+      label: $t('user.oldPassword'),
+      rules: z
+        .string()
+        .min(1, $t('ui.formRules.required', [$t('user.oldPassword')])),
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        type: 'password',
+        showPassword: true,
+        placeholder: $t('user.newPasswordPlaceholder'),
+      },
+      fieldName: 'new_password',
+      label: $t('user.newPassword'),
+      rules: z
+        .string()
+        .min(6, $t('ui.formRules.minLength', [$t('user.newPassword'), 6]))
+        .max(20, $t('ui.formRules.maxLength', [$t('user.newPassword'), 20])),
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        type: 'password',
+        showPassword: true,
+        placeholder: $t('user.confirmPasswordPlaceholder'),
+      },
+      fieldName: 'confirm_password',
+      label: $t('user.confirmPassword'),
+      rules: z
+        .string()
+        .min(1, $t('ui.formRules.required', [$t('user.confirmPassword')])),
+    },
+  ];
+}
diff --git a/web/apps/web-ele/src/views/_core/account-settings/device-item.vue b/web/apps/web-ele/src/views/_core/account-settings/device-item.vue
new file mode 100644
index 0000000..5973798
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/account-settings/device-item.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import type { DeviceApi } from '#/api/core/device';
+
+import { computed } from 'vue';
+
+import { Monitor, Smartphone } from '@vben/icons';
+
+import { ElButton, ElTag } from 'element-plus';
+
+interface Props {
+  device: DeviceApi.DeviceInfo;
+  isCurrent?: boolean;
+}
+
+interface Emits {
+  (e: 'rename', device: DeviceApi.DeviceInfo): void;
+  (e: 'logout', device: DeviceApi.DeviceInfo): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+// 设备显示名称
+const deviceDisplayName = computed(() => {
+  if (props.device.device_name) {
+    return props.device.device_name;
+  }
+  return `${props.device.browser_type || 'Unknown'} · ${props.device.os_type || 'Unknown'}`;
+});
+
+// 格式化时间
+function formatTime(timeStr: string) {
+  try {
+    const date = new Date(timeStr);
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const minutes = Math.floor(diff / 60_000);
+    const hours = Math.floor(diff / 3_600_000);
+    const days = Math.floor(diff / 86_400_000);
+
+    if (minutes < 1) return '刚刚';
+    if (minutes < 60) return `${minutes}分钟前`;
+    if (hours < 24) return `${hours}小时前`;
+    if (days < 30) return `${days}天前`;
+    return date.toLocaleDateString('zh-CN');
+  } catch {
+    return timeStr;
+  }
+}
+
+function handleRename() {
+  emit('rename', props.device);
+}
+
+function handleLogout() {
+  emit('logout', props.device);
+}
+</script>
+
+<template>
+  <div
+    class="device-item border-b border-gray-100 pb-4 last:border-0 last:pb-0"
+  >
+    <div class="flex items-start justify-between">
+      <div class="flex items-start gap-3">
+        <!-- 设备图标 -->
+        <div class="mt-1">
+          <Smartphone
+            v-if="device.device_type === 'mobile'"
+            class="size-6 text-gray-600"
+          />
+          <Monitor
+            v-else-if="device.device_type === 'tablet'"
+            class="size-6 text-gray-600"
+          />
+          <Monitor v-else class="size-6 text-gray-600" />
+        </div>
+
+        <!-- 设备信息 -->
+        <div class="flex-1">
+          <div class="mb-1 flex items-center gap-2">
+            <span class="text-base font-semibold">
+              {{ deviceDisplayName }}
+            </span>
+            <ElTag v-if="isCurrent" type="success" size="small">
+              当前设备
+            </ElTag>
+            <ElTag
+              v-if="device.is_online"
+              type="success"
+              size="small"
+              effect="plain"
+            >
+              在线
+            </ElTag>
+          </div>
+
+          <div class="space-y-1 text-sm text-gray-600">
+            <div class="flex items-center gap-4">
+              <span>{{ device.browser_type }} · {{ device.os_type }}</span>
+            </div>
+            <div class="flex items-center gap-4">
+              <span>IP: {{ device.ip_address }}</span>
+            </div>
+            <div v-if="device.last_active_time" class="flex items-center gap-4">
+              <span>最后活跃: {{ formatTime(device.last_active_time) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="flex gap-2">
+        <ElButton size="small" @click="handleRename"> 重命名 </ElButton>
+        <ElButton
+          v-if="!isCurrent"
+          type="danger"
+          size="small"
+          plain
+          @click="handleLogout"
+        >
+          强制登出
+        </ElButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.device-item {
+  padding-top: 1rem;
+}
+
+.device-item:first-child {
+  padding-top: 0;
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/account-settings/device-management.vue b/web/apps/web-ele/src/views/_core/account-settings/device-management.vue
new file mode 100644
index 0000000..571d579
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/account-settings/device-management.vue
@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import type { DeviceApi } from '#/api/core/device';
+
+import { onMounted, reactive, ref } from 'vue';
+
+import { Monitor } from '@vben/icons';
+
+import {
+  ElButton,
+  ElCard,
+  ElDialog,
+  ElEmpty,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+} from 'element-plus';
+
+import {
+  getDeviceListApi,
+  logoutDeviceApi,
+  logoutOtherDevicesApi,
+  renameDeviceApi,
+} from '#/api/core/device';
+
+import DeviceItem from './device-item.vue';
+
+const loading = ref(false);
+const deviceList = reactive<DeviceApi.DeviceListResponse>({
+  current_device: undefined,
+  online_devices: [],
+  total_count: 0,
+});
+
+const renameDialogVisible = ref(false);
+const renameForm = reactive({
+  device_id: '',
+  device_name: '',
+});
+
+// 加载设备列表
+async function loadDevices() {
+  loading.value = true;
+  try {
+    const res = await getDeviceListApi();
+    Object.assign(deviceList, res);
+  } catch {
+    ElMessage.error('加载设备列表失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 重命名设备
+function handleRename(device: DeviceApi.DeviceInfo) {
+  renameForm.device_id = device.device_id;
+  renameForm.device_name = device.device_name || '';
+  renameDialogVisible.value = true;
+}
+
+// 确认重命名
+async function handleRenameConfirm() {
+  if (!renameForm.device_name.trim()) {
+    ElMessage.warning('请输入设备名称');
+    return;
+  }
+
+  try {
+    await renameDeviceApi(renameForm.device_id, {
+      device_name: renameForm.device_name,
+    });
+    ElMessage.success('重命名成功');
+    renameDialogVisible.value = false;
+    await loadDevices();
+  } catch {
+    ElMessage.error('重命名失败');
+  }
+}
+
+// 登出指定设备
+async function handleLogoutDevice(device: DeviceApi.DeviceInfo) {
+  try {
+    await ElMessageBox.confirm(
+      `确定要强制登出该设备吗？该设备将在下次刷新时被踢出。`,
+      '确认操作',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    );
+
+    await logoutDeviceApi(device.device_id);
+    ElMessage.success('已强制登出该设备');
+    await loadDevices();
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('操作失败');
+    }
+  }
+}
+
+// 登出所有其他设备
+async function handleLogoutAllDevices() {
+  try {
+    await ElMessageBox.confirm(
+      `确定要登出所有其他设备吗？这将强制所有其他设备下次刷新时重新登录。`,
+      '确认操作',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    );
+
+    await logoutOtherDevicesApi();
+    ElMessage.success('已登出所有其他设备');
+    await loadDevices();
+  } catch (error) {
+    if (error !== 'cancel') {
+      ElMessage.error('操作失败');
+    }
+  }
+}
+
+onMounted(() => {
+  loadDevices();
+});
+</script>
+
+<template>
+  <div class="device-management">
+    <!-- 统计信息 -->
+    <ElCard class="mb-4">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span class="text-lg font-semibold">设备管理</span>
+          <ElButton
+            v-if="deviceList.online_devices.length > 0"
+            type="danger"
+            plain
+            size="small"
+            @click="handleLogoutAllDevices"
+          >
+            登出所有其他设备
+          </ElButton>
+        </div>
+      </template>
+
+      <div class="flex gap-8 text-sm">
+        <div>
+          <span class="text-gray-500">当前在线:</span>
+          <span class="text-primary ml-2 text-xl font-bold">
+            {{ deviceList.total_count }}
+          </span>
+          <span class="ml-1 text-gray-500">台设备</span>
+        </div>
+      </div>
+    </ElCard>
+
+    <!-- 当前设备 -->
+    <ElCard v-if="deviceList.current_device" class="mb-4">
+      <template #header>
+        <div class="flex items-center">
+          <Monitor class="mr-2 size-5 text-green-500" />
+          <span class="font-semibold">当前设备 (你正在使用)</span>
+        </div>
+      </template>
+
+      <DeviceItem
+        :device="deviceList.current_device"
+        :is-current="true"
+        @rename="handleRename"
+      />
+    </ElCard>
+
+    <!-- 其他在线设备 -->
+    <ElCard v-if="deviceList.online_devices.length > 0">
+      <template #header>
+        <div class="flex items-center">
+          <Monitor class="mr-2 size-5 text-blue-500" />
+          <span class="font-semibold">其他在线设备</span>
+        </div>
+      </template>
+
+      <div class="space-y-4">
+        <DeviceItem
+          v-for="device in deviceList.online_devices"
+          :key="device.device_id"
+          :device="device"
+          @rename="handleRename"
+          @logout="handleLogoutDevice"
+        />
+      </div>
+    </ElCard>
+
+    <!-- 无其他设备提示 -->
+    <ElEmpty
+      v-if="!loading && deviceList.online_devices.length === 0"
+      description="暂无其他设备登录"
+    />
+
+    <!-- 重命名对话框 -->
+    <ElDialog v-model="renameDialogVisible" title="重命名设备" width="400px">
+      <ElForm :model="renameForm" label-width="80px">
+        <ElFormItem label="设备名称">
+          <ElInput
+            v-model="renameForm.device_name"
+            placeholder="请输入设备名称，如：办公室电脑"
+            maxlength="50"
+            show-word-limit
+          />
+        </ElFormItem>
+      </ElForm>
+
+      <template #footer>
+        <ElButton @click="renameDialogVisible = false">取消</ElButton>
+        <ElButton type="primary" @click="handleRenameConfirm"> 确定 </ElButton>
+      </template>
+    </ElDialog>
+  </div>
+</template>
+
+<style scoped>
+.device-management {
+  max-width: 800px;
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/account-settings/index.vue b/web/apps/web-ele/src/views/_core/account-settings/index.vue
new file mode 100644
index 0000000..2eb2fb2
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/account-settings/index.vue
@@ -0,0 +1,184 @@
+<script lang="ts" setup>
+import type { User } from '#/api/core';
+import type { CardListItem, CardListOptions } from '#/components/card-list';
+
+import { onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElCard, ElMessage } from 'element-plus';
+
+import { getCurrentUserProfileApi } from '#/api/core';
+import { CardList } from '#/components/card-list';
+
+import ApiTokenManagement from './api-token-management.vue';
+import DeviceManagement from './device-management.vue';
+import PasswordForm from './modules/password-form.vue';
+import ProfileForm from './modules/profile-form.vue';
+
+defineOptions({ name: 'AccountSettings' });
+
+// 菜单项类型
+interface SettingMenuItem extends CardListItem {
+  id: string;
+  name: string;
+  key: 'apiToken' | 'device' | 'password' | 'profile';
+}
+
+// 菜单项数据
+const menuItems = ref<SettingMenuItem[]>([
+  {
+    id: 'profile',
+    name: $t('user.basicInfo'),
+    key: 'profile',
+  },
+  {
+    id: 'password',
+    name: $t('user.changePassword'),
+    key: 'password',
+  },
+  {
+    id: 'device',
+    name: $t('apiToken.deviceManagement'),
+    key: 'device',
+  },
+  {
+    id: 'apiToken',
+    name: $t('apiToken.title'),
+    key: 'apiToken',
+  },
+]);
+
+const loading = ref(false);
+const selectedMenuId = ref<string>('profile');
+const userProfile = ref<null | User>(null);
+
+// CardList 配置
+const cardListOptions: CardListOptions<SettingMenuItem> = {
+  searchFields: [{ field: 'name' }],
+  titleField: 'name',
+  displayMode: 'center', // 一行居中显示
+};
+
+/**
+ * 处理菜单选择
+ */
+function handleMenuSelect(id: string | undefined) {
+  selectedMenuId.value = id || 'profile';
+}
+
+/**
+ * 加载当前用户信息
+ */
+async function loadUserProfile() {
+  loading.value = true;
+  try {
+    const data = await getCurrentUserProfileApi();
+    userProfile.value = data;
+  } catch {
+    ElMessage.error($t('user.loadProfileError'));
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * 处理表单成功回调
+ */
+async function handleFormSuccess() {
+  await loadUserProfile();
+}
+
+onMounted(() => {
+  loadUserProfile();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full">
+      <!-- 左侧菜单 -->
+      <div class="w-1/6">
+        <CardList
+          :items="menuItems"
+          :selected-id="selectedMenuId"
+          :options="cardListOptions"
+          :loading="false"
+          class="account-settings-menu"
+          @select="handleMenuSelect"
+        >
+          <template #item="{ item }">
+            <div class="text-sm font-medium">{{ item.name }}</div>
+          </template>
+        </CardList>
+      </div>
+
+      <!-- 右侧表单 -->
+      <div class="flex-1">
+        <ElCard shadow="never" class="h-full">
+          <template #header>
+            <div class="card-header">
+              <span>
+                {{
+                  selectedMenuId === 'profile'
+                    ? $t('user.basicInfo')
+                    : selectedMenuId === 'password'
+                      ? $t('user.changePassword')
+                      : selectedMenuId === 'device'
+                        ? $t('apiToken.deviceManagement')
+                        : $t('apiToken.title')
+                }}
+              </span>
+            </div>
+          </template>
+          <!-- 基本信息表单 -->
+          <template v-if="selectedMenuId === 'profile'">
+            <ProfileForm
+              :user-profile="userProfile"
+              @success="handleFormSuccess"
+            />
+          </template>
+
+          <!-- 修改密码表单 -->
+          <template v-else-if="selectedMenuId === 'password'">
+            <PasswordForm @success="handleFormSuccess" />
+          </template>
+
+          <!-- 设备管理 -->
+          <template v-else-if="selectedMenuId === 'device'">
+            <DeviceManagement />
+          </template>
+
+          <!-- API Token 管理 -->
+          <template v-else-if="selectedMenuId === 'apiToken'">
+            <ApiTokenManagement />
+          </template>
+        </ElCard>
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.account-settings-menu :deep(.el-card__body) {
+  padding: 16px;
+}
+
+/* 隐藏搜索和添加按钮 */
+.account-settings-menu :deep(.mb-4.flex) {
+  display: none;
+}
+
+.account-settings-menu :deep(.el-form-item__label) {
+  font-weight: 500;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/account-settings/modules/password-form.vue b/web/apps/web-ele/src/views/_core/account-settings/modules/password-form.vue
new file mode 100644
index 0000000..61dc6f2
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/account-settings/modules/password-form.vue
@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import type { UserChangePasswordInput } from '#/api/core';
+
+import { reactive, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { ElButton, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus';
+
+import { changePasswordApi } from '#/api/core';
+
+defineOptions({ name: 'PasswordForm' });
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const loading = ref(false);
+
+// 密码修改表单数据
+const passwordForm = reactive<UserChangePasswordInput>({
+  old_password: '',
+  new_password: '',
+  confirm_password: '',
+});
+
+// 表单引用
+const passwordFormRef = ref<InstanceType<typeof ElForm>>();
+
+// 表单验证规则
+const passwordRules = {
+  old_password: [
+    {
+      required: true,
+      message: $t('ui.formRules.required', [$t('user.oldPassword')]),
+      trigger: 'blur',
+    },
+  ],
+  new_password: [
+    {
+      required: true,
+      message: $t('ui.formRules.required', [$t('user.newPassword')]),
+      trigger: 'blur',
+    },
+    {
+      min: 6,
+      max: 20,
+      message: `${$t('ui.formRules.minLength', [
+        $t('user.newPassword'),
+        6,
+      ])}，${$t('ui.formRules.maxLength', [$t('user.newPassword'), 20])}`,
+      trigger: 'blur',
+    },
+  ],
+  confirm_password: [
+    {
+      required: true,
+      message: $t('ui.formRules.required', [$t('user.confirmPassword')]),
+      trigger: 'blur',
+    },
+    {
+      validator: (_rule: any, value: string, callback: Function) => {
+        if (value === passwordForm.new_password) {
+          callback();
+        } else {
+          callback(new Error($t('user.passwordNotMatch')));
+        }
+      },
+      trigger: 'blur',
+    },
+  ],
+};
+
+/**
+ * 修改密码
+ */
+async function handleChangePassword() {
+  if (!passwordFormRef.value) return;
+
+  await passwordFormRef.value.validate(async (valid) => {
+    if (!valid) return;
+
+    // 验证新密码和确认密码是否一致
+    if (passwordForm.new_password !== passwordForm.confirm_password) {
+      ElMessage.error($t('user.passwordNotMatch'));
+      return;
+    }
+
+    loading.value = true;
+    try {
+      await changePasswordApi({ ...passwordForm });
+      ElMessage.success($t('user.changePasswordSuccess'));
+      // 清空表单
+      Object.assign(passwordForm, {
+        old_password: '',
+        new_password: '',
+        confirm_password: '',
+      });
+      passwordFormRef.value?.resetFields();
+      emit('success');
+    } catch (error: any) {
+      ElMessage.error(error?.message || $t('user.changePasswordError'));
+    } finally {
+      loading.value = false;
+    }
+  });
+}
+
+/**
+ * 重置表单
+ */
+function handleReset() {
+  passwordFormRef.value?.resetFields();
+}
+</script>
+
+<template>
+  <ElForm
+    ref="passwordFormRef"
+    :model="passwordForm"
+    :rules="passwordRules"
+    label-width="120px"
+    label-position="right"
+  >
+    <ElFormItem :label="$t('user.oldPassword')" prop="old_password">
+      <ElInput
+        v-model="passwordForm.old_password"
+        type="password"
+        :placeholder="$t('user.oldPasswordPlaceholder')"
+        show-password
+        clearable
+      />
+    </ElFormItem>
+
+    <ElFormItem :label="$t('user.newPassword')" prop="new_password">
+      <ElInput
+        v-model="passwordForm.new_password"
+        type="password"
+        :placeholder="$t('user.newPasswordPlaceholder')"
+        show-password
+        clearable
+      />
+      <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+        {{ $t('account-settings.passwordLengthHint') }}
+      </p>
+    </ElFormItem>
+
+    <ElFormItem :label="$t('user.confirmPassword')" prop="confirm_password">
+      <ElInput
+        v-model="passwordForm.confirm_password"
+        type="password"
+        :placeholder="$t('user.confirmPasswordPlaceholder')"
+        show-password
+        clearable
+      />
+    </ElFormItem>
+
+    <!-- 保存按钮 -->
+    <ElFormItem>
+      <ElButton type="primary" :loading="loading" @click="handleChangePassword">
+        {{ $t('common.save') }}
+      </ElButton>
+      <ElButton @click="handleReset">
+        {{ $t('common.reset') }}
+      </ElButton>
+    </ElFormItem>
+  </ElForm>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/account-settings/modules/profile-form.vue b/web/apps/web-ele/src/views/_core/account-settings/modules/profile-form.vue
new file mode 100644
index 0000000..c379ebc
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/account-settings/modules/profile-form.vue
@@ -0,0 +1,293 @@
+<script lang="ts" setup>
+import type { User, UserProfileUpdateInput } from '#/api/core';
+
+import { reactive, ref, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElDatePicker,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElRadio,
+  ElRadioGroup,
+} from 'element-plus';
+
+import { patchUserProfileApi } from '#/api/core';
+import { ImageSelector } from '#/components/zq-form/image-selector';
+
+defineOptions({ name: 'ProfileForm' });
+
+const props = withDefaults(defineProps<Props>(), {
+  userProfile: null,
+});
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+interface Props {
+  userProfile?: null | User;
+}
+
+const loading = ref(false);
+
+// 基本信息表单数据
+const profileForm = reactive<UserProfileUpdateInput>({
+  name: '',
+  email: '',
+  mobile: '',
+  avatar: '',
+  gender: 0,
+  birthday: '',
+  city: '',
+  address: '',
+  bio: '',
+});
+
+// 表单引用
+const profileFormRef = ref<InstanceType<typeof ElForm>>();
+
+// 性别选项
+const genderOptions = [
+  { label: $t('user.unknown'), value: 0 },
+  { label: $t('user.male'), value: 1 },
+  { label: $t('user.female'), value: 2 },
+];
+
+// 表单验证规则
+const profileRules = {
+  name: [
+    {
+      min: 2,
+      max: 64,
+      message: `${$t('ui.formRules.minLength', [$t('user.userName'), 2])}，${$t(
+        'ui.formRules.maxLength',
+        [$t('user.userName'), 64],
+      )}`,
+      trigger: 'blur',
+    },
+  ],
+  email: [
+    {
+      type: 'email' as const,
+      message: $t('user.emailFormatError'),
+      trigger: 'blur',
+    },
+  ],
+  mobile: [
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: $t('user.mobileFormatError'),
+      trigger: 'blur',
+    },
+  ],
+};
+
+/**
+ * 加载用户信息
+ */
+function loadUserProfile() {
+  if (props.userProfile) {
+    Object.assign(profileForm, {
+      name: props.userProfile.name || '',
+      email: props.userProfile.email || '',
+      mobile: props.userProfile.mobile || '',
+      avatar: props.userProfile.avatar || '',
+      gender: props.userProfile.gender ?? 0,
+      birthday: props.userProfile.birthday || '',
+      city: props.userProfile.city || '',
+      address: props.userProfile.address || '',
+      bio: props.userProfile.bio || '',
+    });
+  }
+}
+
+/**
+ * 保存基本信息
+ */
+async function handleSaveProfile() {
+  if (!profileFormRef.value) return;
+
+  await profileFormRef.value.validate(async (valid) => {
+    if (!valid) return;
+
+    loading.value = true;
+    try {
+      await patchUserProfileApi({ ...profileForm });
+      ElMessage.success($t('user.updateProfileSuccess'));
+      // 通知父组件重新加载用户信息
+      emit('success');
+    } catch (error: any) {
+      ElMessage.error(error?.message || $t('user.updateProfileError'));
+    } finally {
+      loading.value = false;
+    }
+  });
+}
+
+/**
+ * 头像上传成功回调
+ */
+function handleAvatarChange(value: string | string[] | undefined) {
+  if (!value) {
+    profileForm.avatar = '';
+    return;
+  }
+  profileForm.avatar = Array.isArray(value) ? value[0] || '' : value || '';
+}
+
+/**
+ * 重置表单
+ */
+function handleReset() {
+  loadUserProfile();
+}
+
+// 监听 userProfile 变化，自动更新表单
+watch(
+  () => props.userProfile,
+  (newVal) => {
+    if (newVal) {
+      Object.assign(profileForm, {
+        name: newVal.name || '',
+        email: newVal.email || '',
+        mobile: newVal.mobile || '',
+        avatar: newVal.avatar || '',
+        gender: newVal.gender ?? 0,
+        birthday: newVal.birthday || '',
+        city: newVal.city || '',
+        address: newVal.address || '',
+        bio: newVal.bio || '',
+      });
+    }
+  },
+  { immediate: true },
+);
+
+// 初始化加载用户信息
+loadUserProfile();
+</script>
+
+<template>
+  <ElForm
+    ref="profileFormRef"
+    :model="profileForm"
+    :rules="profileRules"
+    label-width="120px"
+    label-position="right"
+  >
+    <!-- 头像区域 -->
+    <ElFormItem :label="$t('user.avatar')">
+      <div class="flex items-center gap-6">
+        <div class="flex-1">
+          <ImageSelector
+            v-model="profileForm.avatar"
+            :enable-crop="true"
+            crop-shape="circle"
+            :max-size="2"
+            :size="100"
+            :placeholder="$t('user.selectAvatar')"
+            @update:model-value="handleAvatarChange"
+          />
+          <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+            {{ $t('user.avatarHelp') }}
+          </p>
+        </div>
+      </div>
+    </ElFormItem>
+
+    <ElDivider />
+
+    <!-- 基本信息 -->
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <ElFormItem :label="$t('user.userName')" prop="name">
+        <ElInput
+          v-model="profileForm.name"
+          :placeholder="$t('user.userName')"
+          clearable
+        />
+      </ElFormItem>
+
+      <ElFormItem :label="$t('user.email')" prop="email">
+        <ElInput
+          v-model="profileForm.email"
+          type="email"
+          :placeholder="$t('user.email')"
+          clearable
+        />
+      </ElFormItem>
+
+      <ElFormItem :label="$t('user.mobile')" prop="mobile">
+        <ElInput
+          v-model="profileForm.mobile"
+          :placeholder="$t('user.mobile')"
+          clearable
+        />
+      </ElFormItem>
+
+      <ElFormItem :label="$t('user.gender')">
+        <ElRadioGroup v-model="profileForm.gender">
+          <ElRadio
+            v-for="option in genderOptions"
+            :key="option.value"
+            :label="option.value"
+          >
+            {{ option.label }}
+          </ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+
+      <ElFormItem :label="$t('user.birthday')">
+        <ElDatePicker
+          v-model="profileForm.birthday"
+          type="date"
+          :placeholder="$t('user.selectBirthday')"
+          value-format="YYYY-MM-DD"
+          style="width: 100%"
+        />
+      </ElFormItem>
+
+      <ElFormItem :label="$t('user.city')">
+        <ElInput
+          v-model="profileForm.city"
+          :placeholder="$t('user.city')"
+          clearable
+        />
+      </ElFormItem>
+    </div>
+
+    <ElFormItem :label="$t('user.address')">
+      <ElInput
+        v-model="profileForm.address"
+        :placeholder="$t('user.address')"
+        clearable
+      />
+    </ElFormItem>
+
+    <ElFormItem :label="$t('user.bio')">
+      <ElInput
+        v-model="profileForm.bio"
+        type="textarea"
+        :rows="4"
+        :placeholder="$t('user.bioPlaceholder')"
+        :maxlength="500"
+        show-word-limit
+      />
+    </ElFormItem>
+
+    <!-- 保存按钮 -->
+    <ElFormItem>
+      <ElButton type="primary" :loading="loading" @click="handleSaveProfile">
+        {{ $t('common.save') }}
+      </ElButton>
+      <ElButton @click="handleReset">
+        {{ $t('common.reset') }}
+      </ElButton>
+    </ElFormItem>
+  </ElForm>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/dept/data.ts b/web/apps/web-ele/src/views/_core/dept/data.ts
new file mode 100644
index 0000000..d3ee22b
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/dept/data.ts
@@ -0,0 +1,74 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { DeptUser } from '#/api/core/dept';
+
+import { $t } from '@vben/locales';
+
+/**
+ * 获取搜索表单的字段配置
+ */
+export function useSearchFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: $t('system.user.userName'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'username',
+      label: $t('system.user.account'),
+    },
+  ];
+}
+
+/**
+ * 获取用户表格列配置
+ */
+export function useUserColumns(
+  onActionClick?: OnActionClickFn<DeptUser>,
+): VxeTableGridOptions<DeptUser>['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      minWidth: 60,
+      align: 'center',
+      fixed: 'left',
+    },
+    {
+      field: 'username',
+      title: $t('system.user.account'),
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: $t('system.user.userName'),
+      minWidth: 120,
+    },
+    {
+      field: 'email',
+      title: $t('system.user.email'),
+      minWidth: 180,
+    },
+    {
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: $t('system.user.userName'),
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: ['edit', 'delete'],
+      },
+      field: 'operation',
+      fixed: 'right',
+      headerAlign: 'center',
+      showOverflow: false,
+      title: $t('system.user.operation'),
+      minWidth: 150,
+    },
+  ];
+}
diff --git a/web/apps/web-ele/src/views/_core/dept/index.vue b/web/apps/web-ele/src/views/_core/dept/index.vue
new file mode 100644
index 0000000..c8134cd
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/dept/index.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
+
+import { addDeptUsersApi, removeDeptUsersApi } from '#/api/core/dept';
+import { UserListPanel } from '#/components/user-list-panel';
+import { UserSelector } from '#/components/zq-form/user-selector';
+
+import DeptTree from './modules/dept-tree.vue';
+
+defineOptions({ name: 'SystemDept' });
+
+const currentDeptId = ref<string>();
+const tempSelectedUsers = ref<Set<string>>(new Set());
+const userListPanelRef = ref<InstanceType<typeof UserListPanel>>();
+
+/**
+ * 部门选择事件
+ */
+function onDeptSelect(deptIds: string[] | undefined) {
+  currentDeptId.value = deptIds?.[0];
+  tempSelectedUsers.value.clear();
+}
+
+/**
+ * 处理用户选择
+ */
+function handleUserSelect(userId: string, _user: any) {
+  if (tempSelectedUsers.value.has(userId)) {
+    tempSelectedUsers.value.delete(userId);
+  } else {
+    tempSelectedUsers.value.add(userId);
+  }
+}
+
+/**
+ * 处理移除用户
+ */
+function handleRemoveUser(userId: string) {
+  tempSelectedUsers.value.delete(userId);
+}
+
+/**
+ * 新增用户到部门（作为 UserSelector 的 onConfirm 回调）
+ */
+async function handleAddUsers(userIds: string | string[]) {
+  if (!currentDeptId.value) {
+    ElMessage.warning($t('dept.selectDeptFirst') || '请先选择部门');
+    throw new Error('请先选择部门');
+  }
+
+  const userIdsArray = Array.isArray(userIds) ? userIds : [userIds];
+
+  if (userIdsArray.length === 0) {
+    ElMessage.warning($t('dept.selectUsersFirst') || '请先选择用户');
+    throw new Error('请先选择用户');
+  }
+
+  await addDeptUsersApi(currentDeptId.value, {
+    user_ids: userIdsArray,
+  });
+
+  ElMessage.success($t('dept.addUsersSuccess') || '添加成功');
+  // 刷新用户列表
+  userListPanelRef.value?.reload();
+}
+
+/**
+ * 从部门删除用户
+ */
+async function handleRemoveUsers() {
+  if (!currentDeptId.value) {
+    ElMessage.warning($t('dept.selectDeptFirst') || '请先选择部门');
+    return;
+  }
+
+  if (tempSelectedUsers.value.size === 0) {
+    ElMessage.warning($t('dept.selectUsersFirst') || '请先选择用户');
+    return;
+  }
+
+  const userIds = [...tempSelectedUsers.value];
+  const confirmMessage =
+    $t('dept.removeUsersConfirm', [tempSelectedUsers.value.size]) ||
+    `确定要删除选中的 ${tempSelectedUsers.value.size} 个用户吗？`;
+
+  try {
+    await ElMessageBox.confirm(confirmMessage, $t('common.delete') || '删除', {
+      confirmButtonText: $t('common.confirm') || '确定',
+      cancelButtonText: $t('common.cancel') || '取消',
+      type: 'warning',
+    });
+
+    await removeDeptUsersApi(currentDeptId.value, {
+      user_ids: userIds,
+    });
+    ElMessage.success($t('dept.removeUsersSuccess') || '删除成功');
+    tempSelectedUsers.value.clear();
+    // 刷新用户列表
+    userListPanelRef.value?.reload();
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('Failed to remove users:', error);
+      ElMessage.error($t('dept.removeUsersFailed') || '删除失败');
+    }
+  }
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full">
+      <!-- 部门树 -->
+      <div class="w-1/6">
+        <DeptTree @select="onDeptSelect" />
+      </div>
+
+      <!-- 主内容区：用户列表 -->
+      <div class="w-5/6">
+        <UserListPanel
+          ref="userListPanelRef"
+          :data-source="currentDeptId ? 'dept' : 'all'"
+          :source-id="currentDeptId"
+          :temp-selected-users="tempSelectedUsers"
+          :filterable="true"
+          :multiple="true"
+          :selectable="true"
+          :show-selected-tags="false"
+          :show-border="false"
+          @user-select="handleUserSelect"
+          @remove-user="handleRemoveUser"
+        >
+          <template #title>
+            <div class="flex items-center gap-2">
+              <UserSelector
+                :multiple="true"
+                :disabled="!currentDeptId"
+                display-mode="button"
+                :placeholder="$t('common.add') || '新增'"
+                :on-confirm="handleAddUsers"
+              />
+              <ElButton
+                type="danger"
+                :disabled="!currentDeptId || tempSelectedUsers.size === 0"
+                @click="handleRemoveUsers"
+              >
+                {{ $t('common.delete') || '删除' }}
+              </ElButton>
+            </div>
+          </template>
+        </UserListPanel>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/dept/modules/dept-form-modal.vue b/web/apps/web-ele/src/views/_core/dept/modules/dept-form-modal.vue
new file mode 100644
index 0000000..fb81f8c
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/dept/modules/dept-form-modal.vue
@@ -0,0 +1,209 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { Dept } from '#/api/core/dept';
+
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { createDeptApi, updateDeptApi } from '#/api/core/dept';
+import { ZqDialog } from '#/components/zq-dialog';
+
+const emit = defineEmits(['success']);
+const formData = ref<Dept>();
+const visible = ref(false);
+const confirmLoading = ref(false);
+
+/**
+ * 获取部门类型选项
+ */
+function getDeptTypeOptions() {
+  return [
+    { label: $t('dept.deptTypeOptions.company'), value: 'company' },
+    { label: $t('dept.deptTypeOptions.department'), value: 'department' },
+    { label: $t('dept.deptTypeOptions.team'), value: 'team' },
+    { label: $t('dept.deptTypeOptions.other'), value: 'other' },
+  ];
+}
+
+function getFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'DeptSelector',
+      componentProps: {
+        allowClear: true,
+        class: 'w-full',
+        labelField: 'name',
+        valueField: 'id',
+      },
+      fieldName: 'parent_id',
+      label: $t('dept.parentDept'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: $t('dept.deptName'),
+      rules: z
+        .string()
+        .min(2, $t('ui.formRules.minLength', [$t('dept.deptName'), 2]))
+        .max(64, $t('ui.formRules.maxLength', [$t('dept.deptName'), 64])),
+    },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: $t('dept.deptCode'),
+      help: $t('dept.deptCodeHelp'),
+      rules: z
+        .string()
+        .max(32, $t('ui.formRules.maxLength', [$t('dept.deptCode'), 32]))
+        .regex(/^[\w-]*$/, $t('dept.deptCodeFormatError'))
+        .optional(),
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        options: getDeptTypeOptions(),
+      },
+      defaultValue: 'department',
+      fieldName: 'dept_type',
+      label: $t('dept.deptType'),
+    },
+    {
+      component: 'UserSelector',
+      componentProps: {
+        clearable: true,
+        multiple: false,
+      },
+      fieldName: 'lead_id',
+      label: $t('dept.lead'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'phone',
+      label: $t('dept.phone'),
+      help: $t('dept.phoneHelp'),
+      rules: z
+        .string()
+        .max(20, $t('ui.formRules.maxLength', [$t('dept.phone'), 20]))
+        .regex(/^[\d\-+()\s]*$/, $t('dept.phoneFormatError'))
+        .optional(),
+    },
+    {
+      component: 'Input',
+      fieldName: 'email',
+      label: $t('dept.email'),
+      help: $t('dept.emailHelp'),
+      rules: z.string().email($t('dept.emailFormatError')).optional(),
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: $t('common.enabled'), value: true },
+          { label: $t('common.disabled'), value: false },
+        ],
+        isButton: true,
+      },
+      defaultValue: true,
+      fieldName: 'status',
+      label: $t('dept.status'),
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        max: 9999,
+        class: 'w-full',
+      },
+      defaultValue: 1,
+      fieldName: 'sort',
+      label: $t('dept.sort'),
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 200,
+        rows: 3,
+        showCount: true,
+        placeholder: $t('dept.descriptionPlaceholder'),
+      },
+      fieldName: 'description',
+      label: $t('dept.description'),
+      help: $t('dept.descriptionHelp'),
+      rules: z
+        .string()
+        .max(200, $t('ui.formRules.maxLength', [$t('dept.description'), 200]))
+        .optional(),
+    },
+  ];
+}
+
+const [Form, formApi] = useVbenForm({
+  layout: 'vertical',
+  schema: getFormSchema(),
+  showDefaultActions: false,
+});
+
+function resetForm() {
+  formApi.resetForm();
+  formApi.setValues(formData.value || {});
+}
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('common.ui.actionTitle.edit', [$t('dept.name')])
+    : $t('common.ui.actionTitle.add', [$t('dept.name')]);
+});
+
+async function onSubmit() {
+  const { valid } = await formApi.validate();
+  if (valid) {
+    confirmLoading.value = true;
+    const data = await formApi.getValues();
+    try {
+      await (formData.value?.id
+        ? updateDeptApi(formData.value.id, data as any)
+        : createDeptApi(data as any));
+      visible.value = false;
+      emit('success', data);
+    } finally {
+      confirmLoading.value = false;
+    }
+  }
+}
+
+function open(data?: Dept) {
+  visible.value = true;
+  if (data) {
+    formData.value = data;
+    formApi.setValues(formData.value);
+  } else {
+    formData.value = undefined;
+    formApi.resetForm();
+  }
+}
+
+defineExpose({
+  open,
+});
+</script>
+
+<template>
+  <ZqDialog
+    v-model="visible"
+    :title="getTitle"
+    :confirm-loading="confirmLoading"
+    @confirm="onSubmit"
+  >
+    <Form class="mx-4" />
+    <template #footer-left>
+      <ElButton type="primary" @click="resetForm">
+        {{ $t('common.reset') }}
+      </ElButton>
+    </template>
+  </ZqDialog>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/dept/modules/dept-tree.vue b/web/apps/web-ele/src/views/_core/dept/modules/dept-tree.vue
new file mode 100644
index 0000000..45f40b4
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/dept/modules/dept-tree.vue
@@ -0,0 +1,501 @@
+<script lang="ts" setup>
+import type { DeptTreeNode } from '#/api/core/dept';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { IconifyIcon, Loader, Plus, Search } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElCard,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+  ElSkeleton,
+  ElSkeletonItem,
+  ElTooltip,
+} from 'element-plus';
+
+import {
+  deleteDeptApi,
+  getDeptByParentApi,
+  getDeptDetailApi,
+  searchDeptApi,
+} from '#/api/core/dept';
+
+import DeptFormModal from './dept-form-modal.vue';
+
+const emit = defineEmits<{
+  select: [deptIds: string[] | undefined, hasChildren?: boolean];
+}>();
+
+const treeData = ref<DeptTreeNode[]>([]);
+const loading = ref(false);
+const selectedDeptId = ref<string>();
+const searchKeyword = ref<string>('');
+const hoveredDeptId = ref<string>();
+const expandedDeptIds = ref<Set<string>>(new Set());
+const loadingDeptIds = ref<Set<string>>(new Set());
+const searchResults = ref<DeptTreeNode[]>([]);
+const isSearching = ref(false);
+const currentOperatingDeptId = ref<null | string>(null);
+const currentOperatingParentId = ref<null | string>(null);
+const deptFormModalRef = ref<InstanceType<typeof DeptFormModal>>();
+
+/**
+ * 加载顶级部门数据（只加载第一级）
+ */
+async function fetchDeptList() {
+  try {
+    loading.value = true;
+    // 只获取顶级部门
+    const data = await getDeptByParentApi();
+    treeData.value = Array.isArray(data) ? data : [];
+
+    // 自动选中第一个部门
+    if (treeData.value.length > 0 && !selectedDeptId.value) {
+      const firstDept = treeData.value.at(0);
+      if (firstDept) {
+        selectedDeptId.value = firstDept.id;
+        emit('select', [firstDept.id], hasChildren(firstDept));
+      }
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * 加载子部门（懒加载）
+ */
+async function loadChildren(parentId: string) {
+  try {
+    loadingDeptIds.value.add(parentId);
+    const data = await getDeptByParentApi(parentId);
+
+    // 更新树数据中的子部门
+    function updateNodeChildren(nodes: DeptTreeNode[], targetId: string) {
+      for (const node of nodes) {
+        if (node.id === targetId) {
+          node.children = Array.isArray(data) ? data : [];
+          return true;
+        }
+        if (
+          node.children &&
+          node.children.length > 0 &&
+          updateNodeChildren(node.children, targetId)
+        ) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    updateNodeChildren(treeData.value, parentId);
+  } catch {
+    ElMessage.error($t('ui.actionMessage.loadError'));
+  } finally {
+    loadingDeptIds.value.delete(parentId);
+  }
+}
+
+/**
+ * 切换节点展开/折叠
+ */
+async function toggleNodeExpanded(dept: DeptTreeNode) {
+  if (expandedDeptIds.value.has(dept.id)) {
+    expandedDeptIds.value.delete(dept.id);
+  } else {
+    expandedDeptIds.value.add(dept.id);
+
+    // 如果子部门未加载，则加载
+    if (!dept.children || dept.children.length === 0) {
+      await loadChildren(dept.id);
+    }
+  }
+}
+
+/**
+ * 选择部门
+ */
+function onDeptSelect(dept: DeptTreeNode) {
+  selectedDeptId.value = dept.id;
+  emit('select', [dept.id], hasChildren(dept));
+}
+
+/**
+ * 添加部门
+ */
+function onAddDept() {
+  currentOperatingDeptId.value = null;
+  currentOperatingParentId.value = null;
+  deptFormModalRef.value?.open();
+}
+
+/**
+ * 编辑部门
+ */
+function onEditDept(dept: DeptTreeNode) {
+  currentOperatingDeptId.value = dept.id;
+  deptFormModalRef.value?.open(dept);
+}
+
+/**
+ * 在当前部门下新建子部门
+ */
+function onAddChildDept(dept: DeptTreeNode) {
+  currentOperatingDeptId.value = null;
+  currentOperatingParentId.value = dept.id;
+  deptFormModalRef.value?.open({ parent_id: dept.id } as any);
+}
+
+/**
+ * 删除部门
+ */
+async function onDeleteDept(dept: DeptTreeNode) {
+  ElMessageBox.confirm(
+    $t('ui.actionMessage.deleteConfirm', [dept.name]),
+    $t('common.delete'),
+    {
+      confirmButtonText: $t('common.confirm'),
+      cancelButtonText: $t('common.cancel'),
+      type: 'warning',
+      showClose: false,
+    },
+  )
+    .then(async () => {
+      try {
+        await deleteDeptApi(dept.id);
+        ElMessage.success($t('ui.actionMessage.deleteSuccess', [dept.name]));
+        fetchDeptList();
+      } catch {
+        ElMessage.error($t('ui.actionMessage.deleteError'));
+      }
+    })
+    .catch(() => {
+      // 用户取消了操作
+    });
+}
+
+/**
+ * 在树中查找并更新节点数据
+ */
+function updateNodeInTree(
+  nodes: DeptTreeNode[],
+  deptId: string,
+  updatedData: Partial<DeptTreeNode>,
+): boolean {
+  for (const node of nodes) {
+    if (node.id === deptId) {
+      // 找到节点，更新数据（保留 children）
+      Object.assign(node, { ...updatedData, children: node.children });
+      return true;
+    }
+    if (
+      node.children &&
+      node.children.length > 0 &&
+      updateNodeInTree(node.children, deptId, updatedData)
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * 表单成功回调
+ */
+async function onDeptFormSuccess(formData?: any) {
+  const isUpdate = currentOperatingDeptId.value !== null;
+
+  try {
+    if (isUpdate) {
+      // 修改操作：只刷新当前节点数据
+      const updatedDept = await getDeptDetailApi(currentOperatingDeptId.value!);
+      updateNodeInTree(
+        treeData.value,
+        currentOperatingDeptId.value!,
+        updatedDept,
+      );
+      ElMessage.success($t('dept.updateSuccess'));
+    } else {
+      // 新增操作：刷新父节点的子列表
+      // 优先使用表单提交的parent_id，其次使用记录的parent_id
+      const parentId = formData?.parent_id || currentOperatingParentId.value;
+
+      if (parentId) {
+        // 如果父节点已展开，重新加载其子部门
+        if (expandedDeptIds.value.has(parentId)) {
+          await loadChildren(parentId);
+        }
+      } else {
+        // 顶级部门，重新加载顶级列表
+        await fetchDeptList();
+      }
+    }
+  } catch (error) {
+    console.error('刷新部门数据失败:', error);
+    // 失败时重新加载整个树
+    await fetchDeptList();
+  } finally {
+    // 重置操作标记
+    currentOperatingDeptId.value = null;
+    currentOperatingParentId.value = null;
+  }
+}
+
+/**
+ * 检查部门是否有子部门
+ */
+function hasChildren(dept: DeptTreeNode): boolean {
+  // 首先检查 child_count 字段（后端返回的子部门数量）
+  if ('child_count' in dept && typeof dept.child_count === 'number') {
+    return dept.child_count > 0;
+  }
+  // 如果没有 child_count 字段，则检查 children 属性
+  if (!dept.children) {
+    return false; // 没有信息表示没有子部门
+  }
+  return dept.children.length > 0;
+}
+
+/**
+ * 自动展开搜索结果中的所有节点
+ */
+function autoExpandSearchResults(nodes: DeptTreeNode[]) {
+  nodes.forEach((node) => {
+    expandedDeptIds.value.add(node.id);
+    if (node.children && node.children.length > 0) {
+      autoExpandSearchResults(node.children);
+    }
+  });
+}
+
+/**
+ * 防抖搜索定时器
+ */
+let searchTimer: null | ReturnType<typeof setTimeout> = null;
+
+/**
+ * 监听搜索文本变化，执行后端搜索
+ */
+watch(searchKeyword, (newVal) => {
+  // 清除之前的定时器
+  if (searchTimer) {
+    clearTimeout(searchTimer);
+  }
+
+  if (!newVal.trim()) {
+    searchResults.value = [];
+    isSearching.value = false;
+    return;
+  }
+
+  // 设置新的防抖定时器
+  searchTimer = setTimeout(async () => {
+    isSearching.value = true;
+    try {
+      const results = await searchDeptApi(newVal);
+      searchResults.value = results || [];
+      // 自动展开搜索结果中的所有节点，显示完整路径
+      if (results && results.length > 0) {
+        autoExpandSearchResults(results);
+      }
+    } catch (error) {
+      console.error($t('dept.searchFailed'), error);
+      searchResults.value = [];
+    } finally {
+      isSearching.value = false;
+    }
+  }, 300);
+});
+
+/**
+ * 过滤树数据：如果有搜索结果则使用搜索结果，否则使用完整树
+ */
+const filteredTreeData = computed(() => {
+  if (searchKeyword.value.trim() && searchResults.value.length > 0) {
+    return searchResults.value;
+  }
+  return treeData.value;
+});
+
+/**
+ * 渲染树形列表
+ */
+const renderTreeList = (nodes: DeptTreeNode[], level: number = 0): any[] => {
+  return nodes.flatMap((node) => [
+    { node, level, isNode: true },
+    ...(expandedDeptIds.value.has(node.id) &&
+    node.children &&
+    node.children.length > 0
+      ? renderTreeList(node.children, level + 1)
+      : []),
+  ]);
+};
+
+const flattenedTree = computed(() => renderTreeList(filteredTreeData.value));
+
+onMounted(() => {
+  fetchDeptList();
+});
+</script>
+
+<template>
+  <ElCard
+    style="border: none"
+    class="mr-[10px] flex h-full flex-col"
+    shadow="never"
+  >
+    <DeptFormModal ref="deptFormModalRef" @success="onDeptFormSuccess" />
+
+    <!-- 搜索和添加区域 -->
+    <div class="mb-4 flex gap-2">
+      <ElInput
+        v-model="searchKeyword"
+        :placeholder="$t('common.search')"
+        clearable
+        :prefix-icon="Search"
+      />
+      <ElButton :icon="Plus" @click="onAddDept" />
+    </div>
+
+    <!-- 部门树列表 -->
+    <div class="flex-1 overflow-auto">
+      <ElSkeleton :loading="loading || isSearching" animated :count="8">
+        <template #template>
+          <div class="space-y-1">
+            <div v-for="i in 8" :key="i" class="dept-skeleton-item">
+              <ElSkeletonItem
+                variant="text"
+                style="width: 100%; height: 40px"
+              />
+            </div>
+          </div>
+        </template>
+        <template #default>
+          <div class="space-y-2">
+            <div
+              v-for="(item, index) in flattenedTree"
+              :key="`${item.node.id}-${index}`"
+              class="dept-item flex cursor-pointer items-center rounded-[8px] px-3 py-2 transition-colors"
+              :class="[
+                selectedDeptId === item.node.id
+                  ? 'bg-primary/15 dark:bg-accent text-primary'
+                  : 'hover:bg-[var(--el-fill-color-light)]',
+              ]"
+              :style="{ paddingLeft: `calc(12px + ${item.level * 20}px)` }"
+              @mouseenter="hoveredDeptId = item.node.id"
+              @mouseleave="hoveredDeptId = undefined"
+              @click="onDeptSelect(item.node)"
+            >
+              <div class="flex min-w-0 flex-1 items-center gap-1">
+                <!-- 展开/折叠按钮 -->
+                <div
+                  v-if="hasChildren(item.node)"
+                  class="hover:text-primary flex w-5 flex-shrink-0 cursor-pointer items-center justify-center"
+                  @click.stop="toggleNodeExpanded(item.node)"
+                >
+                  <Loader
+                    v-if="loadingDeptIds.has(item.node.id)"
+                    class="size-4 animate-spin"
+                  />
+                  <IconifyIcon
+                    v-else
+                    icon="ep:caret-right"
+                    class="size-4 transform transition-transform"
+                    :class="
+                      expandedDeptIds.has(item.node.id) ? 'rotate-90' : ''
+                    "
+                  />
+                </div>
+                <div v-else class="w-5 flex-shrink-0"></div>
+                <!-- 部门名称 -->
+                <div class="truncate text-sm" :title="item.node.name">
+                  {{ item.node.name }}
+                </div>
+              </div>
+
+              <!-- 操作图标 -->
+              <div
+                v-if="hoveredDeptId === item.node.id"
+                class="ml-2 flex flex-shrink-0 gap-0.5"
+                @click.stop
+              >
+                <ElTooltip :content="$t('dept.addChildDept')" placement="top">
+                  <ElButton
+                    type="primary"
+                    text
+                    size="small"
+                    circle
+                    @click="onAddChildDept(item.node)"
+                  >
+                    <IconifyIcon icon="ep:plus" class="size-4" />
+                  </ElButton>
+                </ElTooltip>
+                <ElTooltip :content="$t('dept.edit')" placement="top">
+                  <ElButton
+                    type="primary"
+                    text
+                    size="small"
+                    circle
+                    style="margin-left: 0"
+                    @click="onEditDept(item.node)"
+                  >
+                    <IconifyIcon icon="ep:edit" class="size-4" />
+                  </ElButton>
+                </ElTooltip>
+                <ElButton
+                  type="danger"
+                  text
+                  size="small"
+                  circle
+                  style="margin-left: 0"
+                  :title="$t('common.delete')"
+                  @click="onDeleteDept(item.node)"
+                >
+                  <IconifyIcon icon="ep:delete" class="size-4" />
+                </ElButton>
+              </div>
+            </div>
+          </div>
+        </template>
+      </ElSkeleton>
+    </div>
+  </ElCard>
+</template>
+
+<style scoped>
+/* 输入框前置图标样式 */
+:deep(.el-input__icon) {
+  cursor: pointer;
+}
+
+/* 文本按钮样式 */
+:deep(.el-button--text) {
+  padding: 0 4px;
+}
+
+/* 让 ElCard 的 body 参与 flex 布局，使列表区域可滚动 */
+:deep(.el-card__body) {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 骨架屏样式 */
+.dept-skeleton-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 12px;
+}
+
+/* 部门项样式 */
+.dept-item {
+  min-height: 40px;
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/dept/modules/user-form.vue b/web/apps/web-ele/src/views/_core/dept/modules/user-form.vue
new file mode 100644
index 0000000..826c5d1
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/dept/modules/user-form.vue
@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { DeptUser } from '#/api/core/dept';
+
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '#/adapter/form';
+import { ZqDialog } from '#/components/zq-dialog';
+
+const emit = defineEmits<{ success: [] }>();
+const userData = ref<DeptUser>();
+const visible = ref(false);
+const formSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'username',
+    label: $t('system.user.account'),
+    componentProps: { disabled: true },
+  },
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: $t('system.user.userName'),
+    componentProps: { disabled: true },
+  },
+  {
+    component: 'Input',
+    fieldName: 'email',
+    label: $t('system.user.email'),
+    componentProps: { disabled: true },
+  },
+  {
+    component: 'Input',
+    fieldName: 'mobile',
+    label: $t('system.user.mobile'),
+    componentProps: { disabled: true },
+  },
+];
+
+const [Form, formApi] = useVbenForm({
+  layout: 'vertical',
+  schema: formSchema,
+  showDefaultActions: false,
+});
+
+const getModalTitle = computed(() =>
+  $t('ui.actionTitle.view', [$t('system.user.name')]),
+);
+
+function onConfirm() {
+  visible.value = false;
+  emit('success');
+}
+
+function open(data: DeptUser) {
+  visible.value = true;
+  userData.value = data;
+  formApi.setValues(userData.value);
+}
+
+defineExpose({
+  open,
+});
+</script>
+
+<template>
+  <ZqDialog v-model="visible" :title="getModalTitle" @confirm="onConfirm">
+    <Form class="mx-4" />
+  </ZqDialog>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/dict/data.ts b/web/apps/web-ele/src/views/_core/dict/data.ts
new file mode 100644
index 0000000..06dfb90
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/dict/data.ts
@@ -0,0 +1,194 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { DictItem } from '#/api/core/dict';
+
+import { $t } from '@vben/locales';
+
+import { z } from '#/adapter/form';
+
+/**
+ * 获取字典搜索表单的字段配置
+ */
+export function useDictSearchFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: $t('dict.dictName'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: $t('dict.dictCode'),
+    },
+  ];
+}
+
+/**
+ * 获取字典表单配置
+ */
+export function useDictFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: $t('dict.dictName'),
+      rules: z
+        .string()
+        .min(2, $t('ui.formRules.minLength', [$t('dict.dictName'), 2]))
+        .max(100, $t('ui.formRules.maxLength', [$t('dict.dictName'), 100])),
+    },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: $t('dict.dictCode'),
+      rules: z
+        .string()
+        .min(2, $t('ui.formRules.minLength', [$t('dict.dictCode'), 2]))
+        .max(100, $t('ui.formRules.maxLength', [$t('dict.dictCode'), 100]))
+        .regex(/^\w+$/, $t('dict.codeFormatError')),
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: $t('common.enabled'), value: true },
+          { label: $t('common.disabled'), value: false },
+        ],
+      },
+      defaultValue: true,
+      fieldName: 'status',
+      label: $t('dict.status'),
+    },
+  ];
+}
+
+/**
+ * 获取字典项搜索表单配置
+ */
+export function useDictItemSearchFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'label',
+      label: $t('dict.itemLabel'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'value',
+      label: $t('dict.itemValue'),
+    },
+  ];
+}
+
+/**
+ * 获取字典项表单配置
+ */
+export function useDictItemFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'label',
+      label: $t('dict.itemLabel'),
+      rules: z
+        .string()
+        .min(1, $t('ui.formRules.required', [$t('dict.itemLabel')]))
+        .max(100, $t('ui.formRules.maxLength', [$t('dict.itemLabel'), 100])),
+    },
+    {
+      component: 'Input',
+      fieldName: 'value',
+      label: $t('dict.itemValue'),
+      rules: z
+        .string()
+        .min(1, $t('ui.formRules.required', [$t('dict.itemValue')]))
+        .max(100, $t('ui.formRules.maxLength', [$t('dict.itemValue'), 100])),
+    },
+    // {
+    //   component: 'Input',
+    //   fieldName: 'icon',
+    //   label: $t('dict.itemIcon'),
+    //   rules: z
+    //     .string()
+    //     .max(100, $t('ui.formRules.maxLength', [$t('dict.itemIcon'), 100]))
+    //     .optional(),
+    // },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: $t('dict.remarkPlaceholder'),
+        rows: 3,
+      },
+      fieldName: 'remark',
+      label: $t('dict.remark'),
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: $t('common.enabled'), value: true },
+          { label: $t('common.disabled'), value: false },
+        ],
+      },
+      defaultValue: true,
+      fieldName: 'status',
+      label: $t('dict.status'),
+    },
+  ];
+}
+
+/**
+ * 获取字典项表格列配置
+ */
+export function useDictItemColumns(
+  onActionClick?: OnActionClickFn<DictItem>,
+): VxeTableGridOptions<DictItem>['columns'] {
+  return [
+    {
+      field: 'label',
+      title: $t('dict.itemLabel'),
+      minWidth: 120,
+    },
+    {
+      field: 'value',
+      title: $t('dict.itemValue'),
+      minWidth: 120,
+    },
+    // {
+    //   field: 'icon',
+    //   title: $t('dict.itemIcon'),
+    //   minWidth: 100,
+    // },
+    {
+      field: 'status',
+      title: $t('dict.status'),
+      minWidth: 80,
+      cellRender: {
+        name: 'CellStatus',
+        attrs: {
+          onClick: onActionClick,
+        },
+      },
+    },
+    {
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'label',
+          nameTitle: $t('dict.itemLabel'),
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: ['edit', 'delete'],
+      },
+      field: 'operation',
+      fixed: 'right',
+      headerAlign: 'center',
+      showOverflow: false,
+      title: $t('system.user.operation'),
+      minWidth: 150,
+    },
+  ];
+}
diff --git a/web/apps/web-ele/src/views/_core/dict/index.vue b/web/apps/web-ele/src/views/_core/dict/index.vue
new file mode 100644
index 0000000..043520d
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/dict/index.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { FuPage } from '#/components/fu-page';
+
+import DictItemList from './modules/dict-item-list.vue';
+import DictList from './modules/dict-list.vue';
+
+defineOptions({ name: 'SystemDict' });
+
+const currentDictId = ref<string>();
+
+/**
+ * 字典选择事件
+ */
+function onDictSelect(dictId: string | undefined) {
+  currentDictId.value = dictId;
+}
+</script>
+
+<template>
+  <FuPage
+    auto-content-height
+    :left-padding="false"
+    :right-padding="false"
+    :left-width="250"
+  >
+    <template #left>
+      <div class="h-full px-4 py-4">
+        <DictList @select="onDictSelect" />
+      </div>
+    </template>
+    <template #right>
+      <div class="h-full px-2 py-2">
+        <DictItemList :dict-id="currentDictId" />
+      </div>
+    </template>
+  </FuPage>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/dict/modules/dict-form-modal.vue b/web/apps/web-ele/src/views/_core/dict/modules/dict-form-modal.vue
new file mode 100644
index 0000000..77aa356
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/dict/modules/dict-form-modal.vue
@@ -0,0 +1,99 @@
+<script lang="ts" setup>
+import type { Dict } from '#/api/core/dict';
+
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { ElButton, ElSwitch } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createDictApi, updateDictApi } from '#/api/core/dict';
+import { ZqDialog } from '#/components/zq-dialog';
+import { useAppContextStore } from '#/store/app-context';
+
+import { useDictFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const appContextStore = useAppContextStore();
+const isGlobal = ref(false);
+
+const formData = ref<Dict>();
+const visible = ref(false);
+const confirmLoading = ref(false);
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', [$t('dict.name')])
+    : $t('ui.actionTitle.create', [$t('dict.name')]);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'vertical',
+  schema: useDictFormSchema(),
+  showDefaultActions: false,
+});
+
+function resetForm() {
+  formApi.resetForm();
+  formApi.setValues(formData.value || {});
+}
+
+async function onSubmit() {
+  const { valid } = await formApi.validate();
+  if (valid) {
+    confirmLoading.value = true;
+    const data = await formApi.getValues();
+    try {
+      if (!formData.value?.id) {
+        data.application_id = appContextStore.currentApp?.id;
+      }
+      data.is_global = isGlobal.value;
+      await (formData.value?.id
+        ? updateDictApi(formData.value.id, data)
+        : createDictApi(data));
+      visible.value = false;
+      emit('success');
+    } finally {
+      confirmLoading.value = false;
+    }
+  }
+}
+
+function open(data?: Dict) {
+  visible.value = true;
+  if (data) {
+    formData.value = data;
+    isGlobal.value = data.is_global ?? false;
+    formApi.setValues(formData.value);
+  } else {
+    formData.value = undefined;
+    isGlobal.value = false;
+    formApi.resetForm();
+  }
+}
+
+defineExpose({
+  open,
+});
+</script>
+
+<template>
+  <ZqDialog
+    v-model="visible"
+    :title="getTitle"
+    :confirm-loading="confirmLoading"
+    @confirm="onSubmit"
+    width="500px"
+  >
+    <Form class="mx-4" />
+    <div class="mx-4 mb-2 flex items-center gap-2">
+      <span class="text-sm">{{ $t('dict.isGlobal') }}</span>
+      <ElSwitch v-model="isGlobal" />
+    </div>
+    <template #footer-left>
+      <ElButton type="primary" @click="resetForm">
+        {{ $t('common.reset') }}
+      </ElButton>
+    </template>
+  </ZqDialog>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/dict/modules/dict-item-form-modal.vue b/web/apps/web-ele/src/views/_core/dict/modules/dict-item-form-modal.vue
new file mode 100644
index 0000000..5cab3ee
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/dict/modules/dict-item-form-modal.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { DictItem } from '#/api/core/dict';
+
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createDictItemApi, updateDictItemApi } from '#/api/core/dict';
+import { ZqDialog } from '#/components/zq-dialog';
+
+import { useDictItemFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<DictItem>();
+const dictId = ref<string>();
+const visible = ref(false);
+const confirmLoading = ref(false);
+
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', [$t('dict.itemName')])
+    : $t('ui.actionTitle.create', [$t('dict.itemName')]);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'vertical',
+  schema: useDictItemFormSchema(),
+  showDefaultActions: false,
+});
+
+function resetForm() {
+  formApi.resetForm();
+  formApi.setValues(formData.value || {});
+}
+
+async function onSubmit() {
+  const { valid } = await formApi.validate();
+  if (valid) {
+    confirmLoading.value = true;
+    const data = await formApi.getValues();
+    try {
+      const payload = {
+        ...data,
+        dict_id: dictId.value,
+      };
+      await (formData.value?.id
+        ? updateDictItemApi(formData.value.id, payload)
+        : createDictItemApi(payload));
+      visible.value = false;
+      emit('success');
+    } finally {
+      confirmLoading.value = false;
+    }
+  }
+}
+
+function open(data?: any) {
+  visible.value = true;
+  if (data?.id) {
+    formData.value = data;
+    dictId.value = data.dict_id;
+    formApi.setValues(formData.value);
+  } else {
+    formData.value = undefined;
+    dictId.value = data?.dictId;
+    formApi.resetForm();
+  }
+}
+
+defineExpose({
+  open,
+});
+</script>
+
+<template>
+  <ZqDialog
+    v-model="visible"
+    :title="getTitle"
+    :confirm-loading="confirmLoading"
+    @confirm="onSubmit"
+  >
+    <Form class="mx-4" />
+    <template #footer-left>
+      <ElButton type="primary" @click="resetForm">
+        {{ $t('common.reset') }}
+      </ElButton>
+    </template>
+  </ZqDialog>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/dict/modules/dict-item-list.vue b/web/apps/web-ele/src/views/_core/dict/modules/dict-item-list.vue
new file mode 100644
index 0000000..23cce2f
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/dict/modules/dict-item-list.vue
@@ -0,0 +1,683 @@
+<script lang="ts" setup>
+import type { DictItem } from '#/api/core/dict';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { IconifyIcon, Plus, Search } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElCard,
+  ElEmpty,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+  ElScrollbar,
+  ElSkeleton,
+  ElSkeletonItem,
+  ElTooltip,
+} from 'element-plus';
+
+import {
+  createDictItemApi,
+  deleteDictItemApi,
+  getDictItemListApi,
+  updateDictItemApi,
+} from '#/api/core/dict';
+
+const props = defineProps<{
+  dictId?: string;
+}>();
+const dictItemList = ref<DictItem[]>([]);
+const loading = ref(false);
+const isLoadingMore = ref(false);
+const savingNewItemId = ref<null | string>(null);
+const savingEditItem = ref(false);
+const searchKeyword = ref<string>('');
+const newItemList = ref<
+  Array<{
+    icon: string;
+    id: string;
+    label: string;
+    remark: string;
+    sort: number;
+    status: boolean;
+    value: string;
+  }>
+>([]);
+const editingItemId = ref<null | string>(null);
+const currentPage = ref(1);
+const pageSize = ref(20);
+const totalItems = ref(0);
+const hasLoadedMore = ref(false);
+let newItemCounter = 0;
+const editingFormData = ref<Partial<DictItem>>({});
+
+// 是否还有更多数据
+const hasMoreData = computed(() => {
+  const totalLoaded = currentPage.value * pageSize.value;
+  return totalLoaded < totalItems.value;
+});
+
+// 计算过滤后的字典项列表
+const filteredDictItemList = computed(() => {
+  if (!searchKeyword.value.trim()) {
+    return dictItemList.value;
+  }
+
+  const keyword = searchKeyword.value.toLowerCase();
+  return dictItemList.value.filter(
+    (item) =>
+      item.label?.toLowerCase().includes(keyword) ||
+      false ||
+      item.value?.toLowerCase().includes(keyword) ||
+      false,
+  );
+});
+
+async function fetchDictItemList(isLoadMore = false) {
+  if (!props.dictId) {
+    dictItemList.value = [];
+    return;
+  }
+
+  if (isLoadMore) {
+    isLoadingMore.value = true;
+  } else {
+    loading.value = true;
+    currentPage.value = 1;
+    hasLoadedMore.value = false;
+  }
+
+  try {
+    const response = await getDictItemListApi({
+      page: currentPage.value,
+      pageSize: pageSize.value,
+      dict_id: props.dictId,
+    });
+
+    dictItemList.value =
+      currentPage.value === 1
+        ? response.items || []
+        : [...dictItemList.value, ...(response.items || [])];
+    totalItems.value = response.total || 0;
+  } finally {
+    if (isLoadMore) {
+      isLoadingMore.value = false;
+    } else {
+      loading.value = false;
+    }
+  }
+}
+
+/**
+ * 重置并重新加载
+ */
+function reload() {
+  currentPage.value = 1;
+  hasLoadedMore.value = false;
+  fetchDictItemList();
+}
+
+/**
+ * 处理滚动到底部
+ */
+async function handleScrollToBottom() {
+  if (isLoadingMore.value || !hasMoreData.value || loading.value) {
+    return;
+  }
+
+  hasLoadedMore.value = true;
+  currentPage.value += 1;
+  await fetchDictItemList(true);
+}
+
+/**
+ * 打开添加字典项输入行
+ */
+function onAddDictItem() {
+  // 自动计算排序值：最大排序值 + 1
+  const existingSorts = [
+    ...dictItemList.value.map((item) => item.sort || 0),
+    ...newItemList.value.map((item) => item.sort || 0),
+  ];
+  const maxSort = existingSorts.length > 0 ? Math.max(...existingSorts) : 0;
+  newItemCounter++;
+  newItemList.value.unshift({
+    id: `new_${Date.now()}_${newItemCounter}`,
+    label: '',
+    value: '',
+    icon: '',
+    sort: maxSort + 1,
+    status: true,
+    remark: '',
+  });
+
+  // 滚动到顶部
+  nextTick(() => {
+    const scrollbar = document.querySelector('.dict-item-scrollbar');
+    if (scrollbar) {
+      const scrollElement = scrollbar.querySelector('.el-scrollbar__wrap');
+      if (scrollElement) {
+        scrollElement.scrollTop = 0;
+      }
+    }
+  });
+}
+
+/**
+ * 保存新字典项
+ */
+async function onSaveNewItem(newItem: {
+  icon: string;
+  id: string;
+  label: string;
+  remark: string;
+  sort: number;
+  status: boolean;
+  value: string;
+}) {
+  if (!newItem.label || !newItem.value) {
+    ElMessage.warning(
+      $t('ui.formRules.required', [
+        `${$t('dict.itemLabel')}/${$t('dict.itemValue')}`,
+      ]),
+    );
+    return;
+  }
+
+  try {
+    savingNewItemId.value = newItem.id;
+    await createDictItemApi({
+      dict_id: props.dictId!,
+      label: newItem.label,
+      value: newItem.value,
+      icon: newItem.icon,
+      sort: newItem.sort,
+      status: newItem.status,
+      remark: newItem.remark,
+    });
+    ElMessage.success(
+      $t('ui.actionMessage.createSuccess', [$t('dict.itemName')]),
+    );
+    newItemList.value = newItemList.value.filter((i) => i.id !== newItem.id);
+    await reload();
+  } catch {
+    ElMessage.error($t('ui.actionMessage.createError'));
+  } finally {
+    savingNewItemId.value = null;
+  }
+}
+
+/**
+ * 取消新增
+ */
+function onCancelNewItem(newItemId: string) {
+  newItemList.value = newItemList.value.filter((i) => i.id !== newItemId);
+}
+
+/**
+ * 打开编辑字典项（在当前行编辑）
+ */
+function onEditDictItem(item: DictItem) {
+  editingItemId.value = item.id;
+  editingFormData.value = { ...item };
+}
+
+/**
+ * 保存编辑的字典项
+ */
+async function onSaveEditItem() {
+  if (!editingFormData.value.label || !editingFormData.value.value) {
+    ElMessage.warning(
+      $t('ui.formRules.required', [
+        `${$t('dict.itemLabel')}/${$t('dict.itemValue')}`,
+      ]),
+    );
+    return;
+  }
+
+  try {
+    savingEditItem.value = true;
+    await updateDictItemApi(editingItemId.value!, editingFormData.value);
+    ElMessage.success(
+      $t('ui.actionMessage.updateSuccess', [$t('dict.itemName')]),
+    );
+    editingItemId.value = null;
+    editingFormData.value = {};
+    await reload();
+  } catch {
+    ElMessage.error($t('ui.actionMessage.updateError'));
+  } finally {
+    savingEditItem.value = false;
+  }
+}
+
+/**
+ * 取消编辑
+ */
+function onCancelEdit() {
+  editingItemId.value = null;
+  editingFormData.value = {};
+}
+
+/**
+ * 删除字典项
+ */
+async function onDeleteDictItem(item: DictItem) {
+  ElMessageBox.confirm(
+    $t('ui.actionMessage.deleteConfirm', [item.label || item.value]),
+    $t('common.delete'),
+    {
+      confirmButtonText: $t('common.confirm'),
+      cancelButtonText: $t('common.cancel'),
+      type: 'warning',
+      showClose: false,
+    },
+  )
+    .then(async () => {
+      try {
+        await deleteDictItemApi(item.id);
+        ElMessage.success(
+          $t('ui.actionMessage.deleteSuccess', [item.label || item.value]),
+        );
+        await reload();
+      } catch {
+        ElMessage.error($t('ui.actionMessage.deleteError'));
+      }
+    })
+    .catch(() => {
+      // 用户取消了操作
+    });
+}
+
+// 监听 dictId 变化
+watch(
+  () => props.dictId,
+  () => {
+    reload();
+  },
+);
+
+// 监听搜索文本变化
+watch(searchKeyword, () => {
+  reload();
+});
+
+onMounted(() => {
+  reload();
+});
+</script>
+
+<template>
+  <ElCard
+    shadow="never"
+    style="border: none"
+    class="flex h-full flex-col"
+    :body-style="{
+      display: 'flex',
+      flexDirection: 'column',
+      flex: 1,
+      padding: '0',
+      overflow: 'hidden',
+      minHeight: 0,
+    }"
+  >
+    <template #header>
+      <div class="flex w-full items-center justify-between">
+        <span>{{ $t('dict.itemName') }}</span>
+        <div class="flex items-center gap-2">
+          <ElInput
+            v-model="searchKeyword"
+            :placeholder="$t('common.search')"
+            clearable
+            :prefix-icon="Search"
+            :disabled="!dictId"
+            class="w-40"
+          />
+          <ElTooltip :content="$t('common.add')" placement="top">
+            <ElButton :icon="Plus" :disabled="!dictId" @click="onAddDictItem" />
+          </ElTooltip>
+        </div>
+      </div>
+    </template>
+
+    <!-- 骨架屏加载状态 -->
+    <div v-if="dictId && loading" class="p-4">
+      <ElSkeleton :rows="10" animated>
+        <template #template>
+          <div class="space-y-2">
+            <div
+              v-for="i in 10"
+              :key="i"
+              class="rounded-lg border border-gray-200 bg-white p-4"
+            >
+              <div class="flex items-end gap-4">
+                <div class="flex flex-1 flex-col">
+                  <ElSkeletonItem
+                    variant="text"
+                    style="width: 60px; height: 16px; margin-bottom: 8px"
+                  />
+                  <ElSkeletonItem
+                    variant="button"
+                    style="width: 100%; height: 32px"
+                  />
+                </div>
+                <div class="flex flex-1 flex-col">
+                  <ElSkeletonItem
+                    variant="text"
+                    style="width: 60px; height: 16px; margin-bottom: 8px"
+                  />
+                  <ElSkeletonItem
+                    variant="button"
+                    style="width: 100%; height: 32px"
+                  />
+                </div>
+                <div class="flex w-20 flex-col">
+                  <ElSkeletonItem
+                    variant="text"
+                    style="width: 40px; height: 16px; margin-bottom: 8px"
+                  />
+                  <ElSkeletonItem
+                    variant="button"
+                    style="width: 100%; height: 32px"
+                  />
+                </div>
+                <div class="flex flex-shrink-0 items-center justify-end gap-2">
+                  <ElSkeletonItem
+                    variant="circle"
+                    style="width: 32px; height: 32px"
+                  />
+                  <ElSkeletonItem
+                    variant="circle"
+                    style="width: 32px; height: 32px"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </ElSkeleton>
+    </div>
+
+    <!-- 空状态 - 居中显示 -->
+    <div
+      v-else-if="
+        dictId &&
+        filteredDictItemList.length === 0 &&
+        newItemList.length === 0 &&
+        !loading
+      "
+      class="flex h-full items-center justify-center"
+    >
+      <ElEmpty :description="$t('dict.noData')" />
+    </div>
+
+    <!-- 字典项列表 - 卡片式布局 -->
+    <ElScrollbar
+      v-else-if="dictId"
+      class="dict-item-scrollbar"
+      :distance="40"
+      @end-reached="handleScrollToBottom"
+    >
+      <div class="p-4">
+        <div class="space-y-2">
+          <!-- 新增行 -->
+          <div
+            v-for="newItem in newItemList"
+            :key="newItem.id"
+            class="border-primary rounded-lg border bg-blue-50 p-4"
+          >
+            <!-- 标签、值、排序和操作在同一行 -->
+            <div class="flex items-end gap-4">
+              <!-- 标签 -->
+              <div class="flex flex-1 flex-col">
+                <label class="mb-1 text-xs font-medium text-gray-600">
+                  {{ $t('dict.itemLabel') }} *
+                </label>
+                <ElInput
+                  v-model="newItem.label"
+                  :placeholder="$t('dict.itemLabel')"
+                  class="text-sm"
+                />
+              </div>
+
+              <!-- 值 -->
+              <div class="flex flex-1 flex-col">
+                <label class="mb-1 text-xs font-medium text-gray-600">
+                  {{ $t('dict.itemValue') }} *
+                </label>
+                <ElInput
+                  v-model="newItem.value"
+                  :placeholder="$t('dict.itemValue')"
+                  class="text-sm"
+                />
+              </div>
+
+              <!-- 排序 -->
+              <div class="flex w-20 flex-col">
+                <label class="mb-1 text-xs font-medium text-gray-600">
+                  {{ $t('dict.sort') }}
+                </label>
+                <ElInput
+                  v-model.number="newItem.sort"
+                  type="number"
+                  :placeholder="$t('dict.sort')"
+                  class="text-sm"
+                />
+              </div>
+
+              <!-- 操作按钮 -->
+              <div class="flex flex-shrink-0 items-center justify-end gap-2">
+                <ElTooltip :content="$t('common.save')" placement="top">
+                  <ElButton
+                    type="success"
+                    text
+                    size="small"
+                    :loading="savingNewItemId === newItem.id"
+                    @click="onSaveNewItem(newItem)"
+                  >
+                    <IconifyIcon
+                      v-if="savingNewItemId !== newItem.id"
+                      icon="ep:check"
+                      class="size-4"
+                    />
+                  </ElButton>
+                </ElTooltip>
+                <ElTooltip :content="$t('common.cancel')" placement="top">
+                  <ElButton
+                    type="warning"
+                    text
+                    size="small"
+                    :disabled="savingNewItemId === newItem.id"
+                    @click="onCancelNewItem(newItem.id)"
+                  >
+                    <IconifyIcon icon="ep:close" class="size-4" />
+                  </ElButton>
+                </ElTooltip>
+              </div>
+            </div>
+          </div>
+
+          <!-- 现有项列表 -->
+          <div
+            v-for="item in filteredDictItemList"
+            :key="item.id"
+            class="rounded-lg border bg-white p-4 transition-all"
+            :class="[
+              editingItemId === item.id
+                ? 'border-primary bg-blue-50'
+                : 'hover:border-primary border-gray-200 hover:shadow-md',
+            ]"
+          >
+            <!-- 标签、值、排序和操作在同一行 -->
+            <div class="flex items-end gap-4">
+              <!-- 标签 -->
+              <div class="flex flex-1 flex-col">
+                <label class="mb-1 text-xs font-medium text-gray-600">
+                  {{ $t('dict.itemLabel') }}
+                </label>
+                <ElInput
+                  v-if="editingItemId === item.id"
+                  v-model="editingFormData.label"
+                  :placeholder="$t('dict.itemLabel')"
+                  class="text-sm"
+                />
+                <ElInput
+                  v-else
+                  :model-value="item.label"
+                  :placeholder="$t('dict.itemLabel')"
+                  disabled
+                  class="text-sm"
+                />
+              </div>
+
+              <!-- 值 -->
+              <div class="flex flex-1 flex-col">
+                <label class="mb-1 text-xs font-medium text-gray-600">
+                  {{ $t('dict.itemValue') }}
+                </label>
+                <ElInput
+                  v-if="editingItemId === item.id"
+                  v-model="editingFormData.value"
+                  :placeholder="$t('dict.itemValue')"
+                  class="text-sm"
+                />
+                <ElInput
+                  v-else
+                  :model-value="item.value"
+                  :placeholder="$t('dict.itemValue')"
+                  disabled
+                  class="text-sm"
+                />
+              </div>
+
+              <!-- 排序 -->
+              <div class="flex w-20 flex-col">
+                <label class="mb-1 text-xs font-medium text-gray-600">
+                  {{ $t('dict.sort') }}
+                </label>
+                <ElInput
+                  v-if="editingItemId === item.id"
+                  v-model.number="editingFormData.sort"
+                  type="number"
+                  class="text-sm"
+                />
+                <ElInput
+                  v-else
+                  :model-value="item.sort"
+                  type="number"
+                  disabled
+                  class="text-sm"
+                />
+              </div>
+
+              <!-- 操作按钮 -->
+              <div class="flex flex-shrink-0 items-center justify-end">
+                <template v-if="editingItemId === item.id">
+                  <!-- 编辑状态下的保存和取消 -->
+                  <ElTooltip :content="$t('common.save')" placement="top">
+                    <ElButton
+                      type="success"
+                      text
+                      size="small"
+                      :loading="savingEditItem"
+                      @click="onSaveEditItem"
+                    >
+                      <IconifyIcon
+                        v-if="!savingEditItem"
+                        icon="ep:check"
+                        class="size-4"
+                      />
+                    </ElButton>
+                  </ElTooltip>
+                  <ElTooltip :content="$t('common.cancel')" placement="top">
+                    <ElButton
+                      type="warning"
+                      text
+                      size="small"
+                      :disabled="savingEditItem"
+                      @click="onCancelEdit"
+                    >
+                      <IconifyIcon icon="ep:close" class="size-4" />
+                    </ElButton>
+                  </ElTooltip>
+                </template>
+                <template v-else>
+                  <!-- 正常状态下的编辑和删除 -->
+                  <ElTooltip :content="$t('dict.edit')" placement="top">
+                    <ElButton
+                      type="primary"
+                      text
+                      size="small"
+                      @click="onEditDictItem(item)"
+                    >
+                      <IconifyIcon icon="ep:edit" class="size-4" />
+                    </ElButton>
+                  </ElTooltip>
+                  <ElTooltip :content="$t('common.delete')" placement="top">
+                    <ElButton
+                      type="danger"
+                      text
+                      size="small"
+                      @click="onDeleteDictItem(item)"
+                    >
+                      <IconifyIcon icon="ep:delete" class="size-4" />
+                    </ElButton>
+                  </ElTooltip>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 加载更多提示 -->
+        <div v-if="isLoadingMore" class="flex items-center justify-center py-4">
+          <div class="loading-spinner"></div>
+          <span class="ml-2 text-sm text-gray-500">{{
+            $t('common.loading')
+          }}</span>
+        </div>
+
+        <!-- 无更多数据提示 -->
+        <div
+          v-else-if="
+            filteredDictItemList.length > 0 && !hasMoreData && hasLoadedMore
+          "
+          class="py-4 text-center text-sm text-gray-500"
+        >
+          {{ $t('common.noMore') || 'No more data' }}
+        </div>
+      </div>
+    </ElScrollbar>
+
+    <!-- 未选择字典时的空状态 -->
+    <div v-else class="flex h-full items-center justify-center">
+      <ElEmpty :description="$t('dict.selectDictFirst')" />
+    </div>
+  </ElCard>
+</template>
+
+<style scoped>
+.dict-item-scrollbar {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.loading-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--el-color-primary);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/dict/modules/dict-list.vue b/web/apps/web-ele/src/views/_core/dict/modules/dict-list.vue
new file mode 100644
index 0000000..a6d999e
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/dict/modules/dict-list.vue
@@ -0,0 +1,297 @@
+<script lang="ts" setup>
+import type { Dict } from '#/api/core/dict';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { IconifyIcon, Plus, Search } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElCard,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+  ElSkeleton,
+  ElSkeletonItem,
+  ElTag,
+  ElTooltip,
+} from 'element-plus';
+
+import { deleteDictApi, getDictListApi } from '#/api/core/dict';
+import { useAppContextStore } from '#/store/app-context';
+
+import DictFormModal from './dict-form-modal.vue';
+
+const emit = defineEmits<{
+  select: [dictId: string | undefined];
+}>();
+
+const appContextStore = useAppContextStore();
+
+const dictList = ref<Dict[]>([]);
+const loading = ref(false);
+const selectedDictId = ref<string>();
+const searchKeyword = ref<string>('');
+const hoveredDictId = ref<string>();
+const dictFormModalRef = ref<InstanceType<typeof DictFormModal>>();
+
+// 计算过滤后的字典列表
+const filteredDictList = computed(() => {
+  if (!searchKeyword.value.trim()) {
+    return dictList.value;
+  }
+
+  const keyword = searchKeyword.value.toLowerCase();
+  return dictList.value.filter(
+    (dict) =>
+      dict.name.toLowerCase().includes(keyword) ||
+      dict.code.toLowerCase().includes(keyword),
+  );
+});
+
+async function fetchDictList() {
+  try {
+    loading.value = true;
+    const response = await getDictListApi({
+      page: 1,
+      pageSize: 100,
+      applicationId: appContextStore.currentApp?.id,
+    });
+    dictList.value = response.items || [];
+
+    // 自动选中第一个字典
+    if (dictList.value.length > 0 && !selectedDictId.value) {
+      const firstDict = dictList.value.at(0);
+      if (firstDict) {
+        selectedDictId.value = firstDict.id;
+        emit('select', firstDict.id);
+      }
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * 处理字典选择
+ */
+function onDictSelect(dictId: string) {
+  selectedDictId.value = dictId;
+  emit('select', dictId);
+}
+
+/**
+ * 打开添加字典对话框
+ */
+function onAddDict() {
+  dictFormModalRef.value?.open();
+}
+
+/**
+ * 打开编辑字典对话框
+ */
+function onEditDict(dict: Dict, e?: Event) {
+  e?.stopPropagation();
+  dictFormModalRef.value?.open(dict);
+}
+
+/**
+ * 删除字典
+ */
+async function onDeleteDict(dict: Dict, e?: Event) {
+  e?.stopPropagation();
+
+  ElMessageBox.confirm(
+    $t('ui.actionMessage.deleteConfirm', [dict.name]),
+    $t('common.delete'),
+    {
+      confirmButtonText: $t('common.confirm'),
+      cancelButtonText: $t('common.cancel'),
+      type: 'warning',
+      showClose: false,
+    },
+  )
+    .then(async () => {
+      try {
+        await deleteDictApi(dict.id);
+        ElMessage.success($t('ui.actionMessage.deleteSuccess', [dict.name]));
+
+        // 如果删除的是当前选中的字典，清除选中状态
+        if (selectedDictId.value === dict.id) {
+          selectedDictId.value = undefined;
+          emit('select', undefined);
+        }
+
+        await fetchDictList();
+      } catch {
+        ElMessage.error($t('ui.actionMessage.deleteError'));
+      }
+    })
+    .catch(() => {
+      // 用户取消了操作
+    });
+}
+
+/**
+ * 添加字典成功后的回调
+ */
+async function onDictFormSuccess() {
+  ElMessage.success($t('ui.actionMessage.createSuccess', [$t('dict.name')]));
+  await fetchDictList();
+}
+
+onMounted(() => {
+  fetchDictList();
+});
+</script>
+
+<template>
+  <ElCard shadow="never" style="border: none" class="flex h-full flex-col">
+    <DictFormModal ref="dictFormModalRef" @success="onDictFormSuccess" />
+
+    <!-- 搜索和添加区域 -->
+    <div class="mb-4 flex gap-2">
+      <ElInput
+        v-model="searchKeyword"
+        :placeholder="$t('common.search')"
+        clearable
+        :prefix-icon="Search"
+      />
+      <ElButton :icon="Plus" @click="onAddDict" />
+    </div>
+
+    <!-- 字典列表 -->
+    <div class="flex-1 overflow-auto">
+      <ElSkeleton :loading="loading" animated :count="8">
+        <template #template>
+          <div class="space-y-1">
+            <div v-for="i in 8" :key="i" class="dict-skeleton-item">
+              <ElSkeletonItem
+                variant="text"
+                style="width: 100%; height: 40px"
+              />
+            </div>
+          </div>
+        </template>
+        <template #default>
+          <div class="space-y-2">
+            <div
+              v-for="dict in filteredDictList"
+              :key="dict.id"
+              class="dict-item cursor-pointer rounded-[8px] px-3 py-2 transition-colors"
+              :class="[
+                selectedDictId === dict.id
+                  ? 'bg-primary/15 dark:bg-accent text-primary'
+                  : 'hover:bg-[var(--el-fill-color-light)]',
+              ]"
+              @mouseenter="hoveredDictId = dict.id"
+              @mouseleave="hoveredDictId = undefined"
+              @click="onDictSelect(dict.id)"
+            >
+              <!-- 上半部分：字典名称和操作按钮 -->
+              <div class="mb-1 flex min-h-6 items-center justify-between">
+                <div
+                  class="flex min-w-0 flex-1 items-center justify-between gap-1"
+                >
+                  <div class="truncate text-sm font-medium" :title="dict.name">
+                    {{ dict.name }}
+                  </div>
+                  <ElTag
+                    v-if="dict.is_global"
+                    size="small"
+                    type="warning"
+                    class="flex-shrink-0"
+                  >
+                    {{ $t('dict.globalTag') }}
+                  </ElTag>
+                </div>
+
+                <!-- 操作图标 -->
+                <div
+                  v-if="hoveredDictId === dict.id"
+                  class="ml-2 flex flex-shrink-0 gap-0.5"
+                  @click.stop
+                >
+                  <ElTooltip :content="$t('dict.edit')" placement="top">
+                    <ElButton
+                      type="primary"
+                      text
+                      size="small"
+                      circle
+                      @click="onEditDict(dict, $event)"
+                    >
+                      <IconifyIcon icon="ep:edit" class="size-4" />
+                    </ElButton>
+                  </ElTooltip>
+                  <ElButton
+                    type="danger"
+                    text
+                    size="small"
+                    circle
+                    style="margin-left: 0"
+                    :title="$t('common.delete')"
+                    @click="onDeleteDict(dict, $event)"
+                  >
+                    <IconifyIcon icon="ep:delete" class="size-4" />
+                  </ElButton>
+                </div>
+              </div>
+
+              <!-- 下半部分：详细信息 -->
+              <div class="flex items-center gap-2 text-xs opacity-70">
+                <!-- 字典编码 -->
+                <span class="truncate" :title="dict.code">
+                  {{ dict.code }}
+                </span>
+
+                <!-- 应用名称 -->
+                <span class="text-gray-400">|</span>
+                <span
+                  class="truncate"
+                  :title="dict.application_name || $t('dict.mainApp')"
+                >
+                  {{ dict.application_name || $t('dict.mainApp') }}
+                </span>
+                <!-- 分隔符 -->
+                <span class="text-gray-400">|</span>
+
+                <!-- 状态 -->
+                <span v-if="dict.status" class="flex-shrink-0">
+                  {{ $t('common.enabled') }}
+                </span>
+                <span v-else class="flex-shrink-0">
+                  {{ $t('common.disabled') }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </ElSkeleton>
+    </div>
+  </ElCard>
+</template>
+
+<style scoped>
+/* 输入框前置图标样式 */
+:deep(.el-input__icon) {
+  cursor: pointer;
+}
+
+/* 文本按钮样式 */
+:deep(.el-button--text) {
+  padding: 0 4px;
+}
+
+/* 骨架屏样式 */
+.dict-skeleton-item {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px 12px;
+}
+
+/* 字典项样式 */
+.dict-item {
+  min-height: 56px;
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/file-manager/components/CreateFolderDialog.vue b/web/apps/web-ele/src/views/_core/file-manager/components/CreateFolderDialog.vue
new file mode 100644
index 0000000..b785e80
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/file-manager/components/CreateFolderDialog.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+} from 'element-plus';
+
+import { createFolder } from '#/api/core/file';
+
+import { useFileManager } from '../composables/useFileManager';
+
+const { createFolderDialogVisible, currentFolderId, fetchFiles } =
+  useFileManager();
+
+const form = ref({
+  name: '',
+});
+
+const formRef = ref<any>(null);
+const loading = ref(false);
+
+// 监听对话框打开，重置表单
+watch(createFolderDialogVisible, (val) => {
+  if (val) {
+    form.value.name = '';
+  }
+});
+
+const handleClose = () => {
+  createFolderDialogVisible.value = false;
+};
+
+const handleSubmit = async () => {
+  if (!form.value.name) {
+    ElMessage.warning($t('file-manager.pleaseEnterFolderName'));
+    return;
+  }
+
+  loading.value = true;
+  try {
+    await createFolder({
+      name: form.value.name,
+      parent_id: currentFolderId.value || undefined,
+    });
+    ElMessage.success($t('file-manager.createSuccess'));
+    createFolderDialogVisible.value = false;
+    // 刷新列表
+    fetchFiles();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<template>
+  <ElDialog
+    v-model="createFolderDialogVisible"
+    :title="$t('file-manager.newFolder')"
+    width="400px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <ElForm ref="formRef" :model="form" @submit.prevent="handleSubmit">
+      <ElFormItem :label="$t('file-manager.folderName')">
+        <ElInput
+          v-model="form.name"
+          :placeholder="$t('file-manager.pleaseEnterFolderName')"
+          autofocus
+          @keyup.enter="handleSubmit"
+        />
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <div class="dialog-footer">
+        <ElButton @click="handleClose">
+          {{ $t('file-manager.cancel') }}
+        </ElButton>
+        <ElButton type="primary" :loading="loading" @click="handleSubmit">
+          {{ $t('file-manager.confirm') }}
+        </ElButton>
+      </div>
+    </template>
+  </ElDialog>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/file-manager/components/FileList.vue b/web/apps/web-ele/src/views/_core/file-manager/components/FileList.vue
new file mode 100644
index 0000000..c24d6df
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/file-manager/components/FileList.vue
@@ -0,0 +1,547 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { Folder, MoreVertical } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { useUserStore } from '@vben/stores';
+
+import {
+  ElCheckbox,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElEmpty,
+  ElMessage,
+  ElMessageBox,
+  ElImageViewer as ImageViewer,
+  ElInfiniteScroll as vInfiniteScroll,
+} from 'element-plus';
+
+import { deleteItem } from '#/api/core/file';
+import { getFileTypeIcon } from '#/assets/file-icons';
+import { getFileUrl } from '#/composables/useFileUrl';
+
+import { useFileManager } from '../composables/useFileManager';
+import RenameDialog from './RenameDialog.vue';
+
+const {
+  currentFolderId,
+  viewMode,
+  fileList,
+  loading,
+  loadingMore,
+  noMore,
+  selectedFileIds,
+  navigateToFolder,
+  fetchFiles,
+  loadMore,
+  clearSelection,
+} = useFileManager();
+
+const renameDialogVisible = ref(false);
+const currentItem = ref<any>(null);
+
+// 图片预览状态
+const previewVisible = ref(false);
+const previewUrlList = ref<string[]>([]);
+const previewInitialIndex = ref(0);
+
+// 图片URL缓存映射
+const imageUrlMap = ref<Map<string, string>>(new Map());
+
+// 获取图片URL（从缓存中获取）
+function getImageUrl(id: string): string {
+  return imageUrlMap.value.get(id) || '';
+}
+
+// 批量加载文件列表中所有图片的URL
+async function loadImageUrls() {
+  const images = fileList.value.filter(
+    (f) => isImage(f.file_ext) && f.id && !imageUrlMap.value.has(f.id),
+  );
+  if (images.length === 0) return;
+
+  // 并发批量获取所有图片URL
+  const results = await Promise.allSettled(
+    images.map(async (img) => {
+      const url = await getFileUrl(img.id!);
+      return { id: img.id!, url };
+    }),
+  );
+
+  for (const result of results) {
+    if (result.status === 'fulfilled' && result.value.url) {
+      imageUrlMap.value.set(result.value.id, result.value.url);
+    }
+  }
+}
+
+// 全选相关计算属性
+const isAllSelected = computed(() => {
+  return (
+    fileList.value.length > 0 &&
+    selectedFileIds.value.size === fileList.value.length
+  );
+});
+
+const isIndeterminate = computed(() => {
+  return (
+    selectedFileIds.value.size > 0 &&
+    selectedFileIds.value.size < fileList.value.length
+  );
+});
+
+// 处理全选
+const handleSelectAll = (val: any) => {
+  if (val) {
+    fileList.value.forEach((item) => selectedFileIds.value.add(item.id!));
+  } else {
+    clearSelection();
+  }
+};
+
+// 监听文件夹变化，自动刷新列表并清空选中
+watch(currentFolderId, () => {
+  clearSelection();
+  imageUrlMap.value.clear();
+  fetchFiles();
+});
+
+// 监听文件列表变化，加载图片URL
+watch(
+  fileList,
+  () => {
+    loadImageUrls();
+  },
+  { immediate: true },
+);
+
+onMounted(fetchFiles);
+
+// 处理 Grid/List 选中
+const handleGridSelect = (id: string, value: boolean) => {
+  if (value) {
+    selectedFileIds.value.add(id);
+  } else {
+    selectedFileIds.value.delete(id);
+  }
+};
+
+const isImage = (ext?: string) => {
+  if (!ext) return false;
+  const extension = ext.toLowerCase().replace('.', '');
+  return ['bmp', 'gif', 'jpeg', 'jpg', 'png', 'svg', 'webp'].includes(
+    extension,
+  );
+};
+
+const isFolder = (item: any) => {
+  return (item.file_type || item.fileType || item.type) === 'folder';
+};
+
+// 单击选中/取消选中
+const handleItemClick = (item: any) => {
+  const id = item.id!;
+  if (selectedFileIds.value.has(id)) {
+    selectedFileIds.value.delete(id);
+  } else {
+    selectedFileIds.value.clear();
+    selectedFileIds.value.add(id);
+  }
+};
+
+// 双击打开
+const handleItemOpen = async (item: any) => {
+  const type = item.file_type || item.fileType || item.type;
+
+  if (type === 'folder') {
+    navigateToFolder(item.id, item.name);
+  } else if (isImage(item.file_ext)) {
+    const images = fileList.value.filter((f) => isImage(f.file_ext));
+    const urls = await Promise.all(images.map((img) => getFileUrl(img.id!)));
+    previewUrlList.value = urls;
+
+    const index = images.findIndex((img) => img.id === item.id);
+    previewInitialIndex.value = index === -1 ? 0 : index;
+
+    previewVisible.value = true;
+  } else {
+    const query = new URLSearchParams({
+      name: item.name || '',
+      ext: item.file_ext || '',
+    });
+    window.open(`/file-preview/${item.id}?${query.toString()}`, '_blank');
+  }
+};
+
+const closePreview = () => {
+  previewVisible.value = false;
+};
+
+const handleDownload = async (item: any) => {
+  if (isFolder(item)) {
+    ElMessage.warning($t('file-manager.folderDownloadNotSupported'));
+    return;
+  }
+
+  try {
+    // 获取带 token 的 URL
+    const tokenUrl = await getFileUrl(item.id);
+    // 添加 download 参数
+    const downloadUrl = `${tokenUrl + (tokenUrl.includes('?') ? '&' : '?')}download=true`;
+
+    // 使用 fetch 获取文件 blob
+    const response = await fetch(downloadUrl);
+    if (!response.ok) {
+      throw new Error(`下载失败: ${response.status}`);
+    }
+    const blob = await response.blob();
+
+    // 创建 blob URL 并下载
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = item.name || 'download';
+    document.body.append(link);
+    link.click();
+    link.remove();
+    window.URL.revokeObjectURL(url);
+  } catch (error) {
+    console.error('下载文件失败:', error);
+    ElMessage.error($t('file-manager.downloadFailed') || '下载文件失败');
+  }
+};
+
+const handleDelete = async (item: any) => {
+  try {
+    await ElMessageBox.confirm(
+      $t('file-manager.deleteConfirm', { name: item.name }),
+      $t('file-manager.tip'),
+      {
+        type: 'warning',
+        confirmButtonText: $t('file-manager.confirm'),
+        cancelButtonText: $t('file-manager.cancel'),
+      },
+    );
+
+    await deleteItem(item.id);
+    ElMessage.success($t('file-manager.deleteSuccess'));
+    fetchFiles();
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error(error);
+    }
+  }
+};
+
+const openRenameDialog = (item: any) => {
+  currentItem.value = item;
+  renameDialogVisible.value = true;
+};
+
+const handleAction = (action: string, item: any) => {
+  switch (action) {
+    case 'delete': {
+      handleDelete(item);
+      break;
+    }
+    case 'download': {
+      handleDownload(item);
+      break;
+    }
+    case 'open': {
+      handleItemOpen(item);
+      break;
+    }
+    case 'rename': {
+      openRenameDialog(item);
+      break;
+    }
+  }
+};
+
+// 判断当前用户是否可以操作该文件（重命名/删除）
+const userStore = useUserStore();
+debugger;
+const canOperate = (item: any) => {
+  // 系统文件夹不可操作
+  if (item.is_system) return false;
+  // 超管可以操作所有文件
+  if (userStore.userRoles?.includes('super')) return true;
+  // 普通用户只能操作自己的文件
+  return item.sys_creator_id === userStore.userInfo?.userId;
+};
+
+// 格式化大小
+const formatSize = (size?: number) => {
+  if (size === undefined || size === null) return '-';
+  if (size === 0) return '0 B';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let i = 0;
+  let s = size;
+  while (s >= 1024 && i < units.length - 1) {
+    s /= 1024;
+    i++;
+  }
+  return `${s.toFixed(2)} ${units[i]}`;
+};
+</script>
+
+<template>
+  <div
+    v-loading="loading"
+    v-infinite-scroll="loadMore"
+    :infinite-scroll-disabled="noMore || loadingMore"
+    :infinite-scroll-distance="200"
+    class="h-full w-full overflow-y-auto"
+  >
+    <div
+      v-if="fileList.length === 0 && !loading"
+      class="flex h-full items-center justify-center"
+    >
+      <ElEmpty :description="$t('file-manager.noFiles')" />
+    </div>
+
+    <!-- Grid View -->
+    <template v-else-if="viewMode === 'grid'">
+      <div class="bg-background sticky top-0 z-20 flex items-center px-4 py-2">
+        <ElCheckbox
+          :model-value="isAllSelected"
+          :indeterminate="isIndeterminate"
+          @change="handleSelectAll"
+        >
+          {{ $t('file-manager.selectAll') }}
+          {{ selectedFileIds.size > 0 ? `(${selectedFileIds.size})` : '' }}
+        </ElCheckbox>
+      </div>
+      <div
+        class="grid grid-cols-2 gap-4 px-4 py-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
+      >
+        <div
+          v-for="item in fileList"
+          :key="item.id"
+          class="border-border bg-card hover:bg-accent group relative flex cursor-pointer flex-col rounded-lg border p-4 transition-colors"
+          :class="{
+            'ring-primary bg-accent ring-2': selectedFileIds.has(item.id!),
+          }"
+          @click="handleItemClick(item)"
+          @dblclick="handleItemOpen(item)"
+        >
+          <!-- Checkbox for Grid -->
+          <div class="absolute left-2 top-2 z-10" @click.stop>
+            <ElCheckbox
+              :model-value="selectedFileIds.has(item.id!)"
+              @change="(val) => handleGridSelect(item.id!, Boolean(val))"
+            />
+          </div>
+
+          <!-- 操作按钮 -->
+          <div class="absolute right-2 top-2 z-10" @click.stop>
+            <ElDropdown trigger="click">
+              <button
+                class="invisible rounded-full p-1 hover:bg-gray-200 group-hover:visible dark:hover:bg-gray-700"
+              >
+                <MoreVertical class="size-4 text-gray-500" />
+              </button>
+              <template #dropdown>
+                <ElDropdownMenu>
+                  <ElDropdownItem @click="handleAction('open', item)">
+                    {{ $t('file-manager.open') }}
+                  </ElDropdownItem>
+                  <ElDropdownItem
+                    v-if="!isFolder(item)"
+                    @click="handleAction('download', item)"
+                  >
+                    {{ $t('file-manager.download') }}
+                  </ElDropdownItem>
+                  <ElDropdownItem
+                    v-if="canOperate(item)"
+                    divided
+                    @click="handleAction('rename', item)"
+                  >
+                    {{ $t('file-manager.rename') }}
+                  </ElDropdownItem>
+                  <ElDropdownItem
+                    v-if="canOperate(item)"
+                    class="text-red-500"
+                    @click="handleAction('delete', item)"
+                  >
+                    {{ $t('file-manager.delete') }}
+                  </ElDropdownItem>
+                </ElDropdownMenu>
+              </template>
+            </ElDropdown>
+          </div>
+
+          <div
+            class="flex flex-1 items-center justify-center overflow-hidden py-4"
+          >
+            <template v-if="isImage(item.file_ext)">
+              <img
+                v-if="getImageUrl(item.id!)"
+                :src="getImageUrl(item.id!)"
+                class="h-16 w-full object-contain"
+                loading="lazy"
+              />
+              <div
+                v-else
+                class="bg-muted h-16 w-full animate-pulse rounded"
+              ></div>
+            </template>
+            <Folder v-else-if="isFolder(item)" class="size-16 text-blue-500" />
+            <img v-else :src="getFileTypeIcon(item.file_ext)" class="size-16" />
+          </div>
+          <div class="px-2 text-center">
+            <span
+              class="block truncate text-sm font-medium"
+              :title="item.name"
+              >{{ item.name }}</span
+            >
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- List View -->
+    <template v-else>
+      <div class="bg-background sticky top-0 z-20 flex items-center px-4 py-2">
+        <ElCheckbox
+          :model-value="isAllSelected"
+          :indeterminate="isIndeterminate"
+          @change="handleSelectAll"
+        >
+          {{ $t('file-manager.selectAll') }}
+          {{ selectedFileIds.size > 0 ? `(${selectedFileIds.size})` : '' }}
+        </ElCheckbox>
+      </div>
+      <!-- 列表表头 -->
+      <div
+        class="text-muted-foreground flex items-center gap-3 border-b border-[var(--el-border-color)] px-4 py-2 text-xs font-medium"
+      >
+        <div class="w-8"></div>
+        <div class="w-8"></div>
+        <div class="min-w-0 flex-1">{{ $t('file-manager.name') }}</div>
+        <div class="hidden w-24 text-right sm:block">
+          {{ $t('file-manager.size') }}
+        </div>
+        <div class="hidden w-40 text-right md:block">
+          {{ $t('file-manager.modifiedTime') }}
+        </div>
+        <div class="w-8"></div>
+      </div>
+      <!-- 列表行 -->
+      <div class="px-4">
+        <div
+          v-for="item in fileList"
+          :key="item.id"
+          class="hover:bg-accent group flex cursor-pointer items-center gap-3 rounded-md px-0 py-2 transition-colors"
+          :class="{
+            'bg-accent': selectedFileIds.has(item.id!),
+          }"
+          @click="handleItemClick(item)"
+          @dblclick="handleItemOpen(item)"
+        >
+          <!-- Checkbox -->
+          <div class="w-8 flex-shrink-0 text-center" @click.stop>
+            <ElCheckbox
+              :model-value="selectedFileIds.has(item.id!)"
+              @change="(val) => handleGridSelect(item.id!, Boolean(val))"
+            />
+          </div>
+          <!-- 图标 -->
+          <div class="flex w-8 flex-shrink-0 items-center justify-center">
+            <template v-if="isImage(item.file_ext)">
+              <img
+                v-if="getImageUrl(item.id!)"
+                :src="getImageUrl(item.id!)"
+                class="size-6 rounded object-cover"
+                loading="lazy"
+              />
+              <div v-else class="bg-muted size-6 animate-pulse rounded"></div>
+            </template>
+            <Folder v-else-if="isFolder(item)" class="size-6 text-blue-500" />
+            <img v-else :src="getFileTypeIcon(item.file_ext)" class="size-6" />
+          </div>
+          <!-- 文件名 -->
+          <div class="min-w-0 flex-1">
+            <span class="block truncate text-sm" :title="item.name">{{
+              item.name
+            }}</span>
+          </div>
+          <!-- 大小 -->
+          <div
+            class="text-muted-foreground hidden w-24 flex-shrink-0 text-right text-xs sm:block"
+          >
+            {{ isFolder(item) ? '-' : formatSize(item.file_size || item.size) }}
+          </div>
+          <!-- 修改时间 -->
+          <div
+            class="text-muted-foreground hidden w-40 flex-shrink-0 text-right text-xs md:block"
+          >
+            {{ item.updated_time?.substring(0, 16) }}
+          </div>
+          <!-- 操作 -->
+          <div class="w-8 flex-shrink-0 text-center" @click.stop>
+            <ElDropdown trigger="click">
+              <button
+                class="invisible rounded-full p-1 hover:bg-gray-200 group-hover:visible dark:hover:bg-gray-700"
+              >
+                <MoreVertical class="size-4 text-gray-500" />
+              </button>
+              <template #dropdown>
+                <ElDropdownMenu>
+                  <ElDropdownItem @click="handleAction('open', item)">
+                    {{ $t('file-manager.open') }}
+                  </ElDropdownItem>
+                  <ElDropdownItem
+                    v-if="!isFolder(item)"
+                    @click="handleAction('download', item)"
+                  >
+                    {{ $t('file-manager.download') }}
+                  </ElDropdownItem>
+                  <ElDropdownItem
+                    v-if="canOperate(item)"
+                    divided
+                    @click="handleAction('rename', item)"
+                  >
+                    {{ $t('file-manager.rename') }}
+                  </ElDropdownItem>
+                  <ElDropdownItem
+                    v-if="canOperate(item)"
+                    class="text-red-500"
+                    @click="handleAction('delete', item)"
+                  >
+                    {{ $t('file-manager.delete') }}
+                  </ElDropdownItem>
+                </ElDropdownMenu>
+              </template>
+            </ElDropdown>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- 无限滚动加载提示 -->
+    <div
+      v-if="fileList.length > 0"
+      class="text-muted-foreground flex items-center justify-center py-4 text-xs"
+    >
+      <template v-if="loadingMore">
+        <span class="mr-2 animate-spin">&#9696;</span>
+        {{ $t('common.loading') }}
+      </template>
+      <template v-else-if="noMore">
+        {{ $t('common.noMore') }}
+      </template>
+    </div>
+
+    <RenameDialog v-model:visible="renameDialogVisible" :item="currentItem" />
+
+    <ImageViewer
+      v-if="previewVisible"
+      :url-list="previewUrlList"
+      :initial-index="previewInitialIndex"
+      @close="closePreview"
+    />
+  </div>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/file-manager/components/FileToolbar.vue b/web/apps/web-ele/src/views/_core/file-manager/components/FileToolbar.vue
new file mode 100644
index 0000000..d0bdfb6
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/file-manager/components/FileToolbar.vue
@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import {
+  ChevronRight,
+  Home,
+  LayoutGrid,
+  List,
+  Plus,
+  RotateCw,
+  Search,
+  Trash2,
+  Upload,
+} from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import {
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElButton,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElInput,
+  ElMessage,
+  ElMessageBox,
+  ElProgress,
+} from 'element-plus';
+
+import { batchDelete, uploadFile } from '#/api/core/file';
+
+import { useFileManager } from '../composables/useFileManager';
+
+const {
+  viewMode,
+  breadcrumbs,
+  currentFolderId,
+  selectedFileIds,
+  navigateToFolder,
+  openCreateFolderDialog,
+  fetchFiles,
+  clearSelection,
+} = useFileManager();
+
+const fileInputRef = ref<HTMLInputElement | null>(null);
+// ... (rest of the code)
+
+const deleting = ref(false);
+
+const handleBatchDelete = async () => {
+  if (selectedFileIds.value.size === 0) return;
+
+  try {
+    await ElMessageBox.confirm(
+      $t('file-manager.batchDeleteConfirm', {
+        count: selectedFileIds.value.size,
+      }),
+      $t('file-manager.tip'),
+      {
+        type: 'warning',
+        confirmButtonText: $t('file-manager.confirm'),
+        cancelButtonText: $t('file-manager.cancel'),
+      },
+    );
+
+    deleting.value = true;
+    await batchDelete({ ids: [...selectedFileIds.value] });
+    ElMessage.success($t('file-manager.deleteSuccess'));
+    clearSelection();
+    fetchFiles();
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error(error);
+    }
+  } finally {
+    deleting.value = false;
+  }
+};
+const folderInputRef = ref<HTMLInputElement | null>(null);
+const uploading = ref(false);
+const uploadProgress = ref(0);
+const uploadingFileName = ref('');
+const uploadedCount = ref(0);
+const totalUploadCount = ref(0);
+
+const uploadStatusText = computed(() => {
+  if (!uploading.value) return '';
+  if (totalUploadCount.value <= 1) return uploadingFileName.value;
+  return `(${uploadedCount.value + 1}/${totalUploadCount.value}) ${uploadingFileName.value}`;
+});
+
+const handleBreadcrumbClick = (id: null | string, name: string) => {
+  navigateToFolder(id, name);
+};
+
+const handleCreateFolder = () => {
+  openCreateFolderDialog();
+};
+
+const handleUploadFile = () => {
+  fileInputRef.value?.click();
+};
+
+const handleUploadFolder = () => {
+  folderInputRef.value?.click();
+};
+
+const handleFileChange = async (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const files = target.files;
+
+  if (!files || files.length === 0) return;
+
+  uploading.value = true;
+  uploadProgress.value = 0;
+  uploadedCount.value = 0;
+  totalUploadCount.value = files.length;
+  let successCount = 0;
+  let failCount = 0;
+
+  try {
+    for (const file of files) {
+      if (!file) continue;
+
+      uploadingFileName.value = file.name;
+      uploadProgress.value = 0;
+
+      try {
+        await uploadFile(file, {
+          parentId: currentFolderId.value || undefined,
+          onProgress: (e) => {
+            uploadProgress.value = e.percentage;
+          },
+        });
+        successCount++;
+        uploadedCount.value = successCount + failCount;
+      } catch (error) {
+        console.error(`Failed to upload ${file.name}`, error);
+        failCount++;
+        uploadedCount.value = successCount + failCount;
+      }
+    }
+
+    if (successCount > 0) {
+      ElMessage.success(
+        $t('file-manager.uploadSuccess', { count: successCount }),
+      );
+      fetchFiles();
+    }
+    if (failCount > 0) {
+      ElMessage.error($t('file-manager.uploadFailed', { count: failCount }));
+    }
+  } catch (error) {
+    console.error(error);
+    ElMessage.error($t('file-manager.uploadError'));
+  } finally {
+    uploading.value = false;
+    uploadProgress.value = 0;
+    uploadingFileName.value = '';
+    target.value = '';
+  }
+};
+</script>
+
+<template>
+  <div class="border-border border-b">
+    <div class="flex items-center justify-between px-4 py-3">
+      <!-- Hidden Inputs -->
+      <input
+        ref="fileInputRef"
+        type="file"
+        multiple
+        class="hidden"
+        @change="handleFileChange"
+      />
+      <input
+        ref="folderInputRef"
+        type="file"
+        webkitdirectory
+        class="hidden"
+        @change="handleFileChange"
+      />
+
+      <!-- Breadcrumbs -->
+      <div class="mr-4 flex flex-1 items-center overflow-hidden">
+        <ElBreadcrumb :separator-icon="ChevronRight">
+          <ElBreadcrumbItem
+            v-for="(item, index) in breadcrumbs"
+            :key="item.id || 'root'"
+          >
+            <span
+              class="hover:text-primary flex cursor-pointer items-center gap-1"
+              :class="{
+                'text-foreground font-bold': index === breadcrumbs.length - 1,
+              }"
+              @click="handleBreadcrumbClick(item.id, item.name)"
+            >
+              <Home v-if="index === 0" class="size-4" />
+              {{ item.name }}
+            </span>
+          </ElBreadcrumbItem>
+        </ElBreadcrumb>
+      </div>
+
+      <!-- Actions -->
+      <div class="flex flex-shrink-0 items-center gap-2 sm:gap-3">
+        <ElInput :placeholder="$t('file-manager.search')" class="w-32 sm:w-48">
+          <template #prefix>
+            <Search class="size-4" />
+          </template>
+        </ElInput>
+
+        <div class="flex items-center rounded-lg border p-1">
+          <button
+            class="hover:bg-accent p-2"
+            :class="{ 'bg-accent text-primary': viewMode === 'list' }"
+            @click="viewMode = 'list'"
+            :title="$t('file-manager.listView')"
+          >
+            <List class="size-4" />
+          </button>
+          <button
+            class="hover:bg-accent p-2"
+            :class="{ 'bg-accent text-primary': viewMode === 'grid' }"
+            @click="viewMode = 'grid'"
+            :title="$t('file-manager.gridView')"
+          >
+            <LayoutGrid class="size-4" />
+          </button>
+        </div>
+
+        <ElButton circle @click="fetchFiles">
+          <template #icon>
+            <RotateCw class="size-4" :class="{ 'animate-spin': uploading }" />
+          </template>
+        </ElButton>
+
+        <ElButton
+          v-if="selectedFileIds.size > 0"
+          type="danger"
+          plain
+          :loading="deleting"
+          @click="handleBatchDelete"
+        >
+          <Trash2 v-if="!deleting" class="mr-2 size-4" />
+          {{ $t('file-manager.batchDelete') }}
+        </ElButton>
+
+        <ElButton
+          type="primary"
+          plain
+          @click="handleCreateFolder"
+          class="hidden sm:flex"
+        >
+          <Plus class="mr-2 size-4" /> {{ $t('file-manager.newFolder') }}
+        </ElButton>
+
+        <ElDropdown trigger="click">
+          <ElButton type="primary" :loading="uploading" class="hidden sm:flex">
+            <Upload class="mr-2 size-4" /> {{ $t('file-manager.upload') }}
+          </ElButton>
+          <ElButton
+            circle
+            type="primary"
+            :loading="uploading"
+            class="flex sm:hidden"
+          >
+            <Plus class="size-4" />
+          </ElButton>
+          <template #dropdown>
+            <ElDropdownMenu>
+              <ElDropdownItem @click="handleUploadFile">
+                {{ $t('file-manager.uploadFile') }}
+              </ElDropdownItem>
+              <ElDropdownItem @click="handleUploadFolder">
+                {{ $t('file-manager.uploadFolder') }}
+              </ElDropdownItem>
+            </ElDropdownMenu>
+          </template>
+        </ElDropdown>
+      </div>
+    </div>
+
+    <!-- 上传进度条 -->
+    <div v-if="uploading" class="flex items-center gap-3 px-4 py-2">
+      <span class="text-muted-foreground max-w-48 truncate text-xs">
+        {{ uploadStatusText }}
+      </span>
+      <ElProgress
+        :percentage="uploadProgress"
+        :stroke-width="6"
+        class="flex-1"
+      />
+    </div>
+  </div>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/file-manager/components/FolderTree.vue b/web/apps/web-ele/src/views/_core/file-manager/components/FolderTree.vue
new file mode 100644
index 0000000..ce084d4
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/file-manager/components/FolderTree.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { Cloud, Folder, FolderOpen } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { ElTree } from 'element-plus';
+
+import { getFileList } from '#/api/core/file';
+
+import { useFileManager } from '../composables/useFileManager';
+
+const { navigateToFolder } = useFileManager();
+
+interface TreeData {
+  id: null | string;
+  name: string;
+  isLeaf?: boolean;
+}
+
+const props = {
+  label: 'name',
+  children: 'children',
+  isLeaf: 'isLeaf',
+};
+
+const loadNode = async (node: any, resolve: (data: TreeData[]) => void) => {
+  if (node.level === 0) {
+    return resolve([{ id: 'root', name: $t('file-manager.myFiles') }]);
+  }
+
+  try {
+    const parentId = node.data.id === 'root' ? null : node.data.id;
+    const res = await getFileList({
+      parent_id: parentId,
+      type: 'folder',
+      page: 1,
+      pageSize: 100, // 暂时获取所有
+    });
+
+    const folders = res.items.map((item: any) => ({
+      id: item.id!,
+      name: item.name,
+      isLeaf: !item.has_children,
+    }));
+    // 如果没有子文件夹，标记当前节点为叶子节点，防止无限循环展开
+    if (folders.length === 0) {
+      node.isLeaf = true;
+      if (node.data) {
+        node.data.isLeaf = true;
+      }
+    }
+    resolve(folders);
+  } catch (error) {
+    console.error('Failed to load folders', error);
+    resolve([]);
+  }
+};
+
+const handleNodeClick = (data: TreeData) => {
+  const folderId = data.id === 'root' ? null : data.id;
+  navigateToFolder(folderId, data.name);
+};
+</script>
+
+<template>
+  <div class="bg-background flex h-full w-64 flex-col rounded-[10px]">
+    <div class="text-foreground flex items-center gap-2 p-4 text-sm font-bold">
+      <Cloud class="text-primary size-5" />
+      {{ $t('file-manager.fileManagement') }}
+    </div>
+    <div class="flex-1 overflow-y-auto p-2">
+      <ElTree
+        lazy
+        :load="loadNode"
+        :props="props"
+        :expand-on-click-node="false"
+        node-key="id"
+        highlight-current
+        @node-click="handleNodeClick"
+      >
+        <template #default="{ node }">
+          <span class="flex items-center gap-2 py-1">
+            <FolderOpen v-if="node.expanded" class="size-4 text-blue-500" />
+            <Folder v-else class="size-4 text-gray-500" />
+            <span class="truncate text-sm">{{ node.label }}</span>
+          </span>
+        </template>
+      </ElTree>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+/* 调整树节点高度 */
+:deep(.el-tree-node__content) {
+  height: 34px;
+  line-height: 34px;
+  border-radius: 6px;
+  margin-bottom: 4px;
+}
+
+/* 调整展开/收起图标的对齐 */
+:deep(.el-tree-node__expand-icon) {
+  padding: 6px;
+}
+
+/* 选中节点的背景色 - 使用primary色 */
+:deep(.el-tree-node.is-current > .el-tree-node__content) {
+  background-color: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+}
+
+/* 悬停效果 */
+:deep(.el-tree-node__content:hover) {
+  background-color: var(--el-fill-color-light);
+}
+
+/* 选中节点悬停时保持primary色 */
+:deep(.el-tree-node.is-current > .el-tree-node__content:hover) {
+  background-color: var(--el-color-primary-light-8);
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/file-manager/components/RenameDialog.vue b/web/apps/web-ele/src/views/_core/file-manager/components/RenameDialog.vue
new file mode 100644
index 0000000..5c06523
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/file-manager/components/RenameDialog.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+} from 'element-plus';
+
+import { renameItem } from '#/api/core/file';
+
+import { useFileManager } from '../composables/useFileManager';
+
+const props = defineProps<{
+  item: null | { id: string; name: string; type: string };
+  visible: boolean;
+}>();
+
+const emit = defineEmits(['update:visible', 'success']);
+
+const { fetchFiles } = useFileManager();
+const loading = ref(false);
+const form = ref({
+  name: '',
+});
+const formRef = ref<any>(null);
+
+watch(
+  () => props.visible,
+  (val) => {
+    if (val && props.item) {
+      form.value.name = props.item.name;
+    }
+  },
+);
+
+const handleClose = () => {
+  emit('update:visible', false);
+};
+
+const handleSubmit = async () => {
+  if (!props.item) return;
+  if (!form.value.name) {
+    ElMessage.warning($t('file-manager.pleaseEnterName'));
+    return;
+  }
+
+  loading.value = true;
+  try {
+    await renameItem(props.item.id, {
+      name: form.value.name,
+    });
+    ElMessage.success($t('file-manager.renameSuccess'));
+    emit('update:visible', false);
+    emit('success');
+    fetchFiles();
+  } catch (error) {
+    console.error(error);
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<template>
+  <ElDialog
+    :model-value="visible"
+    :title="$t('file-manager.rename')"
+    width="400px"
+    :close-on-click-modal="false"
+    @close="handleClose"
+  >
+    <ElForm ref="formRef" :model="form" @submit.prevent="handleSubmit">
+      <ElFormItem :label="$t('file-manager.name')">
+        <ElInput
+          v-model="form.name"
+          :placeholder="$t('file-manager.pleaseEnterName')"
+          autofocus
+          @keyup.enter="handleSubmit"
+        />
+      </ElFormItem>
+    </ElForm>
+    <template #footer>
+      <div class="dialog-footer">
+        <ElButton @click="handleClose">
+          {{ $t('file-manager.cancel') }}
+        </ElButton>
+        <ElButton type="primary" :loading="loading" @click="handleSubmit">
+          {{ $t('file-manager.confirm') }}
+        </ElButton>
+      </div>
+    </template>
+  </ElDialog>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/file-manager/composables/useFileManager.ts b/web/apps/web-ele/src/views/_core/file-manager/composables/useFileManager.ts
new file mode 100644
index 0000000..583d61c
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/file-manager/composables/useFileManager.ts
@@ -0,0 +1,129 @@
+import type { SystemFileManagerApi } from '#/api/core/file';
+
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { getFileList } from '#/api/core/file';
+
+// 使用单例模式或者在顶层组件 provide
+const currentFolderId = ref<null | string>(null);
+const viewMode = ref<'grid' | 'list'>('grid');
+const selectedFileIds = ref<Set<string>>(new Set());
+const fileList = ref<SystemFileManagerApi.FileItem[]>([]);
+const loading = ref(false);
+const loadingMore = ref(false);
+const breadcrumbs = ref<Array<{ id: null | string; name: string }>>([
+  { id: null, name: $t('file-manager.myFiles') },
+]);
+const createFolderDialogVisible = ref(false);
+
+// 无限滚动分页状态
+const currentPage = ref(1);
+const pageSize = ref(50);
+const total = ref(0);
+const noMore = computed(() => fileList.value.length >= total.value);
+
+export function useFileManager() {
+  const toggleViewMode = () => {
+    viewMode.value = viewMode.value === 'grid' ? 'list' : 'grid';
+  };
+
+  const fetchFiles = async () => {
+    currentPage.value = 1;
+    loading.value = true;
+    try {
+      const res = await getFileList({
+        parent_id: currentFolderId.value,
+        page: 1,
+        pageSize: pageSize.value,
+      });
+      fileList.value = res.items;
+      total.value = res.total;
+    } catch (error) {
+      console.error(error);
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const loadMore = async () => {
+    if (noMore.value || loadingMore.value || loading.value) return;
+    loadingMore.value = true;
+    currentPage.value++;
+    try {
+      const res = await getFileList({
+        parent_id: currentFolderId.value,
+        page: currentPage.value,
+        pageSize: pageSize.value,
+      });
+      fileList.value = [...fileList.value, ...res.items];
+      total.value = res.total;
+    } catch (error) {
+      console.error(error);
+      currentPage.value--;
+    } finally {
+      loadingMore.value = false;
+    }
+  };
+
+  const navigateToFolder = (folderId: null | string, folderName?: string) => {
+    currentFolderId.value = folderId;
+    selectedFileIds.value.clear();
+
+    // 更新面包屑 (这里只是简单的逻辑，实际可能需要根据树结构查找完整路径)
+    if (folderId === null) {
+      breadcrumbs.value = [{ id: null, name: $t('file-manager.myFiles') }];
+    } else if (folderName) {
+      // 如果是点击面包屑导航回去，需要截断
+      const index = breadcrumbs.value.findIndex((b) => b.id === folderId);
+      if (index === -1) {
+        // 进入新文件夹
+        breadcrumbs.value.push({ id: folderId, name: folderName });
+      } else {
+        breadcrumbs.value = breadcrumbs.value.slice(0, index + 1);
+      }
+    }
+    // fetchFiles 由 FileList.vue 中的 watch(currentFolderId) 自动触发
+  };
+
+  const toggleSelection = (id: string, multi: boolean) => {
+    if (multi) {
+      if (selectedFileIds.value.has(id)) {
+        selectedFileIds.value.delete(id);
+      } else {
+        selectedFileIds.value.add(id);
+      }
+    } else {
+      selectedFileIds.value.clear();
+      selectedFileIds.value.add(id);
+    }
+  };
+
+  const clearSelection = () => {
+    selectedFileIds.value.clear();
+  };
+
+  const openCreateFolderDialog = () => {
+    createFolderDialogVisible.value = true;
+  };
+
+  return {
+    currentFolderId,
+    viewMode,
+    selectedFileIds,
+    fileList,
+    loading,
+    loadingMore,
+    noMore,
+    breadcrumbs,
+    createFolderDialogVisible,
+    toggleViewMode,
+    navigateToFolder,
+    toggleSelection,
+    clearSelection,
+    fetchFiles,
+    loadMore,
+    openCreateFolderDialog,
+  };
+}
diff --git a/web/apps/web-ele/src/views/_core/file-manager/index.vue b/web/apps/web-ele/src/views/_core/file-manager/index.vue
new file mode 100644
index 0000000..0512e94
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/file-manager/index.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+
+import CreateFolderDialog from './components/CreateFolderDialog.vue';
+import FileList from './components/FileList.vue';
+import FileToolbar from './components/FileToolbar.vue';
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div
+      class="bg-background flex h-full w-full flex-col overflow-hidden rounded-[10px]"
+    >
+      <FileToolbar />
+      <div class="flex-1 overflow-hidden">
+        <FileList />
+      </div>
+      <CreateFolderDialog />
+    </div>
+  </Page>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/login-log/data.ts b/web/apps/web-ele/src/views/_core/login-log/data.ts
new file mode 100644
index 0000000..dc14648
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/login-log/data.ts
@@ -0,0 +1,242 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { LoginLog } from '#/api/core/login-log';
+
+import { $t } from '@vben/locales';
+
+/**
+ * 获取登录状态选项
+ */
+export function getStatusOptions() {
+  return [
+    { type: 'danger', label: $t('loginLog.statusFailed'), value: 0 },
+    { type: 'success', label: $t('loginLog.statusSuccess'), value: 1 },
+  ];
+}
+
+/**
+ * 获取失败原因选项
+ */
+export function getFailureReasonOptions() {
+  return [
+    { label: $t('loginLog.failureReasonUnknown'), value: 0 },
+    { label: $t('loginLog.failureReasonUserNotExist'), value: 1 },
+    { label: $t('loginLog.failureReasonPasswordError'), value: 2 },
+    { label: $t('loginLog.failureReasonUserDisabled'), value: 3 },
+    { label: $t('loginLog.failureReasonUserLocked'), value: 4 },
+    { label: $t('loginLog.failureReasonUserInactive'), value: 5 },
+    { label: $t('loginLog.failureReasonAccountAbnormal'), value: 6 },
+    { label: $t('loginLog.failureReasonOther'), value: 7 },
+  ];
+}
+
+/**
+ * 获取设备类型选项
+ */
+export function getDeviceTypeOptions() {
+  return [
+    { label: $t('loginLog.deviceTypeDesktop'), value: 'desktop' },
+    { label: $t('loginLog.deviceTypeMobile'), value: 'mobile' },
+    { label: $t('loginLog.deviceTypeTablet'), value: 'tablet' },
+    { label: $t('loginLog.deviceTypeOther'), value: 'other' },
+  ];
+}
+
+/**
+ * 获取登录方式选项
+ */
+export function getLoginTypeOptions() {
+  return [
+    { label: '密码登录', value: 'password', type: 'info' },
+    { label: '验证码登录', value: 'code', type: 'info' },
+    { label: '二维码登录', value: 'qrcode', type: 'info' },
+    { label: 'Gitee', value: 'gitee', type: 'success' },
+    { label: 'GitHub', value: 'github', type: 'success' },
+    { label: 'QQ', value: 'qq', type: 'success' },
+    { label: 'Google', value: 'google', type: 'success' },
+    { label: '微信', value: 'wechat', type: 'success' },
+    { label: '微软', value: 'microsoft', type: 'success' },
+    { label: '钉钉', value: 'dingtalk', type: 'success' },
+    { label: '飞书', value: 'feishu', type: 'success' },
+  ];
+}
+
+/**
+ * 获取搜索表单的字段配置
+ */
+export function useSearchFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'username',
+      label: $t('loginLog.username'),
+      componentProps: {
+        placeholder: $t('loginLog.searchPlaceholder', [
+          $t('loginLog.username'),
+        ]),
+      },
+    },
+
+    {
+      component: 'Select',
+      fieldName: 'status',
+      label: $t('loginLog.status'),
+      componentProps: {
+        placeholder: $t('loginLog.selectStatus'),
+        options: getStatusOptions(),
+        clearable: true,
+      },
+    },
+
+    {
+      component: 'Select',
+      fieldName: 'login_type',
+      label: '登录方式',
+      componentProps: {
+        placeholder: '请选择登录方式',
+        options: getLoginTypeOptions(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/**
+ * 获取表格列配置
+ */
+export function useColumns(
+  onActionClick?: OnActionClickFn<LoginLog>,
+): VxeTableGridOptions<LoginLog>['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      minWidth: 60,
+      align: 'center',
+      fixed: 'left',
+    },
+    {
+      field: 'username',
+      title: $t('loginLog.username'),
+      minWidth: 120,
+      fixed: 'left',
+    },
+    {
+      field: 'status',
+      title: $t('loginLog.status'),
+      minWidth: 100,
+      cellRender: {
+        name: 'CellTag',
+        options: getStatusOptions(),
+      },
+    },
+    {
+      field: 'login_type',
+      title: '登录方式',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellTag',
+        options: getLoginTypeOptions(),
+      },
+    },
+    {
+      field: 'login_ip',
+      title: $t('loginLog.loginIp'),
+      minWidth: 140,
+    },
+    {
+      field: 'ip_location',
+      title: $t('loginLog.ipLocation'),
+      minWidth: 150,
+    },
+    {
+      field: 'failure_reason',
+      title: $t('loginLog.failureReason'),
+      minWidth: 120,
+      cellRender: {
+        name: 'CellTag',
+        options: getFailureReasonOptions().map((opt) => ({
+          ...opt,
+          type: 'danger',
+        })),
+      },
+      visible: false,
+    },
+    {
+      field: 'failure_message',
+      title: $t('loginLog.failureMessage'),
+      minWidth: 180,
+      showOverflow: 'tooltip',
+      visible: false,
+    },
+    {
+      field: 'browser_type',
+      title: $t('loginLog.browserType'),
+      minWidth: 120,
+    },
+    {
+      field: 'os_type',
+      title: $t('loginLog.osType'),
+      minWidth: 120,
+    },
+    {
+      field: 'device_type',
+      title: $t('loginLog.deviceType'),
+      minWidth: 100,
+      cellRender: {
+        name: 'CellTag',
+        options: getDeviceTypeOptions().map((opt) => ({
+          ...opt,
+          type: 'info',
+        })),
+      },
+    },
+    {
+      field: 'duration',
+      title: $t('loginLog.durationSeconds'),
+      minWidth: 120,
+      visible: false,
+    },
+    {
+      field: 'remark',
+      title: $t('loginLog.remark'),
+      minWidth: 150,
+      showOverflow: 'tooltip',
+      visible: false,
+    },
+    {
+      field: 'sys_create_datetime',
+      title: $t('loginLog.loginTime'),
+      minWidth: 180,
+      sortable: true,
+    },
+    {
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'username',
+          nameTitle: $t('loginLog.username'),
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: [
+          {
+            code: 'detail',
+            text: $t('loginLog.detail'),
+            icon: 'ep:document',
+          },
+          {
+            code: 'delete',
+            text: $t('common.delete'),
+            icon: 'ep:delete',
+          },
+        ],
+      },
+      field: 'operation',
+      fixed: 'right',
+      headerAlign: 'center',
+      showOverflow: false,
+      title: $t('loginLog.operation'),
+      minWidth: 150,
+    },
+  ];
+}
diff --git a/web/apps/web-ele/src/views/_core/login-log/index.vue b/web/apps/web-ele/src/views/_core/login-log/index.vue
new file mode 100644
index 0000000..5bdf75a
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/login-log/index.vue
@@ -0,0 +1,191 @@
+<script lang="ts" setup>
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { LoginLog } from '#/api/core/login-log';
+
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  batchDeleteLoginLogApi,
+  deleteLoginLogApi,
+  getLoginLogDetailApi,
+  getLoginLogListApi,
+} from '#/api/core/login-log';
+
+import { useColumns, useSearchFormSchema } from './data';
+import DetailDrawer from './modules/detail-drawer.vue';
+
+defineOptions({ name: 'SystemLoginLog' });
+
+const selectedRows = ref<LoginLog[]>([]);
+const detailDrawerRef = ref();
+const currentLog = ref<LoginLog>();
+
+/**
+ * 查看详情
+ */
+async function onDetail(row: LoginLog) {
+  try {
+    const log = await getLoginLogDetailApi(row.id);
+    currentLog.value = log;
+    detailDrawerRef.value?.open();
+  } catch (error) {
+    ElMessage.error($t('loginLog.getDetailError'));
+    console.error($t('loginLog.getDetailError'), error);
+  }
+}
+
+/**
+ * 删除单条日志
+ */
+function onDelete(row: LoginLog) {
+  ElMessageBox.confirm(
+    $t('loginLog.deleteConfirm', [row.username]),
+    $t('common.delete'),
+    {
+      confirmButtonText: $t('common.confirm'),
+      cancelButtonText: $t('common.cancel'),
+      type: 'warning',
+    },
+  )
+    .then(async () => {
+      try {
+        await deleteLoginLogApi(row.id);
+        ElMessage.success($t('loginLog.deleteSuccess'));
+        refreshGrid();
+      } catch {
+        ElMessage.error($t('loginLog.deleteError'));
+      }
+    })
+    .catch(() => {
+      // 用户取消了操作
+    });
+}
+
+/**
+ * 批量删除日志
+ */
+function onBatchDelete() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning($t('loginLog.selectLogsToDelete'));
+    return;
+  }
+
+  const usernames = selectedRows.value
+    .map((row: LoginLog) => row.username)
+    .join('、');
+  const confirmMessage = $t('loginLog.batchDeleteConfirm', [
+    selectedRows.value.length,
+    usernames,
+  ]);
+
+  ElMessageBox.confirm(confirmMessage, $t('loginLog.batchDeleteTitle'), {
+    confirmButtonText: $t('common.confirm'),
+    cancelButtonText: $t('common.cancel'),
+    type: 'warning',
+  })
+    .then(async () => {
+      try {
+        const ids = selectedRows.value.map((row: LoginLog) => row.id);
+        await batchDeleteLoginLogApi(ids);
+        ElMessage.success($t('loginLog.deleteSuccess'));
+        selectedRows.value = [];
+        refreshGrid();
+      } catch {
+        ElMessage.error($t('loginLog.deleteError'));
+      }
+    })
+    .catch(() => {
+      // 用户取消了操作
+    });
+}
+
+/**
+ * 表格操作按钮的回调函数
+ */
+function onActionClick({ code, row }: OnActionClickParams<LoginLog>) {
+  switch (code) {
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
+    case 'detail': {
+      onDetail(row);
+      break;
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useSearchFormSchema(),
+    submitOnChange: true,
+  },
+  gridEvents: {
+    checkboxAll: ({ records }: { records: LoginLog[] }) => {
+      selectedRows.value = records;
+    },
+    checkboxChange: ({ records }: { records: LoginLog[] }) => {
+      selectedRows.value = records;
+    },
+  },
+  gridOptions: {
+    columns: useColumns(onActionClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const params = {
+            page: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          };
+          return await getLoginLogListApi(params);
+        },
+      },
+    },
+    checkboxConfig: {
+      reserve: true,
+      trigger: 'default',
+    },
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: { code: 'query' },
+      search: true,
+      zoom: true,
+    },
+  } as VxeTableGridOptions<LoginLog>,
+});
+
+/**
+ * 刷新表格
+ */
+function refreshGrid() {
+  gridApi.query();
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DetailDrawer ref="detailDrawerRef" :log="currentLog" />
+
+    <Grid>
+      <template #table-title>
+        <ElButton type="danger" plain @click="onBatchDelete">
+          {{ $t('loginLog.batchDelete') }}
+          {{ selectedRows.length > 0 ? `(${selectedRows.length})` : '' }}
+        </ElButton>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/login-log/modules/detail-drawer.vue b/web/apps/web-ele/src/views/_core/login-log/modules/detail-drawer.vue
new file mode 100644
index 0000000..92af875
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/login-log/modules/detail-drawer.vue
@@ -0,0 +1,180 @@
+<script lang="ts" setup>
+import type { LoginLog } from '#/api/core/login-log';
+
+import { computed } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus';
+
+import {
+  getDeviceTypeOptions,
+  getFailureReasonOptions,
+  getStatusOptions,
+} from '../data';
+
+interface Props {
+  log?: LoginLog;
+}
+
+const props = defineProps<Props>();
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: $t('loginLog.detailTitle'),
+  footer: false,
+  loading: false,
+});
+
+/**
+ * 获取登录状态显示
+ */
+const statusDisplay = computed(() => {
+  if (!props.log) return '';
+  const option = getStatusOptions().find(
+    (opt) => opt.value === props.log?.status,
+  );
+  return option?.label || '';
+});
+
+/**
+ * 获取登录状态类型
+ */
+const statusType = computed(() => {
+  if (!props.log) return 'info';
+  const option = getStatusOptions().find(
+    (opt) => opt.value === props.log?.status,
+  );
+  return option?.type || 'info';
+});
+
+/**
+ * 获取失败原因显示
+ */
+const failureReasonDisplay = computed(() => {
+  if (!props.log || props.log.failure_reason === undefined) return '';
+  const option = getFailureReasonOptions().find(
+    (opt) => opt.value === props.log?.failure_reason,
+  );
+  return option?.label || '';
+});
+
+/**
+ * 获取设备类型显示
+ */
+const deviceTypeDisplay = computed(() => {
+  if (!props.log) return '';
+  const option = getDeviceTypeOptions().find(
+    (opt) => opt.value === props.log?.device_type,
+  );
+  return option?.label || props.log.device_type || '';
+});
+
+/**
+ * 格式化时长
+ */
+function formatDuration(seconds?: number) {
+  if (!seconds) return $t('loginLog.formatZeroSeconds');
+
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+
+  const parts = [];
+  if (hours > 0) parts.push($t('loginLog.formatHours', [hours]));
+  if (minutes > 0) parts.push($t('loginLog.formatMinutes', [minutes]));
+  if (secs > 0) parts.push($t('loginLog.formatSeconds', [secs]));
+
+  return parts.join('');
+}
+
+defineExpose({
+  open: drawerApi.open,
+  close: drawerApi.close,
+});
+</script>
+
+<template>
+  <Drawer>
+    <template v-if="log">
+      <ElDescriptions :column="1" border>
+        <ElDescriptionsItem :label="$t('loginLog.username')">
+          {{ log.username }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem :label="$t('loginLog.userId')" v-if="log.user_id">
+          {{ log.user_id }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem :label="$t('loginLog.status')">
+          <ElTag :type="statusType as any">{{ statusDisplay }}</ElTag>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          :label="$t('loginLog.failureReason')"
+          v-if="log.status === 0 && log.failure_reason !== undefined"
+        >
+          <ElTag type="danger">{{ failureReasonDisplay }}</ElTag>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          :label="$t('loginLog.failureMessage')"
+          v-if="log.status === 0 && log.failure_message"
+        >
+          {{ log.failure_message }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem :label="$t('loginLog.loginIp')">
+          {{ log.login_ip }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          :label="$t('loginLog.ipLocation')"
+          v-if="log.ip_location"
+        >
+          {{ log.ip_location }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          :label="$t('loginLog.browserType')"
+          v-if="log.browser_type"
+        >
+          {{ log.browser_type }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem :label="$t('loginLog.osType')" v-if="log.os_type">
+          {{ log.os_type }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          :label="$t('loginLog.deviceType')"
+          v-if="log.device_type"
+        >
+          <ElTag type="info">{{ deviceTypeDisplay }}</ElTag>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          :label="$t('loginLog.duration')"
+          v-if="log.duration"
+        >
+          {{ formatDuration(log.duration) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          :label="$t('loginLog.sessionId')"
+          v-if="log.session_id"
+        >
+          {{ log.session_id }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem
+          :label="$t('loginLog.userAgent')"
+          v-if="log.user_agent"
+        >
+          <div class="max-w-full break-all text-sm">
+            {{ log.user_agent }}
+          </div>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem :label="$t('loginLog.remark')" v-if="log.remark">
+          {{ log.remark }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem :label="$t('loginLog.loginTime')">
+          {{ log.sys_create_datetime }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </template>
+    <template v-else>
+      <div class="py-8 text-center text-gray-500">
+        {{ $t('loginLog.noData') }}
+      </div>
+    </template>
+  </Drawer>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/menu/modules/menu-form-modal.vue b/web/apps/web-ele/src/views/_core/menu/modules/menu-form-modal.vue
index 4bd873c..193c04e 100644
--- a/web/apps/web-ele/src/views/_core/menu/modules/menu-form-modal.vue
+++ b/web/apps/web-ele/src/views/_core/menu/modules/menu-form-modal.vue
@@ -20,6 +20,7 @@ import {
   getAllMenuTreeApi,
 } from '#/api/core/menu';
 import { ZqDialog } from '#/components/zq-dialog';
+import { filterLightMenuTree } from '#/router/light-menu';
 import { useAppContextStore } from '#/store/app-context';
 
 const emit = defineEmits<{
@@ -51,8 +52,8 @@ function processMenuData(menus: any[]): any[] {
 async function getMenuListProcessed() {
   const applicationId = appContextStore.currentApp?.id;
   const data = await getAllMenuTreeApi(applicationId);
-  menuTreeData.value = data;
-  return processMenuData(data);
+  menuTreeData.value = filterLightMenuTree(data);
+  return processMenuData(menuTreeData.value);
 }
 
 /**
diff --git a/web/apps/web-ele/src/views/_core/menu/modules/menu-form.vue b/web/apps/web-ele/src/views/_core/menu/modules/menu-form.vue
index bd74ee4..440ac70 100644
--- a/web/apps/web-ele/src/views/_core/menu/modules/menu-form.vue
+++ b/web/apps/web-ele/src/views/_core/menu/modules/menu-form.vue
@@ -26,6 +26,7 @@ import {
   getAllMenuTreeApi,
   updateMenuApi,
 } from '#/api/core/menu';
+import { filterLightMenuTree } from '#/router/light-menu';
 import { useAppContextStore } from '#/store/app-context';
 
 import { getMenuTypeOptions } from '../data';
@@ -57,7 +58,7 @@ function processMenuData(menus: any[]): any[] {
 async function getMenuListProcessed() {
   const applicationId = appContextStore.currentApp?.id;
   const data = await getAllMenuTreeApi(applicationId);
-  return processMenuData(data);
+  return processMenuData(filterLightMenuTree(data));
 }
 
 /**
diff --git a/web/apps/web-ele/src/views/_core/menu/modules/menu-tree.vue b/web/apps/web-ele/src/views/_core/menu/modules/menu-tree.vue
index 0d02d67..bd8cb76 100644
--- a/web/apps/web-ele/src/views/_core/menu/modules/menu-tree.vue
+++ b/web/apps/web-ele/src/views/_core/menu/modules/menu-tree.vue
@@ -25,6 +25,7 @@ import {
   searchMenuApi,
 } from '#/api/core/menu';
 import { ZqTabs } from '#/components/zq-tabs';
+import { filterLightMenuTree } from '#/router/light-menu';
 import { useAppContextStore } from '#/store/app-context';
 
 import MenuFormModal from './menu-form-modal.vue';
@@ -138,7 +139,9 @@ async function fetchMenuList(autoSelectFirst = false) {
     // 获取完整的菜单树（全量加载），传入当前应用ID
     const applicationId = appContextStore.currentApp?.id;
     const data = await getAllMenuTreeApi(applicationId, false);
-    treeData.value = transformMenuTreeData(Array.isArray(data) ? data : []);
+    treeData.value = transformMenuTreeData(
+      filterLightMenuTree(Array.isArray(data) ? data : []),
+    );
 
     // 如果需要自动选中第一个菜单
     if (autoSelectFirst && treeData.value.length > 0) {
@@ -307,7 +310,9 @@ watch(searchKeyword, (newVal) => {
     try {
       const results = await searchMenuApi(newVal);
       // 转换搜索结果数据结构
-      const transformedResults = transformMenuData(results || []);
+      const transformedResults = transformMenuData(
+        filterLightMenuTree(results || []),
+      );
       searchResults.value = transformedResults;
       // 自动展开搜索结果中的所有节点，显示完整路径
       if (transformedResults && transformedResults.length > 0) {
diff --git a/web/apps/web-ele/src/views/_core/page-render/index.vue b/web/apps/web-ele/src/views/_core/page-render/index.vue
index f3878a1..6420d28 100644
--- a/web/apps/web-ele/src/views/_core/page-render/index.vue
+++ b/web/apps/web-ele/src/views/_core/page-render/index.vue
@@ -1,28 +1,33 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { ElEmpty, ElMessage, ElScrollbar } from 'element-plus';
 
-import AiAgentHome from './AiAgentHome.vue';
+import { getPageByCodeApi } from '#/api/online-dev/page-manager';
+import DashboardRenderer from '#/components/dashboard-design/DashboardRenderer.vue';
 
 defineOptions({ name: 'PageRender' });
 
-const AI_AGENT_HOME_CODE = 'main_home';
 const route = useRoute();
 const loading = ref(false);
+const pageConfig = ref<string>('');
+const pageName = ref('');
 const pageCode = ref('');
-const isHomePage = computed(() => pageCode.value === AI_AGENT_HOME_CODE);
 
+// 获取页面编码
 function getPageCode(): string {
+  // 优先从 query 获取
   if (route.query.pageCode) {
     return route.query.pageCode as string;
   }
 
+  // 其次从 params 获取
   if (route.params.code) {
     return route.params.code as string;
   }
 
+  // 最后从路径中提取（路径格式：/page-render/xxx）
   const pathParts = route.path.split('/').filter(Boolean);
   const length = pathParts.length;
   if (length >= 2 && pathParts[length - 2] === 'page-render') {
@@ -32,6 +37,7 @@ function getPageCode(): string {
   return '';
 }
 
+// 加载页面数据
 async function loadPageData() {
   const code = getPageCode();
   if (!code) {
@@ -43,9 +49,12 @@ async function loadPageData() {
   loading.value = true;
 
   try {
-    if (!isHomePage.value) {
-      ElMessage.warning('轻量版已停用在线页面渲染');
-    }
+    const page = await getPageByCodeApi(code);
+    pageName.value = page.name;
+    pageConfig.value =
+      page.page_config && Object.keys(page.page_config).length > 0
+        ? JSON.stringify(page.page_config)
+        : '';
   } catch (error: any) {
     ElMessage.error(error?.message || '加载页面失败');
   } finally {
@@ -57,6 +66,7 @@ onMounted(() => {
   loadPageData();
 });
 
+// 监听路由变化
 watch(
   () => route.fullPath,
   () => {
@@ -67,16 +77,9 @@ watch(
 
 <template>
   <ElScrollbar class="rounded-[8px] py-3">
-    <div
-      v-loading="loading"
-      class="min-h-[calc(100vh-120px)] rounded-[8px] px-3"
-    >
-      <AiAgentHome v-if="isHomePage" />
-      <ElEmpty
-        v-else-if="!loading"
-        description="轻量版已移除在线页面渲染"
-        class="py-20"
-      />
+    <div v-loading="loading" class="h-[calc(100vh-120px)] rounded-[8px] px-3">
+      <DashboardRenderer v-if="pageConfig" :config="pageConfig" />
+      <ElEmpty v-else-if="!loading" description="暂无页面配置" />
     </div>
   </ElScrollbar>
 </template>
diff --git a/web/apps/web-ele/src/views/_core/permission/modules/permission-left-panel.vue b/web/apps/web-ele/src/views/_core/permission/modules/permission-left-panel.vue
index b834331..d1e2b71 100644
--- a/web/apps/web-ele/src/views/_core/permission/modules/permission-left-panel.vue
+++ b/web/apps/web-ele/src/views/_core/permission/modules/permission-left-panel.vue
@@ -16,6 +16,7 @@ import {
 } from 'element-plus';
 
 import { getAllMenuTreeApi, searchMenuApi } from '#/api/core/menu';
+import { filterLightMenuTree } from '#/router/light-menu';
 import { useAppContextStore } from '#/store/app-context';
 
 const emit = defineEmits<{
@@ -45,7 +46,7 @@ async function fetchMenuList() {
     // 获取当前应用ID，子应用只显示子应用的菜单
     const applicationId = appContextStore.currentApp?.id;
     const data = await getAllMenuTreeApi(applicationId, false); // 不使用缓存，确保获取最新数据
-    treeData.value = Array.isArray(data) ? data : [];
+    treeData.value = filterLightMenuTree(Array.isArray(data) ? data : []);
 
     // 自动展开第一级
     if (treeData.value.length > 0) {
@@ -157,7 +158,7 @@ watch(searchKeyword, (newVal) => {
     isSearching.value = true;
     try {
       const results = await searchMenuApi(newVal);
-      searchResults.value = results || [];
+      searchResults.value = filterLightMenuTree(results || []);
       // 自动展开搜索结果中的所有节点，显示完整路径
       if (searchResults.value && searchResults.value.length > 0) {
         autoExpandSearchResults(searchResults.value);
diff --git a/web/apps/web-ele/src/views/_core/post/data.ts b/web/apps/web-ele/src/views/_core/post/data.ts
new file mode 100644
index 0000000..a4999b2
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/post/data.ts
@@ -0,0 +1,187 @@
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn } from '#/adapter/vxe-table';
+import type { Post } from '#/api/core/post';
+
+import { $t } from '@vben/locales';
+
+import { z } from '#/adapter/form';
+
+/**
+ * 获取搜索表单的字段配置
+ */
+export function useSearchFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: $t('system.user.userName'),
+    },
+    {
+      component: 'Input',
+      fieldName: 'username',
+      label: $t('system.user.account'),
+    },
+  ];
+}
+
+/**
+ * 获取岗位类型选项
+ */
+export function getPostTypeOptions() {
+  return [
+    { label: $t('post.types.management'), value: 0 },
+    { label: $t('post.types.technical'), value: 1 },
+    { label: $t('post.types.business'), value: 2 },
+    { label: $t('post.types.functional'), value: 3 },
+    { label: $t('post.types.other'), value: 4 },
+  ];
+}
+
+/**
+ * 获取岗位级别选项
+ */
+export function getPostLevelOptions() {
+  return [
+    { label: $t('post.levels.senior'), value: 0 },
+    { label: $t('post.levels.middle'), value: 1 },
+    { label: $t('post.levels.basic'), value: 2 },
+    { label: $t('post.levels.staff'), value: 3 },
+  ];
+}
+
+/**
+ * 获取岗位树列配置
+ */
+export function usePostTreeColumns(
+  onActionClick?: OnActionClickFn<Post>,
+): VxeTableGridOptions<Post>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: $t('post.postName'),
+      minWidth: 150,
+    },
+  ];
+}
+
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: $t('post.postName'),
+      rules: z
+        .string()
+        .min(2, $t('ui.formRules.minLength', [$t('post.postName'), 2]))
+        .max(64, $t('ui.formRules.maxLength', [$t('post.postName'), 64])),
+    },
+    {
+      component: 'Input',
+      fieldName: 'code',
+      label: $t('post.postCode'),
+      rules: z
+        .string()
+        .min(2, $t('ui.formRules.minLength', [$t('post.postCode'), 2]))
+        .max(32, $t('ui.formRules.maxLength', [$t('post.postCode'), 32]))
+        .regex(/^[\w-]+$/, $t('post.codeFormatError')),
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        options: getPostTypeOptions(),
+      },
+      defaultValue: 4,
+      fieldName: 'post_type',
+      label: $t('post.postType'),
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        options: getPostLevelOptions(),
+      },
+      defaultValue: 3,
+      fieldName: 'post_level',
+      label: $t('post.postLevel'),
+    },
+    {
+      component: 'DeptSelector',
+      componentProps: {
+        placeholder: $t('post.selectDepartment'),
+      },
+      fieldName: 'dept_id',
+      label: $t('post.department'),
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: $t('post.descriptionPlaceholder'),
+        rows: 3,
+      },
+      fieldName: 'description',
+      label: $t('post.description'),
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          { label: $t('common.enabled'), value: true },
+          { label: $t('common.disabled'), value: false },
+        ],
+      },
+      defaultValue: true,
+      fieldName: 'status',
+      label: $t('post.status'),
+    },
+  ];
+}
+
+/**
+ * 获取用户表格列配置
+ */
+export function useUserColumns(
+  onActionClick?: OnActionClickFn<Post>,
+): VxeTableGridOptions<Post>['columns'] {
+  return [
+    {
+      type: 'checkbox',
+      minWidth: 60,
+      align: 'center',
+      fixed: 'left',
+    },
+    {
+      field: 'username',
+      title: $t('system.user.account'),
+      minWidth: 120,
+    },
+    {
+      field: 'name',
+      title: $t('system.user.userName'),
+      minWidth: 120,
+    },
+    {
+      field: 'email',
+      title: $t('system.user.email'),
+      minWidth: 180,
+    },
+    {
+      align: 'right',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: $t('system.user.userName'),
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+        options: ['edit', 'delete'],
+      },
+      field: 'operation',
+      fixed: 'right',
+      headerAlign: 'center',
+      showOverflow: false,
+      title: $t('system.user.operation'),
+      minWidth: 150,
+    },
+  ];
+}
diff --git a/web/apps/web-ele/src/views/_core/post/index.vue b/web/apps/web-ele/src/views/_core/post/index.vue
new file mode 100644
index 0000000..0012988
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/post/index.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
+
+import { addPostUsersApi, removePostUsersApi } from '#/api/core/post';
+import { UserListPanel } from '#/components/user-list-panel';
+import { UserSelector } from '#/components/zq-form/user-selector';
+
+import PostList from './modules/post-list.vue';
+
+defineOptions({ name: 'SystemPost' });
+
+const currentPostId = ref<string>();
+const tempSelectedUsers = ref<Set<string>>(new Set());
+const userListPanelRef = ref<InstanceType<typeof UserListPanel>>();
+
+/**
+ * 岗位选择事件
+ */
+function onPostSelect(postId: string | undefined) {
+  currentPostId.value = postId;
+  tempSelectedUsers.value.clear();
+}
+
+/**
+ * 处理用户选择
+ */
+function handleUserSelect(userId: string, _user: any) {
+  if (tempSelectedUsers.value.has(userId)) {
+    tempSelectedUsers.value.delete(userId);
+  } else {
+    tempSelectedUsers.value.add(userId);
+  }
+}
+
+/**
+ * 处理移除用户
+ */
+function handleRemoveUser(userId: string) {
+  tempSelectedUsers.value.delete(userId);
+}
+
+/**
+ * 新增用户到岗位（作为 UserSelector 的 onConfirm 回调）
+ */
+async function handleAddUsers(userIds: string | string[]) {
+  if (!currentPostId.value) {
+    ElMessage.warning($t('post.selectPostFirst') || '请先选择岗位');
+    throw new Error('请先选择岗位');
+  }
+
+  const userIdsArray = Array.isArray(userIds) ? userIds : [userIds];
+
+  if (userIdsArray.length === 0) {
+    ElMessage.warning($t('post.selectUsersFirst') || '请先选择用户');
+    throw new Error('请先选择用户');
+  }
+
+  await addPostUsersApi(currentPostId.value, {
+    user_ids: userIdsArray,
+  });
+
+  ElMessage.success($t('post.addUsersSuccess') || '添加成功');
+  // 刷新用户列表
+  userListPanelRef.value?.reload();
+}
+
+/**
+ * 从岗位删除用户
+ */
+async function handleRemoveUsers() {
+  if (!currentPostId.value) {
+    ElMessage.warning($t('post.selectPostFirst') || '请先选择岗位');
+    return;
+  }
+
+  if (tempSelectedUsers.value.size === 0) {
+    ElMessage.warning($t('post.selectUsersFirst') || '请先选择用户');
+    return;
+  }
+
+  const userIds = [...tempSelectedUsers.value];
+  const confirmMessage =
+    $t('post.removeUsersConfirm', [tempSelectedUsers.value.size]) ||
+    `确定要删除选中的 ${tempSelectedUsers.value.size} 个用户吗？`;
+
+  try {
+    await ElMessageBox.confirm(confirmMessage, $t('common.delete') || '删除', {
+      confirmButtonText: $t('common.confirm') || '确定',
+      cancelButtonText: $t('common.cancel') || '取消',
+      type: 'warning',
+    });
+
+    await removePostUsersApi(currentPostId.value, {
+      user_ids: userIds,
+    });
+    ElMessage.success($t('post.removeUsersSuccess') || '删除成功');
+    tempSelectedUsers.value.clear();
+    // 刷新用户列表
+    userListPanelRef.value?.reload();
+  } catch (error) {
+    if (error !== 'cancel') {
+      console.error('Failed to remove users:', error);
+      ElMessage.error($t('post.removeUsersFailed') || '删除失败');
+    }
+  }
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full">
+      <!-- 岗位列表 -->
+      <div class="mr-3 w-1/6">
+        <PostList @select="onPostSelect" />
+      </div>
+
+      <!-- 主内容区：用户列表 -->
+      <div class="w-5/6">
+        <UserListPanel
+          ref="userListPanelRef"
+          :data-source="currentPostId ? 'post' : 'all'"
+          :source-id="currentPostId"
+          :temp-selected-users="tempSelectedUsers"
+          :filterable="true"
+          :multiple="true"
+          :selectable="true"
+          :show-selected-tags="false"
+          :show-border="false"
+          @user-select="handleUserSelect"
+          @remove-user="handleRemoveUser"
+        >
+          <template #title>
+            <div class="flex items-center gap-2">
+              <UserSelector
+                :multiple="true"
+                :disabled="!currentPostId"
+                display-mode="button"
+                :placeholder="$t('common.add') || '新增'"
+                :on-confirm="handleAddUsers"
+              />
+              <ElButton
+                type="danger"
+                plain
+                :disabled="!currentPostId || tempSelectedUsers.size === 0"
+                @click="handleRemoveUsers"
+              >
+                {{ $t('common.delete') || '删除' }}
+              </ElButton>
+            </div>
+          </template>
+        </UserListPanel>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/post/modules/post-form-modal.vue b/web/apps/web-ele/src/views/_core/post/modules/post-form-modal.vue
new file mode 100644
index 0000000..89cf4d7
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/post/modules/post-form-modal.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import type { Post } from '#/api/core/post';
+
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createPostApi, updatePostApi } from '#/api/core/post';
+import { ZqDialog } from '#/components/zq-dialog';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<Post>();
+const visible = ref(false);
+const confirmLoading = ref(false);
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', [$t('post.name')])
+    : $t('ui.actionTitle.create', [$t('post.name')]);
+});
+
+const [Form, formApi] = useVbenForm({
+  layout: 'vertical',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+function resetForm() {
+  formApi.resetForm();
+  formApi.setValues(formData.value || {});
+}
+
+async function onSubmit() {
+  const { valid } = await formApi.validate();
+  if (valid) {
+    confirmLoading.value = true;
+    const data = await formApi.getValues();
+    try {
+      await (formData.value?.id
+        ? updatePostApi(formData.value.id, data)
+        : createPostApi(data));
+      visible.value = false;
+      emit('success');
+    } finally {
+      confirmLoading.value = false;
+    }
+  }
+}
+
+function open(data?: Post) {
+  visible.value = true;
+  if (data) {
+    formData.value = data;
+    formApi.setValues(formData.value);
+  } else {
+    formData.value = undefined;
+    formApi.resetForm();
+  }
+}
+
+defineExpose({
+  open,
+});
+</script>
+
+<template>
+  <ZqDialog
+    v-model="visible"
+    :title="getTitle"
+    :confirm-loading="confirmLoading"
+    @confirm="onSubmit"
+  >
+    <Form class="mx-4" />
+    <template #footer-left>
+      <ElButton type="primary" @click="resetForm">
+        {{ $t('common.reset') }}
+      </ElButton>
+    </template>
+  </ZqDialog>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/post/modules/post-list.vue b/web/apps/web-ele/src/views/_core/post/modules/post-list.vue
new file mode 100644
index 0000000..555a9f2
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/post/modules/post-list.vue
@@ -0,0 +1,291 @@
+<script lang="ts" setup>
+import type { Post } from '#/api/core/post';
+import type { CardListOptions } from '#/components/card-list';
+
+import { onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElMessage,
+  ElMessageBox,
+  ElPopover,
+  ElTooltip,
+} from 'element-plus';
+
+import { deletePostApi, getPostListApi } from '#/api/core/post';
+import { CardList } from '#/components/card-list';
+
+import PostFormModal from './post-form-modal.vue';
+
+const emit = defineEmits<{
+  select: [postId: string | undefined];
+}>();
+
+const postList = ref<Post[]>([]);
+const loading = ref(false);
+const selectedPostId = ref<string>();
+const searchKeyword = ref<string>('');
+const hoveredPostId = ref<string>();
+const postFormModalRef = ref<InstanceType<typeof PostFormModal>>();
+
+// 卡片列表配置
+const cardListOptions: CardListOptions<Post> = {
+  searchFields: [{ field: 'name' }, { field: 'code' }],
+  titleField: 'name',
+};
+
+async function fetchPostList() {
+  try {
+    loading.value = true;
+    const response = await getPostListApi({ page: 1, pageSize: 100 });
+    postList.value = response.items || [];
+
+    // 自动选中第一个岗位
+    if (postList.value.length > 0 && !selectedPostId.value) {
+      const firstPost = postList.value.at(0);
+      if (firstPost) {
+        selectedPostId.value = firstPost.id;
+        emit('select', firstPost.id);
+      }
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * 处理岗位选择
+ */
+function onPostSelect(postId: string | undefined) {
+  selectedPostId.value = postId;
+  emit('select', postId);
+}
+
+/**
+ * 打开添加岗位对话框
+ */
+function onAddPost() {
+  postFormModalRef.value?.open();
+}
+
+/**
+ * 打开编辑岗位对话框
+ */
+function onEditPost(post: Post, e?: Event) {
+  e?.stopPropagation();
+  postFormModalRef.value?.open(post);
+}
+
+/**
+ * 删除岗位
+ */
+async function onDeletePost(post: Post, e?: Event) {
+  e?.stopPropagation();
+
+  ElMessageBox.confirm(
+    $t('ui.actionMessage.deleteConfirm', [post.name]),
+    $t('common.delete'),
+    {
+      confirmButtonText: $t('common.confirm'),
+      cancelButtonText: $t('common.cancel'),
+      type: 'warning',
+      showClose: false,
+    },
+  )
+    .then(async () => {
+      try {
+        await deletePostApi(post.id);
+        ElMessage.success($t('ui.actionMessage.deleteSuccess', [post.name]));
+
+        // 如果删除的是当前选中的岗位，清除选中状态
+        if (selectedPostId.value === post.id) {
+          selectedPostId.value = undefined;
+          emit('select', undefined);
+        }
+
+        await fetchPostList();
+      } catch {
+        ElMessage.error($t('ui.actionMessage.deleteError'));
+      }
+    })
+    .catch(() => {
+      // 用户取消了操作
+    });
+}
+
+/**
+ * 添加岗位成功后的回调
+ */
+async function onPostFormSuccess() {
+  ElMessage.success($t('ui.actionMessage.createSuccess', [$t('post.name')]));
+  await fetchPostList();
+}
+
+onMounted(() => {
+  fetchPostList();
+});
+</script>
+
+<template>
+  <CardList
+    :items="postList"
+    :loading="loading"
+    :selected-id="selectedPostId"
+    :hovered-id="hoveredPostId"
+    :search-keyword="searchKeyword"
+    :options="cardListOptions"
+    @select="onPostSelect"
+    @update:search-keyword="(v) => (searchKeyword = v)"
+    @update:hovered-id="(v) => (hoveredPostId = v)"
+    @add="onAddPost"
+    @edit="onEditPost"
+    @delete="onDeletePost"
+  >
+    <!-- 自定义项目渲染 -->
+    <template #item="{ item }">
+      <div class="truncate text-sm" :title="item.name">
+        {{ item.name }}
+      </div>
+    </template>
+
+    <!-- 详细信息 -->
+    <template #details="{ item }">
+      <div class="flex items-center gap-2 text-xs opacity-70">
+        <!-- 岗位编码 -->
+        <span class="truncate" :title="item.code">
+          {{ item.code }}
+        </span>
+
+        <!-- 分隔符 -->
+        <span class="text-gray-400">|</span>
+
+        <!-- 岗位类型 -->
+        <span v-if="item.post_type_display" class="flex-shrink-0">
+          {{ item.post_type_display }}
+        </span>
+
+        <!-- 部门 -->
+        <span
+          v-if="item.dept_name"
+          class="flex-1 truncate"
+          :title="item.dept_name"
+        >
+          {{ item.dept_name }}
+        </span>
+      </div>
+    </template>
+
+    <!-- 操作按钮 -->
+    <template #actions="{ item }">
+      <div class="flex flex-shrink-0" @click.stop>
+        <!-- 编辑按钮 -->
+        <ElTooltip :content="$t('post.edit')" placement="top">
+          <ElButton
+            type="primary"
+            text
+            size="small"
+            circle
+            @click="onEditPost(item, $event)"
+          >
+            <IconifyIcon icon="ep:edit" class="size-4" />
+          </ElButton>
+        </ElTooltip>
+
+        <!-- 删除按钮 -->
+        <ElButton
+          type="danger"
+          text
+          size="small"
+          circle
+          style="margin-left: 0"
+          :title="$t('common.delete')"
+          @click="onDeletePost(item, $event)"
+        >
+          <IconifyIcon icon="ep:delete" class="size-4" />
+        </ElButton>
+        <!-- 详情按钮 -->
+        <ElPopover placement="right" :width="300">
+          <template #reference>
+            <ElButton
+              type="info"
+              text
+              size="small"
+              style="margin-left: 0"
+              circle
+            >
+              <IconifyIcon icon="ep:info-filled" class="size-4" />
+            </ElButton>
+          </template>
+          <!-- Popover 内容：详细信息 -->
+          <div class="space-y-2 p-3 text-sm">
+            <div class="flex justify-between">
+              <span class="text-gray-600 dark:text-gray-400">岗位名称:</span>
+              <span class="font-medium">{{ item.name || '-' }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-gray-600 dark:text-gray-400">岗位编码:</span>
+              <span class="font-medium">{{ item.code || '-' }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-gray-600 dark:text-gray-400">岗位类型:</span>
+              <span class="font-medium">{{
+                item.post_type_display || '-'
+              }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-gray-600 dark:text-gray-400">岗位级别:</span>
+              <span class="font-medium">{{
+                item.post_level_display || '-'
+              }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-gray-600 dark:text-gray-400">所属部门:</span>
+              <span class="font-medium">{{ item.dept_name || '-' }}</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-gray-600 dark:text-gray-400">状态:</span>
+              <span class="font-medium">{{
+                item.status ? '启用' : '禁用'
+              }}</span>
+            </div>
+            <div
+              v-if="item.description"
+              class="border-t border-gray-200 pt-2 dark:border-gray-700"
+            >
+              <span class="text-gray-600 dark:text-gray-400">描述:</span>
+              <div
+                class="mt-1 max-h-32 overflow-y-auto break-words rounded bg-gray-100 p-2 text-xs dark:bg-gray-800"
+              >
+                {{ item.description }}
+              </div>
+            </div>
+          </div>
+        </ElPopover>
+      </div>
+    </template>
+
+    <!-- Modal 组件 -->
+    <template #modal>
+      <PostFormModal ref="postFormModalRef" @success="onPostFormSuccess" />
+    </template>
+  </CardList>
+</template>
+
+<style scoped>
+/* 输入框前置图标样式 */
+:deep(.el-input__icon) {
+  cursor: pointer;
+}
+
+/* 文本按钮样式 */
+:deep(.el-button--text) {
+  padding: 0 4px;
+}
+
+:deep(.el-popover__reference) {
+  padding: 0;
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/post/modules/user-form.vue b/web/apps/web-ele/src/views/_core/post/modules/user-form.vue
new file mode 100644
index 0000000..1a4ee26
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/post/modules/user-form.vue
@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { SystemPostApi } from '#/api/system/post';
+
+import { computed, ref } from 'vue';
+
+import { $t } from '@vben/locales';
+
+import { useVbenForm } from '#/adapter/form';
+import { ZqDialog } from '#/components/zq-dialog';
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const userData = ref<SystemPostApi.SystemPost>();
+const visible = ref(false);
+
+const formSchema: VbenFormSchema[] = [
+  {
+    component: 'Input',
+    fieldName: 'username',
+    label: $t('system.user.account'),
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'name',
+    label: $t('system.user.userName'),
+    componentProps: {
+      disabled: true,
+    },
+  },
+  {
+    component: 'Input',
+    fieldName: 'email',
+    label: $t('system.user.email'),
+    componentProps: {
+      disabled: true,
+    },
+  },
+];
+
+const [Form, formApi] = useVbenForm({
+  layout: 'vertical',
+  schema: formSchema,
+  showDefaultActions: false,
+});
+
+function onConfirm() {
+  visible.value = false;
+  emit('success');
+}
+
+function open(data: SystemPostApi.SystemPost) {
+  visible.value = true;
+  userData.value = data;
+  formApi.setValues(userData.value);
+}
+
+defineExpose({
+  open,
+});
+
+const getModalTitle = computed(() =>
+  $t('ui.actionTitle.view', [$t('system.user.name')]),
+);
+</script>
+
+<template>
+  <ZqDialog v-model="visible" :title="getModalTitle" @confirm="onConfirm">
+    <Form class="mx-4" />
+  </ZqDialog>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/role/modules/permission-assign-panel.vue b/web/apps/web-ele/src/views/_core/role/modules/permission-assign-panel.vue
index 76cc5ff..6397118 100644
--- a/web/apps/web-ele/src/views/_core/role/modules/permission-assign-panel.vue
+++ b/web/apps/web-ele/src/views/_core/role/modules/permission-assign-panel.vue
@@ -31,6 +31,7 @@ import {
   getRoleMenusApi,
   updateRoleMenusPermissionsApi,
 } from '#/api/core/role';
+import { filterLightMenuTree } from '#/router/light-menu';
 import { useAppContextStore } from '#/store/app-context';
 
 import FieldPermissionConfig from './field-permission-config.vue';
@@ -95,17 +96,6 @@ function filterTreeByApp(nodes: MenuNode[], appId?: string): MenuNode[] {
     }));
 }
 
-function filterAiAgentAdminTree(nodes: MenuNode[]): MenuNode[] {
-  return nodes
-    .filter((node) => AI_AGENT_ADMIN_MENU_NAMES.has(node.name))
-    .map((node) => ({
-      ...node,
-      children: node.children
-        ? filterAiAgentAdminTree(node.children as MenuNode[])
-        : [],
-    }));
-}
-
 function collectMenuIds(nodes: MenuNode[], ids: Set<string>) {
   nodes.forEach((node) => {
     ids.add(node.id);
@@ -130,26 +120,6 @@ const appList = ref<ApplicationListItem[]>([]);
 const selectedAppId = ref<string | undefined>(undefined);
 const loadingApps = ref(false);
 
-const AI_AGENT_ADMIN_MENU_NAMES = new Set([
-  'ControlCenter',
-  'AIPlatform',
-  'AIAgent',
-  'AIModelConfig',
-  'AIWorkflow',
-  'AIWorkflowRuns',
-  'KnowledgeBase',
-  'Codex',
-  'SystemManagement',
-  'SystemPermission',
-  'UserManagement',
-  'SystemMenu',
-  'SystemRole',
-  'Message',
-  'MessageList',
-  'AnnouncementList',
-  'AnnouncementManage',
-]);
-
 const AI_AGENT_ADMIN_APP_CODES = new Set(['ai_agent_admin']);
 
 const resourceScopeConfigRef = ref<InstanceType<typeof ResourceScopeConfig>>();
@@ -267,7 +237,7 @@ async function loadMenuTree() {
     const data = await getRoleMenusApi(props.role.id);
 
     // 使用后端返回的菜单树结构
-    allTreeData.value = filterAiAgentAdminTree(data.menu_tree || []);
+    allTreeData.value = filterLightMenuTree(data.menu_tree || []);
 
     // 初始化已选菜单
     const selectedMenuIdsList = data.selected_menu_ids || [];
diff --git a/web/apps/web-ele/src/views/_core/system-config/index.vue b/web/apps/web-ele/src/views/_core/system-config/index.vue
new file mode 100644
index 0000000..c814848
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/system-config/index.vue
@@ -0,0 +1,294 @@
+<script lang="ts" setup>
+import type { CardListItem, CardListOptions } from '#/components/card-list';
+import type { ZqTabItem } from '#/components/zq-tabs';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import {
+  BellRing,
+  Bot,
+  IconifyIcon,
+  Shield,
+} from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElCard,
+  ElMessage,
+  ElMessageBox,
+  ElScrollbar,
+} from 'element-plus';
+
+import {
+  deleteGroupConfigApi,
+  getAllConfigsApi,
+} from '#/api/core/system-config';
+import { CardList } from '#/components/card-list';
+import { ZqTabs } from '#/components/zq-tabs';
+
+import ConfigForm from './modules/config-form.vue';
+import ModelConfigForm from './modules/model-config-form.vue';
+
+defineOptions({ name: 'SystemConfigManager' });
+
+interface ConfigMenuItem extends CardListItem {
+  id: string;
+  name: string;
+  group: string;
+  icon: string;
+  category: 'notify' | 'oauth';
+}
+
+const SSO_GROUPS = [
+  'oauth_gitee',
+  'oauth_github',
+  'oauth_qq',
+  'oauth_google',
+  'oauth_wechat',
+  'oauth_microsoft',
+];
+
+const NOTIFY_GROUPS = [
+  'notify_email',
+  'notify_sms',
+  'notify_wechat_mp',
+];
+
+const GROUP_ICONS: Record<string, string> = {
+  oauth_gitee: 'simple-icons:gitee',
+  oauth_github: 'simple-icons:github',
+  oauth_qq: 'simple-icons:tencentqq',
+  oauth_google: 'simple-icons:google',
+  oauth_wechat: 'simple-icons:wechat',
+  oauth_microsoft: 'simple-icons:microsoft',
+  notify_email: 'mdi:email-outline',
+  notify_sms: 'mdi:message-text-outline',
+  notify_wechat_mp: 'simple-icons:wechat',
+};
+
+const activeTab = ref<string>('oauth');
+const allConfigs = ref<Record<string, Record<string, any>>>({});
+const selectedMenuId = ref<string>('oauth_gitee');
+const loading = ref(false);
+const saving = ref(false);
+const configFormRef = ref<InstanceType<typeof ConfigForm>>();
+
+const menuItems = computed<ConfigMenuItem[]>(() => {
+  const items: ConfigMenuItem[] = [];
+
+  for (const group of SSO_GROUPS) {
+    items.push({
+      id: group,
+      name: $t(`system-config.groups.${group}`),
+      group,
+      icon: GROUP_ICONS[group] || 'mdi:key',
+      category: 'oauth',
+    });
+  }
+
+  for (const group of NOTIFY_GROUPS) {
+    items.push({
+      id: group,
+      name: $t(`system-config.groups.${group}`),
+      group,
+      icon: GROUP_ICONS[group] || 'mdi:bell-ring',
+      category: 'notify',
+    });
+  }
+
+  return items;
+});
+
+const currentItems = computed(() =>
+  menuItems.value.filter((i) => i.category === activeTab.value),
+);
+
+const selectedItem = computed(() =>
+  menuItems.value.find((i) => i.id === selectedMenuId.value),
+);
+
+const modelConfigFormRef = ref<InstanceType<typeof ModelConfigForm>>();
+
+const tabItems = computed<ZqTabItem[]>(() => [
+  { key: 'oauth', label: $t('system-config.ssoConfig'), icon: Shield },
+  { key: 'notify', label: $t('system-config.notifyConfig'), icon: BellRing },
+  { key: 'model', label: $t('system-config.modelConfig'), icon: Bot },
+]);
+
+const cardListOptions: CardListOptions<ConfigMenuItem> = {
+  searchFields: [{ field: 'name' }],
+  titleField: 'name',
+  displayMode: 'center',
+};
+
+async function loadAllConfigs() {
+  loading.value = true;
+  try {
+    allConfigs.value = await getAllConfigsApi();
+  } catch {
+    // ignore
+  } finally {
+    loading.value = false;
+  }
+}
+
+function handleMenuSelect(id: string | undefined) {
+  if (id) {
+    selectedMenuId.value = id;
+  }
+}
+
+function handleTabChange(tab: string) {
+  activeTab.value = tab;
+  const items = menuItems.value.filter((i) => i.category === tab);
+  if (items.length > 0 && !items.some((i) => i.id === selectedMenuId.value)) {
+    selectedMenuId.value = items[0]!.id;
+  }
+}
+
+async function handleSave() {
+  saving.value = true;
+  try {
+    await configFormRef.value?.save();
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function handleReset() {
+  try {
+    await ElMessageBox.confirm(
+      $t('system-config.resetConfirm'),
+      $t('system-config.reset'),
+      { type: 'warning' },
+    );
+    await deleteGroupConfigApi(selectedMenuId.value);
+    ElMessage.success($t('system-config.resetSuccess'));
+    await loadAllConfigs();
+  } catch {
+    // cancelled
+  }
+}
+
+function handleSaved() {
+  loadAllConfigs();
+}
+
+onMounted(() => {
+  loadAllConfigs();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full">
+      <!-- 左侧竖向 Tab -->
+      <div class="bg-background mr-3 flex-shrink-0 rounded-[8px] p-4">
+        <ZqTabs
+          v-model="activeTab"
+          :items="tabItems"
+          vertical
+          @change="handleTabChange"
+        />
+      </div>
+
+      <!-- 列表（oauth/notify tab 显示） -->
+      <template v-if="activeTab !== 'model'">
+        <div class="mr-3 w-[250px] flex-shrink-0">
+          <ElCard shadow="never" class="h-full !border-none">
+            <ElScrollbar>
+              <CardList
+                :items="currentItems"
+                :selected-id="selectedMenuId"
+                :options="cardListOptions"
+                :loading="false"
+                class="config-menu"
+                @select="handleMenuSelect"
+              >
+                <template #item="{ item }">
+                  <div class="flex items-center gap-2 text-sm">
+                    <IconifyIcon :icon="item.icon" class="size-4 opacity-60" />
+                    {{ item.name }}
+                  </div>
+                </template>
+              </CardList>
+            </ElScrollbar>
+          </ElCard>
+        </div>
+
+        <!-- 右侧内容 -->
+        <div class="flex-1 overflow-hidden">
+          <ElCard
+            shadow="never"
+            class="config-card flex h-full flex-col !border-none"
+          >
+            <template #header>
+              <div class="card-header">
+                <IconifyIcon
+                  :icon="selectedItem?.icon || ''"
+                  class="mr-2 size-5 opacity-60"
+                />
+                <span>{{ selectedItem?.name }}</span>
+                <div class="ml-auto flex gap-2">
+                  <ElButton @click="handleReset">
+                    {{ $t('system-config.reset') }}
+                  </ElButton>
+                  <ElButton
+                    type="primary"
+                    :loading="saving"
+                    @click="handleSave"
+                  >
+                    {{ $t('system-config.save') }}
+                  </ElButton>
+                </div>
+              </div>
+            </template>
+
+            <ElScrollbar class="flex-1">
+              <ConfigForm
+                ref="configFormRef"
+                :group="selectedMenuId"
+                :config-data="allConfigs[selectedMenuId] || {}"
+                :loading="loading"
+                @saved="handleSaved"
+              />
+            </ElScrollbar>
+          </ElCard>
+        </div>
+      </template>
+
+      <!-- 模型配置（model tab） -->
+      <div v-else class="flex-1 overflow-hidden">
+        <ModelConfigForm ref="modelConfigFormRef" />
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.config-menu :deep(.el-card__body) {
+  padding: 0;
+}
+
+.config-menu :deep(.mb-4.flex) {
+  display: none;
+}
+
+.config-card :deep(.el-card__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/system-config/modules/config-form.vue b/web/apps/web-ele/src/views/_core/system-config/modules/config-form.vue
new file mode 100644
index 0000000..b5ea6ec
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/system-config/modules/config-form.vue
@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+
+import { EyeOff, Info } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElSelect,
+  ElSwitch,
+  ElTooltip,
+} from 'element-plus';
+
+import { updateGroupConfigApi } from '#/api/core/system-config';
+
+defineOptions({ name: 'SystemConfigForm' });
+
+const props = defineProps<{
+  configData: Record<string, any>;
+  group: string;
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  saved: [];
+}>();
+
+const SECRET_KEYS = new Set([
+  'aliyun_access_key_secret',
+  'app_key',
+  'app_secret',
+  'client_secret',
+  'smtp_password',
+  'tencent_secret_key',
+  'webhook_secret',
+]);
+
+const BOOLEAN_KEYS = new Set(['smtp_use_tls']);
+
+const SELECT_OPTIONS: Record<
+  string,
+  Array<{ label: string; value: string }>
+> = {
+  provider: [
+    { label: $t('system-config.fields.providerAliyun'), value: 'aliyun' },
+    { label: $t('system-config.fields.providerTencent'), value: 'tencent' },
+  ],
+};
+
+const formData = ref<Record<string, any>>({});
+const saving = ref(false);
+
+const fields = computed(() => {
+  return Object.keys(props.configData);
+});
+
+const visibleFields = computed(() => {
+  if (props.group !== 'notify_sms') return fields.value;
+  const provider = formData.value.provider || '';
+  const hidePrefix =
+    provider === 'aliyun'
+      ? 'tencent_'
+      : (provider === 'tencent'
+        ? 'aliyun_'
+        : '');
+  if (!hidePrefix) return fields.value;
+  return fields.value.filter((key) => !key.startsWith(hidePrefix));
+});
+
+function isSelect(key: string): boolean {
+  return key in SELECT_OPTIONS;
+}
+
+function isSecret(key: string): boolean {
+  return SECRET_KEYS.has(key);
+}
+
+function isBoolean(key: string): boolean {
+  return BOOLEAN_KEYS.has(key);
+}
+
+function isMasked(value: any): boolean {
+  return typeof value === 'string' && value.includes('***');
+}
+
+function getFieldLabel(key: string): string {
+  return $t(`system-config.fields.${key}`) || key;
+}
+
+function loadFormData() {
+  const data: Record<string, any> = {};
+  for (const key of Object.keys(props.configData)) {
+    const val = props.configData[key];
+    data[key] = isBoolean(key) ? val === 'true' || val === true : (val ?? '');
+  }
+  formData.value = data;
+}
+
+watch(
+  () => [props.group, props.configData],
+  () => {
+    loadFormData();
+  },
+  { immediate: true, deep: true },
+);
+
+async function save() {
+  saving.value = true;
+  try {
+    const configs: Record<string, null | string> = {};
+    for (const key of fields.value) {
+      const val = formData.value[key];
+      if (isBoolean(key)) {
+        configs[key] = String(val);
+      } else if (isSecret(key) && isMasked(val)) {
+        configs[key] = val;
+      } else {
+        configs[key] = val === '' ? null : String(val);
+      }
+    }
+    await updateGroupConfigApi(props.group, { configs });
+    ElMessage.success($t('system-config.saveSuccess'));
+    emit('saved');
+  } catch {
+    ElMessage.error($t('system-config.saveError'));
+  } finally {
+    saving.value = false;
+  }
+}
+
+defineExpose({ save });
+</script>
+
+<template>
+  <div v-loading="loading" class="p-6">
+    <ElForm label-position="top" class="max-w-[600px]">
+      <template v-for="key in visibleFields" :key="key">
+        <!-- Select field -->
+        <ElFormItem v-if="isSelect(key)" :label="getFieldLabel(key)">
+          <ElSelect
+            v-model="formData[key]"
+            :placeholder="getFieldLabel(key)"
+            clearable
+          >
+            <ElOption
+              v-for="opt in SELECT_OPTIONS[key]"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+            />
+          </ElSelect>
+        </ElFormItem>
+
+        <!-- Boolean field -->
+        <ElFormItem v-else-if="isBoolean(key)" :label="getFieldLabel(key)">
+          <ElSwitch v-model="formData[key]" />
+        </ElFormItem>
+
+        <!-- Secret field -->
+        <ElFormItem v-else-if="isSecret(key)" :label="getFieldLabel(key)">
+          <ElInput
+            v-model="formData[key]"
+            show-password
+            :placeholder="getFieldLabel(key)"
+            clearable
+          >
+            <template #suffix>
+              <ElTooltip
+                v-if="isMasked(formData[key])"
+                :content="$t('system-config.secretTip')"
+                placement="top"
+              >
+                <EyeOff
+                  class="size-4 cursor-help"
+                  style="color: var(--el-text-color-placeholder)"
+                />
+              </ElTooltip>
+            </template>
+          </ElInput>
+        </ElFormItem>
+
+        <!-- Normal field -->
+        <ElFormItem v-else :label="getFieldLabel(key)">
+          <ElInput
+            v-model="formData[key]"
+            :placeholder="getFieldLabel(key)"
+            clearable
+          />
+        </ElFormItem>
+      </template>
+
+      <div
+        v-if="fields.length === 0"
+        class="flex items-center gap-2 py-8"
+        style="color: var(--el-text-color-secondary)"
+      >
+        <Info class="size-4" />
+        <span>{{ $t('common.noData') || 'No data' }}</span>
+      </div>
+    </ElForm>
+  </div>
+</template>
diff --git a/web/apps/web-ele/src/views/_core/system-config/modules/model-config-form.vue b/web/apps/web-ele/src/views/_core/system-config/modules/model-config-form.vue
new file mode 100644
index 0000000..deb034e
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/system-config/modules/model-config-form.vue
@@ -0,0 +1,1279 @@
+<script lang="ts" setup>
+import type {
+  DefaultModel,
+  ModelListItem,
+  ProviderListItem,
+  ProviderType,
+} from '#/api/ai-platform/ai-platform';
+
+import { computed, ref } from 'vue';
+
+import {
+  Bot,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  Database,
+  Edit,
+  Layers,
+  MessageSquare,
+  MoreHorizontal,
+  Play,
+  Plus,
+  RefreshCw,
+  Search,
+  Server,
+  Trash2,
+} from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import {
+  ElButton,
+  ElCheckbox,
+  ElCheckboxButton,
+  ElCheckboxGroup,
+  ElDialog,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElEmpty,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElMessage,
+  ElMessageBox,
+  ElOption,
+  ElSelect,
+  ElSwitch,
+  ElTag,
+} from 'element-plus';
+
+import {
+  batchCreateModelsApi,
+  createModelApi,
+  createProviderApi,
+  deleteModelApi,
+  deleteProviderApi,
+  fetchProviderModelsApi,
+  getModelListApi,
+  getProviderDefaultModelsApi,
+  getProviderListApi,
+  getProviderTypesApi,
+  testProviderApi,
+  updateModelApi,
+  updateProviderApi,
+} from '#/api/ai-platform/ai-platform';
+
+defineOptions({ name: 'ModelConfigForm' });
+
+// 状态
+const loading = ref(false);
+
+// 提供商相关
+const providerTypes = ref<ProviderType[]>([]);
+const providers = ref<ProviderListItem[]>([]);
+const selectedProviderId = ref(''); // 当前选中的提供商ID
+const showProviderDialog = ref(false);
+const providerDialogMode = ref<'add' | 'edit'>('add');
+const providerForm = ref({
+  id: '',
+  name: '',
+  provider_type: '',
+  api_key: '',
+  api_base: '',
+  ollama_host: 'http://localhost:11434',
+  description: '',
+  is_active: true,
+});
+
+// 模型相关
+const models = ref<ModelListItem[]>([]);
+const showModelDialog = ref(false);
+const modelDialogMode = ref<'add' | 'edit'>('add');
+const modelForm = ref({
+  id: '',
+  provider_id: '',
+  model_name: '',
+  display_name: '',
+  model_type: 'chat',
+  max_tokens: 4096,
+  context_window: 4096,
+  default_temperature: 0.7,
+  supports_vision: false,
+  supports_function_call: false,
+  is_active: true,
+});
+
+// 默认模型
+const defaultModels = ref<DefaultModel[]>([]);
+const showDefaultModelsDialog = ref(false);
+const selectedDefaultModels = ref<string[]>([]);
+const defaultModelsLoading = ref(false);
+const showAvailableModels = ref(true);
+const modelSource = ref<'' | 'api' | 'default'>('');
+const filterModelTypes = ref<string[]>([]);
+const filterModelSearch = ref('');
+
+// 计算属性
+const filteredModels = computed(() => {
+  if (!selectedProviderId.value) return models.value;
+  return models.value.filter((m) => m.provider_id === selectedProviderId.value);
+});
+
+// 初始化
+async function init() {
+  loading.value = true;
+  try {
+    const [typesRes, providersRes, modelsRes] = await Promise.all([
+      getProviderTypesApi(),
+      getProviderListApi({ pageSize: 100 }),
+      getModelListApi({ pageSize: 100 }),
+    ]);
+    providerTypes.value = typesRes;
+    providers.value = providersRes.items;
+    models.value = modelsRes.items;
+
+    // 自动选中第一个提供商
+    if (providers.value.length > 0 && !selectedProviderId.value) {
+      selectedProviderId.value = providers.value[0]?.id || '';
+    }
+  } catch (error) {
+    console.error('加载数据失败:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 选择提供商
+async function selectProvider(providerId: string) {
+  selectedProviderId.value = providerId;
+  await loadDefaultModelsForProvider(providerId);
+}
+
+// 自动加载当前提供商的模型列表（优先在线拉取，fallback 到默认列表）
+async function loadDefaultModelsForProvider(providerId: string) {
+  if (!providerId) {
+    defaultModels.value = [];
+    modelSource.value = '';
+    return;
+  }
+  defaultModelsLoading.value = true;
+  try {
+    const res = await fetchProviderModelsApi(providerId);
+    defaultModels.value = res.models || [];
+    modelSource.value = (res.source as 'api' | 'default') || 'default';
+  } catch {
+    // 在线拉取失败，fallback 到默认列表
+    try {
+      defaultModels.value = await getProviderDefaultModelsApi(providerId);
+      modelSource.value = 'default';
+    } catch {
+      defaultModels.value = [];
+      modelSource.value = '';
+    }
+  } finally {
+    defaultModelsLoading.value = false;
+  }
+}
+
+// 强制刷新：重新在线拉取模型列表
+async function handleRefreshModels() {
+  if (!selectedProviderId.value) return;
+  await loadDefaultModelsForProvider(selectedProviderId.value);
+  if (modelSource.value === 'api') {
+    ElMessage.success($t('ui-config.model.fetchFromApiSuccess'));
+  } else {
+    ElMessage.info($t('ui-config.model.fetchFromApiFallback'));
+  }
+}
+
+// 判断默认模型是否已添加
+function isModelAdded(modelName: string) {
+  return filteredModels.value.some((m) => m.model_name === modelName);
+}
+
+// 可添加的默认模型（未添加的）
+const availableDefaultModels = computed(() => {
+  return defaultModels.value.filter((m) => !isModelAdded(m.model_name));
+});
+
+// 可选模型的类型列表（去重）
+const availableModelTypes = computed(() => {
+  const types = new Set(defaultModels.value.map((m) => m.model_type));
+  return [...types];
+});
+
+// 过滤后的默认模型列表
+const filteredDefaultModels = computed(() => {
+  let list = defaultModels.value;
+  if (filterModelTypes.value.length > 0) {
+    list = list.filter((m) => filterModelTypes.value.includes(m.model_type));
+  }
+  if (filterModelSearch.value.trim()) {
+    const kw = filterModelSearch.value.trim().toLowerCase();
+    list = list.filter(
+      (m) =>
+        m.model_name.toLowerCase().includes(kw) ||
+        m.display_name.toLowerCase().includes(kw),
+    );
+  }
+  return list;
+});
+
+// 获取当前选中的提供商
+const selectedProvider = computed(() => {
+  return providers.value.find((p) => p.id === selectedProviderId.value);
+});
+
+init().then(() => {
+  if (selectedProviderId.value) {
+    loadDefaultModelsForProvider(selectedProviderId.value);
+  }
+});
+
+// 提供商操作
+function handleAddProvider() {
+  providerDialogMode.value = 'add';
+  providerForm.value = {
+    id: '',
+    name: '',
+    provider_type: '',
+    api_key: '',
+    api_base: '',
+    ollama_host: 'http://localhost:11434',
+    description: '',
+    is_active: true,
+  };
+  showProviderDialog.value = true;
+}
+
+function handleEditProvider(row: ProviderListItem) {
+  providerDialogMode.value = 'edit';
+  providerForm.value = {
+    id: row.id,
+    name: row.name,
+    provider_type: row.provider_type,
+    api_key: '',
+    api_base: '',
+    ollama_host: 'http://localhost:11434',
+    description: row.description,
+    is_active: row.is_active,
+  };
+  showProviderDialog.value = true;
+}
+
+async function handleSaveProvider() {
+  try {
+    if (providerDialogMode.value === 'add') {
+      await createProviderApi(providerForm.value);
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } else {
+      await updateProviderApi(providerForm.value.id, providerForm.value);
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    }
+    showProviderDialog.value = false;
+    init();
+  } catch (error: any) {
+    ElMessage.error(error.message || $t('ui.actionMessage.operationFailed'));
+  }
+}
+
+async function handleDeleteProvider(row: ProviderListItem) {
+  try {
+    await ElMessageBox.confirm(
+      $t('ui.actionMessage.deleteConfirm', [row.name]),
+      $t('ui.actionTitle.delete', [$t('ui-config.model.providerName')]),
+      { type: 'warning' },
+    );
+    await deleteProviderApi(row.id);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    init();
+  } catch {
+    // 用户取消
+  }
+}
+
+async function handleTestProvider(row: ProviderListItem) {
+  try {
+    const res = await testProviderApi(row.id);
+    if (res.success) {
+      ElMessage.success(res.message);
+    } else {
+      ElMessage.error($t('ui.actionMessage.operationFailed'));
+    }
+  } catch (error: any) {
+    ElMessage.error(error.message || $t('ui.actionMessage.operationFailed'));
+  }
+}
+
+// 加载默认模型（弹窗方式，保留兼容）
+async function handleLoadDefaultModels(providerId: string) {
+  try {
+    defaultModels.value = await getProviderDefaultModelsApi(providerId);
+    selectedDefaultModels.value = [];
+    selectedProviderId.value = providerId;
+    showDefaultModelsDialog.value = true;
+  } catch (error: any) {
+    ElMessage.error(error.message || $t('ui.actionMessage.operationFailed'));
+  }
+}
+
+function toggleDefaultModelSelection(modelName: string) {
+  const index = selectedDefaultModels.value.indexOf(modelName);
+  if (index === -1) {
+    selectedDefaultModels.value.push(modelName);
+  } else {
+    selectedDefaultModels.value.splice(index, 1);
+  }
+}
+
+async function handleBatchAddModels() {
+  if (selectedDefaultModels.value.length === 0) {
+    ElMessage.warning($t('ui.placeholder.select'));
+    return;
+  }
+
+  const modelsToAdd = defaultModels.value.filter((m) =>
+    selectedDefaultModels.value.includes(m.model_name),
+  );
+
+  try {
+    await batchCreateModelsApi(selectedProviderId.value, modelsToAdd);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    showDefaultModelsDialog.value = false;
+    await init();
+    await loadDefaultModelsForProvider(selectedProviderId.value);
+  } catch (error: any) {
+    ElMessage.error(error.message || $t('ui.actionMessage.operationFailed'));
+  }
+}
+
+// 一键添加单个默认模型
+async function handleQuickAddModel(model: DefaultModel) {
+  try {
+    await batchCreateModelsApi(selectedProviderId.value, [model]);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    await init();
+    await loadDefaultModelsForProvider(selectedProviderId.value);
+  } catch (error: any) {
+    ElMessage.error(error.message || $t('ui.actionMessage.operationFailed'));
+  }
+}
+
+// 一键添加所有未添加的默认模型
+async function handleAddAllModels() {
+  const modelsToAdd = availableDefaultModels.value;
+  if (modelsToAdd.length === 0) return;
+  try {
+    await batchCreateModelsApi(selectedProviderId.value, modelsToAdd);
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    await init();
+    await loadDefaultModelsForProvider(selectedProviderId.value);
+  } catch (error: any) {
+    ElMessage.error(error.message || $t('ui.actionMessage.operationFailed'));
+  }
+}
+
+// 模型操作
+function handleAddModel() {
+  modelDialogMode.value = 'add';
+  modelForm.value = {
+    id: '',
+    provider_id: selectedProviderId.value || '',
+    model_name: '',
+    display_name: '',
+    model_type: 'chat',
+    max_tokens: 4096,
+    context_window: 4096,
+    default_temperature: 0.7,
+    supports_vision: false,
+    supports_function_call: false,
+    is_active: true,
+  };
+  showModelDialog.value = true;
+}
+
+function handleEditModel(row: ModelListItem) {
+  modelDialogMode.value = 'edit';
+  modelForm.value = {
+    id: row.id,
+    provider_id: row.provider_id,
+    model_name: row.model_name,
+    display_name: row.display_name,
+    model_type: row.model_type,
+    max_tokens: 4096,
+    context_window: 4096,
+    default_temperature: 0.7,
+    supports_vision: false,
+    supports_function_call: false,
+    is_active: row.is_active,
+  };
+  showModelDialog.value = true;
+}
+
+async function handleSaveModel() {
+  try {
+    if (modelDialogMode.value === 'add') {
+      await createModelApi(modelForm.value);
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } else {
+      await updateModelApi(modelForm.value.id, modelForm.value);
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    }
+    showModelDialog.value = false;
+    await init();
+    await loadDefaultModelsForProvider(selectedProviderId.value);
+  } catch (error: any) {
+    ElMessage.error(error.message || $t('ui.actionMessage.operationFailed'));
+  }
+}
+
+async function handleDeleteModel(row: ModelListItem) {
+  try {
+    await ElMessageBox.confirm(
+      $t('ui.actionMessage.deleteConfirm', [row.display_name]),
+      $t('ui.actionTitle.delete', [$t('ui-config.model.modelName')]),
+      { type: 'warning' },
+    );
+    await deleteModelApi(row.id);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.display_name]));
+    await init();
+    await loadDefaultModelsForProvider(selectedProviderId.value);
+  } catch {
+    // 用户取消
+  }
+}
+
+// 获取提供商类型名称
+function getProviderTypeName(type: string) {
+  const found = providerTypes.value.find((t) => t.type === type);
+  return found?.name || type;
+}
+
+// 获取模型类型文本
+function getModelTypeText(type: string) {
+  switch (type) {
+    case 'chat': {
+      return $t('ui-config.model.chat');
+    }
+    case 'embedding': {
+      return $t('ui-config.model.embedding');
+    }
+    case 'rerank': {
+      return $t('ui-config.model.rerank');
+    }
+    default: {
+      return type;
+    }
+  }
+}
+
+function getModelTypeIcon(type: string) {
+  switch (type) {
+    case 'chat': {
+      return MessageSquare;
+    }
+    case 'embedding': {
+      return Database;
+    }
+    case 'rerank': {
+      return Layers;
+    }
+    default: {
+      return Bot;
+    }
+  }
+}
+
+function getModelTypeTagType(type: string) {
+  switch (type) {
+    case 'chat': {
+      return 'primary';
+    }
+    case 'completion': {
+      return 'success';
+    }
+    case 'embedding': {
+      return 'info';
+    }
+    case 'rerank': {
+      return 'warning';
+    }
+    default: {
+      return 'info';
+    }
+  }
+}
+
+// 暴露重置方法
+function reset() {
+  init();
+}
+
+defineExpose({ reset });
+</script>
+
+<template>
+  <div class="model-config-form flex h-full gap-3">
+    <!-- 左侧：提供商列表 -->
+    <div
+      class="provider-section bg-background flex w-72 flex-col rounded-[8px] p-5"
+      v-loading="loading"
+    >
+      <!-- 提供商 Header -->
+      <div class="mb-3 flex items-center justify-between">
+        <div class="">{{ $t('ui-config.model.providerManagement') }}</div>
+        <ElButton
+          size="small"
+          type="primary"
+          plain
+          :icon="Plus"
+          @click="handleAddProvider"
+        >
+          {{ $t('ui-config.model.addProvider') }}
+        </ElButton>
+      </div>
+
+      <!-- 提供商列表 -->
+      <div v-if="providers.length > 0" class="flex-1 space-y-2 overflow-y-auto">
+        <div
+          v-for="provider in providers"
+          :key="provider.id"
+          class="provider-item"
+          :class="{ selected: selectedProviderId === provider.id }"
+        >
+          <div
+            class="flex items-center gap-3"
+            @click="selectProvider(provider.id)"
+          >
+            <div class="provider-icon-small">
+              <Server class="h-4 w-4 text-white" />
+            </div>
+            <div class="flex-1">
+              <div class="flex items-center gap-2">
+                <span class="text-sm font-medium">{{ provider.name }}</span>
+                <ElTag
+                  size="small"
+                  :type="provider.is_active ? 'success' : 'info'"
+                >
+                  {{
+                    provider.is_active
+                      ? $t('ui-config.model.enabled')
+                      : $t('common.disabled')
+                  }}
+                </ElTag>
+              </div>
+              <div class="text-muted-foreground mt-0.5 text-xs">
+                {{ getProviderTypeName(provider.provider_type) }}
+              </div>
+            </div>
+          </div>
+          <ElDropdown trigger="click" @click.stop>
+            <ElButton link size="small" class="ml-2">
+              <MoreHorizontal class="h-4 w-4" />
+            </ElButton>
+            <template #dropdown>
+              <ElDropdownMenu>
+                <ElDropdownItem @click="handleTestProvider(provider)">
+                  <Play class="mr-1 h-4 w-4" />
+                  {{ $t('ui-config.model.test') }}
+                </ElDropdownItem>
+                <ElDropdownItem @click="handleLoadDefaultModels(provider.id)">
+                  <Plus class="mr-1 h-4 w-4" />
+                  {{ $t('ui-config.model.addModel') }}
+                </ElDropdownItem>
+                <ElDropdownItem @click="handleEditProvider(provider)">
+                  <Edit class="mr-1 h-4 w-4" />
+                  {{ $t('ui-config.edit') }}
+                </ElDropdownItem>
+                <ElDropdownItem divided @click="handleDeleteProvider(provider)">
+                  <Trash2 class="mr-1 h-4 w-4 text-red-500" />
+                  <span class="text-red-500">{{ $t('common.delete') }}</span>
+                </ElDropdownItem>
+              </ElDropdownMenu>
+            </template>
+          </ElDropdown>
+        </div>
+      </div>
+      <ElEmpty v-else :description="$t('ui-config.model.noDefaultModels')" />
+    </div>
+
+    <!-- 右侧：模型列表 -->
+    <div
+      class="model-section bg-background flex flex-1 flex-col rounded-[8px] p-5"
+      v-loading="loading"
+    >
+      <!-- 模型 Header -->
+      <div class="mb-3 flex items-center justify-between">
+        <h3 class="">{{ $t('ui-config.model.modelManagement') }}</h3>
+        <ElButton
+          type="primary"
+          plain
+          size="small"
+          :icon="Plus"
+          @click="handleAddModel"
+        >
+          {{ $t('ui-config.model.addModel') }}
+        </ElButton>
+      </div>
+
+      <!-- 当前选中的提供商信息 -->
+      <div
+        v-if="selectedProvider"
+        class="mb-4 flex items-center gap-3 rounded-lg border p-3"
+      >
+        <div class="provider-icon">
+          <Server class="h-5 w-5 text-white" />
+        </div>
+        <div class="flex-1">
+          <div class="flex items-center gap-2">
+            <span class="font-medium">{{ selectedProvider.name }}</span>
+            <ElTag size="small">
+              {{ getProviderTypeName(selectedProvider.provider_type) }}
+            </ElTag>
+          </div>
+          <div class="text-muted-foreground text-xs">
+            {{
+              selectedProvider.description ||
+              $t('ui-config.descriptionPlaceholder')
+            }}
+          </div>
+        </div>
+      </div>
+
+      <div class="flex-1 space-y-4 overflow-y-auto">
+        <!-- 已添加的模型列表 -->
+        <div v-if="filteredModels.length > 0" class="space-y-3">
+          <div class="text-muted-foreground text-xs font-medium">
+            {{ $t('ui-config.model.addedModels') }} ({{
+              filteredModels.length
+            }})
+          </div>
+          <div
+            v-for="model in filteredModels"
+            :key="model.id"
+            class="model-card"
+          >
+            <div class="flex items-center gap-3">
+              <div
+                class="model-icon"
+                :class="getModelTypeTagType(model.model_type)"
+              >
+                <component
+                  :is="getModelTypeIcon(model.model_type)"
+                  class="h-5 w-5 text-white"
+                />
+              </div>
+              <div class="flex-1">
+                <div class="flex items-center gap-2">
+                  <span class="font-medium">{{ model.display_name }}</span>
+                  <ElTag
+                    size="small"
+                    :type="getModelTypeTagType(model.model_type)"
+                  >
+                    {{ getModelTypeText(model.model_type) }}
+                  </ElTag>
+                  <ElTag
+                    size="small"
+                    :type="model.is_active ? 'success' : 'info'"
+                  >
+                    {{
+                      model.is_active
+                        ? $t('ui-config.model.enabled')
+                        : $t('common.disabled')
+                    }}
+                  </ElTag>
+                </div>
+                <div class="text-muted-foreground mt-1 text-xs">
+                  {{ model.model_name }}
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                <ElButton
+                  link
+                  type="primary"
+                  size="small"
+                  @click="handleEditModel(model)"
+                >
+                  <Edit class="mr-1 h-4 w-4" />
+                  {{ $t('ui-config.edit') }}
+                </ElButton>
+                <ElButton
+                  link
+                  type="danger"
+                  size="small"
+                  @click="handleDeleteModel(model)"
+                >
+                  <Trash2 class="mr-1 h-4 w-4" />
+                  {{ $t('common.delete') }}
+                </ElButton>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 可选的默认模型列表 -->
+        <div
+          v-if="selectedProvider && defaultModels.length > 0"
+          class="available-models-section"
+        >
+          <div class="mb-2 flex flex-wrap items-center justify-between gap-2">
+            <div
+              class="flex cursor-pointer items-center gap-2"
+              @click="showAvailableModels = !showAvailableModels"
+            >
+              <component
+                :is="showAvailableModels ? ChevronUp : ChevronDown"
+                class="text-muted-foreground h-4 w-4"
+              />
+              <span class="text-muted-foreground text-xs font-medium">
+                {{ $t('ui-config.model.availableModels') }} ({{
+                  availableDefaultModels.length
+                }})
+              </span>
+              <ElTag
+                v-if="modelSource"
+                size="small"
+                :type="modelSource === 'api' ? 'success' : 'info'"
+              >
+                {{
+                  modelSource === 'api'
+                    ? $t('ui-config.model.sourceApi')
+                    : $t('ui-config.model.sourceDefault')
+                }}
+              </ElTag>
+            </div>
+            <div class="flex flex-1 flex-wrap items-center justify-end gap-2">
+              <ElCheckboxGroup v-model="filterModelTypes" size="small">
+                <ElCheckboxButton
+                  v-for="t in availableModelTypes"
+                  :key="t"
+                  :value="t"
+                >
+                  {{ getModelTypeText(t) }}
+                </ElCheckboxButton>
+              </ElCheckboxGroup>
+              <ElInput
+                v-model="filterModelSearch"
+                size="small"
+                :placeholder="$t('ui-config.model.searchModel')"
+                clearable
+                class="!w-40"
+              >
+                <template #prefix>
+                  <Search class="h-3.5 w-3.5" />
+                </template>
+              </ElInput>
+              <ElButton
+                size="small"
+                plain
+                :loading="defaultModelsLoading"
+                @click="handleRefreshModels"
+              >
+                <RefreshCw class="mr-1 h-3 w-3" />
+                {{ $t('ui-config.model.refreshModels') }}
+              </ElButton>
+              <ElButton
+                v-if="availableDefaultModels.length > 0"
+                size="small"
+                type="primary"
+                plain
+                @click="handleAddAllModels"
+              >
+                {{ $t('ui-config.model.addAll') }}
+              </ElButton>
+            </div>
+          </div>
+          <div
+            v-show="showAvailableModels"
+            v-loading="defaultModelsLoading"
+            class="space-y-2"
+          >
+            <div
+              v-for="dm in filteredDefaultModels"
+              :key="dm.model_name"
+              class="default-model-inline-item"
+              :class="{ 'is-added': isModelAdded(dm.model_name) }"
+            >
+              <div class="flex flex-1 items-center gap-3">
+                <div
+                  class="default-model-icon"
+                  :class="getModelTypeTagType(dm.model_type)"
+                >
+                  <component
+                    :is="getModelTypeIcon(dm.model_type)"
+                    class="h-4 w-4 text-white"
+                  />
+                </div>
+                <div class="min-w-0 flex-1">
+                  <div class="flex items-center gap-2">
+                    <span class="truncate text-sm font-medium">{{
+                      dm.display_name
+                    }}</span>
+                    <ElTag
+                      size="small"
+                      :type="getModelTypeTagType(dm.model_type)"
+                    >
+                      {{ getModelTypeText(dm.model_type) }}
+                    </ElTag>
+                  </div>
+                  <div class="text-muted-foreground mt-0.5 truncate text-xs">
+                    {{ dm.model_name }}
+                    <span v-if="dm.context_window">
+                      · {{ Math.round(dm.context_window / 1024) }}K ctx</span
+                    >
+                  </div>
+                </div>
+              </div>
+              <div v-if="isModelAdded(dm.model_name)" class="added-badge">
+                <Check class="h-4 w-4" />
+                <span>{{ $t('ui-config.model.added') }}</span>
+              </div>
+              <ElButton
+                v-else
+                size="small"
+                type="primary"
+                plain
+                @click="handleQuickAddModel(dm)"
+              >
+                <Plus class="mr-1 h-3 w-3" />
+                {{ $t('ui-config.model.addModel') }}
+              </ElButton>
+            </div>
+          </div>
+        </div>
+
+        <ElEmpty
+          v-if="filteredModels.length === 0 && defaultModels.length === 0"
+          :description="$t('ui-config.model.noDefaultModels')"
+        />
+      </div>
+    </div>
+
+    <!-- 提供商弹窗 -->
+    <ElDialog
+      v-model="showProviderDialog"
+      :title="
+        providerDialogMode === 'add'
+          ? $t('ui-config.model.addProvider')
+          : $t('ui-config.model.editProvider')
+      "
+      width="500px"
+    >
+      <ElForm :model="providerForm" label-width="100px">
+        <ElFormItem :label="$t('ui-config.model.providerName')" required>
+          <ElInput
+            v-model="providerForm.name"
+            :placeholder="$t('ui.placeholder.input')"
+          />
+        </ElFormItem>
+        <ElFormItem :label="$t('ui-config.model.providerType')" required>
+          <ElSelect
+            v-model="providerForm.provider_type"
+            :placeholder="$t('ui.placeholder.select')"
+            :disabled="providerDialogMode === 'edit'"
+            style="width: 100%"
+          >
+            <ElOption
+              v-for="t in providerTypes"
+              :key="t.type"
+              :label="t.name"
+              :value="t.type"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem
+          v-if="providerForm.provider_type !== 'ollama'"
+          :label="$t('ui-config.model.apiKey')"
+        >
+          <ElInput
+            v-model="providerForm.api_key"
+            type="password"
+            :placeholder="$t('ui.placeholder.input')"
+            show-password
+          />
+        </ElFormItem>
+        <ElFormItem
+          v-if="providerForm.provider_type !== 'ollama'"
+          :label="$t('ui-config.model.apiBase')"
+        >
+          <ElInput
+            v-model="providerForm.api_base"
+            :placeholder="$t('ui.placeholder.input')"
+          />
+        </ElFormItem>
+        <ElFormItem
+          v-if="providerForm.provider_type === 'ollama'"
+          :label="$t('ui-config.model.ollamaHost')"
+        >
+          <ElInput
+            v-model="providerForm.ollama_host"
+            placeholder="http://localhost:11434"
+          />
+        </ElFormItem>
+        <ElFormItem :label="$t('ui-config.model.providerDescription')">
+          <ElInput
+            v-model="providerForm.description"
+            type="textarea"
+            :rows="3"
+            :placeholder="$t('ui.placeholder.input')"
+          />
+        </ElFormItem>
+        <ElFormItem :label="$t('ui-config.model.enabled')">
+          <ElSwitch v-model="providerForm.is_active" />
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <ElButton @click="showProviderDialog = false">
+          {{ $t('common.cancel') }}
+        </ElButton>
+        <ElButton type="primary" @click="handleSaveProvider">
+          {{ $t('common.confirm') }}
+        </ElButton>
+      </template>
+    </ElDialog>
+
+    <!-- 模型弹窗 -->
+    <ElDialog
+      v-model="showModelDialog"
+      :title="
+        modelDialogMode === 'add'
+          ? $t('ui-config.model.addModel')
+          : $t('ui-config.model.editModel')
+      "
+      width="500px"
+    >
+      <ElForm :model="modelForm" label-width="100px">
+        <ElFormItem :label="$t('ui-config.model.providerName')" required>
+          <ElSelect
+            v-model="modelForm.provider_id"
+            :placeholder="$t('ui-config.model.selectProvider')"
+            style="width: 100%"
+          >
+            <ElOption
+              v-for="p in providers"
+              :key="p.id"
+              :label="p.name"
+              :value="p.id"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem :label="$t('ui-config.model.modelName')" required>
+          <ElInput v-model="modelForm.model_name" placeholder="gpt-4o" />
+        </ElFormItem>
+        <ElFormItem :label="$t('ui-config.model.displayName')" required>
+          <ElInput v-model="modelForm.display_name" placeholder="GPT-4o" />
+        </ElFormItem>
+        <ElFormItem :label="$t('ui-config.model.modelType')">
+          <ElSelect v-model="modelForm.model_type" style="width: 100%">
+            <ElOption :label="$t('ui-config.model.chatModel')" value="chat" />
+            <ElOption
+              :label="$t('ui-config.model.embeddingModel')"
+              value="embedding"
+            />
+            <ElOption
+              :label="$t('ui-config.model.completionModel')"
+              value="completion"
+            />
+            <ElOption
+              :label="$t('ui-config.model.rerankModel')"
+              value="rerank"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem :label="$t('ui-config.model.maxTokens')">
+          <ElInputNumber
+            v-model="modelForm.max_tokens"
+            :min="1"
+            :max="128000"
+          />
+        </ElFormItem>
+        <ElFormItem :label="$t('ui-config.model.supportsVision')">
+          <ElSwitch v-model="modelForm.supports_vision" />
+        </ElFormItem>
+        <ElFormItem :label="$t('ui-config.model.supportsFunction')">
+          <ElSwitch v-model="modelForm.supports_function_call" />
+        </ElFormItem>
+        <ElFormItem :label="$t('ui-config.model.enabled')">
+          <ElSwitch v-model="modelForm.is_active" />
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <ElButton @click="showModelDialog = false">
+          {{ $t('common.cancel') }}
+        </ElButton>
+        <ElButton type="primary" @click="handleSaveModel">
+          {{ $t('common.confirm') }}
+        </ElButton>
+      </template>
+    </ElDialog>
+
+    <!-- 默认模型选择弹窗 -->
+    <ElDialog
+      v-model="showDefaultModelsDialog"
+      :title="$t('ui-config.model.addDefaultModels')"
+      width="600px"
+    >
+      <div v-if="defaultModels.length === 0" class="py-8">
+        <ElEmpty :description="$t('ui-config.model.noDefaultModels')" />
+      </div>
+      <div v-else class="max-h-[400px] space-y-2 overflow-y-auto">
+        <div
+          v-for="model in defaultModels"
+          :key="model.model_name"
+          class="default-model-item"
+          :class="{
+            selected: selectedDefaultModels.includes(model.model_name),
+          }"
+          @click="toggleDefaultModelSelection(model.model_name)"
+        >
+          <ElCheckbox
+            :model-value="selectedDefaultModels.includes(model.model_name)"
+            @click.stop
+            @change="toggleDefaultModelSelection(model.model_name)"
+          />
+          <div class="ml-3 flex-1">
+            <div class="flex items-center gap-2">
+              <span class="font-medium">{{ model.display_name }}</span>
+              <ElTag size="small">{{ model.model_type }}</ElTag>
+            </div>
+            <div class="text-muted-foreground mt-1 text-xs">
+              {{ model.model_name }} · Max {{ model.max_tokens }} tokens
+            </div>
+          </div>
+        </div>
+      </div>
+      <template #footer>
+        <ElButton @click="showDefaultModelsDialog = false">
+          {{ $t('common.cancel') }}
+        </ElButton>
+        <ElButton type="primary" @click="handleBatchAddModels">
+          {{ $t('ui-config.model.addSelected') }} ({{
+            selectedDefaultModels.length
+          }})
+        </ElButton>
+      </template>
+    </ElDialog>
+  </div>
+</template>
+
+<style scoped>
+.model-config-form {
+  height: calc(100vh - 110px);
+}
+
+.provider-section,
+.model-section {
+  min-height: 0;
+}
+
+.provider-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.provider-item:hover {
+  background: var(--el-fill-color-light);
+  border-color: var(--el-color-primary-light-5);
+}
+
+.provider-item.selected {
+  background: var(--el-color-primary-light-9);
+  border-color: var(--el-color-primary);
+}
+
+.provider-item > div:first-child {
+  flex: 1;
+  cursor: pointer;
+}
+
+.provider-icon-small {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(
+    135deg,
+    var(--el-color-primary-light-3),
+    var(--el-color-primary)
+  );
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.provider-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(
+    135deg,
+    var(--el-color-primary-light-3),
+    var(--el-color-primary)
+  );
+  border-radius: 10px;
+  flex-shrink: 0;
+}
+
+.model-card {
+  padding: 12px 16px;
+  background: var(--el-bg-color);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.model-card:hover {
+  border-color: var(--el-color-primary-light-5);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+.model-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(
+    135deg,
+    var(--el-color-info-light-3),
+    var(--el-color-info)
+  );
+  border-radius: 10px;
+  flex-shrink: 0;
+}
+
+.model-icon.primary {
+  background: linear-gradient(
+    135deg,
+    var(--el-color-primary-light-3),
+    var(--el-color-primary)
+  );
+}
+
+.model-icon.info {
+  background: linear-gradient(
+    135deg,
+    var(--el-color-info-light-3),
+    var(--el-color-info)
+  );
+}
+
+.model-icon.warning {
+  background: linear-gradient(
+    135deg,
+    var(--el-color-warning-light-3),
+    var(--el-color-warning)
+  );
+}
+
+.model-icon.success {
+  background: linear-gradient(
+    135deg,
+    var(--el-color-success-light-3),
+    var(--el-color-success)
+  );
+}
+
+.default-model-item {
+  display: flex;
+  align-items: center;
+  padding: 12px;
+  cursor: pointer;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.default-model-item:hover {
+  background: var(--el-fill-color-light);
+}
+
+.default-model-item.selected {
+  background: var(--el-color-primary-light-9);
+  border-color: var(--el-color-primary-light-5);
+}
+
+.available-models-section {
+  padding-top: 12px;
+}
+
+.default-model-inline-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.default-model-inline-item:hover {
+  background: var(--el-fill-color-light);
+}
+
+.default-model-inline-item.is-added {
+  opacity: 0.7;
+  background: var(--el-fill-color-lighter);
+}
+
+.default-model-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.default-model-icon.primary {
+  background: linear-gradient(
+    135deg,
+    var(--el-color-primary-light-3),
+    var(--el-color-primary)
+  );
+}
+
+.default-model-icon.info {
+  background: linear-gradient(
+    135deg,
+    var(--el-color-info-light-3),
+    var(--el-color-info)
+  );
+}
+
+.default-model-icon.warning {
+  background: linear-gradient(
+    135deg,
+    var(--el-color-warning-light-3),
+    var(--el-color-warning)
+  );
+}
+
+.default-model-icon.success {
+  background: linear-gradient(
+    135deg,
+    var(--el-color-success-light-3),
+    var(--el-color-success)
+  );
+}
+
+.added-badge {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--el-color-success);
+  flex-shrink: 0;
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/ui-config/index.vue b/web/apps/web-ele/src/views/_core/ui-config/index.vue
new file mode 100644
index 0000000..6f3d865
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/ui-config/index.vue
@@ -0,0 +1,219 @@
+<script lang="ts" setup>
+import type { Component } from 'vue';
+
+import type { CardListItem, CardListOptions } from '#/components/card-list';
+
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { LogIn, Palette, Settings } from '@vben/icons';
+import { $t } from '@vben/locales';
+
+import { ElButton, ElCard, ElScrollbar, ElTooltip } from 'element-plus';
+
+import { CardList } from '#/components/card-list';
+
+import AppSettingsForm from './modules/app-settings-form.vue';
+import LoginConfigForm from './modules/login-config-form.vue';
+import UIPreferencesForm from './modules/ui-preferences-form.vue';
+
+defineOptions({ name: 'UIConfigManager' });
+
+interface SettingMenuItem extends CardListItem {
+  id: string;
+  name: string;
+  key: 'app' | 'login' | 'ui';
+  icon: Component;
+}
+
+const menuItems = ref<SettingMenuItem[]>([
+  {
+    id: 'app',
+    name: $t('ui-config.appConfig'),
+    key: 'app',
+    icon: Settings,
+  },
+  {
+    id: 'ui',
+    name: $t('ui-config.styleConfig'),
+    key: 'ui',
+    icon: Palette,
+  },
+  {
+    id: 'login',
+    name: $t('ui-config.loginConfig.title'),
+    key: 'login',
+    icon: LogIn,
+  },
+]);
+
+const selectedMenuId = ref<string>('app');
+
+const uiPreferencesFormRef = ref<InstanceType<typeof UIPreferencesForm>>();
+const appSettingsFormRef = ref<InstanceType<typeof AppSettingsForm>>();
+const loginConfigFormRef = ref<InstanceType<typeof LoginConfigForm>>();
+const saving = ref(false);
+
+const cardListOptions: CardListOptions<SettingMenuItem> = {
+  searchFields: [{ field: 'name' }],
+  titleField: 'name',
+  displayMode: 'center',
+};
+
+function handleMenuSelect(id: string | undefined) {
+  selectedMenuId.value = id || 'ui';
+}
+
+function getMenuTitle(key: string): string {
+  const item = menuItems.value.find((m) => m.id === key);
+  return item?.name || '';
+}
+
+function getMenuIcon(key: string): Component | undefined {
+  const item = menuItems.value.find((m) => m.id === key);
+  return item?.icon;
+}
+
+function handleReset() {
+  switch (selectedMenuId.value) {
+    case 'app': {
+      appSettingsFormRef.value?.reset();
+      break;
+    }
+    case 'ui': {
+      uiPreferencesFormRef.value?.reset();
+      break;
+    }
+    case 'login': {
+      loginConfigFormRef.value?.reset();
+      break;
+    }
+  }
+}
+
+async function handleSave() {
+  saving.value = true;
+  try {
+    switch (selectedMenuId.value) {
+      case 'app': {
+        await appSettingsFormRef.value?.save();
+        break;
+      }
+      case 'ui': {
+        await uiPreferencesFormRef.value?.save();
+        break;
+      }
+      case 'login': {
+        await loginConfigFormRef.value?.save();
+        break;
+      }
+    }
+  } finally {
+    saving.value = false;
+  }
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full">
+      <!-- 左侧菜单 -->
+      <div class="mr-3 w-[235px]">
+        <CardList
+          :items="menuItems"
+          :selected-id="selectedMenuId"
+          :options="cardListOptions"
+          :loading="false"
+          class="ui-config-menu"
+          @select="handleMenuSelect"
+        >
+          <template #item="{ item }">
+            <div class="flex items-center gap-2 text-sm font-medium">
+              <component :is="item.icon" class="size-4" />
+              {{ item.name }}
+            </div>
+          </template>
+        </CardList>
+      </div>
+
+      <!-- 右侧内容 -->
+      <div class="flex-1 overflow-hidden">
+        <ElCard shadow="never" class="ui-config-card flex h-full flex-col">
+          <template #header>
+            <div class="card-header">
+              <component
+                :is="getMenuIcon(selectedMenuId)"
+                class="mr-2 size-5"
+              />
+              <span>{{ getMenuTitle(selectedMenuId) }}</span>
+              <div class="ml-auto flex gap-2">
+                <ElTooltip
+                  :content="$t('preferences.resetTip')"
+                  placement="bottom"
+                >
+                  <ElButton @click="handleReset">
+                    {{ $t('preferences.resetTitle') }}
+                  </ElButton>
+                </ElTooltip>
+                <ElButton type="primary" :loading="saving" @click="handleSave">
+                  {{ $t('ui-config.save') }}
+                </ElButton>
+              </div>
+            </div>
+          </template>
+
+          <ElScrollbar class="flex-1">
+            <!-- UI配置 -->
+            <template v-if="selectedMenuId === 'ui'">
+              <UIPreferencesForm ref="uiPreferencesFormRef" />
+            </template>
+
+            <!-- 应用配置 -->
+            <template v-else-if="selectedMenuId === 'app'">
+              <AppSettingsForm ref="appSettingsFormRef" />
+            </template>
+
+            <!-- 登录配置 -->
+            <template v-else-if="selectedMenuId === 'login'">
+              <LoginConfigForm ref="loginConfigFormRef" />
+            </template>
+          </ElScrollbar>
+        </ElCard>
+      </div>
+    </div>
+  </Page>
+</template>
+
+<style scoped>
+.ui-config-menu :deep(.el-card__body) {
+  padding: 16px;
+}
+
+.ui-config-menu :deep(.mb-4.flex) {
+  display: none;
+}
+
+.ui-config-menu :deep(.el-form-item__label) {
+  font-weight: 500;
+}
+
+.ui-config-card {
+  border: none;
+}
+
+.ui-config-card :deep(.el-card__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/ui-config/modules/app-settings-form.vue b/web/apps/web-ele/src/views/_core/ui-config/modules/app-settings-form.vue
new file mode 100644
index 0000000..beee0df
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/ui-config/modules/app-settings-form.vue
@@ -0,0 +1,619 @@
+<script lang="ts" setup>
+import type { LocaleType } from '@vben/locales';
+
+import type { PreferencesConfig } from '#/api/core/ui-config';
+
+import { onMounted, ref, watch } from 'vue';
+
+import {
+  Block,
+  Copyright,
+  Footer,
+  General,
+  GlobalShortcutKeys,
+  InputItem,
+  SwitchItem,
+} from '@vben/layouts/preferences-blocks';
+import { $t, getSystemLanguage, loadLocaleMessages } from '@vben/locales';
+import { preferences, updatePreferences } from '@vben/preferences';
+
+import {
+  ElButton,
+  ElDivider,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
+
+import { uploadFile } from '#/api/core/file';
+import {
+  getPreferencesConfigApi,
+  mergePreferencesConfig,
+  updatePreferencesConfigApi,
+} from '#/api/core/ui-config';
+import { getFileUrlPublic } from '#/composables/useFileUrl';
+import { overridesPreferences } from '#/preferences';
+import { useAppContextStore } from '#/store/app-context';
+
+defineOptions({ name: 'AppSettingsForm' });
+
+const appContextStore = useAppContextStore();
+
+// 获取当前应用ID（子应用模式下返回应用ID，主应用模式下返回 undefined）
+function getCurrentApplicationId(): string | undefined {
+  return appContextStore.currentApp?.id;
+}
+
+const loading = ref(false);
+
+const appName = ref('');
+const appLocale = ref<LocaleType>('zh-CN');
+const appDynamicTitle = ref(true);
+const appWatermark = ref(false);
+const appWatermarkContent = ref('');
+const appEnableCheckUpdates = ref(true);
+const appDefaultHomePath = ref('/analytics');
+const appEnablePreferences = ref(true);
+
+const footerEnable = ref(true);
+const footerFixed = ref(true);
+
+const copyrightEnable = ref(true);
+const copyrightCompanyName = ref('');
+const copyrightCompanySiteLink = ref('');
+const copyrightDate = ref('');
+const copyrightIcp = ref('');
+const copyrightIcpLink = ref('');
+const copyrightPoliceIcp = ref('');
+const copyrightPoliceIcpLink = ref('');
+const copyrightLoginOnly = ref(true);
+
+const logoEnable = ref(true);
+const logoSource = ref('');
+const logoFit = ref('contain');
+
+const shortcutKeysEnable = ref(true);
+const shortcutKeysGlobalSearch = ref(true);
+const shortcutKeysGlobalLogout = ref(true);
+const shortcutKeysGlobalLockScreen = ref(true);
+
+const fitOptions = [
+  { label: $t('ui-config.logo.fitOptions.contain'), value: 'contain' },
+  { label: $t('ui-config.logo.fitOptions.cover'), value: 'cover' },
+  { label: $t('ui-config.logo.fitOptions.fill'), value: 'fill' },
+  { label: $t('ui-config.logo.fitOptions.none'), value: 'none' },
+  { label: $t('ui-config.logo.fitOptions.scale-down'), value: 'scale-down' },
+];
+
+function getDefaultConfig() {
+  const overrides = overridesPreferences as Record<string, any>;
+  return {
+    app: {
+      name: preferences.app.name || overrides.app?.name || '',
+      locale: overrides.app?.locale || preferences.app.locale || 'zh-CN',
+      dynamicTitle:
+        overrides.app?.dynamicTitle ?? preferences.app.dynamicTitle ?? true,
+      watermark: overrides.app?.watermark ?? preferences.app.watermark ?? false,
+      watermarkContent:
+        overrides.app?.watermarkContent ||
+        preferences.app.watermarkContent ||
+        '',
+      enableCheckUpdates:
+        overrides.app?.enableCheckUpdates ??
+        preferences.app.enableCheckUpdates ??
+        true,
+      defaultHomePath:
+        overrides.app?.defaultHomePath ||
+        preferences.app.defaultHomePath ||
+        '/page-render/main_home',
+      enablePreferences: overrides.app?.enablePreferences ?? true,
+    },
+    footer: {
+      enable: overrides.footer?.enable ?? preferences.footer.enable ?? true,
+      fixed: overrides.footer?.fixed ?? preferences.footer.fixed ?? true,
+    },
+    copyright: {
+      enable:
+        overrides.copyright?.enable ?? preferences.copyright.enable ?? true,
+      companyName:
+        overrides.copyright?.companyName ||
+        preferences.copyright.companyName ||
+        '',
+      companySiteLink:
+        overrides.copyright?.companySiteLink ||
+        preferences.copyright.companySiteLink ||
+        '',
+      date: overrides.copyright?.date || preferences.copyright.date || '',
+      icp: overrides.copyright?.icp || preferences.copyright.icp || '',
+      icpLink:
+        overrides.copyright?.icpLink || preferences.copyright.icpLink || '',
+      policeIcp:
+        overrides.copyright?.policeIcp || preferences.copyright.policeIcp || '',
+      policeIcpLink:
+        overrides.copyright?.policeIcpLink || preferences.copyright.policeIcpLink || '',
+      loginOnly:
+        overrides.copyright?.loginOnly ?? preferences.copyright.loginOnly ?? true,
+    },
+    logo: {
+      enable: overrides.logo?.enable ?? preferences.logo.enable ?? true,
+      source: overrides.logo?.source || preferences.logo.source || '',
+      fit: overrides.logo?.fit || preferences.logo.fit || 'contain',
+    },
+    shortcutKeys: {
+      enable:
+        overrides.shortcutKeys?.enable ??
+        preferences.shortcutKeys.enable ??
+        true,
+      globalSearch:
+        overrides.shortcutKeys?.globalSearch ??
+        preferences.shortcutKeys.globalSearch ??
+        true,
+      globalLogout:
+        overrides.shortcutKeys?.globalLogout ??
+        preferences.shortcutKeys.globalLogout ??
+        true,
+      globalLockScreen:
+        overrides.shortcutKeys?.globalLockScreen ??
+        preferences.shortcutKeys.globalLockScreen ??
+        true,
+    },
+  };
+}
+
+async function loadConfig() {
+  loading.value = true;
+  try {
+    const applicationId = getCurrentApplicationId();
+    const data = await getPreferencesConfigApi(applicationId);
+    const defaults = getDefaultConfig();
+
+    appName.value = data?.app?.name || defaults.app.name;
+    appLocale.value = (data?.app?.locale || defaults.app.locale) as LocaleType;
+    appDynamicTitle.value =
+      data?.app?.dynamicTitle ?? defaults.app.dynamicTitle;
+    appWatermark.value = data?.app?.watermark ?? defaults.app.watermark;
+    appWatermarkContent.value =
+      data?.app?.watermarkContent || defaults.app.watermarkContent;
+    appEnableCheckUpdates.value =
+      data?.app?.enableCheckUpdates ?? defaults.app.enableCheckUpdates;
+    appDefaultHomePath.value =
+      data?.app?.defaultHomePath || defaults.app.defaultHomePath;
+    appEnablePreferences.value =
+      data?.app?.enablePreferences ?? defaults.app.enablePreferences;
+
+    footerEnable.value = data?.footer?.enable ?? defaults.footer.enable;
+    footerFixed.value = data?.footer?.fixed ?? defaults.footer.fixed;
+
+    copyrightEnable.value =
+      data?.copyright?.enable ?? defaults.copyright.enable;
+    copyrightCompanyName.value =
+      data?.copyright?.companyName || defaults.copyright.companyName;
+    copyrightCompanySiteLink.value =
+      data?.copyright?.companySiteLink || defaults.copyright.companySiteLink;
+    copyrightDate.value = data?.copyright?.date || defaults.copyright.date;
+    copyrightIcp.value = data?.copyright?.icp || defaults.copyright.icp;
+    copyrightIcpLink.value =
+      data?.copyright?.icpLink || defaults.copyright.icpLink;
+    copyrightPoliceIcp.value =
+      data?.copyright?.policeIcp || defaults.copyright.policeIcp;
+    copyrightPoliceIcpLink.value =
+      data?.copyright?.policeIcpLink || defaults.copyright.policeIcpLink;
+    copyrightLoginOnly.value =
+      data?.copyright?.loginOnly ?? defaults.copyright.loginOnly;
+
+    logoEnable.value = data?.logo?.enable ?? defaults.logo.enable;
+    logoSource.value = data?.logo?.source || defaults.logo.source;
+    logoFit.value = data?.logo?.fit || defaults.logo.fit;
+
+    shortcutKeysEnable.value =
+      data?.shortcutKeys?.enable ?? defaults.shortcutKeys.enable;
+    shortcutKeysGlobalSearch.value =
+      data?.shortcutKeys?.globalSearch ?? defaults.shortcutKeys.globalSearch;
+    shortcutKeysGlobalLogout.value =
+      data?.shortcutKeys?.globalLogout ?? defaults.shortcutKeys.globalLogout;
+    shortcutKeysGlobalLockScreen.value =
+      data?.shortcutKeys?.globalLockScreen ??
+      defaults.shortcutKeys.globalLockScreen;
+  } catch {
+    const defaults = getDefaultConfig();
+    appName.value = defaults.app.name;
+    appLocale.value = defaults.app.locale as LocaleType;
+    logoEnable.value = defaults.logo.enable;
+    logoSource.value = defaults.logo.source;
+    logoFit.value = defaults.logo.fit;
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 获取带子应用前缀的首页路径
+function getDefaultHomePathWithPrefix(): string {
+  const path = appDefaultHomePath.value || '/analytics';
+  const appCode = appContextStore.appCode;
+  // 如果是子应用模式且路径不包含子应用前缀，自动添加
+  if (appCode && !path.startsWith(`/app/${appCode}`)) {
+    return `/app/${appCode}${path.startsWith('/') ? path : `/${path}`}`;
+  }
+  return path;
+}
+
+function buildConfig(): PreferencesConfig {
+  return {
+    app: {
+      name: appName.value,
+      locale: appLocale.value,
+      dynamicTitle: appDynamicTitle.value,
+      watermark: appWatermark.value,
+      watermarkContent: appWatermarkContent.value,
+      enableCheckUpdates: appEnableCheckUpdates.value,
+      defaultHomePath: getDefaultHomePathWithPrefix(),
+      enablePreferences: appEnablePreferences.value,
+    },
+    footer: {
+      enable: footerEnable.value,
+      fixed: footerFixed.value,
+    },
+    copyright: {
+      enable: copyrightEnable.value,
+      companyName: copyrightCompanyName.value,
+      companySiteLink: copyrightCompanySiteLink.value,
+      date: copyrightDate.value,
+      icp: copyrightIcp.value,
+      icpLink: copyrightIcpLink.value,
+      policeIcp: copyrightPoliceIcp.value,
+      policeIcpLink: copyrightPoliceIcpLink.value,
+      loginOnly: copyrightLoginOnly.value,
+    },
+    logo: {
+      enable: logoEnable.value,
+      source: logoSource.value,
+      fit: logoFit.value,
+    },
+    shortcutKeys: {
+      enable: shortcutKeysEnable.value,
+      globalSearch: shortcutKeysGlobalSearch.value,
+      globalLogout: shortcutKeysGlobalLogout.value,
+      globalLockScreen: shortcutKeysGlobalLockScreen.value,
+    },
+  };
+}
+
+function applyPreferences() {
+  const config = buildConfig();
+  updatePreferences({
+    app: config.app,
+    footer: config.footer,
+    copyright: config.copyright,
+    logo: config.logo,
+    shortcutKeys: config.shortcutKeys,
+  });
+}
+
+async function save() {
+  if (loading.value) return;
+  try {
+    applyPreferences();
+
+    if (appLocale.value !== preferences.app.locale) {
+      // 如果是跟随系统，获取系统语言
+      const actualLocale =
+        appLocale.value === 'auto' ? getSystemLanguage() : appLocale.value;
+      await loadLocaleMessages(actualLocale);
+    }
+
+    const applicationId = getCurrentApplicationId();
+    const currentConfig = (await getPreferencesConfigApi(applicationId)) ?? {};
+    const newConfig = mergePreferencesConfig(currentConfig, buildConfig());
+    await updatePreferencesConfigApi(newConfig, applicationId);
+    ElMessage.success($t('ui-config.saveSuccess'));
+  } catch {
+    ElMessage.error($t('ui-config.saveError'));
+  }
+}
+
+function reset() {
+  loadConfig();
+}
+
+defineExpose({ reset, save });
+
+function isFileId(value: string): boolean {
+  // 支持多种ID格式：UUID、纯数字、nanoid（字母数字混合，通常21位）
+  return (
+    /^[\da-f]{8}-[\da-f]{4}-[\da-f]{4}-[\da-f]{4}-[\da-f]{12}$/i.test(value) ||
+    /^\d+$/.test(value) ||
+    /^[\w-]{10,30}$/.test(value) // nanoid格式：字母数字下划线横杠，10-30位
+  );
+}
+
+// Logo显示URL（响应式）
+const logoDisplayUrl = ref('');
+
+// 加载Logo URL（Logo是公开文件，无需认证）
+function loadLogoDisplayUrl(source: string) {
+  if (!source) {
+    logoDisplayUrl.value = '';
+    return;
+  }
+  if (
+    source.startsWith('http://') ||
+    source.startsWith('https://') ||
+    source.startsWith('/') ||
+    source.startsWith('data:')
+  ) {
+    logoDisplayUrl.value = source;
+    return;
+  }
+  if (isFileId(source)) {
+    // Logo是公开文件，直接使用公开URL，无需临时token
+    logoDisplayUrl.value = getFileUrlPublic(source);
+    return;
+  }
+  logoDisplayUrl.value = source;
+}
+
+// 监听logoSource变化，加载显示URL
+watch(
+  logoSource,
+  (newSource) => {
+    loadLogoDisplayUrl(newSource);
+  },
+  { immediate: true },
+);
+
+const uploadInputRef = ref<HTMLInputElement>();
+
+function openFileSelector() {
+  uploadInputRef.value?.click();
+}
+
+async function handleFileInputChange(event: Event) {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  if (!file) return;
+
+  try {
+    // Logo上传时设置为公开，这样无需认证即可访问
+    const response = await uploadFile(file, {
+      isPublic: true,
+      source: 'avatar',
+    });
+    if (response && response.id) {
+      // 保存公开文件的完整URL路径，这样layout和auth页面可以直接使用
+      logoSource.value = getFileUrlPublic(String(response.id));
+    }
+  } catch {
+    ElMessage.error($t('ui-config.loadError'));
+  }
+  target.value = '';
+}
+
+function clearLogo() {
+  logoSource.value = '';
+}
+
+onMounted(() => {
+  loadConfig();
+});
+</script>
+
+<template>
+  <div v-loading="loading" class="grid grid-cols-3 gap-6 p-4">
+    <!-- 第一列：应用配置 -->
+    <div class="app-column">
+      <Block :title="$t('ui-config.app.title')">
+        <InputItem
+          v-model="appName"
+          :placeholder="$t('ui-config.app.namePlaceholder')"
+        >
+          {{ $t('ui-config.app.name') }}
+        </InputItem>
+
+        <InputItem
+          v-model="appDefaultHomePath"
+          :placeholder="$t('ui-config.app.defaultHomePathPlaceholder')"
+        >
+          {{ $t('ui-config.app.defaultHomePath') }}
+        </InputItem>
+
+        <SwitchItem v-model="appEnablePreferences">
+          {{ $t('ui-config.app.enablePreferences') }}
+        </SwitchItem>
+      </Block>
+
+      <Block :title="$t('preferences.footer.title')">
+        <Footer
+          v-model:footer-enable="footerEnable"
+          v-model:footer-fixed="footerFixed"
+        />
+      </Block>
+
+      <Block :title="$t('preferences.copyright.title')">
+        <Copyright
+          v-model:copyright-enable="copyrightEnable"
+          v-model:copyright-login-only="copyrightLoginOnly"
+          v-model:copyright-company-name="copyrightCompanyName"
+          v-model:copyright-company-site-link="copyrightCompanySiteLink"
+          v-model:copyright-date="copyrightDate"
+          v-model:copyright-icp="copyrightIcp"
+          v-model:copyright-icp-link="copyrightIcpLink"
+          v-model:copyright-police-icp="copyrightPoliceIcp"
+          v-model:copyright-police-icp-link="copyrightPoliceIcpLink"
+          :disabled="false"
+        />
+      </Block>
+    </div>
+
+    <!-- 第二列：Logo配置 -->
+    <div class="logo-column">
+      <Block :title="$t('ui-config.logoConfig')">
+        <SwitchItem v-model="logoEnable">
+          {{ $t('ui-config.logo.enable') }}
+        </SwitchItem>
+
+        <template v-if="logoEnable">
+          <ElDivider />
+
+          <div class="mb-4">
+            <div class="text-muted-foreground mb-2 text-sm">
+              {{ $t('ui-config.logo.source') }}
+            </div>
+            <div class="flex flex-col gap-4">
+              <!-- Logo 预览和上传 -->
+              <div class="logo-preview-container flex">
+                <div class="flex items-center gap-4">
+                  <div>
+                    <div
+                      v-if="logoDisplayUrl"
+                      class="logo-preview"
+                      @click="openFileSelector"
+                    >
+                      <img
+                        :src="logoDisplayUrl"
+                        alt="Logo"
+                        class="logo-image"
+                      />
+                      <div class="logo-overlay">
+                        <span class="text-sm text-white">{{
+                          $t('common.replace')
+                        }}</span>
+                      </div>
+                    </div>
+                    <div
+                      v-else
+                      class="logo-placeholder"
+                      @click="openFileSelector"
+                    >
+                      <span class="text-muted-foreground text-sm">{{
+                        $t('ui-config.logo.sourcePlaceholder')
+                      }}</span>
+                    </div>
+                  </div>
+
+                  <ElButton
+                    v-if="logoDisplayUrl"
+                    size="small"
+                    class="mt-2"
+                    @click="clearLogo"
+                  >
+                    {{ $t('common.clear') }}
+                  </ElButton>
+                </div>
+              </div>
+              <input
+                ref="uploadInputRef"
+                type="file"
+                accept="image/*"
+                style="display: none"
+                @change="handleFileInputChange"
+              />
+              <ElInput
+                v-model="logoSource"
+                :placeholder="$t('ui-config.logo.sourcePlaceholder')"
+                clearable
+              />
+            </div>
+          </div>
+
+          <div class="mb-4">
+            <div class="text-muted-foreground mb-2 text-sm">
+              {{ $t('ui-config.logo.fit') }}
+            </div>
+            <ElSelect v-model="logoFit" class="w-full">
+              <ElOption
+                v-for="item in fitOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </ElSelect>
+          </div>
+        </template>
+      </Block>
+    </div>
+
+    <!-- 第三列：快捷键 -->
+    <div class="shortcut-column">
+      <Block :title="$t('preferences.shortcutKeys.global')">
+        <GlobalShortcutKeys
+          v-model:shortcut-keys-enable="shortcutKeysEnable"
+          v-model:shortcut-keys-global-search="shortcutKeysGlobalSearch"
+          v-model:shortcut-keys-lock-screen="shortcutKeysGlobalLockScreen"
+          v-model:shortcut-keys-logout="shortcutKeysGlobalLogout"
+        />
+      </Block>
+
+      <Block :title="$t('preferences.general')">
+        <General
+          v-model:app-locale="appLocale"
+          v-model:app-dynamic-title="appDynamicTitle"
+          v-model:app-watermark="appWatermark"
+          v-model:app-watermark-content="appWatermarkContent"
+          v-model:app-enable-check-updates="appEnableCheckUpdates"
+        />
+      </Block>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.app-column,
+.logo-column,
+.shortcut-column {
+  min-width: 0;
+}
+
+.logo-preview-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.logo-preview {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.logo-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.logo-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(0 0 0 / 50%);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.logo-preview:hover .logo-overlay {
+  opacity: 1;
+}
+
+.logo-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  border: 2px dashed hsl(var(--border));
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.logo-placeholder:hover {
+  border-color: hsl(var(--primary));
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/ui-config/modules/login-config-form.vue b/web/apps/web-ele/src/views/_core/ui-config/modules/login-config-form.vue
new file mode 100644
index 0000000..ab302d5
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/ui-config/modules/login-config-form.vue
@@ -0,0 +1,331 @@
+<script lang="ts" setup>
+import type { PreferencesConfig } from '#/api/core/ui-config';
+
+import { onMounted, ref } from 'vue';
+
+import { Block, SwitchItem } from '@vben/layouts/preferences-blocks';
+import { $t } from '@vben/locales';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  getPreferencesConfigApi,
+  mergePreferencesConfig,
+  updatePreferencesConfigApi,
+} from '#/api/core/ui-config';
+import { useAppContextStore } from '#/store/app-context';
+
+defineOptions({ name: 'LoginConfigForm' });
+
+const appContextStore = useAppContextStore();
+
+function getCurrentApplicationId(): string | undefined {
+  return appContextStore.currentApp?.id;
+}
+
+const loading = ref(false);
+
+const loginEnableThirdParty = ref(false);
+const loginEnabledProviders = ref<string[]>([]);
+
+interface ProviderInfo {
+  key: string;
+  color: string;
+  iconViewBox: string;
+  iconPaths: string[];
+  pathColors?: string[];
+  isRect?: boolean;
+}
+
+const microsoftRects = [
+  { x: 0, y: 0, width: 10.66, height: 10.66 },
+  { x: 12.34, y: 0, width: 10.66, height: 10.66 },
+  { x: 0, y: 12.34, width: 10.66, height: 10.66 },
+  { x: 12.34, y: 12.34, width: 10.66, height: 10.66 },
+];
+
+const allProviders: ProviderInfo[] = [
+  {
+    key: 'gitee',
+    color: '#C71D23',
+    iconViewBox: '0 0 1024 1024',
+    iconPaths: [
+      'M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z',
+    ],
+  },
+  {
+    key: 'github',
+    color: '#24292e',
+    iconViewBox: '0 0 1024 1024',
+    iconPaths: [
+      'M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667',
+    ],
+  },
+  {
+    key: 'google',
+    color: '#4285F4',
+    iconViewBox: '0 0 24 24',
+    iconPaths: [
+      'M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z',
+      'M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z',
+      'M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z',
+      'M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z',
+    ],
+    pathColors: ['#4285F4', '#34A853', '#FBBC05', '#EA4335'],
+  },
+  {
+    key: 'microsoft',
+    color: '#00A4EF',
+    iconViewBox: '0 0 23 23',
+    iconPaths: [
+      'M0 0h10.66v10.66H0z',
+      'M12.34 0h10.66v10.66H12.34z',
+      'M0 12.34h10.66v10.66H0z',
+      'M12.34 12.34h10.66v10.66H12.34z',
+    ],
+    pathColors: ['#F25022', '#7FBA00', '#00A4EF', '#FFB900'],
+    isRect: true,
+  },
+  {
+    key: 'qq',
+    color: '#12B7F5',
+    iconViewBox: '0 0 1024 1024',
+    iconPaths: [
+      'M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z',
+    ],
+  },
+  {
+    key: 'wechat',
+    color: '#07C160',
+    iconViewBox: '0 0 1024 1024',
+    iconPaths: [
+      'M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z',
+    ],
+  },
+  {
+    key: 'wecom',
+    color: '#07C160',
+    iconViewBox: '0 0 1024 1024',
+    iconPaths: [
+      'M679.872 348.064c10.688 0 21.184 0.768 31.552 1.92C684.48 221.312 545.408 124.48 383.488 124.48c-180.16 0-327.68 121.536-327.68 275.84 0 89.088 49.088 162.176 131.2 218.88l-32.768 97.6 114.56-56.896c41.024 8.064 73.92 16.32 114.816 16.32 10.304 0 20.48-0.512 30.592-1.28-6.4-21.696-10.112-44.416-10.112-67.968 0-139.264 122.88-258.912 275.776-258.912zM505.152 270.528c16.384 0 27.264 10.688 27.264 26.88 0 16.128-10.88 26.944-27.264 26.944-16.32 0-32.704-10.816-32.704-26.944 0-16.192 16.384-26.88 32.704-26.88zM276.416 324.352c-16.384 0-32.832-10.816-32.832-26.944 0-16.192 16.448-26.88 32.832-26.88 16.32 0 27.2 10.688 27.2 26.88 0 16.128-10.88 26.944-27.2 26.944z',
+      'M968.064 604.864c0-137.344-131.072-249.024-278.208-249.024-155.904 0-278.528 111.68-278.528 249.024 0 137.472 122.624 249.024 278.528 249.024 32.64 0 65.536-8.128 98.304-16.256l89.856 48.768-24.64-81.024c65.536-65.472 114.688-137.344 114.688-200.512zM614.208 578.176c-10.816 0-21.824-10.688-21.824-21.568 0-10.752 11.008-21.568 21.824-21.568 16.512 0 27.328 10.816 27.328 21.568 0 10.88-10.816 21.568-27.328 21.568z m196.416 0c-10.752 0-21.696-10.688-21.696-21.568 0-10.752 10.944-21.568 21.696-21.568 16.384 0 27.328 10.816 27.328 21.568 0 10.88-10.944 21.568-27.328 21.568z',
+    ],
+  },
+  {
+    key: 'dingtalk',
+    color: '#0089FF',
+    iconViewBox: '0 0 1024 1024',
+    iconPaths: [
+      'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m244.5 558.4l-106.1-17s87.5-98.1 34.1-184.8c-53.4-86.7-151.5-51.4-151.5-51.4s-100.1 34.1-132.2 134.2c-32.1 100.1 34.1 184.8 34.1 184.8l-106.1 17s-17-68.2 17-151.5c34.1-83.3 100.1-132.2 100.1-132.2s-17-34.1-51.4-34.1c-34.1 0-68.2 17-68.2 17s-17-51.4 17-100.1c34.1-48.7 100.1-68.2 100.1-68.2s184.8-34.1 285 100.1c100.1 134.2 28.1 285.2 28.1 285.2z',
+    ],
+  },
+  {
+    key: 'feishu',
+    color: '#00D6B9',
+    iconViewBox: '0 0 1024 1024',
+    iconPaths: [
+      'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m213.3 512H298.7c-17.7 0-32-14.3-32-32V298.7c0-17.7 14.3-32 32-32h426.6c17.7 0 32 14.3 32 32V544c0 17.7-14.3 32-32 32z',
+      'M426.7 469.3h170.6c17.7 0 32 14.3 32 32v42.7c0 17.7-14.3 32-32 32H426.7c-17.7 0-32-14.3-32-32v-42.7c0-17.7 14.3-32 32-32z',
+    ],
+  },
+];
+
+function isProviderSelected(key: string): boolean {
+  return loginEnabledProviders.value.includes(key);
+}
+
+function toggleProvider(key: string) {
+  const index = loginEnabledProviders.value.indexOf(key);
+  if (index >= 0) {
+    loginEnabledProviders.value.splice(index, 1);
+  } else {
+    loginEnabledProviders.value.push(key);
+  }
+}
+
+async function loadConfig() {
+  loading.value = true;
+  try {
+    const applicationId = getCurrentApplicationId();
+    const data = await getPreferencesConfigApi(applicationId);
+
+    loginEnableThirdParty.value =
+      data?.loginConfig?.enableThirdPartyLogin ?? false;
+    loginEnabledProviders.value =
+      data?.loginConfig?.enabledProviders ?? [];
+  } catch {
+    loginEnableThirdParty.value = false;
+    loginEnabledProviders.value = [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+function buildConfig(): PreferencesConfig {
+  return {
+    loginConfig: {
+      enableThirdPartyLogin: loginEnableThirdParty.value,
+      enabledProviders: loginEnabledProviders.value,
+    },
+  };
+}
+
+async function save() {
+  if (loading.value) return;
+  try {
+    const applicationId = getCurrentApplicationId();
+    const currentConfig = (await getPreferencesConfigApi(applicationId)) ?? {};
+    const newConfig = mergePreferencesConfig(currentConfig, buildConfig());
+    await updatePreferencesConfigApi(newConfig, applicationId);
+    ElMessage.success($t('ui-config.saveSuccess'));
+  } catch {
+    ElMessage.error($t('ui-config.saveError'));
+  }
+}
+
+function reset() {
+  loadConfig();
+}
+
+defineExpose({ reset, save });
+
+onMounted(() => {
+  loadConfig();
+});
+</script>
+
+<template>
+  <div v-loading="loading" class="p-6">
+    <Block :title="$t('ui-config.loginConfig.title')">
+      <SwitchItem v-model="loginEnableThirdParty">
+        {{ $t('ui-config.loginConfig.enableThirdPartyLogin') }}
+      </SwitchItem>
+
+      <template v-if="loginEnableThirdParty">
+        <div class="mt-4">
+          <div class="text-muted-foreground mb-1 text-sm">
+            {{ $t('ui-config.loginConfig.enabledProviders') }}
+          </div>
+          <div class="text-muted-foreground mb-4 text-xs">
+            {{ $t('ui-config.loginConfig.enabledProvidersTip') }}
+          </div>
+
+          <div class="grid grid-cols-3 gap-3">
+            <div
+              v-for="provider in allProviders"
+              :key="provider.key"
+              class="provider-card"
+              :class="{ 'provider-card--selected': isProviderSelected(provider.key) }"
+              @click="toggleProvider(provider.key)"
+            >
+              <div class="provider-card__icon" :style="{ backgroundColor: provider.color + '14' }">
+                <svg
+                  class="size-5"
+                  :viewBox="provider.iconViewBox"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <template v-if="provider.isRect">
+                    <rect
+                      v-for="(rect, idx) in microsoftRects"
+                      :key="idx"
+                      :x="rect.x"
+                      :y="rect.y"
+                      :width="rect.width"
+                      :height="rect.height"
+                      :fill="provider.pathColors?.[idx] || provider.color"
+                    />
+                  </template>
+                  <template v-else>
+                    <path
+                      v-for="(pathD, idx) in provider.iconPaths"
+                      :key="idx"
+                      :d="pathD"
+                      :fill="provider.pathColors?.[idx] || provider.color"
+                    />
+                  </template>
+                </svg>
+              </div>
+              <span class="provider-card__name">
+                {{ $t(`ui-config.loginConfig.providers.${provider.key}`) }}
+              </span>
+              <div class="provider-card__check">
+                <svg
+                  v-if="isProviderSelected(provider.key)"
+                  class="size-4"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M20 6L9 17L4 12"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Block>
+  </div>
+</template>
+
+<style scoped>
+.provider-card {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border: 2px solid hsl(var(--border));
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+  position: relative;
+}
+
+.provider-card:hover {
+  border-color: hsl(var(--primary) / 0.5);
+  background-color: hsl(var(--accent) / 0.3);
+}
+
+.provider-card--selected {
+  border-color: hsl(var(--primary));
+  background-color: hsl(var(--primary) / 0.06);
+}
+
+.provider-card--selected:hover {
+  border-color: hsl(var(--primary));
+}
+
+.provider-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.provider-card__name {
+  font-size: 14px;
+  font-weight: 500;
+  color: hsl(var(--foreground));
+  flex: 1;
+}
+
+.provider-card__check {
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: hsl(var(--primary));
+}
+</style>
diff --git a/web/apps/web-ele/src/views/_core/ui-config/modules/ui-preferences-form.vue b/web/apps/web-ele/src/views/_core/ui-config/modules/ui-preferences-form.vue
new file mode 100644
index 0000000..028d0b0
--- /dev/null
+++ b/web/apps/web-ele/src/views/_core/ui-config/modules/ui-preferences-form.vue
@@ -0,0 +1,664 @@
+<script lang="ts" setup>
+import type {
+  BreadcrumbStyleType,
+  BuiltinThemeType,
+  ContentCompactType,
+  LayoutHeaderMenuAlignType,
+  LayoutHeaderModeType,
+  LayoutType,
+  NavigationStyleType,
+  PreferencesButtonPositionType,
+  ThemeModeType,
+} from '@vben/types';
+
+import type { PreferencesConfig } from '#/api/core/ui-config';
+
+import { onMounted, ref } from 'vue';
+
+import {
+  Animation,
+  Block,
+  Breadcrumb,
+  BuiltinTheme,
+  ColorMode,
+  Content,
+  Header,
+  Layout,
+  Navigation,
+  Radius,
+  Sidebar,
+  Tabbar,
+  Theme,
+  Widget,
+} from '@vben/layouts/preferences-blocks';
+import { $t } from '@vben/locales';
+import {
+  preferences,
+  updatePreferences,
+  usePreferences,
+} from '@vben/preferences';
+
+import { ElMessage } from 'element-plus';
+
+import {
+  getPreferencesConfigApi,
+  mergePreferencesConfig,
+  updatePreferencesConfigApi,
+} from '#/api/core/ui-config';
+import { overridesPreferences } from '#/preferences';
+import { useAppContextStore } from '#/store/app-context';
+
+defineOptions({ name: 'UIPreferencesForm' });
+
+const appContextStore = useAppContextStore();
+
+// 获取当前应用ID（子应用模式下返回应用ID，主应用模式下返回 undefined）
+function getCurrentApplicationId(): string | undefined {
+  return appContextStore.currentApp?.id;
+}
+
+const loading = ref(false);
+
+const { isDark, isFullContent, isHeaderNav, isMixedNav, isSideMode } =
+  usePreferences();
+
+const appLayout = ref<LayoutType>('sidebar-nav');
+const appColorGrayMode = ref(false);
+const appColorWeakMode = ref(false);
+const appContentCompact = ref<ContentCompactType>('wide');
+const appPreferencesButtonPosition = ref<PreferencesButtonPositionType>('auto');
+
+const transitionProgress = ref(true);
+const transitionName = ref('fade-slide');
+const transitionLoading = ref(true);
+const transitionEnable = ref(true);
+
+const themeColorPrimary = ref('hsl(212 100% 45%)');
+const themeBuiltinType = ref<BuiltinThemeType>('default');
+const themeMode = ref<ThemeModeType>('light');
+const themeRadius = ref('0.5');
+const themeSemiDarkSidebar = ref(false);
+const themeSemiDarkHeader = ref(false);
+
+const sidebarEnable = ref(true);
+const sidebarWidth = ref(230);
+const sidebarCollapsed = ref(false);
+const sidebarCollapsedShowTitle = ref(false);
+const sidebarAutoActivateChild = ref(false);
+const sidebarExpandOnHover = ref(true);
+const sidebarCollapsedButton = ref(true);
+const sidebarFixedButton = ref(true);
+
+const headerEnable = ref(true);
+const headerMode = ref<LayoutHeaderModeType>('fixed');
+const headerMenuAlign = ref<LayoutHeaderMenuAlignType>('start');
+
+const breadcrumbEnable = ref(true);
+const breadcrumbShowIcon = ref(true);
+const breadcrumbShowHome = ref(true);
+const breadcrumbStyleType = ref<BreadcrumbStyleType>('normal');
+const breadcrumbHideOnlyOne = ref(false);
+
+const tabbarEnable = ref(true);
+const tabbarShowIcon = ref(true);
+const tabbarShowMore = ref(true);
+const tabbarShowMaximize = ref(true);
+const tabbarPersist = ref(true);
+const tabbarDraggable = ref(true);
+const tabbarWheelable = ref(true);
+const tabbarStyleType = ref('chrome');
+const tabbarMaxCount = ref(0);
+const tabbarMiddleClickToClose = ref(true);
+
+const navigationStyleType = ref<NavigationStyleType>('rounded');
+const navigationSplit = ref(true);
+const navigationAccordion = ref(true);
+
+const widgetGlobalSearch = ref(true);
+const widgetFullscreen = ref(true);
+const widgetLanguageToggle = ref(true);
+const widgetNotification = ref(true);
+const widgetThemeToggle = ref(true);
+const widgetSidebarToggle = ref(true);
+const widgetLockScreen = ref(true);
+const widgetRefresh = ref(true);
+
+function getDefaultConfig() {
+  const overrides = overridesPreferences as Record<string, any>;
+  return {
+    app: {
+      layout: overrides.app?.layout || preferences.app.layout || 'sidebar-nav',
+      colorGrayMode:
+        overrides.app?.colorGrayMode ?? preferences.app.colorGrayMode ?? false,
+      colorWeakMode:
+        overrides.app?.colorWeakMode ?? preferences.app.colorWeakMode ?? false,
+      contentCompact:
+        overrides.app?.contentCompact ||
+        preferences.app.contentCompact ||
+        'wide',
+      preferencesButtonPosition:
+        overrides.app?.preferencesButtonPosition ||
+        preferences.app.preferencesButtonPosition ||
+        'auto',
+    },
+    transition: {
+      progress:
+        overrides.transition?.progress ??
+        preferences.transition.progress ??
+        true,
+      name:
+        overrides.transition?.name ||
+        preferences.transition.name ||
+        'fade-slide',
+      loading:
+        overrides.transition?.loading ?? preferences.transition.loading ?? true,
+      enable:
+        overrides.transition?.enable ?? preferences.transition.enable ?? true,
+    },
+    theme: {
+      colorPrimary:
+        overrides.theme?.colorPrimary ||
+        preferences.theme.colorPrimary ||
+        'hsl(212 100% 45%)',
+      builtinType:
+        overrides.theme?.builtinType ||
+        preferences.theme.builtinType ||
+        'default',
+      mode: overrides.theme?.mode || preferences.theme.mode || 'light',
+      radius: String(
+        overrides.theme?.radius || preferences.theme.radius || '0.5',
+      ),
+      semiDarkSidebar:
+        overrides.theme?.semiDarkSidebar ??
+        preferences.theme.semiDarkSidebar ??
+        false,
+      semiDarkHeader:
+        overrides.theme?.semiDarkHeader ??
+        preferences.theme.semiDarkHeader ??
+        false,
+    },
+    sidebar: {
+      enable: overrides.sidebar?.enable ?? preferences.sidebar.enable ?? true,
+      width: overrides.sidebar?.width || preferences.sidebar.width || 230,
+      collapsed:
+        overrides.sidebar?.collapsed ?? preferences.sidebar.collapsed ?? false,
+      collapsedShowTitle:
+        overrides.sidebar?.collapsedShowTitle ??
+        preferences.sidebar.collapsedShowTitle ??
+        false,
+      autoActivateChild:
+        overrides.sidebar?.autoActivateChild ??
+        preferences.sidebar.autoActivateChild ??
+        false,
+      expandOnHover:
+        overrides.sidebar?.expandOnHover ??
+        preferences.sidebar.expandOnHover ??
+        true,
+      collapsedButton:
+        overrides.sidebar?.collapsedButton ??
+        preferences.sidebar.collapsedButton ??
+        true,
+      fixedButton:
+        overrides.sidebar?.fixedButton ??
+        preferences.sidebar.fixedButton ??
+        true,
+    },
+    header: {
+      enable: overrides.header?.enable ?? preferences.header.enable ?? true,
+      mode: overrides.header?.mode || preferences.header.mode || 'fixed',
+      menuAlign:
+        overrides.header?.menuAlign || preferences.header.menuAlign || 'start',
+    },
+    breadcrumb: {
+      enable:
+        overrides.breadcrumb?.enable ?? preferences.breadcrumb.enable ?? true,
+      showIcon:
+        overrides.breadcrumb?.showIcon ??
+        preferences.breadcrumb.showIcon ??
+        true,
+      showHome:
+        overrides.breadcrumb?.showHome ??
+        preferences.breadcrumb.showHome ??
+        true,
+      styleType:
+        overrides.breadcrumb?.styleType ||
+        preferences.breadcrumb.styleType ||
+        'normal',
+      hideOnlyOne:
+        overrides.breadcrumb?.hideOnlyOne ??
+        preferences.breadcrumb.hideOnlyOne ??
+        false,
+    },
+    tabbar: {
+      enable: overrides.tabbar?.enable ?? preferences.tabbar.enable ?? true,
+      showIcon:
+        overrides.tabbar?.showIcon ?? preferences.tabbar.showIcon ?? true,
+      showMore:
+        overrides.tabbar?.showMore ?? preferences.tabbar.showMore ?? true,
+      showMaximize:
+        overrides.tabbar?.showMaximize ??
+        preferences.tabbar.showMaximize ??
+        true,
+      persist: overrides.tabbar?.persist ?? preferences.tabbar.persist ?? true,
+      draggable:
+        overrides.tabbar?.draggable ?? preferences.tabbar.draggable ?? true,
+      wheelable:
+        overrides.tabbar?.wheelable ?? preferences.tabbar.wheelable ?? true,
+      styleType:
+        overrides.tabbar?.styleType || preferences.tabbar.styleType || 'chrome',
+      maxCount: overrides.tabbar?.maxCount || preferences.tabbar.maxCount || 0,
+      middleClickToClose:
+        overrides.tabbar?.middleClickToClose ??
+        preferences.tabbar.middleClickToClose ??
+        true,
+    },
+    navigation: {
+      styleType:
+        overrides.navigation?.styleType ||
+        preferences.navigation.styleType ||
+        'rounded',
+      split:
+        overrides.navigation?.split ?? preferences.navigation.split ?? true,
+      accordion:
+        overrides.navigation?.accordion ??
+        preferences.navigation.accordion ??
+        true,
+    },
+    widget: {
+      globalSearch:
+        overrides.widget?.globalSearch ??
+        preferences.widget.globalSearch ??
+        true,
+      fullscreen:
+        overrides.widget?.fullscreen ?? preferences.widget.fullscreen ?? true,
+      languageToggle:
+        overrides.widget?.languageToggle ??
+        preferences.widget.languageToggle ??
+        true,
+      notification:
+        overrides.widget?.notification ??
+        preferences.widget.notification ??
+        true,
+      themeToggle:
+        overrides.widget?.themeToggle ?? preferences.widget.themeToggle ?? true,
+      sidebarToggle:
+        overrides.widget?.sidebarToggle ??
+        preferences.widget.sidebarToggle ??
+        true,
+      lockScreen:
+        overrides.widget?.lockScreen ?? preferences.widget.lockScreen ?? true,
+      refresh: overrides.widget?.refresh ?? preferences.widget.refresh ?? true,
+    },
+  };
+}
+
+async function loadConfig() {
+  loading.value = true;
+  try {
+    const applicationId = getCurrentApplicationId();
+    const data = await getPreferencesConfigApi(applicationId);
+    const defaults = getDefaultConfig();
+
+    appLayout.value = (data?.app?.layout || defaults.app.layout) as LayoutType;
+    appColorGrayMode.value =
+      data?.app?.colorGrayMode ?? defaults.app.colorGrayMode;
+    appColorWeakMode.value =
+      data?.app?.colorWeakMode ?? defaults.app.colorWeakMode;
+    appContentCompact.value = (data?.app?.contentCompact ||
+      defaults.app.contentCompact) as ContentCompactType;
+    appPreferencesButtonPosition.value = (data?.app
+      ?.preferencesButtonPosition ||
+      defaults.app.preferencesButtonPosition) as PreferencesButtonPositionType;
+
+    transitionProgress.value =
+      data?.transition?.progress ?? defaults.transition.progress;
+    transitionName.value = data?.transition?.name || defaults.transition.name;
+    transitionLoading.value =
+      data?.transition?.loading ?? defaults.transition.loading;
+    transitionEnable.value =
+      data?.transition?.enable ?? defaults.transition.enable;
+
+    themeColorPrimary.value =
+      data?.theme?.colorPrimary || defaults.theme.colorPrimary;
+    themeBuiltinType.value = (data?.theme?.builtinType ||
+      defaults.theme.builtinType) as BuiltinThemeType;
+    themeMode.value = (data?.theme?.mode ||
+      defaults.theme.mode) as ThemeModeType;
+    themeRadius.value = String(data?.theme?.radius || defaults.theme.radius);
+    themeSemiDarkSidebar.value =
+      data?.theme?.semiDarkSidebar ?? defaults.theme.semiDarkSidebar;
+    themeSemiDarkHeader.value =
+      data?.theme?.semiDarkHeader ?? defaults.theme.semiDarkHeader;
+
+    sidebarEnable.value = data?.sidebar?.enable ?? defaults.sidebar.enable;
+    sidebarWidth.value = data?.sidebar?.width || defaults.sidebar.width;
+    sidebarCollapsed.value =
+      data?.sidebar?.collapsed ?? defaults.sidebar.collapsed;
+    sidebarCollapsedShowTitle.value =
+      data?.sidebar?.collapsedShowTitle ?? defaults.sidebar.collapsedShowTitle;
+    sidebarAutoActivateChild.value =
+      data?.sidebar?.autoActivateChild ?? defaults.sidebar.autoActivateChild;
+    sidebarExpandOnHover.value =
+      data?.sidebar?.expandOnHover ?? defaults.sidebar.expandOnHover;
+    sidebarCollapsedButton.value =
+      data?.sidebar?.collapsedButton ?? defaults.sidebar.collapsedButton;
+    sidebarFixedButton.value =
+      data?.sidebar?.fixedButton ?? defaults.sidebar.fixedButton;
+
+    headerEnable.value = data?.header?.enable ?? defaults.header.enable;
+    headerMode.value = (data?.header?.mode ||
+      defaults.header.mode) as LayoutHeaderModeType;
+    headerMenuAlign.value = (data?.header?.menuAlign ||
+      defaults.header.menuAlign) as LayoutHeaderMenuAlignType;
+
+    breadcrumbEnable.value =
+      data?.breadcrumb?.enable ?? defaults.breadcrumb.enable;
+    breadcrumbShowIcon.value =
+      data?.breadcrumb?.showIcon ?? defaults.breadcrumb.showIcon;
+    breadcrumbShowHome.value =
+      data?.breadcrumb?.showHome ?? defaults.breadcrumb.showHome;
+    breadcrumbStyleType.value = (data?.breadcrumb?.styleType ||
+      defaults.breadcrumb.styleType) as BreadcrumbStyleType;
+    breadcrumbHideOnlyOne.value =
+      data?.breadcrumb?.hideOnlyOne ?? defaults.breadcrumb.hideOnlyOne;
+
+    tabbarEnable.value = data?.tabbar?.enable ?? defaults.tabbar.enable;
+    tabbarShowIcon.value = data?.tabbar?.showIcon ?? defaults.tabbar.showIcon;
+    tabbarShowMore.value = data?.tabbar?.showMore ?? defaults.tabbar.showMore;
+    tabbarShowMaximize.value =
+      data?.tabbar?.showMaximize ?? defaults.tabbar.showMaximize;
+    tabbarPersist.value = data?.tabbar?.persist ?? defaults.tabbar.persist;
+    tabbarDraggable.value =
+      data?.tabbar?.draggable ?? defaults.tabbar.draggable;
+    tabbarWheelable.value =
+      data?.tabbar?.wheelable ?? defaults.tabbar.wheelable;
+    tabbarStyleType.value =
+      data?.tabbar?.styleType || defaults.tabbar.styleType;
+    tabbarMaxCount.value = data?.tabbar?.maxCount || defaults.tabbar.maxCount;
+    tabbarMiddleClickToClose.value =
+      data?.tabbar?.middleClickToClose ?? defaults.tabbar.middleClickToClose;
+
+    navigationStyleType.value = (data?.navigation?.styleType ||
+      defaults.navigation.styleType) as NavigationStyleType;
+    navigationSplit.value =
+      data?.navigation?.split ?? defaults.navigation.split;
+    navigationAccordion.value =
+      data?.navigation?.accordion ?? defaults.navigation.accordion;
+
+    widgetGlobalSearch.value =
+      data?.widget?.globalSearch ?? defaults.widget.globalSearch;
+    widgetFullscreen.value =
+      data?.widget?.fullscreen ?? defaults.widget.fullscreen;
+    widgetLanguageToggle.value =
+      data?.widget?.languageToggle ?? defaults.widget.languageToggle;
+    widgetNotification.value =
+      data?.widget?.notification ?? defaults.widget.notification;
+    widgetThemeToggle.value =
+      data?.widget?.themeToggle ?? defaults.widget.themeToggle;
+    widgetSidebarToggle.value =
+      data?.widget?.sidebarToggle ?? defaults.widget.sidebarToggle;
+    widgetLockScreen.value =
+      data?.widget?.lockScreen ?? defaults.widget.lockScreen;
+    widgetRefresh.value = data?.widget?.refresh ?? defaults.widget.refresh;
+  } catch {
+    const defaults = getDefaultConfig();
+    appLayout.value = defaults.app.layout as LayoutType;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function buildConfig(): PreferencesConfig {
+  return {
+    app: {
+      layout: appLayout.value,
+      colorGrayMode: appColorGrayMode.value,
+      colorWeakMode: appColorWeakMode.value,
+      contentCompact: appContentCompact.value,
+      preferencesButtonPosition: appPreferencesButtonPosition.value,
+    },
+    transition: {
+      progress: transitionProgress.value,
+      name: transitionName.value,
+      loading: transitionLoading.value,
+      enable: transitionEnable.value,
+    },
+    theme: {
+      colorPrimary: themeColorPrimary.value,
+      builtinType: themeBuiltinType.value,
+      mode: themeMode.value,
+      radius: themeRadius.value,
+      semiDarkSidebar: themeSemiDarkSidebar.value,
+      semiDarkHeader: themeSemiDarkHeader.value,
+    },
+    sidebar: {
+      enable: sidebarEnable.value,
+      width: sidebarWidth.value,
+      collapsed: sidebarCollapsed.value,
+      collapsedShowTitle: sidebarCollapsedShowTitle.value,
+      autoActivateChild: sidebarAutoActivateChild.value,
+      expandOnHover: sidebarExpandOnHover.value,
+      collapsedButton: sidebarCollapsedButton.value,
+      fixedButton: sidebarFixedButton.value,
+    },
+    header: {
+      enable: headerEnable.value,
+      mode: headerMode.value,
+      menuAlign: headerMenuAlign.value,
+    },
+    breadcrumb: {
+      enable: breadcrumbEnable.value,
+      showIcon: breadcrumbShowIcon.value,
+      showHome: breadcrumbShowHome.value,
+      styleType: breadcrumbStyleType.value,
+      hideOnlyOne: breadcrumbHideOnlyOne.value,
+    },
+    tabbar: {
+      enable: tabbarEnable.value,
+      showIcon: tabbarShowIcon.value,
+      showMore: tabbarShowMore.value,
+      showMaximize: tabbarShowMaximize.value,
+      persist: tabbarPersist.value,
+      draggable: tabbarDraggable.value,
+      wheelable: tabbarWheelable.value,
+      styleType: tabbarStyleType.value,
+      maxCount: tabbarMaxCount.value,
+      middleClickToClose: tabbarMiddleClickToClose.value,
+    },
+    navigation: {
+      styleType: navigationStyleType.value,
+      split: navigationSplit.value,
+      accordion: navigationAccordion.value,
+    },
+    widget: {
+      globalSearch: widgetGlobalSearch.value,
+      fullscreen: widgetFullscreen.value,
+      languageToggle: widgetLanguageToggle.value,
+      notification: widgetNotification.value,
+      themeToggle: widgetThemeToggle.value,
+      sidebarToggle: widgetSidebarToggle.value,
+      lockScreen: widgetLockScreen.value,
+      refresh: widgetRefresh.value,
+    },
+  };
+}
+
+function applyPreferences() {
+  const config = buildConfig();
+  updatePreferences({
+    app: config.app,
+    transition: config.transition,
+    theme: config.theme,
+    sidebar: config.sidebar,
+    header: config.header,
+    breadcrumb: config.breadcrumb,
+    tabbar: config.tabbar,
+    navigation: config.navigation,
+    widget: config.widget,
+  });
+}
+
+async function save() {
+  if (loading.value) return;
+  try {
+    applyPreferences();
+
+    const applicationId = getCurrentApplicationId();
+    const currentConfig = (await getPreferencesConfigApi(applicationId)) ?? {};
+    const newConfig = mergePreferencesConfig(currentConfig, buildConfig());
+    await updatePreferencesConfigApi(newConfig, applicationId);
+    ElMessage.success($t('ui-config.saveSuccess'));
+  } catch {
+    ElMessage.error($t('ui-config.saveError'));
+  }
+}
+
+function reset() {
+  loadConfig();
+}
+
+defineExpose({ reset, save });
+
+onMounted(() => {
+  loadConfig();
+});
+</script>
+
+<template>
+  <div v-loading="loading" class="grid grid-cols-3 gap-6 p-4">
+    <!-- 外观 -->
+    <div class="preferences-column">
+      <Block :title="$t('preferences.theme.title')">
+        <Theme
+          v-model="themeMode"
+          v-model:theme-semi-dark-sidebar="themeSemiDarkSidebar"
+          v-model:theme-semi-dark-header="themeSemiDarkHeader"
+        />
+      </Block>
+
+      <Block :title="$t('preferences.theme.builtin.title')">
+        <BuiltinTheme
+          v-model="themeBuiltinType"
+          v-model:theme-color-primary="themeColorPrimary"
+          :is-dark="isDark"
+        />
+      </Block>
+
+      <Block :title="$t('preferences.animation.title')">
+        <Animation
+          v-model:transition-enable="transitionEnable"
+          v-model:transition-loading="transitionLoading"
+          v-model:transition-name="transitionName"
+          v-model:transition-progress="transitionProgress"
+        />
+      </Block>
+
+      <Block :title="$t('preferences.theme.radius')">
+        <Radius v-model="themeRadius" />
+      </Block>
+
+      <Block :title="$t('preferences.other')">
+        <ColorMode
+          v-model:app-color-gray-mode="appColorGrayMode"
+          v-model:app-color-weak-mode="appColorWeakMode"
+        />
+      </Block>
+    </div>
+
+    <!-- 布局 -->
+    <div class="preferences-column">
+      <Block :title="$t('preferences.layout')">
+        <Layout v-model="appLayout" />
+      </Block>
+
+      <Block :title="$t('preferences.content')">
+        <Content v-model="appContentCompact" />
+      </Block>
+
+      <Block :title="$t('preferences.sidebar.title')">
+        <Sidebar
+          v-model:sidebar-enable="sidebarEnable"
+          v-model:sidebar-width="sidebarWidth"
+          v-model:sidebar-collapsed="sidebarCollapsed"
+          v-model:sidebar-collapsed-show-title="sidebarCollapsedShowTitle"
+          v-model:sidebar-auto-activate-child="sidebarAutoActivateChild"
+          v-model:sidebar-expand-on-hover="sidebarExpandOnHover"
+          v-model:sidebar-collapsed-button="sidebarCollapsedButton"
+          v-model:sidebar-fixed-button="sidebarFixedButton"
+          :current-layout="appLayout"
+          :disabled="!isSideMode"
+        />
+      </Block>
+
+      <Block :title="$t('preferences.header.title')">
+        <Header
+          v-model:header-enable="headerEnable"
+          v-model:header-mode="headerMode"
+          v-model:header-menu-align="headerMenuAlign"
+          :disabled="isFullContent"
+        />
+      </Block>
+
+      <Block :title="$t('preferences.navigationMenu.title')">
+        <Navigation
+          v-model:navigation-style-type="navigationStyleType"
+          v-model:navigation-split="navigationSplit"
+          v-model:navigation-accordion="navigationAccordion"
+          :disabled="isFullContent"
+          :disabled-navigation-split="!isMixedNav"
+        />
+      </Block>
+    </div>
+
+    <!-- 布局（续） -->
+    <div class="preferences-column">
+      <Block :title="$t('preferences.breadcrumb.title')">
+        <Breadcrumb
+          v-model:breadcrumb-enable="breadcrumbEnable"
+          v-model:breadcrumb-show-icon="breadcrumbShowIcon"
+          v-model:breadcrumb-show-home="breadcrumbShowHome"
+          v-model:breadcrumb-style-type="breadcrumbStyleType"
+          v-model:breadcrumb-hide-only-one="breadcrumbHideOnlyOne"
+          :disabled="
+            isFullContent || isMixedNav || isHeaderNav || !headerEnable
+          "
+        />
+      </Block>
+
+      <Block :title="$t('preferences.tabbar.title')">
+        <Tabbar
+          v-model:tabbar-enable="tabbarEnable"
+          v-model:tabbar-show-icon="tabbarShowIcon"
+          v-model:tabbar-show-more="tabbarShowMore"
+          v-model:tabbar-show-maximize="tabbarShowMaximize"
+          v-model:tabbar-persist="tabbarPersist"
+          v-model:tabbar-draggable="tabbarDraggable"
+          v-model:tabbar-wheelable="tabbarWheelable"
+          v-model:tabbar-style-type="tabbarStyleType"
+          v-model:tabbar-max-count="tabbarMaxCount"
+          v-model:tabbar-middle-click-to-close="tabbarMiddleClickToClose"
+        />
+      </Block>
+
+      <Block :title="$t('preferences.widget.title')">
+        <Widget
+          v-model:app-preferences-button-position="appPreferencesButtonPosition"
+          v-model:widget-fullscreen="widgetFullscreen"
+          v-model:widget-global-search="widgetGlobalSearch"
+          v-model:widget-language-toggle="widgetLanguageToggle"
+          v-model:widget-lock-screen="widgetLockScreen"
+          v-model:widget-notification="widgetNotification"
+          v-model:widget-refresh="widgetRefresh"
+          v-model:widget-sidebar-toggle="widgetSidebarToggle"
+          v-model:widget-theme-toggle="widgetThemeToggle"
+        />
+      </Block>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.preferences-column {
+  min-width: 0;
+}
+</style>
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index 70b5e6d..06fa718 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -665,6 +665,9 @@ importers:
       '@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
@@ -707,6 +710,9 @@ importers:
       element-plus:
         specifier: 'catalog:'
         version: 2.11.9(vue@3.5.25(typescript@5.9.3))
+      grid-layout-plus:
+        specifier: ^1.1.1
+        version: 1.1.1(vue@3.5.25(typescript@5.9.3))
       pinia:
         specifier: ^3.0.3
         version: 3.0.4(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
@@ -3485,6 +3491,9 @@ packages:
       '@types/node':
         optional: true
 
+  '@interactjs/types@1.10.27':
+    resolution: {integrity: sha512-BUdv0cvs4H5ODuwft2Xp4eL8Vmi3LcihK42z0Ft/FbVJZoRioBsxH+LlsBdK4tAie7PqlKGy+1oyOncu1nQ6eA==}
+
   '@internationalized/date@3.10.0':
     resolution: {integrity: sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==}
 
@@ -3590,6 +3599,9 @@ packages:
   '@jspm/import-map@1.2.2':
     resolution: {integrity: sha512-QrM7+lkgVE8t9NZSm9fDSzheguEOVCOxueKxSwgoOt7yUWesWKDFmmL9bQFURl4IqMcpPz7VV2Tvw9s9emaJzQ==}
 
+  '@juggle/resize-observer@3.4.0':
+    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
+
   '@keyv/bigmap@1.3.0':
     resolution: {integrity: sha512-KT01GjzV6AQD5+IYrcpoYLkCu1Jod3nau1Z7EsEuViO3TZGRacSbO9MfHmbJ1WaOXFtWLxPVj169cn2WNKPkIg==}
     engines: {node: '>= 18'}
@@ -4529,6 +4541,14 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@vexip-ui/hooks@2.9.4':
+    resolution: {integrity: sha512-dGUiBAeHIsnSVigGSPHcuHBVqrSGW8LV+zGohvOpBfXs8Ynn5ZcSmybIWJ3G826NsicPu9rqwcJG8uvSgG4k4Q==}
+    peerDependencies:
+      vue: ^3.5.17
+
+  '@vexip-ui/utils@2.16.4':
+    resolution: {integrity: sha512-KX+Q4EsuwDp6ZlRJ7OAkiYxu52D5CVM8zpqQz/FXYV+JUtzl9T3dvxgtA8gQ0wm5Sh/xT6jp8Wo4X7tLAzRh/A==}
+
   '@vite-pwa/vitepress@1.1.0':
     resolution: {integrity: sha512-enif5C2JmepS69Ak7PSr6K3Eimsg7VyryZo1Z6NiIPNDnjXFlOqxwBYaq8R/d0M7akArJsjos7KmQnEfNFf5nA==}
     peerDependencies:
@@ -6844,6 +6864,11 @@ packages:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
 
+  grid-layout-plus@1.1.1:
+    resolution: {integrity: sha512-7CWehJubrVC8Ps5QFUlnDsp0kiREvKfi3Pdjp21EyY8BNzSusqI3Utcxvu1Y9UUKe3YExvbhJzIxHK6rorbRaQ==}
+    peerDependencies:
+      vue: ^3.5.17
+
   gzip-size@7.0.0:
     resolution: {integrity: sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -7026,6 +7051,9 @@ packages:
     resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  interactjs@1.10.27:
+    resolution: {integrity: sha512-y/8RcCftGAF24gSp76X2JS3XpHiUvDQyhF8i7ujemBz77hwiHDuJzftHx7thY8cxGogwGiPJ+o97kWB6eAXnsA==}
+
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
@@ -12757,7 +12785,7 @@ snapshots:
 
   '@floating-ui/core@1.7.3':
     dependencies:
-      '@floating-ui/utils': 0.2.10
+      '@floating-ui/utils': 0.2.11
 
   '@floating-ui/core@1.7.5':
     dependencies:
@@ -12842,6 +12870,8 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.19.1
 
+  '@interactjs/types@1.10.27': {}
+
   '@internationalized/date@3.10.0':
     dependencies:
       '@swc/helpers': 0.5.17
@@ -12976,6 +13006,8 @@ snapshots:
 
   '@jspm/import-map@1.2.2': {}
 
+  '@juggle/resize-observer@3.4.0': {}
+
   '@keyv/bigmap@1.3.0(keyv@5.5.4)':
     dependencies:
       hashery: 1.3.0
@@ -13957,6 +13989,15 @@ snapshots:
       - rollup
       - supports-color
 
+  '@vexip-ui/hooks@2.9.4(vue@3.5.25(typescript@5.9.3))':
+    dependencies:
+      '@floating-ui/dom': 1.7.6
+      '@juggle/resize-observer': 3.4.0
+      '@vexip-ui/utils': 2.16.4
+      vue: 3.5.25(typescript@5.9.3)
+
+  '@vexip-ui/utils@2.16.4': {}
+
   '@vite-pwa/vitepress@1.1.0(vite-plugin-pwa@1.2.0(vite@5.4.21(@types/node@24.10.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0))':
     dependencies:
       vite-plugin-pwa: 1.2.0(vite@5.4.21(@types/node@24.10.1)(less@4.4.2)(sass@1.94.2)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0)
@@ -16645,6 +16686,13 @@ snapshots:
       section-matter: 1.0.0
       strip-bom-string: 1.0.0
 
+  grid-layout-plus@1.1.1(vue@3.5.25(typescript@5.9.3)):
+    dependencies:
+      '@vexip-ui/hooks': 2.9.4(vue@3.5.25(typescript@5.9.3))
+      '@vexip-ui/utils': 2.16.4
+      interactjs: 1.10.27
+      vue: 3.5.25(typescript@5.9.3)
+
   gzip-size@7.0.0:
     dependencies:
       duplexer: 0.1.2
@@ -16838,6 +16886,10 @@ snapshots:
 
   ini@4.1.1: {}
 
+  interactjs@1.10.27:
+    dependencies:
+      '@interactjs/types': 1.10.27
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0