xto-fronted 0.9.13 → 0.9.14

package/src/views/login/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { Button, Icon } from '@xto/base'
 import { Form, FormItem, Input, Checkbox } from '@xto/form'
@@ -7,9 +7,14 @@ import { Message } from '@xto/feedback'
 import { login } from '@/api/auth'
 import { setTokenInfo } from '@/utils/auth'
 import { getAppId, getClientId } from '@/utils/config'
+import { useAppStore } from '@/stores/app'
 
 const router = useRouter()
 const route = useRoute()
+const appStore = useAppStore()
+
+const appName = computed(() => appStore.appName || 'XTO App')
+const year = new Date().getFullYear()
 
 const loading = ref(false)
 const rememberMe = ref(false)
@@ -21,7 +26,7 @@ const formData = reactive({
 
 const rules: Record<string, any[]> = {
   uid: [
-    { required: true, message: '请输入用户名', trigger: 'blur' }
+    { required: true, message: '请输入账号', trigger: 'blur' }
   ],
   password: [
     { required: true, message: '请输入密码', trigger: 'blur' },
@@ -34,7 +39,10 @@ const formRef = ref()
 // 登录
 const handleLogin = async () => {
   try {
-    await formRef.value?.validate()
+    // Form.validate 返回布尔值（失败不抛异常），校验不通过则终止登录
+    const valid = await formRef.value?.validate()
+    if (valid === false) return
+
     loading.value = true
 
     // 调用登录 API
@@ -71,490 +79,570 @@ const handleLogin = async () => {
 
 <template>
   <div class="login-page">
-    <!-- 左侧品牌区域 -->
-    <div class="login-brand">
-      <div class="brand-content">
-        <!-- Logo -->
-        <div class="brand-logo">
-          <div class="logo-icon">
-            <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <rect width="48" height="48" rx="12" fill="currentColor"/>
-              <path d="M14 24L20 30L34 16" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-          </div>
-          <span class="logo-text">XTO</span>
-        </div>
-
-        <!-- 标语 -->
-        <div class="brand-slogan">
-          <h1>企业级后台管理解决方案</h1>
-          <p>开箱即用的中后台前端/设计解决方案</p>
-        </div>
-
-        <!-- 特性列表 -->
-        <div class="brand-features">
-          <div class="feature-item">
-            <div class="feature-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
-              </svg>
-            </div>
-            <div class="feature-text">
-              <h4>高性能</h4>
-              <p>极致的渲染性能与响应速度</p>
+    <a class="skip-link" href="#login-card">跳转到登录表单</a>
+
+    <div class="page">
+      <!-- 左侧品牌区 -->
+      <aside class="brand-side" aria-hidden="true">
+        <div class="deco-grid"></div>
+        <div class="deco-glow"></div>
+        <div class="deco-line l1"></div>
+        <div class="deco-line l2"></div>
+
+        <div class="brand-inner">
+          <div class="brand-logo">
+            <div class="logo-mark">X</div>
+            <div class="logo-name">
+              {{ appName }}
+              <small>XTO PLATFORM</small>
             </div>
           </div>
-          <div class="feature-item">
-            <div class="feature-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="3" y="3" width="18" height="18" rx="2"/>
-                <path d="M9 9h6M9 12h6M9 15h4"/>
-              </svg>
-            </div>
-            <div class="feature-text">
-              <h4>丰富组件</h4>
-              <p>60+ 高质量业务组件</p>
-            </div>
-          </div>
-          <div class="feature-item">
-            <div class="feature-icon">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <circle cx="12" cy="12" r="10"/>
-                <path d="M12 6v6l4 2"/>
-              </svg>
-            </div>
-            <div class="feature-text">
-              <h4>持续更新</h4>
-              <p>活跃的社区与快速迭代</p>
-            </div>
-          </div>
-        </div>
 
-        <!-- 底部装饰 -->
-        <div class="brand-decoration">
-          <div class="decoration-line"></div>
-          <div class="decoration-dots">
-            <span></span><span></span><span></span>
-          </div>
+          <h1 class="brand-title">
+            统一身份认证<br>数字化赋能<em>高效协同</em>
+          </h1>
+          <p class="brand-desc">
+            一站式访问所有业务系统<br>
+            安全、高效、可信的企业级数字化工作入口
+          </p>
+
+          <!-- 漂浮插画：认证盾牌 + 业务卡片 -->
+          <svg class="brand-visual" viewBox="0 0 460 290" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <linearGradient id="gShield" x1="160" y1="60" x2="300" y2="250" gradientUnits="userSpaceOnUse">
+                <stop offset="0" stop-color="#4fa3ff"/>
+                <stop offset="1" stop-color="#1e5fd6"/>
+              </linearGradient>
+              <linearGradient id="gOrbit" x1="0" y1="0" x2="460" y2="290" gradientUnits="userSpaceOnUse">
+                <stop offset="0" stop-color="#67e8f9" stop-opacity=".5"/>
+                <stop offset=".5" stop-color="#818cf8" stop-opacity=".35"/>
+                <stop offset="1" stop-color="#34d399" stop-opacity=".4"/>
+              </linearGradient>
+              <radialGradient id="gHalo" cx=".5" cy=".5" r=".5">
+                <stop offset="0" stop-color="#38bdf8" stop-opacity=".3"/>
+                <stop offset="1" stop-color="#38bdf8" stop-opacity="0"/>
+              </radialGradient>
+              <linearGradient id="gViolet" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0" stop-color="#a78bfa"/>
+                <stop offset="1" stop-color="#7c5cf0"/>
+              </linearGradient>
+            </defs>
+
+            <!-- 光晕与轨道 -->
+            <circle cx="230" cy="160" r="130" fill="url(#gHalo)"/>
+            <ellipse cx="230" cy="165" rx="190" ry="105" stroke="url(#gOrbit)" stroke-width="1.5" stroke-dasharray="3 8"/>
+            <ellipse cx="230" cy="165" rx="145" ry="78" stroke="rgba(255,255,255,.14)" stroke-width="1"/>
+
+            <!-- 连接点 -->
+            <circle cx="52" cy="120" r="4" fill="#67e8f9"/>
+            <circle cx="410" cy="98" r="4" fill="#fbbf24"/>
+            <circle cx="392" cy="228" r="3.5" fill="#818cf8"/>
+            <path d="M52 120 C 110 90, 140 78, 178 92" stroke="#67e8f9" stroke-opacity=".45" stroke-width="1.2" stroke-dasharray="2 6"/>
+            <path d="M410 98 C 360 80, 320 76, 286 92" stroke="#fbbf24" stroke-opacity=".45" stroke-width="1.2" stroke-dasharray="2 6"/>
+
+            <!-- 中央盾牌 -->
+            <g class="float-a">
+              <path d="M230 58 L296 84 V150 C296 200 268 232 230 246 C192 232 164 200 164 150 V84 Z" fill="url(#gShield)"/>
+              <path d="M230 58 L296 84 V150 C296 200 268 232 230 246 Z" fill="#0b3f9e" fill-opacity=".25"/>
+              <rect x="206" y="130" width="48" height="40" rx="8" fill="#fff"/>
+              <path d="M214 130 v-8 a16 16 0 0 1 32 0 v8" stroke="#fff" stroke-width="7" stroke-linecap="round" fill="none"/>
+              <circle cx="230" cy="148" r="5.5" fill="#1e5fd6"/>
+              <rect x="227.5" y="150" width="5" height="11" rx="2.5" fill="#1e5fd6"/>
+            </g>
+
+            <!-- 左侧：数据卡片 -->
+            <g class="float-b">
+              <rect x="66" y="120" width="96" height="74" rx="12" fill="#ffffff"/>
+              <rect x="66" y="120" width="96" height="74" rx="12" stroke="#e2e8f0" stroke-width="1"/>
+              <rect x="80" y="134" width="42" height="7" rx="3.5" fill="#cbd5e1"/>
+              <rect x="80" y="168" width="10" height="16" rx="3" fill="#f59e0b"/>
+              <rect x="96" y="158" width="10" height="26" rx="3" fill="#fbbf24"/>
+              <rect x="112" y="150" width="10" height="34" rx="3" fill="#10b981"/>
+              <path d="M124 146 L138 134" stroke="#10b981" stroke-width="2.5" stroke-linecap="round"/>
+              <path d="M133 133 h6 v6" stroke="#10b981" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+            </g>
+
+            <!-- 右上：齿轮 -->
+            <g class="float-c">
+              <circle cx="330" cy="86" r="30" fill="url(#gViolet)"/>
+              <g fill="#fff">
+                <rect x="326.5" y="60" width="7" height="10" rx="2"/>
+                <rect x="326.5" y="102" width="7" height="10" rx="2"/>
+                <rect x="304" y="82.5" width="10" height="7" rx="2"/>
+                <rect x="346" y="82.5" width="10" height="7" rx="2"/>
+                <rect x="310.5" y="63" width="7" height="10" rx="2" transform="rotate(-45 314 68)"/>
+                <rect x="342.5" y="99" width="7" height="10" rx="2" transform="rotate(-45 346 104)"/>
+                <rect x="310.5" y="99" width="7" height="10" rx="2" transform="rotate(45 314 104)"/>
+                <rect x="342.5" y="63" width="7" height="10" rx="2" transform="rotate(45 346 68)"/>
+              </g>
+              <circle cx="330" cy="86" r="12" fill="#fff"/>
+              <circle cx="330" cy="86" r="6" fill="#7c5cf0"/>
+            </g>
+
+            <!-- 右下：系统列表卡片 -->
+            <g class="float-b">
+              <rect x="312" y="150" width="104" height="66" rx="12" fill="#ffffff"/>
+              <rect x="312" y="150" width="104" height="66" rx="12" stroke="#e2e8f0" stroke-width="1"/>
+              <circle cx="330" cy="168" r="6" fill="#22d3ee"/>
+              <rect x="342" y="164" width="52" height="7" rx="3.5" fill="#cbd5e1"/>
+              <circle cx="330" cy="186" r="6" fill="#fbbf24"/>
+              <rect x="342" y="182" width="40" height="7" rx="3.5" fill="#cbd5e1"/>
+              <circle cx="330" cy="204" r="6" fill="#a78bfa"/>
+              <rect x="342" y="200" width="46" height="7" rx="3.5" fill="#cbd5e1"/>
+            </g>
+
+            <!-- 左下：认证徽章 -->
+            <g class="float-c">
+              <circle cx="128" cy="232" r="24" fill="#10b981"/>
+              <circle cx="128" cy="232" r="24" stroke="#34d399" stroke-width="4" stroke-opacity=".5"/>
+              <path d="M118 232 l7 7 14 -15" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+            </g>
+
+            <!-- 散落装饰 -->
+            <path d="M84 62 l0 12 M78 68 l12 0" stroke="#818cf8" stroke-width="2" stroke-linecap="round"/>
+            <path d="M372 262 l0 10 M367 267 l10 0" stroke="#67e8f9" stroke-width="2" stroke-linecap="round"/>
+            <circle cx="416" cy="180" r="2.5" fill="#f59e0b"/>
+            <circle cx="98" cy="180" r="2.5" fill="#a78bfa"/>
+          </svg>
         </div>
-      </div>
-
-      <!-- 背景装饰 -->
-      <div class="brand-bg">
-        <div class="bg-grid"></div>
-      </div>
-    </div>
-
-    <!-- 右侧登录区域 -->
-    <div class="login-form-section">
-      <div class="form-container">
-        <!-- 头部 -->
-        <div class="form-header">
-          <h2>欢迎登录</h2>
-          <p>请输入您的账户信息</p>
-        </div>
-
-        <!-- 表单 -->
-        <Form
-          ref="formRef"
-          :model="formData"
-          :rules="rules"
-          class="login-form"
-          label-width="0"
-        >
-          <FormItem prop="uid">
-            <div class="input-wrapper">
-              <label class="input-label">用户名</label>
-              <Input
-                v-model="formData.uid"
-                placeholder="请输入用户名"
-                size="large"
-              >
-                <template #prefix>
-                  <Icon name="user" :size="18" />
-                </template>
-              </Input>
+      </aside>
+
+      <!-- 右侧登录区 -->
+      <main class="login-side">
+        <section class="login-card" id="login-card">
+          <header class="card-header">
+            <div class="logo-mark" aria-hidden="true">X</div>
+            <h2 class="welcome">账号登录</h2>
+            <p class="welcome-sub">欢迎登录{{ appName }}</p>
+          </header>
+
+          <Form
+            ref="formRef"
+            :model="formData"
+            :rules="rules"
+            class="login-form"
+            label-width="0"
+          >
+            <FormItem prop="uid">
+              <div class="input-wrapper">
+                <label class="input-label">账号</label>
+                <Input
+                  v-model="formData.uid"
+                  placeholder="请输入账号"
+                  size="large"
+                >
+                  <template #prefix>
+                    <Icon name="user" :size="18" />
+                  </template>
+                </Input>
+              </div>
+            </FormItem>
+
+            <FormItem prop="password">
+              <div class="input-wrapper">
+                <label class="input-label">密码</label>
+                <Input
+                  v-model="formData.password"
+                  type="password"
+                  placeholder="请输入登录密码"
+                  size="large"
+                  show-password
+                  @keyup.enter="handleLogin"
+                >
+                  <template #prefix>
+                    <Icon name="lock" :size="18" />
+                  </template>
+                </Input>
+              </div>
+            </FormItem>
+
+            <div class="form-options">
+              <Checkbox v-model="rememberMe">记住账号</Checkbox>
+              <a href="#" class="link">忘记密码？</a>
             </div>
-          </FormItem>
-
-          <FormItem prop="password">
-            <div class="input-wrapper">
-              <label class="input-label">密码</label>
-              <Input
-                v-model="formData.password"
-                type="password"
-                placeholder="请输入密码"
+
+            <FormItem>
+              <Button
+                type="primary"
                 size="large"
-                show-password
-                @keyup.enter="handleLogin"
+                :loading="loading"
+                class="btn-login"
+                @click="handleLogin"
               >
-                <template #prefix>
-                  <Icon name="lock" :size="18" />
-                </template>
-              </Input>
-            </div>
-          </FormItem>
-
-          <div class="form-options">
-            <Checkbox v-model="rememberMe">记住我</Checkbox>
-            <a href="#" class="forgot-link">忘记密码？</a>
-          </div>
-
-          <FormItem>
-            <Button
-              type="primary"
-              size="large"
-              :loading="loading"
-              class="login-btn"
-              @click="handleLogin"
-            >
-              <span v-if="!loading">登 录</span>
-              <span v-else>登录中...</span>
-            </Button>
-          </FormItem>
-        </Form>
-
-        <!-- 底部 -->
-        <div class="form-footer">
-          <p>其他登录方式</p>
-          <div class="social-login">
-            <button class="social-btn" title="企业微信">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
-              </svg>
-            </button>
-            <button class="social-btn" title="钉钉">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"/>
-              </svg>
-            </button>
-            <button class="social-btn" title="飞书">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-              </svg>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- 版权信息 -->
-      <div class="copyright">
-        <p>© 2024 XTO Team. All rights reserved.</p>
-      </div>
+                {{ loading ? '正在登录…' : '登 录' }}
+              </Button>
+            </FormItem>
+          </Form>
+        </section>
+
+        <!-- 版权信息 -->
+        <footer class="footer">
+          Copyright © {{ year }} {{ appName }} All Rights Reserved<br>
+          建议使用 Chrome / Edge 浏览器访问
+        </footer>
+      </main>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .login-page {
+  // 设计令牌（来源：桌面 login.html 设计稿）
+  --login-accent: #0A6CD1;
+  --login-accent-hover: #0857A8;
+  --login-accent-ring: rgba(10, 108, 209, 0.18);
+  --login-border: #E2E8F0;
+  --login-muted: #475569;
+  --login-foreground: #020617;
+
+  // 登录页内整体切换为设计稿蓝（按钮 / 链接 / 聚焦环）
+  --xto-color-primary: #0A6CD1;
+  --xto-color-primary-light-1: #0857A8;
+  --xto-color-primary-light-3: #4A94DC;
+  --xto-color-primary-light-9: #E8F1FB;
+  --xto-focus-ring: 0 0 0 3px var(--login-accent-ring);
+
   width: 100%;
   min-height: 100vh;
+  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+  color: var(--login-foreground);
+  background: #F8FAFC;
+}
+
+.skip-link {
+  position: absolute;
+  top: -48px;
+  left: 16px;
+  z-index: 100;
+  padding: 10px 18px;
+  background: #0F172A;
+  color: #fff;
+  border-radius: 0 0 8px 8px;
+  text-decoration: none;
+  transition: top 180ms ease;
+
+  &:focus {
+    top: 0;
+  }
+}
+
+.page {
   display: flex;
-  background: var(--xto-bg-color-page, #F7F8FA);
+  min-height: 100vh;
+  min-width: 320px;
 }
 
-// 左侧品牌区域（企业级纯色品牌底 + 细网格纹理）
-.login-brand {
-  flex: 1;
-  position: relative;
+// 共用 Logo 方块
+.logo-mark {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--xto-color-primary-dark-1, #4338CA);
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: var(--login-accent);
+  color: #fff;
+  font-size: 22px;
+  font-weight: 700;
+}
+
+/* ===== 左侧品牌区 ===== */
+.brand-side {
+  position: relative;
+  flex: 1.15;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 0 8%;
+  background: linear-gradient(150deg, #0e2f5c 0%, #164a80 55%, #2268ab 100%);
+  color: #fff;
   overflow: hidden;
 
-  @media (max-width: 992px) {
+  @media (max-width: 900px) {
     display: none;
   }
+}
 
-  .brand-content {
-    position: relative;
-    z-index: 2;
-    padding: 60px;
-    max-width: 520px;
-    color: var(--xto-bg-color, #FFFFFF);
-  }
-
-  .brand-logo {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 48px;
+.deco-grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
+  background-size: 72px 72px;
+  pointer-events: none;
+}
 
-    .logo-icon {
-      width: 48px;
-      height: 48px;
-      color: var(--xto-bg-color, #FFFFFF);
-    }
+.deco-glow {
+  position: absolute;
+  width: 560px;
+  height: 560px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(30, 120, 210, 0.5) 0%, transparent 65%);
+  bottom: -200px;
+  right: -140px;
+  pointer-events: none;
+}
 
-    .logo-text {
-      font-size: 28px;
-      font-weight: 700;
-      letter-spacing: 2px;
-    }
+.deco-line {
+  position: absolute;
+  width: 1px;
+  height: 42%;
+  left: 0;
+  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
+  pointer-events: none;
+
+  &.l1 { top: 8%; }
+  &.l2 {
+    bottom: 4%;
+    background: linear-gradient(180deg, transparent, rgba(70, 150, 230, 0.55), transparent);
   }
+}
 
-  .brand-slogan {
-    margin-bottom: 48px;
+.brand-inner {
+  position: relative;
+  z-index: 1;
+}
 
-    h1 {
-      font-size: 32px;
-      font-weight: 600;
-      line-height: 1.3;
-      margin-bottom: 12px;
-    }
+.brand-logo {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 80px;
 
-    p {
-      font-size: 16px;
-      opacity: 0.8;
-      line-height: 1.6;
-    }
-  }
+  .logo-name {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: 2px;
 
-  .brand-features {
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-
-    .feature-item {
-      display: flex;
-      align-items: flex-start;
-      gap: 16px;
-      padding: 16px;
-      background: rgba(255, 255, 255, 0.08);
-      border-radius: var(--xto-border-radius-large, 12px);
-      transition: background-color 0.2s ease;
-
-      &:hover {
-        background: rgba(255, 255, 255, 0.14);
-      }
+    small {
+      display: block;
+      font-size: 11px;
+      font-weight: 400;
+      letter-spacing: 3.5px;
+      opacity: 0.55;
+      margin-top: 3px;
     }
+  }
+}
 
-    .feature-icon {
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: rgba(255, 255, 255, 0.2);
-      border-radius: var(--xto-border-radius-base, 6px);
-      flex-shrink: 0;
-
-      svg {
-        width: 20px;
-        height: 20px;
-      }
-    }
+.brand-title {
+  font-size: 40px;
+  font-weight: 700;
+  line-height: 1.45;
+  letter-spacing: 2px;
+  color: #fff;
 
-    .feature-text {
-      h4 {
-        font-size: 15px;
-        font-weight: 600;
-        margin-bottom: 4px;
-      }
-
-      p {
-        font-size: 13px;
-        opacity: 0.8;
-      }
-    }
+  em {
+    font-style: normal;
+    color: #8ec3f0;
   }
+}
 
-  .brand-decoration {
-    position: absolute;
-    bottom: 60px;
-    left: 60px;
-    right: 60px;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    .decoration-line {
-      flex: 1;
-      height: 1px;
-      background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent);
-    }
+.brand-desc {
+  margin-top: 24px;
+  max-width: 440px;
+  font-size: 15px;
+  line-height: 2;
+  letter-spacing: 0.5px;
+  color: rgba(255, 255, 255, 0.62);
+}
 
-    .decoration-dots {
-      display: flex;
-      gap: 8px;
+.brand-visual {
+  margin-top: 52px;
+  margin-left: 64px;
+  max-width: 460px;
+  filter: drop-shadow(0 18px 32px rgba(2, 6, 23, 0.35));
 
-      span {
-        width: 6px;
-        height: 6px;
-        background: rgba(255, 255, 255, 0.5);
-        border-radius: 50%;
-      }
-    }
+  // 矮屏先缩小插画，过矮再隐藏，保证品牌区不溢出
+  @media (max-height: 840px) {
+    max-width: 360px;
+    margin-top: 36px;
   }
 
-  // 背景装饰（淡紫蓝网点 + 光斑）
-  .brand-bg {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    overflow: hidden;
-
-    .bg-grid {
-      position: absolute;
-      inset: 0;
-      background-image:
-        radial-gradient(rgba(255, 255, 255, 0.14) 1.2px, transparent 1.2px),
-        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
-      background-size: 28px 28px, 56px 56px, 56px 56px;
-    }
+  @media (max-height: 700px) {
+    display: none;
   }
 }
 
-// 右侧登录区域
-.login-form-section {
-  width: 500px;
-  min-height: 100vh;
+.float-a { animation: login-float-y 5.5s ease-in-out infinite; }
+.float-b { animation: login-float-y 7s ease-in-out 0.8s infinite; }
+.float-c { animation: login-float-y 6s ease-in-out 1.6s infinite; }
+
+@keyframes login-float-y {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-9px); }
+}
+
+/* ===== 右侧登录区 ===== */
+.login-side {
+  position: relative;
+  flex: 1;
   display: flex;
-  flex-direction: column;
+  align-items: center;
   justify-content: center;
-  padding: 60px 80px;
-  background: var(--xto-bg-color, #FFFFFF);
+  padding: 40px;
+}
+
+.login-card {
+  width: 100%;
+  max-width: 424px;
+  padding: 52px 48px 44px;
+  background: #fff;
+  border: 1px solid var(--login-border);
+  border-radius: 16px;
+  box-shadow: 0 16px 48px rgba(2, 6, 23, 0.06), 0 2px 6px rgba(2, 6, 23, 0.04);
+}
 
-  @media (max-width: 768px) {
-    width: 100%;
-    padding: 40px 24px;
+.card-header {
+  text-align: center;
+
+  .logo-mark {
+    margin: 0 auto 22px;
+    width: 52px;
+    height: 52px;
+    font-size: 24px;
   }
 
-  .form-container {
-    width: 100%;
-    max-width: 360px;
-    margin: 0 auto;
+  .welcome {
+    font-size: 24px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    color: var(--login-foreground);
   }
 
-  .form-header {
-    margin-bottom: 40px;
+  .welcome-sub {
+    margin-top: 8px;
+    font-size: 14px;
+    color: var(--login-muted);
+  }
+}
 
-    h2 {
-      font-size: 28px;
-      font-weight: 600;
-      color: var(--xto-color-text-primary, #1F2329);
-      margin-bottom: 8px;
-    }
+.login-form {
+  margin-top: 38px;
 
-    p {
-      font-size: 14px;
-      color: var(--xto-color-text-secondary, #86909C);
-    }
+  .input-wrapper {
+    margin-bottom: 2px;
   }
 
-  .login-form {
-    .input-wrapper {
-      margin-bottom: 4px;
-    }
+  .input-label {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--login-foreground);
+  }
 
-    .input-label {
-      display: block;
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--xto-color-text-regular, #4E5566);
-      margin-bottom: 8px;
-    }
+  :deep(.x-form-item) {
+    // 校验错误信息以绝对定位挂在表单项底部，预留空间避免与下一项重叠
+    margin-bottom: 28px;
+  }
 
-    :deep(.x-form-item) {
-      margin-bottom: 24px;
-    }
+  :deep(.x-form-item__error) {
+    line-height: 1.5;
+  }
 
-    :deep(.x-input) {
-      --x-input-border-radius: 8px;
-    }
+  :deep(.x-input.x-input--large) {
+    height: 48px;
+    border: 1.5px solid var(--login-border);
+    border-radius: 10px;
+    transition: border-color 180ms ease, box-shadow 180ms ease;
 
-    :deep(.x-input__prefix) {
-      margin-right: 12px;
-      color: var(--xto-color-text-placeholder, #A9AEB8);
+    &:hover {
+      border-color: #cbd5e1;
     }
   }
 
-  .form-options {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 24px;
-
-    .forgot-link {
-      font-size: 14px;
-      color: var(--xto-color-primary, #4F46E5);
-      text-decoration: none;
-      transition: color 0.2s;
-
-      &:hover {
-        color: var(--xto-color-primary-dark-1, #4338CA);
-      }
-    }
+  :deep(.x-input__prefix) {
+    margin-right: 8px;
+    color: #94a3b8;
+    transition: color 180ms ease;
   }
 
-  .login-btn {
-    width: 100%;
-    height: 44px;
-    font-size: 16px;
-    font-weight: 500;
-    border-radius: var(--xto-border-radius-large, 10px);
-    letter-spacing: 4px;
-    transition: all 0.3s ease;
+  :deep(.x-input:focus-within .x-input__prefix) {
+    color: var(--login-accent);
+  }
+}
 
-    &:hover:not(:disabled) {
-      background-color: var(--xto-color-primary-light-1, #6158E7);
+.form-options {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 2px 0 26px;
+  font-size: 14px;
+  color: var(--login-muted);
+
+  .link {
+    color: var(--login-accent);
+    text-decoration: none;
+    transition: color 180ms ease;
+
+    &:hover {
+      color: var(--login-accent-hover);
+      text-decoration: underline;
     }
   }
+}
+
+.btn-login {
+  width: 100%;
+  height: 48px;
+  font-size: 16px;
+  font-weight: 600;
+  letter-spacing: 4px;
+  text-indent: 4px;
+  border-radius: 10px;
+  transition: background-color 180ms ease, box-shadow 180ms ease, transform 100ms ease;
+
+  &:hover:not(:disabled) {
+    box-shadow: 0 6px 18px rgba(10, 108, 209, 0.32);
+  }
 
-  .form-footer {
-    margin-top: 32px;
-    padding-top: 24px;
-    border-top: 1px solid var(--xto-border-color-lighter, #EDEEF1);
-    text-align: center;
+  &:active:not(:disabled) {
+    transform: scale(0.99);
+  }
+}
 
-    p {
-      font-size: 13px;
-      color: var(--xto-color-text-placeholder, #A9AEB8);
-      margin-bottom: 16px;
-    }
+.footer {
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  letter-spacing: 0.5px;
+  line-height: 1.9;
+  color: var(--login-muted);
+}
 
-    .social-login {
-      display: flex;
-      justify-content: center;
-      gap: 16px;
-    }
+/* ===== 响应式 ===== */
+@media (max-width: 900px) {
+  .login-side {
+    flex-direction: column;
+    justify-content: center;
+    padding: 48px 20px 40px;
+  }
 
-    .social-btn {
-      width: 44px;
-      height: 44px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--xto-fill-color, #F2F3F5);
-      border: none;
-      border-radius: 50%;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      color: var(--xto-color-text-secondary, #86909C);
-
-      svg {
-        width: 20px;
-        height: 20px;
-      }
-
-      &:hover {
-        background: var(--xto-color-primary-light-8, #DCDAFC);
-        color: var(--xto-color-primary, #4F46E5);
-        transform: translateY(-2px);
-      }
-    }
+  .login-card {
+    padding: 40px 26px 34px;
+    border-radius: 14px;
   }
 
-  .copyright {
-    margin-top: 48px;
-    text-align: center;
+  .footer {
+    position: static;
+    margin-top: 28px;
+  }
+}
 
-    p {
-      font-size: 12px;
-      color: var(--xto-color-text-placeholder, #A9AEB8);
-    }
+/* ===== 无障碍：减少动效 ===== */
+@media (prefers-reduced-motion: reduce) {
+  .float-a,
+  .float-b,
+  .float-c,
+  .skip-link,
+  .btn-login {
+    animation: none;
+    transition: none;
   }
 }
-</style>
+</style>