From 8b83b8facf357d1f55e5f582d2adc5297db7712f Mon Sep 17 00:00:00 2001
From: caoxiaozhu <leocaoxiaozhu@gmail.com>
Date: Tue, 14 Jul 2026 16:10:55 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=B8=BA=E5=8F=8C=E6=A0=8F=E8=A7=86=E8=A7=89?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

左侧新增品牌展示区与平台能力介绍，右侧保留登录表单并优化可访问性属性，Element Plus 链接/文本按钮统一样式与焦点表现。
---
 frontend/src/styles/index.scss         |  10 +-
 frontend/src/views/login/LoginView.vue | 634 ++++++++++++++++++-------
 2 files changed, 464 insertions(+), 180 deletions(-)

diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 3f5fe9a..a2f57ef 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -124,10 +124,18 @@ body {
 .el-button:active {
   transform: translateY(0);
 }
-.el-button.is-link:hover {
+.el-button.is-link:hover,
+.el-button.is-text:hover {
   transform: none;
   box-shadow: none;
 }
+.el-button.is-link:focus,
+.el-button.is-text:focus {
+  background-color: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
 
 /* 4. 标签 (el-tag) 圆润化 */
 .el-tag {
diff --git a/frontend/src/views/login/LoginView.vue b/frontend/src/views/login/LoginView.vue
index bef2528..91f81fd 100644
--- a/frontend/src/views/login/LoginView.vue
+++ b/frontend/src/views/login/LoginView.vue
@@ -40,225 +40,308 @@ async function handleLogin() {
 
 <template>
   <div class="login-page">
-    <div class="login-card">
-      <!-- LOGO 和标题 -->
-      <div class="login-header">
-        <img src="/logo.png" alt="Logo" class="login-logo" />
-        <h1 class="login-title">远光软件微调平台</h1>
-        <p class="login-subtitle">模型管理平台</p>
-      </div>
-
-      <!-- 登录表单 -->
-      <el-form
-        ref="loginFormRef"
-        :model="loginForm"
-        :rules="rules"
-        size="large"
-        @keyup.enter="handleLogin"
-      >
-        <el-form-item prop="username">
-          <el-input
-            v-model="loginForm.username"
-            placeholder="请输入账号/手机号/邮箱"
-            clearable
-          >
-            <template #prefix><i class="fa fa-user-o" /></template>
-          </el-input>
-        </el-form-item>
-
-        <el-form-item prop="password">
-          <el-input
-            v-model="loginForm.password"
-            type="password"
-            placeholder="请输入密码"
-            show-password
-          >
-            <template #prefix><i class="fa fa-lock-o" /></template>
-          </el-input>
-        </el-form-item>
-
-        <div class="login-options">
-          <el-checkbox>记住密码</el-checkbox>
-          <el-link type="primary" :underline="false">忘记密码？</el-link>
+    <section class="login-visual" aria-labelledby="platform-title">
+      <div class="login-visual-content">
+        <div class="login-visual-copy">
+          <h1 id="platform-title">远光软件微调平台</h1>
+          <p>大模型微调、评测与推理的一体化工作台</p>
         </div>
 
-        <el-button
-          type="primary"
-          class="login-btn"
-          :loading="loading"
-          @click="handleLogin"
+        <div class="login-visual-footer" aria-label="平台核心能力">
+          <span>数据准备</span>
+          <span aria-hidden="true">·</span>
+          <span>模型训练</span>
+          <span aria-hidden="true">·</span>
+          <span>效果评测</span>
+        </div>
+      </div>
+    </section>
+
+    <main class="login-panel">
+      <div class="brand-lockup" role="img" aria-label="远光软件">
+        <span class="brand-logo-crop brand-logo-crop-mark" aria-hidden="true">
+          <img src="/logo.png" alt="" />
+        </span>
+        <span class="brand-logo-crop brand-logo-crop-wordmark" aria-hidden="true">
+          <img src="/logo.png" alt="" />
+        </span>
+      </div>
+
+      <div class="login-form-wrap">
+        <div class="login-heading">
+          <span>账号登录</span>
+          <h2>欢迎回来</h2>
+          <p>登录后继续使用微调平台</p>
+        </div>
+
+        <el-form
+          ref="loginFormRef"
+          :model="loginForm"
+          :rules="rules"
+          label-position="top"
+          size="large"
+          @keyup.enter="handleLogin"
         >
-          <i class="fa fa-sign-in login-btn-icon" />
-          登 录
-        </el-button>
-      </el-form>
-    </div>
+          <el-form-item label="账号" prop="username">
+            <el-input
+              v-model="loginForm.username"
+              placeholder="请输入账号"
+              clearable
+            />
+          </el-form-item>
+
+          <el-form-item label="密码" prop="password">
+            <el-input
+              v-model="loginForm.password"
+              type="password"
+              placeholder="请输入密码"
+              show-password
+            />
+          </el-form-item>
+
+          <div class="login-options">
+            <el-checkbox>记住密码</el-checkbox>
+            <el-link type="primary" :underline="false">忘记密码？</el-link>
+          </div>
+
+          <el-button
+            type="primary"
+            class="login-btn"
+            :loading="loading"
+            @click="handleLogin"
+          >
+            登录
+          </el-button>
+        </el-form>
+      </div>
+
+      <footer>© 2026 远光软件</footer>
+    </main>
   </div>
 </template>
 
 <style scoped lang="scss">
 .login-page {
   min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 16px;
-  background-color: #f8fafc;
-  /* Beautiful light mesh gradient for AI platform */
-  background-image: 
-    radial-gradient(at 10% 20%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
-    radial-gradient(at 80% 0%, rgba(236, 72, 153, 0.15) 0px, transparent 50%),
-    radial-gradient(at 40% 60%, rgba(56, 189, 248, 0.15) 0px, transparent 50%),
-    radial-gradient(at 90% 80%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
-  background-size: 100% 100%;
+  min-height: 100dvh;
+  display: grid;
+  grid-template-columns: minmax(0, 58fr) minmax(500px, 42fr);
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #fcfcfe;
+}
+
+.login-visual {
+  min-height: 100vh;
+  min-height: 100dvh;
   position: relative;
+  color: #fff;
+  background-color: #121127;
+  background-image: url('@/assets/login-hero-flow.png');
+  background-size: cover;
+  background-position: center;
   overflow: hidden;
 }
 
-/* Add some dynamic floating orbs for extra premium feel */
-.login-page::before,
-.login-page::after {
+.login-visual::after {
   content: '';
   position: absolute;
-  border-radius: 50%;
-  filter: blur(60px);
-  z-index: 0;
-  animation: float 20s infinite ease-in-out alternate;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(12, 12, 35, 0.2), transparent 36%, rgba(12, 12, 35, 0.2));
+  pointer-events: none;
 }
 
-.login-page::before {
-  width: 400px;
-  height: 400px;
-  background: rgba(99, 102, 241, 0.1);
-  top: -100px;
-  left: -100px;
-}
-
-.login-page::after {
-  width: 500px;
-  height: 500px;
-  background: rgba(236, 72, 153, 0.08);
-  bottom: -150px;
-  right: -150px;
-  animation-delay: -10s;
-}
-
-@keyframes float {
-  0% { transform: translate(0, 0) rotate(0deg); }
-  100% { transform: translate(50px, 50px) rotate(10deg); }
-}
-
-.login-card {
+.login-visual-content {
+  min-height: inherit;
   position: relative;
   z-index: 1;
-  width: 100%;
-  max-width: 440px;
-  /* Glassmorphism */
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgba(255, 255, 255, 0.8);
-  border-radius: 24px;
-  padding: 48px 40px;
-  box-shadow: 
-    0 20px 40px -10px rgba(0, 0, 0, 0.05),
-    0 1px 3px rgba(0, 0, 0, 0.02),
-    inset 0 1px 0 rgba(255, 255, 255, 1);
-  /* Entrance animation */
-  transform: translateY(30px);
-  opacity: 0;
-  animation: slideUpFade 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  display: flex;
+  flex-direction: column;
+  padding: clamp(80px, 10vh, 132px) clamp(56px, 6vw, 112px) clamp(56px, 7vh, 84px);
 }
 
-@keyframes slideUpFade {
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
+.login-visual-copy {
+  max-width: 680px;
+  margin-top: clamp(80px, 11vh, 136px);
 
-.login-header {
-  text-align: center;
-  margin-bottom: 40px;
-
-  .login-logo {
-    width: 56px;
-    height: 56px;
-    object-fit: contain;
-    margin-bottom: 20px;
-    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05));
-  }
-
-  .login-title {
-    font-size: 28px;
-    font-weight: 700;
-    letter-spacing: -0.5px;
-    margin: 0 0 8px;
-    /* Gradient text */
-    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
-  .login-subtitle {
-    font-size: 15px;
-    color: #64748b;
-    font-weight: 500;
+  h1 {
     margin: 0;
+    font-size: clamp(38px, 3.8vw, 62px);
+    line-height: 1.2;
+    letter-spacing: -0.035em;
+    font-weight: 700;
+    text-wrap: balance;
+  }
+
+  p {
+    margin: 22px 0 0;
+    color: rgba(226, 232, 240, 0.76);
+    font-size: clamp(17px, 1.5vw, 24px);
+    line-height: 1.6;
+    letter-spacing: 0.01em;
+  }
+}
+
+.login-visual-footer {
+  width: min(100%, 640px);
+  margin-top: auto;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr auto 1fr;
+  align-items: center;
+  gap: 24px;
+  color: rgba(226, 232, 240, 0.72);
+  font-size: 16px;
+  letter-spacing: 0.04em;
+
+  span:nth-child(3),
+  span:nth-child(5) {
+    text-align: center;
+  }
+
+  span:nth-child(even) {
+    color: rgba(199, 210, 254, 0.8);
+  }
+}
+
+.login-panel {
+  min-height: 100vh;
+  min-height: 100dvh;
+  position: relative;
+  display: grid;
+  place-items: center;
+  padding: 120px clamp(48px, 5vw, 88px) 96px;
+  border-left: 1px solid #e8eaf1;
+  background: #fcfcfe;
+}
+
+.brand-lockup {
+  position: absolute;
+  top: 42px;
+  right: clamp(36px, 4vw, 64px);
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.brand-logo-crop {
+  position: relative;
+  display: block;
+  overflow: hidden;
+
+  img {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    max-width: none;
+  }
+}
+
+.brand-logo-crop-mark {
+  width: 40px;
+  height: 38px;
+
+  img {
+    top: 0;
+  }
+}
+
+.brand-logo-crop-wordmark {
+  width: 96px;
+  height: 25px;
+
+  img {
+    bottom: 0;
+  }
+}
+
+.login-form-wrap {
+  width: min(100%, 480px);
+}
+
+.login-heading {
+  margin-bottom: 42px;
+
+  > span {
+    display: block;
+    margin-bottom: 24px;
+    color: #4f46e5;
+    font-size: 16px;
+    line-height: 1;
+    font-weight: 600;
+  }
+
+  h2 {
+    margin: 0;
+    color: #17182c;
+    font-size: clamp(38px, 3vw, 48px);
+    line-height: 1.15;
+    letter-spacing: -0.035em;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 14px 0 0;
+    color: #8a93a6;
+    font-size: 16px;
+    line-height: 1.6;
   }
 }
 
-/* Custom Input Styling */
 :deep(.el-form-item) {
-  margin-bottom: 24px;
+  margin-bottom: 26px;
+}
+
+:deep(.el-form-item__label) {
+  height: auto;
+  margin-bottom: 10px;
+  padding: 0;
+  color: #272a3a;
+  font-size: 15px;
+  line-height: 1.4;
+  font-weight: 600;
 }
 
 :deep(.el-input__wrapper) {
-  background-color: rgba(255, 255, 255, 0.6) !important;
-  border-radius: 12px !important;
-  box-shadow: 0 0 0 1px rgba(203, 213, 225, 0.5) inset !important;
-  padding: 0 16px;
-  transition: all 0.3s ease;
+  min-height: 54px;
+  padding: 0 18px;
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 0 0 1px #cfd4df inset;
+  transition: box-shadow 160ms ease, background-color 160ms ease;
 
   &:hover {
-    background-color: rgba(255, 255, 255, 0.9) !important;
-    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.6) inset !important;
+    box-shadow: 0 0 0 1px #aeb6c6 inset;
   }
-  
+
   &.is-focus {
-    background-color: #ffffff !important;
-    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2) inset, 0 0 0 1px #4f46e5 inset !important;
+    box-shadow: 0 0 0 1px #4f46e5 inset, 0 0 0 3px rgba(79, 70, 229, 0.12);
   }
 }
 
 :deep(.el-input__inner) {
-  height: 48px;
   font-size: 15px;
   color: #1e293b;
-  &::placeholder {
-    color: #94a3b8;
-  }
-}
 
-:deep(.el-input__prefix) {
-  color: #94a3b8;
-  font-size: 16px;
-  margin-right: 8px;
+  &::placeholder {
+    color: #a4acba;
+  }
 }
 
 .login-options {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 28px;
-  margin-top: -8px;
+  margin: -2px 0 30px;
 
   :deep(.el-checkbox__label) {
-    color: #64748b;
+    color: #556070;
+    font-size: 14px;
   }
+
   :deep(.el-link) {
     font-weight: 500;
     color: #4f46e5;
+
     &:hover {
       color: #4338ca;
     }
@@ -267,30 +350,223 @@ async function handleLogin() {
 
 .login-btn {
   width: 100%;
-  height: 48px;
+  height: 54px;
   font-size: 16px;
   font-weight: 600;
-  border-radius: 12px;
+  border-radius: 8px;
   border: none;
   background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
   color: #fff;
-  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
-  transition: all 0.3s ease;
-
-  .login-btn-icon {
-    margin-right: 8px;
-    font-size: 18px;
-  }
+  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.18);
+  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
 
   &:hover {
     transform: translateY(-1px);
-    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
+    box-shadow: 0 14px 26px rgba(79, 70, 229, 0.24);
     background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
   }
-  
+
   &:active {
-    transform: translateY(1px);
-    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
+    transform: translateY(0);
+    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.2);
+  }
+}
+
+.login-panel footer {
+  position: absolute;
+  right: clamp(36px, 4vw, 64px);
+  bottom: 34px;
+  color: #9aa2b2;
+  font-size: 13px;
+}
+
+@media (max-width: 1440px) {
+  .login-page {
+    grid-template-columns: minmax(0, 55fr) minmax(500px, 45fr);
+  }
+
+  .login-visual-content {
+    padding-inline: clamp(52px, 5vw, 72px);
+  }
+
+  .login-visual-copy {
+    max-width: 580px;
+
+    h1 {
+      font-size: clamp(42px, 3.6vw, 52px);
+    }
+
+    p {
+      font-size: clamp(16px, 1.45vw, 20px);
+    }
+  }
+
+  .login-panel {
+    padding-inline: clamp(44px, 4.2vw, 64px);
+  }
+
+  .login-form-wrap {
+    max-width: 440px;
+  }
+}
+
+@media (max-width: 1180px) {
+  .login-page {
+    grid-template-columns: minmax(0, 52fr) minmax(470px, 48fr);
+  }
+
+  .login-visual-content {
+    padding-inline: 48px;
+  }
+
+  .login-visual-copy h1 {
+    font-size: 42px;
+  }
+
+  .login-visual-footer {
+    gap: 14px;
+    font-size: 14px;
+  }
+}
+
+@media (max-height: 820px) and (min-width: 901px) {
+  .login-visual {
+    background-position: center 54%;
+  }
+
+  .login-visual-content {
+    padding-top: 48px;
+    padding-bottom: 38px;
+  }
+
+  .login-visual-copy {
+    max-width: 560px;
+    margin-top: clamp(52px, 9vh, 72px);
+
+    h1 {
+      font-size: clamp(38px, 3.4vw, 46px);
+    }
+
+    p {
+      margin-top: 14px;
+      font-size: clamp(15px, 1.35vw, 18px);
+    }
+  }
+
+  .login-visual-footer {
+    gap: 14px;
+    font-size: 14px;
+  }
+
+  .login-panel {
+    padding-top: 78px;
+    padding-bottom: 56px;
+  }
+
+  .brand-lockup {
+    top: 24px;
+  }
+
+  .login-heading {
+    margin-bottom: 26px;
+
+    > span {
+      margin-bottom: 16px;
+      font-size: 15px;
+    }
+
+    h2 {
+      font-size: 38px;
+    }
+
+    p {
+      margin-top: 8px;
+      font-size: 15px;
+    }
+  }
+
+  :deep(.el-form-item) {
+    margin-bottom: 18px;
+  }
+
+  :deep(.el-form-item__label) {
+    margin-bottom: 7px;
+    font-size: 14px;
+  }
+
+  :deep(.el-input__wrapper) {
+    min-height: 48px;
+  }
+
+  .login-options {
+    margin-bottom: 20px;
+  }
+
+  .login-btn {
+    height: 50px;
+  }
+
+  .login-panel footer {
+    bottom: 18px;
+  }
+}
+
+@media (max-width: 900px) {
+  .login-page {
+    display: block;
+    overflow: auto;
+  }
+
+  .login-visual {
+    display: none;
+  }
+
+  .login-panel {
+    min-height: 100vh;
+    min-height: 100dvh;
+    padding: 116px 32px 84px;
+    border-left: 0;
+  }
+
+  .login-panel footer {
+    right: 50%;
+    transform: translateX(50%);
+    white-space: nowrap;
+  }
+}
+
+@media (max-width: 560px) {
+  .login-panel {
+    display: flex;
+    align-items: center;
+    padding: 100px 24px 72px;
+  }
+
+  .brand-lockup {
+    top: 28px;
+    right: 24px;
+    transform: scale(0.88);
+    transform-origin: top right;
+  }
+
+  .login-heading {
+    margin-bottom: 32px;
+
+    > span {
+      margin-bottom: 18px;
+    }
+
+    h2 {
+      font-size: 36px;
+    }
+  }
+
+  :deep(.el-form-item) {
+    margin-bottom: 22px;
+  }
+
+  .login-options {
+    margin-bottom: 26px;
   }
 }
 </style>