Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

README.ja-JP.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -127,7 +127,7 @@ pnpm build
 
 このプロジェクトが役に立つと思われた場合、作者にコーヒーを一杯おごってサポートを示すことができます！
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.5/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 

README.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -126,7 +126,7 @@ Support modern browsers, not IE
 
 If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.5/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 

README.zh-CN.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -122,7 +122,7 @@ pnpm build
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
 
-![donate](https://unpkg.com/@vbenjs/static-source@0.1.5/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 

apps/web-antd/src/router/routes/index.ts

@@ -9,19 +9,19 @@ const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
 });
 
 // 有需要可以自行打开注释，并创建文件夹
-// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
 
 /** 动态路由 */
 const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 
-/** 静态路由列表，访问这些页面可以不需要权限 */
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统 */
-// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
-const staticRoutes: RouteRecordRaw[] = [];
+const externalRoutes: RouteRecordRaw[] = [];
 
 /** 路由列表，由基本路由+静态路由组成 */
 const routes: RouteRecordRaw[] = [
   ...coreRoutes,
-  ...staticRoutes,
+  ...externalRoutes,
   fallbackNotFoundRoute,
 ];
 

apps/web-ele/src/router/routes/index.ts

@@ -9,19 +9,19 @@ const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
 });
 
 // 有需要可以自行打开注释，并创建文件夹
-// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
 
 /** 动态路由 */
 const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 
-/** 静态路由列表，访问这些页面可以不需要权限 */
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统 */
-// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
-const staticRoutes: RouteRecordRaw[] = [];
+const externalRoutes: RouteRecordRaw[] = [];
 
 /** 路由列表，由基本路由+静态路由组成 */
 const routes: RouteRecordRaw[] = [
   ...coreRoutes,
-  ...staticRoutes,
+  ...externalRoutes,
   fallbackNotFoundRoute,
 ];
 

apps/web-naive/src/router/routes/index.ts

@@ -9,19 +9,19 @@ const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
 });
 
 // 有需要可以自行打开注释，并创建文件夹
-// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
 
 /** 动态路由 */
 const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 
-/** 静态路由列表，访问这些页面可以不需要权限 */
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统 */
-// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
-const staticRoutes: RouteRecordRaw[] = [];
+const externalRoutes: RouteRecordRaw[] = [];
 
 /** 路由列表，由基本路由+静态路由组成 */
 const routes: RouteRecordRaw[] = [
   ...coreRoutes,
-  ...staticRoutes,
+  ...externalRoutes,
   fallbackNotFoundRoute,
 ];
 

docs/.vitepress/config.mts

@@ -50,7 +50,7 @@ export default withPwa(
         text: '最后更新于',
       },
       lightModeSwitchTitle: '切换到浅色模式',
-      logo: 'https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp',
+      logo: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
       nav: nav(),
       outline: {
         label: '页面导航',
@@ -362,12 +362,12 @@ function pwa(): PwaOptions {
       icons: [
         {
           sizes: '192x192',
-          src: 'https://unpkg.com/@vbenjs/static-source@0.1.5/source/pwa-icon-192.png',
+          src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-192.png',
           type: 'image/png',
         },
         {
           sizes: '512x512',
-          src: 'https://unpkg.com/@vbenjs/static-source@0.1.5/source/pwa-icon-512.png',
+          src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-512.png',
           type: 'image/png',
         },
       ],

docs/src/commercial/community.md

@@ -18,4 +18,4 @@
 
 通过微信联系作者，注明加群来意：
 
-<img src="https://unpkg.com/@vbenjs/static-source@0.1.5/source/wechat.jpg" style="width: 300px;"/>
+<img src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/wechat.jpg" style="width: 300px;"/>

docs/src/commercial/customized.md

@@ -7,6 +7,6 @@
 - 通过邮箱联系开发者： [ann.vben@gmail.com](mailto:ann.vben@gmail.com)
 - 通过微信联系开发者：
 
- <img src="https://unpkg.com/@vbenjs/static-source@0.1.5/source/wechat.jpg" style="width: 300px;"/>
+ <img src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/wechat.jpg" style="width: 300px;"/>
 
 我们会在第一时间回复您，定制费用根据需求而定。

docs/src/en/index.md

@@ -8,7 +8,7 @@ hero:
   text: 企业级管理系统框架
   tagline: 全新升级，开箱即用，简单高效
   image:
-    src: https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp
+    src: https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp
     alt: Vben Admin
   actions:
     - theme: brand

docs/src/friend-links/index.md

@@ -9,7 +9,7 @@
 - 通过邮箱联系作者： [ann.vben@gmail.com](mailto:ann.vben@gmail.com)
 - 通过微信联系作者：
 
- <img src="https://unpkg.com/@vbenjs/static-source@0.1.5/source/wechat.jpg" style="width: 300px;"/>
+ <img src="https://unpkg.com/@vbenjs/static-source@0.1.6/source/wechat.jpg" style="width: 300px;"/>
 
 ### 提供资料
 
@@ -22,6 +22,6 @@
   - 名称：Vben Admin
   - 链接：https://www.vben.pro
   - 描述：Vben Admin 企业级开箱即用的中后台前端解决方案
-  - Logo：https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp
+  - Logo：https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp
 
 我们将定期的检查友情链接，如果发现您的网站已经删除了我们的友情链接以及链接地址是否正确。

docs/src/guide/essentials/route.md

@@ -16,15 +16,15 @@ outline: deep
 
 ```ts
 // 有需要可以自行打开注释，并创建文件夹
-// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true }); // [!code --]
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true }); // [!code --]
 const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true }); // [!code ++]
 /** 动态路由 */
 const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 
-/** 静态路由列表，访问这些页面可以不需要权限 */
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统 */
-// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles); // [!code --]
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles) // [!code --]
-const staticRoutes: RouteRecordRaw[] = []; // [!code --]
+const externalRoutes: RouteRecordRaw[] = []; // [!code --]
-const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles); // [!code ++]
+const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles); // [!code ++]
 ```
 
 ### 动态路由

docs/src/guide/essentials/settings.md

@@ -180,7 +180,7 @@ const defaultPreferences: Preferences = {
     compact: false,
     contentCompact: 'wide',
     defaultAvatar:
-      'https://unpkg.com/@vbenjs/static-source@0.1.5/source/avatar-v1.webp',
+      'https://unpkg.com/@vbenjs/static-source@0.1.6/source/avatar-v1.webp',
     dynamicTitle: true,
     enableCheckUpdates: true,
     enablePreferences: true,
@@ -217,7 +217,7 @@ const defaultPreferences: Preferences = {
   },
   logo: {
     enable: true,
-    source: 'https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp',
+    source: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
   },
   navigation: {
     accordion: true,

docs/src/guide/in-depth/theme.md

@@ -110,9 +110,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
   /* 主体内容背景色 */
   --content: 240 11% 96%;
 
-  /* 登录背景色 */
-  --authentication: 231deg 61% 44%;
-
   /* =============component & UI============= */
 
   /* menu */
@@ -212,9 +209,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
   /* 主体内容背景色 */
   --content: 240 11% 96%;
 
-  /* 登录背景色 */
-  --authentication: 220deg 13.06% 3.04%;
-
   /* =============component & UI============= */
 
   --sidebar: 222.34deg 10.43% 12.27%;
@@ -412,9 +406,6 @@ type BuiltinThemeType =
   /* 主体内容背景色 */
   --content: 240 11% 96%;
 
-  /* 登录背景色 */
-  --authentication: 231deg 61% 44%;
-
   /* =============component & UI============= */
 
   /* menu */
@@ -787,9 +778,6 @@ type BuiltinThemeType =
   /* 主体内容背景色 */
   --content: 240 11% 96%;
 
-  /* 登录背景色 */
-  --authentication: 220deg 13.06% 3.04%;
-
   /* =============component & UI============= */
 
   --sidebar: 222.34deg 10.43% 12.27%;

docs/src/index.md

@@ -8,7 +8,7 @@ hero:
   text: 企业级管理系统框架
   tagline: 全新升级，开箱即用，简单高效
   image:
-    src: https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp
+    src: https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp
     alt: Vben Admin
   actions:
     - theme: brand

docs/src/sponsor/personal.md

@@ -2,7 +2,7 @@
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
 
-![](https://unpkg.com/@vbenjs/static-source@0.1.5/source/sponsor.png)
+![](https://unpkg.com/@vbenjs/static-source@0.1.6/source/sponsor.png)
 
 您的赞助将帮助我们：
 

internal/tailwind-config/src/index.ts

@@ -76,9 +76,6 @@ const shadcnUiColors = {
 };
 
 const customColors = {
-  authentication: {
-    DEFAULT: 'hsl(var(--authentication))',
-  },
   green: {
     ...createColorsPalette('green'),
     foreground: 'hsl(var(--success-foreground))',
@@ -145,6 +142,7 @@ export default {
         'collapsible-up': 'collapsible-up 0.2s ease-in-out',
         float: 'float 5s linear 0ms infinite',
       },
+
       animationDuration: {
         '2000': '2000ms',
         '3000': '3000ms',
@@ -155,6 +153,11 @@ export default {
         sm: 'calc(var(--radius) - 4px)',
         xl: 'calc(var(--radius) + 4px)',
       },
+      boxShadow: {
+        float: `0 6px 16px 0 rgb(0 0 0 / 8%),
+          0 3px 6px -4px rgb(0 0 0 / 12%),
+          0 9px 28px 8px rgb(0 0 0 / 5%)`,
+      },
       colors: {
         ...customColors,
         ...shadcnUiColors,

internal/vite-config/src/options.ts

@@ -11,12 +11,12 @@ const getDefaultPwaOptions = (name: string): Partial<PwaPluginOptions> => ({
     icons: [
       {
         sizes: '192x192',
-        src: 'https://unpkg.com/@vbenjs/static-source@0.1.5/source/pwa-icon-192.png',
+        src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-192.png',
         type: 'image/png',
       },
       {
         sizes: '512x512',
-        src: 'https://unpkg.com/@vbenjs/static-source@0.1.5/source/pwa-icon-512.png',
+        src: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/pwa-icon-512.png',
         type: 'image/png',
       },
     ],

internal/vite-config/src/plugins/inject-app-loading/default-loading.html

@@ -25,7 +25,7 @@
     pointer-events: none;
     visibility: hidden;
     opacity: 0;
-    transition: all 1s ease-out;
+    transition: all 0.8s ease-out;
   }
 
   .dark .loading {

packages/@core/base/design/src/css/global.css

@@ -36,8 +36,9 @@
 
     /* overflow: overlay; */
 
-    -webkit-font-smoothing: antialiased;
+    /* -webkit-font-smoothing: antialiased; */
-    -moz-osx-font-smoothing: grayscale;
+
+    /* -moz-osx-font-smoothing: grayscale; */
   }
 
   a,

packages/@core/base/design/src/design-tokens/dark/index.css

@@ -52,12 +52,12 @@
   --secondary-foreground: 0 0% 98%;
 
   /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
-  --accent: 0deg 0% 100% / 8%;
+  --accent: 240 3.7% 15.9%;
-  --accent-hover: 0deg 0% 100% / 12%;
+  --accent-hover: 240 3.7% 20.9%;
   --accent-foreground: 0 0% 98%;
 
   /* Darker color */
-  --heavy: 0deg 0% 100% / 12%;
+  --heavy: 240 3.7% 20.9%;
   --heavy-foreground: var(--accent-foreground);
 
   /* Default border color */
@@ -85,9 +85,6 @@
   /* 主体内容背景色 */
   --content: 240 11% 96%;
 
-  /* 登录背景色 */
-  --authentication: 220deg 13.06% 3.04%;
-
   /* =============component & UI============= */
 
   --sidebar: 222.34deg 10.43% 12.27%;

packages/@core/base/design/src/design-tokens/default/index.css

@@ -85,9 +85,6 @@
   /* 主体内容背景色 */
   --content: 240 11% 96%;
 
-  /* 登录背景色 */
-  --authentication: 231deg 61% 44%;
-
   /* =============component & UI============= */
 
   /* menu */

packages/@core/base/icons/src/lucide.ts

@@ -38,6 +38,7 @@ export {
   RotateCw,
   Search,
   SearchX,
+  Settings2,
   Sun,
   SunMoon,
   SwatchBook,

packages/@core/base/shared/src/constants/vben.ts

@@ -12,7 +12,7 @@ export const VBEN_DOC_URL = 'https://doc.vben.pro';
  * @zh_CN Vben Logo
  */
 export const VBEN_LOGO_URL =
-  'https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp';
+  'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp';
 
 /**
  * @zh_CN Vben Admin 首页地址

packages/@core/base/typings/src/menu-record.ts

@@ -1,5 +1,7 @@
 import type { RouteRecordRaw } from 'vue-router';
 
+import type { Component } from 'vue';
+
 /**
  * 扩展路由原始对象
  */
@@ -44,7 +46,7 @@ interface MenuRecordRaw extends MenuRecordBadgeRaw {
   /**
    * 图标名
    */
-  icon?: string;
+  icon?: Component | string;
   /**
    * 菜单名
    */

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

@@ -68,7 +68,7 @@ interface RouteMeta {
   /**
    * 图标（菜单/tab）
    */
-  icon?: string;
+  icon?: Component | string;
   /**
    * iframe 地址
    */

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

@@ -10,7 +10,7 @@ const defaultPreferences: Preferences = {
     compact: false,
     contentCompact: 'wide',
     defaultAvatar:
-      'https://unpkg.com/@vbenjs/static-source@0.1.5/source/avatar-v1.webp',
+      'https://unpkg.com/@vbenjs/static-source@0.1.6/source/avatar-v1.webp',
     dynamicTitle: true,
     enableCheckUpdates: true,
     enablePreferences: true,
@@ -47,7 +47,7 @@ const defaultPreferences: Preferences = {
   },
   logo: {
     enable: true,
-    source: 'https://unpkg.com/@vbenjs/static-source@0.1.5/source/logo-v1.webp',
+    source: 'https://unpkg.com/@vbenjs/static-source@0.1.6/source/logo-v1.webp',
   },
   navigation: {
     accordion: true,

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

@@ -21,39 +21,42 @@ const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
     type: 'pink',
   },
   {
-    color: 'hsl(0 75% 42%)',
+    color: 'hsl(42 84% 61%)',
-    type: 'rose',
+    type: 'yellow',
   },
   {
     color: 'hsl(212 100% 45%)',
     type: 'sky-blue',
   },
-  {
-    color: 'hsl(211 91% 39%)',
-    type: 'deep-blue',
-  },
   {
     color: 'hsl(161 90% 43%)',
     type: 'green',
   },
-  {
-    color: 'hsl(181 84% 32%)',
-    type: 'deep-green',
-  },
-  {
-    color: 'hsl(18 89% 40%)',
-    type: 'orange',
-  },
-  {
-    color: 'hsl(42 84% 61%)',
-    type: 'yellow',
-  },
   {
     color: 'hsl(240 5% 26%)',
     darkPrimaryColor: 'hsl(0 0% 98%)',
     primaryColor: 'hsl(240 5.9% 10%)',
     type: 'zinc',
   },
+
+  {
+    color: 'hsl(181 84% 32%)',
+    type: 'deep-green',
+  },
+
+  {
+    color: 'hsl(211 91% 39%)',
+    type: 'deep-blue',
+  },
+  {
+    color: 'hsl(18 89% 40%)',
+    type: 'orange',
+  },
+  {
+    color: 'hsl(0 75% 42%)',
+    type: 'rose',
+  },
+
   {
     color: 'hsl(0 0% 25%)',
     darkPrimaryColor: 'hsl(0 0% 98%)',

packages/@core/ui-kit/layout-ui/src/vben-layout.vue

@@ -59,6 +59,11 @@ const sidebarExtraCollapse = defineModel<boolean>('sidebarExtraCollapse');
 const sidebarExpandOnHover = defineModel<boolean>('sidebarExpandOnHover');
 const sidebarEnable = defineModel<boolean>('sidebarEnable', { default: true });
 
+// side是否处于hover状态展开菜单中
+const sidebarExpandOnHovering = ref(false);
+const headerIsHidden = ref(false);
+const contentRef = ref();
+
 const {
   arrivedState,
   directions,
@@ -66,11 +71,7 @@ const {
   y: scrollY,
 } = useScroll(document);
 
-const { y: mouseY } = useMouse({ type: 'client' });
+const { y: mouseY } = useMouse({ target: contentRef, type: 'client' });
-
-// side是否处于hover状态展开菜单中
-const sidebarExpandOnHovering = ref(false);
-const headerIsHidden = ref(false);
 
 const realLayout = computed(() =>
   props.isMobile ? 'sidebar-nav' : props.layout,
@@ -507,6 +508,7 @@ function handleOpenMenu() {
     </LayoutSidebar>
 
     <div
+      ref="contentRef"
       class="flex flex-1 flex-col overflow-hidden transition-all duration-300 ease-in"
     >
       <div

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

@@ -542,15 +542,6 @@ $namespace: vben;
       }
 
       & > .#{$namespace}-sub-menu {
-        // .#{$namespace}-menu {
-        //   background: var(--menu-submenu-opened-background-color);
-
-        //   .#{$namespace}-sub-menu,
-        //   .#{$namespace}-menu-item:not(.is-active),
-        //   .#{$namespace}-sub-menu-content:not(.is-active) {
-        //     background: var(--menu-submenu-opened-background-color);
-        //   }
-        // }
         & > .#{$namespace}-menu {
           & > .#{$namespace}-menu-item {
             padding-left: calc(
@@ -713,13 +704,11 @@ $namespace: vben;
 
 .#{$namespace}-menu-item {
   fill: var(--menu-item-color);
-  stroke: var(--menu-item-color);
 
   @include menu-item;
 
   &.is-active {
     fill: var(--menu-item-active-color);
-    stroke: var(--menu-item-active-color);
 
     @include menu-item-active;
   }
@@ -783,7 +772,6 @@ $namespace: vben;
   list-style: none;
   background: var(--menu-submenu-background-color);
   fill: var(--menu-item-color);
-  stroke: var(--menu-item-color);
 
   &.is-active {
     div[data-state='open'] > .#{$namespace}-sub-menu-content,
@@ -794,7 +782,6 @@ $namespace: vben;
       cursor: pointer;
       background: var(--menu-submenu-active-background-color);
       fill: var(--menu-submenu-active-color);
-      stroke: var(--menu-submenu-active-color);
     }
   }
 }

packages/@core/ui-kit/menu-ui/src/interface/index.ts

@@ -1,6 +1,6 @@
 import type { MenuRecordBadgeRaw, ThemeModeType } from '@vben-core/typings';
 
-import type { Ref } from 'vue';
+import type { Component, Ref } from 'vue';
 
 interface MenuProps {
   /**
@@ -61,7 +61,7 @@ interface SubMenuProps extends MenuRecordBadgeRaw {
   /**
    * @zh_CN 图标
    */
-  icon?: string;
+  icon?: Component | string;
   /**
    * @zh_CN submenu 名称
    */
@@ -80,7 +80,7 @@ interface MenuItemProps extends MenuRecordBadgeRaw {
   /**
    * @zh_CN 图标
    */
-  icon?: string;
+  icon?: Component | string;
   /**
    * @zh_CN menuitem 名称
    */
@@ -93,10 +93,6 @@ interface MenuItemRegistered {
   path: string;
 }
 
-// export interface MenuItemClicked {
-//   name: string;
-// }
-
 interface MenuItemClicked {
   parentPaths: string[];
   path: string;

packages/@core/ui-kit/menu-ui/src/sub-menu.vue

@@ -31,12 +31,6 @@ const hasChildren = computed(() => {
     Reflect.has(menu, 'children') && !!menu.children && menu.children.length > 0
   );
 });
-
-// function menuIcon(menu: MenuRecordRaw) {
-//   return props.activePath === menu.path
-//     ? menu.activeIcon || menu.icon
-//     : menu.icon;
-// }
 </script>
 
 <template>

packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue

@@ -13,9 +13,9 @@ interface Props extends BacktopProps {}
 defineOptions({ name: 'BackTop' });
 
 const props = withDefaults(defineProps<Props>(), {
-  bottom: 24,
+  bottom: 20,
   isGroup: false,
-  right: 40,
+  right: 24,
   target: '',
   visibilityHeight: 200,
 });
@@ -32,7 +32,7 @@ const { handleClick, visible } = useBackTop(props);
     <VbenButton
       v-if="visible"
       :style="backTopStyle"
-      class="bg-accent hover:bg-heavy data fixed bottom-10 right-5 z-[1000] h-10 w-10 rounded-full"
+      class="dark:bg-accent dark:hover:bg-heavy bg-background hover:bg-heavy data shadow-float fixed bottom-10 z-[1000] h-10 w-10 rounded-full duration-500"
       size="icon"
       variant="icon"
       @click="handleClick"

packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/types.ts

@@ -1,5 +1,7 @@
+import type { Component } from 'vue';
+
 interface IBreadcrumb {
-  icon?: string;
+  icon?: Component | string;
   isHome?: boolean;
   items?: IBreadcrumb[];
   path?: string;

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

@@ -33,7 +33,7 @@ const inputClass = computed(() => {
       v-model="modelValue"
       :class="[props.class, inputClass]"
       autocomplete="off"
-      class="border-input bg-input-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring focus:border-primary flex h-10 w-full rounded-md border p-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      class="border-input bg-input-background ring-offset-background placeholder:text-muted-foreground/60 focus-visible:ring-ring focus:border-primary flex h-10 w-full rounded-md border p-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
       required
       type="text"
       v-bind="$attrs"

packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue

@@ -108,9 +108,6 @@ function scrollIntoView() {
                 <div
                   class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden"
                 >
-                  <!-- <div
-                  class="absolute right-1.5 top-1/2 z-[3] translate-y-[-50%] overflow-hidden opacity-0 transition-opacity group-hover:opacity-100 group-[.is-active]:opacity-100"
-                > -->
                   <!-- close-icon -->
                   <X
                     v-show="
@@ -130,9 +127,6 @@ function scrollIntoView() {
                 <div
                   class="text-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mx-3 mr-4 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] pr-3 transition-all duration-300"
                 >
-                  <!-- <div
-                  class="mx-3 ml-3 mr-2 flex h-full items-center overflow-hidden rounded-tl-[5px] rounded-tr-[5px] transition-all duration-300 group-hover:mr-2 group-hover:pr-4 group-[.is-active]:pr-4"
-                > -->
                   <VbenIcon
                     v-if="showIcon"
                     :icon="tab.icon"

packages/effects/common-ui/src/components/ellipsis-text/__tests__/ellipsis-text.test.ts

@@ -31,9 +31,16 @@ describe('ellipsis-text.vue', () => {
         default: 'This is a very long text that should be truncated.',
       },
     });
-
     const ellipsis = wrapper.find('.truncate');
+
+    // 点击 ellipsis，应该触发 expandChange，参数为 false
     await ellipsis.trigger('click');
     expect(wrapper.emitted('expandChange')).toBeTruthy();
+    expect(wrapper.emitted('expandChange')?.[0]).toEqual([true]);
+
+    // 再次点击，应该触发 expandChange，参数为 false
+    await ellipsis.trigger('click');
+    expect(wrapper.emitted('expandChange')?.length).toBe(2);
+    expect(wrapper.emitted('expandChange')?.[1]).toEqual([false]);
   });
 });

packages/effects/common-ui/src/components/ellipsis-text/ellipsis-text.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type CSSProperties, nextTick, ref, watchEffect } from 'vue';
+import { computed, type CSSProperties, ref, watchEffect } from 'vue';
 
 import { VbenTooltip } from '@vben-core/shadcn-ui';
 
@@ -72,12 +72,10 @@ const textMaxWidth = computed(() => {
   }
   return props.maxWidth;
 });
-const showTooltip = ref(false);
 const ellipsis = ref();
+const isExpand = ref(false);
 const defaultTooltipMaxWidth = ref();
-watchEffect(() => {
+
-  showTooltip.value = props.tooltip;
-});
 watchEffect(
   () => {
     if (props.tooltip && ellipsis.value) {
@@ -88,25 +86,12 @@ watchEffect(
   { flush: 'post' },
 );
 function onExpand() {
-  const { style } = ellipsis.value;
+  isExpand.value = !isExpand.value;
-  const isExpanded = !style['-webkit-line-clamp'];
+  emit('expandChange', isExpand.value);
-  if (props.tooltip) {
-    showTooltip.value = !isExpanded;
-  }
-
-  nextTick(() => {
-    style['-webkit-line-clamp'] = isExpanded ? props.line : '';
-  });
-
-  emit('expandChange', !isExpanded);
 }
 
 function handleExpand() {
-  if (props.expand) {
+  props.expand && onExpand();
-    onExpand();
-  } else {
-    return false;
-  }
 }
 </script>
 <template>
@@ -118,7 +103,7 @@ function handleExpand() {
       color: tooltipColor,
       backgroundColor: tooltipBackgroundColor,
     }"
-    :disabled="!showTooltip"
+    :disabled="!props.tooltip || isExpand"
     :side="placement"
   >
     <slot name="tooltip">
@@ -133,7 +118,10 @@ function handleExpand() {
           ['inline-block truncate']: line === 1,
           [$style.ellipsisMultiLine]: line > 1,
         }"
-        :style="`-webkit-line-clamp: ${line}; max-width: ${textMaxWidth};`"
+        :style="{
+          '-webkit-line-clamp': isExpand ? '' : line,
+          'max-width': textMaxWidth,
+        }"
         class="cursor-text overflow-hidden"
         @click="handleExpand"
         v-bind="$attrs"

packages/effects/layouts/src/authentication/authentication.vue

@@ -26,7 +26,7 @@ const logoSource = computed(() => preferences.logo.source);
     <!-- 头部 Logo 和应用名称 -->
     <div class="absolute left-0 top-0 z-10 flex flex-1">
       <div
-        :class="authPanelLeft ? 'lg:text-foreground' : 'lg:text-white'"
+        :class="authPanelRight ? 'lg:text-white' : 'lg:text-foreground'"
         class="text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
       >
         <img :alt="appName" :src="logoSource" class="mr-2" width="42" />
@@ -38,7 +38,8 @@ const logoSource = computed(() => preferences.logo.source);
 
     <!-- 中间内容 -->
     <div v-if="!authPanelCenter" class="relative hidden w-0 flex-1 lg:block">
-      <div class="bg-authentication absolute inset-0 h-full w-full">
+      <div class="absolute inset-0 h-full w-full bg-[#070709]">
+        <div class="login-background absolute left-0 top-0 size-full"></div>
         <div class="flex-col-center -enter-x mr-20 h-full">
           <SloganIcon :alt="appName" class="animate-float h-64 w-2/5" />
           <div class="text-1xl mt-6 font-sans text-white lg:text-2xl">
@@ -52,9 +53,10 @@ const logoSource = computed(() => preferences.logo.source);
     </div>
 
     <!-- 中心认证面板 -->
-    <div v-if="authPanelCenter" class="flex-center bg-authentication w-full">
+    <div v-if="authPanelCenter" class="flex-center relative w-full">
+      <div class="login-background absolute left-0 top-0 size-full"></div>
       <AuthenticationFormView
-        class="md:bg-background w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-2/5"
+        class="md:bg-background shadow-primary/10 w-full rounded-3xl pb-20 shadow-2xl md:w-2/3 lg:w-1/2 xl:w-[36%]"
       />
     </div>
 
@@ -65,3 +67,15 @@ const logoSource = computed(() => preferences.logo.source);
     />
   </div>
 </template>
+
+<style scoped>
+.login-background {
+  background: linear-gradient(
+    154deg,
+    #07070915 30%,
+    hsl(var(--primary) / 15%) 48%,
+    #07070915 64%
+  );
+  filter: blur(100px);
+}
+</style>

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

@@ -30,11 +30,7 @@ const breadcrumbs = computed((): IBreadcrumb[] => {
   const resultBreadcrumb: IBreadcrumb[] = [];
 
   for (const match of matched) {
-    const {
+    const { meta, path } = match;
-      meta,
-      path,
-      //  children = []
-    } = match;
     const { hideChildrenInMenu, hideInBreadcrumb, icon, name, title } =
       meta || {};
     if (hideInBreadcrumb || hideChildrenInMenu || !path) {
@@ -45,13 +41,6 @@ const breadcrumbs = computed((): IBreadcrumb[] => {
       icon,
       path: path || route.path,
       title: title ? $t((title || name) as string) : '',
-      // items: children.map((child) => {
-      //   return {
-      //     icon: child?.meta?.icon as string,
-      //     path: child.path,
-      //     title: child?.meta?.title as string,
-      //   };
-      // }),
     });
   }
   if (props.showHome) {

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

@@ -13,7 +13,7 @@ import type { SegmentedItem } from '@vben-core/shadcn-ui';
 
 import { computed, ref } from 'vue';
 
-import { Copy, RotateCw, SwatchBook } from '@vben/icons';
+import { Copy, RotateCw, Settings2 } from '@vben/icons';
 import { $t, loadLocaleMessages } from '@vben/locales';
 import {
   clearPreferencesCache,
@@ -230,7 +230,7 @@ async function handleReset() {
           :title="$t('preferences.title')"
           class="bg-primary flex-col-center h-10 w-10 cursor-pointer rounded-l-lg rounded-r-none border-none"
         >
-          <SwatchBook class="size-5" />
+          <Settings2 class="size-5" />
         </VbenButton>
       </template>
       <template #extra>

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

@@ -5,7 +5,7 @@ import { loadLocaleMessages } from '@vben/locales';
 import { preferences, updatePreferences } from '@vben/preferences';
 import { capitalizeFirstLetter } from '@vben/utils';
 
-import Preferences from './preferences-sheet.vue';
+import PreferencesSheet from './preferences-sheet.vue';
 
 /**
  * preferences 转成 vue props
@@ -47,5 +47,5 @@ const listen = computed(() => {
 });
 </script>
 <template>
-  <Preferences v-bind="attrs" v-on="listen" />
+  <PreferencesSheet v-bind="attrs" v-on="listen" />
 </template>

playground/src/router/routes/index.ts

@@ -9,19 +9,19 @@ const dynamicRouteFiles = import.meta.glob('./modules/**/*.ts', {
 });
 
 // 有需要可以自行打开注释，并创建文件夹
-// const staticRouteFiles = import.meta.glob('./static/**/*.ts', { eager: true });
+// const externalRouteFiles = import.meta.glob('./external/**/*.ts', { eager: true });
 
 /** 动态路由 */
 const dynamicRoutes: RouteRecordRaw[] = mergeRouteModules(dynamicRouteFiles);
 
-/** 静态路由列表，访问这些页面可以不需要权限 */
+/** 外部路由列表，访问这些页面可以不需要Layout，可能用于内嵌在别的系统 */
-// const staticRoutes: RouteRecordRaw[] = mergeRouteModules(staticRouteFiles);
+// const externalRoutes: RouteRecordRaw[] = mergeRouteModules(externalRouteFiles);
-const staticRoutes: RouteRecordRaw[] = [];
+const externalRoutes: RouteRecordRaw[] = [];
 
 /** 路由列表，由基本路由+静态路由组成 */
 const routes: RouteRecordRaw[] = [
   ...coreRoutes,
-  ...staticRoutes,
+  ...externalRoutes,
   fallbackNotFoundRoute,
 ];
 

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

@@ -41,7 +41,7 @@ function reset() {
 <template>
   <Page description="用于需要操作标签页的场景" title="标签页">
     <Card class="mb-5" title="打开/关闭标签页">
-      <div class="text-foreground/80 my-3">
+      <div class="text-foreground/80 mb-3">
         如果标签页存在，直接跳转切换。如果标签页不存在，则打开新的标签页。
       </div>
       <div class="flex flex-wrap gap-3">
@@ -53,7 +53,7 @@ function reset() {
     </Card>
 
     <Card class="mb-5" title="标签页操作">
-      <div class="text-foreground/80 my-3">用于动态控制标签页的各种操作</div>
+      <div class="text-foreground/80 mb-3">用于动态控制标签页的各种操作</div>
       <div class="flex flex-wrap gap-3">
         <Button type="primary" @click="closeCurrentTab()">
           关闭当前标签页
@@ -73,8 +73,7 @@ function reset() {
     </Card>
 
     <Card class="mb-5" title="动态标题">
-      <div class="text-lg font-semibold">动态标题</div>
+      <div class="text-foreground/80 mb-3">
-      <div class="text-foreground/80 my-3">
         该操作不会影响页面标题，仅修改Tab标题
       </div>
       <div class="flex flex-wrap items-center gap-3">
@@ -91,8 +90,7 @@ function reset() {
     </Card>
 
     <Card class="mb-5" title="最大打开数量">
-      <div class="text-lg font-semibold">最大打开数量</div>
+      <div class="text-foreground/80 mb-3">
-      <div class="text-foreground/80 my-3">
         限制带参数的tab打开的最大数量，由 `route.meta.maxNumOfOpenTab` 控制
       </div>
       <div class="flex flex-wrap items-center gap-3">