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

2024-08-18 10:05:18 +08:00
parent 5c13428bc9 f8485e8861
commit 4e268d6334
73 changed files with 963 additions and 895 deletions
--- a/packages/@core/base/icons/package.json
+++ b/packages/@core/base/icons/package.json
@@ -36,6 +36,6 @@
  "dependencies": {
    "@iconify/vue": "^4.1.2",
    "lucide-vue-next": "^0.428.0",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/@core/base/icons/src/create-icon.ts
+++ b/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 });
    },
--- a/packages/@core/base/icons/src/index.ts
+++ b/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';
--- a/packages/@core/base/icons/src/lucide.ts
+++ b/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,
--- a/packages/@core/base/icons/src/mdi.ts
+++ b/packages/@core/base/icons/src/mdi.ts
@@ -1,29 +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');
-
-export const EosSystem = createIconifyIcon('eos-icons:system-group');
-// 缓存监控使用
-export const RedisIcon = createIconifyIcon('logos:redis');
-export const CommandLineIcon = createIconifyIcon(
-  'flat-color-icons:command-line',
-);
-export const MemoryIcon = createIconifyIcon('la:memory');
-
-export const GiteeIcon = createIconifyIcon('simple-icons:gitee');
--- a/packages/@core/base/shared/build.config.ts
+++ b/packages/@core/base/shared/build.config.ts
@@ -5,6 +5,7 @@ export default defineBuildConfig({
  declaration: true,
  entries: [
    'src/index',
+    'src/store',
    'src/constants/index',
    'src/utils/index',
    'src/color/index',
--- a/packages/@core/base/shared/package.json
+++ b/packages/@core/base/shared/package.json
@@ -44,6 +44,11 @@
      "types": "./src/cache/index.ts",
      "development": "./src/cache/index.ts",
      "default": "./dist/cache/index.mjs"
+    },
+    "./store": {
+      "types": "./src/store.ts",
+      "development": "./src/store.ts",
+      "default": "./dist/store.mjs"
    }
  },
  "publishConfig": {
@@ -56,7 +61,8 @@
  },
  "dependencies": {
    "@ctrl/tinycolor": "^4.1.0",
-    "@vue/shared": "^3.4.37",
+    "@tanstack/vue-store": "^0.5.5",
+    "@vue/shared": "^3.4.38",
    "clsx": "^2.1.1",
    "defu": "^6.1.4",
    "lodash.clonedeep": "^4.5.0",
--- a/packages/@core/base/shared/src/index.ts
+++ b/packages/@core/base/shared/src/index.ts
@@ -1,4 +1,5 @@
 export * from './cache';
 export * from './color';
 export * from './constants';
+export * from './store';
 export * from './utils';
--- a/packages/@core/base/shared/src/store.ts
+++ b/packages/@core/base/shared/src/store.ts
@@ -0,0 +1 @@
+export * from '@tanstack/vue-store';
--- a/packages/@core/base/typings/package.json
+++ b/packages/@core/base/typings/package.json
@@ -38,7 +38,7 @@
    }
  },
  "dependencies": {
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  }
 }
--- a/packages/@core/composables/package.json
+++ b/packages/@core/composables/package.json
@@ -39,7 +39,7 @@
    "@vueuse/core": "^11.0.0",
    "radix-vue": "^1.9.4",
    "sortablejs": "^1.15.2",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  },
  "devDependencies": {
    "@types/sortablejs": "^1.15.8"
--- a/packages/@core/preferences/package.json
+++ b/packages/@core/preferences/package.json
@@ -32,6 +32,6 @@
    "@vben-core/shared": "workspace:*",
    "@vben-core/typings": "workspace:*",
    "@vueuse/core": "^11.0.0",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/@core/preferences/src/preferences.ts
+++ b/packages/@core/preferences/src/preferences.ts
@@ -116,7 +116,6 @@ class PreferenceManager {
        this.updatePreferences({
          theme: { mode: isDark ? 'dark' : 'light' },
        });
-        // updateCSSVariables(this.state);
      });
  }

--- a/packages/@core/ui-kit/layout-ui/package.json
+++ b/packages/@core/ui-kit/layout-ui/package.json
@@ -42,6 +42,6 @@
    "@vben-core/shadcn-ui": "workspace:*",
    "@vben-core/typings": "workspace:*",
    "@vueuse/core": "^11.0.0",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/@core/ui-kit/layout-ui/src/components/layout-content.vue
+++ b/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>
--- a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-collapse-button.vue
+++ b/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" />
-    <MdiMenuOpen v-else class="size-4" />
+    <ChevronsRight v-if="collapsed" class="size-4" />
+    <ChevronsLeft v-else class="size-4" />
  </div>
 </template>
--- a/packages/@core/ui-kit/layout-ui/src/components/widgets/sidebar-fixed-button.vue
+++ b/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" />
-    <MdiPin v-else />
+    <PinOff v-if="!expandOnHover" class="size-3.5" />
+    <Pin v-else class="size-3.5" />
  </div>
 </template>
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/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"
--- a/packages/@core/ui-kit/menu-ui/package.json
+++ b/packages/@core/ui-kit/menu-ui/package.json
@@ -43,6 +43,6 @@
    "@vben-core/shared": "workspace:*",
    "@vben-core/typings": "workspace:*",
    "@vueuse/core": "^11.0.0",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/@core/ui-kit/menu-ui/src/components/menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/menu.vue
@@ -683,7 +683,7 @@ $namespace: vben;
  }

  &__popup {
-    padding: 4px 0;
+    padding: 10px 0;
    border-radius: var(--menu-item-radius);

    .#{$namespace}-sub-menu-content,
--- a/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
@@ -68,11 +68,13 @@ const isFirstLevel = computed(() => {
 });

 const contentProps = computed((): HoverCardContentProps => {
-  const side =
-    mode.value === 'horizontal' && isFirstLevel.value ? 'bottom' : 'right';
+  const isHorizontal = mode.value === 'horizontal';
+  const side = isHorizontal && isFirstLevel.value ? 'bottom' : 'right';
  return {
+    collisionPadding: { top: 20 },
    side,
-    sideOffset: isFirstLevel.value ? 5 : 10,
+    sideOffset: isHorizontal ? 5 : 10,
+    // sideOffset: 10,
  };
 });

@@ -214,7 +216,7 @@ onBeforeUnmount(() => {
        ]"
        :content-props="contentProps"
        :open="true"
-        :open-delay="0"
+        :open-delay="30"
      >
        <template #trigger>
          <SubMenuContent
--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -50,6 +50,6 @@
    "class-variance-authority": "^0.7.0",
    "lucide-vue-next": "^0.428.0",
    "radix-vue": "^1.9.4",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/@core/ui-kit/shadcn-ui/src/components/scrollbar/scrollbar.vue
+++ b/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(() => ({
-  'shadow-both':
-    !isAtLeft.value &&
-    !isAtRight.value &&
-    showShadowLeft.value &&
-    showShadowRight.value,
-  'shadow-left': !isAtLeft.value && showShadowLeft.value,
-  'shadow-right': !isAtRight.value && showShadowRight.value,
-}));
+const computedShadowClasses = computed(() => {
+  return {
+    'both-shadow':
+      !isAtLeft.value &&
+      !isAtRight.value &&
+      showShadowLeft.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,
--- a/packages/@core/ui-kit/tabs-ui/package.json
+++ b/packages/@core/ui-kit/tabs-ui/package.json
@@ -42,6 +42,6 @@
    "@vben-core/shadcn-ui": "workspace:*",
    "@vben-core/typings": "workspace:*",
    "@vueuse/core": "^11.0.0",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs-chrome/tabs.vue
+++ b/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)"
--- a/packages/@core/ui-kit/tabs-ui/src/components/tabs/tabs.vue
+++ b/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)"
--- a/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue
+++ b/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
--- a/packages/@core/ui-kit/tabs-ui/src/use-tabs-drag.ts
+++ b/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');
    };

--- a/packages/effects/access/package.json
+++ b/packages/effects/access/package.json
@@ -24,6 +24,6 @@
    "@vben/stores": "workspace:*",
    "@vben/types": "workspace:*",
    "@vben/utils": "workspace:*",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/effects/chart-ui/package.json
+++ b/packages/effects/chart-ui/package.json
@@ -23,6 +23,6 @@
    "@vben/preferences": "workspace:*",
    "@vueuse/core": "^11.0.0",
    "echarts": "^5.5.1",
-    "vue": "^3.4.37"
+    "vue": "^3.4.38"
  }
 }
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -28,7 +28,7 @@
    "@vben/types": "workspace:*",
    "@vueuse/integrations": "^11.0.0",
    "qrcode": "^1.5.4",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  },
  "devDependencies": {
--- a/packages/effects/hooks/package.json
+++ b/packages/effects/hooks/package.json
@@ -25,7 +25,7 @@
    "@vben/stores": "workspace:*",
    "@vben/types": "workspace:*",
    "@vben/utils": "workspace:*",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3",
    "watermark-js-plus": "^1.5.3"
  }
--- a/packages/effects/layouts/package.json
+++ b/packages/effects/layouts/package.json
@@ -33,7 +33,7 @@
    "@vben/types": "workspace:*",
    "@vben/utils": "workspace:*",
    "@vueuse/core": "^11.0.0",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  }
 }
--- a/packages/effects/layouts/src/authentication/authentication.vue
+++ b/packages/effects/layouts/src/authentication/authentication.vue
@@ -6,9 +6,26 @@ import { preferences, usePreferences } from '@vben/preferences';

 import AuthenticationFormView from './form.vue';
 import SloganIcon from './icons/slogan.vue';
+import Toolbar from './toolbar.vue';
+
+interface Props {
+  pageTitle?: string;
+  pageDescription?: string;
+  sloganImage?: string;
+  toolbar?: boolean;
+  toolbarList?: ('color' | 'language' | 'layout' | 'theme')[];
+}

 defineOptions({ name: 'Authentication' });

+withDefaults(defineProps<Props>(), {
+  pageDescription: '',
+  pageTitle: '',
+  sloganImage: '',
+  toolbar: true,
+  toolbarList: () => ['color', 'language', 'layout', 'theme'],
+});
+
 const { authPanelCenter, authPanelLeft, authPanelRight } = usePreferences();
 const appName = computed(() => preferences.app.name);
 const logoSource = computed(() => preferences.logo.source);
@@ -21,7 +38,11 @@ const logoSource = computed(() => preferences.logo.source);
      v-if="authPanelLeft"
      class="min-h-full w-2/5"
      transition-name="slide-left"
-    />
+    >
+      <template v-if="toolbar" #toolbar>
+        <Toolbar :toolbar-list="toolbarList" />
+      </template>
+    </AuthenticationFormView>

    <!-- 头部 Logo 和应用名称 -->
    <div class="absolute left-0 top-0 z-10 flex flex-1">
@@ -41,12 +62,19 @@ const logoSource = computed(() => preferences.logo.source);
      <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" />
+          <template v-if="sloganImage">
+            <img
+              :alt="appName"
+              :src="sloganImage"
+              class="animate-float h-64 w-2/5"
+            />
+          </template>
+          <SloganIcon v-else :alt="appName" class="animate-float h-64 w-2/5" />
          <div class="text-1xl mt-6 font-sans text-white lg:text-2xl">
-            {{ $t('authentication.pageTitle') }}
+            {{ pageTitle || $t('authentication.pageTitle') }}
          </div>
          <div class="dark:text-muted-foreground mt-2 text-white/60">
-            {{ $t('authentication.pageDesc') }}
+            {{ pageDescription || $t('authentication.pageDesc') }}
          </div>
        </div>
      </div>
@@ -57,14 +85,22 @@ const logoSource = computed(() => preferences.logo.source);
      <div class="login-background absolute left-0 top-0 size-full"></div>
      <AuthenticationFormView
        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%]"
-      />
+      >
+        <template v-if="toolbar" #toolbar>
+          <Toolbar :toolbar-list="toolbarList" />
+        </template>
+      </AuthenticationFormView>
    </div>

    <!-- 右侧认证面板 -->
    <AuthenticationFormView
      v-if="authPanelRight"
      class="min-h-full w-2/5 flex-1"
-    />
+    >
+      <template v-if="toolbar" #toolbar>
+        <Toolbar :toolbar-list="toolbarList" />
+      </template>
+    </AuthenticationFormView>
  </div>
 </template>

--- a/packages/effects/layouts/src/authentication/form.vue
+++ b/packages/effects/layouts/src/authentication/form.vue
@@ -2,7 +2,6 @@
 import { preferences } from '@vben/preferences';

 import { Copyright } from '../basic/copyright';
-import Toolbar from './toolbar.vue';

 defineOptions({
  name: 'AuthenticationFormView',
@@ -14,9 +13,7 @@ defineOptions({
    class="flex-col-center bg-background-deep relative px-6 py-10 lg:flex-initial lg:px-8"
  >
    <!-- Toolbar Slot -->
-    <slot name="toolbar">
-      <Toolbar />
-    </slot>
+    <slot name="toolbar"> </slot>

    <!-- Router View with Transition and KeepAlive -->
    <RouterView v-slot="{ Component, route }">
--- a/packages/effects/layouts/src/authentication/toolbar.vue
+++ b/packages/effects/layouts/src/authentication/toolbar.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+
 import {
  AuthenticationColorToggle,
  AuthenticationLayoutToggle,
@@ -6,22 +8,39 @@ import {
  ThemeToggle,
 } from '../widgets';

+interface Props {
+  toolbarList?: ('color' | 'language' | 'layout' | 'theme')[];
+}
+
 defineOptions({
  name: 'AuthenticationToolbar',
 });
+
+const props = withDefaults(defineProps<Props>(), {
+  toolbarList: () => ['color', 'language', 'layout', 'theme'],
+});
+
+const showColor = computed(() => props.toolbarList.includes('color'));
+const showLayout = computed(() => props.toolbarList.includes('layout'));
+const showLanguage = computed(() => props.toolbarList.includes('language'));
+const showTheme = computed(() => props.toolbarList.includes('theme'));
 </script>

 <template>
  <div
-    class="flex-center bg-background dark:bg-accent absolute right-2 top-4 rounded-3xl px-3 py-1"
+    :class="{
+      'bg-background dark:bg-accent rounded-3xl px-3 py-1':
+        toolbarList.length > 1,
+    }"
+    class="flex-center absolute right-2 top-4"
  >
    <!-- Only show on medium and larger screens -->
    <div class="hidden md:flex">
-      <AuthenticationColorToggle />
-      <AuthenticationLayoutToggle />
+      <AuthenticationColorToggle v-if="showColor" />
+      <AuthenticationLayoutToggle v-if="showLayout" />
    </div>
    <!-- Always show Language and Theme toggles -->
-    <LanguageToggle />
-    <ThemeToggle />
+    <LanguageToggle v-if="showLanguage" />
+    <ThemeToggle v-if="showTheme" />
  </div>
 </template>
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -139,7 +139,7 @@ watch(
  async (val) => {
    if (val) {
      await updateWatermark({
-        content: `${preferences.app.name} 用户名: ${userStore.userInfo?.username}`,
+        content: `${userStore.userInfo?.username}`,
      });
    }
  },
--- a/packages/effects/layouts/src/basic/tabbar/use-tab-view-scroll.ts
+++ b/packages/effects/layouts/src/basic/tabbar/use-tab-view-scroll.ts
@@ -1,50 +0,0 @@
-import { ref } from 'vue';
-
-type El = HTMLElement | null | undefined;
-
-export function useTabViewScroll(scrollDistance: number = 150) {
-  const scrollbarEl = ref<El>(null);
-  const scrollViewportEl = ref<El>(null);
-
-  function setScrollBarEl(el: El) {
-    scrollbarEl.value = el;
-  }
-
-  function setScrollViewEl(el: El) {
-    scrollViewportEl.value = el;
-  }
-
-  function getScrollClientWidth() {
-    if (!scrollbarEl.value || !scrollViewportEl.value) return {};
-
-    const scrollbarWidth = scrollbarEl.value.clientWidth;
-    const scrollViewWidth = scrollViewportEl.value.clientWidth;
-
-    return {
-      scrollbarWidth,
-      scrollViewWidth,
-    };
-  }
-
-  function scrollDirection(
-    direction: 'left' | 'right',
-    distance: number = scrollDistance,
-  ) {
-    const { scrollbarWidth, scrollViewWidth } = getScrollClientWidth();
-
-    if (!scrollbarWidth || !scrollViewWidth) return;
-
-    if (scrollbarWidth > scrollViewWidth) return;
-
-    scrollViewportEl.value?.scrollBy({
-      behavior: 'smooth',
-      left: direction === 'left' ? -distance : +distance,
-    });
-  }
-
-  return {
-    scrollDirection,
-    setScrollBarEl,
-    setScrollViewEl,
-  };
-}
--- a/packages/effects/layouts/src/basic/tabbar/use-tabbar.ts
+++ b/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')
--- a/packages/effects/layouts/src/iframe/iframe-view.vue
+++ b/packages/effects/layouts/src/iframe/iframe-view.vue
@@ -1,6 +1,3 @@
-<script lang="ts" setup>
-defineOptions({ name: 'IFrameView' });
-</script>
 <template>
  <div></div>
 </template>
--- a/packages/icons/src/iconify/index.ts
+++ b/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');
--- a/packages/locales/package.json
+++ b/packages/locales/package.json
@@ -20,8 +20,8 @@
    }
  },
  "dependencies": {
-    "@intlify/core-base": "^9.13.1",
-    "vue": "^3.4.37",
-    "vue-i18n": "^9.13.1"
+    "@intlify/core-base": "^9.14.0",
+    "vue": "^3.4.38",
+    "vue-i18n": "^9.14.0"
  }
 }
--- a/packages/stores/package.json
+++ b/packages/stores/package.json
@@ -24,7 +24,7 @@
    "@vben-core/typings": "workspace:*",
    "pinia": "2.2.2",
    "pinia-plugin-persistedstate": "^3.2.1",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  }
 }
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -21,7 +21,7 @@
  },
  "dependencies": {
    "@vben-core/typings": "workspace:*",
-    "vue": "^3.4.37",
+    "vue": "^3.4.38",
    "vue-router": "^4.4.3"
  }
 }