refactor(project): simplified part of the package, code optimization

packages/@core/forward/helpers/package.json

@@ -36,6 +36,7 @@
     }
   },
   "dependencies": {
+    "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "vue-router": "^4.4.0"
   }

packages/@core/forward/helpers/src/generate-menus.ts

@@ -1,4 +1,4 @@
-import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben/types';
+import type { ExRouteRecordRaw, MenuRecordRaw } from '@vben-core/typings';
 import type { RouteRecordRaw, Router } from 'vue-router';
 
 import { mapTree } from '@vben-core/toolkit';

packages/@core/forward/helpers/src/generate-routes-backend.ts

@@ -1,19 +1,17 @@
-import type {
-  ComponentRecordType,
-  RouteRecordStringComponent,
-} from '@vben/types';
 import type { RouteRecordRaw } from 'vue-router';
 
-import type { GeneratorMenuAndRoutesOptions } from '../types';
-
-import { $t } from '@vben-core/locales';
 import { mapTree } from '@vben-core/toolkit';
+import {
+  ComponentRecordType,
+  GenerateMenuAndRoutesOptions,
+  RouteRecordStringComponent,
+} from '@vben-core/typings';
 
 /**
  * 动态生成路由 - 后端方式
  */
 async function generateRoutesByBackend(
-  options: GeneratorMenuAndRoutesOptions,
+  options: GenerateMenuAndRoutesOptions,
 ): Promise<RouteRecordRaw[]> {
   const { fetchMenuListAsync, layoutMap = {}, pageMap = {} } = options;
 
@@ -65,11 +63,6 @@ function convertRoutes(
         ];
     }
 
-    // 国际化转化
-    if (route.meta?.title) {
-      route.meta.title = $t(route.meta.title);
-    }
-
     return route;
   });
 }
@@ -83,6 +76,7 @@ function normalizeViewPath(path: string): string {
     ? normalizedPath
     : `/${normalizedPath}`;
 
+  // TODO: 这里耦合了vben-admin的目录结构
   return viewPath.replace(/^\/views/, '');
 }
 export { generateRoutesByBackend };

packages/@core/forward/helpers/src/generate-routes-frontend.ts

@@ -1,6 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 import { filterTree, mapTree } from '@vben-core/toolkit';
+
 /**
  * 动态生成路由 - 前端方式
  */

packages/@core/forward/helpers/src/index.ts

@@ -1,2 +1,5 @@
 export * from './find-menu-by-path';
+export * from './generate-menus';
+export * from './generate-routes-backend';
+export * from './generate-routes-frontend';
 export * from './merge-route-modules';

packages/@core/forward/preferences/package.json

@@ -29,8 +29,6 @@
     }
   },
   "dependencies": {
-    "@vben-core/cache": "workspace:*",
-    "@vben-core/colorful": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",

packages/@core/forward/preferences/src/constants.ts

@@ -1,6 +1,7 @@
-import type { BuiltinThemeType } from '@vben-core/typings';
-
-import type { SupportedLanguagesType } from './types';
+import type {
+  BuiltinThemeType,
+  SupportedLanguagesType,
+} from '@vben-core/typings';
 
 interface Language {
   key: SupportedLanguagesType;

packages/@core/forward/preferences/src/preferences.test.ts

@@ -5,17 +5,6 @@ import { PreferenceManager, isDarkTheme } from './preferences';
 
 describe('preferences', () => {
   let preferenceManager: PreferenceManager;
-  vi.mock('@vben-core/cache', () => {
-    return {
-      StorageManager: vi.fn().mockImplementation(() => {
-        return {
-          getItem: vi.fn(),
-          removeItem: vi.fn(),
-          setItem: vi.fn(),
-        };
-      }),
-    };
-  });
 
   // 模拟 window.matchMedia 方法
   vi.stubGlobal(

packages/@core/forward/preferences/src/preferences.ts

@@ -4,9 +4,12 @@ import type { Preferences } from './types';
 
 import { markRaw, reactive, readonly, watch } from 'vue';
 
-import { StorageManager } from '@vben-core/cache';
-import { generatorColorVariables } from '@vben-core/colorful';
-import { merge, updateCSSVariables } from '@vben-core/toolkit';
+import {
+  StorageManager,
+  generatorColorVariables,
+  merge,
+  updateCSSVariables,
+} from '@vben-core/toolkit';
 
 import {
   breakpointsTailwind,

packages/@core/forward/preferences/src/types.ts

@@ -1,28 +1,18 @@
 import type {
+  AccessModeType,
+  AuthPageLayoutType,
+  BreadcrumbStyleType,
   BuiltinThemeType,
   ContentCompactType,
   LayoutHeaderModeType,
   LayoutType,
+  LoginExpiredModeType,
+  NavigationStyleType,
+  PageTransitionType,
   SupportedLanguagesType,
   ThemeModeType,
 } from '@vben-core/typings';
 
-/**
- * 登录过期模式
- * 'modal' 弹窗模式 | 'page' 页面模式
- */
-type LoginExpiredModeType = 'modal' | 'page';
-
-type BreadcrumbStyleType = 'background' | 'normal';
-
-type AccessModeType = 'allow-all' | 'backend' | 'frontend';
-
-type NavigationStyleType = 'plain' | 'rounded';
-
-type PageTransitionType = 'fade' | 'fade-down' | 'fade-slide' | 'fade-up';
-
-type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
-
 interface AppPreferences {
   /** 权限模式 */
   accessMode: AccessModeType;
@@ -236,28 +226,17 @@ interface Preferences {
 type PreferencesKeys = keyof Preferences;
 
 export type {
-  AccessModeType,
   AppPreferences,
-  AuthPageLayoutType,
   BreadcrumbPreferences,
-  BreadcrumbStyleType,
-  ContentCompactType,
   FooterPreferences,
   HeaderPreferences,
-  LayoutHeaderModeType,
-  LayoutType,
-  LoginExpiredModeType,
   LogoPreferences,
   NavigationPreferences,
-  NavigationStyleType,
-  PageTransitionType,
   Preferences,
   PreferencesKeys,
   ShortcutKeyPreferences,
   SidebarPreferences,
-  SupportedLanguagesType,
   TabbarPreferences,
-  ThemeModeType,
   ThemePreferences,
   TransitionPreferences,
   WidgetPreferences,

packages/@core/shared/cache/build.config.ts

@@ -1,7 +0,0 @@
-import { defineBuildConfig } from 'unbuild';
-
-export default defineBuildConfig({
-  clean: true,
-  declaration: true,
-  entries: ['src/index'],
-});

packages/@core/shared/cache/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "@vben-core/cache",
-  "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/@vben-core/shared/cache"
-  },
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "build": "pnpm unbuild",
-    "stub": "pnpm unbuild --stub"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts",
-      "default": "./dist/index.mjs"
-    }
-  },
-  "publishConfig": {
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.mjs"
-      }
-    }
-  },
-  "dependencies": {},
-  "devDependencies": {}
-}

packages/@core/shared/cache/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@vben/tsconfig/library.json",
-  "include": ["src"],
-  "exclude": ["node_modules"]
-}

packages/@core/shared/colorful/build.config.ts

@@ -1,7 +0,0 @@
-import { defineBuildConfig } from 'unbuild';
-
-export default defineBuildConfig({
-  clean: true,
-  declaration: true,
-  entries: ['src/index'],
-});

packages/@core/shared/colorful/package.json

@@ -1,42 +0,0 @@
-{
-  "name": "@vben-core/colorful",
-  "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/@vben-core/shared/colorful"
-  },
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "build": "pnpm unbuild",
-    "stub": "pnpm unbuild --stub"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": false,
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts",
-      "default": "./dist/index.mjs"
-    }
-  },
-  "publishConfig": {
-    "exports": {
-      ".": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.mjs"
-      }
-    }
-  },
-  "dependencies": {
-    "@ant-design/colors": "^7.1.0",
-    "@ctrl/tinycolor": "^4.1.0"
-  }
-}

packages/@core/shared/colorful/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@vben/tsconfig/library.json",
-  "include": ["src"],
-  "exclude": ["node_modules"]
-}

packages/@core/shared/design-tokens/README.md

@@ -1,3 +0,0 @@
-# @vben-core/design-tokens
-
-用于维护全局所有的 css 变量，它由 vite 插件在全局注入，不需要手动引入

packages/@core/shared/design-tokens/package.json

@@ -1,39 +0,0 @@
-{
-  "name": "@vben-core/design-tokens",
-  "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/@vben-core/shared/design-tokens"
-  },
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "build": "pnpm vite build",
-    "dts": "vue-tsc --declaration --emitDeclarationOnly --declarationDir dist",
-    "prepublishOnly": "npm run build"
-  },
-  "files": [
-    "dist"
-  ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "main": "./dist/index.css",
-  "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts",
-      "default": "./dist/index.css"
-    }
-  },
-  "publishConfig": {
-    "exports": {
-      ".": {
-        "default": "./dist/index.mjs"
-      }
-    }
-  }
-}

packages/@core/shared/design-tokens/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "@vben/tsconfig/library.json",
-  "include": ["src"],
-  "exclude": ["node_modules"]
-}

packages/@core/shared/design-tokens/vite.config.mts

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

packages/@core/shared/design/src/index.ts

@@ -1,5 +1,6 @@
 import './scss/index.scss';
 import './css/tailwind.css';
 import './css/nprogress.css';
+import './design-tokens';
 
 export {};

packages/@core/shared/toolkit/package.json

@@ -36,6 +36,8 @@
     }
   },
   "dependencies": {
+    "@ant-design/colors": "^7.1.0",
+    "@ctrl/tinycolor": "^4.1.0",
     "@vue/shared": "^3.4.31",
     "clsx": "^2.1.1",
     "defu": "^6.1.4",

packages/@core/shared/toolkit/src/colorful/convert.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { convertToHsl, convertToHslCssVar, isValidColor } from './utils';
+import { convertToHsl, convertToHslCssVar, isValidColor } from './convert';
 
 describe('color conversion functions', () => {
   it('should correctly convert color to HSL format', () => {

packages/@core/shared/toolkit/src/colorful/generator.ts

@@ -1,6 +1,6 @@
 import { generate } from '@ant-design/colors';
 
-import { convertToHslCssVar } from './utils';
+import { convertToHslCssVar } from './convert';
 
 export * from '@ant-design/colors';
 

packages/@core/shared/toolkit/src/colorful/index.ts

@@ -1,2 +1,2 @@
+export * from './convert';
 export * from './generator';
-export * from './utils';

packages/@core/shared/toolkit/src/index.ts

@@ -1,4 +1,6 @@
+export * from './cache';
 export * from './cn';
+export * from './colorful';
 export * from './diff';
 export * from './dom';
 export * from './inference';

packages/@core/shared/typings/src/app.d.ts

@@ -33,11 +33,33 @@ type ContentCompactType = 'compact' | 'wide';
 
 type LayoutHeaderModeType = 'auto' | 'auto-scroll' | 'fixed' | 'static';
 
+/**
+ * 登录过期模式
+ * 'modal' 弹窗模式 | 'page' 页面模式
+ */
+type LoginExpiredModeType = 'modal' | 'page';
+
+type BreadcrumbStyleType = 'background' | 'normal';
+
+type AccessModeType = 'allow-all' | 'backend' | 'frontend';
+
+type NavigationStyleType = 'plain' | 'rounded';
+
+type PageTransitionType = 'fade' | 'fade-down' | 'fade-slide' | 'fade-up';
+
+type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
+
 export type {
+  AccessModeType,
+  AuthPageLayoutType,
+  BreadcrumbStyleType,
   BuiltinThemeType,
   ContentCompactType,
   LayoutHeaderModeType,
   LayoutType,
+  LoginExpiredModeType,
+  NavigationStyleType,
+  PageTransitionType,
   SupportedLanguagesType,
   ThemeModeType,
 };

packages/@core/shared/typings/src/basic.d.ts

@@ -0,0 +1,33 @@
+interface BasicOption {
+  label: string;
+  value: string;
+}
+
+interface SelectOption extends BasicOption {}
+
+interface TabsOption extends BasicOption {}
+
+interface BasicUserInfo {
+  /**
+   * 头像
+   */
+  avatar: string;
+  /**
+   * 用户昵称
+   */
+  realName: string;
+  /**
+   * 用户角色
+   */
+  roles?: string[];
+  /**
+   * 用户id
+   */
+  userId: string;
+  /**
+   * 用户名
+   */
+  username: string;
+}
+
+export type { BasicOption, BasicUserInfo, SelectOption, TabsOption };

packages/@core/shared/typings/src/index.ts

@@ -1,4 +1,5 @@
 export type * from './app';
+export * from './basic';
 export type * from './helper';
 export type * from './menu-record';
 export type * from './tabs';

packages/@core/shared/typings/src/vue-router.d.ts

@@ -1,3 +1,7 @@
+import type { RouteRecordRaw, Router } from 'vue-router';
+
+import type { Component } from 'vue';
+
 interface RouteMeta {
   /**
    * 是否固定标签页
@@ -91,4 +95,27 @@ interface RouteMeta {
   title: string;
 }
 
-export type { RouteMeta };
+// 定义递归类型以将 RouteRecordRaw 的 component 属性更改为 string
+type RouteRecordStringComponent<T = string> = {
+  children?: RouteRecordStringComponent<T>[];
+  component: T;
+} & Omit<RouteRecordRaw, 'children' | 'component'>;
+
+type ComponentRecordType = Record<string, () => Promise<Component>>;
+
+interface GenerateMenuAndRoutesOptions {
+  fetchMenuListAsync?: () => Promise<RouteRecordStringComponent[]>;
+  forbiddenComponent?: RouteRecordRaw['component'];
+  layoutMap?: ComponentRecordType;
+  pageMap?: ComponentRecordType;
+  roles?: string[];
+  router: Router;
+  routes: RouteRecordRaw[];
+}
+
+export type {
+  ComponentRecordType,
+  GenerateMenuAndRoutesOptions,
+  RouteMeta,
+  RouteRecordStringComponent,
+};

packages/@core/ui-kit/shadcn-ui/package.json

@@ -43,7 +43,6 @@
   },
   "dependencies": {
     "@radix-icons/vue": "^1.0.0",
-    "@vben-core/colorful": "workspace:*",
     "@vben-core/iconify": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
     "@vben-core/typings": "workspace:*",

packages/@core/ui-kit/shadcn-ui/src/components/menu-badge/menu-badge.vue

@@ -3,7 +3,7 @@ import type { MenuRecordBadgeRaw } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
-import { isValidColor } from '@vben-core/colorful';
+import { isValidColor } from '@vben-core/toolkit';
 
 import BadgeDot from './menu-badge-dot.vue';
 

packages/business/access/package.json

@@ -37,14 +37,11 @@
     }
   },
   "dependencies": {
-    "@vben-core/locales": "workspace:*",
+    "@vben-core/helpers": "workspace:*",
     "@vben-core/preferences": "workspace:*",
     "@vben-core/stores": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
-    "vue": "^3.4.31",
-    "vue-router": "^4.4.0"
-  },
-  "devDependencies": {
-    "@vben/types": "workspace:*"
+    "@vben-core/typings": "workspace:*",
+    "vue": "^3.4.31"
   }
 }

packages/business/access/src/access-control.vue

@@ -0,0 +1,43 @@
+<!--
+ Access control component for fine-grained access control.
+-->
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { useAccess } from './use-access';
+
+interface Props {
+  /**
+   * 通过什么方式来控制组件，如果是 role，则传入角色，如果是 code，则传入权限码
+   * @default 'role'
+   */
+  type?: 'code' | 'role';
+
+  /**
+   * Specified codes is visible
+   * @default []
+   */
+  value?: string[];
+}
+
+defineOptions({
+  name: 'AccessControl',
+});
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'role',
+  value: () => [],
+});
+
+const { hasAuthByCodes, hasAuthByRoles } = useAccess();
+
+const hasAuth = computed(() => {
+  const { type, value } = props;
+  return type === 'role' ? hasAuthByRoles(value) : hasAuthByCodes(value);
+});
+</script>
+
+<template>
+  <slot v-if="!value"></slot>
+  <slot v-else-if="hasAuth"></slot>
+</template>

packages/business/access/src/code-access.vue

@@ -1,29 +0,0 @@
-<!--
- Access control component for fine-grained access control.
--->
-<script lang="ts" setup>
-import { useAccess } from './use-access';
-
-interface Props {
-  /**
-   * Specified codes is visible
-   * @default []
-   */
-  value?: string[];
-}
-
-defineOptions({
-  name: 'CodeAccess',
-});
-
-withDefaults(defineProps<Props>(), {
-  value: () => [],
-});
-
-const { hasAuthByCodes } = useAccess();
-</script>
-
-<template>
-  <slot v-if="!value"></slot>
-  <slot v-else-if="hasAuthByCodes(value)"></slot>
-</template>

packages/business/access/src/generate-accessible.ts

@@ -1,17 +1,18 @@
-import type { AccessModeType } from '@vben-core/preferences';
-import type { RouteRecordRaw } from 'vue-router';
-
-import type { GeneratorMenuAndRoutesOptions } from '../types';
+import type {
+  AccessModeType,
+  GenerateMenuAndRoutesOptions,
+} from '@vben-core/typings';
 
+import {
+  generateMenus,
+  generateRoutesByBackend,
+  generateRoutesByFrontend,
+} from '@vben-core/helpers';
 import { cloneDepp } from '@vben-core/toolkit';
 
-import { generateMenus } from './generate-menus';
-import { generateRoutesByBackend } from './generate-routes-backend';
-import { generateRoutesByFrontend } from './generate-routes-frontend';
-
-async function generateMenusAndRoutes(
+async function generateAccessible(
   mode: AccessModeType,
-  options: GeneratorMenuAndRoutesOptions,
+  options: GenerateMenuAndRoutesOptions,
 ) {
   const { router } = options;
 
@@ -25,7 +26,7 @@ async function generateMenusAndRoutes(
   });
 
   // 生成菜单
-  const accessibleMenus = await generateMenus1(mode, accessibleRoutes, options);
+  const accessibleMenus = await generateMenus(accessibleRoutes, options.router);
 
   return { accessibleMenus, accessibleRoutes };
 }
@@ -36,7 +37,7 @@ async function generateMenusAndRoutes(
  */
 async function generateRoutes(
   mode: AccessModeType,
-  options: GeneratorMenuAndRoutesOptions,
+  options: GenerateMenuAndRoutesOptions,
 ) {
   const { forbiddenComponent, roles, routes } = options;
 
@@ -61,22 +62,4 @@ async function generateRoutes(
   }
 }
 
-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 };
+export { generateAccessible };

packages/business/access/src/index.ts

@@ -1,5 +1,3 @@
-export { default as CodeAccess } from './code-access.vue';
-export * from './generate-menu-and-routes';
-export { default as RoleAccess } from './role-access.vue';
-export type * from './types';
+export { default as AccessControl } from './access-control.vue';
+export * from './generate-accessible';
 export * from './use-access';

packages/business/access/src/role-access.vue

@@ -1,29 +0,0 @@
-<!--
- Access control component for fine-grained access control.
--->
-<script lang="ts" setup>
-import { useAccess } from './use-access';
-
-interface Props {
-  /**
-   * Specified role is visible
-   * @default []
-   */
-  value?: string[];
-}
-
-defineOptions({
-  name: 'RoleAccess',
-});
-
-withDefaults(defineProps<Props>(), {
-  value: undefined,
-});
-
-const { hasAuthByRoles } = useAccess();
-</script>
-
-<template>
-  <slot v-if="!value"></slot>
-  <slot v-else-if="hasAuthByRoles(value)"></slot>
-</template>

packages/business/access/src/types.ts

@@ -1,17 +0,0 @@
-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/tsconfig.json

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

packages/business/layouts/package.json

@@ -37,7 +37,6 @@
     }
   },
   "dependencies": {
-    "@vben-core/colorful": "workspace:*",
     "@vben-core/helpers": "workspace:*",
     "@vben-core/iconify": "workspace:*",
     "@vben-core/layout-ui": "workspace:*",
@@ -48,12 +47,9 @@
     "@vben-core/stores": "workspace:*",
     "@vben-core/tabs-ui": "workspace:*",
     "@vben-core/toolkit": "workspace:*",
+    "@vben-core/typings": "workspace:*",
     "@vueuse/core": "^10.11.0",
     "vue": "^3.4.31",
     "vue-router": "^4.4.0"
-  },
-  "devDependencies": {
-    "@vben-core/typings": "workspace:*",
-    "@vben/types": "workspace:*"
   }
 }

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

@@ -126,6 +126,19 @@ function useTabs() {
       disabled || !isCurrentTab || tabs.length - affixTabs.length <= 1;
 
     const menus: IContextMenuItem[] = [
+      {
+        handler: async () => {
+          if (!contentIsMaximize.value) {
+            await router.push(tab.fullPath);
+          }
+          updateContentScreen(!contentIsMaximize.value);
+        },
+        icon: contentIsMaximize.value ? IcRoundFitScreen : IcTwotoneFitScreen,
+        key: contentIsMaximize.value ? 'restore-maximize' : 'maximize',
+        text: contentIsMaximize.value
+          ? $t('preferences.tabbar.contextMenu.restoreMaximize')
+          : $t('preferences.tabbar.contextMenu.maximize'),
+      },
       {
         disabled: !isCurrentTab,
         handler: async () => {
@@ -166,22 +179,10 @@ function useTabs() {
         },
         icon: IcRoundTableView,
         key: 'open-in-new-window',
+        separator: true,
         text: $t('preferences.tabbar.contextMenu.openInNewWindow'),
       },
-      {
-        handler: async () => {
-          if (!contentIsMaximize.value) {
-            await router.push(tab.fullPath);
-          }
-          updateContentScreen(!contentIsMaximize.value);
-        },
-        icon: contentIsMaximize.value ? IcRoundFitScreen : IcTwotoneFitScreen,
-        key: contentIsMaximize.value ? 'restore-maximize' : 'maximize',
-        separator: true,
-        text: contentIsMaximize.value
-          ? $t('preferences.tabbar.contextMenu.restoreMaximize')
-          : $t('preferences.tabbar.contextMenu.maximize'),
-      },
+
       {
         disabled: closeLeftDisabled,
         handler: async () => {

packages/business/layouts/src/widgets/breadcrumb.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BreadcrumbStyleType } from '@vben-core/preferences';
 import type { IBreadcrumb } from '@vben-core/shadcn-ui';
+import type { BreadcrumbStyleType } from '@vben-core/typings';
 
 import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';

packages/business/layouts/src/widgets/color-toggle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BuiltinThemeType } from '@vben/types';
+import type { BuiltinThemeType } from '@vben-core/typings';
 
 import { IcRoundColorLens } from '@vben-core/iconify';
 import {

packages/business/layouts/src/widgets/global-search/global-search.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MenuRecordRaw } from '@vben/types';
+import type { MenuRecordRaw } from '@vben-core/typings';
 
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 

packages/business/layouts/src/widgets/global-search/search-panel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MenuRecordRaw } from '@vben/types';
+import type { MenuRecordRaw } from '@vben-core/typings';
 
 import { nextTick, onMounted, ref, shallowRef, watch } from 'vue';
 import { useRouter } from 'vue-router';

packages/business/layouts/src/widgets/language-toggle.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SupportedLanguagesType } from '@vben/types';
+import type { SupportedLanguagesType } from '@vben-core/typings';
 
 import { IcBaselineLanguage } from '@vben-core/iconify';
 import { loadLocaleMessages } from '@vben-core/locales';

packages/business/layouts/src/widgets/layout-toggle.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import type { AuthPageLayoutType } from '@vben-core/preferences';
 import type { VbenDropdownMenuItem } from '@vben-core/shadcn-ui';
+import type { AuthPageLayoutType } from '@vben-core/typings';
 
 import { computed } from 'vue';
 

packages/business/layouts/src/widgets/preferences/blocks/general/general.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { $t } from '@vben-core/locales';
 import { SUPPORT_LANGUAGES } from '@vben-core/preferences';
@@ -14,7 +14,7 @@ defineOptions({
 const appLocale = defineModel<string>('appLocale');
 const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
 
-const localeItems: SelectListItem[] = SUPPORT_LANGUAGES.map((item) => ({
+const localeItems: SelectOption[] = SUPPORT_LANGUAGES.map((item) => ({
   label: item.text,
   value: item.key,
 }));

packages/business/layouts/src/widgets/preferences/blocks/input-item.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { useSlots } from 'vue';
 
@@ -13,7 +13,7 @@ defineOptions({
 withDefaults(
   defineProps<{
     disabled?: boolean;
-    items?: SelectListItem[];
+    items?: SelectOption[];
     placeholder?: string;
   }>(),
   {

packages/business/layouts/src/widgets/preferences/blocks/layout/breadcrumb.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
@@ -20,7 +20,7 @@ const breadcrumbStyleType = defineModel<string>('breadcrumbStyleType');
 const breadcrumbShowHome = defineModel<boolean>('breadcrumbShowHome');
 const breadcrumbHideOnlyOne = defineModel<boolean>('breadcrumbHideOnlyOne');
 
-const typeItems: SelectListItem[] = [
+const typeItems: SelectOption[] = [
   { label: $t('preferences.normal'), value: 'normal' },
   { label: $t('preferences.breadcrumb.background'), value: 'background' },
 ];

packages/business/layouts/src/widgets/preferences/blocks/layout/header.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { LayoutHeaderModeType, SelectListItem } from '@vben/types';
+import type { LayoutHeaderModeType, SelectOption } from '@vben-core/typings';
 
 import { $t } from '@vben-core/locales';
 
@@ -15,7 +15,7 @@ defineProps<{ disabled: boolean }>();
 const headerEnable = defineModel<boolean>('headerEnable');
 const headerMode = defineModel<LayoutHeaderModeType>('headerMode');
 
-const localeItems: SelectListItem[] = [
+const localeItems: SelectOption[] = [
   {
     label: $t('preferences.header.modeStatic'),
     value: 'static',

packages/business/layouts/src/widgets/preferences/blocks/layout/layout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { LayoutType } from '@vben/types';
+import type { LayoutType } from '@vben-core/typings';
 
 import { type Component, computed } from 'vue';
 

packages/business/layouts/src/widgets/preferences/blocks/layout/navigation.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { $t } from '@vben-core/locales';
 
@@ -16,7 +16,7 @@ const navigationStyleType = defineModel<string>('navigationStyleType');
 const navigationSplit = defineModel<boolean>('navigationSplit');
 const navigationAccordion = defineModel<boolean>('navigationAccordion');
 
-const stylesItems: SelectListItem[] = [
+const stylesItems: SelectOption[] = [
   { label: $t('preferences.rounded'), value: 'rounded' },
   { label: $t('preferences.plain'), value: 'plain' },
 ];

packages/business/layouts/src/widgets/preferences/blocks/number-field-item.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { useSlots } from 'vue';
 
@@ -20,7 +20,7 @@ defineOptions({
 withDefaults(
   defineProps<{
     disabled?: boolean;
-    items?: SelectListItem[];
+    items?: SelectOption[];
     placeholder?: string;
   }>(),
   {

packages/business/layouts/src/widgets/preferences/blocks/select-item.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { useSlots } from 'vue';
 
@@ -20,7 +20,7 @@ defineOptions({
 withDefaults(
   defineProps<{
     disabled?: boolean;
-    items?: SelectListItem[];
+    items?: SelectOption[];
     placeholder?: string;
   }>(),
   {

packages/business/layouts/src/widgets/preferences/blocks/theme/builtin.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import type { BuiltinThemeType } from '@vben/types';
+import type { BuiltinThemeType } from '@vben-core/typings';
 
 import { computed, ref } from 'vue';
 
-import { TinyColor, convertToHsl } from '@vben-core/colorful';
 import { MdiEditBoxOutline } from '@vben-core/iconify';
 import { $t } from '@vben-core/locales';
 import {
   BUILT_IN_THEME_PRESETS,
   type BuiltinThemePreset,
 } from '@vben-core/preferences';
+import { TinyColor, convertToHsl } from '@vben-core/toolkit';
 
 defineOptions({
   name: 'PreferenceBuiltinTheme',

packages/business/layouts/src/widgets/preferences/blocks/theme/theme.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ThemeModeType } from '@vben-core/preferences';
+import type { ThemeModeType } from '@vben-core/typings';
 
 import type { Component } from 'vue';
 

packages/business/layouts/src/widgets/preferences/blocks/toggle-item.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectListItem } from '@vben/types';
+import type { SelectOption } from '@vben-core/typings';
 
 import { ToggleGroup, ToggleGroupItem } from '@vben-core/shadcn-ui';
 
@@ -7,7 +7,7 @@ defineOptions({
   name: 'PreferenceToggleItem',
 });
 
-withDefaults(defineProps<{ disabled?: boolean; items: SelectListItem[] }>(), {
+withDefaults(defineProps<{ disabled?: boolean; items: SelectOption[] }>(), {
   disabled: false,
   items: () => [],
 });

packages/business/layouts/src/widgets/preferences/preferences-sheet.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
+import type { SegmentedItem } from '@vben-core/shadcn-ui';
 import type {
+  BreadcrumbStyleType,
   BuiltinThemeType,
   ContentCompactType,
   LayoutHeaderModeType,
   LayoutType,
+  NavigationStyleType,
   SupportedLanguagesType,
   ThemeModeType,
-} from '@vben/types';
-import type {
-  BreadcrumbStyleType,
-  NavigationStyleType,
-} from '@vben-core/preferences';
-import type { SegmentedItem } from '@vben-core/shadcn-ui';
+} from '@vben-core/typings';
 
 import { computed, ref } from 'vue';
 

packages/business/layouts/src/widgets/preferences/preferences.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
+import { loadLocaleMessages } from '@vben-core/locales';
 import { preferences, updatePreferences } from '@vben-core/preferences';
 import { capitalizeFirstLetter } from '@vben-core/toolkit';
 
@@ -29,8 +30,14 @@ const listen = computed(() => {
   for (const [key, value] of Object.entries(preferences)) {
     if (typeof value === 'object') {
       for (const subKey of Object.keys(value)) {
-        result[`update:${key}${capitalizeFirstLetter(subKey)}`] = (val: any) =>
+        result[`update:${key}${capitalizeFirstLetter(subKey)}`] = (
+          val: any,
+        ) => {
           updatePreferences({ [key]: { [subKey]: val } });
+          if (key === 'app' && subKey === 'locale') {
+            loadLocaleMessages(val);
+          }
+        };
       }
     } else {
       result[key] = value;

packages/business/layouts/src/widgets/theme-toggle/theme-toggle.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { ThemeModeType } from '@vben-core/typings';
+
 import {
   IcRoundMotionPhotosAuto,
   IcRoundWbSunny,
@@ -6,7 +8,6 @@ import {
 } from '@vben-core/iconify';
 import { $t } from '@vben-core/locales';
 import {
-  type ThemeModeType,
   preferences,
   updatePreferences,
   usePreferences,

packages/business/layouts/src/widgets/user-dropdown/user-dropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { AnyFunction } from '@vben/types';
+import type { AnyFunction } from '@vben-core/typings';
 
 import type { Component } from 'vue';
 import { computed, ref } from 'vue';

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { TabsItem } from '@vben/types';
+import type { TabsOption } from '@vben/types';
 
 import { computed } from 'vue';
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@vben-core/shadcn-ui';
 
 interface Props {
-  tabs: TabsItem[];
+  tabs: TabsOption[];
 }
 
 defineOptions({

packages/styles/package.json

@@ -42,12 +42,7 @@
       }
     }
   },
-  "peerDependencies": {
-    "@vben-core/design": "workspace:*",
-    "@vben-core/design-tokens": "workspace:*"
-  },
   "dependencies": {
-    "@vben-core/design": "workspace:*",
-    "@vben-core/design-tokens": "workspace:*"
+    "@vben-core/design": "workspace:*"
   }
 }

packages/styles/src/index.ts

@@ -1,2 +1 @@
 import '@vben-core/design';
-import '@vben-core/design-tokens';

packages/types/src/index.ts

@@ -1,4 +1,2 @@
-export type * from './router';
-export type * from './ui';
 export type * from './user';
 export type * from '@vben-core/typings';

packages/types/src/router.ts

@@ -1,13 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-import type { Component } from 'vue';
-
-// 定义递归类型以将 RouteRecordRaw 的 component 属性更改为 string
-type RouteRecordStringComponent<T = string> = {
-  children?: RouteRecordStringComponent<T>[];
-  component: T;
-} & Omit<RouteRecordRaw, 'children' | 'component'>;
-
-type ComponentRecordType = Record<string, () => Promise<Component>>;
-
-export type { ComponentRecordType, RouteRecordStringComponent };

packages/types/src/ui.d.ts

@@ -1,11 +0,0 @@
-interface SelectListItem {
-  label: string;
-  value: string;
-}
-
-interface TabsItem {
-  label: string;
-  value: string;
-}
-
-export type { SelectListItem, TabsItem };

packages/types/src/user.d.ts

@@ -1,9 +1,7 @@
+import type { BasicUserInfo } from '@vben-core/typings';
+
 /** 用户信息 */
-interface UserInfo {
-  /**
-   * 头像
-   */
-  avatar: string;
+interface UserInfo extends BasicUserInfo {
   /**
    * 用户描述
    */
@@ -12,26 +10,11 @@ interface UserInfo {
    * 首页地址
    */
   homePath: string;
-  /**
-   * 用户昵称
-   */
-  realName: string;
-  /**
-   * 用户角色信息
-   */
-  roles: string[];
+
   /**
    * accessToken
    */
   token: string;
-  /**
-   * 用户id
-   */
-  userId: string;
-  /**
-   * 用户名
-   */
-  username: string;
 }
 
 export type { UserInfo };