perf: improve login page UI (#4142)

* perf: improve login page UI

* chore: update docs

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>

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>