feat: Dynamically get the menu from the back end

packages/business/access/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@vben/access",
+  "version": "5.0.0",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/business/permissions"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "dependencies": {
+    "@vben-core/preferences": "workspace:*",
+    "@vben-core/stores": "workspace:*",
+    "@vben-core/toolkit": "workspace:*",
+    "@vben/locales": "workspace:*",
+    "vue": "^3.4.31",
+    "vue-router": "^4.4.0"
+  },
+  "devDependencies": {
+    "@vben/types": "workspace:*"
+  }
+}

packages/business/access/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config/postcss';

packages/business/access/src/authority.vue

@@ -0,0 +1,26 @@
+<!--
+ Access control component for fine-grained access control.
+-->
+<script lang="ts" setup>
+interface Props {
+  /**
+   * Specified role is visible
+   * - When the permission mode is 'frontend', the value can be a role value.
+   * - When the permission mode is 'backend', the value can be a code permission value.
+   * @default ''
+   */
+  value?: string[];
+}
+
+defineOptions({
+  name: 'Authority',
+});
+
+withDefaults(defineProps<Props>(), {
+  value: undefined,
+});
+</script>
+
+<template>
+  <slot></slot>
+</template>

packages/business/access/src/generate-menu-and-routes/generate-menus.test.ts

@@ -0,0 +1,230 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { generateMenus } from './generate-menus'; // 替换为您的实际路径
+import {
+  type RouteRecordRaw,
+  type Router,
+  createRouter,
+  createWebHistory,
+} from 'vue-router';
+
+// Nested route setup to test child inclusion and hideChildrenInMenu functionality
+
+describe('generateMenus', () => {
+  // 模拟路由数据
+  const mockRoutes = [
+    {
+      meta: { icon: 'home-icon', title: '首页' },
+      name: 'home',
+      path: '/home',
+    },
+    {
+      meta: { hideChildrenInMenu: true, icon: 'about-icon', title: '关于' },
+      name: 'about',
+      path: '/about',
+      children: [
+        {
+          path: 'team',
+          name: 'team',
+          meta: { icon: 'team-icon', title: '团队' },
+        },
+      ],
+    },
+  ] as RouteRecordRaw[];
+
+  // 模拟 Vue 路由器实例
+  const mockRouter = {
+    getRoutes: vi.fn(() => [
+      { name: 'home', path: '/home' },
+      { name: 'about', path: '/about' },
+      { name: 'team', path: '/about/team' },
+    ]),
+  };
+
+  it('the correct menu list should be generated according to the route', async () => {
+    const expectedMenus = [
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: 'home-icon',
+        name: '首页',
+        order: undefined,
+        parent: undefined,
+        parents: undefined,
+        path: '/home',
+        children: [],
+      },
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: 'about-icon',
+        name: '关于',
+        order: undefined,
+        parent: undefined,
+        parents: undefined,
+        path: '/about',
+        children: [],
+      },
+    ];
+
+    const menus = await generateMenus(mockRoutes, mockRouter as any);
+    expect(menus).toEqual(expectedMenus);
+  });
+
+  it('includes additional meta properties in menu items', async () => {
+    const mockRoutesWithMeta = [
+      {
+        meta: { icon: 'user-icon', order: 1, title: 'Profile' },
+        name: 'profile',
+        path: '/profile',
+      },
+    ] as RouteRecordRaw[];
+
+    const menus = await generateMenus(mockRoutesWithMeta, mockRouter as any);
+    expect(menus).toEqual([
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: 'user-icon',
+        name: 'Profile',
+        order: 1,
+        parent: undefined,
+        parents: undefined,
+        path: '/profile',
+        children: [],
+      },
+    ]);
+  });
+
+  it('handles dynamic route parameters correctly', async () => {
+    const mockRoutesWithParams = [
+      {
+        meta: { icon: 'details-icon', title: 'User Details' },
+        name: 'userDetails',
+        path: '/users/:userId',
+      },
+    ] as RouteRecordRaw[];
+
+    const menus = await generateMenus(mockRoutesWithParams, mockRouter as any);
+    expect(menus).toEqual([
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: 'details-icon',
+        name: 'User Details',
+        order: undefined,
+        parent: undefined,
+        parents: undefined,
+        path: '/users/:userId',
+        children: [],
+      },
+    ]);
+  });
+
+  it('processes routes with redirects correctly', async () => {
+    const mockRoutesWithRedirect = [
+      {
+        name: 'redirectedRoute',
+        path: '/old-path',
+        redirect: '/new-path',
+      },
+      {
+        meta: { icon: 'path-icon', title: 'New Path' },
+        name: 'newPath',
+        path: '/new-path',
+      },
+    ] as RouteRecordRaw[];
+
+    const menus = await generateMenus(
+      mockRoutesWithRedirect,
+      mockRouter as any,
+    );
+    expect(menus).toEqual([
+      // Assuming your generateMenus function excludes redirect routes from the menu
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: undefined,
+        name: 'redirectedRoute',
+        order: undefined,
+        parent: undefined,
+        parents: undefined,
+        path: '/old-path',
+        children: [],
+      },
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: 'path-icon',
+        name: 'New Path',
+        order: undefined,
+        parent: undefined,
+        parents: undefined,
+        path: '/new-path',
+        children: [],
+      },
+    ]);
+  });
+
+  const routes: any = [
+    {
+      meta: { order: 2, title: 'Home' },
+      name: 'home',
+      path: '/',
+    },
+    {
+      meta: { order: 1, title: 'About' },
+      name: 'about',
+      path: '/about',
+    },
+  ];
+
+  const router: Router = createRouter({
+    history: createWebHistory(),
+    routes,
+  });
+
+  it('should generate menu list with correct order', async () => {
+    const menus = await generateMenus(routes, router);
+    const expectedMenus = [
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: undefined,
+        name: 'About',
+        order: 1,
+        parent: undefined,
+        parents: undefined,
+        path: '/about',
+        children: [],
+      },
+      {
+        badge: undefined,
+        badgeType: undefined,
+        badgeVariants: undefined,
+        icon: undefined,
+        name: 'Home',
+        order: 2,
+        parent: undefined,
+        parents: undefined,
+        path: '/',
+        children: [],
+      },
+    ];
+
+    expect(menus).toEqual(expectedMenus);
+  });
+
+  it('should handle empty routes', async () => {
+    const emptyRoutes: any[] = [];
+    const menus = await generateMenus(emptyRoutes, router);
+    expect(menus).toEqual([]);
+  });
+});

packages/business/access/src/generate-menu-and-routes/generate-menus.ts

@@ -0,0 +1,73 @@
+import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben/types';
+import type { RouteRecordRaw, Router } from 'vue-router';
+
+import { mapTree } from '@vben-core/toolkit';
+
+/**
+ * 根据 routes 生成菜单列表
+ * @param routes
+ */
+async function generateMenus(
+  routes: RouteRecordRaw[],
+  router: Router,
+): Promise<MenuRecordRaw[]> {
+  // 将路由列表转换为一个以 name 为键的对象映射
+  // 获取所有router最终的path及name
+  const finalRoutesMap: { [key: string]: string } = Object.fromEntries(
+    router.getRoutes().map(({ name, path }) => [name, path]),
+  );
+
+  let menus = mapTree<ExRouteRecordRaw, MenuRecordRaw>(routes, (route) => {
+    // 路由表的路径写法有多种，这里从router获取到最终的path并赋值
+    const path = finalRoutesMap[route.name as string] ?? route.path;
+
+    // 转换为菜单结构
+    // const path = matchRoute?.path ?? route.path;
+    const { meta, name: routeName, redirect, children } = route;
+    const {
+      badge,
+      badgeType,
+      badgeVariants,
+      hideChildrenInMenu = false,
+      icon,
+      link,
+      order,
+      title = '',
+    } = meta || {};
+
+    const name = (title || routeName || '') as string;
+
+    // 隐藏子菜单
+    const resultChildren = hideChildrenInMenu
+      ? []
+      : (children as MenuRecordRaw[]);
+
+    // 将菜单的所有父级和父级菜单记录到菜单项内
+    if (resultChildren && resultChildren.length > 0) {
+      resultChildren.forEach((child) => {
+        child.parents = [...(route.parents || []), path];
+        child.parent = path;
+      });
+    }
+    // 隐藏子菜单
+    const resultPath = hideChildrenInMenu ? redirect || path : link || path;
+    return {
+      badge,
+      badgeType,
+      badgeVariants,
+      icon,
+      name,
+      order,
+      parent: route.parent,
+      parents: route.parents,
+      path: resultPath as string,
+      children: resultChildren || [],
+    };
+  });
+
+  // 对菜单进行排序
+  menus = menus.sort((a, b) => (a.order || 999) - (b.order || 999));
+  return menus;
+}
+
+export { generateMenus };

packages/business/access/src/generate-menu-and-routes/generate-routes-backend.ts

@@ -0,0 +1,87 @@
+import type {
+  ComponentRecordType,
+  RouteRecordStringComponent,
+} from '@vben/types';
+import type { RouteRecordRaw } from 'vue-router';
+
+import type { GeneratorMenuAndRoutesOptions } from '../types';
+
+import { $t } from '@vben/locales';
+import { mapTree } from '@vben-core/toolkit';
+
+/**
+ * 动态生成路由 - 后端方式
+ */
+async function generateRoutesByBackend(
+  options: GeneratorMenuAndRoutesOptions,
+): Promise<RouteRecordRaw[]> {
+  const { fetchMenuListAsync, layoutMap, pageMap } = options;
+
+  try {
+    const menuRoutes = await fetchMenuListAsync?.();
+    if (!menuRoutes) {
+      return [];
+    }
+
+    const normalizePageMap: ComponentRecordType = {};
+
+    for (const [key, value] of Object.entries(pageMap)) {
+      normalizePageMap[normalizeViewPath(key)] = value;
+    }
+
+    const routes = convertRoutes(menuRoutes, layoutMap, normalizePageMap);
+    return routes;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+}
+
+function convertRoutes(
+  routes: RouteRecordStringComponent[],
+  layoutMap: ComponentRecordType,
+  pageMap: ComponentRecordType,
+): RouteRecordRaw[] {
+  return mapTree(routes, (node) => {
+    const route = node as unknown as RouteRecordRaw;
+    const { component, name } = node;
+
+    if (!name) {
+      console.error('route name is required', route);
+    }
+
+    // layout转换
+    if (component && layoutMap[component]) {
+      route.component = layoutMap[component];
+      // 页面组件转换
+    } else if (component) {
+      const normalizePath = normalizeViewPath(component);
+      route.component =
+        pageMap[
+          normalizePath.endsWith('.vue')
+            ? normalizePath
+            : `${normalizePath}.vue`
+        ];
+    }
+
+    // 国际化转化
+    if (route.meta?.title) {
+      route.meta.title = $t(route.meta.title);
+    }
+
+    return route;
+  });
+}
+
+function normalizeViewPath(path: string): string {
+  // 去除相对路径前缀
+  const normalizedPath = path.replace(/^(\.\/|\.\.\/)+/, '');
+
+  // 确保路径以 '/' 开头
+  const viewPath = normalizedPath.startsWith('/')
+    ? normalizedPath
+    : `/${normalizedPath}`;
+
+  return viewPath.replace(/^\/views/, '');
+}
+export { generateRoutesByBackend };

packages/business/access/src/generate-menu-and-routes/generate-routes-frontend.test.ts

@@ -0,0 +1,136 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { describe, expect, it } from 'vitest';
+
+import {
+  generateRoutesByFrontend,
+  hasAuthority,
+  hasVisible,
+} from './generate-routes-frontend';
+
+// Mock 路由数据
+const mockRoutes = [
+  {
+    meta: {
+      authority: ['admin', 'user'],
+      hideInMenu: false,
+    },
+    path: '/dashboard',
+    children: [
+      {
+        path: '/dashboard/overview',
+        meta: { authority: ['admin'], hideInMenu: false },
+      },
+      {
+        path: '/dashboard/stats',
+        meta: { authority: ['user'], hideInMenu: true },
+      },
+    ],
+  },
+  {
+    meta: { authority: ['admin'], hideInMenu: false },
+    path: '/settings',
+  },
+  {
+    meta: { hideInMenu: false },
+    path: '/profile',
+  },
+] as RouteRecordRaw[];
+
+describe('hasAuthority', () => {
+  it('should return true if there is no authority defined', () => {
+    expect(hasAuthority(mockRoutes[2], ['admin'])).toBe(true);
+  });
+
+  it('should return true if the user has the required authority', () => {
+    expect(hasAuthority(mockRoutes[0], ['admin'])).toBe(true);
+  });
+
+  it('should return false if the user does not have the required authority', () => {
+    expect(hasAuthority(mockRoutes[1], ['user'])).toBe(false);
+  });
+});
+
+describe('hasVisible', () => {
+  it('should return true if hideInMenu is not set or false', () => {
+    expect(hasVisible(mockRoutes[0])).toBe(true);
+    expect(hasVisible(mockRoutes[2])).toBe(true);
+  });
+
+  it('should return false if hideInMenu is true', () => {
+    expect(hasVisible(mockRoutes[0].children?.[1])).toBe(false);
+  });
+});
+
+describe('generateRoutesByFrontend', () => {
+  it('should filter routes based on authority and visibility', async () => {
+    const generatedRoutes = await generateRoutesByFrontend(mockRoutes, [
+      'user',
+    ]);
+    // The user should have access to /dashboard/stats, but it should be filtered out because it's not visible
+    expect(generatedRoutes).toEqual([
+      {
+        meta: { authority: ['admin', 'user'], hideInMenu: false },
+        path: '/dashboard',
+        children: [],
+      },
+      // Note: We expect /settings to be filtered out because the user does not have 'admin' authority
+      {
+        meta: { hideInMenu: false },
+        path: '/profile',
+      },
+    ]);
+  });
+
+  it('should handle routes without children', async () => {
+    const generatedRoutes = await generateRoutesByFrontend(mockRoutes, [
+      'user',
+    ]);
+    expect(generatedRoutes).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          path: '/profile', // This route has no children and should be included
+        }),
+      ]),
+    );
+  });
+
+  it('should handle empty roles array', async () => {
+    const generatedRoutes = await generateRoutesByFrontend(mockRoutes, []);
+    expect(generatedRoutes).toEqual(
+      expect.arrayContaining([
+        // Only routes without authority should be included
+        expect.objectContaining({
+          path: '/profile',
+        }),
+      ]),
+    );
+    expect(generatedRoutes).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          path: '/dashboard',
+        }),
+        expect.objectContaining({
+          path: '/settings',
+        }),
+      ]),
+    );
+  });
+
+  it('should handle missing meta fields', async () => {
+    const routesWithMissingMeta = [
+      { path: '/path1' }, // No meta
+      { meta: {}, path: '/path2' }, // Empty meta
+      { meta: { authority: ['admin'] }, path: '/path3' }, // Only authority
+    ];
+    const generatedRoutes = await generateRoutesByFrontend(
+      routesWithMissingMeta as RouteRecordRaw[],
+      ['admin'],
+    );
+    expect(generatedRoutes).toEqual([
+      { path: '/path1' },
+      { meta: {}, path: '/path2' },
+      { meta: { authority: ['admin'] }, path: '/path3' },
+    ]);
+  });
+});

packages/business/access/src/generate-menu-and-routes/generate-routes-frontend.ts

@@ -0,0 +1,63 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { filterTree, mapTree } from '@vben-core/toolkit';
+/**
+ * 动态生成路由 - 前端方式
+ */
+async function generateRoutesByFrontend(
+  routes: RouteRecordRaw[],
+  roles: string[],
+  forbiddenComponent?: RouteRecordRaw['component'],
+): Promise<RouteRecordRaw[]> {
+  // 根据角色标识过滤路由表,判断当前用户是否拥有指定权限
+  const finalRoutes = filterTree(routes, (route) => {
+    return hasVisible(route) && hasAuthority(route, roles);
+  });
+
+  if (!forbiddenComponent) {
+    return finalRoutes;
+  }
+
+  // 如果有禁止访问的页面，将禁止访问的页面替换为403页面
+  return mapTree(finalRoutes, (route) => {
+    if (menuHasVisibleWithForbidden(route)) {
+      route.component = forbiddenComponent;
+    }
+    return route;
+  });
+}
+
+/**
+ * 判断路由是否有权限访问
+ * @param route
+ * @param access
+ */
+function hasAuthority(route: RouteRecordRaw, access: string[]) {
+  const authority = route.meta?.authority;
+
+  if (!authority) {
+    return true;
+  }
+  return (
+    access.some((value) => authority.includes(value)) ||
+    menuHasVisibleWithForbidden(route)
+  );
+}
+
+/**
+ * 判断路由是否需要在菜单中显示
+ * @param route
+ */
+function hasVisible(route?: RouteRecordRaw) {
+  return !route?.meta?.hideInMenu;
+}
+
+/**
+ * 判断路由是否在菜单中显示，但是访问会被重定向到403
+ * @param route
+ */
+function menuHasVisibleWithForbidden(route: RouteRecordRaw) {
+  return !!route.meta?.menuVisibleWithForbidden;
+}
+
+export { generateRoutesByFrontend, hasAuthority, hasVisible };

packages/business/access/src/generate-menu-and-routes/index.ts

@@ -0,0 +1,76 @@
+import type { accessModeType } from '@vben-core/preferences';
+import type { RouteRecordRaw } from 'vue-router';
+
+import type { GeneratorMenuAndRoutesOptions } from '../types';
+
+import { generateMenus } from './generate-menus';
+import { generateRoutesByBackend } from './generate-routes-backend';
+import { generateRoutesByFrontend } from './generate-routes-frontend';
+
+async function generateMenusAndRoutes(
+  mode: accessModeType,
+  options: GeneratorMenuAndRoutesOptions,
+) {
+  const { router } = options;
+  // 生成路由
+  const accessibleRoutes = await generateRoutes(mode, options);
+
+  // 动态添加到router实例内
+  accessibleRoutes.forEach((route) => router.addRoute(route));
+
+  // 生成菜单
+  const accessibleMenus = await generateMenus1(mode, accessibleRoutes, options);
+
+  return { accessibleMenus, accessibleRoutes };
+}
+
+/**
+ * Generate routes
+ * @param mode
+ */
+async function generateRoutes(
+  mode: accessModeType,
+  options: GeneratorMenuAndRoutesOptions,
+) {
+  const { forbiddenComponent, roles, routes } = options;
+
+  switch (mode) {
+    // 允许所有路由访问，不做任何过滤处理
+    case 'allow-all': {
+      return routes;
+    }
+    case 'frontend': {
+      return await generateRoutesByFrontend(
+        routes,
+        roles || [],
+        forbiddenComponent,
+      );
+    }
+    case 'backend': {
+      return await generateRoutesByBackend(options);
+    }
+    default: {
+      return routes;
+    }
+  }
+}
+
+async function generateMenus1(
+  mode: accessModeType,
+  routes: RouteRecordRaw[],
+  options: GeneratorMenuAndRoutesOptions,
+) {
+  const { router } = options;
+  switch (mode) {
+    case 'allow-all':
+    case 'frontend':
+    case 'backend': {
+      return await generateMenus(routes, router);
+    }
+    default: {
+      return [];
+    }
+  }
+}
+
+export { generateMenusAndRoutes };

packages/business/access/src/index.ts

@@ -0,0 +1,4 @@
+export { default as Authority } from './authority.vue';
+export * from './generate-menu-and-routes';
+export type * from './types';
+export * from './use-access';

packages/business/access/src/types.ts

@@ -0,0 +1,17 @@
+import type {
+  ComponentRecordType,
+  RouteRecordStringComponent,
+} from '@vben/types';
+import type { RouteRecordRaw, Router } from 'vue-router';
+
+interface GeneratorMenuAndRoutesOptions {
+  fetchMenuListAsync?: () => Promise<RouteRecordStringComponent[]>;
+  forbiddenComponent?: RouteRecordRaw['component'];
+  layoutMap?: ComponentRecordType;
+  pageMap?: ComponentRecordType;
+  roles?: string[];
+  router: Router;
+  routes: RouteRecordRaw[];
+}
+
+export type { GeneratorMenuAndRoutesOptions };

packages/business/access/src/use-access.ts

@@ -0,0 +1,28 @@
+import { computed } from 'vue';
+
+import { preferences } from '@vben-core/preferences';
+import { useAccessStore } from '@vben-core/stores';
+
+function useAccess() {
+  const accessStore = useAccessStore();
+  const currentAccessMode = computed(() => {
+    return preferences.app.accessMode;
+  });
+
+  /**
+   * 更改账号角色
+   * @param roles
+   */
+  async function changeRoles(roles: string[]): Promise<void> {
+    if (preferences.app.accessMode !== 'frontend') {
+      throw new Error(
+        'The current access mode is not frontend, so the role cannot be changed',
+      );
+    }
+    accessStore.setUserRoles(roles);
+  }
+
+  return { changeRoles, currentAccessMode };
+}
+
+export { useAccess };

packages/business/access/tailwind.config.mjs

@@ -0,0 +1 @@
+export { default } from '@vben/tailwind-config';

packages/business/access/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "compilerOptions": {
+    "types": ["@vben/types/global"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

packages/business/access/vite.config.mts

@@ -0,0 +1,3 @@
+import { defineConfig } from '@vben/vite-config';
+
+export default defineConfig();

packages/business/chart-ui/src/echarts/use-echarts.ts

@@ -5,7 +5,7 @@ import type EchartsUI from './echarts-ui.vue';
 import type { Ref } from 'vue';
 import { computed, nextTick, watch } from 'vue';
 
-import { usePreferences } from '@vben-core/preferences';
+import { preferences, usePreferences } from '@vben-core/preferences';
 
 import {
   tryOnUnmounted,
@@ -91,9 +91,24 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
       chartInstance.dispose();
       initCharts();
       renderEcharts(cacheOptions);
+      resize();
     }
   });
 
+  watch(
+    [
+      () => preferences.sidebar.collapsed,
+      () => preferences.sidebar.extraCollapse,
+      () => preferences.sidebar.hidden,
+    ],
+    () => {
+      // 折叠动画200ms
+      setTimeout(() => {
+        resize();
+      }, 200);
+    },
+  );
+
   tryOnUnmounted(() => {
     // 销毁实例，释放资源
     chartInstance?.dispose();

packages/business/layouts/src/basic/content/content.vue

@@ -3,14 +3,14 @@ import type { RouteLocationNormalizedLoaded } from 'vue-router';
 
 import { preferences, usePreferences } from '@vben-core/preferences';
 import { Spinner } from '@vben-core/shadcn-ui';
-import { storeToRefs, useTabsStore } from '@vben-core/stores';
+import { storeToRefs, useTabbarStore } from '@vben-core/stores';
 
 import { IFrameRouterView } from '../../iframe';
 import { useContentSpinner } from './use-content-spinner';
 
 defineOptions({ name: 'LayoutContent' });
 
-const tabsStore = useTabsStore();
+const tabsStore = useTabbarStore();
 const { keepAlive } = usePreferences();
 const { spinning } = useContentSpinner();
 

packages/business/layouts/src/basic/tabbar/use-tabs.ts

@@ -19,14 +19,14 @@ import {
   MdiPin,
   MdiPinOff,
 } from '@vben-core/iconify';
-import { storeToRefs, useAccessStore, useTabsStore } from '@vben-core/stores';
+import { storeToRefs, useAccessStore, useTabbarStore } from '@vben-core/stores';
 import { filterTree } from '@vben-core/toolkit';
 
 function useTabs() {
   const router = useRouter();
   const route = useRoute();
   const accessStore = useAccessStore();
-  const tabsStore = useTabsStore();
+  const tabsStore = useTabbarStore();
   const { accessMenus } = storeToRefs(accessStore);
 
   const currentActive = computed(() => {

packages/business/layouts/src/iframe/iframe-router-view.vue

@@ -6,12 +6,12 @@ import { useRoute } from 'vue-router';
 
 import { preferences } from '@vben-core/preferences';
 import { Spinner } from '@vben-core/shadcn-ui';
-import { useTabsStore } from '@vben-core/stores';
+import { useTabbarStore } from '@vben-core/stores';
 
 defineOptions({ name: 'IFrameRouterView' });
 
 const spinningList = ref<boolean[]>([]);
-const tabsStore = useTabsStore();
+const tabsStore = useTabbarStore();
 const route = useRoute();
 
 const enableTabbar = computed(() => preferences.tabbar.enable);

packages/business/universal-ui/src/about/about.vue

@@ -107,7 +107,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
 
 <template>
   <div class="m-5">
-    <div class="bg-card border-border rounded-md border p-5 shadow">
+    <div class="card-box p-5">
       <div>
         <h3 class="text-foreground text-2xl font-semibold leading-7">
           {{ title }}
@@ -135,7 +135,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
       </div>
     </div>
 
-    <div class="bg-card border-border mt-6 rounded-md border p-5">
+    <div class="card-box mt-6 p-5">
       <div>
         <h5 class="text-foreground text-lg">生产环境依赖</h5>
       </div>
@@ -154,7 +154,7 @@ const devDependenciesItems = Object.keys(devDependencies).map((key) => ({
         </dl>
       </div>
     </div>
-    <div class="bg-card border-border mt-6 rounded-md border p-5">
+    <div class="card-box mt-6 p-5">
       <div>
         <h5 class="text-foreground text-lg">开发环境依赖</h5>
       </div>

packages/business/universal-ui/src/dashboard/analysis/analysis-charts-tabs.vue

@@ -23,9 +23,7 @@ const defaultValue = computed(() => {
 </script>
 
 <template>
-  <div
-    class="bg-card border-border w-full rounded-xl border px-4 pb-5 pt-3 shadow"
-  >
+  <div class="card-box w-full px-4 pb-5 pt-3 shadow">
     <Tabs :default-value="defaultValue">
       <TabsList>
         <template v-for="tab in tabs" :key="tab.label">

packages/business/universal-ui/src/dashboard/workbench/workbench-header.vue

@@ -14,7 +14,7 @@ withDefaults(defineProps<Props>(), {
 });
 </script>
 <template>
-  <div class="bg-card border-border rounded-xl p-4 py-6 shadow lg:flex">
+  <div class="card-box p-4 py-6 lg:flex">
     <VbenAvatar :src="avatar" class="size-20" />
     <div
       v-if="$slots.title || $slots.description"