perf: improve login page UI (#4142)

* perf: improve login page UI

* chore: update docs

README.ja-JP.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/[email protected].5/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/[email protected].6/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -127,7 +127,7 @@ pnpm build
 
 このプロジェクトが役に立つと思われた場合、作者にコーヒーを一杯おごってサポートを示すことができます！
 
-![donate](https://unpkg.com/@vbenjs/[email protected].5/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/[email protected].6/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 

README.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/[email protected].5/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/[email protected].6/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -126,7 +126,7 @@ Support modern browsers, not IE
 
 If you think this project is helpful to you, you can help the author buy a cup of coffee to show your support!
 
-![donate](https://unpkg.com/@vbenjs/[email protected].5/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/[email protected].6/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 

README.zh-CN.md

@@ -1,4 +1,4 @@
-<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/[email protected].5/source/logo-v1.webp"> </a> <br> <br>
+<div align="center"> <a href="https://github.com/anncwb/vue-vben-admin"> <img alt="VbenAdmin Logo" width="215" src="https://unpkg.com/@vbenjs/[email protected].6/source/logo-v1.webp"> </a> <br> <br>
 
 [![license](https://img.shields.io/github/license/anncwb/vue-vben-admin.svg)](LICENSE)
 
@@ -122,7 +122,7 @@ pnpm build
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
 
-![donate](https://unpkg.com/@vbenjs/[email protected].5/source/sponsor.png)
+![donate](https://unpkg.com/@vbenjs/[email protected].6/source/sponsor.png)
 
 <a style="display: block;width: 100px;height: 50px;line-height: 50px; color: #fff;text-align: center; background: #408aed;border-radius: 4px;" href="https://www.paypal.com/paypalme/cvvben">Paypal Me</a>
 

docs/.vitepress/config.mts

@@ -50,7 +50,7 @@ export default withPwa(
         text: '最后更新于',
       },
       lightModeSwitchTitle: '切换到浅色模式',
-      logo: 'https://unpkg.com/@vbenjs/[email protected].5/source/logo-v1.webp',
+      logo: 'https://unpkg.com/@vbenjs/[email protected].6/source/logo-v1.webp',
       nav: nav(),
       outline: {
         label: '页面导航',
@@ -362,12 +362,12 @@ function pwa(): PwaOptions {
       icons: [
         {
           sizes: '192x192',
-          src: 'https://unpkg.com/@vbenjs/[email protected].5/source/pwa-icon-192.png',
+          src: 'https://unpkg.com/@vbenjs/[email protected].6/source/pwa-icon-192.png',
           type: 'image/png',
         },
         {
           sizes: '512x512',
-          src: 'https://unpkg.com/@vbenjs/[email protected].5/source/pwa-icon-512.png',
+          src: 'https://unpkg.com/@vbenjs/[email protected].6/source/pwa-icon-512.png',
           type: 'image/png',
         },
       ],

docs/src/commercial/community.md

@@ -18,4 +18,4 @@
 
 通过微信联系作者，注明加群来意：
 
-<img src="https://unpkg.com/@vbenjs/[email protected].5/source/wechat.jpg" style="width: 300px;"/>
+<img src="https://unpkg.com/@vbenjs/[email protected].6/source/wechat.jpg" style="width: 300px;"/>

docs/src/commercial/customized.md

@@ -7,6 +7,6 @@
 - 通过邮箱联系开发者： [[email protected]](mailto:[email protected])
 - 通过微信联系开发者：
 
- <img src="https://unpkg.com/@vbenjs/[email protected].5/source/wechat.jpg" style="width: 300px;"/>
+ <img src="https://unpkg.com/@vbenjs/[email protected].6/source/wechat.jpg" style="width: 300px;"/>
 
 我们会在第一时间回复您，定制费用根据需求而定。

docs/src/en/index.md

@@ -8,7 +8,7 @@ hero:
   text: 企业级管理系统框架
   tagline: 全新升级，开箱即用，简单高效
   image:
-    src: https://unpkg.com/@vbenjs/[email protected].5/source/logo-v1.webp
+    src: https://unpkg.com/@vbenjs/[email protected].6/source/logo-v1.webp
     alt: Vben Admin
   actions:
     - theme: brand

docs/src/friend-links/index.md

@@ -9,7 +9,7 @@
 - 通过邮箱联系作者： [[email protected]](mailto:[email protected])
 - 通过微信联系作者：
 
- <img src="https://unpkg.com/@vbenjs/[email protected].5/source/wechat.jpg" style="width: 300px;"/>
+ <img src="https://unpkg.com/@vbenjs/[email protected].6/source/wechat.jpg" style="width: 300px;"/>
 
 ### 提供资料
 
@@ -22,6 +22,6 @@
   - 名称：Vben Admin
   - 链接：https://www.vben.pro
   - 描述：Vben Admin 企业级开箱即用的中后台前端解决方案
-  - Logo：https://unpkg.com/@vbenjs/[email protected].5/source/logo-v1.webp
+  - Logo：https://unpkg.com/@vbenjs/[email protected].6/source/logo-v1.webp
 
 我们将定期的检查友情链接，如果发现您的网站已经删除了我们的友情链接以及链接地址是否正确。

docs/src/guide/essentials/settings.md

@@ -180,7 +180,7 @@ const defaultPreferences: Preferences = {
     compact: false,
     contentCompact: 'wide',
     defaultAvatar:
-      'https://unpkg.com/@vbenjs/[email protected].5/source/avatar-v1.webp',
+      'https://unpkg.com/@vbenjs/[email protected].6/source/avatar-v1.webp',
     dynamicTitle: true,
     enableCheckUpdates: true,
     enablePreferences: true,
@@ -217,7 +217,7 @@ const defaultPreferences: Preferences = {
   },
   logo: {
     enable: true,
-    source: 'https://unpkg.com/@vbenjs/[email protected].5/source/logo-v1.webp',
+    source: 'https://unpkg.com/@vbenjs/[email protected].6/source/logo-v1.webp',
   },
   navigation: {
     accordion: true,

docs/src/guide/in-depth/theme.md

@@ -110,9 +110,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
   /* 主体内容背景色 */
   --content: 240 11% 96%;
 
-  /* 登录背景色 */
-  --authentication: 231deg 61% 44%;
-
   /* =============component & UI============= */
 
   /* menu */
@@ -212,9 +209,6 @@ css 变量内的颜色，必须使用 `hsl` 格式，如 `0 0% 100%`，不需要
   /* 主体内容背景色 */
   --content: 240 11% 96%;
 
-  /* 登录背景色 */
-  --authentication: 220deg 13.06% 3.04%;
-
   /* =============component & UI============= */
 
   --sidebar: 222.34deg 10.43% 12.27%;
@@ -412,9 +406,6 @@ type BuiltinThemeType =
   /* 主体内容背景色 */
   --content: 240 11% 96%;
 
-  /* 登录背景色 */
-  --authentication: 231deg 61% 44%;
-
   /* =============component & UI============= */
 
   /* menu */
@@ -787,9 +778,6 @@ type BuiltinThemeType =
   /* 主体内容背景色 */
   --content: 240 11% 96%;
 
-  /* 登录背景色 */
-  --authentication: 220deg 13.06% 3.04%;
-
   /* =============component & UI============= */
 
   --sidebar: 222.34deg 10.43% 12.27%;

docs/src/index.md

@@ -8,7 +8,7 @@ hero:
   text: 企业级管理系统框架
   tagline: 全新升级，开箱即用，简单高效
   image:
-    src: https://unpkg.com/@vbenjs/[email protected].5/source/logo-v1.webp
+    src: https://unpkg.com/@vbenjs/[email protected].6/source/logo-v1.webp
     alt: Vben Admin
   actions:
     - theme: brand

docs/src/sponsor/personal.md

@@ -2,7 +2,7 @@
 
 如果你觉得这个项目对你有帮助，你可以帮作者买一杯咖啡表示支持!
 
-![](https://unpkg.com/@vbenjs/[email protected].5/source/sponsor.png)
+![](https://unpkg.com/@vbenjs/[email protected].6/source/sponsor.png)
 
 您的赞助将帮助我们：
 

internal/tailwind-config/src/index.ts

@@ -76,9 +76,6 @@ const shadcnUiColors = {
 };
 
 const customColors = {
-  authentication: {
-    DEFAULT: 'hsl(var(--authentication))',
-  },
   green: {
     ...createColorsPalette('green'),
     foreground: 'hsl(var(--success-foreground))',
@@ -145,6 +142,7 @@ export default {
         'collapsible-up': 'collapsible-up 0.2s ease-in-out',
         float: 'float 5s linear 0ms infinite',
       },
+
       animationDuration: {
         '2000': '2000ms',
         '3000': '3000ms',
@@ -155,6 +153,11 @@ export default {
         sm: 'calc(var(--radius) - 4px)',
         xl: 'calc(var(--radius) + 4px)',
       },
+      boxShadow: {
+        float: `0 6px 16px 0 rgb(0 0 0 / 8%),
+          0 3px 6px -4px rgb(0 0 0 / 12%),
+          0 9px 28px 8px rgb(0 0 0 / 5%)`,
+      },
       colors: {
         ...customColors,
         ...shadcnUiColors,

internal/vite-config/src/options.ts

@@ -11,12 +11,12 @@ const getDefaultPwaOptions = (name: string): Partial<PwaPluginOptions> => ({
     icons: [
       {
         sizes: '192x192',
-        src: 'https://unpkg.com/@vbenjs/[email protected].5/source/pwa-icon-192.png',
+        src: 'https://unpkg.com/@vbenjs/[email protected].6/source/pwa-icon-192.png',
         type: 'image/png',
       },
       {
         sizes: '512x512',
-        src: 'https://unpkg.com/@vbenjs/[email protected].5/source/pwa-icon-512.png',
+        src: 'https://unpkg.com/@vbenjs/[email protected].6/source/pwa-icon-512.png',
         type: 'image/png',
       },
     ],

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,

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%;

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 */

packages/@core/base/icons/src/lucide.ts

@@ -38,6 +38,7 @@ export {
   RotateCw,
   Search,
   SearchX,
+  Settings2,
   Sun,
   SunMoon,
   SwatchBook,

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/[email protected].5/source/logo-v1.webp';
+  'https://unpkg.com/@vbenjs/[email protected].6/source/logo-v1.webp';
 
 /**
  * @zh_CN Vben Admin 首页地址

packages/@core/preferences/src/config.ts

@@ -10,7 +10,7 @@ const defaultPreferences: Preferences = {
     compact: false,
     contentCompact: 'wide',
     defaultAvatar:
-      'https://unpkg.com/@vbenjs/[email protected].5/source/avatar-v1.webp',
+      'https://unpkg.com/@vbenjs/[email protected].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/[email protected].5/source/logo-v1.webp',
+    source: 'https://unpkg.com/@vbenjs/[email protected].6/source/logo-v1.webp',
   },
   navigation: {
     accordion: true,

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(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(18 89% 40%)',
-    type: 'orange',
+    color: 'hsl(211 91% 39%)',
+    type: 'deep-blue',
   },
   {
-    color: 'hsl(42 84% 61%)',
-    type: 'yellow',
+    color: 'hsl(18 89% 40%)',
+    type: 'orange',
   },
   {
-    color: 'hsl(240 5% 26%)',
-    darkPrimaryColor: 'hsl(0 0% 98%)',
-    primaryColor: 'hsl(240 5.9% 10%)',
-    type: 'zinc',
+    color: 'hsl(0 75% 42%)',
+    type: 'rose',
   },
+
   {
     color: 'hsl(0 0% 25%)',
     darkPrimaryColor: 'hsl(0 0% 98%)',

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"

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"