perf: improve login page UI (#4142)

* perf: improve login page UI * chore: update docs
2025-08-25 16:16:20 +08:00 · 2024-08-13 21:17:10 +08:00
parent e8dff517ba
commit 738bc456c8
27 changed files with 86 additions and 85 deletions
--- a/packages/@core/base/design/src/css/global.css
+++ b/packages/@core/base/design/src/css/global.css
@@ -36,8 +36,9 @@

    /* overflow: overlay; */

-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+    /* -webkit-font-smoothing: antialiased; */
+
+    /* -moz-osx-font-smoothing: grayscale; */
  }

  a,
--- a/packages/@core/base/design/src/design-tokens/dark/index.css
+++ b/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-hover: 0deg 0% 100% / 12%;
+  --accent: 240 3.7% 15.9%;
+  --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%;
--- a/packages/@core/base/design/src/design-tokens/default/index.css
+++ b/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 */
--- a/packages/@core/base/icons/src/lucide.ts
+++ b/packages/@core/base/icons/src/lucide.ts
@@ -38,6 +38,7 @@ export {
  RotateCw,
  Search,
  SearchX,
+  Settings2,
  Sun,
  SunMoon,
  SwatchBook,
--- a/packages/@core/base/shared/src/constants/vben.ts
+++ b/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 首页地址
--- a/packages/@core/preferences/src/config.ts
+++ b/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,
--- a/packages/@core/preferences/src/constants.ts
+++ b/packages/@core/preferences/src/constants.ts
@@ -21,39 +21,42 @@ const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
    type: 'pink',
  },
  {
-    color: 'hsl(0 75% 42%)',
-    type: 'rose',
+    color: 'hsl(42 84% 61%)',
+    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%)',
--- a/packages/@core/ui-kit/shadcn-ui/src/components/back-top/back-top.vue
+++ b/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"
--- a/packages/@core/ui-kit/shadcn-ui/src/components/input/input.vue
+++ b/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"
--- a/packages/effects/layouts/src/authentication/authentication.vue
+++ b/packages/effects/layouts/src/authentication/authentication.vue
@@ -26,7 +26,6 @@ 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="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 +37,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 +52,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 +66,15 @@ const logoSource = computed(() => preferences.logo.source);
    />
  </div>
 </template>
+
+<style scoped>
+.login-background {
+  background: linear-gradient(
+    154deg,
+    hsl(var(--background) / 15%) 30%,
+    hsl(var(--primary) / 15%) 48%,
+    hsl(var(--background) / 8%) 64%
+  );
+  filter: blur(100px);
+}
+</style>
--- a/packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue
+++ b/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>
--- a/packages/effects/layouts/src/widgets/preferences/preferences.vue
+++ b/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>