refactor: migrate demo applications to playground (#4116)

* chore: detail adjustment

* refactor: Migrate demo applications to playground

* perf: logic optimization

* chore: update docs

* chore: update docs

apps/web-antd/src/api/demos/index.ts

@@ -1 +0,0 @@
-export * from './status';

apps/web-antd/src/api/demos/status.ts

@@ -1,10 +0,0 @@
-import { requestClient } from '#/api/request';
-
-/**
- * 模拟任意状态码
- */
-async function getMockStatusApi(status: string) {
-  return requestClient.get('/status', { params: { status } });
-}
-
-export { getMockStatusApi };

apps/web-antd/src/api/index.ts

@@ -1,2 +1 @@
 export * from './core';
-export * from './demos';

apps/web-antd/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;
 }

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}`);
+  }
 }
 
 /**

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"
     }
   }
 }

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"
     }
   }
 }

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'),
       },
     ],
   },

apps/web-antd/src/router/routes/modules/examples.ts

@@ -1,30 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-import { BasicLayout } from '#/layouts';
-import { $t } from '#/locales';
-
-const routes: RouteRecordRaw[] = [
-  {
-    component: BasicLayout,
-    meta: {
-      icon: 'ion:layers-outline',
-      keepAlive: true,
-      order: 1000,
-      title: $t('page.examples.title'),
-    },
-    name: 'Examples',
-    path: '/examples',
-    children: [
-      {
-        name: 'EllipsisDemo',
-        path: '/examples/ellipsis',
-        component: () => import('#/views/examples/ellipsis/index.vue'),
-        meta: {
-          title: $t('page.examples.ellipsis.title'),
-        },
-      },
-    ],
-  },
-];
-
-export default routes;

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'),
         },
       },

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: [
       {

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: [
       {

apps/web-antd/src/views/demos/access/admin-visible.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
-</script>
-
-<template>
-  <Fallback
-    description="当前页面仅 Admin 账号可见"
-    status="coming-soon"
-    title="页面访问测试"
-  />
-</template>

apps/web-antd/src/views/demos/access/button-control.vue

@@ -1,161 +0,0 @@
-<script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
-
-import { useRouter } from 'vue-router';
-
-import { AccessControl, useAccess } from '@vben/access';
-import { resetAllStores, useUserStore } from '@vben/stores';
-
-import { Button } from 'ant-design-vue';
-
-import { useAuthStore } from '#/store';
-
-const accounts: Record<string, LoginAndRegisterParams> = {
-  admin: {
-    password: '123456',
-    username: 'admin',
-  },
-  super: {
-    password: '123456',
-    username: 'vben',
-  },
-  user: {
-    password: '123456',
-    username: 'jack',
-  },
-};
-
-const { accessMode, hasAccessByCodes } = useAccess();
-const authStore = useAuthStore();
-const userStore = useUserStore();
-const router = useRouter();
-
-function roleButtonType(role: string) {
-  return userStore.userRoles.includes(role) ? 'primary' : 'default';
-}
-
-async function changeAccount(role: string) {
-  if (userStore.userRoles.includes(role)) {
-    return;
-  }
-
-  const account = accounts[role];
-  resetAllStores();
-  if (account) {
-    await authStore.authLogin(account, async () => {
-      router.go(0);
-    });
-  }
-}
-</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>
-        <span class="text-primary mx-4 text-lg">
-          {{ userStore.userRoles?.[0] }}
-        </span>
-      </div>
-
-      <Button :type="roleButtonType('super')" @click="changeAccount('super')">
-        切换为 Super 账号
-      </Button>
-
-      <Button
-        :type="roleButtonType('admin')"
-        class="mx-4"
-        @click="changeAccount('admin')"
-      >
-        切换为 Admin 账号
-      </Button>
-      <Button :type="roleButtonType('user')" @click="changeAccount('user')">
-        切换为 User 账号
-      </Button>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">组件形式控制 - 权限码方式</div>
-      <AccessControl :codes="['AC_100100']" type="code">
-        <Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
-      </AccessControl>
-      <AccessControl :codes="['AC_100030']" type="code">
-        <Button class="mr-4"> Admin 账号可见 ["AC_100010"] </Button>
-      </AccessControl>
-      <AccessControl :codes="['AC_1000001']" type="code">
-        <Button class="mr-4"> User 账号可见 ["AC_1000001"] </Button>
-      </AccessControl>
-      <AccessControl :codes="['AC_100100', 'AC_100010']" type="code">
-        <Button class="mr-4">
-          Super & Admin 账号可见 ["AC_100100","AC_1000001"]
-        </Button>
-      </AccessControl>
-    </div>
-
-    <div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">组件形式控制 - 用户角色方式</div>
-      <AccessControl :codes="['super']" type="role">
-        <Button class="mr-4"> Super 角色可见 </Button>
-      </AccessControl>
-      <AccessControl :codes="['admin']" type="role">
-        <Button class="mr-4"> Admin 角色可见 </Button>
-      </AccessControl>
-      <AccessControl :codes="['user']" type="role">
-        <Button class="mr-4"> User 角色可见 </Button>
-      </AccessControl>
-      <AccessControl :codes="['super', 'admin']" type="role">
-        <Button class="mr-4"> Super & Admin 角色可见 </Button>
-      </AccessControl>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">函数形式控制</div>
-      <Button v-if="hasAccessByCodes(['AC_100100'])" class="mr-4">
-        Super 账号可见 ["AC_1000001"]
-      </Button>
-      <Button v-if="hasAccessByCodes(['AC_100030'])" class="mr-4">
-        Admin 账号可见 ["AC_100010"]
-      </Button>
-      <Button v-if="hasAccessByCodes(['AC_1000001'])" class="mr-4">
-        User 账号可见 ["AC_1000001"]
-      </Button>
-      <Button v-if="hasAccessByCodes(['AC_100100', 'AC_1000001'])" class="mr-4">
-        Super & Admin 账号可见 ["AC_100100","AC_1000001"]
-      </Button>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">指令方式 - 权限码</div>
-      <Button class="mr-4" v-access:code="['AC_100100']">
-        Super 账号可见 ["AC_1000001"]
-      </Button>
-      <Button class="mr-4" v-access:code="['AC_100030']">
-        Admin 账号可见 ["AC_100010"]
-      </Button>
-      <Button class="mr-4" v-access:code="['AC_1000001']">
-        User 账号可见 ["AC_1000001"]
-      </Button>
-      <Button class="mr-4" v-access:code="['AC_100100', 'AC_1000001']">
-        Super & Admin 账号可见 ["AC_100100","AC_1000001"]
-      </Button>
-    </div>
-
-    <div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">指令方式 - 角色</div>
-      <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>
-</template>

apps/web-antd/src/views/demos/access/index.vue

@@ -1,110 +0,0 @@
-<script lang="ts" setup>
-import type { LoginAndRegisterParams } from '@vben/common-ui';
-
-import { useRouter } from 'vue-router';
-
-import { useAccess } from '@vben/access';
-import { resetAllStores, useUserStore } from '@vben/stores';
-
-import { Button } from 'ant-design-vue';
-
-import { useAuthStore } from '#/store';
-
-const accounts: Record<string, LoginAndRegisterParams> = {
-  admin: {
-    password: '123456',
-    username: 'admin',
-  },
-  super: {
-    password: '123456',
-    username: 'vben',
-  },
-  user: {
-    password: '123456',
-    username: 'jack',
-  },
-};
-
-const { accessMode, toggleAccessMode } = useAccess();
-const userStore = useUserStore();
-const accessStore = useAuthStore();
-const router = useRouter();
-
-function roleButtonType(role: string) {
-  return userStore.userRoles.includes(role) ? 'primary' : 'default';
-}
-
-async function changeAccount(role: string) {
-  if (userStore.userRoles.includes(role)) {
-    return;
-  }
-
-  const account = accounts[role];
-  resetAllStores();
-  if (account) {
-    await accessStore.authLogin(account, async () => {
-      router.go(0);
-    });
-  }
-}
-
-async function handleToggleAccessMode() {
-  if (!accounts.super) {
-    return;
-  }
-  await toggleAccessMode();
-  resetAllStores();
-
-  await accessStore.authLogin(accounts.super, async () => {
-    setTimeout(() => {
-      router.go(0);
-    }, 150);
-  });
-}
-</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>
-      <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>
-
-      <Button :type="roleButtonType('super')" @click="changeAccount('super')">
-        切换为 Super 账号
-      </Button>
-
-      <Button
-        :type="roleButtonType('admin')"
-        class="mx-4"
-        @click="changeAccount('admin')"
-      >
-        切换为 Admin 账号
-      </Button>
-      <Button :type="roleButtonType('user')" @click="changeAccount('user')">
-        切换为 User 账号
-      </Button>
-    </div>
-  </div>
-</template>

apps/web-antd/src/views/demos/access/menu-visible-403.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
-</script>
-
-<template>
-  <Fallback
-    description="当前页面用户不可见，会被重定向到403页面"
-    status="coming-soon"
-    title="页面访问测试"
-  />
-</template>

apps/web-antd/src/views/demos/access/super-visible.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
-</script>
-
-<template>
-  <Fallback
-    description="当前页面仅 Super 账号可见"
-    status="coming-soon"
-    title="页面访问测试"
-  />
-</template>

apps/web-antd/src/views/demos/access/user-visible.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
-</script>
-
-<template>
-  <Fallback
-    description="当前页面仅 User 可见"
-    status="coming-soon"
-    title="页面访问测试"
-  />
-</template>

apps/web-antd/src/views/demos/active-icon/index.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
-</script>
-
-<template>
-  <Fallback
-    description="用于菜单激活显示不同的图标"
-    status="coming-soon"
-    title="激活图标示例"
-  />
-</template>

apps/web-antd/src/views/demos/antd/index.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+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>
+  <div class="p-5">
+    <div class="card-box p-5">
+      <h1 class="text-xl font-semibold">Ant Design Vue组件使用演示</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>
+        <Space>
+          <Button>Default</Button>
+          <Button type="primary"> Primary </Button>
+          <Button> Info </Button>
+          <Button danger> Error </Button>
+        </Space>
+      </div>
+    </div>
+
+    <div class="card-box mt-5 p-5">
+      <div class="mb-3">
+        <span class="text-lg font-semibold">卡片</span>
+      </div>
+      <div>
+        <Card title="卡片"> 卡片内容 </Card>
+      </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">
+        <Button @click="info"> 信息 </Button>
+        <Button danger @click="error"> 错误 </Button>
+        <Button @click="warning"> 警告 </Button>
+        <Button @click="success"> 成功 </Button>
+      </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">
+        <Button @click="notify('info')"> 信息 </Button>
+        <Button danger @click="notify('error')"> 错误 </Button>
+        <Button @click="notify('warning')"> 警告 </Button>
+        <Button @click="notify('success')"> 成功 </Button>
+      </div>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/demos/badge/index.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
-</script>
-
-<template>
-  <Fallback description="用于徽标示例" status="coming-soon" title="徽标示例" />
-</template>

apps/web-antd/src/views/demos/breadcrumb/lateral-detail.vue

@@ -1,21 +0,0 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router';
-
-import { Fallback } from '@vben/common-ui';
-
-import { Button } from 'ant-design-vue';
-
-const router = useRouter();
-</script>
-
-<template>
-  <Fallback
-    description="面包屑导航-平级模式-详情页"
-    status="coming-soon"
-    title="注意观察面包屑导航变化"
-  >
-    <template #action>
-      <Button @click="router.go(-1)">返回</Button>
-    </template>
-  </Fallback>
-</template>

apps/web-antd/src/views/demos/breadcrumb/lateral.vue

@@ -1,25 +0,0 @@
-<script lang="ts" setup>
-import { useRouter } from 'vue-router';
-
-import { Fallback } from '@vben/common-ui';
-
-import { Button } from 'ant-design-vue';
-
-const router = useRouter();
-
-function details() {
-  router.push({ name: 'BreadcrumbLateralDetailDemo' });
-}
-</script>
-
-<template>
-  <Fallback
-    description="点击查看详情，并观察面包屑导航变化"
-    status="coming-soon"
-    title="面包屑导航-平级模式"
-  >
-    <template #action>
-      <Button type="primary" @click="details">点击查看详情</Button>
-    </template>
-  </Fallback>
-</template>

apps/web-antd/src/views/demos/breadcrumb/level-detail.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
-</script>
-
-<template>
-  <Fallback
-    description="面包屑导航-层级模式-详情页"
-    status="coming-soon"
-    title="注意观察面包屑导航变化"
-  />
-</template>

apps/web-antd/src/views/demos/features/hide-menu-children/children.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>children</div>
-</template>

apps/web-antd/src/views/demos/features/hide-menu-children/parent.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
-</script>
-
-<template>
-  <Fallback
-    description="当前菜单的子菜单不可见"
-    status="coming-soon"
-    title="隐藏子菜单"
-  />
-</template>

apps/web-antd/src/views/demos/features/icons/index.vue

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

apps/web-antd/src/views/demos/features/login-expired/index.vue

@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-import type { LoginExpiredModeType } from '@vben/types';
-
-import { preferences, updatePreferences } from '@vben/preferences';
-
-import { Button } from 'ant-design-vue';
-
-import { getMockStatusApi } from '#/api';
-
-async function handleClick(type: LoginExpiredModeType) {
-  const loginExpiredMode = preferences.app.loginExpiredMode;
-
-  updatePreferences({ app: { loginExpiredMode: type } });
-  await getMockStatusApi('401');
-  updatePreferences({ app: { loginExpiredMode } });
-}
-</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">
-        接口请求遇到401状态码时，需要重新登录。有两种方式：
-        <div>1.转到登录页，登录成功后跳转回原页面</div>
-        <div>
-          2.弹出重新登录弹窗，登录后关闭弹窗，不进行任何页面跳转（刷新后调整登录页面）
-        </div>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="mb-3 text-lg font-semibold">跳转登录页面方式</div>
-      <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>
-      <Button type="primary" @click="handleClick('modal')"> 点击触发 </Button>
-    </div>
-  </div>
-</template>

apps/web-antd/src/views/demos/features/tabs/index.vue

@@ -1,113 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-import { useTabs } from '@vben/hooks';
-
-import { Input as AInput, Button } from 'ant-design-vue';
-
-const router = useRouter();
-const newTabTitle = ref('');
-
-const {
-  closeAllTabs,
-  closeCurrentTab,
-  closeLeftTabs,
-  closeOtherTabs,
-  closeRightTabs,
-  closeTabByKey,
-  refreshTab,
-  resetTabTitle,
-  setTabTitle,
-} = useTabs();
-
-function openTab() {
-  // 这里就是路由跳转，也可以用path
-  router.push({ name: 'VbenAbout' });
-}
-
-function openTabWithParams(id: number) {
-  // 这里就是路由跳转，也可以用path
-  router.push({ name: 'FeatureTabDetailDemo', params: { id } });
-}
-
-function reset() {
-  newTabTitle.value = '';
-  resetTabTitle();
-}
-</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>
-      <div class="text-foreground/80 my-3">
-        如果标签页存在，直接跳转切换。如果标签页不存在，则打开新的标签页。
-      </div>
-      <div class="flex flex-wrap gap-3">
-        <Button type="primary" @click="openTab"> 打开 "关于" 标签页 </Button>
-        <Button type="primary" @click="closeTabByKey('/vben-admin/about')">
-          关闭 "关于" 标签页
-        </Button>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="text-lg font-semibold">标签页操作</div>
-      <div class="text-foreground/80 my-3">用于动态控制标签页的各种操作</div>
-      <div class="flex flex-wrap gap-3">
-        <Button type="primary" @click="closeCurrentTab()">
-          关闭当前标签页
-        </Button>
-        <Button type="primary" @click="closeLeftTabs()">
-          关闭左侧标签页
-        </Button>
-        <Button type="primary" @click="closeRightTabs()">
-          关闭右侧标签页
-        </Button>
-        <Button type="primary" @click="closeAllTabs()"> 关闭所有标签页 </Button>
-        <Button type="primary" @click="closeOtherTabs()">
-          关闭其他标签页
-        </Button>
-        <Button type="primary" @click="refreshTab()"> 刷新当前标签页 </Button>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <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
-          v-model:value="newTabTitle"
-          class="w-40"
-          placeholder="请输入新标题"
-        />
-        <Button type="primary" @click="() => setTabTitle(newTabTitle)">
-          修改
-        </Button>
-        <Button @click="reset"> 重置 </Button>
-      </div>
-    </div>
-
-    <div class="card-box mt-5 p-5">
-      <div class="text-lg font-semibold">最大打开数量</div>
-      <div class="text-foreground/80 my-3">
-        限制带参数的tab打开的最大数量，由 `route.meta.maxNumOfOpenTab` 控制
-      </div>
-      <div class="flex flex-wrap items-center gap-3">
-        <template v-for="item in 5" :key="item">
-          <Button type="primary" @click="openTabWithParams(item)">
-            打开{{ item }}详情页
-          </Button>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>

apps/web-antd/src/views/demos/features/tabs/tab-detail.vue

@@ -1,27 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-
-import { useTabs } from '@vben/hooks';
-
-const route = useRoute();
-
-const { setTabTitle } = useTabs();
-
-const index = computed(() => {
-  return route.params?.id ?? -1;
-});
-
-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>
-</template>

apps/web-antd/src/views/demos/features/watermark/index.vue

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

apps/web-antd/src/views/demos/nested/menu-1.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
-</script>
-
-<template>
-  <Fallback status="coming-soon" />
-</template>

apps/web-antd/src/views/demos/nested/menu-2-1.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
-</script>
-
-<template>
-  <Fallback status="coming-soon" />
-</template>

apps/web-antd/src/views/demos/nested/menu-3-1.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
-</script>
-
-<template>
-  <Fallback status="coming-soon" />
-</template>

apps/web-antd/src/views/demos/nested/menu-3-2-1.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup>
-import { Fallback } from '@vben/common-ui';
-</script>
-
-<template>
-  <Fallback status="coming-soon" />
-</template>

apps/web-antd/src/views/examples/ellipsis/data.ts

@@ -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 等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。';

apps/web-antd/src/views/examples/ellipsis/index.vue

@@ -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>