feat: Feature/pro docs (#70)

* chore: merge main * feat: update docs * feat: remove coze-assistant * feat: add watermark plugin * feat: update preferences * feat: update docs --------- Co-authored-by: vince <vince292007@gmail.com>
2025-08-27 03:45:08 +08:00 · 2024-07-28 14:29:05 +08:00
parent 14538f7ed5
commit 376fd17a61
225 changed files with 7731 additions and 1784 deletions
--- a/apps/web-antd/src/api/core/auth.ts
+++ b/apps/web-antd/src/api/core/auth.ts
@@ -0,0 +1,33 @@
+import { requestClient } from '#/api/request';
+
+export namespace AuthApi {
+  /** 登录接口参数 */
+  export interface LoginParams {
+    password: string;
+    username: string;
+  }
+
+  /** 登录接口返回值 */
+  export interface LoginResult {
+    accessToken: string;
+    desc: string;
+    realName: string;
+    refreshToken: string;
+    userId: string;
+    username: string;
+  }
+}
+
+/**
+ * 登录
+ */
+export async function login(data: AuthApi.LoginParams) {
+  return requestClient.post<AuthApi.LoginResult>('/auth/login', data);
+}
+
+/**
+ * 获取用户权限码
+ */
+export async function getAccessCodes() {
+  return requestClient.get<string[]>('/auth/codes');
+}
--- a/apps/web-antd/src/apis/core/index.ts
+++ b/apps/web-antd/src/apis/core/index.ts
--- a/apps/web-antd/src/apis/core/menu.ts
+++ b/apps/web-antd/src/apis/core/menu.ts
@@ -1,6 +1,6 @@
 import type { RouteRecordStringComponent } from '@vben/types';

-import { requestClient } from '#/apis/request';
+import { requestClient } from '#/api/request';

 /**
 * 获取用户所有菜单
--- a/apps/web-antd/src/apis/core/user.ts
+++ b/apps/web-antd/src/apis/core/user.ts
@@ -1,6 +1,6 @@
 import type { UserInfo } from '@vben/types';

-import { requestClient } from '#/apis/request';
+import { requestClient } from '#/api/request';

 /**
 * 获取用户信息
--- a/apps/web-antd/src/apis/demos/index.ts
+++ b/apps/web-antd/src/apis/demos/index.ts
--- a/apps/web-antd/src/apis/demos/status.ts
+++ b/apps/web-antd/src/apis/demos/status.ts
@@ -1,4 +1,4 @@
-import { requestClient } from '#/apis/request';
+import { requestClient } from '#/api/request';

 /**
 * 模拟任意状态码
--- a/apps/web-antd/src/apis/index.ts
+++ b/apps/web-antd/src/apis/index.ts
@@ -1,3 +1,2 @@
 export * from './core';
 export * from './demos';
-export type * from './types';
--- a/apps/web-antd/src/apis/request.ts
+++ b/apps/web-antd/src/apis/request.ts
@@ -3,6 +3,7 @@
 */
 import type { HttpResponse } from '@vben/request';

+import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import { RequestClient } from '@vben/request';

@@ -10,13 +11,11 @@ import { message } from 'ant-design-vue';

 import { useAccessStore } from '#/store';

-/**
- * 创建请求实例
- * Create a request instance
- */
-function createRequestClient() {
+const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
+
+function createRequestClient(baseURL: string) {
  const client = new RequestClient({
-    baseURL: import.meta.env.VITE_GLOB_API_URL,
+    baseURL,
    // 为每个请求携带 Authorization
    makeAuthorization: () => {
      return {
@@ -43,6 +42,13 @@ function createRequestClient() {
      };
    },
    makeErrorMessage: (msg) => message.error(msg),
+
+    makeRequestHeaders: () => {
+      return {
+        // 为每个请求携带 Accept-Language
+        'Accept-Language': preferences.app.locale,
+      };
+    },
  });
  client.addResponseInterceptor<HttpResponse>((response) => {
    const { data: responseData, status } = response;
@@ -56,9 +62,4 @@ function createRequestClient() {
  return client;
 }

-const requestClient = createRequestClient();
-
-// 其他配置的请求方法
-// const { request: xxxRequest } = createRequest();
-
-export { requestClient };
+export const requestClient = createRequestClient(apiURL);
--- a/apps/web-antd/src/apis/core/auth.ts
+++ b/apps/web-antd/src/apis/core/auth.ts
@@ -1,17 +0,0 @@
-import type { UserApi } from '../types';
-
-import { requestClient } from '#/apis/request';
-
-/**
- * 登录
- */
-export async function login(data: UserApi.LoginParams) {
-  return requestClient.post<UserApi.LoginResult>('/auth/login', data);
-}
-
-/**
- * 获取用户权限码
- */
-export async function getAccessCodes() {
-  return requestClient.get<string[]>('/auth/codes');
-}
--- a/apps/web-antd/src/apis/types/index.ts
+++ b/apps/web-antd/src/apis/types/index.ts
@@ -1 +0,0 @@
-export type * from './user';
--- a/apps/web-antd/src/apis/types/user.ts
+++ b/apps/web-antd/src/apis/types/user.ts
@@ -1,19 +0,0 @@
-namespace UserApi {
-  /** 登录接口参数 */
-  export interface LoginParams {
-    password: string;
-    username: string;
-  }
-
-  /** 登录接口返回值 */
-  export interface LoginResult {
-    accessToken: string;
-    desc: string;
-    realName: string;
-    refreshToken: string;
-    userId: string;
-    username: string;
-  }
-}
-
-export type { UserApi };
--- a/apps/web-antd/src/bootstrap.ts
+++ b/apps/web-antd/src/bootstrap.ts
@@ -1,10 +1,9 @@
 import { createApp } from 'vue';

-import { preferences } from '@vben/preferences';
 import '@vben/styles';
 import '@vben/styles/antd';

-import { loadMessages, setupI18n } from '#/locales';
+import { setupI18n } from '#/locales';
 import { setupStore } from '#/store';

 import App from './app.vue';
@@ -14,11 +13,7 @@ async function bootstrap(namespace: string) {
  const app = createApp(App);

  // 国际化 i18n 配置
-  await setupI18n(app, {
-    defaultLocale: preferences.app.locale,
-    loadMessages,
-    missingWarn: !import.meta.env.PROD,
-  });
+  await setupI18n(app);

  // 配置 pinia-store
  await setupStore(app, { namespace });
--- a/apps/web-antd/src/locales/index.ts
+++ b/apps/web-antd/src/locales/index.ts
@@ -1,9 +1,11 @@
-import type { SupportedLanguagesType } from '@vben/types';
+import type { LocaleSetupOptions, SupportedLanguagesType } from '@vben/locales';
 import type { Locale } from 'ant-design-vue/es/locale';

+import type { App } from 'vue';
 import { ref } from 'vue';

-import { $t, loadLocalesMap, setupI18n } from '@vben/locales';
+import { $t, setupI18n as coreSetup, loadLocalesMap } from '@vben/locales';
+import { preferences } from '@vben/preferences';

 import antdEnLocale from 'ant-design-vue/es/locale/en_US';
 import antdDefaultLocale from 'ant-design-vue/es/locale/zh_CN';
@@ -76,4 +78,13 @@ async function loadAntdLocale(lang: SupportedLanguagesType) {
  }
 }

+async function setupI18n(app: App, options: LocaleSetupOptions = {}) {
+  await coreSetup(app, {
+    defaultLocale: preferences.app.locale,
+    loadMessages,
+    missingWarn: !import.meta.env.PROD,
+    ...options,
+  });
+}
+
 export { $t, antdLocale, loadMessages, setupI18n };
--- a/apps/web-antd/src/locales/langs/en-US.json
+++ b/apps/web-antd/src/locales/langs/en-US.json
@@ -33,11 +33,17 @@
        "text": "Text Badge",
        "color": "Badge Color"
      },
+      "activeIcon": {
+        "title": "Active Menu Icon",
+        "children": "Children Active Icon"
+      },
      "fallback": { "title": "Fallback Page" },
      "features": {
        "title": "Features",
        "hideChildrenInMenu": "Hide Menu Children",
        "loginExpired": "Login Expired",
+        "icons": "Icons",
+        "watermark": "Watermark",
        "tabs": "Tabs",
        "tabDetail": "Tab Detail Page"
      },
--- a/apps/web-antd/src/locales/langs/zh-CN.json
+++ b/apps/web-antd/src/locales/langs/zh-CN.json
@@ -33,6 +33,10 @@
        "text": "文本徽标",
        "color": "徽标颜色"
      },
+      "activeIcon": {
+        "title": "菜单激活图标",
+        "children": "子级激活图标"
+      },
      "fallback": {
        "title": "缺省页"
      },
@@ -40,6 +44,8 @@
        "title": "功能",
        "hideChildrenInMenu": "隐藏子菜单",
        "loginExpired": "登录过期",
+        "icons": "图标",
+        "watermark": "水印",
        "tabs": "标签页",
        "tabDetail": "标签详情页"
      },
--- a/apps/web-antd/src/main.ts
+++ b/apps/web-antd/src/main.ts
@@ -1,3 +1,4 @@
+import { unmountGlobalLoading } from '@vben/hooks';
 import { initPreferences } from '@vben/preferences';

 import { overridesPreferences } from './preferences';
@@ -9,7 +10,8 @@ async function initApplication() {
  // name用于指定项目唯一标识
  // 用于区分不同项目的偏好设置以及存储数据的key前缀以及其他一些需要隔离的数据
  const env = import.meta.env.PROD ? 'prod' : 'dev';
-  const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${env}`;
+  const appVersion = import.meta.env.VITE_APP_VERSION;
+  const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${appVersion}-${env}`;

  // app偏好设置初始化
  await initPreferences({
@@ -23,38 +25,7 @@ async function initApplication() {
  await bootstrap(namespace);

  // 移除并销毁loading
-  destroyAppLoading();
-}
-
-/**
- * 移除并销毁loading
- * 放在这里是而不是放在 index.html 的app标签内，是因为这样比较不会生硬，渲染过快可能会有闪烁
- * 通过先添加css动画隐藏，在动画结束后在移除loading节点来改善体验
- * 不好的地方是会增加一些代码量
- */
-function destroyAppLoading() {
-  // 查找全局 loading 元素
-  const loadingElement = document.querySelector('#__app-loading__');
-
-  if (loadingElement) {
-    // 添加隐藏类，触发过渡动画
-    loadingElement.classList.add('hidden');
-
-    // 查找所有需要移除的注入 loading 元素
-    const injectLoadingElements = document.querySelectorAll(
-      '[data-app-loading^="inject"]',
-    );
-
-    // 当过渡动画结束时，移除 loading 元素和所有注入的 loading 元素
-    loadingElement.addEventListener(
-      'transitionend',
-      () => {
-        loadingElement.remove(); // 移除 loading 元素
-        injectLoadingElements.forEach((el) => el.remove()); // 移除所有注入的 loading 元素
-      },
-      { once: true },
-    ); // 确保事件只触发一次
-  }
+  unmountGlobalLoading();
 }

 initApplication();
--- a/apps/web-antd/src/preferences.ts
+++ b/apps/web-antd/src/preferences.ts
@@ -1,9 +1,15 @@
+import { useAppConfig } from '@vben/hooks';
 import { defineOverridesPreferences } from '@vben/preferences';

+const { appTitle } = useAppConfig(import.meta.env, import.meta.env.PROD);
+
 /**
 * @description 项目配置文件
 * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
 */
 export const overridesPreferences = defineOverridesPreferences({
  // overrides
+  app: {
+    name: appTitle,
+  },
 });
--- a/apps/web-antd/src/router/access.ts
+++ b/apps/web-antd/src/router/access.ts
@@ -8,7 +8,7 @@ import { preferences } from '@vben/preferences';

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

-import { getAllMenus } from '#/apis';
+import { getAllMenus } from '#/api';
 import { BasicLayout, IFrameView } from '#/layouts';
 import { $t } from '#/locales';

--- a/apps/web-antd/src/router/index.ts
+++ b/apps/web-antd/src/router/index.ts
@@ -1,6 +1,10 @@
 import type { RouteRecordName, RouteRecordRaw } from 'vue-router';

-import { createRouter, createWebHashHistory } from 'vue-router';
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router';

 import { traverseTreeValues } from '@vben/utils';

@@ -11,11 +15,14 @@ import { routes } from './routes';
 *  @zh_CN 创建vue-router实例
 */
 const router = createRouter({
-  history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
+  history:
+    import.meta.env.VITE_ROUTER_HISTORY === 'hash'
+      ? createWebHashHistory(import.meta.env.VITE_BASE)
+      : createWebHistory(import.meta.env.VITE_BASE),
  // 应该添加到路由的初始路由列表。
  routes,
  scrollBehavior: () => ({ left: 0, top: 0 }),
-  // 是否应该禁止尾部斜杠。默认为假
+  // 是否应该禁止尾部斜杠。
  // strict: true,
 });

--- a/apps/web-antd/src/router/routes/modules/dashboard.ts
+++ b/apps/web-antd/src/router/routes/modules/dashboard.ts
@@ -13,11 +13,10 @@ const routes: RouteRecordRaw[] = [
    },
    name: 'Dashboard',
    path: '/',
-    redirect: '/analytics',
    children: [
      {
        name: 'Analytics',
-        path: 'analytics',
+        path: '/analytics',
        component: () => import('#/views/dashboard/analytics/index.vue'),
        meta: {
          affixTab: true,
@@ -27,7 +26,7 @@ const routes: RouteRecordRaw[] = [
      },
      {
        name: 'Workspace',
-        path: 'workspace',
+        path: '/workspace',
        component: () => import('#/views/dashboard/workspace/index.vue'),
        meta: {
          title: $t('page.dashboard.workspace'),
--- a/apps/web-antd/src/router/routes/modules/demos.ts
+++ b/apps/web-antd/src/router/routes/modules/demos.ts
@@ -14,7 +14,6 @@ const routes: RouteRecordRaw[] = [
    },
    name: 'Demos',
    path: '/demos',
-    redirect: '/demos/access',
    children: [
      // 权限控制
      {
@@ -22,13 +21,12 @@ const routes: RouteRecordRaw[] = [
          icon: 'mdi:shield-key-outline',
          title: $t('page.demos.access.frontendPermissions'),
        },
-        name: 'Access',
-        path: 'access',
-        redirect: '/demos/access/page-control',
+        name: 'AccessDemos',
+        path: '/demos/access',
        children: [
          {
-            name: 'AccessPageControl',
-            path: 'page-control',
+            name: 'AccessPageControlDemo',
+            path: '/demos/access/page-control',
            component: () => import('#/views/demos/access/index.vue'),
            meta: {
              icon: 'mdi:page-previous-outline',
@@ -36,8 +34,8 @@ const routes: RouteRecordRaw[] = [
            },
          },
          {
-            name: 'AccessButtonControl',
-            path: 'button-control',
+            name: 'AccessButtonControlDemo',
+            path: '/demos/access/button-control',
            component: () => import('#/views/demos/access/button-control.vue'),
            meta: {
              icon: 'mdi:button-cursor',
@@ -45,8 +43,8 @@ const routes: RouteRecordRaw[] = [
            },
          },
          {
-            name: 'AccessMenuVisible403',
-            path: 'menu-visible-403',
+            name: 'AccessMenuVisible403Demo',
+            path: '/demos/access/menu-visible-403',
            component: () =>
              import('#/views/demos/access/menu-visible-403.vue'),
            meta: {
@@ -57,8 +55,8 @@ const routes: RouteRecordRaw[] = [
            },
          },
          {
-            name: 'AccessSuperVisible',
-            path: 'super-visible',
+            name: 'AccessSuperVisibleDemo',
+            path: '/demos/access/super-visible',
            component: () => import('#/views/demos/access/super-visible.vue'),
            meta: {
              authority: ['super'],
@@ -67,8 +65,8 @@ const routes: RouteRecordRaw[] = [
            },
          },
          {
-            name: 'AccessAdminVisible',
-            path: 'admin-visible',
+            name: 'AccessAdminVisibleDemo',
+            path: '/demos/access/admin-visible',
            component: () => import('#/views/demos/access/admin-visible.vue'),
            meta: {
              authority: ['admin'],
@@ -77,8 +75,8 @@ const routes: RouteRecordRaw[] = [
            },
          },
          {
-            name: 'AccessUserVisible',
-            path: 'user-visible',
+            name: 'AccessUserVisibleDemo',
+            path: '/demos/access/user-visible',
            component: () => import('#/views/demos/access/user-visible.vue'),
            meta: {
              authority: ['user'],
@@ -94,13 +92,39 @@ const routes: RouteRecordRaw[] = [
          icon: 'mdi:feature-highlight',
          title: $t('page.demos.features.title'),
        },
-        name: 'Features',
-        path: 'features',
-        redirect: '/demos/features/tabs',
+        name: 'FeaturesDemos',
+        path: '/demos/features',
        children: [
+          {
+            name: 'LoginExpiredDemo',
+            path: '/demos/features/login-expired',
+            component: () =>
+              import('#/views/demos/features/login-expired/index.vue'),
+            meta: {
+              icon: 'mdi:encryption-expiration',
+              title: $t('page.demos.features.loginExpired'),
+            },
+          },
+          {
+            name: 'IconsDemo',
+            path: '/demos/features/icons',
+            component: () => import('#/views/demos/features/icons/index.vue'),
+            meta: {
+              title: $t('page.demos.features.icons'),
+            },
+          },
+          {
+            name: 'WatermarkDemo',
+            path: '/demos/features/watermark',
+            component: () =>
+              import('#/views/demos/features/watermark/index.vue'),
+            meta: {
+              title: $t('page.demos.features.watermark'),
+            },
+          },
          {
            name: 'FeatureTabsDemo',
-            path: 'tabs',
+            path: '/demos/features/tabs',
            component: () => import('#/views/demos/features/tabs/index.vue'),
            meta: {
              icon: 'lucide:app-window',
@@ -109,7 +133,7 @@ const routes: RouteRecordRaw[] = [
          },
          {
            name: 'FeatureTabDetailDemo',
-            path: 'tabs/detail/:id',
+            path: '/demos/features/tabs/detail/:id',
            component: () =>
              import('#/views/demos/features/tabs/tab-detail.vue'),
            meta: {
@@ -120,19 +144,19 @@ const routes: RouteRecordRaw[] = [
            },
          },
          {
-            name: 'HideChildrenInMenuParent',
-            path: 'hide-menu-children',
+            name: 'HideChildrenInMenuParentDemo',
+            path: '/demos/features/hide-menu-children',
            component: () =>
              import('#/views/demos/features/hide-menu-children/parent.vue'),
            meta: {
              hideChildrenInMenu: true,
              icon: 'ic:round-menu',
-              title: 'page.demos.features.hideChildrenInMenu',
+              title: $t('page.demos.features.hideChildrenInMenu'),
            },
            children: [
              {
-                name: 'HideChildrenInMenuChildren',
-                path: 'hide-children-in-menu',
+                name: 'HideChildrenInMenuChildrenDemo',
+                path: '/demos/features/hide-menu-children/children',
                component: () =>
                  import(
                    '#/views/demos/features/hide-menu-children/children.vue'
@@ -140,31 +164,20 @@ const routes: RouteRecordRaw[] = [
              },
            ],
          },
-          {
-            name: 'LoginExpired',
-            path: 'login-expired',
-            component: () =>
-              import('#/views/demos/features/login-expired/index.vue'),
-            meta: {
-              icon: 'mdi:encryption-expiration',
-              title: $t('page.demos.features.loginExpired'),
-            },
-          },
        ],
      },
      // 面包屑导航
      {
        name: 'BreadcrumbDemos',
-        path: 'breadcrumb',
+        path: '/demos/breadcrumb',
        meta: {
          icon: 'lucide:navigation',
          title: $t('page.demos.breadcrumb.navigation'),
        },
-        redirect: '/demos/breadcrumb/lateral',
        children: [
          {
-            name: 'BreadcrumbLateral',
-            path: 'lateral',
+            name: 'BreadcrumbLateralDemo',
+            path: '/demos/breadcrumb/lateral',
            component: () => import('#/views/demos/breadcrumb/lateral.vue'),
            meta: {
              icon: 'lucide:navigation',
@@ -172,8 +185,8 @@ const routes: RouteRecordRaw[] = [
            },
          },
          {
-            name: 'BreadcrumbLateralDetail',
-            path: 'lateral-detail',
+            name: 'BreadcrumbLateralDetailDemo',
+            path: '/demos/breadcrumb/lateral-detail',
            component: () =>
              import('#/views/demos/breadcrumb/lateral-detail.vue'),
            meta: {
@@ -183,17 +196,16 @@ const routes: RouteRecordRaw[] = [
            },
          },
          {
-            name: 'BreadcrumbLevel',
-            path: 'level',
+            name: 'BreadcrumbLevelDemo',
+            path: '/demos/breadcrumb/level',
            meta: {
              icon: 'lucide:navigation',
              title: $t('page.demos.breadcrumb.level'),
            },
-            redirect: '/demos/breadcrumb/level/detail',
            children: [
              {
-                name: 'BreadcrumbLevelDetail',
-                path: 'detail',
+                name: 'BreadcrumbLevelDetailDemo',
+                path: '/demos/breadcrumb/level/detail',
                component: () =>
                  import('#/views/demos/breadcrumb/level-detail.vue'),
                meta: {
@@ -210,13 +222,12 @@ const routes: RouteRecordRaw[] = [
          icon: 'mdi:lightbulb-error-outline',
          title: $t('page.demos.fallback.title'),
        },
-        name: 'Fallback',
-        path: 'fallback',
-        redirect: '/demos/fallback/403',
+        name: 'FallbackDemos',
+        path: '/demos/fallback',
        children: [
          {
-            name: 'Fallback403',
-            path: '403',
+            name: 'Fallback403Demo',
+            path: '/demos/fallback/403',
            component: () => import('#/views/_core/fallback/forbidden.vue'),
            meta: {
              icon: 'mdi:do-not-disturb-alt',
@@ -224,8 +235,8 @@ const routes: RouteRecordRaw[] = [
            },
          },
          {
-            name: 'Fallback404',
-            path: '404',
+            name: 'Fallback404Demo',
+            path: '/demos/fallback/404',
            component: () => import('#/views/_core/fallback/not-found.vue'),
            meta: {
              icon: 'mdi:table-off',
@@ -233,8 +244,8 @@ const routes: RouteRecordRaw[] = [
            },
          },
          {
-            name: 'Fallback500',
-            path: '500',
+            name: 'Fallback500Demo',
+            path: '/demos/fallback/500',
            component: () =>
              import('#/views/_core/fallback/internal-error.vue'),
            meta: {
@@ -243,8 +254,8 @@ const routes: RouteRecordRaw[] = [
            },
          },
          {
-            name: 'FallbackOffline',
-            path: 'offline',
+            name: 'FallbackOfflineDemo',
+            path: '/demos/fallback/offline',
            component: () => import('#/views/_core/fallback/offline.vue'),
            meta: {
              icon: 'mdi:offline',
@@ -261,14 +272,13 @@ const routes: RouteRecordRaw[] = [
          icon: 'lucide:circle-dot',
          title: $t('page.demos.badge.title'),
        },
-        name: 'BadgeDemo',
-        path: 'badge',
-        redirect: '/demos/badge/dot',
+        name: 'BadgeDemos',
+        path: '/demos/badge',
        children: [
          {
            name: 'BadgeDotDemo',
            component: () => import('#/views/demos/badge/index.vue'),
-            path: 'dot',
+            path: '/demos/badge/dot',
            meta: {
              badgeType: 'dot',
              icon: 'lucide:square-dot',
@@ -278,7 +288,7 @@ const routes: RouteRecordRaw[] = [
          {
            name: 'BadgeTextDemo',
            component: () => import('#/views/demos/badge/index.vue'),
-            path: 'text',
+            path: '/demos/badge/text',
            meta: {
              badge: '10',
              icon: 'lucide:square-dot',
@@ -288,7 +298,7 @@ const routes: RouteRecordRaw[] = [
          {
            name: 'BadgeColorDemo',
            component: () => import('#/views/demos/badge/index.vue'),
-            path: 'color',
+            path: '/demos/badge/color',
            meta: {
              badge: 'Hot',
              badgeVariants: 'destructive',
@@ -298,28 +308,48 @@ const routes: RouteRecordRaw[] = [
          },
        ],
      },
+      // 菜单激活图标
+      {
+        meta: {
+          activeIcon: 'fluent-emoji:radioactive',
+          icon: 'bi:radioactive',
+          title: $t('page.demos.activeIcon.title'),
+        },
+        name: 'ActiveIconDemos',
+        path: '/demos/active-icon',
+        children: [
+          {
+            name: 'ActiveIconDemo',
+            component: () => import('#/views/demos/active-icon/index.vue'),
+            path: '/demos/active-icon/children',
+            meta: {
+              activeIcon: 'fluent-emoji:radioactive',
+              icon: 'bi:radioactive',
+              title: $t('page.demos.activeIcon.children'),
+            },
+          },
+        ],
+      },
      // 外部链接
      {
        meta: {
          icon: 'ic:round-settings-input-composite',
          title: $t('page.demos.outside.title'),
        },
-        name: 'Outside',
-        path: 'outside',
-        redirect: '/demos/outside/iframe',
+        name: 'OutsideDemos',
+        path: '/demos/outside',
        children: [
          {
-            name: 'iframe',
-            path: 'iframe',
+            name: 'IframeDemos',
+            path: '/demos/outside/iframe',
            meta: {
              icon: 'mdi:newspaper-variant-outline',
              title: $t('page.demos.outside.embedded'),
            },
-            redirect: '/demos/outside/iframe/vue-document',
            children: [
              {
-                name: 'VueDocument',
-                path: 'vue-document',
+                name: 'VueDocumentDemo',
+                path: '/demos/outside/iframe/vue-document',
                component: IFrameView,
                meta: {
                  icon: 'logos:vue',
@@ -329,8 +359,8 @@ const routes: RouteRecordRaw[] = [
                },
              },
              {
-                name: 'Tailwindcss',
-                path: 'tailwindcss',
+                name: 'TailwindcssDemo',
+                path: '/demos/outside/iframe/tailwindcss',
                component: IFrameView,
                meta: {
                  icon: 'devicon:tailwindcss',
@@ -342,17 +372,16 @@ const routes: RouteRecordRaw[] = [
            ],
          },
          {
-            name: 'ExternalLink',
-            path: 'external-link',
+            name: 'ExternalLinkDemos',
+            path: '/demos/outside/external-link',
            meta: {
              icon: 'mdi:newspaper-variant-multiple-outline',
              title: $t('page.demos.outside.externalLink'),
            },
-            redirect: '/demos/outside/external-link/vite',
            children: [
              {
-                name: 'Vite',
-                path: 'vite',
+                name: 'ViteDemo',
+                path: '/demos/outside/external-link/vite',
                component: IFrameView,
                meta: {
                  icon: 'logos:vitejs',
@@ -361,8 +390,8 @@ const routes: RouteRecordRaw[] = [
                },
              },
              {
-                name: 'VueUse',
-                path: 'vue-use',
+                name: 'VueUseDemo',
+                path: '/demos/outside/external-link/vue-use',
                component: IFrameView,
                meta: {
                  icon: 'logos:vueuse',
@@ -380,13 +409,12 @@ const routes: RouteRecordRaw[] = [
          icon: 'ic:round-menu',
          title: $t('page.demos.nested.title'),
        },
-        name: 'Nested',
-        path: 'nested',
-        redirect: '/demos/nested/menu1',
+        name: 'NestedDemos',
+        path: '/demos/nested',
        children: [
          {
-            name: 'Menu1',
-            path: 'menu1',
+            name: 'Menu1Demo',
+            path: '/demos/nested/menu1',
            component: () => import('#/views/demos/nested/menu-1.vue'),
            meta: {
              icon: 'ic:round-menu',
@@ -395,18 +423,17 @@ const routes: RouteRecordRaw[] = [
            },
          },
          {
-            name: 'Menu2',
-            path: 'menu2',
+            name: 'Menu2Demo',
+            path: '/demos/nested/menu2',
            meta: {
              icon: 'ic:round-menu',
              keepAlive: true,
              title: $t('page.demos.nested.menu2'),
            },
-            redirect: '/demos/nested/menu2/menu2-1',
            children: [
              {
-                name: 'Menu21',
-                path: 'menu2-1',
+                name: 'Menu21Demo',
+                path: '/demos/nested/menu2/menu2-1',
                component: () => import('#/views/demos/nested/menu-2-1.vue'),
                meta: {
                  icon: 'ic:round-menu',
@@ -417,16 +444,15 @@ const routes: RouteRecordRaw[] = [
            ],
          },
          {
-            name: 'Menu3',
-            path: 'menu3',
+            name: 'Menu3Demo',
+            path: '/demos/nested/menu3',
            meta: {
              icon: 'ic:round-menu',
              title: $t('page.demos.nested.menu3'),
            },
-            redirect: '/demos/nested/menu3/menu3-1',
            children: [
              {
-                name: 'Menu31',
+                name: 'Menu31Demo',
                path: 'menu3-1',
                component: () => import('#/views/demos/nested/menu-3-1.vue'),
                meta: {
@@ -436,17 +462,16 @@ const routes: RouteRecordRaw[] = [
                },
              },
              {
-                name: 'Menu32',
+                name: 'Menu32Demo',
                path: 'menu3-2',
                meta: {
                  icon: 'ic:round-menu',
                  title: $t('page.demos.nested.menu3_2'),
                },
-                redirect: '/demos/nested/menu3/menu3-2/menu3-2-1',
                children: [
                  {
-                    name: 'Menu321',
-                    path: 'menu3-2-1',
+                    name: 'Menu321Demo',
+                    path: '/demos/nested/menu3/menu3-2/menu3-2-1',
                    component: () =>
                      import('#/views/demos/nested/menu-3-2-1.vue'),
                    meta: {
--- a/apps/web-antd/src/router/routes/modules/vben.ts
+++ b/apps/web-antd/src/router/routes/modules/vben.ts
@@ -17,11 +17,10 @@ const routes: RouteRecordRaw[] = [
    },
    name: 'VbenProject',
    path: '/vben-admin',
-    redirect: '/vben-admin/about',
    children: [
      {
        name: 'VbenAbout',
-        path: 'about',
+        path: '/vben-admin/about',
        component: () => import('#/views/_core/vben/about/index.vue'),
        meta: {
          badgeType: 'dot',
@@ -32,7 +31,7 @@ const routes: RouteRecordRaw[] = [
      },
      {
        name: 'VbenDocument',
-        path: 'document',
+        path: '/vben-admin/document',
        component: IFrameView,
        meta: {
          icon: 'lucide:book-open-text',
@@ -43,7 +42,7 @@ const routes: RouteRecordRaw[] = [
      },
      {
        name: 'VbenGithub',
-        path: 'github',
+        path: '/vben-admin/github',
        component: IFrameView,
        meta: {
          icon: 'mdi:github',
--- a/apps/web-antd/src/store/modules/access.ts
+++ b/apps/web-antd/src/store/modules/access.ts
@@ -11,7 +11,7 @@ import { resetAllStores, useCoreAccessStore } from '@vben/stores';
 import { notification } from 'ant-design-vue';
 import { defineStore } from 'pinia';

-import { getAccessCodes, getUserInfo, login } from '#/apis';
+import { getAccessCodes, getUserInfo, login } from '#/api';
 import { $t } from '#/locales';

 export const useAccessStore = defineStore('access', () => {
--- a/apps/web-antd/src/views/_core/fallback/forbidden.vue
+++ b/apps/web-antd/src/views/_core/fallback/forbidden.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'Fallback403Demo' });
 </script>

 <template>
--- a/apps/web-antd/src/views/_core/fallback/internal-error.vue
+++ b/apps/web-antd/src/views/_core/fallback/internal-error.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'Fallback500Demo' });
 </script>

 <template>
--- a/apps/web-antd/src/views/_core/fallback/not-found.vue
+++ b/apps/web-antd/src/views/_core/fallback/not-found.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'Fallback404Demo' });
 </script>

 <template>
--- a/apps/web-antd/src/views/_core/fallback/offline.vue
+++ b/apps/web-antd/src/views/_core/fallback/offline.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'FallbackOfflineDemo' });
 </script>

 <template>
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
@@ -3,8 +3,6 @@ import { onMounted, ref } from 'vue';

 import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';

-defineOptions({ name: 'AnalyticsTrends' });
-
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -3,8 +3,6 @@ import { onMounted, ref } from 'vue';

 import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';

-defineOptions({ name: 'AnalyticsVisitsData' });
-
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -3,8 +3,6 @@ import { onMounted, ref } from 'vue';

 import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';

-defineOptions({ name: 'AnalyticsVisitsSales' });
-
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -3,8 +3,6 @@ import { onMounted, ref } from 'vue';

 import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';

-defineOptions({ name: 'AnalyticsVisitsSource' });
-
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
@@ -3,8 +3,6 @@ import { onMounted, ref } from 'vue';

 import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';

-defineOptions({ name: 'AnalyticsVisits' });
-
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);

--- a/apps/web-antd/src/views/dashboard/analytics/index.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/index.vue
@@ -20,8 +20,6 @@ import AnalyticsVisitsData from './analytics-visits-data.vue';
 import AnalyticsVisitsSales from './analytics-visits-sales.vue';
 import AnalyticsVisitsSource from './analytics-visits-source.vue';

-defineOptions({ name: 'Analytics' });
-
 const overviewItems: AnalysisOverviewItem[] = [
  {
    icon: SvgCardIcon,
--- a/apps/web-antd/src/views/dashboard/workspace/index.vue
+++ b/apps/web-antd/src/views/dashboard/workspace/index.vue
@@ -22,8 +22,6 @@ import { useAccessStore } from '#/store';

 import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';

-defineOptions({ name: 'Workspace' });
-
 const accessStore = useAccessStore();

 const projectItems: WorkbenchProjectItem[] = [
--- a/apps/web-antd/src/views/demos/access/admin-visible.vue
+++ b/apps/web-antd/src/views/demos/access/admin-visible.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
-
-defineOptions({ name: 'AccessAdminVisible' });
 </script>

 <template>
--- a/apps/web-antd/src/views/demos/access/button-control.vue
+++ b/apps/web-antd/src/views/demos/access/button-control.vue
@@ -9,8 +9,6 @@ import { Button } from 'ant-design-vue';

 import { resetAllStores, useAccessStore } from '#/store';

-defineOptions({ name: 'AccessButtonControl' });
-
 const accounts: Record<string, LoginAndRegisterParams> = {
  admin: {
    password: '123456',
--- a/apps/web-antd/src/views/demos/access/index.vue
+++ b/apps/web-antd/src/views/demos/access/index.vue
@@ -9,8 +9,6 @@ import { Button } from 'ant-design-vue';

 import { resetAllStores, useAccessStore } from '#/store';

-defineOptions({ name: 'Access' });
-
 const accounts: Record<string, LoginAndRegisterParams> = {
  admin: {
    password: '123456',
@@ -51,7 +49,9 @@ async function handleToggleAccessMode() {
  resetAllStores();

  await accessStore.authLogin(accounts.super, async () => {
-    router.go(0);
+    setTimeout(() => {
+      router.go(0);
+    }, 150);
  });
 }
 </script>
--- a/apps/web-antd/src/views/demos/access/menu-visible-403.vue
+++ b/apps/web-antd/src/views/demos/access/menu-visible-403.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
-
-defineOptions({ name: 'AccessMenuVisible403' });
 </script>

 <template>
--- a/apps/web-antd/src/views/demos/access/super-visible.vue
+++ b/apps/web-antd/src/views/demos/access/super-visible.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
-
-defineOptions({ name: 'AccessSuperVisible' });
 </script>

 <template>
--- a/apps/web-antd/src/views/demos/access/user-visible.vue
+++ b/apps/web-antd/src/views/demos/access/user-visible.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
-
-defineOptions({ name: 'AccessUserVisible' });
 </script>

 <template>
--- a/apps/web-antd/src/views/demos/active-icon/index.vue
+++ b/apps/web-antd/src/views/demos/active-icon/index.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+</script>
+
+<template>
+  <Fallback
+    description="用于菜单激活显示不同的图标"
+    status="coming-soon"
+    title="激活图标示例"
+  />
+</template>
--- a/apps/web-antd/src/views/demos/badge/index.vue
+++ b/apps/web-antd/src/views/demos/badge/index.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
-
-defineOptions({ name: 'Menu321' });
 </script>

 <template>
--- a/apps/web-antd/src/views/demos/breadcrumb/lateral-detail.vue
+++ b/apps/web-antd/src/views/demos/breadcrumb/lateral-detail.vue
@@ -5,8 +5,6 @@ import { Fallback } from '@vben/common-ui';

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

-defineOptions({ name: 'BreadcrumbLateralDetail' });
-
 const router = useRouter();
 </script>

--- a/apps/web-antd/src/views/demos/breadcrumb/lateral.vue
+++ b/apps/web-antd/src/views/demos/breadcrumb/lateral.vue
@@ -5,12 +5,10 @@ import { Fallback } from '@vben/common-ui';

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

-defineOptions({ name: 'BreadcrumbLateral' });
-
 const router = useRouter();

 function details() {
-  router.push({ name: 'BreadcrumbLateralDetail' });
+  router.push({ name: 'BreadcrumbLateralDetailDemo' });
 }
 </script>

--- a/apps/web-antd/src/views/demos/breadcrumb/level-detail.vue
+++ b/apps/web-antd/src/views/demos/breadcrumb/level-detail.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
-
-defineOptions({ name: 'BreadcrumbLevelDetail' });
 </script>

 <template>
--- a/apps/web-antd/src/views/demos/features/hide-menu-children/parent.vue
+++ b/apps/web-antd/src/views/demos/features/hide-menu-children/parent.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
-
-defineOptions({ name: 'HideMenuChildren' });
 </script>

 <template>
--- a/apps/web-antd/src/views/demos/features/icons/index.vue
+++ b/apps/web-antd/src/views/demos/features/icons/index.vue
@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import {
+  MdiGithub,
+  MdiGoogle,
+  MdiKeyboardEsc,
+  MdiQqchat,
+  MdiWechat,
+  SvgAvatar1Icon,
+  SvgAvatar2Icon,
+  SvgAvatar3Icon,
+  SvgAvatar4Icon,
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';
+</script>
+
+<template>
+  <div class="p-5">
+    <div class="card-box p-5">
+      <h1 class="text-xl font-semibold">图标</h1>
+      <div class="text-foreground/80 mt-2">
+        图标可在
+        <a
+          class="text-primary"
+          href="https://icon-sets.iconify.design/"
+          target="_blank"
+        >
+          Iconify
+        </a>
+        中查找，支持多种图标库，如 Material Design, Font Awesome, Jam Icons 等。
+      </div>
+    </div>
+
+    <div class="card-box mt-5 p-5">
+      <div class="mb-3 text-lg font-semibold">Iconify</div>
+      <div class="flex items-center gap-5">
+        <MdiGithub class="size-8" />
+        <MdiGoogle class="size-8 text-red-500" />
+        <MdiQqchat class="size-8 text-green-500" />
+        <MdiWechat class="size-8" />
+        <MdiKeyboardEsc class="size-8" />
+      </div>
+    </div>
+
+    <div class="card-box mt-5 p-5">
+      <div class="mb-3 text-lg font-semibold">Svg Icons</div>
+      <div class="flex items-center gap-5">
+        <SvgAvatar1Icon class="size-8" />
+        <SvgAvatar2Icon class="size-8 text-red-500" />
+        <SvgAvatar3Icon class="size-8 text-green-500" />
+        <SvgAvatar4Icon class="size-8" />
+        <SvgCakeIcon class="size-8" />
+        <SvgBellIcon class="size-8" />
+        <SvgCardIcon class="size-8" />
+        <SvgDownloadIcon class="size-8" />
+      </div>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/demos/features/login-expired/index.vue
+++ b/apps/web-antd/src/views/demos/features/login-expired/index.vue
@@ -5,9 +5,7 @@ import { preferences, updatePreferences } from '@vben/preferences';

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

-import { getMockStatus } from '#/apis';
-
-defineOptions({ name: 'LoginExpired' });
+import { getMockStatus } from '#/api';

 async function handleClick(type: LoginExpiredModeType) {
  const loginExpiredMode = preferences.app.loginExpiredMode;
--- a/apps/web-antd/src/views/demos/features/tabs/index.vue
+++ b/apps/web-antd/src/views/demos/features/tabs/index.vue
@@ -6,8 +6,6 @@ import { useTabs } from '@vben/hooks';

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

-defineOptions({ name: 'FeatureTabsDemo' });
-
 const router = useRouter();
 const newTabTitle = ref('');

--- a/apps/web-antd/src/views/demos/features/tabs/tab-detail.vue
+++ b/apps/web-antd/src/views/demos/features/tabs/tab-detail.vue
@@ -4,8 +4,6 @@ import { useRoute } from 'vue-router';

 import { useTabs } from '@vben/hooks';

-defineOptions({ name: 'FeatureTabDetailDemo' });
-
 const route = useRoute();

 const { setTabTitle } = useTabs();
--- a/apps/web-antd/src/views/demos/features/watermark/index.vue
+++ b/apps/web-antd/src/views/demos/features/watermark/index.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { useWatermark } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+const { destroyWatermark, updateWatermark } = useWatermark();
+
+async function createWaterMark() {
+  await updateWatermark({
+    advancedStyle: {
+      colorStops: [
+        {
+          color: 'red',
+          offset: 0,
+        },
+        {
+          color: 'blue',
+          offset: 1,
+        },
+      ],
+      type: 'linear',
+    },
+    content: 'hello my watermark',
+    globalAlpha: 0.5,
+    gridLayoutOptions: {
+      cols: 2,
+      gap: [20, 20],
+      matrix: [
+        [1, 0],
+        [0, 1],
+      ],
+      rows: 2,
+    },
+    height: 200,
+    layout: 'grid',
+    rotate: 22,
+    width: 200,
+  });
+}
+</script>
+
+<template>
+  <div class="p-5">
+    <div class="card-box p-5">
+      <h1 class="text-xl font-semibold">水印</h1>
+      <div class="text-foreground/80 mt-2">
+        水印使用了
+        <a
+          class="text-primary"
+          href="https://zhensherlock.github.io/watermark-js-plus/"
+          target="_blank"
+        >
+          watermark-js-plus
+        </a>
+        开源插件，详细配置可见插件配置。
+      </div>
+    </div>
+
+    <div class="card-box mt-5 p-5">
+      <div class="mb-3 flex gap-3 text-lg font-semibold">
+        <Button type="primary" @click="createWaterMark()">创建水印</Button>
+        <Button danger @click="destroyWatermark">移除水印</Button>
+      </div>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/demos/nested/menu-1.vue
+++ b/apps/web-antd/src/views/demos/nested/menu-1.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
-
-defineOptions({ name: 'Menu1' });
 </script>

 <template>
-  <Fallback status="coming-soon" />
+  <div>
+    <Fallback status="coming-soon" />
+    <input />
+  </div>
 </template>
--- a/apps/web-antd/src/views/demos/nested/menu-2-1.vue
+++ b/apps/web-antd/src/views/demos/nested/menu-2-1.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
-
-defineOptions({ name: 'Menu21' });
 </script>

 <template>
-  <Fallback status="coming-soon" />
+  <div>
+    <Fallback status="coming-soon" />
+    <input />
+  </div>
 </template>
--- a/apps/web-antd/src/views/demos/nested/menu-3-1.vue
+++ b/apps/web-antd/src/views/demos/nested/menu-3-1.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
-
-defineOptions({ name: 'Menu31' });
 </script>

 <template>
-  <Fallback status="coming-soon" />
+  <div>
+    <Fallback status="coming-soon" />
+    <input />
+  </div>
 </template>
--- a/apps/web-antd/src/views/demos/nested/menu-3-2-1.vue
+++ b/apps/web-antd/src/views/demos/nested/menu-3-2-1.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/common-ui';
-
-defineOptions({ name: 'Menu321' });
 </script>

 <template>
-  <Fallback status="coming-soon" />
+  <div>
+    <Fallback status="coming-soon" />
+    <input />
+  </div>
 </template>