diff --git a/.github/contributing.md b/.github/contributing.md
index 9a5211b2a..f22370f3b 100644
--- a/.github/contributing.md
+++ b/.github/contributing.md
@@ -1,5 +1,42 @@
-# Contributing Guide
+# Vben Admin Contributing Guide
 
-1. Make sure you put things in the right category!
-2. Always add your items to the end of a list. To be fair, the order is first-come-first-serve.
-3. If you think something belongs in the wrong category, or think there needs to be a new category, feel free to edit things too.
+Hi! We're really excited that you are interested in contributing to Vben Admin. Before submitting your contribution, please make sure to take a moment and read through the following guidelines:
+
+- [Pull Request Guidelines](#pull-request-guidelines)
+
+## Contributor Code of Conduct
+
+As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free experience for everyone, regardless of the level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion.
+
+Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team.
+
+## Pull Request Guidelines
+
+- Checkout a topic branch from the relevant branch, e.g. main, and merge back against that branch.
+
+- If adding a new feature:
+
+  - Provide a convincing reason to add this feature. Ideally, you should open a suggestion issue first and have it approved before working on it.
+
+- If fixing bug:
+
+  - Provide a detailed description of the bug in the PR. Live demo preferred.
+
+- It's OK to have multiple small commits as you work on the PR - GitHub can automatically squash them before merging.
+
+## Development Setup
+
+You will need [pnpm](https://pnpm.io/)
+
+After cloning the repo, run:
+
+```bash
+# install the dependencies of the project
+$ pnpm install
+# start the project
+$ pnpm run dev
+```
diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml
index 6fef16be8..fd88affe4 100644
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@@ -17,15 +17,17 @@ categories:
   - title: "🐞 Bug Fixes"
     labels:
       - "bug"
+  - title: "📈 Performance"
+    labels:
+      - "perf"
   - title: 📝 Documentation
     labels:
       - "documentation"
   - title: 👻 Maintenance
     labels:
-      - "perf"
       - "chore"
       - "dependencies"
-    collapse-after: 5
+    # collapse-after: 12
   - title: 🚦 Tests
     labels:
       - "tests"
@@ -40,11 +42,10 @@ version-resolver:
   minor:
     labels:
       - "minor"
-      # - "feature"
+      - "feature"
   patch:
     labels:
       - "patch"
-      - "feature"
       - "bug"
       - "maintenance"
       - "docs"
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 9832a9002..08ff80b7d 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -6,8 +6,47 @@ on:
       - main
 
 jobs:
-  deploy-push-ftp:
-    name: Deploy Push Ftp
+  deploy-push-playground-ftp:
+    name: Deploy Push Playground Ftp
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Sed Config Base
+        shell: bash
+        run: |
+          sed -i  "s#VITE_COMPRESS\s*=.*#VITE_COMPRESS = gzip#g" ./playground/.env.production
+          sed -i  "s#VITE_PWA\s*=.*#VITE_PWA = true#g" ./playground/.env.production
+          cat ./playground/.env.production
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Sync Playground files
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        with:
+          server: ${{ secrets.PRO_FTP_HOST }}
+          username: ${{ secrets.WEB_PLAYGROUND_FTP_ACCOUNT }}
+          password: ${{ secrets.WEB_PLAYGROUND_FTP_PWSSWORD }}
+          local-dir: ./playground/dist/
+
+      - name: Sync Docs files
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        with:
+          server: ${{ secrets.PRO_FTP_HOST }}
+          username: ${{ secrets.WEBSITE_FTP_ACCOUNT }}
+          password: ${{ secrets.WEBSITE_FTP_PASSWORD }}
+          local-dir: ./docs/.vitepress/dist/
+
+  deploy-push-antd-ftp:
+    name: Deploy Push Antd Ftp
     if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
     runs-on: ubuntu-latest
     steps:
@@ -22,9 +61,65 @@ jobs:
           sed -i  "s#VITE_COMPRESS\s*=.*#VITE_COMPRESS = gzip#g" ./apps/web-antd/.env.production
           sed -i  "s#VITE_PWA\s*=.*#VITE_PWA = true#g" ./apps/web-antd/.env.production
           cat ./apps/web-antd/.env.production
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Sync files
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        with:
+          server: ${{ secrets.PRO_FTP_HOST }}
+          username: ${{ secrets.WEB_ANTD_FTP_ACCOUNT }}
+          password: ${{ secrets.WEB_ANTD_FTP_PASSWORD }}
+          local-dir: ./apps/web-antd/dist/
+
+  deploy-push-ele-ftp:
+    name: Deploy Push Element Ftp
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Sed Config Base
+        shell: bash
+        run: |
           sed -i  "s#VITE_COMPRESS\s*=.*#VITE_COMPRESS = gzip#g" ./apps/web-ele/.env.production
           sed -i  "s#VITE_PWA\s*=.*#VITE_PWA = true#g" ./apps/web-ele/.env.production
           cat ./apps/web-ele/.env.production
+
+      - name: Setup Node
+        uses: ./.github/actions/setup-node
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Sync files
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        with:
+          server: ${{ secrets.PRO_FTP_HOST }}
+          username: ${{ secrets.WEB_ELE_FTP_ACCOUNT }}
+          password: ${{ secrets.WEB_ELE_FTP_PASSWORD }}
+          local-dir: ./apps/web-ele/dist/
+
+  deploy-push-naive-ftp:
+    name: Deploy Push Naive Ftp
+    if: github.actor != 'dependabot[bot]' && !contains(github.event.head_commit.message, '[skip ci]')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Sed Config Base
+        shell: bash
+        run: |
           sed -i  "s#VITE_COMPRESS\s*=.*#VITE_COMPRESS = gzip#g" ./apps/web-naive/.env.production
           sed -i  "s#VITE_PWA\s*=.*#VITE_PWA = true#g" ./apps/web-naive/.env.production
           cat ./apps/web-naive/.env.production
@@ -35,34 +130,10 @@ jobs:
       - name: Build
         run: pnpm run build
 
-      - name: Sync Web Antd files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
-        with:
-          server: ${{ secrets.PRO_FTP_HOST }}
-          username: ${{ secrets.WEB_ANTD_FTP_ACCOUNT }}
-          password: ${{ secrets.WEB_ANTD_FTP_PASSWORD }}
-          local-dir: ./apps/web-antd/dist/
-
-      - name: Sync Web Naive files
+      - name: Sync files
         uses: SamKirkland/FTP-Deploy-Action@v4.3.5
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_NAIVE_FTP_ACCOUNT }}
           password: ${{ secrets.WEB_NAIVE_FTP_PASSWORD }}
           local-dir: ./apps/web-naive/dist/
-
-      - name: Sync Web Ele files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
-        with:
-          server: ${{ secrets.PRO_FTP_HOST }}
-          username: ${{ secrets.WEB_ELE_FTP_ACCOUNT }}
-          password: ${{ secrets.WEB_ELE_FTP_PASSWORD }}
-          local-dir: ./apps/web-ele/dist/
-
-      - name: Sync Docs files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
-        with:
-          server: ${{ secrets.PRO_FTP_HOST }}
-          username: ${{ secrets.WEBSITE_FTP_ACCOUNT }}
-          password: ${{ secrets.WEBSITE_FTP_PASSWORD }}
-          local-dir: ./docs/.vitepress/dist/
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index a0fec0000..cf48052d5 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -10,10 +10,6 @@
     "esbenp.prettier-vscode",
     // 支持 dotenv 文件语法
     "mikestead.dotenv",
-    // 获取每个 CSS 属性的初始值。
-    "dzhavat.css-initial-value",
-    // 使 VSCode 中的 TypeScript 错误更漂亮、更易于理解
-    "yoavbls.pretty-ts-errors",
     // 源代码的拼写检查器
     "streetsidesoftware.code-spell-checker",
     // Tailwind CSS 的官方 VS Code 插件
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 08bd54f0d..3b4e323c1 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -4,18 +4,27 @@
   "configurations": [
     {
       "type": "chrome",
-      "name": "vben admin antd dev",
+      "name": "vben admin playground dev",
       "request": "launch",
       "url": "http://localhost:5555",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
+      "webRoot": "${workspaceFolder}/playground/src"
+    },
+    {
+      "type": "chrome",
+      "name": "vben admin antd dev",
+      "request": "launch",
+      "url": "http://localhost:5666",
+      "env": { "NODE_ENV": "development" },
+      "sourceMaps": true,
       "webRoot": "${workspaceFolder}/apps/web-antd/src"
     },
     {
       "type": "chrome",
       "name": "vben admin ele dev",
       "request": "launch",
-      "url": "http://localhost:5666",
+      "url": "http://localhost:5777",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
       "webRoot": "${workspaceFolder}/apps/web-ele/src"
@@ -24,7 +33,7 @@
       "type": "chrome",
       "name": "vben admin naive dev",
       "request": "launch",
-      "url": "http://localhost:5777",
+      "url": "http://localhost:5888",
       "env": { "NODE_ENV": "development" },
       "sourceMaps": true,
       "webRoot": "${workspaceFolder}/apps/web-naive/src"
diff --git a/.vscode/settings.json b/.vscode/settings.json
index eb3f43d52..38a9c5e27 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -167,6 +167,7 @@
 
   "i18n-ally.localesPaths": [
     "packages/locales/src/langs",
+    "playground/src/langs",
     "apps/*/src/locales/langs"
   ],
   "i18n-ally.enabledParsers": ["json", "ts", "js", "yaml"],
@@ -191,5 +192,6 @@
   "i18n-ally.keystyle": "nested",
   "commentTranslate.multiLineMerge": true,
   "vue.server.hybridMode": true,
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vitest.disableWorkspaceWarning": true
 }
diff --git a/Dockerfile b/Dockerfile
index 4b76d886c..61076b6dc 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -21,7 +21,7 @@ RUN echo "Builder Success 🎉"
 FROM nginx:stable-alpine as production
 
 RUN echo "types { application/javascript js mjs; }" > /etc/nginx/conf.d/mjs.conf
-COPY --from=builder /app/apps/web-antd/dist /usr/share/nginx/html
+COPY --from=builder /app/playground/dist /usr/share/nginx/html
 
 COPY ./nginx.conf /etc/nginx/nginx.conf
 
diff --git a/README.ja-JP.md b/README.ja-JP.md
index f794c792a..700f8357f 100644
--- a/README.ja-JP.md
+++ b/README.ja-JP.md
@@ -134,7 +134,8 @@ pnpm build
 ## 貢献者
 
 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=vbenjs/vue-vben-admin" />
+ <img alt="Contributors"
+        src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
 </a>
 
 ## Discord
diff --git a/README.md b/README.md
index 5ce954bc0..7cf502ed1 100644
--- a/README.md
+++ b/README.md
@@ -133,7 +133,8 @@ If you think this project is helpful to you, you can help the author buy a cup o
 ## Contributor
 
 <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=vbenjs/vue-vben-admin" />
+  <img alt="Contributors"
+        src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
 </a>
 
 ## Discord
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 9137ef6eb..73e8fbeb9 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -126,6 +126,13 @@ pnpm build
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 
+## Contributor
+
+<a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
+  <img alt="Contributors"
+        src="https://opencollective.com/vbenjs/contributors.svg?button=false" />
+</a>
+
 ## Discord
 
 - [Github Discussions](https://github.com/anncwb/vue-vben-admin/discussions)
diff --git a/apps/web-antd/.env b/apps/web-antd/.env
index 87821d87c..c14a467fb 100644
--- a/apps/web-antd/.env
+++ b/apps/web-antd/.env
@@ -1,5 +1,5 @@
 # 应用标题
-VITE_APP_TITLE=Vben Admin
+VITE_APP_TITLE=Vben Admin Antd
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=vben-web-antd
diff --git a/apps/web-antd/.env.development b/apps/web-antd/.env.development
index c27e90c4e..25e2e2fcd 100644
--- a/apps/web-antd/.env.development
+++ b/apps/web-antd/.env.development
@@ -1,6 +1,6 @@
 # 端口号
-VITE_PORT=5555
-# base路径
+VITE_PORT=5666
+
 VITE_BASE=/
 # 是否开启 Nitro Mock服务，true 为开启，false 为关闭
 VITE_NITRO_MOCK=true
diff --git a/apps/web-antd/src/api/index.ts b/apps/web-antd/src/api/index.ts
index 2b42e898a..4b0e04137 100644
--- a/apps/web-antd/src/api/index.ts
+++ b/apps/web-antd/src/api/index.ts
@@ -1,2 +1 @@
 export * from './core';
-export * from './demos';
diff --git a/apps/web-antd/src/locales/index.ts b/apps/web-antd/src/locales/index.ts
index a3e23661e..1751f4e5e 100644
--- a/apps/web-antd/src/locales/index.ts
+++ b/apps/web-antd/src/locales/index.ts
@@ -58,7 +58,11 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
       locale = await import('dayjs/locale/en');
     }
   }
-  dayjs.locale(locale);
+  if (locale) {
+    dayjs.locale(locale);
+  } else {
+    console.error(`Failed to load dayjs locale for ${lang}`);
+  }
 }
 
 /**
diff --git a/apps/web-antd/src/locales/langs/en-US.json b/apps/web-antd/src/locales/langs/en-US.json
index 13179fd2c..864c721f5 100644
--- a/apps/web-antd/src/locales/langs/en-US.json
+++ b/apps/web-antd/src/locales/langs/en-US.json
@@ -2,66 +2,7 @@
   "page": {
     "demos": {
       "title": "Demos",
-      "access": {
-        "frontendPermissions": "Frontend Permissions",
-        "backendPermissions": "Backend Permissions",
-        "pageAccess": "Page Access",
-        "buttonControl": "Button Control",
-        "menuVisible403": "Menu Visible(403)",
-        "superVisible": "Visible to Super",
-        "adminVisible": "Visible to Admin",
-        "userVisible": "Visible to User"
-      },
-      "nested": {
-        "title": "Nested Menu",
-        "menu1": "Menu 1",
-        "menu2": "Menu 2",
-        "menu2_1": "Menu 2-1",
-        "menu3": "Menu 3",
-        "menu3_1": "Menu 3-1",
-        "menu3_2": "Menu 3-2",
-        "menu3_2_1": "Menu 3-2-1"
-      },
-      "outside": {
-        "title": "External Pages",
-        "embedded": "Embedded",
-        "externalLink": "External Link"
-      },
-      "badge": {
-        "title": "Menu Badge",
-        "dot": "Dot Badge",
-        "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"
-      },
-      "breadcrumb": {
-        "navigation": "Breadcrumb Navigation",
-        "lateral": "Lateral Mode",
-        "lateralDetail": "Lateral Mode Detail",
-        "level": "Level Mode",
-        "levelDetail": "Level Mode Detail"
-      }
-    },
-    "examples": {
-      "title": "Examples",
-      "ellipsis": {
-        "title": "EllipsisText"
-      }
+      "antd": "Ant Design Vue"
     }
   }
 }
diff --git a/apps/web-antd/src/locales/langs/zh-CN.json b/apps/web-antd/src/locales/langs/zh-CN.json
index 86fbcabcf..31d3475b9 100644
--- a/apps/web-antd/src/locales/langs/zh-CN.json
+++ b/apps/web-antd/src/locales/langs/zh-CN.json
@@ -2,66 +2,7 @@
   "page": {
     "demos": {
       "title": "演示",
-      "access": {
-        "frontendPermissions": "前端权限",
-        "backendPermissions": "后端权限",
-        "pageAccess": "页面访问",
-        "buttonControl": "按钮控制",
-        "menuVisible403": "菜单可见(403)",
-        "superVisible": "Super 可见",
-        "adminVisible": "Admin 可见",
-        "userVisible": "User 可见"
-      },
-      "nested": {
-        "title": "嵌套菜单",
-        "menu1": "菜单 1",
-        "menu2": "菜单 2",
-        "menu2_1": "菜单 2-1",
-        "menu3": "菜单 3",
-        "menu3_1": "菜单 3-1",
-        "menu3_2": "菜单 3-2",
-        "menu3_2_1": "菜单 3-2-1"
-      },
-      "outside": {
-        "title": "外部页面",
-        "embedded": "内嵌",
-        "externalLink": "外链"
-      },
-      "badge": {
-        "title": "菜单徽标",
-        "dot": "点徽标",
-        "text": "文本徽标",
-        "color": "徽标颜色"
-      },
-      "activeIcon": {
-        "title": "菜单激活图标",
-        "children": "子级激活图标"
-      },
-      "fallback": {
-        "title": "缺省页"
-      },
-      "features": {
-        "title": "功能",
-        "hideChildrenInMenu": "隐藏子菜单",
-        "loginExpired": "登录过期",
-        "icons": "图标",
-        "watermark": "水印",
-        "tabs": "标签页",
-        "tabDetail": "标签详情页"
-      },
-      "breadcrumb": {
-        "navigation": "面包屑导航",
-        "lateral": "平级模式",
-        "level": "层级模式",
-        "levelDetail": "层级模式详情",
-        "lateralDetail": "平级模式详情"
-      }
-    },
-    "examples": {
-      "title": "示例",
-      "ellipsis": {
-        "title": "文本省略"
-      }
+      "antd": "Ant Design Vue"
     }
   }
 }
diff --git a/apps/web-antd/src/router/guard.ts b/apps/web-antd/src/router/guard.ts
index 1581d0151..f6b79f06c 100644
--- a/apps/web-antd/src/router/guard.ts
+++ b/apps/web-antd/src/router/guard.ts
@@ -115,10 +115,10 @@ function setupAccessGuard(router: Router) {
     // 保存菜单信息和路由信息
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
-    const redirectPath = (from.query.redirect ?? to.path) as string;
+    const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
     return {
-      path: decodeURIComponent(redirectPath),
+      ...router.resolve(decodeURIComponent(redirectPath)),
       replace: true,
     };
   });
diff --git a/apps/web-antd/src/router/routes/modules/demos.ts b/apps/web-antd/src/router/routes/modules/demos.ts
index ad88a5486..fa28acc76 100644
--- a/apps/web-antd/src/router/routes/modules/demos.ts
+++ b/apps/web-antd/src/router/routes/modules/demos.ts
@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
 
-import { BasicLayout, IFrameView } from '#/layouts';
+import { BasicLayout } from '#/layouts';
 import { $t } from '#/locales';
 
 const routes: RouteRecordRaw[] = [
@@ -15,477 +15,13 @@ const routes: RouteRecordRaw[] = [
     name: 'Demos',
     path: '/demos',
     children: [
-      // 权限控制
       {
         meta: {
-          icon: 'mdi:shield-key-outline',
-          title: $t('page.demos.access.frontendPermissions'),
+          title: $t('page.demos.antd'),
         },
-        name: 'AccessDemos',
-        path: '/demos/access',
-        children: [
-          {
-            name: 'AccessPageControlDemo',
-            path: '/demos/access/page-control',
-            component: () => import('#/views/demos/access/index.vue'),
-            meta: {
-              icon: 'mdi:page-previous-outline',
-              title: $t('page.demos.access.pageAccess'),
-            },
-          },
-          {
-            name: 'AccessButtonControlDemo',
-            path: '/demos/access/button-control',
-            component: () => import('#/views/demos/access/button-control.vue'),
-            meta: {
-              icon: 'mdi:button-cursor',
-              title: $t('page.demos.access.buttonControl'),
-            },
-          },
-          {
-            name: 'AccessMenuVisible403Demo',
-            path: '/demos/access/menu-visible-403',
-            component: () =>
-              import('#/views/demos/access/menu-visible-403.vue'),
-            meta: {
-              authority: ['no-body'],
-              icon: 'mdi:button-cursor',
-              menuVisibleWithForbidden: true,
-              title: $t('page.demos.access.menuVisible403'),
-            },
-          },
-          {
-            name: 'AccessSuperVisibleDemo',
-            path: '/demos/access/super-visible',
-            component: () => import('#/views/demos/access/super-visible.vue'),
-            meta: {
-              authority: ['super'],
-              icon: 'mdi:button-cursor',
-              title: $t('page.demos.access.superVisible'),
-            },
-          },
-          {
-            name: 'AccessAdminVisibleDemo',
-            path: '/demos/access/admin-visible',
-            component: () => import('#/views/demos/access/admin-visible.vue'),
-            meta: {
-              authority: ['admin'],
-              icon: 'mdi:button-cursor',
-              title: $t('page.demos.access.adminVisible'),
-            },
-          },
-          {
-            name: 'AccessUserVisibleDemo',
-            path: '/demos/access/user-visible',
-            component: () => import('#/views/demos/access/user-visible.vue'),
-            meta: {
-              authority: ['user'],
-              icon: 'mdi:button-cursor',
-              title: $t('page.demos.access.userVisible'),
-            },
-          },
-        ],
-      },
-      // 功能
-      {
-        meta: {
-          icon: 'mdi:feature-highlight',
-          title: $t('page.demos.features.title'),
-        },
-        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: '/demos/features/tabs',
-            component: () => import('#/views/demos/features/tabs/index.vue'),
-            meta: {
-              icon: 'lucide:app-window',
-              title: $t('page.demos.features.tabs'),
-            },
-          },
-          {
-            name: 'FeatureTabDetailDemo',
-            path: '/demos/features/tabs/detail/:id',
-            component: () =>
-              import('#/views/demos/features/tabs/tab-detail.vue'),
-            meta: {
-              activePath: '/demos/features/tabs',
-              hideInMenu: true,
-              maxNumOfOpenTab: 3,
-              title: $t('page.demos.features.tabDetail'),
-            },
-          },
-          {
-            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: $t('page.demos.features.hideChildrenInMenu'),
-            },
-            children: [
-              {
-                name: 'HideChildrenInMenuChildrenDemo',
-                path: '/demos/features/hide-menu-children/children',
-                component: () =>
-                  import(
-                    '#/views/demos/features/hide-menu-children/children.vue'
-                  ),
-                meta: { title: 'HideChildrenInMenuChildrenDemo' },
-              },
-            ],
-          },
-        ],
-      },
-      // 面包屑导航
-      {
-        name: 'BreadcrumbDemos',
-        path: '/demos/breadcrumb',
-        meta: {
-          icon: 'lucide:navigation',
-          title: $t('page.demos.breadcrumb.navigation'),
-        },
-        children: [
-          {
-            name: 'BreadcrumbLateralDemo',
-            path: '/demos/breadcrumb/lateral',
-            component: () => import('#/views/demos/breadcrumb/lateral.vue'),
-            meta: {
-              icon: 'lucide:navigation',
-              title: $t('page.demos.breadcrumb.lateral'),
-            },
-          },
-          {
-            name: 'BreadcrumbLateralDetailDemo',
-            path: '/demos/breadcrumb/lateral-detail',
-            component: () =>
-              import('#/views/demos/breadcrumb/lateral-detail.vue'),
-            meta: {
-              activePath: '/demos/breadcrumb/lateral',
-              hideInMenu: true,
-              title: $t('page.demos.breadcrumb.lateralDetail'),
-            },
-          },
-          {
-            name: 'BreadcrumbLevelDemo',
-            path: '/demos/breadcrumb/level',
-            meta: {
-              icon: 'lucide:navigation',
-              title: $t('page.demos.breadcrumb.level'),
-            },
-            children: [
-              {
-                name: 'BreadcrumbLevelDetailDemo',
-                path: '/demos/breadcrumb/level/detail',
-                component: () =>
-                  import('#/views/demos/breadcrumb/level-detail.vue'),
-                meta: {
-                  title: $t('page.demos.breadcrumb.levelDetail'),
-                },
-              },
-            ],
-          },
-        ],
-      },
-      // 缺省页
-      {
-        meta: {
-          icon: 'mdi:lightbulb-error-outline',
-          title: $t('page.demos.fallback.title'),
-        },
-        name: 'FallbackDemos',
-        path: '/demos/fallback',
-        children: [
-          {
-            name: 'Fallback403Demo',
-            path: '/demos/fallback/403',
-            component: () => import('#/views/_core/fallback/forbidden.vue'),
-            meta: {
-              icon: 'mdi:do-not-disturb-alt',
-              title: '403',
-            },
-          },
-          {
-            name: 'Fallback404Demo',
-            path: '/demos/fallback/404',
-            component: () => import('#/views/_core/fallback/not-found.vue'),
-            meta: {
-              icon: 'mdi:table-off',
-              title: '404',
-            },
-          },
-          {
-            name: 'Fallback500Demo',
-            path: '/demos/fallback/500',
-            component: () =>
-              import('#/views/_core/fallback/internal-error.vue'),
-            meta: {
-              icon: 'mdi:server-network-off',
-              title: '500',
-            },
-          },
-          {
-            name: 'FallbackOfflineDemo',
-            path: '/demos/fallback/offline',
-            component: () => import('#/views/_core/fallback/offline.vue'),
-            meta: {
-              icon: 'mdi:offline',
-              title: $t('fallback.offline'),
-            },
-          },
-        ],
-      },
-      // 菜单徽标
-      {
-        meta: {
-          badgeType: 'dot',
-          badgeVariants: 'destructive',
-          icon: 'lucide:circle-dot',
-          title: $t('page.demos.badge.title'),
-        },
-        name: 'BadgeDemos',
-        path: '/demos/badge',
-        children: [
-          {
-            name: 'BadgeDotDemo',
-            component: () => import('#/views/demos/badge/index.vue'),
-            path: '/demos/badge/dot',
-            meta: {
-              badgeType: 'dot',
-              icon: 'lucide:square-dot',
-              title: $t('page.demos.badge.dot'),
-            },
-          },
-          {
-            name: 'BadgeTextDemo',
-            component: () => import('#/views/demos/badge/index.vue'),
-            path: '/demos/badge/text',
-            meta: {
-              badge: '10',
-              icon: 'lucide:square-dot',
-              title: $t('page.demos.badge.text'),
-            },
-          },
-          {
-            name: 'BadgeColorDemo',
-            component: () => import('#/views/demos/badge/index.vue'),
-            path: '/demos/badge/color',
-            meta: {
-              badge: 'Hot',
-              badgeVariants: 'destructive',
-              icon: 'lucide:square-dot',
-              title: $t('page.demos.badge.color'),
-            },
-          },
-        ],
-      },
-      // 菜单激活图标
-      {
-        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: 'OutsideDemos',
-        path: '/demos/outside',
-        children: [
-          {
-            name: 'IframeDemos',
-            path: '/demos/outside/iframe',
-            meta: {
-              icon: 'mdi:newspaper-variant-outline',
-              title: $t('page.demos.outside.embedded'),
-            },
-            children: [
-              {
-                name: 'VueDocumentDemo',
-                path: '/demos/outside/iframe/vue-document',
-                component: IFrameView,
-                meta: {
-                  icon: 'logos:vue',
-                  iframeSrc: 'https://cn.vuejs.org/',
-                  keepAlive: true,
-                  title: 'Vue',
-                },
-              },
-              {
-                name: 'TailwindcssDemo',
-                path: '/demos/outside/iframe/tailwindcss',
-                component: IFrameView,
-                meta: {
-                  icon: 'devicon:tailwindcss',
-                  iframeSrc: 'https://tailwindcss.com/',
-                  // keepAlive: true,
-                  title: 'Tailwindcss',
-                },
-              },
-            ],
-          },
-          {
-            name: 'ExternalLinkDemos',
-            path: '/demos/outside/external-link',
-            meta: {
-              icon: 'mdi:newspaper-variant-multiple-outline',
-              title: $t('page.demos.outside.externalLink'),
-            },
-            children: [
-              {
-                name: 'ViteDemo',
-                path: '/demos/outside/external-link/vite',
-                component: IFrameView,
-                meta: {
-                  icon: 'logos:vitejs',
-                  link: 'https://vitejs.dev/',
-                  title: 'Vite',
-                },
-              },
-              {
-                name: 'VueUseDemo',
-                path: '/demos/outside/external-link/vue-use',
-                component: IFrameView,
-                meta: {
-                  icon: 'logos:vueuse',
-                  link: 'https://vueuse.org',
-                  title: 'VueUse',
-                },
-              },
-            ],
-          },
-        ],
-      },
-      // 嵌套菜单
-      {
-        meta: {
-          icon: 'ic:round-menu',
-          title: $t('page.demos.nested.title'),
-        },
-        name: 'NestedDemos',
-        path: '/demos/nested',
-        children: [
-          {
-            name: 'Menu1Demo',
-            path: '/demos/nested/menu1',
-            component: () => import('#/views/demos/nested/menu-1.vue'),
-            meta: {
-              icon: 'ic:round-menu',
-              keepAlive: true,
-              title: $t('page.demos.nested.menu1'),
-            },
-          },
-          {
-            name: 'Menu2Demo',
-            path: '/demos/nested/menu2',
-            meta: {
-              icon: 'ic:round-menu',
-              keepAlive: true,
-              title: $t('page.demos.nested.menu2'),
-            },
-            children: [
-              {
-                name: 'Menu21Demo',
-                path: '/demos/nested/menu2/menu2-1',
-                component: () => import('#/views/demos/nested/menu-2-1.vue'),
-                meta: {
-                  icon: 'ic:round-menu',
-                  keepAlive: true,
-                  title: $t('page.demos.nested.menu2_1'),
-                },
-              },
-            ],
-          },
-          {
-            name: 'Menu3Demo',
-            path: '/demos/nested/menu3',
-            meta: {
-              icon: 'ic:round-menu',
-              title: $t('page.demos.nested.menu3'),
-            },
-            children: [
-              {
-                name: 'Menu31Demo',
-                path: 'menu3-1',
-                component: () => import('#/views/demos/nested/menu-3-1.vue'),
-                meta: {
-                  icon: 'ic:round-menu',
-                  keepAlive: true,
-                  title: $t('page.demos.nested.menu3_1'),
-                },
-              },
-              {
-                name: 'Menu32Demo',
-                path: 'menu3-2',
-                meta: {
-                  icon: 'ic:round-menu',
-                  title: $t('page.demos.nested.menu3_2'),
-                },
-                children: [
-                  {
-                    name: 'Menu321Demo',
-                    path: '/demos/nested/menu3/menu3-2/menu3-2-1',
-                    component: () =>
-                      import('#/views/demos/nested/menu-3-2-1.vue'),
-                    meta: {
-                      icon: 'ic:round-menu',
-                      keepAlive: true,
-                      title: $t('page.demos.nested.menu3_2_1'),
-                    },
-                  },
-                ],
-              },
-            ],
-          },
-        ],
+        name: 'AntDesignDemos',
+        path: '/demos/ant-design',
+        component: () => import('#/views/demos/antd/index.vue'),
       },
     ],
   },
diff --git a/apps/web-antd/src/router/routes/modules/vben.ts b/apps/web-antd/src/router/routes/modules/vben.ts
index 3a0daabe3..48e38fb2e 100644
--- a/apps/web-antd/src/router/routes/modules/vben.ts
+++ b/apps/web-antd/src/router/routes/modules/vben.ts
@@ -38,8 +38,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
-          iframeSrc: VBEN_DOC_URL,
-          keepAlive: true,
+          link: VBEN_DOC_URL,
           title: $t('page.vben.document'),
         },
       },
diff --git a/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue b/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
index 1bef4d4ec..261c847ce 100644
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-trends.vue
@@ -13,7 +13,7 @@ onMounted(() => {
       containLabel: true,
       left: '1%',
       right: '1%',
-      top: '2  %',
+      top: '2 %',
     },
     series: [
       {
diff --git a/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue b/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
index 4dfc163fd..8230f6e5c 100644
--- a/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/web-antd/src/views/dashboard/analytics/analytics-visits.vue
@@ -13,7 +13,7 @@ onMounted(() => {
       containLabel: true,
       left: '1%',
       right: '1%',
-      top: '2  %',
+      top: '2 %',
     },
     series: [
       {
diff --git a/apps/web-antd/src/views/demos/antd/index.vue b/apps/web-antd/src/views/demos/antd/index.vue
new file mode 100644
index 000000000..8286bebb1
--- /dev/null
+++ b/apps/web-antd/src/views/demos/antd/index.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
+import { Button, Card, message, notification, Space } from 'ant-design-vue';
+
+type NotificationType = 'error' | 'info' | 'success' | 'warning';
+
+function info() {
+  message.info('How many roads must a man walk down');
+}
+
+function error() {
+  message.error({
+    content: 'Once upon a time you dressed so fine',
+    duration: 2500,
+  });
+}
+
+function warning() {
+  message.warning('How many roads must a man walk down');
+}
+function success() {
+  message.success('Cause you walked hand in hand With another man in my place');
+}
+
+function notify(type: NotificationType) {
+  notification[type]({
+    duration: 2500,
+    message: '说点啥呢',
+    type,
+  });
+}
+</script>
+
+<template>
+  <Page
+    description="支持多语言，主题功能集成切换等"
+    title="Ant Design Vue组件使用演示"
+  >
+    <Card title="按钮">
+      <Space>
+        <Button>Default</Button>
+        <Button type="primary"> Primary </Button>
+        <Button> Info </Button>
+        <Button danger> Error </Button>
+      </Space>
+    </Card>
+    <Card class="mb-5" title="Message">
+      <Space>
+        <Button @click="info"> 信息 </Button>
+        <Button danger @click="error"> 错误 </Button>
+        <Button @click="warning"> 警告 </Button>
+        <Button @click="success"> 成功 </Button>
+      </Space>
+    </Card>
+
+    <Card class="mb-5" title="Notification">
+      <Space>
+        <Button @click="notify('info')"> 信息 </Button>
+        <Button danger @click="notify('error')"> 错误 </Button>
+        <Button @click="notify('warning')"> 警告 </Button>
+        <Button @click="notify('success')"> 成功 </Button>
+      </Space>
+    </Card>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/examples/ellipsis/data.ts b/apps/web-antd/src/views/examples/ellipsis/data.ts
deleted file mode 100644
index 796d95a7e..000000000
--- a/apps/web-antd/src/views/examples/ellipsis/data.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const longText: string =
-  'Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。';
diff --git a/apps/web-antd/src/views/examples/ellipsis/index.vue b/apps/web-antd/src/views/examples/ellipsis/index.vue
deleted file mode 100644
index 6c501bad4..000000000
--- a/apps/web-antd/src/views/examples/ellipsis/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import { EllipsisText } from '@vben/common-ui';
-
-import { Collapse, CollapsePanel } from 'ant-design-vue';
-
-import { longText } from './data';
-
-const text = ref(longText);
-const activeKey = ref(['1', '2', '3', '4']);
-</script>
-
-<template>
-  <div class="card-box p-5">
-    <h1 class="mb-5 text-xl font-semibold">文本省略示例</h1>
-    <div>
-      <Collapse v-model:activeKey="activeKey">
-        <CollapsePanel key="1" header="Ellipsis 基本使用">
-          <EllipsisText :max-width="240">{{ text }}</EllipsisText>
-        </CollapsePanel>
-        <CollapsePanel key="2" header="Ellipsis 多行省略">
-          <EllipsisText :line="2">{{ text }}</EllipsisText>
-        </CollapsePanel>
-        <CollapsePanel key="3" header="Ellipsis 点击展开">
-          <EllipsisText :line="3" expand>{{ text }}</EllipsisText>
-        </CollapsePanel>
-        <CollapsePanel key="4" header="Ellipsis 定制 Tooltip 内容">
-          <EllipsisText :max-width="240">
-            住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
-            <template #tooltip>
-              <div style="text-align: center">
-                《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
-                深海的光 停滞的海浪
-              </div>
-            </template>
-          </EllipsisText>
-        </CollapsePanel>
-      </Collapse>
-    </div>
-  </div>
-</template>
diff --git a/apps/web-ele/.env.development b/apps/web-ele/.env.development
index c138f4829..8bcb432e6 100644
--- a/apps/web-ele/.env.development
+++ b/apps/web-ele/.env.development
@@ -1,5 +1,5 @@
 # 端口号
-VITE_PORT=5666
+VITE_PORT=5777
 
 VITE_BASE=/
 
diff --git a/apps/web-ele/src/api/request.ts b/apps/web-ele/src/api/request.ts
index ac6c0f9b6..dd7816508 100644
--- a/apps/web-ele/src/api/request.ts
+++ b/apps/web-ele/src/api/request.ts
@@ -59,7 +59,7 @@ function createRequestClient(baseURL: string) {
     if (status >= 200 && status < 400 && code === 0) {
       return data;
     }
-    throw new Error(msg);
+    throw new Error(`Error ${status}: ${msg}`);
   });
   return client;
 }
diff --git a/apps/web-ele/src/locales/index.ts b/apps/web-ele/src/locales/index.ts
index 186935e09..695cff56e 100644
--- a/apps/web-ele/src/locales/index.ts
+++ b/apps/web-ele/src/locales/index.ts
@@ -58,7 +58,11 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
       locale = await import('dayjs/locale/en');
     }
   }
-  dayjs.locale(locale);
+  if (locale) {
+    dayjs.locale(locale);
+  } else {
+    console.error(`Failed to load dayjs locale for ${lang}`);
+  }
 }
 
 /**
diff --git a/apps/web-ele/src/router/guard.ts b/apps/web-ele/src/router/guard.ts
index 1581d0151..f6b79f06c 100644
--- a/apps/web-ele/src/router/guard.ts
+++ b/apps/web-ele/src/router/guard.ts
@@ -115,10 +115,10 @@ function setupAccessGuard(router: Router) {
     // 保存菜单信息和路由信息
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
-    const redirectPath = (from.query.redirect ?? to.path) as string;
+    const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
     return {
-      path: decodeURIComponent(redirectPath),
+      ...router.resolve(decodeURIComponent(redirectPath)),
       replace: true,
     };
   });
diff --git a/apps/web-ele/src/router/routes/modules/demos.ts b/apps/web-ele/src/router/routes/modules/demos.ts
index 25a58989a..7b638a998 100644
--- a/apps/web-ele/src/router/routes/modules/demos.ts
+++ b/apps/web-ele/src/router/routes/modules/demos.ts
@@ -17,7 +17,6 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         meta: {
-          icon: 'mdi:shield-key-outline',
           title: $t('page.demos.element-plus'),
         },
         name: 'NaiveDemos',
diff --git a/apps/web-ele/src/router/routes/modules/vben.ts b/apps/web-ele/src/router/routes/modules/vben.ts
index a5ced040e..3a8f2e942 100644
--- a/apps/web-ele/src/router/routes/modules/vben.ts
+++ b/apps/web-ele/src/router/routes/modules/vben.ts
@@ -1,11 +1,11 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 import {
+  VBEN_ANT_PREVIEW_URL,
   VBEN_DOC_URL,
   VBEN_GITHUB_URL,
   VBEN_LOGO_URL,
   VBEN_NAIVE_PREVIEW_URL,
-  VBEN_PREVIEW_URL,
 } from '@vben/constants';
 
 import { BasicLayout, IFrameView } from '#/layouts';
@@ -38,8 +38,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
-          iframeSrc: VBEN_DOC_URL,
-          keepAlive: true,
+          link: VBEN_DOC_URL,
           title: $t('page.vben.document'),
         },
       },
@@ -69,7 +68,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
-          link: VBEN_PREVIEW_URL,
+          link: VBEN_ANT_PREVIEW_URL,
           title: $t('page.vben.antdv'),
         },
       },
diff --git a/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue b/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
index 1bef4d4ec..261c847ce 100644
--- a/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/web-ele/src/views/dashboard/analytics/analytics-trends.vue
@@ -13,7 +13,7 @@ onMounted(() => {
       containLabel: true,
       left: '1%',
       right: '1%',
-      top: '2  %',
+      top: '2 %',
     },
     series: [
       {
diff --git a/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue b/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
index 4dfc163fd..8230f6e5c 100644
--- a/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/web-ele/src/views/dashboard/analytics/analytics-visits.vue
@@ -13,7 +13,7 @@ onMounted(() => {
       containLabel: true,
       left: '1%',
       right: '1%',
-      top: '2  %',
+      top: '2 %',
     },
     series: [
       {
diff --git a/apps/web-ele/src/views/demos/element/index.vue b/apps/web-ele/src/views/demos/element/index.vue
index 15f0d5e39..dc02759ff 100644
--- a/apps/web-ele/src/views/demos/element/index.vue
+++ b/apps/web-ele/src/views/demos/element/index.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import { Page } from '@vben/common-ui';
+
 import {
   ElButton,
   ElCard,
@@ -39,58 +41,38 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">Element Plus组件使用演示</h1>
-      <div class="text-foreground/80 mt-2">支持多语言，主题功能集成切换等</div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">按钮</span>
-      </div>
-      <div>
-        <ElSpace>
-          <ElButton>Default</ElButton>
-          <ElButton type="primary"> Primary </ElButton>
-          <ElButton type="info"> Info </ElButton>
-          <ElButton type="success"> Success </ElButton>
-          <ElButton type="warning"> Warning </ElButton>
-          <ElButton type="danger"> Error </ElButton>
-        </ElSpace>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">卡片</span>
-      </div>
-      <div>
-        <ElCard title="卡片"> 卡片内容 </ElCard>
-      </div>
-    </div>
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">信息 Message </span>
-      </div>
-      <div class="flex gap-3">
+  <Page
+    description="支持多语言，主题功能集成切换等"
+    title="Element Plus组件使用演示"
+  >
+    <ElCard class="mb-5">
+      <template #header> 按钮 </template>
+      <ElSpace>
+        <ElButton>Default</ElButton>
+        <ElButton type="primary"> Primary </ElButton>
+        <ElButton type="info"> Info </ElButton>
+        <ElButton type="success"> Success </ElButton>
+        <ElButton type="warning"> Warning </ElButton>
+        <ElButton type="danger"> Error </ElButton>
+      </ElSpace>
+    </ElCard>
+    <ElCard class="mb-5">
+      <template #header> Message </template>
+      <ElSpace>
         <ElButton type="info" @click="info"> 信息 </ElButton>
         <ElButton type="danger" @click="error"> 错误 </ElButton>
         <ElButton type="warning" @click="warning"> 警告 </ElButton>
         <ElButton type="success" @click="success"> 成功 </ElButton>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">通知 Notification </span>
-      </div>
-      <div class="flex gap-3">
+      </ElSpace>
+    </ElCard>
+    <ElCard class="mb-5">
+      <template #header> Notification </template>
+      <ElSpace>
         <ElButton type="info" @click="notify('info')"> 信息 </ElButton>
         <ElButton type="danger" @click="notify('error')"> 错误 </ElButton>
         <ElButton type="warning" @click="notify('warning')"> 警告 </ElButton>
         <ElButton type="success" @click="notify('success')"> 成功 </ElButton>
-      </div>
-    </div>
-  </div>
+      </ElSpace>
+    </ElCard>
+  </Page>
 </template>
diff --git a/apps/web-naive/.env.development b/apps/web-naive/.env.development
index 8bcb432e6..11c5254ae 100644
--- a/apps/web-naive/.env.development
+++ b/apps/web-naive/.env.development
@@ -1,5 +1,5 @@
 # 端口号
-VITE_PORT=5777
+VITE_PORT=5888
 
 VITE_BASE=/
 
diff --git a/apps/web-naive/src/api/request.ts b/apps/web-naive/src/api/request.ts
index 524576be5..6ebd6d930 100644
--- a/apps/web-naive/src/api/request.ts
+++ b/apps/web-naive/src/api/request.ts
@@ -58,7 +58,7 @@ function createRequestClient(baseURL: string) {
     if (status >= 200 && status < 400 && code === 0) {
       return data;
     }
-    throw new Error(msg);
+    throw new Error(`Error ${status}: ${msg}`);
   });
   return client;
 }
diff --git a/apps/web-naive/src/router/guard.ts b/apps/web-naive/src/router/guard.ts
index 1581d0151..f6b79f06c 100644
--- a/apps/web-naive/src/router/guard.ts
+++ b/apps/web-naive/src/router/guard.ts
@@ -115,10 +115,10 @@ function setupAccessGuard(router: Router) {
     // 保存菜单信息和路由信息
     accessStore.setAccessMenus(accessibleMenus);
     accessStore.setAccessRoutes(accessibleRoutes);
-    const redirectPath = (from.query.redirect ?? to.path) as string;
+    const redirectPath = (from.query.redirect ?? to.fullPath) as string;
 
     return {
-      path: decodeURIComponent(redirectPath),
+      ...router.resolve(decodeURIComponent(redirectPath)),
       replace: true,
     };
   });
diff --git a/apps/web-naive/src/router/routes/modules/demos.ts b/apps/web-naive/src/router/routes/modules/demos.ts
index 8ddf81eb4..5a2dc12a0 100644
--- a/apps/web-naive/src/router/routes/modules/demos.ts
+++ b/apps/web-naive/src/router/routes/modules/demos.ts
@@ -17,7 +17,6 @@ const routes: RouteRecordRaw[] = [
     children: [
       {
         meta: {
-          icon: 'mdi:shield-key-outline',
           title: $t('page.demos.naive'),
         },
         name: 'NaiveDemos',
diff --git a/apps/web-naive/src/router/routes/modules/vben.ts b/apps/web-naive/src/router/routes/modules/vben.ts
index 3fd5942b5..0b1273df6 100644
--- a/apps/web-naive/src/router/routes/modules/vben.ts
+++ b/apps/web-naive/src/router/routes/modules/vben.ts
@@ -1,11 +1,11 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 import {
+  VBEN_ANT_PREVIEW_URL,
   VBEN_DOC_URL,
   VBEN_ELE_PREVIEW_URL,
   VBEN_GITHUB_URL,
   VBEN_LOGO_URL,
-  VBEN_PREVIEW_URL,
 } from '@vben/constants';
 
 import { BasicLayout, IFrameView } from '#/layouts';
@@ -38,8 +38,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           icon: 'lucide:book-open-text',
-          iframeSrc: VBEN_DOC_URL,
-          keepAlive: true,
+          link: VBEN_DOC_URL,
           title: $t('page.vben.document'),
         },
       },
@@ -59,7 +58,7 @@ const routes: RouteRecordRaw[] = [
         component: IFrameView,
         meta: {
           badgeType: 'dot',
-          link: VBEN_PREVIEW_URL,
+          link: VBEN_ANT_PREVIEW_URL,
           title: $t('page.vben.antdv'),
         },
       },
diff --git a/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue b/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue
index 1bef4d4ec..261c847ce 100644
--- a/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue
+++ b/apps/web-naive/src/views/dashboard/analytics/analytics-trends.vue
@@ -13,7 +13,7 @@ onMounted(() => {
       containLabel: true,
       left: '1%',
       right: '1%',
-      top: '2  %',
+      top: '2 %',
     },
     series: [
       {
diff --git a/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue b/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue
index 4dfc163fd..8230f6e5c 100644
--- a/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue
+++ b/apps/web-naive/src/views/dashboard/analytics/analytics-visits.vue
@@ -13,7 +13,7 @@ onMounted(() => {
       containLabel: true,
       left: '1%',
       right: '1%',
-      top: '2  %',
+      top: '2 %',
     },
     series: [
       {
diff --git a/apps/web-naive/src/views/demos/naive/index.vue b/apps/web-naive/src/views/demos/naive/index.vue
index e328f4134..41d55109e 100644
--- a/apps/web-naive/src/views/demos/naive/index.vue
+++ b/apps/web-naive/src/views/demos/naive/index.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import type { NotificationType } from 'naive-ui';
+import { Page } from '@vben/common-ui';
 
+import { type NotificationType } from 'naive-ui';
 import { NButton, NCard, NSpace, useMessage, useNotification } from 'naive-ui';
 
 const notification = useNotification();
@@ -33,59 +34,35 @@ function notify(type: NotificationType) {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">naive组件使用演示</h1>
-      <div class="text-foreground/80 mt-2">支持多语言，主题功能集成切换等</div>
-    </div>
+  <Page description="支持多语言，主题功能集成切换等" title="naive组件使用演示">
+    <NCard class="mb-5" title="按钮">
+      <NSpace>
+        <NButton>Default</NButton>
+        <NButton type="tertiary"> Tertiary </NButton>
+        <NButton type="primary"> Primary </NButton>
+        <NButton type="info"> Info </NButton>
+        <NButton type="success"> Success </NButton>
+        <NButton type="warning"> Warning </NButton>
+        <NButton type="error"> Error </NButton>
+      </NSpace>
+    </NCard>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">按钮</span>
-      </div>
-      <div>
-        <NSpace>
-          <NButton>Default</NButton>
-          <NButton type="tertiary"> Tertiary </NButton>
-          <NButton type="primary"> Primary </NButton>
-          <NButton type="info"> Info </NButton>
-          <NButton type="success"> Success </NButton>
-          <NButton type="warning"> Warning </NButton>
-          <NButton type="error"> Error </NButton>
-        </NSpace>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">卡片</span>
-      </div>
-      <div>
-        <NCard title="卡片"> 卡片内容 </NCard>
-      </div>
-    </div>
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">信息 Message </span>
-      </div>
-      <div class="flex gap-3">
+    <NCard class="mb-5" title="Message">
+      <NSpace>
         <NButton type="error" @click="error"> 错误 </NButton>
         <NButton type="warning" @click="warning"> 警告 </NButton>
         <NButton type="success" @click="success"> 成功 </NButton>
         <NButton type="primary" @click="loading"> 加载中 </NButton>
-      </div>
-    </div>
+      </NSpace>
+    </NCard>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">通知 Notification </span>
-      </div>
-      <div class="flex gap-3">
+    <NCard class="mb-5" title="Notification">
+      <NSpace>
         <NButton type="error" @click="notify('error')"> 错误 </NButton>
         <NButton type="warning" @click="notify('warning')"> 警告 </NButton>
         <NButton type="success" @click="notify('success')"> 成功 </NButton>
         <NButton type="primary" @click="notify('info')"> 加载中 </NButton>
-      </div>
-    </div>
-  </div>
+      </NSpace>
+    </NCard>
+  </Page>
 </template>
diff --git a/apps/web-naive/src/views/demos/table/index.vue b/apps/web-naive/src/views/demos/table/index.vue
index 02acf5808..ddc958bc3 100644
--- a/apps/web-naive/src/views/demos/table/index.vue
+++ b/apps/web-naive/src/views/demos/table/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+import { Page } from '@vben/common-ui';
+
 import { NDataTable } from 'naive-ui';
 
 const columns = ref([
@@ -25,7 +27,12 @@ const data = [
 </script>
 
 <template>
-  <NDataTable :columns="columns" :data="data" />
+  <Page
+    description="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。"
+    title="NDataTable"
+  >
+    <NDataTable :columns="columns" :data="data" />
+  </Page>
 </template>
 
 <style scoped></style>
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 3e98f54db..78f9ed27b 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -162,7 +162,11 @@ function nav(): DefaultTheme.NavItem[] {
           items: [
             {
               link: 'https://www.vben.pro',
-              text: 'Ant Design Vue 版本(默认)',
+              text: '演示版本',
+            },
+            {
+              link: 'https://ant.vben.pro',
+              text: 'Ant Design Vue 版本',
             },
             {
               link: 'https://naive.vben.pro',
@@ -250,6 +254,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
           text: '为什么选择我们?',
         },
         { link: 'introduction/quick-start', text: '快速开始' },
+        { link: 'introduction/thin', text: '精简版本' },
       ],
     },
     {
@@ -284,6 +289,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
       items: [
         { link: 'project/standard', text: '规范' },
         { link: 'project/cli', text: 'CLI' },
+        { link: 'project/dir', text: '目录说明' },
         { link: 'project/test', text: '单元测试' },
         { link: 'project/tailwindcss', text: 'Tailwind CSS' },
         { link: 'project/changeset', text: 'Changeset' },
diff --git a/docs/.vitepress/theme/components/vben-contributors.vue b/docs/.vitepress/theme/components/vben-contributors.vue
index 987098b16..9b887d925 100644
--- a/docs/.vitepress/theme/components/vben-contributors.vue
+++ b/docs/.vitepress/theme/components/vben-contributors.vue
@@ -4,7 +4,10 @@
   <div class="vp-doc vben-contributors">
     <p>Contributors</p>
     <a href="https://github.com/vbenjs/vue-vben-admin/graphs/contributors">
-      <img src="https://contrib.rocks/image?repo=vbenjs/vue-vben-admin" />
+      <img
+        alt="Contributors"
+        src="https://opencollective.com/vbenjs/contributors.svg?button=false"
+      />
     </a>
   </div>
 </template>
diff --git a/docs/src/guide/essentials/development.md b/docs/src/guide/essentials/development.md
index 8fb82a195..4b92b10f1 100644
--- a/docs/src/guide/essentials/development.md
+++ b/docs/src/guide/essentials/development.md
@@ -78,6 +78,8 @@ npm 脚本是项目常见的配置，用于执行一些常见的任务，比如
     "dev:docs": "pnpm -F @vben/docs run dev",
     // 启动web-ele应用
     "dev:ele": "pnpm -F @vben/web-ele run dev",
+    // 启动演示应用
+    "dev:play": "pnpm -F @vben/playground run dev",
     // 启动web-naive应用
     "dev:naive": "pnpm -F @vben/web-naive run dev",
     // 格式化代码
diff --git a/docs/src/guide/essentials/server.md b/docs/src/guide/essentials/server.md
index 5fe139678..26a839341 100644
--- a/docs/src/guide/essentials/server.md
+++ b/docs/src/guide/essentials/server.md
@@ -221,7 +221,7 @@ function createRequestClient(baseURL: string) {
     if (status >= 200 && status < 400 && code === 0) {
       return data;
     }
-    throw new Error(msg);
+    throw new Error(`Error ${status}: ${msg}`);
   });
   return client;
 }
diff --git a/docs/src/guide/in-depth/locale.md b/docs/src/guide/in-depth/locale.md
index 69370e157..66626b7e2 100644
--- a/docs/src/guide/in-depth/locale.md
+++ b/docs/src/guide/in-depth/locale.md
@@ -198,7 +198,11 @@ async function loadDayjsLocale(lang: SupportedLanguagesType) {
       locale = await import('dayjs/locale/en');
     }
   }
-  dayjs.locale(locale);
+  if (locale) {
+    dayjs.locale(locale);
+  } else {
+    console.error(`Failed to load dayjs locale for ${lang}`);
+  }
 }
 ```
 
diff --git a/docs/src/guide/introduction/quick-start.md b/docs/src/guide/introduction/quick-start.md
index 47e86160a..852414f6a 100644
--- a/docs/src/guide/introduction/quick-start.md
+++ b/docs/src/guide/introduction/quick-start.md
@@ -72,11 +72,24 @@ pnpm install
 
 ### 运行项目
 
-执行以下命令即可运行项目:
+执行以下命运行项目:
 
 ```bash
 # 启动项目
 pnpm dev
 ```
 
+此时，你会看到类似如下的输出，选择你需要运行的项目：
+
+```bash
+│
+◆  Select the app you need to run [dev]:
+│  ● @vben/web-antd
+│  ○ @vben/web-ele
+│  ○ @vben/web-naive
+│  ○ @vben/docs
+│  ○ @vben/playground
+└
+```
+
 现在，你可以在浏览器访问 `http://localhost:5555` 查看项目。
diff --git a/docs/src/guide/introduction/thin.md b/docs/src/guide/introduction/thin.md
new file mode 100644
index 000000000..818227e90
--- /dev/null
+++ b/docs/src/guide/introduction/thin.md
@@ -0,0 +1,62 @@
+# 精简版本
+
+从 `5.0` 版本开始，我们不再提供精简的仓库或者分支。我们的目标是提供一个更加一致的开发体验，同时减少维护成本。在这里，我们将如何介绍自己的项目，如何去精简以及移除不需要的功能。
+
+## 应用精简
+
+首先，确认你需要的 `UI` 组件库版本，然后删除对应的应用，比如你选择使用 `Ant Design Vue`，那么你可以删除其他应用， 只需要删除下面两个文件夹即可：
+
+```bash
+apps/web-ele
+apps/web-native
+
+```
+
+::: tip
+
+如果项目没有内置你需要的 `UI` 组件库应用，你可以直接全部删除其他应用。然后自行新建应用即可。
+
+:::
+
+## 演示代码精简
+
+如果你不需要演示代码，你可以直接删除的`playground`文件夹。
+
+## 文档精简
+
+如果你不需要文档，你可以直接删除`docs`文件夹。
+
+## Mock 服务精简
+
+如果你不需要`Mock`服务，你可以直接删除`apps/backend-mock`文件夹。同时在你的应用下`.env.development`文件中删除`VITE_NITRO_MOCK`变量。
+
+```bash
+# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
+VITE_NITRO_MOCK=false
+```
+
+## 安装依赖
+
+到这里，你已经完成了精简操作，接下来你可以安装依赖，并启动你的项目：
+
+```bash
+# 根目录下执行
+pnpm install
+
+```
+
+## 命令调整
+
+在精简后，你可能需要根据你的项目调整命令，在根目录下的`package.json`文件中，你可以调整`scripts`字段，移除你不需要的命令。
+
+```json
+{
+  "scripts": {
+    "dev:antd": "pnpm -F @vben/web-antd run dev",
+    "dev:docs": "pnpm -F @vben/docs run dev",
+    "dev:ele": "pnpm -F @vben/web-ele run dev",
+    "dev:play": "pnpm -F @vben/playground run dev",
+    "dev:naive": "pnpm -F @vben/web-naive run dev"
+  }
+}
+```
diff --git a/docs/src/guide/project/dir.md b/docs/src/guide/project/dir.md
new file mode 100644
index 000000000..3b32fedaf
--- /dev/null
+++ b/docs/src/guide/project/dir.md
@@ -0,0 +1,68 @@
+# 目录说明
+
+目录使用 Monorepo 管理，项目结构如下：
+
+```bash
+.
+├── Dockerfile # Docker 镜像构建文件
+├── README.md # 项目说明文档
+├── apps # 项目应用目录
+│   ├── backend-mock # 后端模拟服务应用
+│   ├── web-antd # 基于 Ant Design Vue 的前端应用
+│   ├── web-ele # 基于 Element Plus 的前端应用
+│   └── web-naive # 基于 Naive UI 的前端应用
+├── build-local-docker-image.sh # 本地构建 Docker 镜像脚本
+├── cspell.json # CSpell 配置文件
+├── docs # 项目文档目录
+├── eslint.config.mjs # ESLint 配置文件
+├── internal # 内部工具目录
+│   ├── lint-configs # 代码检查配置
+│   │   ├── commitlint-config # Commitlint 配置
+│   │   ├── eslint-config # ESLint 配置
+│   │   ├── prettier-config # Prettier 配置
+│   │   └── stylelint-config # Stylelint 配置
+│   ├── node-utils # Node.js 工具
+│   ├── tailwind-config # Tailwind 配置
+│   ├── tsconfig # 通用 tsconfig 配置
+│   └── vite-config # 通用Vite 配置
+├── package.json # 项目依赖配置
+├── packages # 项目包目录
+│   ├── @core # 核心包
+│   │   ├── base # 基础包
+│   │   │   ├── design # 设计相关
+│   │   │   ├── icons # 图标
+│   │   │   ├── shared # 共享
+│   │   │   └── typings # 类型定义
+│   │   ├── composables # 组合式 API
+│   │   ├── preferences # 偏好设置
+│   │   └── ui-kit # UI 组件集合
+│   │       ├── layout-ui # 布局 UI
+│   │       ├── menu-ui  # 菜单 UI
+│   │       ├── shadcn-ui # shadcn UI
+│   │       └── tabs-ui # 标签页 UI
+│   ├── constants # 常量
+│   ├── effects # 副作用相关包
+│   │   ├── access # 访问控制
+│   │   ├── chart-ui # 图表 UI
+│   │   ├── common-ui # 通用 UI
+│   │   ├── hooks # 组合式 API
+│   │   ├── layouts # 布局
+│   │   └── request # 请求
+│   ├── icons # 图标
+│   ├── locales # 国际化
+│   ├── preferences  # 偏好设置
+│   ├── stores # 状态管理
+│   ├── styles # 样式
+│   ├── types # 类型定义
+│   └── utils # 工具
+├── playground # 演示目录
+├── pnpm-lock.yaml # pnpm 锁定文件
+├── pnpm-workspace.yaml # pnpm 工作区配置文件
+├── scripts # 脚本目录
+│   ├── turbo-run # Turbo 运行脚本
+│   └── vsh # VSH 脚本
+├── stylelint.config.mjs # Stylelint 配置文件
+├── turbo.json # Turbo 配置文件
+├── vben-admin.code-workspace # VS Code 工作区配置文件
+└── vitest.config.ts # Vite 配置文件
+```
diff --git a/internal/tsconfig/base.json b/internal/tsconfig/base.json
index 82e35f319..1e45a7843 100644
--- a/internal/tsconfig/base.json
+++ b/internal/tsconfig/base.json
@@ -13,7 +13,6 @@
 
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "allowImportingTsExtensions": true,
 
     "strict": true,
     "strictNullChecks": true,
diff --git a/package.json b/package.json
index 338e59a73..025bad215 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "dev:antd": "pnpm -F @vben/web-antd run dev",
     "dev:docs": "pnpm -F @vben/docs run dev",
     "dev:ele": "pnpm -F @vben/web-ele run dev",
+    "dev:play": "pnpm -F @vben/playground run dev",
     "dev:naive": "pnpm -F @vben/web-naive run dev",
     "format": "vsh lint --format",
     "lint": "vsh lint",
@@ -69,6 +70,8 @@
     "@vben/turbo-run": "workspace:*",
     "@vben/vite-config": "workspace:*",
     "@vben/vsh": "workspace:*",
+    "@vitejs/plugin-vue": "^5.1.2",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
@@ -84,6 +87,7 @@
     "unbuild": "^2.0.0",
     "vite": "^5.4.0",
     "vitest": "^2.0.5",
+    "vue": "^3.4.37",
     "vue-tsc": "^2.0.29"
   },
   "engines": {
diff --git a/packages/@core/base/design/src/css/global.css b/packages/@core/base/design/src/css/global.css
index 6646403dd..562cafa93 100644
--- a/packages/@core/base/design/src/css/global.css
+++ b/packages/@core/base/design/src/css/global.css
@@ -35,7 +35,9 @@
     min-height: 100vh;
 
     /* overflow: overlay; */
+
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   a,
diff --git a/packages/@core/base/design/src/design-tokens/default/index.css b/packages/@core/base/design/src/design-tokens/default/index.css
index 5b0c985d1..bf3341751 100644
--- a/packages/@core/base/design/src/design-tokens/default/index.css
+++ b/packages/@core/base/design/src/design-tokens/default/index.css
@@ -8,7 +8,7 @@
 
   /* 主体区域背景色 */
   --background-deep: 210 11.11% 96.47%;
-  --foreground: 210 6% 21%;
+  --foreground: 222 84% 5%;
 
   /* Background color for <Card /> */
   --card: 0 0% 100%;
diff --git a/packages/@core/base/shared/src/constants/vben.ts b/packages/@core/base/shared/src/constants/vben.ts
index a72317579..4ae5d1e6a 100644
--- a/packages/@core/base/shared/src/constants/vben.ts
+++ b/packages/@core/base/shared/src/constants/vben.ts
@@ -22,3 +22,5 @@ export const VBEN_PREVIEW_URL = 'https://www.vben.pro';
 export const VBEN_ELE_PREVIEW_URL = 'https://ele.vben.pro';
 
 export const VBEN_NAIVE_PREVIEW_URL = 'https://naive.vben.pro';
+
+export const VBEN_ANT_PREVIEW_URL = 'https://ant.vben.pro';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/alert-dialog/alert-dialog.vue b/packages/@core/ui-kit/shadcn-ui/src/components/alert-dialog/alert-dialog.vue
index 833048830..3cc31f660 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/alert-dialog/alert-dialog.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/alert-dialog/alert-dialog.vue
@@ -8,7 +8,7 @@ import {
   AlertDialogHeader,
   AlertDialog as AlertDialogRoot,
   AlertDialogTitle,
-} from '@vben-core/shadcn-ui/components/ui/alert-dialog';
+} from '../ui/alert-dialog';
 
 interface Props {
   cancelText?: string;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
index 1e535f6fe..e42326db2 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@@ -5,20 +5,15 @@ import type {
   AvatarRootProps,
 } from 'radix-vue';
 
-import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from '@vben-core/shadcn-ui/components/ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 
 interface Props extends AvatarRootProps, AvatarFallbackProps, AvatarImageProps {
   alt?: string;
-  class?: HTMLAttributes['class'];
+  class?: any;
   dot?: boolean;
-  dotClass?: HTMLAttributes['class'];
+  dotClass?: any;
 }
 
 defineOptions({
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
index f27ab442c..7ba685a8c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-background.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { IBreadcrumb } from './interface';
+import type { IBreadcrumb } from './types';
 
 import { VbenIcon } from '../icon';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
index 6b316414f..1bdf88fe3 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
-import type { IBreadcrumb } from './interface';
+import type { IBreadcrumb } from './types';
 
 import { ChevronDown } from '@vben-core/icons';
+
+import { VbenIcon } from '../icon';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -9,15 +11,13 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '@vben-core/shadcn-ui/components/ui/breadcrumb';
+} from '../ui/breadcrumb';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@vben-core/shadcn-ui/components/ui/dropdown-menu';
-
-import { VbenIcon } from '../icon';
+} from '../ui/dropdown-menu';
 
 interface Props {
   breadcrumbs: IBreadcrumb[];
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts
index d9dc18fa3..f641f0b43 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/index.ts
@@ -1,4 +1,4 @@
 export { default as VbenBreadcrumb } from './breadcrumb.vue';
 export { default as VbenBackgroundBreadcrumb } from './breadcrumb-background.vue';
 
-export type * from './interface';
+export type * from './types';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/interface.ts b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
similarity index 100%
rename from packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/interface.ts
rename to packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
index f0fddefe4..2f46c91ef 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
@@ -1,18 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 
 import { LoaderCircle } from '@vben-core/icons';
-import {
-  type ButtonVariants,
-  buttonVariants,
-} from '@vben-core/shadcn-ui/components/ui/button';
 import { cn } from '@vben-core/shared';
 
 import { Primitive, type PrimitiveProps } from 'radix-vue';
 
+import { type ButtonVariants, buttonVariants } from '../ui/button';
+
 interface Props extends PrimitiveProps {
-  class?: HTMLAttributes['class'];
+  class?: any;
   disabled?: boolean;
   loading?: boolean;
   size?: ButtonVariants['size'];
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
index 57bd42959..f80347322 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/icon-button.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { ButtonVariants } from '@vben-core/shadcn-ui/components/ui/button';
+import type { ButtonVariants } from '../ui/button';
 
-import { computed, type HTMLAttributes, useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
 
-import { VbenTooltip } from '@vben-core/shadcn-ui/components/tooltip';
 import { cn } from '@vben-core/shared';
 
 import { type PrimitiveProps } from 'radix-vue';
 
+import { VbenTooltip } from '../tooltip';
 import VbenButton from './button.vue';
 
 interface Props extends PrimitiveProps {
-  class?: HTMLAttributes['class'];
+  class?: any;
   disabled?: boolean;
   onClick?: () => void;
   tooltip?: string;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue b/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
index ebd54f166..7dd14eb9b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
 
-import { Checkbox } from '@vben-core/shadcn-ui/components/ui/checkbox';
-
 import { useForwardPropsEmits } from 'radix-vue';
 
+import { Checkbox } from '../ui/checkbox';
+
 const props = defineProps<
   {
     name: string;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue b/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
index 8665f1168..66e08ec97 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
@@ -7,9 +7,10 @@ import type {
 
 import type { IContextMenuItem } from './interface';
 
-import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 
+import { useForwardPropsEmits } from 'radix-vue';
+
 import {
   ContextMenu,
   ContextMenuContent,
@@ -17,17 +18,15 @@ import {
   ContextMenuSeparator,
   ContextMenuShortcut,
   ContextMenuTrigger,
-} from '@vben-core/shadcn-ui/components/ui/context-menu';
-
-import { useForwardPropsEmits } from 'radix-vue';
+} from '../ui/context-menu';
 
 const props = defineProps<
   {
-    class?: HTMLAttributes['class'];
-    contentClass?: HTMLAttributes['class'];
+    class?: any;
+    contentClass?: any;
     contentProps?: ContextMenuContentProps;
     handlerData?: Record<string, any>;
-    itemClass?: HTMLAttributes['class'];
+    itemClass?: any;
     menus: (data: any) => IContextMenuItem[];
   } & ContextMenuRootProps
 >();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
index d02a88d6b..f098add91 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-menu.vue
@@ -11,7 +11,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from '@vben-core/shadcn-ui/components/ui/dropdown-menu';
+} from '../ui/dropdown-menu';
 
 interface Props extends DropdownMenuProps {}
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
index cc71f789b..f71b23327 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/dropdown-menu/dropdown-radio-menu.vue
@@ -7,7 +7,7 @@ import {
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@vben-core/shadcn-ui/components/ui/dropdown-menu';
+} from '../ui/dropdown-menu';
 
 interface Props extends DropdownMenuProps {}
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue b/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
index 70a2df480..5bd578240 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
@@ -5,24 +5,23 @@ import type {
   HoverCardRootProps,
 } from 'radix-vue';
 
-import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 
+import { useForwardPropsEmits } from 'radix-vue';
+
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from '@vben-core/shadcn-ui/components/ui/hover-card';
+} from '../ui/hover-card';
 
-import { useForwardPropsEmits } from 'radix-vue';
+interface Props extends HoverCardRootProps {
+  class?: any;
+  contentClass?: any;
+  contentProps?: HoverCardContentProps;
+}
 
-const props = defineProps<
-  {
-    class?: HTMLAttributes['class'];
-    contentClass?: HTMLAttributes['class'];
-    contentProps?: HoverCardContentProps;
-  } & HoverCardRootProps
->();
+const props = defineProps<Props>();
 
 const emits = defineEmits<HoverCardRootEmits>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
index 4cbd3e176..d771f5fa1 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input-password/input-password.vue
@@ -2,13 +2,10 @@
 import { ref, useSlots } from 'vue';
 
 import { Eye, EyeOff } from '@vben-core/icons';
-import {
-  type InputProps,
-  VbenInput,
-} from '@vben-core/shadcn-ui/components/input';
 
 import { useForwardProps } from 'radix-vue';
 
+import { type InputProps, VbenInput } from '../input';
 import PasswordStrength from './password-strength.vue';
 
 interface Props extends InputProps {}
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/input/index.ts
index 1db0ece39..e036594ed 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input/index.ts
@@ -1,2 +1,2 @@
 export { default as VbenInput } from './input.vue';
-export type * from './interface';
+export type * from './types';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue b/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
index 2502504ed..b6615a3e2 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { InputProps } from './interface';
+import type { InputProps } from './types';
 
 import { computed } from 'vue';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/input/interface.ts b/packages/@core/ui-kit/shadcn-ui/src/components/input/types.ts
similarity index 82%
rename from packages/@core/ui-kit/shadcn-ui/src/components/input/interface.ts
rename to packages/@core/ui-kit/shadcn-ui/src/components/input/types.ts
index 2ac0669db..0b2e18462 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input/interface.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/input/types.ts
@@ -1,7 +1,5 @@
-import type { HTMLAttributes } from 'vue';
-
 interface InputProps {
-  class?: HTMLAttributes['class'];
+  class?: any;
   /**
    * 错误提示信息
    */
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue b/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue
index 0ea8c6345..0d92fbcf2 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/link/link.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-
 import { cn } from '@vben-core/shared';
 
 import { Primitive, type PrimitiveProps } from 'radix-vue';
 
 interface Props extends PrimitiveProps {
-  class?: HTMLAttributes['class'];
+  class?: any;
   href: string;
 }
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/index.ts
index 4e8c209da..9d6a61ae4 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/index.ts
@@ -1,3 +1,3 @@
 export { default as VbenPinInput } from './input.vue';
 
-export type * from './interface';
+export type * from './types';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
index a0b57de9c..f0b66d6e7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
@@ -1,14 +1,10 @@
 <script setup lang="ts">
-import type { PinInputProps } from './interface';
+import type { PinInputProps } from './types';
 
 import { computed, ref, watch } from 'vue';
 
-import { VbenButton } from '@vben-core/shadcn-ui/components/button';
-import {
-  PinInput,
-  PinInputGroup,
-  PinInputInput,
-} from '@vben-core/shadcn-ui/components/ui/pin-input';
+import { VbenButton } from '../button';
+import { PinInput, PinInputGroup, PinInputInput } from '../ui/pin-input';
 
 defineOptions({
   inheritAttrs: false,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/interface.ts b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
similarity index 88%
rename from packages/@core/ui-kit/shadcn-ui/src/components/pin-input/interface.ts
rename to packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
index 684f88ef4..d5f603f03 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/interface.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/types.ts
@@ -1,5 +1,3 @@
-import type { HTMLAttributes } from 'vue';
-
 interface PinInputProps {
   /**
    * 发送验证码按钮loading
@@ -9,7 +7,7 @@ interface PinInputProps {
    * 发送验证码按钮文本
    */
   btnText?: string;
-  class?: HTMLAttributes['class'];
+  class?: any;
   /**
    * 验证码长度
    */
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue b/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
index 1a5111e49..a725652e3 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
@@ -5,27 +5,23 @@ import type {
   PopoverRootProps,
 } from 'radix-vue';
 
-import type { HTMLAttributes } from 'vue';
 import { computed } from 'vue';
 
+import { useForwardPropsEmits } from 'radix-vue';
+
 import {
   PopoverContent,
   Popover as PopoverRoot,
   PopoverTrigger,
-} from '@vben-core/shadcn-ui/components/ui/popover';
+} from '../ui/popover';
 
-import { useForwardPropsEmits } from 'radix-vue';
+interface Props extends PopoverRootProps {
+  class?: any;
+  contentClass?: any;
+  contentProps?: PopoverContentProps;
+}
 
-const props = withDefaults(
-  defineProps<
-    {
-      class?: HTMLAttributes['class'];
-      contentClass?: HTMLAttributes['class'];
-      contentProps?: PopoverContentProps;
-    } & PopoverRootProps
-  >(),
-  {},
-);
+const props = withDefaults(defineProps<Props>(), {});
 
 const emits = defineEmits<PopoverRootEmits>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
index 9190b6ea5..fe612db4e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
 import { ref } from 'vue';
 
-import {
-  ScrollArea,
-  ScrollBar,
-} from '@vben-core/shadcn-ui/components/ui/scroll-area';
 import { cn } from '@vben-core/shared';
 
+import { ScrollArea, ScrollBar } from '../ui/scroll-area';
+
 interface Props {
-  class?: HTMLAttributes['class'];
+  class?: any;
   horizontal?: boolean;
-  scrollBarClass?: HTMLAttributes['class'];
+  scrollBarClass?: any;
   shadow?: boolean;
   shadowBorder?: boolean;
 }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/index.ts
index f315772eb..1ec820d9d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/index.ts
@@ -1,3 +1,3 @@
-export type * from './interface';
-
 export { default as VbenSegmented } from './segmented.vue';
+
+export type * from './types';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
index fbd829367..645faa211 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import type { SegmentedItem } from './interface';
+import type { SegmentedItem } from './types';
 
 import { computed } from 'vue';
 
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-} from '@vben-core/shadcn-ui/components/ui/tabs';
-
 import { TabsTrigger } from 'radix-vue';
 
+import { Tabs, TabsContent, TabsList } from '../ui/tabs';
 import TabsIndicator from './tabs-indicator.vue';
 
 interface Props {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
index 61ebf2445..e89ce4133 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared';
 
@@ -9,9 +9,7 @@ import {
   useForwardProps,
 } from 'radix-vue';
 
-const props = defineProps<
-  { class?: HTMLAttributes['class'] } & TabsIndicatorProps
->();
+const props = defineProps<{ class?: any } & TabsIndicatorProps>();
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/interface.ts b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/types.ts
similarity index 100%
rename from packages/@core/ui-kit/shadcn-ui/src/components/segmented/interface.ts
rename to packages/@core/ui-kit/shadcn-ui/src/components/segmented/types.ts
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/sheet/sheet.vue b/packages/@core/ui-kit/shadcn-ui/src/components/sheet/sheet.vue
index f1d29b05b..43bd2fe74 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/sheet/sheet.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/sheet/sheet.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { computed, useSlots } from 'vue';
 
-import {
-  VbenButton,
-  VbenIconButton,
-} from '@vben-core/shadcn-ui/components/button';
-import { VbenScrollbar } from '@vben-core/shadcn-ui/components/scrollbar';
+import { X } from 'lucide-vue-next';
+
+import { VbenButton, VbenIconButton } from '../button';
+import { VbenScrollbar } from '../scrollbar';
 import {
   Sheet,
   SheetClose,
@@ -15,9 +14,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from '@vben-core/shadcn-ui/components/ui/sheet';
-
-import { X } from 'lucide-vue-next';
+} from '../ui/sheet';
 
 interface Props {
   cancelText?: string;
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
index f96984d9d..740ef4b34 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import type { TooltipContentProps } from 'radix-vue';
 
-import type { HTMLAttributes } from 'vue';
+import type { StyleValue } from 'vue';
 
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@vben-core/shadcn-ui/components/ui/tooltip';
+} from '../ui/tooltip';
 
 interface Props {
-  contentClass?: HTMLAttributes['class'];
-  contentStyle?: HTMLAttributes['style'];
+  contentClass?: any;
+  contentStyle?: StyleValue;
   delayDuration?: number;
   side: TooltipContentProps['side'];
 }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogAction.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogAction.vue
index 1b21b9185..52f05d6ec 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogAction.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { computed, type HTMLAttributes } from 'vue';
 
-import { buttonVariants } from '@vben-core/shadcn-ui/components/ui/button';
 import { cn } from '@vben-core/shared';
 
 import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue';
 
+import { buttonVariants } from '../button';
+
 const props = defineProps<
   { class?: HTMLAttributes['class'] } & AlertDialogActionProps
 >();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogCancel.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogCancel.vue
index b40eecbd0..088113f8d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogCancel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { computed, type HTMLAttributes } from 'vue';
 
-import { buttonVariants } from '@vben-core/shadcn-ui/components/ui/button';
 import { cn } from '@vben-core/shared';
 
 import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue';
 
+import { buttonVariants } from '../button';
+
 const props = defineProps<
   { class?: HTMLAttributes['class'] } & AlertDialogCancelProps
 >();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroup.vue
index 18d151c93..7cf0168fe 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroup.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { toggleVariants } from '@vben-core/shadcn-ui/components/ui/toggle';
 import type { VariantProps } from 'class-variance-authority';
 
+import type { toggleVariants } from '../toggle';
+
 import { computed, type HTMLAttributes, provide } from 'vue';
 
 import { cn } from '@vben-core/shared';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue
index ab5426e8d..75b04f3c0 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/ui/toggle-group/ToggleGroupItem.vue
@@ -3,7 +3,6 @@ import type { VariantProps } from 'class-variance-authority';
 
 import { computed, type HTMLAttributes, inject } from 'vue';
 
-import { toggleVariants } from '@vben-core/shadcn-ui/components/ui/toggle';
 import { cn } from '@vben-core/shared';
 
 import {
@@ -12,6 +11,8 @@ import {
   useForwardProps,
 } from 'radix-vue';
 
+import { toggleVariants } from '../toggle';
+
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
 
 const props = defineProps<
diff --git a/packages/effects/README.md b/packages/effects/README.md
index 612db8e63..4965b5125 100644
--- a/packages/effects/README.md
+++ b/packages/effects/README.md
@@ -1,6 +1,6 @@
 ## Effects 目录
 
-`effects` 目录专门用于存放与副作用相关的代码和逻辑。如果你的包具有以下特点，建议将其放置在 `effects` 目录下：
+`effects` 目录专门用于存放与轻微耦合相关的代码和逻辑。如果你的包具有以下特点，建议将其放置在 `effects` 目录下：
 
 - **状态管理**：使用状态管理框架 `pinia`，并包含处理副作用（如异步操作、API 调用）的部分。
 - **用户偏好设置**：使用 `@vben-core/preferences` 处理用户偏好设置，涉及本地存储或浏览器缓存逻辑（如使用 `localStorage`）。
diff --git a/packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts b/packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts
new file mode 100644
index 000000000..b297c3c95
--- /dev/null
+++ b/packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts
@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import { EllipsisText } from '..';
+
+describe('ellipsis-text.vue', () => {
+  it('renders the correct content and truncates text', async () => {
+    const wrapper = mount(EllipsisText, {
+      props: {
+        line: 1,
+        title: 'Test Title',
+      },
+      slots: {
+        default: 'This is a very long text that should be truncated.',
+      },
+    });
+
+    expect(wrapper.text()).toContain('This is a very long text');
+    // 检查 ellipsis 是否应用了正确的 class
+    const ellipsis = wrapper.find('.truncate');
+    expect(ellipsis.exists()).toBe(true);
+  });
+
+  it('expands text on click if expand is true', async () => {
+    const wrapper = mount(EllipsisText, {
+      props: {
+        expand: true,
+        line: 1,
+      },
+      slots: {
+        default: 'This is a very long text that should be truncated.',
+      },
+    });
+
+    const ellipsis = wrapper.find('.truncate');
+    await ellipsis.trigger('click');
+    expect(wrapper.emitted('expandChange')).toBeTruthy();
+  });
+});
diff --git a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue b/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
similarity index 93%
rename from packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
rename to packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
index 3e10cb6c4..f57cccc93 100644
--- a/packages/effects/common-ui/src/ellipsis-text/ellipsis-text.vue
+++ b/packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue
@@ -23,7 +23,7 @@ interface Props {
    * 提示框位置
    * @default 'top'
    */
-  placement: 'bottom' | 'left' | 'right' | 'top';
+  placement?: 'bottom' | 'left' | 'right' | 'top';
   /**
    * 是否启用文本提示框
    * @default true
@@ -49,8 +49,9 @@ interface Props {
    * 提示框内容区域样式
    * @default { textAlign: 'justify' }
    */
-  tooltipOverlayStyle?: CSSProperties; // 提示框内容区域样式
+  tooltipOverlayStyle?: CSSProperties;
 }
+
 const props = withDefaults(defineProps<Props>(), {
   expand: false,
   line: 1,
@@ -99,6 +100,14 @@ function onExpand() {
 
   emit('expandChange', !isExpanded);
 }
+
+function handleExpand() {
+  if (props.expand) {
+    onExpand();
+  } else {
+    return false;
+  }
+}
 </script>
 <template>
   <VbenTooltip
@@ -110,7 +119,6 @@ function onExpand() {
       backgroundColor: tooltipBackgroundColor,
     }"
     :disabled="!showTooltip"
-    :overlay-style="tooltipOverlayStyle"
     :side="placement"
   >
     <slot name="tooltip">
@@ -127,7 +135,7 @@ function onExpand() {
         }"
         :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
         class="cursor-text overflow-hidden"
-        @click="expand ? onExpand() : () => false"
+        @click="handleExpand"
         v-bind="$attrs"
       >
         <slot></slot>
diff --git a/packages/effects/common-ui/src/ellipsis-text/index.ts b/packages/effects/common-ui/src/components/ellipsis-text/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/ellipsis-text/index.ts
rename to packages/effects/common-ui/src/components/ellipsis-text/index.ts
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
new file mode 100644
index 000000000..5df910776
--- /dev/null
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -0,0 +1,2 @@
+export * from './ellipsis-text';
+export * from './page';
diff --git a/packages/effects/common-ui/src/components/page/__tests__/page.test.ts b/packages/effects/common-ui/src/components/page/__tests__/page.test.ts
new file mode 100644
index 000000000..0efb72d22
--- /dev/null
+++ b/packages/effects/common-ui/src/components/page/__tests__/page.test.ts
@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import { Page } from '..';
+
+describe('page.vue', () => {
+  it('renders title when passed', () => {
+    const wrapper = mount(Page, {
+      props: {
+        title: 'Test Title',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Test Title');
+  });
+
+  it('renders description when passed', () => {
+    const wrapper = mount(Page, {
+      props: {
+        description: 'Test Description',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Test Description');
+  });
+
+  it('renders default slot content', () => {
+    const wrapper = mount(Page, {
+      slots: {
+        default: '<p>Default Slot Content</p>',
+      },
+    });
+
+    expect(wrapper.html()).toContain('<p>Default Slot Content</p>');
+  });
+
+  it('renders footer slot when showFooter is true', () => {
+    const wrapper = mount(Page, {
+      props: {
+        showFooter: true,
+      },
+      slots: {
+        footer: '<p>Footer Slot Content</p>',
+      },
+    });
+
+    expect(wrapper.html()).toContain('<p>Footer Slot Content</p>');
+  });
+
+  it('applies the custom contentClass', () => {
+    const wrapper = mount(Page, {
+      props: {
+        contentClass: 'custom-class',
+      },
+    });
+
+    const contentDiv = wrapper.find('.m-4');
+    expect(contentDiv.classes()).toContain('custom-class');
+  });
+
+  it('does not render description slot if description prop is provided', () => {
+    const wrapper = mount(Page, {
+      props: {
+        description: 'Test Description',
+      },
+      slots: {
+        description: '<p>Description Slot Content</p>',
+      },
+    });
+
+    expect(wrapper.text()).toContain('Test Description');
+    expect(wrapper.html()).not.toContain('Description Slot Content');
+  });
+});
diff --git a/packages/effects/common-ui/src/components/page/index.ts b/packages/effects/common-ui/src/components/page/index.ts
new file mode 100644
index 000000000..65bf3c697
--- /dev/null
+++ b/packages/effects/common-ui/src/components/page/index.ts
@@ -0,0 +1 @@
+export { default as Page } from './page.vue';
diff --git a/packages/effects/common-ui/src/components/page/page.vue b/packages/effects/common-ui/src/components/page/page.vue
new file mode 100644
index 000000000..cdbefa230
--- /dev/null
+++ b/packages/effects/common-ui/src/components/page/page.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+interface Props {
+  title?: string;
+  description?: string;
+  contentClass?: string;
+  showFooter?: boolean;
+}
+
+defineOptions({
+  name: 'Page',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  contentClass: '',
+  description: '',
+  showFooter: false,
+  title: '',
+});
+</script>
+
+<template>
+  <div class="relative h-full">
+    <div
+      v-if="description || $slots.description || title"
+      class="bg-card px-6 py-4"
+    >
+      <div class="mb-2 flex justify-between text-xl font-bold leading-10">
+        {{ title }}
+      </div>
+      <template v-if="description">{{ description }}</template>
+      <slot v-else name="description"></slot>
+    </div>
+
+    <div :class="contentClass" class="m-4">
+      <slot></slot>
+    </div>
+
+    <div
+      v-if="props.showFooter"
+      class="bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4"
+    >
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
diff --git a/packages/effects/common-ui/src/index.ts b/packages/effects/common-ui/src/index.ts
index 8da49eafe..050c08291 100644
--- a/packages/effects/common-ui/src/index.ts
+++ b/packages/effects/common-ui/src/index.ts
@@ -1,6 +1,3 @@
-export * from './about';
-export * from './authentication';
-export * from './dashboard';
-export * from './ellipsis-text';
-export * from './fallback';
+export * from './components';
+export * from './ui';
 export { useToast } from '@vben-core/shadcn-ui';
diff --git a/packages/effects/common-ui/src/about/about.ts b/packages/effects/common-ui/src/ui/about/about.ts
similarity index 100%
rename from packages/effects/common-ui/src/about/about.ts
rename to packages/effects/common-ui/src/ui/about/about.ts
diff --git a/packages/effects/common-ui/src/about/about.vue b/packages/effects/common-ui/src/ui/about/about.vue
similarity index 89%
rename from packages/effects/common-ui/src/about/about.vue
rename to packages/effects/common-ui/src/ui/about/about.vue
index d9ed88a85..b2ad06672 100644
--- a/packages/effects/common-ui/src/about/about.vue
+++ b/packages/effects/common-ui/src/ui/about/about.vue
@@ -10,6 +10,8 @@ import {
 } from '@vben/constants';
 import { VbenLink, VbenRenderContent } from '@vben-core/shadcn-ui';
 
+import { Page } from '../../components';
+
 interface Props extends AboutProps {}
 
 defineOptions({
@@ -119,18 +121,18 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
 </script>
 
 <template>
-  <div class="m-5">
+  <Page :title="title">
+    <template #description>
+      <p class="text-foreground mt-3 text-sm leading-6">
+        <VbenLink :href="VBEN_GITHUB_URL">
+          {{ name }}
+        </VbenLink>
+        {{ description }}
+      </p>
+    </template>
     <div class="card-box p-5">
       <div>
-        <h3 class="text-foreground text-2xl font-semibold leading-7">
-          {{ title }}
-        </h3>
-        <p class="text-foreground/80 mt-3 text-sm leading-6">
-          <VbenLink :href="VBEN_GITHUB_URL">
-            {{ name }}
-          </VbenLink>
-          {{ description }}
-        </p>
+        <h5 class="text-foreground text-lg">基本信息</h5>
       </div>
       <div class="mt-4">
         <dl class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
@@ -139,7 +141,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
               <dt class="text-foreground text-sm font-medium leading-6">
                 {{ item.title }}
               </dt>
-              <dd class="text-foreground/80 mt-1 text-sm leading-6 sm:mt-2">
+              <dd class="text-foreground mt-1 text-sm leading-6 sm:mt-2">
                 <VbenRenderContent :content="item.content" />
               </dd>
             </div>
@@ -159,7 +161,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
               <dt class="text-foreground text-sm">
                 {{ item.title }}
               </dt>
-              <dd class="text-foreground/60 mt-1 text-sm sm:mt-2">
+              <dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
                 <VbenRenderContent :content="item.content" />
               </dd>
             </div>
@@ -178,7 +180,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
               <dt class="text-foreground text-sm">
                 {{ item.title }}
               </dt>
-              <dd class="text-foreground/60 mt-1 text-sm sm:mt-2">
+              <dd class="text-foreground/80 mt-1 text-sm sm:mt-2">
                 <VbenRenderContent :content="item.content" />
               </dd>
             </div>
@@ -186,5 +188,5 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
         </dl>
       </div>
     </div>
-  </div>
+  </Page>
 </template>
diff --git a/packages/effects/common-ui/src/about/index.ts b/packages/effects/common-ui/src/ui/about/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/about/index.ts
rename to packages/effects/common-ui/src/ui/about/index.ts
diff --git a/packages/effects/common-ui/src/authentication/auth-title.vue b/packages/effects/common-ui/src/ui/authentication/auth-title.vue
similarity index 100%
rename from packages/effects/common-ui/src/authentication/auth-title.vue
rename to packages/effects/common-ui/src/ui/authentication/auth-title.vue
diff --git a/packages/effects/common-ui/src/authentication/code-login.vue b/packages/effects/common-ui/src/ui/authentication/code-login.vue
similarity index 98%
rename from packages/effects/common-ui/src/authentication/code-login.vue
rename to packages/effects/common-ui/src/ui/authentication/code-login.vue
index 53e1c0b1e..2cc29992c 100644
--- a/packages/effects/common-ui/src/authentication/code-login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/code-login.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { LoginCodeEmits } from './typings';
+import type { LoginCodeEmits } from './types';
 
 import { computed, onBeforeUnmount, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
diff --git a/packages/effects/common-ui/src/authentication/forget-password.vue b/packages/effects/common-ui/src/ui/authentication/forget-password.vue
similarity index 100%
rename from packages/effects/common-ui/src/authentication/forget-password.vue
rename to packages/effects/common-ui/src/ui/authentication/forget-password.vue
diff --git a/packages/effects/common-ui/src/authentication/index.ts b/packages/effects/common-ui/src/ui/authentication/index.ts
similarity index 96%
rename from packages/effects/common-ui/src/authentication/index.ts
rename to packages/effects/common-ui/src/ui/authentication/index.ts
index 6b1c7bb8a..ec6b14954 100644
--- a/packages/effects/common-ui/src/authentication/index.ts
+++ b/packages/effects/common-ui/src/ui/authentication/index.ts
@@ -8,4 +8,4 @@ export type {
   AuthenticationProps,
   LoginAndRegisterParams,
   LoginCodeParams,
-} from './typings';
+} from './types';
diff --git a/packages/effects/common-ui/src/authentication/login-expired-modal.vue b/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
similarity index 99%
rename from packages/effects/common-ui/src/authentication/login-expired-modal.vue
rename to packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
index 14a2ac4f9..c9d0fc4c9 100644
--- a/packages/effects/common-ui/src/authentication/login-expired-modal.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login-expired-modal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AuthenticationProps, LoginAndRegisterParams } from './typings';
+import type { AuthenticationProps, LoginAndRegisterParams } from './types';
 
 import { useForwardPropsEmits } from '@vben/hooks';
 import {
diff --git a/packages/effects/common-ui/src/authentication/login.vue b/packages/effects/common-ui/src/ui/authentication/login.vue
similarity index 99%
rename from packages/effects/common-ui/src/authentication/login.vue
rename to packages/effects/common-ui/src/ui/authentication/login.vue
index b9d65c81f..6b2393477 100644
--- a/packages/effects/common-ui/src/authentication/login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AuthenticationProps, LoginEmits } from './typings';
+import type { AuthenticationProps, LoginEmits } from './types';
 
 import { computed, reactive, watch } from 'vue';
 import { useRouter } from 'vue-router';
diff --git a/packages/effects/common-ui/src/authentication/qrcode-login.vue b/packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
similarity index 100%
rename from packages/effects/common-ui/src/authentication/qrcode-login.vue
rename to packages/effects/common-ui/src/ui/authentication/qrcode-login.vue
diff --git a/packages/effects/common-ui/src/authentication/register.vue b/packages/effects/common-ui/src/ui/authentication/register.vue
similarity index 98%
rename from packages/effects/common-ui/src/authentication/register.vue
rename to packages/effects/common-ui/src/ui/authentication/register.vue
index 85336be01..c1f115b90 100644
--- a/packages/effects/common-ui/src/authentication/register.vue
+++ b/packages/effects/common-ui/src/ui/authentication/register.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { RegisterEmits } from './typings';
+import type { RegisterEmits } from './types';
 
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router';
diff --git a/packages/effects/common-ui/src/authentication/third-party-login.vue b/packages/effects/common-ui/src/ui/authentication/third-party-login.vue
similarity index 100%
rename from packages/effects/common-ui/src/authentication/third-party-login.vue
rename to packages/effects/common-ui/src/ui/authentication/third-party-login.vue
diff --git a/packages/effects/common-ui/src/authentication/typings.ts b/packages/effects/common-ui/src/ui/authentication/types.ts
similarity index 100%
rename from packages/effects/common-ui/src/authentication/typings.ts
rename to packages/effects/common-ui/src/ui/authentication/types.ts
diff --git a/packages/effects/common-ui/src/dashboard/analysis/analysis-chart-card.vue b/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/analysis/analysis-chart-card.vue
rename to packages/effects/common-ui/src/ui/dashboard/analysis/analysis-chart-card.vue
diff --git a/packages/effects/common-ui/src/dashboard/analysis/analysis-charts-tabs.vue b/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/analysis/analysis-charts-tabs.vue
rename to packages/effects/common-ui/src/ui/dashboard/analysis/analysis-charts-tabs.vue
diff --git a/packages/effects/common-ui/src/dashboard/analysis/analysis-overview.vue b/packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/analysis/analysis-overview.vue
rename to packages/effects/common-ui/src/ui/dashboard/analysis/analysis-overview.vue
diff --git a/packages/effects/common-ui/src/dashboard/analysis/index.ts b/packages/effects/common-ui/src/ui/dashboard/analysis/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/analysis/index.ts
rename to packages/effects/common-ui/src/ui/dashboard/analysis/index.ts
diff --git a/packages/effects/common-ui/src/dashboard/index.ts b/packages/effects/common-ui/src/ui/dashboard/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/index.ts
rename to packages/effects/common-ui/src/ui/dashboard/index.ts
diff --git a/packages/effects/common-ui/src/dashboard/typing.ts b/packages/effects/common-ui/src/ui/dashboard/typing.ts
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/typing.ts
rename to packages/effects/common-ui/src/ui/dashboard/typing.ts
diff --git a/packages/effects/common-ui/src/dashboard/workbench/index.ts b/packages/effects/common-ui/src/ui/dashboard/workbench/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/workbench/index.ts
rename to packages/effects/common-ui/src/ui/dashboard/workbench/index.ts
diff --git a/packages/effects/common-ui/src/dashboard/workbench/workbench-header.vue b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/workbench/workbench-header.vue
rename to packages/effects/common-ui/src/ui/dashboard/workbench/workbench-header.vue
diff --git a/packages/effects/common-ui/src/dashboard/workbench/workbench-project.vue b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/workbench/workbench-project.vue
rename to packages/effects/common-ui/src/ui/dashboard/workbench/workbench-project.vue
diff --git a/packages/effects/common-ui/src/dashboard/workbench/workbench-quick-nav.vue b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/workbench/workbench-quick-nav.vue
rename to packages/effects/common-ui/src/ui/dashboard/workbench/workbench-quick-nav.vue
diff --git a/packages/effects/common-ui/src/dashboard/workbench/workbench-todo.vue b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/workbench/workbench-todo.vue
rename to packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
diff --git a/packages/effects/common-ui/src/dashboard/workbench/workbench-trends.vue b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue
similarity index 100%
rename from packages/effects/common-ui/src/dashboard/workbench/workbench-trends.vue
rename to packages/effects/common-ui/src/ui/dashboard/workbench/workbench-trends.vue
diff --git a/packages/effects/common-ui/src/fallback/fallback.ts b/packages/effects/common-ui/src/ui/fallback/fallback.ts
similarity index 100%
rename from packages/effects/common-ui/src/fallback/fallback.ts
rename to packages/effects/common-ui/src/ui/fallback/fallback.ts
diff --git a/packages/effects/common-ui/src/fallback/fallback.vue b/packages/effects/common-ui/src/ui/fallback/fallback.vue
similarity index 100%
rename from packages/effects/common-ui/src/fallback/fallback.vue
rename to packages/effects/common-ui/src/ui/fallback/fallback.vue
diff --git a/packages/effects/common-ui/src/fallback/icons/icon-403.vue b/packages/effects/common-ui/src/ui/fallback/icons/icon-403.vue
similarity index 100%
rename from packages/effects/common-ui/src/fallback/icons/icon-403.vue
rename to packages/effects/common-ui/src/ui/fallback/icons/icon-403.vue
diff --git a/packages/effects/common-ui/src/fallback/icons/icon-404.vue b/packages/effects/common-ui/src/ui/fallback/icons/icon-404.vue
similarity index 100%
rename from packages/effects/common-ui/src/fallback/icons/icon-404.vue
rename to packages/effects/common-ui/src/ui/fallback/icons/icon-404.vue
diff --git a/packages/effects/common-ui/src/fallback/icons/icon-500.vue b/packages/effects/common-ui/src/ui/fallback/icons/icon-500.vue
similarity index 100%
rename from packages/effects/common-ui/src/fallback/icons/icon-500.vue
rename to packages/effects/common-ui/src/ui/fallback/icons/icon-500.vue
diff --git a/packages/effects/common-ui/src/fallback/icons/icon-coming-soon.vue b/packages/effects/common-ui/src/ui/fallback/icons/icon-coming-soon.vue
similarity index 100%
rename from packages/effects/common-ui/src/fallback/icons/icon-coming-soon.vue
rename to packages/effects/common-ui/src/ui/fallback/icons/icon-coming-soon.vue
diff --git a/packages/effects/common-ui/src/fallback/icons/icon-offline.vue b/packages/effects/common-ui/src/ui/fallback/icons/icon-offline.vue
similarity index 100%
rename from packages/effects/common-ui/src/fallback/icons/icon-offline.vue
rename to packages/effects/common-ui/src/ui/fallback/icons/icon-offline.vue
diff --git a/packages/effects/common-ui/src/fallback/icons/warning.svg b/packages/effects/common-ui/src/ui/fallback/icons/warning.svg
similarity index 100%
rename from packages/effects/common-ui/src/fallback/icons/warning.svg
rename to packages/effects/common-ui/src/ui/fallback/icons/warning.svg
diff --git a/packages/effects/common-ui/src/fallback/index.ts b/packages/effects/common-ui/src/ui/fallback/index.ts
similarity index 100%
rename from packages/effects/common-ui/src/fallback/index.ts
rename to packages/effects/common-ui/src/ui/fallback/index.ts
diff --git a/packages/effects/common-ui/src/ui/index.ts b/packages/effects/common-ui/src/ui/index.ts
new file mode 100644
index 000000000..fb99fdec1
--- /dev/null
+++ b/packages/effects/common-ui/src/ui/index.ts
@@ -0,0 +1,4 @@
+export * from './about';
+export * from './authentication';
+export * from './dashboard';
+export * from './fallback';
diff --git a/packages/effects/layouts/src/authentication/authentication.vue b/packages/effects/layouts/src/authentication/authentication.vue
index 648b2daf8..8a599c448 100644
--- a/packages/effects/layouts/src/authentication/authentication.vue
+++ b/packages/effects/layouts/src/authentication/authentication.vue
@@ -6,7 +6,6 @@ import { preferences, usePreferences } from '@vben/preferences';
 
 import AuthenticationFormView from './form.vue';
 import SloganIcon from './icons/slogan.vue';
-import Toolbar from './toolbar.vue';
 
 defineOptions({ name: 'Authentication' });
 
@@ -56,11 +55,7 @@ const logoSource = computed(() => preferences.logo.source);
     <div v-if="authPanelCenter" class="flex-center bg-authentication w-full">
       <AuthenticationFormView
         class="md:bg-background w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-2/5"
-      >
-        <template #toolbar>
-          <Toolbar />
-        </template>
-      </AuthenticationFormView>
+      />
     </div>
 
     <!-- 右侧认证面板 -->
diff --git a/packages/effects/layouts/src/basic/menu/extra-menu.vue b/packages/effects/layouts/src/basic/menu/extra-menu.vue
index 39d2898d2..d8ccc1b48 100644
--- a/packages/effects/layouts/src/basic/menu/extra-menu.vue
+++ b/packages/effects/layouts/src/basic/menu/extra-menu.vue
@@ -30,7 +30,7 @@ async function handleSelect(key: string) {
   <Menu
     :accordion="accordion"
     :collapse="collapse"
-    :default-active="route.path"
+    :default-active="route.meta?.activePath || route.path"
     :menus="menus"
     :rounded="rounded"
     :theme="theme"
diff --git a/packages/effects/layouts/src/basic/menu/use-extra-menu.ts b/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
index c4b80872e..a1c6d3fe9 100644
--- a/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
+++ b/packages/effects/layouts/src/basic/menu/use-extra-menu.ts
@@ -81,7 +81,7 @@ function useExtraMenu() {
   watch(
     () => route.path,
     (path) => {
-      const currentPath = path;
+      const currentPath = route.meta?.activePath || path;
       // if (preferences.sidebar.expandOnHover) {
       //   return;
       // }
diff --git a/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts b/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
index aedbd8687..ca78fc0dc 100644
--- a/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
+++ b/packages/effects/layouts/src/basic/menu/use-mixed-menu.ts
@@ -113,7 +113,7 @@ function useMixedMenu() {
 
   // 初始化计算侧边菜单
   onBeforeMount(() => {
-    calcSideMenus();
+    calcSideMenus(route.meta?.activePath || route.path);
   });
 
   return {
diff --git a/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts b/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
index 020c72dc1..aef640522 100644
--- a/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
+++ b/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
@@ -100,15 +100,11 @@ export function useTabbar() {
   watch(
     () => route.path,
     () => {
-      // 这里不能用route，用route时，vue-router会自动将父级meta进行合并
-      const routes = router.getRoutes();
-      const currentRoute = routes.find((item) => item.path === route.path);
-      if (currentRoute) {
-        tabbarStore.addTab({
-          ...route,
-          meta: currentRoute.meta,
-        } as unknown as RouteLocationNormalizedGeneric);
-      }
+      const meta = route.matched?.[route.matched.length - 1]?.meta;
+      tabbarStore.addTab({
+        ...route,
+        meta: meta || route.meta,
+      });
     },
     { immediate: true },
   );
diff --git a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
index 72af6f1a8..10cd96a8c 100644
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { RegisterEmits } from './typings';
-
 import { computed, reactive } from 'vue';
 
 import {
@@ -19,6 +17,14 @@ interface Props {
   text?: string;
 }
 
+interface LockAndRegisterParams {
+  lockScreenPassword: string;
+}
+
+interface RegisterEmits {
+  submit: [LockAndRegisterParams];
+}
+
 defineOptions({
   name: 'LockScreenModal',
 });
diff --git a/packages/effects/layouts/src/widgets/lock-screen/typings.ts b/packages/effects/layouts/src/widgets/lock-screen/typings.ts
deleted file mode 100644
index c06ea750c..000000000
--- a/packages/effects/layouts/src/widgets/lock-screen/typings.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-interface LockAndRegisterParams {
-  lockScreenPassword: string;
-}
-
-interface RegisterEmits {
-  submit: [LockAndRegisterParams];
-}
-
-export type { LockAndRegisterParams, RegisterEmits };
diff --git a/playground/.env b/playground/.env
new file mode 100644
index 000000000..87821d87c
--- /dev/null
+++ b/playground/.env
@@ -0,0 +1,5 @@
+# 应用标题
+VITE_APP_TITLE=Vben Admin
+
+# 应用命名空间，用于缓存、store等功能的前缀，确保隔离
+VITE_APP_NAMESPACE=vben-web-antd
diff --git a/playground/.env.analyze b/playground/.env.analyze
new file mode 100644
index 000000000..ffafa8dd5
--- /dev/null
+++ b/playground/.env.analyze
@@ -0,0 +1,7 @@
+# public path
+VITE_BASE=/
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/api
+
+VITE_VISUALIZER=true
diff --git a/playground/.env.development b/playground/.env.development
new file mode 100644
index 000000000..dcf361e73
--- /dev/null
+++ b/playground/.env.development
@@ -0,0 +1,16 @@
+# 端口号
+VITE_PORT=5555
+
+VITE_BASE=/
+
+# 接口地址
+VITE_GLOB_API_URL=/api
+
+# 是否开启 Nitro Mock服务，true 为开启，false 为关闭
+VITE_NITRO_MOCK=true
+
+# 是否打开 devtools，true 为打开，false 为关闭
+VITE_DEVTOOLS=false
+
+# 是否注入全局loading
+VITE_INJECT_APP_LOADING=true
diff --git a/playground/.env.production b/playground/.env.production
new file mode 100644
index 000000000..37947069f
--- /dev/null
+++ b/playground/.env.production
@@ -0,0 +1,16 @@
+VITE_BASE=/
+
+# 接口地址
+VITE_GLOB_API_URL=https://mock-napi.vben.pro/api
+
+# 是否开启压缩，可以设置为 none, brotli, gzip
+VITE_COMPRESS=none
+
+# 是否开启 PWA
+VITE_PWA=false
+
+# vue-router 的模式
+VITE_ROUTER_HISTORY=hash
+
+# 是否注入全局loading
+VITE_INJECT_APP_LOADING=true
diff --git a/playground/index.html b/playground/index.html
new file mode 100644
index 000000000..ca5326990
--- /dev/null
+++ b/playground/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="renderer" content="webkit" />
+    <meta name="description" content="A Modern Back-end Management System" />
+    <meta name="keywords" content="Vben Admin Vue3 Vite" />
+    <meta name="author" content="Vben" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
+    />
+    <!-- 由 vite 注入 VITE_APP_TITLE 变量，在 .env 文件内配置 -->
+    <title><%= VITE_APP_TITLE %></title>
+    <link rel="icon" href="/favicon.ico" />
+    <script>
+      // 生产环境下注入百度统计
+      if (window._VBEN_ADMIN_PRO_APP_CONF_) {
+        var _hmt = _hmt || [];
+        (function () {
+          var hm = document.createElement('script');
+          hm.src =
+            'https://hm.baidu.com/hm.js?d20a01273820422b6aa2ee41b6c9414d';
+          var s = document.getElementsByTagName('script')[0];
+          s.parentNode.insertBefore(hm, s);
+        })();
+      }
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground/package.json b/playground/package.json
new file mode 100644
index 000000000..03413e1d4
--- /dev/null
+++ b/playground/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@vben/playground",
+  "version": "5.0.1",
+  "homepage": "https://vben.pro",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "playground"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "vben",
+    "email": "ann.vben@gmail.com",
+    "url": "https://github.com/anncwb"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "pnpm vite build --mode production",
+    "build:analyze": "pnpm vite build --mode analyze",
+    "dev": "pnpm vite --mode development",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit --skipLibCheck"
+  },
+  "imports": {
+    "#/*": "./src/*"
+  },
+  "dependencies": {
+    "@vben/access": "workspace:*",
+    "@vben/chart-ui": "workspace:*",
+    "@vben/common-ui": "workspace:*",
+    "@vben/constants": "workspace:*",
+    "@vben/hooks": "workspace:*",
+    "@vben/icons": "workspace:*",
+    "@vben/layouts": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "@vben/preferences": "workspace:*",
+    "@vben/request": "workspace:*",
+    "@vben/stores": "workspace:*",
+    "@vben/styles": "workspace:*",
+    "@vben/types": "workspace:*",
+    "@vben/utils": "workspace:*",
+    "@vueuse/core": "^10.11.1",
+    "ant-design-vue": "^4.2.3",
+    "dayjs": "^1.11.12",
+    "pinia": "2.2.1",
+    "vue": "^3.4.37",
+    "vue-router": "^4.4.3"
+  }
+}
diff --git a/playground/postcss.config.mjs b/playground/postcss.config.mjs
new file mode 100644
index 000000000..3d8070455
--- /dev/null
+++ b/playground/postcss.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';
diff --git a/playground/public/favicon.ico b/playground/public/favicon.ico
new file mode 100644
index 000000000..fcf9818e2
Binary files /dev/null and b/playground/public/favicon.ico differ
diff --git a/playground/src/api/core/auth.ts b/playground/src/api/core/auth.ts
new file mode 100644
index 000000000..548e9dc9d
--- /dev/null
+++ b/playground/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 loginApi(data: AuthApi.LoginParams) {
+  return requestClient.post<AuthApi.LoginResult>('/auth/login', data);
+}
+
+/**
+ * 获取用户权限码
+ */
+export async function getAccessCodesApi() {
+  return requestClient.get<string[]>('/auth/codes');
+}
diff --git a/playground/src/api/core/index.ts b/playground/src/api/core/index.ts
new file mode 100644
index 000000000..28a5aef47
--- /dev/null
+++ b/playground/src/api/core/index.ts
@@ -0,0 +1,3 @@
+export * from './auth';
+export * from './menu';
+export * from './user';
diff --git a/playground/src/api/core/menu.ts b/playground/src/api/core/menu.ts
new file mode 100644
index 000000000..9ef60b11c
--- /dev/null
+++ b/playground/src/api/core/menu.ts
@@ -0,0 +1,10 @@
+import type { RouteRecordStringComponent } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 获取用户所有菜单
+ */
+export async function getAllMenusApi() {
+  return requestClient.get<RouteRecordStringComponent[]>('/menu/all');
+}
diff --git a/playground/src/api/core/user.ts b/playground/src/api/core/user.ts
new file mode 100644
index 000000000..7e28ea848
--- /dev/null
+++ b/playground/src/api/core/user.ts
@@ -0,0 +1,10 @@
+import type { UserInfo } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+/**
+ * 获取用户信息
+ */
+export async function getUserInfoApi() {
+  return requestClient.get<UserInfo>('/user/info');
+}
diff --git a/apps/web-antd/src/api/demos/index.ts b/playground/src/api/demos/index.ts
similarity index 100%
rename from apps/web-antd/src/api/demos/index.ts
rename to playground/src/api/demos/index.ts
diff --git a/apps/web-antd/src/api/demos/status.ts b/playground/src/api/demos/status.ts
similarity index 100%
rename from apps/web-antd/src/api/demos/status.ts
rename to playground/src/api/demos/status.ts
diff --git a/playground/src/api/index.ts b/playground/src/api/index.ts
new file mode 100644
index 000000000..2b42e898a
--- /dev/null
+++ b/playground/src/api/index.ts
@@ -0,0 +1,2 @@
+export * from './core';
+export * from './demos';
diff --git a/playground/src/api/request.ts b/playground/src/api/request.ts
new file mode 100644
index 000000000..19b0e250d
--- /dev/null
+++ b/playground/src/api/request.ts
@@ -0,0 +1,67 @@
+/**
+ * 该文件可自行根据业务逻辑进行调整
+ */
+import type { HttpResponse } from '@vben/request';
+
+import { useAppConfig } from '@vben/hooks';
+import { preferences } from '@vben/preferences';
+import { RequestClient } from '@vben/request';
+import { useAccessStore } from '@vben/stores';
+
+import { message } from 'ant-design-vue';
+
+import { useAuthStore } from '#/store';
+
+const { apiURL } = useAppConfig(import.meta.env, import.meta.env.PROD);
+
+function createRequestClient(baseURL: string) {
+  const client = new RequestClient({
+    baseURL,
+    // 为每个请求携带 Authorization
+    makeAuthorization: () => {
+      return {
+        // 默认
+        key: 'Authorization',
+        tokenHandler: () => {
+          const accessStore = useAccessStore();
+          return {
+            refreshToken: `${accessStore.refreshToken}`,
+            token: `${accessStore.accessToken}`,
+          };
+        },
+        unAuthorizedHandler: async () => {
+          const accessStore = useAccessStore();
+          const authStore = useAuthStore();
+          accessStore.setAccessToken(null);
+
+          if (preferences.app.loginExpiredMode === 'modal') {
+            accessStore.setLoginExpired(true);
+          } else {
+            // 退出登录
+            await authStore.logout();
+          }
+        },
+      };
+    },
+    makeErrorMessage: (msg) => message.error(msg),
+
+    makeRequestHeaders: () => {
+      return {
+        // 为每个请求携带 Accept-Language
+        'Accept-Language': preferences.app.locale,
+      };
+    },
+  });
+  client.addResponseInterceptor<HttpResponse>((response) => {
+    const { data: responseData, status } = response;
+
+    const { code, data, message: msg } = responseData;
+    if (status >= 200 && status < 400 && code === 0) {
+      return data;
+    }
+    throw new Error(`Error ${status}: ${msg}`);
+  });
+  return client;
+}
+
+export const requestClient = createRequestClient(apiURL);
diff --git a/playground/src/app.vue b/playground/src/app.vue
new file mode 100644
index 000000000..bbaccce13
--- /dev/null
+++ b/playground/src/app.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { useAntdDesignTokens } from '@vben/hooks';
+import { preferences, usePreferences } from '@vben/preferences';
+
+import { App, ConfigProvider, theme } from 'ant-design-vue';
+
+import { antdLocale } from '#/locales';
+
+defineOptions({ name: 'App' });
+
+const { isDark } = usePreferences();
+const { tokens } = useAntdDesignTokens();
+
+const tokenTheme = computed(() => {
+  const algorithm = isDark.value
+    ? [theme.darkAlgorithm]
+    : [theme.defaultAlgorithm];
+
+  // antd 紧凑模式算法
+  if (preferences.app.compact) {
+    algorithm.push(theme.compactAlgorithm);
+  }
+
+  return {
+    algorithm,
+    token: tokens,
+  };
+});
+</script>
+
+<template>
+  <ConfigProvider :locale="antdLocale" :theme="tokenTheme">
+    <App>
+      <RouterView />
+    </App>
+  </ConfigProvider>
+</template>
diff --git a/playground/src/bootstrap.ts b/playground/src/bootstrap.ts
new file mode 100644
index 000000000..1be9bbe00
--- /dev/null
+++ b/playground/src/bootstrap.ts
@@ -0,0 +1,31 @@
+import { createApp } from 'vue';
+
+import { registerAccessDirective } from '@vben/access';
+import { initStores } from '@vben/stores';
+import '@vben/styles';
+import '@vben/styles/antd';
+
+import { setupI18n } from '#/locales';
+
+import App from './app.vue';
+import { router } from './router';
+
+async function bootstrap(namespace: string) {
+  const app = createApp(App);
+
+  // 国际化 i18n 配置
+  await setupI18n(app);
+
+  // 配置 pinia-tore
+  await initStores(app, { namespace });
+
+  // 安装权限指令
+  registerAccessDirective(app);
+
+  // 配置路由及路由守卫
+  app.use(router);
+
+  app.mount('#app');
+}
+
+export { bootstrap };
diff --git a/playground/src/layouts/basic.vue b/playground/src/layouts/basic.vue
new file mode 100644
index 000000000..630d8bdd7
--- /dev/null
+++ b/playground/src/layouts/basic.vue
@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import type { NotificationItem } from '@vben/layouts';
+
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
+import { LOGIN_PATH, VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
+import { BookOpenText, CircleHelp, MdiGithub } from '@vben/icons';
+import {
+  BasicLayout,
+  LockScreen,
+  Notification,
+  UserDropdown,
+} from '@vben/layouts';
+import { preferences } from '@vben/preferences';
+import {
+  resetAllStores,
+  storeToRefs,
+  useAccessStore,
+  useUserStore,
+} from '@vben/stores';
+import { openWindow } from '@vben/utils';
+
+import { $t } from '#/locales';
+import { resetRoutes } from '#/router';
+import { useAuthStore } from '#/store';
+
+const notifications = ref<NotificationItem[]>([
+  {
+    avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
+    date: '3小时前',
+    isRead: true,
+    message: '描述信息描述信息描述信息',
+    title: '收到了 14 份新周报',
+  },
+  {
+    avatar: 'https://avatar.vercel.sh/1',
+    date: '刚刚',
+    isRead: false,
+    message: '描述信息描述信息描述信息',
+    title: '朱偏右 回复了你',
+  },
+  {
+    avatar: 'https://avatar.vercel.sh/1',
+    date: '2024-01-01',
+    isRead: false,
+    message: '描述信息描述信息描述信息',
+    title: '曲丽丽 评论了你',
+  },
+  {
+    avatar: 'https://avatar.vercel.sh/satori',
+    date: '1天前',
+    isRead: false,
+    message: '描述信息描述信息描述信息',
+    title: '代办提醒',
+  },
+]);
+
+const userStore = useUserStore();
+const authStore = useAuthStore();
+const accessStore = useAccessStore();
+const showDot = computed(() =>
+  notifications.value.some((item) => !item.isRead),
+);
+
+const menus = computed(() => [
+  {
+    handler: () => {
+      openWindow(VBEN_DOC_URL, {
+        target: '_blank',
+      });
+    },
+    icon: BookOpenText,
+    text: $t('widgets.document'),
+  },
+  {
+    handler: () => {
+      openWindow(VBEN_GITHUB_URL, {
+        target: '_blank',
+      });
+    },
+    icon: MdiGithub,
+    text: 'GitHub',
+  },
+  {
+    handler: () => {
+      openWindow(`${VBEN_GITHUB_URL}/issues`, {
+        target: '_blank',
+      });
+    },
+    icon: CircleHelp,
+    text: $t('widgets.qa'),
+  },
+]);
+
+const { loginLoading } = storeToRefs(authStore);
+
+const avatar = computed(() => {
+  return userStore.userInfo?.avatar ?? preferences.app.defaultAvatar;
+});
+
+const router = useRouter();
+
+async function handleLogout() {
+  resetAllStores();
+  resetRoutes();
+  await router.replace(LOGIN_PATH);
+}
+
+function handleNoticeClear() {
+  notifications.value = [];
+}
+
+function handleMakeAll() {
+  notifications.value.forEach((item) => (item.isRead = true));
+}
+</script>
+
+<template>
+  <BasicLayout @clear-preferences-and-logout="handleLogout">
+    <template #user-dropdown>
+      <UserDropdown
+        :avatar
+        :menus
+        :text="userStore.userInfo?.realName"
+        description="ann.vben@gmail.com"
+        tag-text="Pro"
+        @logout="handleLogout"
+      />
+    </template>
+    <template #notification>
+      <Notification
+        :dot="showDot"
+        :notifications="notifications"
+        @clear="handleNoticeClear"
+        @make-all="handleMakeAll"
+      />
+    </template>
+    <template #extra>
+      <AuthenticationLoginExpiredModal
+        v-model:open="accessStore.loginExpired"
+        :avatar
+        :loading="loginLoading"
+        password-placeholder="123456"
+        username-placeholder="vben"
+        @submit="authStore.authLogin"
+      />
+    </template>
+    <template #lock-screen>
+      <LockScreen :avatar @to-login="handleLogout" />
+    </template>
+  </BasicLayout>
+</template>
diff --git a/playground/src/layouts/index.ts b/playground/src/layouts/index.ts
new file mode 100644
index 000000000..23d79d6e4
--- /dev/null
+++ b/playground/src/layouts/index.ts
@@ -0,0 +1,8 @@
+const BasicLayout = () => import('./basic.vue');
+
+const IFrameView = () => import('@vben/layouts').then((m) => m.IFrameView);
+
+const AuthPageLayout = () =>
+  import('@vben/layouts').then((m) => m.AuthPageLayout);
+
+export { AuthPageLayout, BasicLayout, IFrameView };
diff --git a/playground/src/locales/README.md b/playground/src/locales/README.md
new file mode 100644
index 000000000..7b451032e
--- /dev/null
+++ b/playground/src/locales/README.md
@@ -0,0 +1,3 @@
+# locale
+
+每个app使用的国际化可能不同，这里用于扩展国际化的功能，例如扩展 dayjs、antd组件库的多语言切换，以及app本身的国际化文件。
diff --git a/playground/src/locales/index.ts b/playground/src/locales/index.ts
new file mode 100644
index 000000000..4ee7511b9
--- /dev/null
+++ b/playground/src/locales/index.ts
@@ -0,0 +1,94 @@
+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, 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';
+import dayjs from 'dayjs';
+
+const antdLocale = ref<Locale>(antdDefaultLocale);
+
+const modules = import.meta.glob('./langs/*.json');
+
+const localesMap = loadLocalesMap(modules);
+
+/**
+ * 加载应用特有的语言包
+ * 这里也可以改造为从服务端获取翻译数据
+ * @param lang
+ */
+async function loadMessages(lang: SupportedLanguagesType) {
+  const [appLocaleMessages] = await Promise.all([
+    localesMap[lang]?.(),
+    loadThirdPartyMessage(lang),
+  ]);
+  return appLocaleMessages?.default;
+}
+
+/**
+ * 加载第三方组件库的语言包
+ * @param lang
+ */
+async function loadThirdPartyMessage(lang: SupportedLanguagesType) {
+  await Promise.all([loadAntdLocale(lang), loadDayjsLocale(lang)]);
+}
+
+/**
+ * 加载dayjs的语言包
+ * @param lang
+ */
+async function loadDayjsLocale(lang: SupportedLanguagesType) {
+  let locale;
+  switch (lang) {
+    case 'zh-CN': {
+      locale = await import('dayjs/locale/zh-cn');
+      break;
+    }
+    case 'en-US': {
+      locale = await import('dayjs/locale/en');
+      break;
+    }
+    // 默认使用英语
+    default: {
+      locale = await import('dayjs/locale/en');
+    }
+  }
+  if (locale) {
+    dayjs.locale(locale);
+  } else {
+    console.error(`Failed to load dayjs locale for ${lang}`);
+  }
+}
+
+/**
+ * 加载antd的语言包
+ * @param lang
+ */
+async function loadAntdLocale(lang: SupportedLanguagesType) {
+  switch (lang) {
+    case 'zh-CN': {
+      antdLocale.value = antdDefaultLocale;
+      break;
+    }
+    case 'en-US': {
+      antdLocale.value = antdEnLocale;
+      break;
+    }
+  }
+}
+
+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 };
diff --git a/playground/src/locales/langs/en-US.json b/playground/src/locales/langs/en-US.json
new file mode 100644
index 000000000..13179fd2c
--- /dev/null
+++ b/playground/src/locales/langs/en-US.json
@@ -0,0 +1,67 @@
+{
+  "page": {
+    "demos": {
+      "title": "Demos",
+      "access": {
+        "frontendPermissions": "Frontend Permissions",
+        "backendPermissions": "Backend Permissions",
+        "pageAccess": "Page Access",
+        "buttonControl": "Button Control",
+        "menuVisible403": "Menu Visible(403)",
+        "superVisible": "Visible to Super",
+        "adminVisible": "Visible to Admin",
+        "userVisible": "Visible to User"
+      },
+      "nested": {
+        "title": "Nested Menu",
+        "menu1": "Menu 1",
+        "menu2": "Menu 2",
+        "menu2_1": "Menu 2-1",
+        "menu3": "Menu 3",
+        "menu3_1": "Menu 3-1",
+        "menu3_2": "Menu 3-2",
+        "menu3_2_1": "Menu 3-2-1"
+      },
+      "outside": {
+        "title": "External Pages",
+        "embedded": "Embedded",
+        "externalLink": "External Link"
+      },
+      "badge": {
+        "title": "Menu Badge",
+        "dot": "Dot Badge",
+        "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"
+      },
+      "breadcrumb": {
+        "navigation": "Breadcrumb Navigation",
+        "lateral": "Lateral Mode",
+        "lateralDetail": "Lateral Mode Detail",
+        "level": "Level Mode",
+        "levelDetail": "Level Mode Detail"
+      }
+    },
+    "examples": {
+      "title": "Examples",
+      "ellipsis": {
+        "title": "EllipsisText"
+      }
+    }
+  }
+}
diff --git a/playground/src/locales/langs/zh-CN.json b/playground/src/locales/langs/zh-CN.json
new file mode 100644
index 000000000..86fbcabcf
--- /dev/null
+++ b/playground/src/locales/langs/zh-CN.json
@@ -0,0 +1,67 @@
+{
+  "page": {
+    "demos": {
+      "title": "演示",
+      "access": {
+        "frontendPermissions": "前端权限",
+        "backendPermissions": "后端权限",
+        "pageAccess": "页面访问",
+        "buttonControl": "按钮控制",
+        "menuVisible403": "菜单可见(403)",
+        "superVisible": "Super 可见",
+        "adminVisible": "Admin 可见",
+        "userVisible": "User 可见"
+      },
+      "nested": {
+        "title": "嵌套菜单",
+        "menu1": "菜单 1",
+        "menu2": "菜单 2",
+        "menu2_1": "菜单 2-1",
+        "menu3": "菜单 3",
+        "menu3_1": "菜单 3-1",
+        "menu3_2": "菜单 3-2",
+        "menu3_2_1": "菜单 3-2-1"
+      },
+      "outside": {
+        "title": "外部页面",
+        "embedded": "内嵌",
+        "externalLink": "外链"
+      },
+      "badge": {
+        "title": "菜单徽标",
+        "dot": "点徽标",
+        "text": "文本徽标",
+        "color": "徽标颜色"
+      },
+      "activeIcon": {
+        "title": "菜单激活图标",
+        "children": "子级激活图标"
+      },
+      "fallback": {
+        "title": "缺省页"
+      },
+      "features": {
+        "title": "功能",
+        "hideChildrenInMenu": "隐藏子菜单",
+        "loginExpired": "登录过期",
+        "icons": "图标",
+        "watermark": "水印",
+        "tabs": "标签页",
+        "tabDetail": "标签详情页"
+      },
+      "breadcrumb": {
+        "navigation": "面包屑导航",
+        "lateral": "平级模式",
+        "level": "层级模式",
+        "levelDetail": "层级模式详情",
+        "lateralDetail": "平级模式详情"
+      }
+    },
+    "examples": {
+      "title": "示例",
+      "ellipsis": {
+        "title": "文本省略"
+      }
+    }
+  }
+}
diff --git a/playground/src/main.ts b/playground/src/main.ts
new file mode 100644
index 000000000..5d728a02a
--- /dev/null
+++ b/playground/src/main.ts
@@ -0,0 +1,31 @@
+import { initPreferences } from '@vben/preferences';
+import { unmountGlobalLoading } from '@vben/utils';
+
+import { overridesPreferences } from './preferences';
+
+/**
+ * 应用初始化完成之后再进行页面加载渲染
+ */
+async function initApplication() {
+  // name用于指定项目唯一标识
+  // 用于区分不同项目的偏好设置以及存储数据的key前缀以及其他一些需要隔离的数据
+  const env = import.meta.env.PROD ? 'prod' : 'dev';
+  const appVersion = import.meta.env.VITE_APP_VERSION;
+  const namespace = `${import.meta.env.VITE_APP_NAMESPACE}-${appVersion}-${env}`;
+
+  // app偏好设置初始化
+  await initPreferences({
+    namespace,
+    overrides: overridesPreferences,
+  });
+
+  // 启动应用并挂载
+  // vue应用主要逻辑及视图
+  const { bootstrap } = await import('./bootstrap');
+  await bootstrap(namespace);
+
+  // 移除并销毁loading
+  unmountGlobalLoading();
+}
+
+initApplication();
diff --git a/playground/src/preferences.ts b/playground/src/preferences.ts
new file mode 100644
index 000000000..63edb3a9b
--- /dev/null
+++ b/playground/src/preferences.ts
@@ -0,0 +1,12 @@
+import { defineOverridesPreferences } from '@vben/preferences';
+
+/**
+ * @description 项目配置文件
+ * 只需要覆盖项目中的一部分配置，不需要的配置不用覆盖，会自动使用默认配置
+ */
+export const overridesPreferences = defineOverridesPreferences({
+  // overrides
+  app: {
+    name: import.meta.env.VITE_APP_TITLE,
+  },
+});
diff --git a/playground/src/router/access.ts b/playground/src/router/access.ts
new file mode 100644
index 000000000..3a48be237
--- /dev/null
+++ b/playground/src/router/access.ts
@@ -0,0 +1,42 @@
+import type {
+  ComponentRecordType,
+  GenerateMenuAndRoutesOptions,
+} from '@vben/types';
+
+import { generateAccessible } from '@vben/access';
+import { preferences } from '@vben/preferences';
+
+import { message } from 'ant-design-vue';
+
+import { getAllMenusApi } from '#/api';
+import { BasicLayout, IFrameView } from '#/layouts';
+import { $t } from '#/locales';
+
+const forbiddenComponent = () => import('#/views/_core/fallback/forbidden.vue');
+
+async function generateAccess(options: GenerateMenuAndRoutesOptions) {
+  const pageMap: ComponentRecordType = import.meta.glob('../views/**/*.vue');
+
+  const layoutMap: ComponentRecordType = {
+    BasicLayout,
+    IFrameView,
+  };
+
+  return await generateAccessible(preferences.app.accessMode, {
+    ...options,
+    fetchMenuListAsync: async () => {
+      message.loading({
+        content: `${$t('common.loadingMenu')}...`,
+        duration: 1.5,
+      });
+      return await getAllMenusApi();
+    },
+    // 可以指定没有权限跳转403页面
+    forbiddenComponent,
+    // 如果 route.meta.menuVisibleWithForbidden = true
+    layoutMap,
+    pageMap,
+  });
+}
+
+export { generateAccess };
diff --git a/playground/src/router/guard.ts b/playground/src/router/guard.ts
new file mode 100644
index 000000000..f6b79f06c
--- /dev/null
+++ b/playground/src/router/guard.ts
@@ -0,0 +1,138 @@
+import type { Router } from 'vue-router';
+
+import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { preferences } from '@vben/preferences';
+import { useAccessStore, useUserStore } from '@vben/stores';
+import { startProgress, stopProgress } from '@vben/utils';
+
+import { useTitle } from '@vueuse/core';
+
+import { $t } from '#/locales';
+import { coreRouteNames, dynamicRoutes } from '#/router/routes';
+import { useAuthStore } from '#/store';
+
+import { generateAccess } from './access';
+
+/**
+ * 通用守卫配置
+ * @param router
+ */
+function setupCommonGuard(router: Router) {
+  // 记录已经加载的页面
+  const loadedPaths = new Set<string>();
+
+  router.beforeEach(async (to) => {
+    to.meta.loaded = loadedPaths.has(to.path);
+
+    // 页面加载进度条
+    if (!to.meta.loaded && preferences.transition.progress) {
+      startProgress();
+    }
+    return true;
+  });
+
+  router.afterEach((to) => {
+    // 记录页面是否加载,如果已经加载，后续的页面切换动画等效果不在重复执行
+
+    if (preferences.tabbar.enable) {
+      loadedPaths.add(to.path);
+    }
+
+    // 关闭页面加载进度条
+    if (preferences.transition.progress) {
+      stopProgress();
+    }
+
+    // 动态修改标题
+    if (preferences.app.dynamicTitle) {
+      const { title } = to.meta;
+      // useTitle(`${$t(title)} - ${preferences.app.name}`);
+      useTitle(`${$t(title)} - ${preferences.app.name}`);
+    }
+  });
+}
+
+/**
+ * 权限访问守卫配置
+ * @param router
+ */
+function setupAccessGuard(router: Router) {
+  router.beforeEach(async (to, from) => {
+    const accessStore = useAccessStore();
+    const userStore = useUserStore();
+    const authStore = useAuthStore();
+
+    // 基本路由，这些路由不需要进入权限拦截
+    if (coreRouteNames.includes(to.name as string)) {
+      if (to.path === LOGIN_PATH && accessStore.accessToken) {
+        return decodeURIComponent(
+          (to.query?.redirect as string) || DEFAULT_HOME_PATH,
+        );
+      }
+      return true;
+    }
+
+    // accessToken 检查
+    if (!accessStore.accessToken) {
+      // 明确声明忽略权限访问权限，则可以访问
+      if (to.meta.ignoreAccess) {
+        return true;
+      }
+
+      // 没有访问权限，跳转登录页面
+      if (to.fullPath !== LOGIN_PATH) {
+        return {
+          path: LOGIN_PATH,
+          // 如不需要，直接删除 query
+          query: { redirect: encodeURIComponent(to.fullPath) },
+          // 携带当前跳转的页面，登录后重新跳转该页面
+          replace: true,
+        };
+      }
+      return to;
+    }
+
+    const accessRoutes = accessStore.accessRoutes;
+
+    // 是否已经生成过动态路由
+    if (accessRoutes && accessRoutes.length > 0) {
+      return true;
+    }
+
+    // 生成路由表
+    // 当前登录用户拥有的角色标识列表
+    const userInfo = userStore.userInfo || (await authStore.fetchUserInfo());
+    const userRoles = userInfo.roles ?? [];
+
+    // 生成菜单和路由
+    const { accessibleMenus, accessibleRoutes } = await generateAccess({
+      roles: userRoles,
+      router,
+      // 则会在菜单中显示，但是访问会被重定向到403
+      routes: dynamicRoutes,
+    });
+
+    // 保存菜单信息和路由信息
+    accessStore.setAccessMenus(accessibleMenus);
+    accessStore.setAccessRoutes(accessibleRoutes);
+    const redirectPath = (from.query.redirect ?? to.fullPath) as string;
+
+    return {
+      ...router.resolve(decodeURIComponent(redirectPath)),
+      replace: true,
+    };
+  });
+}
+
+/**
+ * 项目守卫配置
+ * @param router
+ */
+function createRouterGuard(router: Router) {
+  /** 通用 */
+  setupCommonGuard(router);
+  /** 权限访问 */
+  setupAccessGuard(router);
+}
+
+export { createRouterGuard };
diff --git a/playground/src/router/index.ts b/playground/src/router/index.ts
new file mode 100644
index 000000000..313b372bd
--- /dev/null
+++ b/playground/src/router/index.ts
@@ -0,0 +1,32 @@
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router';
+
+import { resetStaticRoutes } from '@vben/utils';
+
+import { createRouterGuard } from './guard';
+import { routes } from './routes';
+
+/**
+ *  @zh_CN 创建vue-router实例
+ */
+const router = createRouter({
+  history:
+    import.meta.env.VITE_ROUTER_HISTORY === 'hash'
+      ? createWebHashHistory(import.meta.env.VITE_BASE)
+      : createWebHistory(import.meta.env.VITE_BASE),
+  // 应该添加到路由的初始路由列表。
+  routes,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
+  // 是否应该禁止尾部斜杠。
+  // strict: true,
+});
+
+const resetRoutes = () => resetStaticRoutes(router, routes);
+
+// 创建路由守卫
+createRouterGuard(router);
+
+export { resetRoutes, router };
diff --git a/playground/src/router/routes/core.ts b/playground/src/router/routes/core.ts
new file mode 100644
index 000000000..f793a57eb
--- /dev/null
+++ b/playground/src/router/routes/core.ts
@@ -0,0 +1,86 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { DEFAULT_HOME_PATH } from '@vben/constants';
+
+import { AuthPageLayout } from '#/layouts';
+import { $t } from '#/locales';
+import Login from '#/views/_core/authentication/login.vue';
+
+/** 全局404页面 */
+const fallbackNotFoundRoute: RouteRecordRaw = {
+  component: () => import('#/views/_core/fallback/not-found.vue'),
+  meta: {
+    hideInBreadcrumb: true,
+    hideInMenu: true,
+    hideInTab: true,
+    title: '404',
+  },
+  name: 'FallbackNotFound',
+  path: '/:path(.*)*',
+};
+
+/** 基本路由，这些路由是必须存在的 */
+const coreRoutes: RouteRecordRaw[] = [
+  {
+    meta: {
+      title: 'Root',
+    },
+    name: 'Root',
+    path: '/',
+    redirect: DEFAULT_HOME_PATH,
+  },
+  {
+    component: AuthPageLayout,
+    meta: {
+      title: 'Authentication',
+    },
+    name: 'Authentication',
+    path: '/auth',
+    children: [
+      {
+        name: 'Login',
+        path: 'login',
+        component: Login,
+        meta: {
+          title: $t('page.core.login'),
+        },
+      },
+      {
+        name: 'CodeLogin',
+        path: 'code-login',
+        component: () => import('#/views/_core/authentication/code-login.vue'),
+        meta: {
+          title: $t('page.core.codeLogin'),
+        },
+      },
+      {
+        name: 'QrCodeLogin',
+        path: 'qrcode-login',
+        component: () =>
+          import('#/views/_core/authentication/qrcode-login.vue'),
+        meta: {
+          title: $t('page.core.qrcodeLogin'),
+        },
+      },
+      {
+        name: 'ForgetPassword',
+        path: 'forget-password',
+        component: () =>
+          import('#/views/_core/authentication/forget-password.vue'),
+        meta: {
+          title: $t('page.core.forgetPassword'),
+        },
+      },
+      {
+        name: 'Register',
+        path: 'register',
+        component: () => import('#/views/_core/authentication/register.vue'),
+        meta: {
+          title: $t('page.core.register'),
+        },
+      },
+    ],
+  },
+];
+
+export { coreRoutes, fallbackNotFoundRoute };
diff --git a/playground/src/router/routes/index.ts b/playground/src/router/routes/index.ts
new file mode 100644
index 000000000..78da5436c
--- /dev/null
+++ b/playground/src/router/routes/index.ts
@@ -0,0 +1,31 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { mergeRouteModules, traverseTreeValues } from '@vben/utils';
+
+import { coreRoutes, fallbackNotFoundRoute } from './core';
+
+const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
+  eager: true,
+});
+
+// 有需要可以自行打开注释，并创建文件夹
+// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+
+/** 动态路由 */
+const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
+
+/** 静态路由列表，访问这些页面可以不需要权限 */
+// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
+const staticRoutes: RouteRecordRaw[] = [];
+
+/** 路由列表，由基本路由+静态路由组成 */
+const routes: RouteRecordRaw[] = [
+  ...coreRoutes,
+  ...staticRoutes,
+  fallbackNotFoundRoute,
+];
+
+/** 基本路由列表，这些路由不需要进入权限拦截 */
+const coreRouteNames = traverseTreeValues(coreRoutes, (route) => route.name);
+
+export { coreRouteNames, dynamicRoutes, routes };
diff --git a/playground/src/router/routes/modules/dashboard.ts b/playground/src/router/routes/modules/dashboard.ts
new file mode 100644
index 000000000..a8cdb05da
--- /dev/null
+++ b/playground/src/router/routes/modules/dashboard.ts
@@ -0,0 +1,39 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { BasicLayout } from '#/layouts';
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    component: BasicLayout,
+    meta: {
+      icon: 'lucide:layout-dashboard',
+      order: -1,
+      title: $t('page.dashboard.title'),
+    },
+    name: 'Dashboard',
+    path: '/',
+    children: [
+      {
+        name: 'Analytics',
+        path: '/analytics',
+        component: () => import('#/views/dashboard/analytics/index.vue'),
+        meta: {
+          affixTab: true,
+          icon: 'lucide:area-chart',
+          title: $t('page.dashboard.analytics'),
+        },
+      },
+      {
+        name: 'Workspace',
+        path: '/workspace',
+        component: () => import('#/views/dashboard/workspace/index.vue'),
+        meta: {
+          title: $t('page.dashboard.workspace'),
+        },
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/playground/src/router/routes/modules/demos.ts b/playground/src/router/routes/modules/demos.ts
new file mode 100644
index 000000000..ad88a5486
--- /dev/null
+++ b/playground/src/router/routes/modules/demos.ts
@@ -0,0 +1,494 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { BasicLayout, IFrameView } from '#/layouts';
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    component: BasicLayout,
+    meta: {
+      icon: 'ic:baseline-view-in-ar',
+      keepAlive: true,
+      order: 1000,
+      title: $t('page.demos.title'),
+    },
+    name: 'Demos',
+    path: '/demos',
+    children: [
+      // 权限控制
+      {
+        meta: {
+          icon: 'mdi:shield-key-outline',
+          title: $t('page.demos.access.frontendPermissions'),
+        },
+        name: 'AccessDemos',
+        path: '/demos/access',
+        children: [
+          {
+            name: 'AccessPageControlDemo',
+            path: '/demos/access/page-control',
+            component: () => import('#/views/demos/access/index.vue'),
+            meta: {
+              icon: 'mdi:page-previous-outline',
+              title: $t('page.demos.access.pageAccess'),
+            },
+          },
+          {
+            name: 'AccessButtonControlDemo',
+            path: '/demos/access/button-control',
+            component: () => import('#/views/demos/access/button-control.vue'),
+            meta: {
+              icon: 'mdi:button-cursor',
+              title: $t('page.demos.access.buttonControl'),
+            },
+          },
+          {
+            name: 'AccessMenuVisible403Demo',
+            path: '/demos/access/menu-visible-403',
+            component: () =>
+              import('#/views/demos/access/menu-visible-403.vue'),
+            meta: {
+              authority: ['no-body'],
+              icon: 'mdi:button-cursor',
+              menuVisibleWithForbidden: true,
+              title: $t('page.demos.access.menuVisible403'),
+            },
+          },
+          {
+            name: 'AccessSuperVisibleDemo',
+            path: '/demos/access/super-visible',
+            component: () => import('#/views/demos/access/super-visible.vue'),
+            meta: {
+              authority: ['super'],
+              icon: 'mdi:button-cursor',
+              title: $t('page.demos.access.superVisible'),
+            },
+          },
+          {
+            name: 'AccessAdminVisibleDemo',
+            path: '/demos/access/admin-visible',
+            component: () => import('#/views/demos/access/admin-visible.vue'),
+            meta: {
+              authority: ['admin'],
+              icon: 'mdi:button-cursor',
+              title: $t('page.demos.access.adminVisible'),
+            },
+          },
+          {
+            name: 'AccessUserVisibleDemo',
+            path: '/demos/access/user-visible',
+            component: () => import('#/views/demos/access/user-visible.vue'),
+            meta: {
+              authority: ['user'],
+              icon: 'mdi:button-cursor',
+              title: $t('page.demos.access.userVisible'),
+            },
+          },
+        ],
+      },
+      // 功能
+      {
+        meta: {
+          icon: 'mdi:feature-highlight',
+          title: $t('page.demos.features.title'),
+        },
+        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: '/demos/features/tabs',
+            component: () => import('#/views/demos/features/tabs/index.vue'),
+            meta: {
+              icon: 'lucide:app-window',
+              title: $t('page.demos.features.tabs'),
+            },
+          },
+          {
+            name: 'FeatureTabDetailDemo',
+            path: '/demos/features/tabs/detail/:id',
+            component: () =>
+              import('#/views/demos/features/tabs/tab-detail.vue'),
+            meta: {
+              activePath: '/demos/features/tabs',
+              hideInMenu: true,
+              maxNumOfOpenTab: 3,
+              title: $t('page.demos.features.tabDetail'),
+            },
+          },
+          {
+            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: $t('page.demos.features.hideChildrenInMenu'),
+            },
+            children: [
+              {
+                name: 'HideChildrenInMenuChildrenDemo',
+                path: '/demos/features/hide-menu-children/children',
+                component: () =>
+                  import(
+                    '#/views/demos/features/hide-menu-children/children.vue'
+                  ),
+                meta: { title: 'HideChildrenInMenuChildrenDemo' },
+              },
+            ],
+          },
+        ],
+      },
+      // 面包屑导航
+      {
+        name: 'BreadcrumbDemos',
+        path: '/demos/breadcrumb',
+        meta: {
+          icon: 'lucide:navigation',
+          title: $t('page.demos.breadcrumb.navigation'),
+        },
+        children: [
+          {
+            name: 'BreadcrumbLateralDemo',
+            path: '/demos/breadcrumb/lateral',
+            component: () => import('#/views/demos/breadcrumb/lateral.vue'),
+            meta: {
+              icon: 'lucide:navigation',
+              title: $t('page.demos.breadcrumb.lateral'),
+            },
+          },
+          {
+            name: 'BreadcrumbLateralDetailDemo',
+            path: '/demos/breadcrumb/lateral-detail',
+            component: () =>
+              import('#/views/demos/breadcrumb/lateral-detail.vue'),
+            meta: {
+              activePath: '/demos/breadcrumb/lateral',
+              hideInMenu: true,
+              title: $t('page.demos.breadcrumb.lateralDetail'),
+            },
+          },
+          {
+            name: 'BreadcrumbLevelDemo',
+            path: '/demos/breadcrumb/level',
+            meta: {
+              icon: 'lucide:navigation',
+              title: $t('page.demos.breadcrumb.level'),
+            },
+            children: [
+              {
+                name: 'BreadcrumbLevelDetailDemo',
+                path: '/demos/breadcrumb/level/detail',
+                component: () =>
+                  import('#/views/demos/breadcrumb/level-detail.vue'),
+                meta: {
+                  title: $t('page.demos.breadcrumb.levelDetail'),
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // 缺省页
+      {
+        meta: {
+          icon: 'mdi:lightbulb-error-outline',
+          title: $t('page.demos.fallback.title'),
+        },
+        name: 'FallbackDemos',
+        path: '/demos/fallback',
+        children: [
+          {
+            name: 'Fallback403Demo',
+            path: '/demos/fallback/403',
+            component: () => import('#/views/_core/fallback/forbidden.vue'),
+            meta: {
+              icon: 'mdi:do-not-disturb-alt',
+              title: '403',
+            },
+          },
+          {
+            name: 'Fallback404Demo',
+            path: '/demos/fallback/404',
+            component: () => import('#/views/_core/fallback/not-found.vue'),
+            meta: {
+              icon: 'mdi:table-off',
+              title: '404',
+            },
+          },
+          {
+            name: 'Fallback500Demo',
+            path: '/demos/fallback/500',
+            component: () =>
+              import('#/views/_core/fallback/internal-error.vue'),
+            meta: {
+              icon: 'mdi:server-network-off',
+              title: '500',
+            },
+          },
+          {
+            name: 'FallbackOfflineDemo',
+            path: '/demos/fallback/offline',
+            component: () => import('#/views/_core/fallback/offline.vue'),
+            meta: {
+              icon: 'mdi:offline',
+              title: $t('fallback.offline'),
+            },
+          },
+        ],
+      },
+      // 菜单徽标
+      {
+        meta: {
+          badgeType: 'dot',
+          badgeVariants: 'destructive',
+          icon: 'lucide:circle-dot',
+          title: $t('page.demos.badge.title'),
+        },
+        name: 'BadgeDemos',
+        path: '/demos/badge',
+        children: [
+          {
+            name: 'BadgeDotDemo',
+            component: () => import('#/views/demos/badge/index.vue'),
+            path: '/demos/badge/dot',
+            meta: {
+              badgeType: 'dot',
+              icon: 'lucide:square-dot',
+              title: $t('page.demos.badge.dot'),
+            },
+          },
+          {
+            name: 'BadgeTextDemo',
+            component: () => import('#/views/demos/badge/index.vue'),
+            path: '/demos/badge/text',
+            meta: {
+              badge: '10',
+              icon: 'lucide:square-dot',
+              title: $t('page.demos.badge.text'),
+            },
+          },
+          {
+            name: 'BadgeColorDemo',
+            component: () => import('#/views/demos/badge/index.vue'),
+            path: '/demos/badge/color',
+            meta: {
+              badge: 'Hot',
+              badgeVariants: 'destructive',
+              icon: 'lucide:square-dot',
+              title: $t('page.demos.badge.color'),
+            },
+          },
+        ],
+      },
+      // 菜单激活图标
+      {
+        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: 'OutsideDemos',
+        path: '/demos/outside',
+        children: [
+          {
+            name: 'IframeDemos',
+            path: '/demos/outside/iframe',
+            meta: {
+              icon: 'mdi:newspaper-variant-outline',
+              title: $t('page.demos.outside.embedded'),
+            },
+            children: [
+              {
+                name: 'VueDocumentDemo',
+                path: '/demos/outside/iframe/vue-document',
+                component: IFrameView,
+                meta: {
+                  icon: 'logos:vue',
+                  iframeSrc: 'https://cn.vuejs.org/',
+                  keepAlive: true,
+                  title: 'Vue',
+                },
+              },
+              {
+                name: 'TailwindcssDemo',
+                path: '/demos/outside/iframe/tailwindcss',
+                component: IFrameView,
+                meta: {
+                  icon: 'devicon:tailwindcss',
+                  iframeSrc: 'https://tailwindcss.com/',
+                  // keepAlive: true,
+                  title: 'Tailwindcss',
+                },
+              },
+            ],
+          },
+          {
+            name: 'ExternalLinkDemos',
+            path: '/demos/outside/external-link',
+            meta: {
+              icon: 'mdi:newspaper-variant-multiple-outline',
+              title: $t('page.demos.outside.externalLink'),
+            },
+            children: [
+              {
+                name: 'ViteDemo',
+                path: '/demos/outside/external-link/vite',
+                component: IFrameView,
+                meta: {
+                  icon: 'logos:vitejs',
+                  link: 'https://vitejs.dev/',
+                  title: 'Vite',
+                },
+              },
+              {
+                name: 'VueUseDemo',
+                path: '/demos/outside/external-link/vue-use',
+                component: IFrameView,
+                meta: {
+                  icon: 'logos:vueuse',
+                  link: 'https://vueuse.org',
+                  title: 'VueUse',
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // 嵌套菜单
+      {
+        meta: {
+          icon: 'ic:round-menu',
+          title: $t('page.demos.nested.title'),
+        },
+        name: 'NestedDemos',
+        path: '/demos/nested',
+        children: [
+          {
+            name: 'Menu1Demo',
+            path: '/demos/nested/menu1',
+            component: () => import('#/views/demos/nested/menu-1.vue'),
+            meta: {
+              icon: 'ic:round-menu',
+              keepAlive: true,
+              title: $t('page.demos.nested.menu1'),
+            },
+          },
+          {
+            name: 'Menu2Demo',
+            path: '/demos/nested/menu2',
+            meta: {
+              icon: 'ic:round-menu',
+              keepAlive: true,
+              title: $t('page.demos.nested.menu2'),
+            },
+            children: [
+              {
+                name: 'Menu21Demo',
+                path: '/demos/nested/menu2/menu2-1',
+                component: () => import('#/views/demos/nested/menu-2-1.vue'),
+                meta: {
+                  icon: 'ic:round-menu',
+                  keepAlive: true,
+                  title: $t('page.demos.nested.menu2_1'),
+                },
+              },
+            ],
+          },
+          {
+            name: 'Menu3Demo',
+            path: '/demos/nested/menu3',
+            meta: {
+              icon: 'ic:round-menu',
+              title: $t('page.demos.nested.menu3'),
+            },
+            children: [
+              {
+                name: 'Menu31Demo',
+                path: 'menu3-1',
+                component: () => import('#/views/demos/nested/menu-3-1.vue'),
+                meta: {
+                  icon: 'ic:round-menu',
+                  keepAlive: true,
+                  title: $t('page.demos.nested.menu3_1'),
+                },
+              },
+              {
+                name: 'Menu32Demo',
+                path: 'menu3-2',
+                meta: {
+                  icon: 'ic:round-menu',
+                  title: $t('page.demos.nested.menu3_2'),
+                },
+                children: [
+                  {
+                    name: 'Menu321Demo',
+                    path: '/demos/nested/menu3/menu3-2/menu3-2-1',
+                    component: () =>
+                      import('#/views/demos/nested/menu-3-2-1.vue'),
+                    meta: {
+                      icon: 'ic:round-menu',
+                      keepAlive: true,
+                      title: $t('page.demos.nested.menu3_2_1'),
+                    },
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/web-antd/src/router/routes/modules/examples.ts b/playground/src/router/routes/modules/examples.ts
similarity index 100%
rename from apps/web-antd/src/router/routes/modules/examples.ts
rename to playground/src/router/routes/modules/examples.ts
diff --git a/playground/src/router/routes/modules/vben.ts b/playground/src/router/routes/modules/vben.ts
new file mode 100644
index 000000000..4dd75629a
--- /dev/null
+++ b/playground/src/router/routes/modules/vben.ts
@@ -0,0 +1,90 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import {
+  VBEN_ANT_PREVIEW_URL,
+  VBEN_DOC_URL,
+  VBEN_ELE_PREVIEW_URL,
+  VBEN_GITHUB_URL,
+  VBEN_LOGO_URL,
+  VBEN_NAIVE_PREVIEW_URL,
+} from '@vben/constants';
+
+import { BasicLayout, IFrameView } from '#/layouts';
+import { $t } from '#/locales';
+
+const routes: RouteRecordRaw[] = [
+  {
+    component: BasicLayout,
+    meta: {
+      badgeType: 'dot',
+      icon: VBEN_LOGO_URL,
+      order: 9999,
+      title: $t('page.vben.title'),
+    },
+    name: 'VbenProject',
+    path: '/vben-admin',
+    children: [
+      {
+        name: 'VbenAbout',
+        path: '/vben-admin/about',
+        component: () => import('#/views/_core/vben/about/index.vue'),
+        meta: {
+          icon: 'lucide:copyright',
+          title: $t('page.vben.about'),
+        },
+      },
+      {
+        name: 'VbenDocument',
+        path: '/vben-admin/document',
+        component: IFrameView,
+        meta: {
+          icon: 'lucide:book-open-text',
+          link: VBEN_DOC_URL,
+          title: $t('page.vben.document'),
+        },
+      },
+      {
+        name: 'VbenGithub',
+        path: '/vben-admin/github',
+        component: IFrameView,
+        meta: {
+          icon: 'mdi:github',
+          link: VBEN_GITHUB_URL,
+          title: 'Github',
+        },
+      },
+      {
+        name: 'VbenAntdv',
+        path: '/vben-admin/antdv',
+        component: IFrameView,
+        meta: {
+          badgeType: 'dot',
+          link: VBEN_ANT_PREVIEW_URL,
+          title: $t('page.vben.antdv'),
+        },
+      },
+      {
+        name: 'VbenNaive',
+        path: '/vben-admin/naive',
+        component: IFrameView,
+        meta: {
+          badgeType: 'dot',
+          link: VBEN_NAIVE_PREVIEW_URL,
+          title: $t('page.vben.naive-ui'),
+        },
+      },
+      {
+        name: 'VbenElementPlus',
+        path: '/vben-admin/ele',
+        component: IFrameView,
+        meta: {
+          badgeType: 'dot',
+          link: VBEN_ELE_PREVIEW_URL,
+          title: $t('page.vben.element-plus'),
+        },
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/playground/src/store/auth.ts b/playground/src/store/auth.ts
new file mode 100644
index 000000000..59a640ca4
--- /dev/null
+++ b/playground/src/store/auth.ts
@@ -0,0 +1,111 @@
+import type { LoginAndRegisterParams } from '@vben/common-ui';
+import type { UserInfo } from '@vben/types';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
+import { resetAllStores, useAccessStore, useUserStore } from '@vben/stores';
+
+import { notification } from 'ant-design-vue';
+import { defineStore } from 'pinia';
+
+import { getAccessCodesApi, getUserInfoApi, loginApi } from '#/api';
+import { $t } from '#/locales';
+
+export const useAuthStore = defineStore('auth', () => {
+  const accessStore = useAccessStore();
+  const userStore = useUserStore();
+  const router = useRouter();
+
+  const loginLoading = ref(false);
+
+  /**
+   * 异步处理登录操作
+   * Asynchronously handle the login process
+   * @param params 登录表单数据
+   */
+  async function authLogin(
+    params: LoginAndRegisterParams,
+    onSuccess?: () => Promise<void> | void,
+  ) {
+    // 异步处理用户登录操作并获取 accessToken
+    let userInfo: null | UserInfo = null;
+    try {
+      loginLoading.value = true;
+      const { accessToken, refreshToken } = await loginApi(params);
+
+      // 如果成功获取到 accessToken
+      if (accessToken) {
+        // 将 accessToken 存储到 accessStore 中
+        accessStore.setAccessToken(accessToken);
+        accessStore.setRefreshToken(refreshToken);
+
+        // 获取用户信息并存储到 accessStore 中
+        const [fetchUserInfoResult, accessCodes] = await Promise.all([
+          fetchUserInfo(),
+          getAccessCodesApi(),
+        ]);
+
+        userInfo = fetchUserInfoResult;
+
+        userStore.setUserInfo(userInfo);
+        accessStore.setAccessCodes(accessCodes);
+
+        if (accessStore.loginExpired) {
+          accessStore.setLoginExpired(false);
+        } else {
+          onSuccess
+            ? await onSuccess?.()
+            : await router.push(userInfo.homePath || DEFAULT_HOME_PATH);
+        }
+
+        if (userInfo?.realName) {
+          notification.success({
+            description: `${$t('authentication.loginSuccessDesc')}:${userInfo?.realName}`,
+            duration: 3,
+            message: $t('authentication.loginSuccess'),
+          });
+        }
+      }
+    } finally {
+      loginLoading.value = false;
+    }
+
+    return {
+      userInfo,
+    };
+  }
+
+  async function logout() {
+    resetAllStores();
+    accessStore.setLoginExpired(false);
+
+    // 回登陆页带上当前路由地址
+    await router.replace({
+      path: LOGIN_PATH,
+      query: {
+        redirect: encodeURIComponent(router.currentRoute.value.fullPath),
+      },
+    });
+  }
+
+  async function fetchUserInfo() {
+    let userInfo: null | UserInfo = null;
+    userInfo = await getUserInfoApi();
+    userStore.setUserInfo(userInfo);
+    return userInfo;
+  }
+
+  function $reset() {
+    loginLoading.value = false;
+  }
+
+  return {
+    $reset,
+    authLogin,
+    fetchUserInfo,
+    loginLoading,
+    logout,
+  };
+});
diff --git a/playground/src/store/index.ts b/playground/src/store/index.ts
new file mode 100644
index 000000000..269586ee8
--- /dev/null
+++ b/playground/src/store/index.ts
@@ -0,0 +1 @@
+export * from './auth';
diff --git a/playground/src/views/_core/README.md b/playground/src/views/_core/README.md
new file mode 100644
index 000000000..8248afe6c
--- /dev/null
+++ b/playground/src/views/_core/README.md
@@ -0,0 +1,3 @@
+# \_core
+
+此目录包含应用程序正常运行所需的基本视图。这些视图是应用程序布局中使用的视图。
diff --git a/playground/src/views/_core/authentication/code-login.vue b/playground/src/views/_core/authentication/code-login.vue
new file mode 100644
index 000000000..36cf50ec0
--- /dev/null
+++ b/playground/src/views/_core/authentication/code-login.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { LoginCodeParams } from '@vben/common-ui';
+
+import { ref } from 'vue';
+
+import { AuthenticationCodeLogin } from '@vben/common-ui';
+import { LOGIN_PATH } from '@vben/constants';
+
+defineOptions({ name: 'CodeLogin' });
+
+const loading = ref(false);
+
+/**
+ * 异步处理登录操作
+ * Asynchronously handle the login process
+ * @param values 登录表单数据
+ */
+async function handleLogin(values: LoginCodeParams) {
+  // eslint-disable-next-line no-console
+  console.log(values);
+}
+</script>
+
+<template>
+  <AuthenticationCodeLogin
+    :loading="loading"
+    :login-path="LOGIN_PATH"
+    @submit="handleLogin"
+  />
+</template>
diff --git a/playground/src/views/_core/authentication/forget-password.vue b/playground/src/views/_core/authentication/forget-password.vue
new file mode 100644
index 000000000..74ccc27ed
--- /dev/null
+++ b/playground/src/views/_core/authentication/forget-password.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { AuthenticationForgetPassword } from '@vben/common-ui';
+import { LOGIN_PATH } from '@vben/constants';
+
+defineOptions({ name: 'ForgetPassword' });
+
+const loading = ref(false);
+
+function handleSubmit(value: string) {
+  // eslint-disable-next-line no-console
+  console.log('reset email:', value);
+}
+</script>
+
+<template>
+  <AuthenticationForgetPassword
+    :loading="loading"
+    :login-path="LOGIN_PATH"
+    @submit="handleSubmit"
+  />
+</template>
diff --git a/playground/src/views/_core/authentication/login.vue b/playground/src/views/_core/authentication/login.vue
new file mode 100644
index 000000000..3bcdd9500
--- /dev/null
+++ b/playground/src/views/_core/authentication/login.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { AuthenticationLogin } from '@vben/common-ui';
+
+import { useAuthStore } from '#/store';
+
+defineOptions({ name: 'Login' });
+
+const authStore = useAuthStore();
+</script>
+
+<template>
+  <AuthenticationLogin
+    :loading="authStore.loginLoading"
+    password-placeholder="123456"
+    username-placeholder="vben"
+    @submit="authStore.authLogin"
+  />
+</template>
diff --git a/playground/src/views/_core/authentication/qrcode-login.vue b/playground/src/views/_core/authentication/qrcode-login.vue
new file mode 100644
index 000000000..23f5f2dad
--- /dev/null
+++ b/playground/src/views/_core/authentication/qrcode-login.vue
@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { AuthenticationQrCodeLogin } from '@vben/common-ui';
+import { LOGIN_PATH } from '@vben/constants';
+
+defineOptions({ name: 'QrCodeLogin' });
+</script>
+
+<template>
+  <AuthenticationQrCodeLogin :login-path="LOGIN_PATH" />
+</template>
diff --git a/playground/src/views/_core/authentication/register.vue b/playground/src/views/_core/authentication/register.vue
new file mode 100644
index 000000000..f6b227d96
--- /dev/null
+++ b/playground/src/views/_core/authentication/register.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { LoginAndRegisterParams } from '@vben/common-ui';
+
+import { ref } from 'vue';
+
+import { AuthenticationRegister } from '@vben/common-ui';
+import { LOGIN_PATH } from '@vben/constants';
+
+defineOptions({ name: 'Register' });
+
+const loading = ref(false);
+
+function handleSubmit(value: LoginAndRegisterParams) {
+  // eslint-disable-next-line no-console
+  console.log('register submit:', value);
+}
+</script>
+
+<template>
+  <AuthenticationRegister
+    :loading="loading"
+    :login-path="LOGIN_PATH"
+    @submit="handleSubmit"
+  />
+</template>
diff --git a/apps/web-antd/src/views/demos/nested/menu-1.vue b/playground/src/views/_core/fallback/coming-soon.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/nested/menu-1.vue
rename to playground/src/views/_core/fallback/coming-soon.vue
diff --git a/playground/src/views/_core/fallback/forbidden.vue b/playground/src/views/_core/fallback/forbidden.vue
new file mode 100644
index 000000000..8ea65fedb
--- /dev/null
+++ b/playground/src/views/_core/fallback/forbidden.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'Fallback403Demo' });
+</script>
+
+<template>
+  <Fallback status="403" />
+</template>
diff --git a/playground/src/views/_core/fallback/internal-error.vue b/playground/src/views/_core/fallback/internal-error.vue
new file mode 100644
index 000000000..819a47d5e
--- /dev/null
+++ b/playground/src/views/_core/fallback/internal-error.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'Fallback500Demo' });
+</script>
+
+<template>
+  <Fallback status="500" />
+</template>
diff --git a/playground/src/views/_core/fallback/not-found.vue b/playground/src/views/_core/fallback/not-found.vue
new file mode 100644
index 000000000..4d178e9cb
--- /dev/null
+++ b/playground/src/views/_core/fallback/not-found.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'Fallback404Demo' });
+</script>
+
+<template>
+  <Fallback status="404" />
+</template>
diff --git a/playground/src/views/_core/fallback/offline.vue b/playground/src/views/_core/fallback/offline.vue
new file mode 100644
index 000000000..5de4a88de
--- /dev/null
+++ b/playground/src/views/_core/fallback/offline.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+
+defineOptions({ name: 'FallbackOfflineDemo' });
+</script>
+
+<template>
+  <Fallback status="offline" />
+</template>
diff --git a/playground/src/views/_core/vben/about/index.vue b/playground/src/views/_core/vben/about/index.vue
new file mode 100644
index 000000000..0ee524335
--- /dev/null
+++ b/playground/src/views/_core/vben/about/index.vue
@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+import { About } from '@vben/common-ui';
+
+defineOptions({ name: 'About' });
+</script>
+
+<template>
+  <About />
+</template>
diff --git a/playground/src/views/dashboard/analytics/analytics-trends.vue b/playground/src/views/dashboard/analytics/analytics-trends.vue
new file mode 100644
index 000000000..261c847ce
--- /dev/null
+++ b/playground/src/views/dashboard/analytics/analytics-trends.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    grid: {
+      bottom: 0,
+      containLabel: true,
+      left: '1%',
+      right: '1%',
+      top: '2 %',
+    },
+    series: [
+      {
+        areaStyle: {},
+        data: [
+          111, 2000, 6000, 16_000, 33_333, 55_555, 64_000, 33_333, 18_000,
+          36_000, 70_000, 42_444, 23_222, 13_000, 8000, 4000, 1200, 333, 222,
+          111,
+        ],
+        itemStyle: {
+          color: '#5ab1ef',
+        },
+        smooth: true,
+        type: 'line',
+      },
+      {
+        areaStyle: {},
+        data: [
+          33, 66, 88, 333, 3333, 6200, 20_000, 3000, 1200, 13_000, 22_000,
+          11_000, 2221, 1201, 390, 198, 60, 30, 22, 11,
+        ],
+        itemStyle: {
+          color: '#019680',
+        },
+        smooth: true,
+        type: 'line',
+      },
+    ],
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          color: '#019680',
+          width: 1,
+        },
+      },
+      trigger: 'axis',
+    },
+    xAxis: {
+      axisTick: {
+        show: false,
+      },
+      boundaryGap: false,
+      data: Array.from({ length: 18 }).map((_item, index) => `${index + 6}:00`),
+      type: 'category',
+    },
+    yAxis: [
+      {
+        axisTick: {
+          show: false,
+        },
+        max: 80_000,
+
+        type: 'value',
+      },
+    ],
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/playground/src/views/dashboard/analytics/analytics-visits-data.vue b/playground/src/views/dashboard/analytics/analytics-visits-data.vue
new file mode 100644
index 000000000..f03907d02
--- /dev/null
+++ b/playground/src/views/dashboard/analytics/analytics-visits-data.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    legend: {
+      bottom: 0,
+      data: ['访问', '趋势'],
+    },
+    radar: {
+      indicator: [
+        {
+          name: '网页',
+        },
+        {
+          name: '移动端',
+        },
+        {
+          name: 'Ipad',
+        },
+        {
+          name: '客户端',
+        },
+        {
+          name: '第三方',
+        },
+        {
+          name: '其它',
+        },
+      ],
+      radius: '60%',
+      splitNumber: 8,
+    },
+    series: [
+      {
+        areaStyle: {
+          opacity: 1,
+          shadowBlur: 0,
+          shadowColor: 'rgba(0,0,0,.2)',
+          shadowOffsetX: 0,
+          shadowOffsetY: 10,
+        },
+        data: [
+          {
+            itemStyle: {
+              color: '#b6a2de',
+            },
+            name: '访问',
+            value: [90, 50, 86, 40, 50, 20],
+          },
+          {
+            itemStyle: {
+              color: '#5ab1ef',
+            },
+            name: '趋势',
+            value: [70, 75, 70, 76, 20, 85],
+          },
+        ],
+        itemStyle: {
+          // borderColor: '#fff',
+          borderRadius: 10,
+          borderWidth: 2,
+        },
+        symbolSize: 0,
+        type: 'radar',
+      },
+    ],
+    tooltip: {},
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/playground/src/views/dashboard/analytics/analytics-visits-sales.vue b/playground/src/views/dashboard/analytics/analytics-visits-sales.vue
new file mode 100644
index 000000000..0529a3b05
--- /dev/null
+++ b/playground/src/views/dashboard/analytics/analytics-visits-sales.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    series: [
+      {
+        animationDelay() {
+          return Math.random() * 400;
+        },
+        animationEasing: 'exponentialInOut',
+        animationType: 'scale',
+        center: ['50%', '50%'],
+        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+        data: [
+          { name: '外包', value: 500 },
+          { name: '定制', value: 310 },
+          { name: '技术支持', value: 274 },
+          { name: '远程', value: 400 },
+        ].sort((a, b) => {
+          return a.value - b.value;
+        }),
+        name: '商业占比',
+        radius: '80%',
+        roseType: 'radius',
+        type: 'pie',
+      },
+    ],
+
+    tooltip: {
+      trigger: 'item',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/playground/src/views/dashboard/analytics/analytics-visits-source.vue b/playground/src/views/dashboard/analytics/analytics-visits-source.vue
new file mode 100644
index 000000000..99292bf9d
--- /dev/null
+++ b/playground/src/views/dashboard/analytics/analytics-visits-source.vue
@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    legend: {
+      bottom: '2%',
+      left: 'center',
+    },
+    series: [
+      {
+        animationDelay() {
+          return Math.random() * 100;
+        },
+        animationEasing: 'exponentialInOut',
+        animationType: 'scale',
+        avoidLabelOverlap: false,
+        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+        data: [
+          { name: '搜索引擎', value: 1048 },
+          { name: '直接访问', value: 735 },
+          { name: '邮件营销', value: 580 },
+          { name: '联盟广告', value: 484 },
+        ],
+        emphasis: {
+          label: {
+            fontSize: '12',
+            fontWeight: 'bold',
+            show: true,
+          },
+        },
+        itemStyle: {
+          // borderColor: '#fff',
+          borderRadius: 10,
+          borderWidth: 2,
+        },
+        label: {
+          position: 'center',
+          show: false,
+        },
+        labelLine: {
+          show: false,
+        },
+        name: '访问来源',
+        radius: ['40%', '65%'],
+        type: 'pie',
+      },
+    ],
+    tooltip: {
+      trigger: 'item',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/playground/src/views/dashboard/analytics/analytics-visits.vue b/playground/src/views/dashboard/analytics/analytics-visits.vue
new file mode 100644
index 000000000..8230f6e5c
--- /dev/null
+++ b/playground/src/views/dashboard/analytics/analytics-visits.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+onMounted(() => {
+  renderEcharts({
+    grid: {
+      bottom: 0,
+      containLabel: true,
+      left: '1%',
+      right: '1%',
+      top: '2 %',
+    },
+    series: [
+      {
+        barMaxWidth: 80,
+        // color: '#4f69fd',
+        data: [
+          3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000,
+          3200, 4800,
+        ],
+        type: 'bar',
+      },
+    ],
+    tooltip: {
+      axisPointer: {
+        lineStyle: {
+          // color: '#4f69fd',
+          width: 1,
+        },
+      },
+      trigger: 'axis',
+    },
+    xAxis: {
+      data: Array.from({ length: 12 }).map((_item, index) => `${index + 1}月`),
+      type: 'category',
+    },
+    yAxis: {
+      max: 8000,
+      splitNumber: 4,
+      type: 'value',
+    },
+  });
+});
+</script>
+
+<template>
+  <EchartsUI ref="chartRef" />
+</template>
diff --git a/playground/src/views/dashboard/analytics/index.vue b/playground/src/views/dashboard/analytics/index.vue
new file mode 100644
index 000000000..00b34df1e
--- /dev/null
+++ b/playground/src/views/dashboard/analytics/index.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { AnalysisOverviewItem } from '@vben/common-ui';
+import type { TabOption } from '@vben/types';
+
+import {
+  AnalysisChartCard,
+  AnalysisChartsTabs,
+  AnalysisOverview,
+} from '@vben/common-ui';
+import {
+  SvgBellIcon,
+  SvgCakeIcon,
+  SvgCardIcon,
+  SvgDownloadIcon,
+} from '@vben/icons';
+
+import AnalyticsTrends from './analytics-trends.vue';
+import AnalyticsVisits from './analytics-visits.vue';
+import AnalyticsVisitsData from './analytics-visits-data.vue';
+import AnalyticsVisitsSales from './analytics-visits-sales.vue';
+import AnalyticsVisitsSource from './analytics-visits-source.vue';
+
+const overviewItems: AnalysisOverviewItem[] = [
+  {
+    icon: SvgCardIcon,
+    title: '用户量',
+    totalTitle: '总用户量',
+    totalValue: 120_000,
+    value: 2000,
+  },
+  {
+    icon: SvgCakeIcon,
+    title: '访问量',
+    totalTitle: '总访问量',
+    totalValue: 500_000,
+    value: 20_000,
+  },
+  {
+    icon: SvgDownloadIcon,
+    title: '下载量',
+    totalTitle: '总下载量',
+    totalValue: 120_000,
+    value: 8000,
+  },
+  {
+    icon: SvgBellIcon,
+    title: '使用量',
+    totalTitle: '总使用量',
+    totalValue: 50_000,
+    value: 5000,
+  },
+];
+
+const chartTabs: TabOption[] = [
+  {
+    label: '流量趋势',
+    value: 'trends',
+  },
+  {
+    label: '月访问量',
+    value: 'visits',
+  },
+];
+</script>
+
+<template>
+  <div class="p-5">
+    <AnalysisOverview :items="overviewItems" />
+    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
+      <template #trends>
+        <AnalyticsTrends />
+      </template>
+      <template #visits>
+        <AnalyticsVisits />
+      </template>
+    </AnalysisChartsTabs>
+
+    <div class="mt-5 w-full md:flex">
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问数量">
+        <AnalyticsVisitsData />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问来源">
+        <AnalyticsVisitsSource />
+      </AnalysisChartCard>
+      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
+        <AnalyticsVisitsSales />
+      </AnalysisChartCard>
+    </div>
+  </div>
+</template>
diff --git a/playground/src/views/dashboard/workspace/index.vue b/playground/src/views/dashboard/workspace/index.vue
new file mode 100644
index 000000000..c8ae02737
--- /dev/null
+++ b/playground/src/views/dashboard/workspace/index.vue
@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import type {
+  WorkbenchProjectItem,
+  WorkbenchQuickNavItem,
+  WorkbenchTodoItem,
+  WorkbenchTrendItem,
+} from '@vben/common-ui';
+
+import { ref } from 'vue';
+
+import {
+  AnalysisChartCard,
+  WorkbenchHeader,
+  WorkbenchProject,
+  WorkbenchQuickNav,
+  WorkbenchTodo,
+  WorkbenchTrends,
+} from '@vben/common-ui';
+import { preferences } from '@vben/preferences';
+import { useUserStore } from '@vben/stores';
+
+import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';
+
+const userStore = useUserStore();
+
+const projectItems: WorkbenchProjectItem[] = [
+  {
+    color: '',
+    content: '不要等待机会，而要创造机会。',
+    date: '2021-04-01',
+    group: '开源组',
+    icon: 'carbon:logo-github',
+    title: 'Github',
+  },
+  {
+    color: '#3fb27f',
+    content: '现在的你决定将来的你。',
+    date: '2021-04-01',
+    group: '算法组',
+    icon: 'ion:logo-vue',
+    title: 'Vue',
+  },
+  {
+    color: '#e18525',
+    content: '没有什么才能比努力更重要。',
+    date: '2021-04-01',
+    group: '上班摸鱼',
+    icon: 'ion:logo-html5',
+    title: 'Html5',
+  },
+  {
+    color: '#bf0c2c',
+    content: '热情和欲望可以突破一切难关。',
+    date: '2021-04-01',
+    group: 'UI',
+    icon: 'ion:logo-angular',
+    title: 'Angular',
+  },
+  {
+    color: '#00d8ff',
+    content: '健康的身体是实现目标的基石。',
+    date: '2021-04-01',
+    group: '技术牛',
+    icon: 'bx:bxl-react',
+    title: 'React',
+  },
+  {
+    color: '#EBD94E',
+    content: '路是走出来的，而不是空想出来的。',
+    date: '2021-04-01',
+    group: '架构组',
+    icon: 'ion:logo-javascript',
+    title: 'Js',
+  },
+];
+
+const quickNavItems: WorkbenchQuickNavItem[] = [
+  {
+    color: '#1fdaca',
+    icon: 'ion:home-outline',
+    title: '首页',
+  },
+  {
+    color: '#bf0c2c',
+    icon: 'ion:grid-outline',
+    title: '仪表盘',
+  },
+  {
+    color: '#e18525',
+    icon: 'ion:layers-outline',
+    title: '组件',
+  },
+  {
+    color: '#3fb27f',
+    icon: 'ion:settings-outline',
+    title: '系统管理',
+  },
+  {
+    color: '#4daf1bc9',
+    icon: 'ion:key-outline',
+    title: '权限管理',
+  },
+  {
+    color: '#00d8ff',
+    icon: 'ion:bar-chart-outline',
+    title: '图表',
+  },
+];
+
+const todoItems = ref<WorkbenchTodoItem[]>([
+  {
+    completed: false,
+    content: `审查最近提交到Git仓库的前端代码，确保代码质量和规范。`,
+    date: '2024-07-30 11:00:00',
+    title: '审查前端代码提交',
+  },
+  {
+    completed: true,
+    content: `检查并优化系统性能，降低CPU使用率。`,
+    date: '2024-07-30 11:00:00',
+    title: '系统性能优化',
+  },
+  {
+    completed: false,
+    content: `进行系统安全检查，确保没有安全漏洞或未授权的访问。 `,
+    date: '2024-07-30 11:00:00',
+    title: '安全检查',
+  },
+  {
+    completed: false,
+    content: `更新项目中的所有npm依赖包，确保使用最新版本。`,
+    date: '2024-07-30 11:00:00',
+    title: '更新项目依赖',
+  },
+  {
+    completed: false,
+    content: `修复用户报告的页面UI显示问题，确保在不同浏览器中显示一致。 `,
+    date: '2024-07-30 11:00:00',
+    title: '修复UI显示问题',
+  },
+]);
+const trendItems: WorkbenchTrendItem[] = [
+  {
+    avatar: 'svg:avatar-1',
+    content: `在 <a>开源组</a> 创建了项目 <a>Vue</a>`,
+    date: '刚刚',
+    title: '威廉',
+  },
+  {
+    avatar: 'svg:avatar-2',
+    content: `关注了 <a>威廉</a> `,
+    date: '1个小时前',
+    title: '艾文',
+  },
+  {
+    avatar: 'svg:avatar-3',
+    content: `发布了 <a>个人动态</a> `,
+    date: '1天前',
+    title: '克里斯',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: `发表文章 <a>如何编写一个Vite插件</a> `,
+    date: '2天前',
+    title: 'Vben',
+  },
+  {
+    avatar: 'svg:avatar-1',
+    content: `回复了 <a>杰克</a> 的问题 <a>如何进行项目优化？</a>`,
+    date: '3天前',
+    title: '皮特',
+  },
+  {
+    avatar: 'svg:avatar-2',
+    content: `关闭了问题 <a>如何运行项目</a> `,
+    date: '1周前',
+    title: '杰克',
+  },
+  {
+    avatar: 'svg:avatar-3',
+    content: `发布了 <a>个人动态</a> `,
+    date: '1周前',
+    title: '威廉',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: `推送了代码到 <a>Github</a>`,
+    date: '2021-04-01 20:00',
+    title: '威廉',
+  },
+  {
+    avatar: 'svg:avatar-4',
+    content: `发表文章 <a>如何编写使用 Admin Vben</a> `,
+    date: '2021-03-01 20:00',
+    title: 'Vben',
+  },
+];
+</script>
+
+<template>
+  <div class="p-5">
+    <WorkbenchHeader
+      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
+    >
+      <template #title>
+        早安, {{ userStore.userInfo?.realName }}, 开始您一天的工作吧！
+      </template>
+      <template #description> 今日晴，20℃ - 32℃！ </template>
+    </WorkbenchHeader>
+
+    <div class="mt-5 flex flex-col lg:flex-row">
+      <div class="mr-4 w-full lg:w-3/5">
+        <WorkbenchProject :items="projectItems" title="项目" />
+        <WorkbenchTrends :items="trendItems" class="mt-5" title="最新动态" />
+      </div>
+      <div class="w-full lg:w-2/5">
+        <WorkbenchQuickNav :items="quickNavItems" title="快捷导航" />
+        <WorkbenchTodo :items="todoItems" class="mt-5" title="待办事项" />
+        <AnalysisChartCard class="mt-5" title="访问来源">
+          <AnalyticsVisitsSource />
+        </AnalysisChartCard>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/demos/access/admin-visible.vue b/playground/src/views/demos/access/admin-visible.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/access/admin-visible.vue
rename to playground/src/views/demos/access/admin-visible.vue
diff --git a/apps/web-antd/src/views/demos/access/button-control.vue b/playground/src/views/demos/access/button-control.vue
similarity index 77%
rename from apps/web-antd/src/views/demos/access/button-control.vue
rename to playground/src/views/demos/access/button-control.vue
index badc6c36c..417423595 100644
--- a/apps/web-antd/src/views/demos/access/button-control.vue
+++ b/playground/src/views/demos/access/button-control.vue
@@ -4,9 +4,10 @@ import type { LoginAndRegisterParams } from '@vben/common-ui';
 import { useRouter } from 'vue-router';
 
 import { AccessControl, useAccess } from '@vben/access';
+import { Page } from '@vben/common-ui';
 import { resetAllStores, useUserStore } from '@vben/stores';
 
-import { Button } from 'ant-design-vue';
+import { Button, Card } from 'ant-design-vue';
 
 import { useAuthStore } from '#/store';
 
@@ -48,21 +49,17 @@ async function changeAccount(role: string) {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">
-        {{ accessMode === 'frontend' ? '前端' : '后端' }}页面访问权限演示
-      </h1>
-      <div class="text-foreground/80 mt-2">切换不同的账号，观察按钮变化。</div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">当前角色:</span>
+  <Page
+    :title="`${accessMode === 'frontend' ? '前端' : '后端'}按钮访问权限演示`"
+    description="切换不同的账号，观察按钮变化。"
+  >
+    <Card class="mb-5">
+      <template #title>
+        <span class="font-semibold">当前角色:</span>
         <span class="text-primary mx-4 text-lg">
           {{ userStore.userRoles?.[0] }}
         </span>
-      </div>
+      </template>
 
       <Button :type="roleButtonType('super')" @click="changeAccount('super')">
         切换为 Super 账号
@@ -78,10 +75,9 @@ async function changeAccount(role: string) {
       <Button :type="roleButtonType('user')" @click="changeAccount('user')">
         切换为 User 账号
       </Button>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">组件形式控制 - 权限码方式</div>
+    <Card class="mb-5" title="组件形式控制 - 权限码">
       <AccessControl :codes="['AC_100100']" type="code">
         <Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
       </AccessControl>
@@ -96,10 +92,13 @@ async function changeAccount(role: string) {
           Super & Admin 账号可见 ["AC_100100","AC_1000001"]
         </Button>
       </AccessControl>
-    </div>
+    </Card>
 
-    <div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">组件形式控制 - 用户角色方式</div>
+    <Card
+      v-if="accessMode === 'frontend'"
+      class="mb-5"
+      title="组件形式控制 - 角色"
+    >
       <AccessControl :codes="['super']" type="role">
         <Button class="mr-4"> Super 角色可见 </Button>
       </AccessControl>
@@ -112,10 +111,9 @@ async function changeAccount(role: string) {
       <AccessControl :codes="['super', 'admin']" type="role">
         <Button class="mr-4"> Super & Admin 角色可见 </Button>
       </AccessControl>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">函数形式控制</div>
+    <Card class="mb-5" title="函数形式控制">
       <Button v-if="hasAccessByCodes(['AC_100100'])" class="mr-4">
         Super 账号可见 ["AC_1000001"]
       </Button>
@@ -128,10 +126,9 @@ async function changeAccount(role: string) {
       <Button v-if="hasAccessByCodes(['AC_100100', 'AC_1000001'])" class="mr-4">
         Super & Admin 账号可见 ["AC_100100","AC_1000001"]
       </Button>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">指令方式 - 权限码</div>
+    <Card class="mb-5" title="指令方式 - 权限码">
       <Button class="mr-4" v-access:code="['AC_100100']">
         Super 账号可见 ["AC_1000001"]
       </Button>
@@ -144,16 +141,15 @@ async function changeAccount(role: string) {
       <Button class="mr-4" v-access:code="['AC_100100', 'AC_1000001']">
         Super & Admin 账号可见 ["AC_100100","AC_1000001"]
       </Button>
-    </div>
+    </Card>
 
-    <div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">指令方式 - 角色</div>
+    <Card class="mb-5" title="指令方式 - 角色">
       <Button class="mr-4" v-access:role="['super']"> Super 角色可见 </Button>
       <Button class="mr-4" v-access:role="['admin']"> Admin 角色可见 </Button>
       <Button class="mr-4" v-access:role="['user']"> User 角色可见 </Button>
       <Button class="mr-4" v-access:role="['super', 'admin']">
         Super & Admin 角色可见
       </Button>
-    </div>
-  </div>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/demos/access/index.vue b/playground/src/views/demos/access/index.vue
similarity index 72%
rename from apps/web-antd/src/views/demos/access/index.vue
rename to playground/src/views/demos/access/index.vue
index 9bb5be541..b1a7b1295 100644
--- a/apps/web-antd/src/views/demos/access/index.vue
+++ b/playground/src/views/demos/access/index.vue
@@ -4,9 +4,10 @@ import type { LoginAndRegisterParams } from '@vben/common-ui';
 import { useRouter } from 'vue-router';
 
 import { useAccess } from '@vben/access';
+import { Page } from '@vben/common-ui';
 import { resetAllStores, useUserStore } from '@vben/stores';
 
-import { Button } from 'ant-design-vue';
+import { Button, Card } from 'ant-design-vue';
 
 import { useAuthStore } from '#/store';
 
@@ -59,33 +60,20 @@ async function handleToggleAccessMode() {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">
-        {{ accessMode === 'frontend' ? '前端' : '后端' }}页面访问权限演示
-      </h1>
-      <div class="text-foreground/80 mt-2">
-        切换不同的账号，观察左侧菜单变化。
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <span class="text-lg font-semibold">当前权限模式:</span>
+  <Page
+    :title="`${accessMode === 'frontend' ? '前端' : '后端'}页面访问权限演示`"
+    description="切换不同的账号，观察左侧菜单变化。"
+  >
+    <Card class="mb-5" title="权限模式">
+      <span class="font-semibold">当前权限模式:</span>
       <span class="text-primary mx-4">{{
         accessMode === 'frontend' ? '前端权限控制' : '后端权限控制'
       }}</span>
       <Button type="primary" @click="handleToggleAccessMode">
         切换为{{ accessMode === 'frontend' ? '后端' : '前端' }}权限模式
       </Button>
-    </div>
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3">
-        <span class="text-lg font-semibold">当前账号:</span>
-        <span class="text-primary mx-4 text-lg">
-          {{ userStore.userRoles?.[0] }}
-        </span>
-      </div>
-
+    </Card>
+    <Card title="账号切换">
       <Button :type="roleButtonType('super')" @click="changeAccount('super')">
         切换为 Super 账号
       </Button>
@@ -100,6 +88,6 @@ async function handleToggleAccessMode() {
       <Button :type="roleButtonType('user')" @click="changeAccount('user')">
         切换为 User 账号
       </Button>
-    </div>
-  </div>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/demos/access/menu-visible-403.vue b/playground/src/views/demos/access/menu-visible-403.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/access/menu-visible-403.vue
rename to playground/src/views/demos/access/menu-visible-403.vue
diff --git a/apps/web-antd/src/views/demos/access/super-visible.vue b/playground/src/views/demos/access/super-visible.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/access/super-visible.vue
rename to playground/src/views/demos/access/super-visible.vue
diff --git a/apps/web-antd/src/views/demos/access/user-visible.vue b/playground/src/views/demos/access/user-visible.vue
similarity index 77%
rename from apps/web-antd/src/views/demos/access/user-visible.vue
rename to playground/src/views/demos/access/user-visible.vue
index f69255cad..a3c5f001d 100644
--- a/apps/web-antd/src/views/demos/access/user-visible.vue
+++ b/playground/src/views/demos/access/user-visible.vue
@@ -4,7 +4,7 @@ import { Fallback } from '@vben/common-ui';
 
 <template>
   <Fallback
-    description="当前页面仅 User 可见"
+    description="当前页面仅 User 账号可见"
     status="coming-soon"
     title="页面访问测试"
   />
diff --git a/apps/web-antd/src/views/demos/active-icon/index.vue b/playground/src/views/demos/active-icon/index.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/active-icon/index.vue
rename to playground/src/views/demos/active-icon/index.vue
diff --git a/apps/web-antd/src/views/demos/badge/index.vue b/playground/src/views/demos/badge/index.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/badge/index.vue
rename to playground/src/views/demos/badge/index.vue
diff --git a/apps/web-antd/src/views/demos/breadcrumb/lateral-detail.vue b/playground/src/views/demos/breadcrumb/lateral-detail.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/breadcrumb/lateral-detail.vue
rename to playground/src/views/demos/breadcrumb/lateral-detail.vue
diff --git a/apps/web-antd/src/views/demos/breadcrumb/lateral.vue b/playground/src/views/demos/breadcrumb/lateral.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/breadcrumb/lateral.vue
rename to playground/src/views/demos/breadcrumb/lateral.vue
diff --git a/apps/web-antd/src/views/demos/breadcrumb/level-detail.vue b/playground/src/views/demos/breadcrumb/level-detail.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/breadcrumb/level-detail.vue
rename to playground/src/views/demos/breadcrumb/level-detail.vue
diff --git a/apps/web-antd/src/views/demos/features/hide-menu-children/children.vue b/playground/src/views/demos/features/hide-menu-children/children.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/features/hide-menu-children/children.vue
rename to playground/src/views/demos/features/hide-menu-children/children.vue
diff --git a/apps/web-antd/src/views/demos/features/hide-menu-children/parent.vue b/playground/src/views/demos/features/hide-menu-children/parent.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/features/hide-menu-children/parent.vue
rename to playground/src/views/demos/features/hide-menu-children/parent.vue
diff --git a/apps/web-antd/src/views/demos/features/icons/index.vue b/playground/src/views/demos/features/icons/index.vue
similarity index 79%
rename from apps/web-antd/src/views/demos/features/icons/index.vue
rename to playground/src/views/demos/features/icons/index.vue
index 065409ba6..0e5c28b23 100644
--- a/apps/web-antd/src/views/demos/features/icons/index.vue
+++ b/playground/src/views/demos/features/icons/index.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { Page } from '@vben/common-ui';
 import {
   MdiGithub,
   MdiGoogle,
@@ -14,12 +15,13 @@ import {
   SvgCardIcon,
   SvgDownloadIcon,
 } from '@vben/icons';
+
+import { Card } from 'ant-design-vue';
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">图标</h1>
+  <Page title="图标">
+    <template #description>
       <div class="text-foreground/80 mt-2">
         图标可在
         <a
@@ -31,10 +33,9 @@ import {
         </a>
         中查找，支持多种图标库，如 Material Design, Font Awesome, Jam Icons 等。
       </div>
-    </div>
+    </template>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">Iconify</div>
+    <Card class="mb-5" title="Iconify">
       <div class="flex items-center gap-5">
         <MdiGithub class="size-8" />
         <MdiGoogle class="size-8 text-red-500" />
@@ -42,10 +43,9 @@ import {
         <MdiWechat class="size-8" />
         <MdiKeyboardEsc class="size-8" />
       </div>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">Svg Icons</div>
+    <Card title="Svg Icons">
       <div class="flex items-center gap-5">
         <SvgAvatar1Icon class="size-8" />
         <SvgAvatar2Icon class="size-8 text-red-500" />
@@ -56,6 +56,6 @@ import {
         <SvgCardIcon class="size-8" />
         <SvgDownloadIcon class="size-8" />
       </div>
-    </div>
-  </div>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/demos/features/login-expired/index.vue b/playground/src/views/demos/features/login-expired/index.vue
similarity index 63%
rename from apps/web-antd/src/views/demos/features/login-expired/index.vue
rename to playground/src/views/demos/features/login-expired/index.vue
index f6c723033..281916933 100644
--- a/apps/web-antd/src/views/demos/features/login-expired/index.vue
+++ b/playground/src/views/demos/features/login-expired/index.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import type { LoginExpiredModeType } from '@vben/types';
 
+import { Page } from '@vben/common-ui';
 import { preferences, updatePreferences } from '@vben/preferences';
 
-import { Button } from 'ant-design-vue';
+import { Button, Card } from 'ant-design-vue';
 
 import { getMockStatusApi } from '#/api';
 
@@ -17,26 +18,22 @@ async function handleClick(type: LoginExpiredModeType) {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">登录过期演示</h1>
+  <Page title="登录过期演示">
+    <template #description>
       <div class="text-foreground/80 mt-2">
         接口请求遇到401状态码时，需要重新登录。有两种方式：
-        <div>1.转到登录页，登录成功后跳转回原页面</div>
-        <div>
+        <p>1.转到登录页，登录成功后跳转回原页面</p>
+        <p>
           2.弹出重新登录弹窗，登录后关闭弹窗，不进行任何页面跳转（刷新后调整登录页面）
-        </div>
+        </p>
       </div>
-    </div>
+    </template>
 
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">跳转登录页面方式</div>
+    <Card class="mb-5" title="跳转登录页面方式">
       <Button type="primary" @click="handleClick('page')"> 点击触发 </Button>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">登录弹窗方式</div>
+    </Card>
+    <Card class="mb-5" title="登录弹窗方式">
       <Button type="primary" @click="handleClick('modal')"> 点击触发 </Button>
-    </div>
-  </div>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/demos/features/tabs/index.vue b/playground/src/views/demos/features/tabs/index.vue
similarity index 82%
rename from apps/web-antd/src/views/demos/features/tabs/index.vue
rename to playground/src/views/demos/features/tabs/index.vue
index 9415b668e..e1315653c 100644
--- a/apps/web-antd/src/views/demos/features/tabs/index.vue
+++ b/playground/src/views/demos/features/tabs/index.vue
@@ -2,9 +2,10 @@
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { Page } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
 
-import { Input as AInput, Button } from 'ant-design-vue';
+import { Button, Card, Input } from 'ant-design-vue';
 
 const router = useRouter();
 const newTabTitle = ref('');
@@ -38,14 +39,8 @@ function reset() {
 </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">用于需要操作标签页的场景</div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="text-lg font-semibold">打开/关闭标签页</div>
+  <Page description="用于需要操作标签页的场景" title="标签页">
+    <Card class="mb-5" title="打开/关闭标签页">
       <div class="text-foreground/80 my-3">
         如果标签页存在，直接跳转切换。如果标签页不存在，则打开新的标签页。
       </div>
@@ -55,10 +50,9 @@ function reset() {
           关闭 "关于" 标签页
         </Button>
       </div>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
-      <div class="text-lg font-semibold">标签页操作</div>
+    <Card class="mb-5" title="标签页操作">
       <div class="text-foreground/80 my-3">用于动态控制标签页的各种操作</div>
       <div class="flex flex-wrap gap-3">
         <Button type="primary" @click="closeCurrentTab()">
@@ -76,15 +70,15 @@ function reset() {
         </Button>
         <Button type="primary" @click="refreshTab()"> 刷新当前标签页 </Button>
       </div>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
+    <Card class="mb-5" title="动态标题">
       <div class="text-lg font-semibold">动态标题</div>
       <div class="text-foreground/80 my-3">
         该操作不会影响页面标题，仅修改Tab标题
       </div>
       <div class="flex flex-wrap items-center gap-3">
-        <AInput
+        <Input
           v-model:value="newTabTitle"
           class="w-40"
           placeholder="请输入新标题"
@@ -94,9 +88,9 @@ function reset() {
         </Button>
         <Button @click="reset"> 重置 </Button>
       </div>
-    </div>
+    </Card>
 
-    <div class="card-box mt-5 p-5">
+    <Card class="mb-5" title="最大打开数量">
       <div class="text-lg font-semibold">最大打开数量</div>
       <div class="text-foreground/80 my-3">
         限制带参数的tab打开的最大数量，由 `route.meta.maxNumOfOpenTab` 控制
@@ -108,6 +102,6 @@ function reset() {
           </Button>
         </template>
       </div>
-    </div>
-  </div>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/demos/features/tabs/tab-detail.vue b/playground/src/views/demos/features/tabs/tab-detail.vue
similarity index 59%
rename from apps/web-antd/src/views/demos/features/tabs/tab-detail.vue
rename to playground/src/views/demos/features/tabs/tab-detail.vue
index c21080c0a..c03b61c8c 100644
--- a/apps/web-antd/src/views/demos/features/tabs/tab-detail.vue
+++ b/playground/src/views/demos/features/tabs/tab-detail.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { Page } from '@vben/common-ui';
 import { useTabs } from '@vben/hooks';
 
 const route = useRoute();
@@ -16,12 +17,7 @@ setTabTitle(`No.${index.value} - 详情信息`);
 </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">
-        <div>{{ index }} - 详情页内容在此</div>
-      </div>
-    </div>
-  </div>
+  <Page :title="`标签页${index}详情页`">
+    <template #description> {{ index }} - 详情页内容在此 </template>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/demos/features/watermark/index.vue b/playground/src/views/demos/features/watermark/index.vue
similarity index 70%
rename from apps/web-antd/src/views/demos/features/watermark/index.vue
rename to playground/src/views/demos/features/watermark/index.vue
index 493ab86a2..9f819e510 100644
--- a/apps/web-antd/src/views/demos/features/watermark/index.vue
+++ b/playground/src/views/demos/features/watermark/index.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import { Page } from '@vben/common-ui';
 import { useWatermark } from '@vben/hooks';
 
-import { Button } from 'ant-design-vue';
+import { Button, Card } from 'ant-design-vue';
 
 const { destroyWatermark, updateWatermark } = useWatermark();
 
@@ -40,9 +41,8 @@ async function createWaterMark() {
 </script>
 
 <template>
-  <div class="p-5">
-    <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">水印</h1>
+  <Page title="水印">
+    <template #description>
       <div class="text-foreground/80 mt-2">
         水印使用了
         <a
@@ -54,13 +54,13 @@ async function createWaterMark() {
         </a>
         开源插件，详细配置可见插件配置。
       </div>
-    </div>
+    </template>
 
-    <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>
+    <Card title="使用">
+      <Button class="mr-2" type="primary" @click="createWaterMark()">
+        创建水印
+      </Button>
+      <Button danger @click="destroyWatermark">移除水印</Button>
+    </Card>
+  </Page>
 </template>
diff --git a/apps/web-antd/src/views/demos/nested/menu-2-1.vue b/playground/src/views/demos/nested/menu-1.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/nested/menu-2-1.vue
rename to playground/src/views/demos/nested/menu-1.vue
diff --git a/apps/web-antd/src/views/demos/nested/menu-3-1.vue b/playground/src/views/demos/nested/menu-2-1.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/nested/menu-3-1.vue
rename to playground/src/views/demos/nested/menu-2-1.vue
diff --git a/apps/web-antd/src/views/demos/nested/menu-3-2-1.vue b/playground/src/views/demos/nested/menu-3-1.vue
similarity index 100%
rename from apps/web-antd/src/views/demos/nested/menu-3-2-1.vue
rename to playground/src/views/demos/nested/menu-3-1.vue
diff --git a/playground/src/views/demos/nested/menu-3-2-1.vue b/playground/src/views/demos/nested/menu-3-2-1.vue
new file mode 100644
index 000000000..f394930f2
--- /dev/null
+++ b/playground/src/views/demos/nested/menu-3-2-1.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import { Fallback } from '@vben/common-ui';
+</script>
+
+<template>
+  <Fallback status="coming-soon" />
+</template>
diff --git a/playground/src/views/examples/ellipsis/index.vue b/playground/src/views/examples/ellipsis/index.vue
new file mode 100644
index 000000000..4f3b67ed6
--- /dev/null
+++ b/playground/src/views/examples/ellipsis/index.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { EllipsisText, Page } from '@vben/common-ui';
+
+import { Card } from 'ant-design-vue';
+
+const longText = `Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。Vben Admin 是一个基于 Vue3.0、Vite、 TypeScript 的后台解决方案，目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、多主题配置、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 vue3、vite、ts 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。`;
+
+const text = ref(longText);
+</script>
+
+<template>
+  <Page
+    description="用于多行文本省略，支持点击展开和自定义内容。"
+    title="文本省略示例"
+  >
+    <Card class="mb-4" title="基本使用">
+      <EllipsisText :max-width="240">{{ text }}</EllipsisText>
+    </Card>
+
+    <Card class="mb-4" title="多行省略">
+      <EllipsisText :line="2">{{ text }}</EllipsisText>
+    </Card>
+
+    <Card class="mb-4" title="点击展开">
+      <EllipsisText :line="3" expand>{{ text }}</EllipsisText>
+    </Card>
+    <Card class="mb-4" title="自定义内容">
+      <EllipsisText :max-width="240">
+        住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪
+        <template #tooltip>
+          <div style="text-align: center">
+            《秦皇岛》<br />住在我心里孤独的<br />孤独的海怪 痛苦之王<br />开始厌倦
+            深海的光 停滞的海浪
+          </div>
+        </template>
+      </EllipsisText>
+    </Card>
+  </Page>
+</template>
diff --git a/playground/tailwind.config.mjs b/playground/tailwind.config.mjs
new file mode 100644
index 000000000..f17f556fa
--- /dev/null
+++ b/playground/tailwind.config.mjs
@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
new file mode 100644
index 000000000..02c287fe6
--- /dev/null
+++ b/playground/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web-app.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "#/*": ["./src/*"]
+    }
+  },
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/playground/tsconfig.node.json b/playground/tsconfig.node.json
new file mode 100644
index 000000000..c2f0d86cc
--- /dev/null
+++ b/playground/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/node.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "noEmit": false
+  },
+  "include": ["vite.config.mts"]
+}
diff --git a/playground/vite.config.mts b/playground/vite.config.mts
new file mode 100644
index 000000000..b6360f1d4
--- /dev/null
+++ b/playground/vite.config.mts
@@ -0,0 +1,20 @@
+import { defineConfig } from '@vben/vite-config';
+
+export default defineConfig(async () => {
+  return {
+    application: {},
+    vite: {
+      server: {
+        proxy: {
+          '/api': {
+            changeOrigin: true,
+            rewrite: (path) => path.replace(/^\/api/, ''),
+            // mock代理目标地址
+            target: 'http://localhost:5320/api',
+            ws: true,
+          },
+        },
+      },
+    },
+  };
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0f6aea6b5..f6411b7f0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,6 +55,12 @@ importers:
       '@vben/vsh':
         specifier: workspace:*
         version: link:scripts/vsh
+      '@vitejs/plugin-vue':
+        specifier: ^5.1.2
+        version: 5.1.2(vite@5.4.0(@types/node@22.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.37(typescript@5.5.4))
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^4.0.0
+        version: 4.0.0(vite@5.4.0(@types/node@22.2.0)(sass@1.77.8)(terser@5.31.3))(vue@3.4.37(typescript@5.5.4))
       '@vue/test-utils':
         specifier: ^2.4.6
         version: 2.4.6
@@ -100,6 +106,9 @@ importers:
       vitest:
         specifier: ^2.0.5
         version: 2.0.5(@types/node@22.2.0)(jsdom@24.1.1)(sass@1.77.8)(terser@5.31.3)
+      vue:
+        specifier: ^3.4.37
+        version: 3.4.37(typescript@5.5.4)
       vue-tsc:
         specifier: ^2.0.29
         version: 2.0.29(typescript@5.5.4)
@@ -1101,6 +1110,69 @@ importers:
         specifier: ^4.4.3
         version: 4.4.3(vue@3.4.37(typescript@5.5.4))
 
+  playground:
+    dependencies:
+      '@vben/access':
+        specifier: workspace:*
+        version: link:../packages/effects/access
+      '@vben/chart-ui':
+        specifier: workspace:*
+        version: link:../packages/effects/chart-ui
+      '@vben/common-ui':
+        specifier: workspace:*
+        version: link:../packages/effects/common-ui
+      '@vben/constants':
+        specifier: workspace:*
+        version: link:../packages/constants
+      '@vben/hooks':
+        specifier: workspace:*
+        version: link:../packages/effects/hooks
+      '@vben/icons':
+        specifier: workspace:*
+        version: link:../packages/icons
+      '@vben/layouts':
+        specifier: workspace:*
+        version: link:../packages/effects/layouts
+      '@vben/locales':
+        specifier: workspace:*
+        version: link:../packages/locales
+      '@vben/preferences':
+        specifier: workspace:*
+        version: link:../packages/preferences
+      '@vben/request':
+        specifier: workspace:*
+        version: link:../packages/effects/request
+      '@vben/stores':
+        specifier: workspace:*
+        version: link:../packages/stores
+      '@vben/styles':
+        specifier: workspace:*
+        version: link:../packages/styles
+      '@vben/types':
+        specifier: workspace:*
+        version: link:../packages/types
+      '@vben/utils':
+        specifier: workspace:*
+        version: link:../packages/utils
+      '@vueuse/core':
+        specifier: ^10.11.1
+        version: 10.11.1(vue@3.4.37(typescript@5.5.4))
+      ant-design-vue:
+        specifier: ^4.2.3
+        version: 4.2.3(vue@3.4.37(typescript@5.5.4))
+      dayjs:
+        specifier: ^1.11.12
+        version: 1.11.12
+      pinia:
+        specifier: 2.2.1
+        version: 2.2.1(typescript@5.5.4)(vue@3.4.37(typescript@5.5.4))
+      vue:
+        specifier: ^3.4.37
+        version: 3.4.37(typescript@5.5.4)
+      vue-router:
+        specifier: ^4.4.3
+        version: 4.4.3(vue@3.4.37(typescript@5.5.4))
+
   scripts/turbo-run:
     dependencies:
       '@clack/prompts':
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index cfbcb2454..885e9c06f 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -11,3 +11,4 @@ packages:
   - "apps/*"
   - "scripts/*"
   - "docs"
+  - "playground"
diff --git a/vben-admin.code-workspace b/vben-admin.code-workspace
index 445c0f321..dc3372568 100644
--- a/vben-admin.code-workspace
+++ b/vben-admin.code-workspace
@@ -148,6 +148,10 @@
       "name": "@vben/utils",
       "path": "packages/utils",
     },
+    {
+      "name": "@vben/playground",
+      "path": "playground",
+    },
     {
       "name": "@vben/turbo-run",
       "path": "scripts/turbo-run",
diff --git a/vitest.config.ts b/vitest.config.ts
index 647a9e54c..cada073f5 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,6 +1,9 @@
+import Vue from '@vitejs/plugin-vue';
+import VueJsx from '@vitejs/plugin-vue-jsx';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
+  plugins: [Vue(), VueJsx()],
   test: {
     environment: 'jsdom',
   },