perf: all icons used in the core are offline (#4173)

* perf: all icons used in the core are offline

* chore: update default icon

* chore: update shadow

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

@@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
       {
         name: 'VbenAbout',
         path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
         meta: {
           icon: 'lucide:copyright',
           title: $t('page.vben.about'),

apps/web-ele/src/router/routes/modules/vben.ts

@@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
       {
         name: 'VbenAbout',
         path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
         meta: {
           icon: 'lucide:copyright',
           title: $t('page.vben.about'),

apps/web-naive/src/router/routes/modules/vben.ts

@@ -26,7 +26,7 @@ const routes: RouteRecordRaw[] = [
       {
         name: 'VbenAbout',
         path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
         meta: {
           icon: 'lucide:copyright',
           title: $t('page.vben.about'),

docs/package.json

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@nolebase/vitepress-plugin-git-changelog": "^2.4.0",
     "@vite-pwa/vitepress": "^0.5.0",
-    "vitepress": "^1.3.2",
+    "vitepress": "^1.3.3",
     "vue": "^3.4.37"
   }
 }

docs/src/guide/essentials/route.md

@@ -64,7 +64,7 @@ const routes: RouteRecordRaw[] = [
       {
         name: 'VbenAbout',
         path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
         meta: {
           badgeType: 'dot',
           badgeVariants: 'destructive',

internal/tailwind-config/package.json

@@ -46,7 +46,7 @@
     "tailwindcss": "^3.4.3"
   },
   "dependencies": {
-    "@iconify/json": "^2.2.237",
+    "@iconify/json": "^2.2.238",
     "@iconify/tailwind": "^1.1.2",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@tailwindcss/typography": "^0.5.14",

package.json

@@ -60,7 +60,7 @@
     "@changesets/cli": "^2.27.7",
     "@ls-lint/ls-lint": "^2.2.3",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.3.0",
+    "@types/node": "^22.4.0",
     "@vben/commitlint-config": "workspace:*",
     "@vben/eslint-config": "workspace:*",
     "@vben/prettier-config": "workspace:*",
@@ -75,7 +75,7 @@
     "@vue/test-utils": "^2.4.6",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
-    "cspell": "^8.13.3",
+    "cspell": "^8.14.1",
     "husky": "^9.1.4",
     "is-ci": "^3.0.1",
     "jsdom": "^24.1.1",

packages/@core/base/icons/src/create-icon.ts

@@ -4,7 +4,7 @@ import { Icon } from '@iconify/vue';
 
 function createIconifyIcon(icon: string) {
   return defineComponent({
-    name: `SvgIcon-${icon}`,
+    name: `Icon-${icon}`,
     setup(props, { attrs }) {
       return () => h(Icon, { icon, ...props, ...attrs });
     },

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

@@ -1,5 +1,4 @@
 export * from './create-icon';
 export * from './lucide';
 
-export * from './mdi';
 export * from '@iconify/vue';

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

@@ -1,7 +1,9 @@
 export {
   ArrowDown,
   ArrowLeft,
+  ArrowLeftFromLine as MdiMenuOpen,
   ArrowLeftToLine,
+  ArrowRightFromLine as MdiMenuClose,
   ArrowRightLeft,
   ArrowRightToLine,
   ArrowUp,
@@ -11,10 +13,12 @@ export {
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
   CircleHelp,
   Copy,
   CornerDownLeft,
-  Disc3 as IconDefault,
+  Disc as IconDefault,
   Ellipsis,
   ExternalLink,
   Eye,
@@ -36,6 +40,8 @@ export {
   Palette,
   PanelLeft,
   PanelRight,
+  Pin,
+  PinOff,
   RotateCw,
   Search,
   SearchX,

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

@@ -1,19 +0,0 @@
-import { createIconifyIcon } from './create-icon';
-
-export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');
-
-export const MdiWechat = createIconifyIcon('mdi:wechat');
-
-export const MdiGithub = createIconifyIcon('mdi:github');
-
-export const MdiGoogle = createIconifyIcon('mdi:google');
-
-export const MdiQqchat = createIconifyIcon('mdi:qqchat');
-
-export const MdiPin = createIconifyIcon('mdi:pin');
-
-export const MdiPinOff = createIconifyIcon('mdi:pin-off');
-
-export const MdiMenuClose = createIconifyIcon('mdi:menu-close');
-
-export const MdiMenuOpen = createIconifyIcon('mdi:menu-open');

packages/@core/ui-kit/layout-ui/src/components/layout-content.vue

@@ -54,7 +54,6 @@ const style = computed((): CSSProperties => {
 
 <template>
   <main ref="contentElement" :style="style" class="bg-background-deep relative">
-    <!-- <BlurShadow :style="shadowStyle" /> -->
     <slot :overlay-style="overlayStyle" name="overlay"></slot>
     <slot></slot>
   </main>

packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MdiMenuClose, MdiMenuOpen } from '@vben-core/icons';
+import { ChevronsLeft, ChevronsRight } from '@vben-core/icons';
 
 const collapsed = defineModel<boolean>('collapsed');
 
@@ -10,10 +10,10 @@ function handleCollapsed() {
 
 <template>
   <div
-    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
+    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 left-3 z-10 cursor-pointer rounded-sm p-1"
     @click.stop="handleCollapsed"
   >
-    <MdiMenuClose v-if="collapsed" class="size-4" />
+    <ChevronsRight v-if="collapsed" class="size-4" />
-    <MdiMenuOpen v-else class="size-4" />
+    <ChevronsLeft v-else class="size-4" />
   </div>
 </template>

packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MdiPin, MdiPinOff } from '@vben-core/icons';
+import { Pin, PinOff } from '@vben-core/icons';
 
 const expandOnHover = defineModel<boolean>('expandOnHover');
 
@@ -10,10 +10,10 @@ function toggleFixed() {
 
 <template>
   <div
-    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-1 transition-all duration-300"
+    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-[5px] transition-all duration-300"
     @click="toggleFixed"
   >
-    <MdiPinOff v-if="!expandOnHover" />
+    <PinOff v-if="!expandOnHover" class="size-3.5" />
-    <MdiPin v-else />
+    <Pin v-else class="size-3.5" />
   </div>
 </template>

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

@@ -474,7 +474,7 @@ function handleOpenMenu() {
     >
       <div
         :style="headerWrapperStyle"
-        class="overflow-hidden transition-all duration-200"
+        class="overflow-hidden shadow-[0_16px_24px_hsl(var(--background))] transition-all duration-200"
       >
         <LayoutHeader
           v-if="headerVisible"

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

@@ -42,15 +42,17 @@ const showShadowBottom = computed(() => props.shadow && props.shadowBottom);
 const showShadowLeft = computed(() => props.shadow && props.shadowLeft);
 const showShadowRight = computed(() => props.shadow && props.shadowRight);
 
-const computedShadowClasses = computed(() => ({
+const computedShadowClasses = computed(() => {
-  'shadow-both':
+  return {
-    !isAtLeft.value &&
+    'both-shadow':
-    !isAtRight.value &&
+      !isAtLeft.value &&
-    showShadowLeft.value &&
+      !isAtRight.value &&
-    showShadowRight.value,
+      showShadowLeft.value &&
-  'shadow-left': !isAtLeft.value && showShadowLeft.value,
+      showShadowRight.value,
-  'shadow-right': !isAtRight.value && showShadowRight.value,
+    'left-shadow': !isAtLeft.value && showShadowLeft.value,
-}));
+    'right-shadow': !isAtRight.value && showShadowRight.value,
+  };
+});
 
 function handleScroll(event: Event) {
   const target = event.target as HTMLElement;
@@ -107,11 +109,11 @@ function handleScroll(event: Event) {
 
 <style scoped>
 .vben-scrollbar {
-  &:not(.shadow-both).shadow-left {
+  &:not(.both-shadow).left-shadow {
     mask-image: linear-gradient(90deg, transparent, #000 16px);
   }
 
-  &:not(.shadow-both).shadow-right {
+  &:not(.both-shadow).right-shadow {
     mask-image: linear-gradient(
       90deg,
       #000 0%,
@@ -120,7 +122,7 @@ function handleScroll(event: Event) {
     );
   }
 
-  &.shadow-both {
+  &.both-shadow {
     mask-image: linear-gradient(
       90deg,
       transparent,

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

@@ -5,7 +5,7 @@ import type { TabConfig, TabsProps } from '../../types';
 
 import { computed, ref } from 'vue';
 
-import { MdiPin, X } from '@vben-core/icons';
+import { Pin, X } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
 
 interface Props extends TabsProps {}
@@ -62,7 +62,7 @@ const tabsView = computed((): TabConfig[] => {
     :style="style"
     class="tabs-chrome !flex h-full w-max pr-6"
   >
-    <TransitionGroup name="slide-left">
+    <TransitionGroup name="slide-right">
       <div
         v-for="(tab, i) in tabsView"
         :key="tab.key"
@@ -70,7 +70,7 @@ const tabsView = computed((): TabConfig[] => {
         :class="[{ 'is-active': tab.key === active, dragable: !tab.affixTab }]"
         :data-active-tab="active"
         :data-index="i"
-        class="tabs-chrome__item draggable group relative -mr-3 flex h-full select-none items-center"
+        class="tabs-chrome__item draggable translate-all group relative -mr-3 flex h-full select-none items-center"
         data-tab-item="true"
         @click="active = tab.key"
       >
@@ -119,7 +119,7 @@ const tabsView = computed((): TabConfig[] => {
                 class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground text-accent-foreground/80 group-[.is-active]:text-accent-foreground mt-[2px] size-3 cursor-pointer rounded-full transition-all"
                 @click.stop="() => emit('close', tab.key)"
               />
-              <MdiPin
+              <Pin
                 v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
                 class="hover:text-accent-foreground text-accent-foreground/80 group-[.is-active]:text-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
                 @click.stop="() => emit('unpin', tab)"

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

@@ -5,7 +5,7 @@ import type { TabConfig, TabsProps } from '../../types';
 
 import { computed } from 'vue';
 
-import { MdiPin, X } from '@vben-core/icons';
+import { Pin, X } from '@vben-core/icons';
 import { VbenContextMenu, VbenIcon } from '@vben-core/shadcn-ui';
 
 interface Props extends TabsProps {}
@@ -65,7 +65,7 @@ const tabsView = computed((): TabConfig[] => {
     :class="contentClass"
     class="relative !flex h-full w-max items-center pr-6"
   >
-    <TransitionGroup name="slide-left">
+    <TransitionGroup name="slide-right">
       <div
         v-for="(tab, i) in tabsView"
         :key="tab.key"
@@ -77,7 +77,7 @@ const tabsView = computed((): TabConfig[] => {
           typeWithClass.content,
         ]"
         :data-index="i"
-        class="tab-item [&:not(.is-active)]:hover:bg-accent group relative flex cursor-pointer select-none"
+        class="tab-item [&:not(.is-active)]:hover:bg-accent translate-all group relative flex cursor-pointer select-none"
         data-tab-item="true"
         @click="active = tab.key"
       >
@@ -98,7 +98,7 @@ const tabsView = computed((): TabConfig[] => {
                 class="hover:bg-accent stroke-accent-foreground/80 hover:stroke-accent-foreground dark:group-[.is-active]:text-accent-foreground group-[.is-active]:text-primary size-3 cursor-pointer rounded-full transition-all"
                 @click.stop="() => emit('close', tab.key)"
               />
-              <MdiPin
+              <Pin
                 v-show="tab.affixTab && tabsView.length > 1 && tab.closable"
                 class="hover:bg-accent hover:stroke-accent-foreground group-[.is-active]:text-primary dark:group-[.is-active]:text-accent-foreground mt-[2px] size-3.5 cursor-pointer rounded-full transition-all"
                 @click.stop="() => emit('unpin', tab)"

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

@@ -60,9 +60,11 @@ useTabsDrag(props, emit);
     >
       <VbenScrollbar
         ref="scrollbarRef"
+        :shadow-bottom="false"
+        :shadow-top="false"
         class="h-full"
         horizontal
-        scroll-bar-class="z-10 hidden"
+        scroll-bar-class="z-10 hidden "
         shadow
         shadow-left
         shadow-right

packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts

@@ -31,7 +31,7 @@ export function useTabsDrag(props: TabsProps, emit: EmitType) {
 
     const resetElState = async () => {
       el.style.cursor = 'default';
-      el.classList.remove('dragging');
+      // el.classList.remove('dragging');
       el.querySelector('.draggable')?.classList.remove('dragging');
     };
 

packages/effects/layouts/src/basic/tabbar/use-tabbar.ts

@@ -13,9 +13,9 @@ import {
   ExternalLink,
   FoldHorizontal,
   Fullscreen,
-  MdiPin,
-  MdiPinOff,
   Minimize2,
+  Pin,
+  PinOff,
   RotateCw,
   X,
 } from '@vben/icons';
@@ -135,7 +135,7 @@ export function useTabbar() {
         handler: async () => {
           await toggleTabPin(tab);
         },
-        icon: affixTab ? MdiPinOff : MdiPin,
+        icon: affixTab ? PinOff : Pin,
         key: 'affix',
         text: affixTab
           ? $t('preferences.tabbar.contextMenu.unpin')

packages/icons/src/iconify/index.ts

@@ -1,5 +1,13 @@
-// import { createIconifyIcon } from '@vben-core/icons';
+import { createIconifyIcon } from '@vben-core/icons';
 
 export * from '@vben-core/icons';
 
-// export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');
+export const MdiKeyboardEsc = createIconifyIcon('mdi:keyboard-esc');
+
+export const MdiWechat = createIconifyIcon('mdi:wechat');
+
+export const MdiGithub = createIconifyIcon('mdi:github');
+
+export const MdiGoogle = createIconifyIcon('mdi:google');
+
+export const MdiQqchat = createIconifyIcon('mdi:qqchat');

packages/locales/package.json

@@ -20,8 +20,8 @@
     }
   },
   "dependencies": {
-    "@intlify/core-base": "^9.13.1",
+    "@intlify/core-base": "^9.14.0",
     "vue": "^3.4.37",
-    "vue-i18n": "^9.13.1"
+    "vue-i18n": "^9.14.0"
   }
 }

playground/src/router/routes/modules/vben.ts

@@ -27,7 +27,7 @@ const routes: RouteRecordRaw[] = [
       {
         name: 'VbenAbout',
         path: '/vben-admin/about',
-        component: () => import('#/views/_core/vben/about/index.vue'),
+        component: () => import('#/views/_core/about/index.vue'),
         meta: {
           icon: 'lucide:copyright',
           title: $t('page.vben.about'),

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

@@ -16,7 +16,7 @@ const text = ref(longText);
     title="文本省略示例"
   >
     <Card class="mb-4" title="基本使用">
-      <EllipsisText :max-width="240">{{ text }}</EllipsisText>
+      <EllipsisText :max-width="500">{{ text }}</EllipsisText>
     </Card>
 
     <Card class="mb-4" title="多行省略">