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

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;
-  const isExpanded = !style['-webkit-line-clamp'];
-  if (props.tooltip) {
-    showTooltip.value = !isExpanded;
-  }
-
-  nextTick(() => {
-    style['-webkit-line-clamp'] = isExpanded ? props.line : '';
-  });
-
-  emit('expandChange', !isExpanded);
+  isExpand.value = !isExpand.value;
+  emit('expandChange', isExpand.value);
 }
 
 function handleExpand() {
-  if (props.expand) {
-    onExpand();
-  } else {
-    return false;
-  }
+  props.expand && onExpand();
 }
 </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 {
-      meta,
-      path,
-      //  children = []
-    } = match;
+    const { meta, path } = 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>