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

2025-10-09 11:19:32 +08:00
parent 96a1232b1e 2ce161e585
commit 99dd3350f4
30 changed files with 175 additions and 45 deletions
--- a/packages/effects/common-ui/src/ui/authentication/dingding-login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/dingding-login.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router';

-import { RiDingding } from '@vben/icons';
+import { SvgDingDingIcon } from '@vben/icons';
 import { $t } from '@vben/locales';

 import { alert, useVbenModal } from '@vben-core/popup-ui';
@@ -96,7 +96,7 @@ const handleLogin = () => {
      :tooltip="$t('authentication.dingdingLogin')"
      tooltip-side="top"
    >
-      <RiDingding />
+      <SvgDingDingIcon />
    </VbenIconButton>
    <Modal>
      <div id="dingding_qrcode_login_element"></div>
--- a/packages/effects/common-ui/src/ui/authentication/third-party-login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/third-party-login.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts">
-import { MdiGithub, MdiQqchat, MdiWechat, RiDingding } from '@vben/icons';
+import {
+  SvgDingDingIcon,
+  SvgGithubIcon,
+  SvgQQChatIcon,
+  SvgWeChatIcon,
+} from '@vben/icons';
 import { $t } from '@vben/locales';

 import { VbenIconButton } from '@vben-core/shadcn-ui';
@@ -34,16 +39,16 @@ function handleThirdLogin(type: number) {

    <div class="mt-4 flex flex-wrap justify-center">
      <VbenIconButton class="mb-3" @click="handleThirdLogin(30)">
-        <MdiWechat />
+        <SvgWeChatIcon />
      </VbenIconButton>
      <VbenIconButton class="mb-3" @click="handleThirdLogin(20)">
-        <RiDingding />
+        <SvgDingDingIcon />
      </VbenIconButton>
      <VbenIconButton class="mb-3" @click="handleThirdLogin(0)">
-        <MdiQqchat />
+        <SvgQQChatIcon />
      </VbenIconButton>
      <VbenIconButton class="mb-3" @click="handleThirdLogin(0)">
-        <MdiGithub />
+        <SvgGithubIcon />
      </VbenIconButton>
    </div>
  </div>
--- a/packages/effects/layouts/src/widgets/language-toggle.vue
+++ b/packages/effects/layouts/src/widgets/language-toggle.vue
@@ -31,7 +31,7 @@ async function handleUpdate(value: string | undefined) {
      :model-value="preferences.app.locale"
      @update:model-value="handleUpdate"
    >
-      <VbenIconButton>
+      <VbenIconButton class="hover:animate-[shrink_0.3s_ease-in-out]">
        <Languages class="text-foreground size-4" />
      </VbenIconButton>
    </VbenDropdownRadioMenu>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/general/general.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/general/general.vue
@@ -2,6 +2,7 @@
 import { SUPPORT_LANGUAGES } from '@vben/constants';
 import { $t } from '@vben/locales';

+import InputItem from '../input-item.vue';
 import SelectItem from '../select-item.vue';
 import SwitchItem from '../switch-item.vue';

@@ -12,6 +13,7 @@ defineOptions({
 const appLocale = defineModel<string>('appLocale');
 const appDynamicTitle = defineModel<boolean>('appDynamicTitle');
 const appWatermark = defineModel<boolean>('appWatermark');
+const appWatermarkContent = defineModel<string>('appWatermarkContent');
 const appEnableCheckUpdates = defineModel<boolean>('appEnableCheckUpdates');
 </script>

@@ -22,9 +24,23 @@ const appEnableCheckUpdates = defineModel<boolean>('appEnableCheckUpdates');
  <SwitchItem v-model="appDynamicTitle">
    {{ $t('preferences.dynamicTitle') }}
  </SwitchItem>
-  <SwitchItem v-model="appWatermark">
+  <SwitchItem
+    v-model="appWatermark"
+    @update:model-value="
+      (val) => {
+        if (!val) appWatermarkContent = '';
+      }
+    "
+  >
    {{ $t('preferences.watermark') }}
  </SwitchItem>
+  <InputItem
+    v-if="appWatermark"
+    v-model="appWatermarkContent"
+    :placeholder="$t('preferences.watermarkContent')"
+  >
+    {{ $t('preferences.watermarkContent') }}
+  </InputItem>
  <SwitchItem v-model="appEnableCheckUpdates">
    {{ $t('preferences.checkUpdates') }}
  </SwitchItem>
--- a/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/input-item.vue
@@ -3,7 +3,7 @@ import type { SelectOption } from '@vben/types';

 import { useSlots } from 'vue';

-import { CircleHelp } from '@vben/icons';
+import { CircleHelp, CircleX } from '@vben/icons';

 import { Input, VbenTooltip } from '@vben-core/shadcn-ui';

@@ -47,6 +47,17 @@ const slots = useSlots();
        <slot name="tip"></slot>
      </VbenTooltip>
    </span>
-    <Input v-model="inputValue" class="h-8 w-[165px]" />
+    <div class="relative">
+      <Input
+        v-model="inputValue"
+        class="h-8 w-[165px]"
+        :placeholder="placeholder"
+      />
+      <CircleX
+        v-if="inputValue"
+        class="hover:text-foreground text-foreground/60 absolute right-2 top-1/2 size-3 -translate-y-1/2 transform cursor-pointer"
+        @click="() => (inputValue = '')"
+      />
+    </div>
  </div>
 </template>
--- a/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-button.vue
@@ -13,7 +13,7 @@ function clearPreferencesAndLogout() {
 </script>
 <template>
  <Preferences @clear-preferences-and-logout="clearPreferencesAndLogout">
-    <VbenIconButton>
+    <VbenIconButton class="hover:animate-[shrink_0.3s_ease-in-out]">
      <Settings class="text-foreground size-4" />
    </VbenIconButton>
  </Preferences>
--- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
+++ b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue
@@ -67,6 +67,7 @@ const appColorGrayMode = defineModel<boolean>('appColorGrayMode');
 const appColorWeakMode = defineModel<boolean>('appColorWeakMode');
 const appContentCompact = defineModel<ContentCompactType>('appContentCompact');
 const appWatermark = defineModel<boolean>('appWatermark');
+const appWatermarkContent = defineModel<string>('appWatermarkContent');
 const appEnableCheckUpdates = defineModel<boolean>('appEnableCheckUpdates');
 const appPreferencesButtonPosition = defineModel<PreferencesButtonPositionType>(
  'appPreferencesButtonPosition',
@@ -267,6 +268,7 @@ async function handleReset() {
                v-model:app-enable-check-updates="appEnableCheckUpdates"
                v-model:app-locale="appLocale"
                v-model:app-watermark="appWatermark"
+                v-model:app-watermark-content="appWatermarkContent"
              />
            </Block>

--- a/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
+++ b/packages/effects/layouts/src/widgets/theme-toggle/theme-button.vue
@@ -64,7 +64,7 @@ function toggleTheme(event: MouseEvent) {
      `circle(0px at ${x}px ${y}px)`,
      `circle(${endRadius}px at ${x}px ${y}px)`,
    ];
-    document.documentElement.animate(
+    const animate = document.documentElement.animate(
      {
        clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
      },
@@ -76,6 +76,9 @@ function toggleTheme(event: MouseEvent) {
          : '::view-transition-new(root)',
      },
    );
+    animate.onfinish = () => {
+      transition.skipTransition();
+    };
  });
 }
 </script>
@@ -85,7 +88,7 @@ function toggleTheme(event: MouseEvent) {
    :aria-label="theme"
    :class="[`is-${theme}`]"
    aria-live="polite"
-    class="theme-toggle cursor-pointer border-none bg-none"
+    class="theme-toggle cursor-pointer border-none bg-none hover:animate-[shrink_0.3s_ease-in-out]"
    v-bind="bindProps"
    @click.stop="toggleTheme"
  >
--- a/packages/effects/plugins/src/echarts/use-echarts.ts
+++ b/packages/effects/plugins/src/echarts/use-echarts.ts
@@ -46,6 +46,21 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
    },
  });

+  const getChartEl = (): HTMLElement | null => {
+    const refValue = chartRef?.value as unknown;
+    if (!refValue) return null;
+    if (refValue instanceof HTMLElement) {
+      return refValue;
+    }
+    const maybeComponent = refValue as { $el?: HTMLElement };
+    return maybeComponent.$el ?? null;
+  };
+
+  const isElHidden = (el: HTMLElement | null): boolean => {
+    if (!el) return true;
+    return el.offsetHeight === 0 || el.offsetWidth === 0;
+  };
+
  const getOptions = computed((): EChartsOption => {
    if (!isDark.value) {
      return {};
@@ -83,6 +98,13 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
        return;
      }
      nextTick(() => {
+        const el = getChartEl();
+        if (isElHidden(el)) {
+          useTimeoutFn(async () => {
+            resolve(await renderEcharts(currentOptions));
+          }, 30);
+          return;
+        }
        useTimeoutFn(() => {
          if (!chartInstance) {
            const instance = initCharts();
@@ -97,6 +119,10 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
  };

  function resize() {
+    const el = getChartEl();
+    if (isElHidden(el)) {
+      return;
+    }
    chartInstance?.resize({
      animation: {
        duration: 300,