From b14bd96cb26b250d234144b055ecdc4150401ae7 Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Fri, 19 Dec 2025 13:54:09 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BB=A3=E7=A0=81=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E5=8C=96=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 应用 linter 和 prettier 格式化规则
---
 apps/web-antd/PROJECT_STRUCTURE_GUIDE.md      | 222 ++++++++++--------
 apps/web-antd/src/layouts/auth-original.vue   |   1 -
 apps/web-antd/src/layouts/auth.vue            |  14 +-
 .../src/views/_core/authentication/login.vue  |   8 +-
 .../inject-app-loading/default-loading.html   |   6 +-
 .../icons/login-illustration.vue              |  27 ++-
 6 files changed, 155 insertions(+), 123 deletions(-)

diff --git a/apps/web-antd/PROJECT_STRUCTURE_GUIDE.md b/apps/web-antd/PROJECT_STRUCTURE_GUIDE.md
index f019dadf4..eabfdb7da 100644
--- a/apps/web-antd/PROJECT_STRUCTURE_GUIDE.md
+++ b/apps/web-antd/PROJECT_STRUCTURE_GUIDE.md
@@ -43,16 +43,16 @@ yudao-ui-admin-vben/
 
 ### 技术栈
 
-| 技术 | 版本 | 说明 |
-|------|------|------|
-| Vue | 3.x | 渐进式 JavaScript 框架 |
-| Vite | 5.x | 下一代前端构建工具 |
-| TypeScript | 5.x | 类型安全 |
-| Ant Design Vue | 4.x | UI 组件库 |
-| Pinia | 2.x | 状态管理 |
-| Vue Router | 4.x | 路由管理 |
-| Tailwind CSS | 3.x | 原子化 CSS |
-| VueUse | 10.x | Vue Composition API 工具集 |
+| 技术           | 版本 | 说明                       |
+| -------------- | ---- | -------------------------- |
+| Vue            | 3.x  | 渐进式 JavaScript 框架     |
+| Vite           | 5.x  | 下一代前端构建工具         |
+| TypeScript     | 5.x  | 类型安全                   |
+| Ant Design Vue | 4.x  | UI 组件库                  |
+| Pinia          | 2.x  | 状态管理                   |
+| Vue Router     | 4.x  | 路由管理                   |
+| Tailwind CSS   | 3.x  | 原子化 CSS                 |
+| VueUse         | 10.x | Vue Composition API 工具集 |
 
 ---
 
@@ -193,7 +193,7 @@ import {
   VbenToast,
   VbenDropdown,
   VbenSelect,
-  VbenPinInput,  // 验证码输入框
+  VbenPinInput, // 验证码输入框
   VbenLoading,
   VbenSpinner,
   // ... 更多组件
@@ -201,6 +201,7 @@ import {
 ```
 
 **常用组件**：
+
 - **按钮类**: `VbenButton`, `VbenIconButton`
 - **输入类**: `VbenInput`, `VbenInputPassword`, `VbenPinInput`
 - **选择类**: `VbenSelect`, `VbenDropdown`, `VbenCheckbox`, `VbenRadio`
@@ -268,23 +269,24 @@ import { VbenModal, VbenDrawer } from '@vben-core/popup-ui';
 ```typescript
 import {
   // 布局组件
-  AuthPageLayout,        // 认证页布局
-  LoginIllustration,     // 登录插图 (自定义新增)
-  
+  AuthPageLayout, // 认证页布局
+  LoginIllustration, // 登录插图 (自定义新增)
+
   // 小部件
-  ThemeToggle,           // 主题切换
-  LanguageToggle,        // 语言切换
-  ColorToggle,           // 颜色选择器
-  LayoutToggle,          // 布局切换
-  UserDropdown,          // 用户下拉菜单
-  Breadcrumb,            // 面包屑
-  GlobalSearch,          // 全局搜索
-  LockScreen,            // 锁屏
-  Notification,          // 通知
+  ThemeToggle, // 主题切换
+  LanguageToggle, // 语言切换
+  ColorToggle, // 颜色选择器
+  LayoutToggle, // 布局切换
+  UserDropdown, // 用户下拉菜单
+  Breadcrumb, // 面包屑
+  GlobalSearch, // 全局搜索
+  LockScreen, // 锁屏
+  Notification, // 通知
 } from '@vben/layouts';
 ```
 
 **目录结构**：
+
 ```
 packages/effects/layouts/src/
 ├── authentication/         # 认证相关
@@ -309,17 +311,17 @@ packages/effects/layouts/src/
 ```typescript
 import {
   // 认证组件
-  AuthenticationLogin,       // 登录表单
-  AuthenticationCodeLogin,   // 验证码登录
+  AuthenticationLogin, // 登录表单
+  AuthenticationCodeLogin, // 验证码登录
   AuthenticationForgetPassword, // 忘记密码
-  AuthenticationRegister,    // 注册
-  
+  AuthenticationRegister, // 注册
+
   // 其他通用组件
-  Page,                      // 页面容器
-  DocAlert,                  // 文档提醒
-  Description,               // 描述列表
-  Ellipsis,                  // 文本省略
-  Iframe,                    // 内嵌页面
+  Page, // 页面容器
+  DocAlert, // 文档提醒
+  Description, // 描述列表
+  Ellipsis, // 文本省略
+  Iframe, // 内嵌页面
   // ...
 } from '@vben/common-ui';
 ```
@@ -330,10 +332,10 @@ import {
 
 ```typescript
 import {
-  useWatermark,          // 水印
-  useTabs,               // 标签页管理
-  useContentHeight,      // 内容高度自适应
-  isTenantEnable,        // 租户功能是否启用
+  useWatermark, // 水印
+  useTabs, // 标签页管理
+  useContentHeight, // 内容高度自适应
+  isTenantEnable, // 租户功能是否启用
 } from '@vben/hooks';
 ```
 
@@ -366,6 +368,7 @@ $t('authentication.username');
 ```
 
 **语言包位置**：
+
 - 中文: `packages/locales/src/langs/zh-CN/*.json`
 - 英文: `packages/locales/src/langs/en-US/*.json`
 
@@ -373,10 +376,10 @@ $t('authentication.username');
 
 ```typescript
 import {
-  useUserStore,     // 用户信息
-  useAccessStore,   // 权限信息
-  useTabsStore,     // 标签页
-  useAppStore,      // 应用配置
+  useUserStore, // 用户信息
+  useAccessStore, // 权限信息
+  useTabsStore, // 标签页
+  useAppStore, // 应用配置
 } from '@vben/stores';
 
 const userStore = useUserStore();
@@ -387,9 +390,9 @@ await userStore.fetchUserInfo();
 
 ```typescript
 import {
-  preferences,           // 偏好设置对象
-  updatePreferences,     // 更新偏好设置
-  usePreferences,        // 响应式偏好设置
+  preferences, // 偏好设置对象
+  updatePreferences, // 更新偏好设置
+  usePreferences, // 响应式偏好设置
 } from '@vben/preferences';
 
 // 读取
@@ -411,12 +414,12 @@ import {
   // 路由工具
   mapTree,
   resetRoutes,
-  
+
   // 通用工具
   formatDate,
   formatDateTime,
   openWindow,
-  
+
   // 验证器
   isEmail,
   isPhone,
@@ -431,7 +434,7 @@ import {
   // 核心常量
   LOGIN_PATH,
   VBEN_DOC_URL,
-  
+
   // 业务枚举
   DictEnum,
   SystemEnum,
@@ -485,6 +488,7 @@ export default defineConfig(async () => {
 ```
 
 **路径别名**：
+
 - `#/*` → `./src/*` (应用内部)
 - `@vben/*` → `packages/*` (公共包)
 
@@ -519,7 +523,7 @@ VITE_APP_NAMESPACE=vben-web-antd
 ```typescript
 const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
   {
-    color: 'hsl(37 100% 52%)',  // #FFA00A
+    color: 'hsl(37 100% 52%)', // #FFA00A
     type: 'amber',
   },
   // ... 其他颜色
@@ -532,7 +536,7 @@ export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 8);
 
 ```typescript
 type BuiltinThemeType =
-  | 'amber'    // 新增
+  | 'amber' // 新增
   | 'default'
   | 'orange'
   | 'red'
@@ -545,10 +549,10 @@ type BuiltinThemeType =
 ```typescript
 const defaultPreferences: Preferences = {
   theme: {
-    builtinType: 'amber',           // 默认主题类型
+    builtinType: 'amber', // 默认主题类型
     colorPrimary: 'hsl(37 100% 52%)', // 主色调
-    mode: 'dark',                   // 暗色模式
-    radius: '0.5',                  // 圆角
+    mode: 'dark', // 暗色模式
+    radius: '0.5', // 圆角
   },
   // ...
 };
@@ -564,11 +568,12 @@ const defaultPreferences: Preferences = {
   .loader::after {
     background: hsl(var(--primary, 37 100% 52%)); /* 橙色 #FFA00A */
   }
-  
+
   /* 标题样式 */
   .title {
     font-weight: 600 !important;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
   }
 </style>
 ```
@@ -584,6 +589,7 @@ const defaultPreferences: Preferences = {
 **文件**: `apps/web-antd/src/layouts/auth.vue`
 
 **主要特性**：
+
 - ✅ 橙色渐变背景 (`rgb(218,125,68)` → `#FFA00A`)
 - ✅ 浮动插图动画（左侧）
 - ✅ 表单卡片居右
@@ -592,12 +598,9 @@ const defaultPreferences: Preferences = {
 - ✅ 快速过渡动画
 
 **组件引用**：
+
 ```typescript
-import {
-  LanguageToggle,
-  LoginIllustration,
-  ThemeToggle,
-} from '@vben/layouts';
+import { LanguageToggle, LoginIllustration, ThemeToggle } from '@vben/layouts';
 ```
 
 **详细文档**: 参见 `apps/web-antd/LOGIN_LAYOUT_README.md`
@@ -607,12 +610,14 @@ import {
 **文件**: `apps/web-antd/src/views/_core/authentication/login.vue`
 
 **功能**：
+
 - 用户名/密码登录
 - 图形验证码
 - 记住密码
 - 第三方登录（手机、二维码）
 
 **表单配置示例**：
+
 ```typescript
 const formSchema = computed((): VbenFormSchema[] => [
   {
@@ -634,16 +639,19 @@ const formSchema = computed((): VbenFormSchema[] => [
 ### 验证码登录/忘记密码
 
 **文件**：
+
 - `apps/web-antd/src/views/_core/authentication/code-login.vue`
 - `apps/web-antd/src/views/_core/authentication/forget-password.vue`
 
 **验证码组件** (`VbenPinInput`):
+
 - ✅ 验证码长度: 6 位
 - ✅ 发送前验证手机号
 - ✅ 倒计时 60 秒
 - ✅ 失败自动清除倒计时
 
 **修复**: `packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue`
+
 ```typescript
 async function handleSend(e: Event) {
   try {
@@ -722,6 +730,7 @@ pnpm update
 #### 1. Vue DevTools
 
 安装 Vue DevTools 浏览器扩展，可以查看：
+
 - 组件树
 - Pinia 状态
 - 路由信息
@@ -730,6 +739,7 @@ pnpm update
 #### 2. 网络请求调试
 
 打开浏览器开发者工具 Network 面板：
+
 - 查看 API 请求/响应
 - 检查请求头/响应头
 - 查看接口耗时
@@ -746,6 +756,7 @@ console.log('权限列表:', accessStore.accessCodes);
 #### 4. 断点调试
 
 在 VS Code 中配置 `.vscode/launch.json`:
+
 ```json
 {
   "version": "0.2.0",
@@ -764,6 +775,7 @@ console.log('权限列表:', accessStore.accessCodes);
 #### 5. 性能分析
 
 使用 Vue DevTools Performance 功能：
+
 - 记录组件渲染时间
 - 查找性能瓶颈
 - 优化重渲染
@@ -775,11 +787,12 @@ console.log('权限列表:', accessStore.accessCodes);
 ### 1. 主题色定制 (#FFA00A - 橙色)
 
 #### 文件: `packages/@core/preferences/src/constants.ts`
+
 ```typescript
 // 新增 amber 主题色
 const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
   {
-    color: 'hsl(37 100% 52%)',  // #FFA00A
+    color: 'hsl(37 100% 52%)', // #FFA00A
     type: 'amber',
   },
   // ...
@@ -788,18 +801,20 @@ export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 8); // 7→8
 ```
 
 #### 文件: `packages/@core/base/typings/src/app.d.ts`
+
 ```typescript
 type BuiltinThemeType =
-  | 'amber'  // ← 新增
-  | 'default'
-  // ...
+  | 'amber' // ← 新增
+  | 'default';
+// ...
 ```
 
 #### 文件: `packages/@core/preferences/src/config.ts`
+
 ```typescript
 const defaultPreferences: Preferences = {
   theme: {
-    builtinType: 'amber',             // ← 设为默认
+    builtinType: 'amber', // ← 设为默认
     colorPrimary: 'hsl(37 100% 52%)', // ← 设为默认
     // ...
   },
@@ -813,6 +828,7 @@ const defaultPreferences: Preferences = {
 #### 文件: `apps/web-antd/src/layouts/auth.vue`
 
 **完全重构，新增功能**：
+
 - ✅ 橙色渐变背景 (从 `rgb(218,125,68)` 到 `#FFA00A`)
 - ✅ 浮动插图组件 (左侧，带动画)
 - ✅ 白色 Logo 文字，带阴影
@@ -822,30 +838,32 @@ const defaultPreferences: Preferences = {
 - ✅ 保留原有 Toolbar (主题、语言切换)
 
 **关键代码**：
+
 ```vue
 <template>
   <div class="relative flex h-screen w-full overflow-hidden font-sans">
     <!-- 橙色渐变背景 -->
-    <div class="absolute inset-0 bg-gradient-to-r 
-                from-[rgb(218,125,68)] 
-                via-[#FFA00A]/30 
-                to-[#FFA00A]/8">
+    <div
+      class="to-[#FFA00A]/8 absolute inset-0 bg-gradient-to-r from-[rgb(218,125,68)] via-[#FFA00A]/30"
+    >
       <!-- 浮动插图 -->
-      <div class="absolute -left-[5%] top-1/2 
-                  hidden h-[48rem] w-[65%] -translate-y-1/2 lg:block">
+      <div
+        class="absolute -left-[5%] top-1/2 hidden h-[48rem] w-[65%] -translate-y-1/2 lg:block"
+      >
         <LoginIllustration :alt="appName" />
       </div>
     </div>
-    
+
     <!-- Logo - 白色字体 -->
     <div class="absolute left-4 top-4">
       <img :src="logo" :alt="appName" />
-      <span class="text-xl font-semibold text-white 
-                   drop-shadow-[0_2px_4px_rgba(0,0,0,0.3)]">
+      <span
+        class="text-xl font-semibold text-white drop-shadow-[0_2px_4px_rgba(0,0,0,0.3)]"
+      >
         {{ appName }}
       </span>
     </div>
-    
+
     <!-- 登录卡片 - 右侧居中 -->
     <div class="flex w-full flex-1 items-center justify-end">
       <div class="w-full md:w-[480px] lg:mr-[10%]">
@@ -868,6 +886,7 @@ const defaultPreferences: Preferences = {
 ```
 
 #### 备份文件: `apps/web-antd/src/layouts/auth-original.vue`
+
 保留了原始布局，可随时切换回去。
 
 ---
@@ -877,6 +896,7 @@ const defaultPreferences: Preferences = {
 #### 文件: `packages/effects/layouts/src/authentication/icons/login-illustration.vue`
 
 **新建组件**：
+
 ```vue
 <script setup lang="ts">
 defineOptions({
@@ -893,7 +913,7 @@ defineProps<{
     <img
       src="/login-illustration.svg"
       :alt="alt || 'Login Illustration'"
-      class="animate-float w-full opacity-40"
+      class="w-full animate-float opacity-40"
     />
   </div>
 </template>
@@ -905,7 +925,8 @@ defineProps<{
 }
 
 @keyframes float-smooth {
-  0%, 100% {
+  0%,
+  100% {
     transform: scale(1.2) translateY(0);
   }
   50% {
@@ -916,6 +937,7 @@ defineProps<{
 ```
 
 #### 文件: `packages/effects/layouts/src/authentication/index.ts`
+
 ```typescript
 export { default as AuthPageLayout } from './authentication.vue';
 export { default as LoginIllustration } from './icons/login-illustration.vue'; // ← 新增导出
@@ -923,6 +945,7 @@ export * from './types';
 ```
 
 #### 静态资源: `apps/web-antd/public/login-illustration.svg`
+
 插图 SVG 文件放置在 public 目录。
 
 ---
@@ -932,6 +955,7 @@ export * from './types';
 #### 文件: `apps/web-antd/src/views/_core/authentication/login.vue`
 
 **修改内容**：
+
 - ✅ 移除内部标题，使用组件默认标题
 - ✅ 新增"其他登录方式"分隔线
 - ✅ 图标按钮样式统一
@@ -939,12 +963,13 @@ export * from './types';
 - ✅ 多语言支持
 
 **其他登录方式**：
+
 ```vue
 <template>
   <div class="mt-8">
     <!-- 分隔线 -->
     <div class="relative mb-6 flex justify-center text-xs">
-      <span class="bg-background relative z-10 px-3">
+      <span class="relative z-10 bg-background px-3">
         {{ $t('authentication.otherLoginMethods') }}
       </span>
       <div class="absolute inset-0 flex items-center">
@@ -956,22 +981,20 @@ export * from './types';
     <div class="flex justify-center gap-8">
       <!-- 手机登录 -->
       <button
-        class="flex size-12 items-center justify-center 
-               rounded-2xl border bg-slate-50 
-               transition-all hover:scale-110 hover:shadow-md"
-        @click="$router.push('/auth/code-login')">
+        class="flex size-12 items-center justify-center rounded-2xl border bg-slate-50 transition-all hover:scale-110 hover:shadow-md"
+        @click="$router.push('/auth/code-login')"
+      >
         <svg><!-- 手机图标 --></svg>
       </button>
-      
+
       <!-- 二维码登录 -->
       <button
-        class="flex size-12 items-center justify-center 
-               rounded-2xl border bg-slate-50 
-               transition-all hover:scale-110 hover:shadow-md"
-        @click="$router.push('/auth/qrcode-login')">
+        class="flex size-12 items-center justify-center rounded-2xl border bg-slate-50 transition-all hover:scale-110 hover:shadow-md"
+        @click="$router.push('/auth/qrcode-login')"
+      >
         <svg><!-- 二维码图标 --></svg>
       </button>
-      
+
       <!-- 微信登录 (已注释) -->
       <!-- <button ...>...</button> -->
     </div>
@@ -1009,12 +1032,13 @@ async function handleSend(e: Event) {
 ```
 
 #### 文件: `apps/web-antd/src/views/_core/authentication/forget-password.vue`
+
 #### 文件: `apps/web-antd/src/views/_core/authentication/code-login.vue`
 
 **修改**: 验证码长度从 4 位改为 6 位。
 
 ```typescript
-const CODE_LENGTH = 6;  // 4 → 6
+const CODE_LENGTH = 6; // 4 → 6
 ```
 
 ---
@@ -1022,6 +1046,7 @@ const CODE_LENGTH = 6;  // 4 → 6
 ### 6. 国际化新增
 
 #### 文件: `packages/locales/src/langs/zh-CN/authentication.json`
+
 ```json
 {
   "otherLoginMethods": "或使用以下方式登录",
@@ -1031,6 +1056,7 @@ const CODE_LENGTH = 6;  // 4 → 6
 ```
 
 #### 文件: `packages/locales/src/langs/en-US/authentication.json`
+
 ```json
 {
   "otherLoginMethods": "Or sign in with",
@@ -1045,29 +1071,32 @@ const CODE_LENGTH = 6;  // 4 → 6
 
 #### 文件: `internal/vite-config/src/plugins/inject-app-loading/default-loading.html`
 
-**问题**: 
+**问题**:
+
 - Loading 动画颜色先蓝后橙（闪烁）
 - 标题字体粗细变化
 
 **修复**:
+
 ```html
 <style data-app-loading="inject-css">
   /* 修改主题色回退值为橙色 */
   .loader::before {
     background: hsl(var(--primary, 37 100% 52%) / 50%); /* 蓝色 → 橙色 */
   }
-  
+
   .loader::after {
     background: hsl(var(--primary, 37 100% 52%)); /* 蓝色 → 橙色 */
   }
-  
+
   /* 锁定标题样式 */
   .title {
     font-weight: 600 !important;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
     color: rgb(0 0 0 / 85%) !important;
   }
-  
+
   .dark .title {
     color: #fff !important;
   }
@@ -1094,7 +1123,7 @@ const CODE_LENGTH = 6;  // 4 → 6
 ### 我要修改...
 
 | 需求 | 文件位置 |
-|------|---------|
+| --- | --- |
 | **登录页布局** | `apps/web-antd/src/layouts/auth.vue` |
 | **登录表单** | `apps/web-antd/src/views/_core/authentication/login.vue` |
 | **验证码登录** | `apps/web-antd/src/views/_core/authentication/code-login.vue` |
@@ -1111,20 +1140,23 @@ const CODE_LENGTH = 6;  // 4 → 6
 ### 常见问题
 
 #### Q: 如何切换回原始登录布局？
+
 A: 修改路由配置，将 `auth.vue` 改为 `auth-original.vue`。
 
 #### Q: 如何添加新的主题色？
+
 A: 参见 [主题定制](#主题定制) 章节。
 
 #### Q: 修改 Loading 页面后不生效？
+
 A: 必须重启开发服务器 (`Ctrl+C` 然后 `pnpm dev`)。
 
 #### Q: 如何自定义登录插图？
+
 A: 替换 `apps/web-antd/public/login-illustration.svg` 文件。
 
 #### Q: 验证码长度如何修改？
+
 A: 修改对应页面的 `CODE_LENGTH` 常量。
 
 ---
-
-
diff --git a/apps/web-antd/src/layouts/auth-original.vue b/apps/web-antd/src/layouts/auth-original.vue
index 9851a9e02..8ba66e85a 100644
--- a/apps/web-antd/src/layouts/auth-original.vue
+++ b/apps/web-antd/src/layouts/auth-original.vue
@@ -23,4 +23,3 @@ const logoDark = computed(() => preferences.logo.sourceDark);
     <!-- <template #toolbar></template> -->
   </AuthPageLayout>
 </template>
-
diff --git a/apps/web-antd/src/layouts/auth.vue b/apps/web-antd/src/layouts/auth.vue
index 5e8bb823c..02a4c8bbd 100644
--- a/apps/web-antd/src/layouts/auth.vue
+++ b/apps/web-antd/src/layouts/auth.vue
@@ -1,11 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import {
-  LanguageToggle,
-  LoginIllustration,
-  ThemeToggle,
-} from '@vben/layouts';
+import { LanguageToggle, LoginIllustration, ThemeToggle } from '@vben/layouts';
 import { preferences, usePreferences } from '@vben/preferences';
 
 const appName = computed(() => preferences.app.name);
@@ -22,7 +18,7 @@ const { isDark } = usePreferences();
     <div class="absolute inset-0 z-0 size-full">
       <!-- 橙色渐变背景 - 从左到右依次变淡 -->
       <div
-        class="absolute inset-0 size-full bg-gradient-to-r from-[rgb(218,125,68)] via-[#FFA00A]/30 to-[#FFA00A]/8 dark:from-[rgb(218,125,68)] dark:via-[#FFA00A]/40 dark:to-[#FFA00A]/12"
+        class="to-[#FFA00A]/8 dark:to-[#FFA00A]/12 absolute inset-0 size-full bg-gradient-to-r from-[rgb(218,125,68)] via-[#FFA00A]/30 dark:from-[rgb(218,125,68)] dark:via-[#FFA00A]/40"
       >
         <!-- 浮动插图 - 左侧区域 -->
         <div
@@ -51,7 +47,7 @@ const { isDark } = usePreferences();
 
     <!-- 右上角 Toolbar -->
     <div
-      class="bg-accent absolute right-2 top-4 z-20 flex items-center gap-1 rounded-3xl px-3 py-1 lg:right-6 lg:top-6"
+      class="absolute right-2 top-4 z-20 flex items-center gap-1 rounded-3xl bg-accent px-3 py-1 lg:right-6 lg:top-6"
     >
       <LanguageToggle v-if="preferences.widget.languageToggle" />
       <ThemeToggle v-if="preferences.widget.themeToggle" />
@@ -64,7 +60,7 @@ const { isDark } = usePreferences();
       <!-- 登录卡片 - 响应式居中/靠右 -->
       <div class="w-full md:w-[480px] lg:mr-[10%]">
         <div
-          class="bg-background relative overflow-hidden rounded-[2.5rem] p-8 shadow-[0_30px_60px_-15px_rgba(255,160,10,0.2)] dark:shadow-[0_30px_60px_-15px_rgba(255,160,10,0.3)]"
+          class="relative overflow-hidden rounded-[2.5rem] bg-background p-8 shadow-[0_30px_60px_-15px_rgba(255,160,10,0.2)] dark:shadow-[0_30px_60px_-15px_rgba(255,160,10,0.3)]"
         >
           <!-- 登录表单 - RouterView 渲染实际的登录组件 -->
           <div class="login-form-container">
@@ -79,7 +75,7 @@ const { isDark } = usePreferences();
 
           <!-- 遇到问题 -->
           <div class="mt-6 text-center">
-            <span class="text-muted-foreground text-xs">
+            <span class="text-xs text-muted-foreground">
               {{ $t('authentication.contactSupport') }}
               <a
                 href="#"
diff --git a/apps/web-antd/src/views/_core/authentication/login.vue b/apps/web-antd/src/views/_core/authentication/login.vue
index c48989776..6cf0be002 100644
--- a/apps/web-antd/src/views/_core/authentication/login.vue
+++ b/apps/web-antd/src/views/_core/authentication/login.vue
@@ -185,12 +185,14 @@ const formSchema = computed((): VbenFormSchema[] => {
     <div class="mt-8">
       <div class="relative mb-6 flex justify-center text-xs text-slate-400">
         <span
-          class="bg-background dark:bg-slate-900 relative z-10 px-3 font-medium"
+          class="relative z-10 bg-background px-3 font-medium dark:bg-slate-900"
         >
           {{ $t('authentication.otherLoginMethods') }}
         </span>
         <div class="absolute inset-0 flex items-center">
-          <div class="w-full border-t border-slate-100 dark:border-slate-700"></div>
+          <div
+            class="w-full border-t border-slate-100 dark:border-slate-700"
+          ></div>
         </div>
       </div>
 
@@ -238,7 +240,7 @@ const formSchema = computed((): VbenFormSchema[] => {
             <circle cx="6.5" cy="17.5" r="1" fill="currentColor" />
           </svg>
         </button>
-        
+
         <!-- 微信扫码登录 -->
         <!-- <button
           class="flex size-12 items-center justify-center rounded-2xl border border-slate-100 bg-slate-50 text-xl text-slate-400 transition-all hover:scale-110 hover:bg-white hover:text-[#46AF35] hover:shadow-md dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
diff --git a/internal/vite-config/src/plugins/inject-app-loading/default-loading.html b/internal/vite-config/src/plugins/inject-app-loading/default-loading.html
index 69239b036..4058a325b 100644
--- a/internal/vite-config/src/plugins/inject-app-loading/default-loading.html
+++ b/internal/vite-config/src/plugins/inject-app-loading/default-loading.html
@@ -22,8 +22,8 @@
   }
 
   .loading.hidden {
-    pointer-events: none;
     visibility: hidden;
+    pointer-events: none;
     opacity: 0;
     transition: all 0.8s ease-out;
   }
@@ -34,10 +34,12 @@
 
   .title {
     margin-top: 66px;
+    font-family:
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+      Arial, sans-serif !important;
     font-size: 28px;
     font-weight: 600 !important;
     color: rgb(0 0 0 / 85%) !important;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
   }
 
   .dark .title {
diff --git a/packages/effects/layouts/src/authentication/icons/login-illustration.vue b/packages/effects/layouts/src/authentication/icons/login-illustration.vue
index bcfbfea0e..d8dd4f545 100644
--- a/packages/effects/layouts/src/authentication/icons/login-illustration.vue
+++ b/packages/effects/layouts/src/authentication/icons/login-illustration.vue
@@ -14,18 +14,29 @@ defineProps<{
       src="/login-illustration.svg"
       :alt="alt || 'Login Illustration'"
       class="animate-float w-full opacity-40"
-      style="max-width: none; height: auto;"
+      style="max-width: none; height: auto"
     />
   </div>
 </template>
 
 <style scoped>
+@keyframes float-smooth {
+  0%,
+  100% {
+    transform: scale(1.2) translateY(0);
+  }
+
+  50% {
+    transform: scale(1.2) translateY(-15px);
+  }
+}
+
 .login-illustration-container {
-  width: 100%;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100%;
+  height: 100%;
   overflow: visible;
 }
 
@@ -40,14 +51,4 @@ defineProps<{
 .login-illustration-container img.animate-float {
   animation: float-smooth 3s ease-in-out 0ms infinite;
 }
-
-@keyframes float-smooth {
-  0%, 100% {
-    transform: scale(1.2) translateY(0);
-  }
-  50% {
-    transform: scale(1.2) translateY(-15px);
-  }
-}
 </style>
-