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

playground/src/views/_core/README.md

@@ -0,0 +1,3 @@
+# \_core
+
+此目录包含应用程序正常运行所需的基本视图。这些视图是应用程序布局中使用的视图。

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>

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>

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>

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>

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>

playground/src/views/_core/fallback/coming-soon.vue

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

playground/src/views/demos/access/admin-visible.vue

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

playground/src/views/demos/access/button-control.vue

@@ -0,0 +1,161 @@
+<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>

playground/src/views/demos/access/index.vue

@@ -0,0 +1,110 @@
+<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>

playground/src/views/demos/access/menu-visible-403.vue

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

playground/src/views/demos/access/super-visible.vue

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

playground/src/views/demos/access/user-visible.vue

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

playground/src/views/demos/active-icon/index.vue

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

playground/src/views/demos/badge/index.vue

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

playground/src/views/demos/breadcrumb/lateral-detail.vue

@@ -0,0 +1,21 @@
+<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>

playground/src/views/demos/breadcrumb/lateral.vue

@@ -0,0 +1,25 @@
+<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>

playground/src/views/demos/breadcrumb/level-detail.vue

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

playground/src/views/demos/features/hide-menu-children/children.vue

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

playground/src/views/demos/features/hide-menu-children/parent.vue

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

playground/src/views/demos/features/icons/index.vue

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

playground/src/views/demos/features/login-expired/index.vue

@@ -0,0 +1,42 @@
+<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>

playground/src/views/demos/features/tabs/index.vue

@@ -0,0 +1,113 @@
+<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>

playground/src/views/demos/features/tabs/tab-detail.vue

@@ -0,0 +1,27 @@
+<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>

playground/src/views/demos/features/watermark/index.vue

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

playground/src/views/demos/nested/menu-1.vue

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

playground/src/views/demos/nested/menu-2-1.vue

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

playground/src/views/demos/nested/menu-3-1.vue

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

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>

playground/src/views/examples/ellipsis/data.ts

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

playground/src/views/examples/ellipsis/index.vue

@@ -0,0 +1,42 @@
+<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>