From c7ca97a6d615f27ab4a991f5eac4d832f020026f Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Mon, 29 Jun 2026 11:22:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BC=98=E5=8C=96=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E4=B8=8E=E6=B3=A8=E5=86=8C=E9=A1=B5=E9=9D=A2=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 统一登录页（Login.vue）左侧品牌文案，移除虚假 AI 宣传，
  改为准确描述系统实际功能：项目全流程管理、合规核查与
  数据溯源、偏差与安全事件管理
- 重构注册页（Register.vue）为与登录页一致的明亮极光双栏布局：
  · 左侧：蓝紫渐变品牌面板 + 特性卡片 + 入场动效
  · 右侧：纯白背景 + 下划线风格输入框 + 蓝色 #2563eb 主色调
  · 步骤进度条、按钮、复选框配色全部对齐登录页风格
  · 小屏（< 900px）自动隐藏左侧品牌面板，右侧全屏适配
---
 frontend/src/views/Login.vue    | 1237 ++++++++++++++--------
 frontend/src/views/Register.vue | 1722 ++++++++++++++++---------------
 2 files changed, 1712 insertions(+), 1247 deletions(-)

diff --git a/frontend/src/views/Login.vue b/frontend/src/views/Login.vue
index 0e79f09a..577b9f0f 100644
--- a/frontend/src/views/Login.vue
+++ b/frontend/src/views/Login.vue
@@ -1,140 +1,220 @@
 <template>
   <div class="login-wrapper">
-    <div class="login-bg-shape shape-1"></div>
-    <div class="login-bg-shape shape-2"></div>
-
-    <div class="login-container">
-      <div class="login-card">
-        <div class="login-header">
-          <div class="logo-box">
-            <svg
-              width="28"
-              height="28"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="logo-icon"
-            >
-              <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
-              <path d="M2 17l10 5 10-5"></path>
-              <path d="M2 12l10 5 10-5"></path>
-            </svg>
+    <!-- 左右分栏双面板容器 -->
+    <div class="login-split-container">
+      
+      <!-- 左侧：明亮科技感极光大面板 -->
+      <div class="login-left-brand">
+        <!-- 方案D：化学分子科技网格插图 -->
+        <div class="brand-bg-pattern"></div>
+        
+        <div class="brand-content-wrapper">
+          <!-- 顶部系统微标 -->
+          <div class="brand-mini-logo">
+            <div class="mini-logo-icon">
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                <path d="M2 17l10 5 10-5"/>
+                <path d="M2 12l10 5 10-5"/>
+              </svg>
+            </div>
+            <span class="mini-logo-text">华邦制药 · CTMS</span>
           </div>
-          <h2 class="sys-title">CTMS 临床试验管理系统</h2>
-          <p class="sys-subtitle">Log in to your account</p>
-        </div>
 
-        <div v-if="logoutNotice" class="logout-notice" :class="'logout-notice--' + logoutNotice.type">
-          <div class="logout-notice-icon" aria-hidden="true">
-            <svg v-if="logoutNotice.type === 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="12" cy="12" r="10"></circle>
-              <path d="M12 7v6"></path>
-              <path d="M12 17h.01"></path>
-            </svg>
-            <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M20 6 9 17l-5-5"></path>
-            </svg>
+          <!-- 中部标语区 -->
+          <div class="brand-slogan-block">
+            <h1 class="brand-main-title">
+              <span class="system-name">临床试验管理系统</span>
+            </h1>
+            <p class="brand-sub-desc">
+              全流程覆盖临床试验立项、执行、监查与归档，以规范化管理保障数据质量，助力研究团队高效推进项目合规落地。
+            </p>
           </div>
-          <div class="logout-notice-body">
-            <strong>{{ logoutNotice.title }}</strong>
-            <span>{{ logoutNotice.message }}</span>
+
+          <!-- 特征卡片网格 -->
+          <div class="brand-features-grid">
+            <div class="feature-card delay-1">
+              <div class="feature-icon-wrapper">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                  <path d="M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>
+                </svg>
+              </div>
+              <div class="feature-info">
+                <h3 class="feature-title">项目全流程管理</h3>
+                <p class="feature-desc">覆盖立项审批、方案配置、人员分工到进度追踪，多中心协同操作，信息集中透明可查。</p>
+              </div>
+            </div>
+            
+            <div class="feature-card delay-2">
+              <div class="feature-icon-wrapper">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                </svg>
+              </div>
+              <div class="feature-info">
+                <h3 class="feature-title">合规核查与数据溯源</h3>
+                <p class="feature-desc">深度契合 GCP 与 NMPA 规范，记录完整操作轨迹与数据变更历史，确保每一条记录真实可追溯。</p>
+              </div>
+            </div>
+            
+            <div class="feature-card delay-3">
+              <div class="feature-icon-wrapper">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                  <path d="M3 3v18h18M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"/>
+                </svg>
+              </div>
+              <div class="feature-info">
+                <h3 class="feature-title">偏差与安全事件管理</h3>
+                <p class="feature-desc">结构化记录研究偏差与不良事件，支持分级处理与闭环追踪，保障受试者安全与项目数据完整性。</p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 左侧底部声明 -->
+          <div class="brand-legal-info">
+            <p class="legal-item">Compliance with GCP & NMPA Regulations</p>
           </div>
         </div>
-
-        <el-form
-          ref="formRef"
-          :model="form"
-          :rules="rules"
-          @keyup.enter="onSubmit"
-          label-position="top"
-          class="login-form"
-        >
-          <el-form-item label="邮箱" prop="email">
-            <el-input
-              id="email"
-              v-model="form.email"
-              type="email"
-              placeholder="请输入邮箱"
-              size="large"
-              name="username"
-              autocomplete="username"
-              class="login-input"
-            >
-              <template #prefix>
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-                  <circle cx="12" cy="7" r="4"></circle>
-                </svg>
-              </template>
-            </el-input>
-          </el-form-item>
-
-          <el-form-item label="密码" prop="password">
-            <el-input
-              id="password"
-              v-model="form.password"
-              type="password"
-              placeholder="请输入密码"
-              show-password
-              size="large"
-              name="ctms-login-password"
-              autocomplete="new-password"
-              class="login-input"
-            >
-              <template #prefix>
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
-                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
-                </svg>
-              </template>
-            </el-input>
-          </el-form-item>
-
-          <div class="login-options">
-            <el-checkbox v-model="form.agreeProtocol" class="protocol-checkbox">
-              <span class="protocol-text">
-                我已阅读并同意
-                <button type="button" class="protocol-link" @click.stop.prevent="openProtocolDialog">
-                  《用户协议》
-                </button>
-                登录即代表同意当前协议
-              </span>
-            </el-checkbox>
-          </div>
-
-          <el-button type="primary" :loading="loading" @click="onSubmit" size="large" class="login-btn">
-            登 录
-          </el-button>
-        </el-form>
-
-        <p class="footer-text">
-          还没有账户？
-          <RouterLink to="/register" class="footer-link">立即注册</RouterLink>
-        </p>
       </div>
+
+      <!-- 右侧：极简登录面板 -->
+      <div class="login-right-form">
+        <!-- 兼容提示已去除 -->
+
+        <div class="login-card-container">
+          <!-- 顶部 Logo 组合 -->
+          <div class="login-brand-header">
+            <div class="brand-logo-icon">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                <path d="M2 17l10 5 10-5"/>
+                <path d="M2 12l10 5 10-5"/>
+              </svg>
+            </div>
+            <div class="brand-divider"></div>
+            <span class="brand-system-text">CTMS</span>
+          </div>
+
+          <!-- Tab 选项卡（只读展现） -->
+          <div class="login-tabs">
+            <span class="tab-item active">账号登录</span>
+            <span class="tab-item disabled">邮箱登录</span>
+            <span class="tab-item disabled">手机登录</span>
+          </div>
+
+          <!-- 退出通知 -->
+          <div v-if="logoutNotice" class="logout-notice" :class="'logout-notice--' + logoutNotice.type">
+            <div class="ln-icon">
+              <svg v-if="logoutNotice.type === 'warning'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10"/><path d="M12 7v6"/><path d="M12 17h.01"/>
+              </svg>
+              <svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M20 6 9 17l-5-5"/>
+              </svg>
+            </div>
+            <div class="ln-body">
+              <strong>{{ logoutNotice.title }}</strong>
+              <span>{{ logoutNotice.message }}</span>
+            </div>
+          </div>
+
+          <!-- 登录错误横幅 -->
+          <transition name="error-slide">
+            <div v-if="loginError" class="login-error-banner">
+              <div class="leb-icon">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/>
+                </svg>
+              </div>
+              <div class="leb-body">
+                <strong>{{ loginError.title }}</strong>
+                <span v-if="loginError.message">{{ loginError.message }}</span>
+              </div>
+              <button class="leb-close" @click="loginError = null" aria-label="关闭">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                  <path d="M18 6 6 18M6 6l12 12"/>
+                </svg>
+              </button>
+            </div>
+          </transition>
+
+          <!-- 登录表单 -->
+          <el-form ref="formRef" :model="form" :rules="rules" @keyup.enter="onSubmit" label-position="top" class="login-form">
+            <el-form-item label="账号" prop="email">
+              <el-input
+                id="email" v-model="form.email" type="email"
+                placeholder="请输入用户名 / 邮箱" size="large"
+                name="username" autocomplete="username" class="login-input">
+              </el-input>
+            </el-form-item>
+
+            <el-form-item label="密码" prop="password">
+              <el-input
+                id="password" v-model="form.password" type="password"
+                placeholder="请输入密码" show-password size="large"
+                name="ctms-login-password" autocomplete="new-password" class="login-input">
+              </el-input>
+            </el-form-item>
+
+            <div class="login-options">
+              <el-checkbox v-model="form.agreeProtocol" class="protocol-checkbox">
+                <span class="protocol-text">
+                  我已阅读并同意
+                  <button type="button" class="protocol-link" @click.stop.prevent="openProtocolDialog">《用户协议》</button>
+                  登录即代表同意当前协议
+                </span>
+              </el-checkbox>
+            </div>
+
+            <el-button type="primary" :loading="loading" @click="onSubmit" size="large" class="login-btn">
+              <span>登 录</span>
+            </el-button>
+
+            <!-- 注册与忘记密码（左右分立） -->
+            <div class="forgot-register-row">
+              <RouterLink to="/forgot-password" class="forgot-link">忘记密码？</RouterLink>
+              <RouterLink to="/register" class="register-link">新用户注册</RouterLink>
+            </div>
+          </el-form>
+
+          <!-- 右侧底部客户支持与版权 -->
+          <div class="login-right-footer">
+            <div class="footer-row">
+              <span class="footer-label">技术开发：</span>
+              <a href="mailto:zhouchengcheng@huapont.cn" class="footer-link-text">医学事务部·周成成 (zhouchengcheng@huapont.cn)</a>
+            </div>
+            
+            <div class="footer-row copyright-line">
+              <span class="lang-switch">CHINA(中国) <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="m6 9 6 6 6-6"/></svg></span>
+              <span class="meta-sep">|</span>
+              <span class="copyright-text">© {{ currentYear }} 重庆华邦制药有限公司 版权所有</span>
+              <span class="meta-sep">|</span>
+              <span class="privacy-link">隐私政策</span>
+            </div>
+            
+            <div class="footer-row compliance-line">
+              <span class="version-tag">v{{ appVersion }}</span>
+              <span class="meta-sep">|</span>
+              <span class="compliance-text">本系统依照 GCP 及 NMPA 规范管理数据</span>
+            </div>
+          </div>
+
+        </div>
+      </div>
+      
     </div>
 
-    <el-dialog
-      v-model="protocolDialogVisible"
-      title="用户协议"
-      width="860px"
-      class="protocol-dialog"
-      append-to-body
-      align-center
-    >
+    <!-- 协议弹窗 -->
+    <el-dialog v-model="protocolDialogVisible" title="用户协议" width="860px"
+      class="protocol-dialog" append-to-body align-center>
       <div class="protocol-content">
         <section v-for="section in protocolSections" :key="section.title" class="protocol-section">
           <h3>{{ section.title }}</h3>
-          <p v-for="paragraph in section.paragraphs" :key="paragraph">{{ paragraph }}</p>
+          <p v-for="p in section.paragraphs" :key="p">{{ p }}</p>
         </section>
       </div>
       <template #footer>
-        <el-button type="primary" size="large" class="protocol-confirm-btn" @click="confirmProtocol">
-          确 定
-        </el-button>
+        <el-button type="primary" size="large" class="protocol-confirm-btn" @click="confirmProtocol">确 定</el-button>
       </template>
     </el-dialog>
   </div>
@@ -144,6 +224,10 @@
 import { reactive, ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage, type FormInstance, type FormRules } from "element-plus";
+// 从 package.json 读取版本号，构建时由 Vite 注入
+const appVersion = (import.meta.env.VITE_APP_VERSION as string) || "1.0.0";
+// 动态获取当前年份，避免硬编码
+const currentYear = new Date().getFullYear();
 import { useAuthStore } from "../store/auth";
 import { useStudyStore } from "../store/study";
 import { TEXT, requiredMessage } from "../locales";
@@ -160,11 +244,7 @@ const router = useRouter();
 const AGREE_PROTOCOL_KEY = "ctms_agree_protocol";
 
 const formRef = ref<FormInstance>();
-const form = reactive({
-  email: "",
-  password: "",
-  agreeProtocol: false,
-});
+const form = reactive({ email: "", password: "", agreeProtocol: false });
 
 const rules: FormRules<typeof form> = {
   email: [
@@ -177,76 +257,56 @@ const rules: FormRules<typeof form> = {
 const loading = ref(false);
 const protocolDialogVisible = ref(false);
 const logoutNotice = ref<{ type: "info" | "warning"; title: string; message: string } | null>(null);
-
+const loginError = ref<{ title: string; message?: string } | null>(null);
 const protocolSections = authProtocolSections;
 
 onMounted(async () => {
-  const logoutReason = consumeLogoutReason();
-  if (logoutReason === LOGOUT_REASON_TIMEOUT) {
-    logoutNotice.value = {
-      type: "warning",
-      title: "已自动退出登录",
-      message: "30 分钟未检测到任何操作。为保护项目数据，请重新登录后继续。",
-    };
-  } else if (logoutReason === LOGOUT_REASON_AUTH_EXPIRED) {
-    logoutNotice.value = {
-      type: "warning",
-      title: "登录状态已失效",
-      message: "当前会话无法继续使用，请重新登录。",
-    };
-  } else if (logoutReason === LOGOUT_REASON_MANUAL) {
-    logoutNotice.value = {
-      type: "info",
-      title: "已安全退出",
-      message: "本机登录状态已清除，需要时可再次登录。",
-    };
+  const reason = consumeLogoutReason();
+  if (reason === LOGOUT_REASON_TIMEOUT) {
+    logoutNotice.value = { type: "warning", title: "已自动退出登录", message: "30 分钟未检测到任何操作。为保护项目数据，请重新登录后继续。" };
+  } else if (reason === LOGOUT_REASON_AUTH_EXPIRED) {
+    logoutNotice.value = { type: "warning", title: "登录状态已失效", message: "当前会话无法继续使用，请重新登录。" };
+  } else if (reason === LOGOUT_REASON_MANUAL) {
+    logoutNotice.value = { type: "info", title: "已安全退出", message: "本机登录状态已清除，需要时可再次登录。" };
   }
   form.email = localStorage.getItem("ctms_last_login_email") || "";
   form.agreeProtocol = localStorage.getItem(AGREE_PROTOCOL_KEY) === "true";
 });
 
-watch(
-  () => form.agreeProtocol,
-  (checked) => {
-    localStorage.setItem(AGREE_PROTOCOL_KEY, String(checked));
-  },
-);
+watch(() => form.agreeProtocol, (v) => localStorage.setItem(AGREE_PROTOCOL_KEY, String(v)));
 
-const openProtocolDialog = () => {
-  protocolDialogVisible.value = true;
-};
-
-const confirmProtocol = () => {
-  form.agreeProtocol = true;
-  protocolDialogVisible.value = false;
-};
+const openProtocolDialog = () => { protocolDialogVisible.value = true; };
+const confirmProtocol = () => { form.agreeProtocol = true; protocolDialogVisible.value = false; };
 
 const onSubmit = async () => {
   if (!formRef.value) return;
   const valid = await formRef.value.validate();
   if (!valid) return;
-  if (!form.agreeProtocol) {
-    ElMessage.warning("请先阅读并同意用户协议");
-    return;
-  }
+  if (!form.agreeProtocol) { ElMessage.warning("请先阅读并同意用户协议"); return; }
+  loginError.value = null; // 清除上次错误
   loading.value = true;
   try {
     await auth.login(form.email, form.password);
     const studyStore = useStudyStore();
     const userKey = auth.user?.email || form.email;
     await studyStore.restoreStudyForUser(userKey, { preferActive: !!auth.user?.is_admin });
-    if (studyStore.currentStudy) {
-      router.push("/project/overview");
-    } else {
-      router.push(auth.user?.is_admin ? "/admin/users" : "/admin/projects");
-    }
+    router.push(studyStore.currentStudy ? "/project/overview" : auth.user?.is_admin ? "/admin/users" : "/admin/projects");
   } catch (error: any) {
     const status = error?.response?.status;
-    const detail = error?.response?.data?.detail || error?.response?.data?.message;
+    const detail: string = error?.response?.data?.detail || error?.response?.data?.message || "";
+    // 根据状态码和后端信息做差异化映射
     if (!status || status >= 500) {
-      ElMessage.error("服务暂时不可用，请稍后重试");
+      loginError.value = { title: "服务暂时不可用", message: "请稍后重试，如持续出现请联系管理员" };
+    } else if (status === 429) {
+      loginError.value = { title: "操作过于频繁", message: "登录尝试次数过多，请稍后再试" };
+    } else if (status === 403 || detail.includes("未激活") || detail.includes("审核") || detail.includes("pending")) {
+      loginError.value = { title: "账号待审核", message: "您的账号尚未通过管理员审批，请耐心等待或联系管理员" };
+    } else if (detail.includes("锁定") || detail.includes("locked") || detail.includes("disabled")) {
+      loginError.value = { title: "账号已被锁定", message: "请联系系统管理员解锁账号" };
+    } else if (status === 401) {
+      loginError.value = { title: "邮箱或密码不正确", message: "请检查后重新输入，多次失败可能导致账号锁定" };
     } else {
-      ElMessage.error(detail || TEXT.modules.auth.authFailed);
+      loginError.value = { title: "登录失败", message: detail || TEXT.modules.auth.authFailed };
     }
   } finally {
     loading.value = false;
@@ -255,157 +315,458 @@ const onSubmit = async () => {
 </script>
 
 <style scoped>
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;600;800&display=swap");
+
+/* ═══════════════════════
+   根容器
+   ═══════════════════════ */
 .login-wrapper {
   position: relative;
   min-height: 100vh;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f8fafc;
+  align-items: stretch;
+  justify-content: stretch;
   overflow: hidden;
-  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #ffffff;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
-.login-bg-shape {
+.login-split-container {
+  display: flex;
+  width: 100vw;
+  min-height: 100vh;
+}
+
+/* ═══════════════════════
+   左侧：明亮极光科技面板
+   ═══════════════════════ */
+.login-left-brand {
+  flex: 1;
+  background: linear-gradient(135deg, #e0f2fe 0%, #e0e7ff 50%, #f3e8ff 100%);
+  padding: 60px 80px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 渐变圆形球光效 */
+.brand-glow-sphere {
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
-  z-index: 0;
-  opacity: 0.6;
-  animation: float 10s ease-in-out infinite alternate;
+  pointer-events: none;
+  z-index: 1;
 }
 
-.shape-1 {
-  width: 400px;
-  height: 400px;
-  background: #c0cdd7;
-  top: -100px;
-  left: -100px;
+.sphere-1 {
+  width: 480px;
+  height: 480px;
+  background: rgba(99, 102, 241, 0.16);
+  top: 15%;
+  left: -10%;
+  animation: floatSphere1 20s infinite alternate ease-in-out;
 }
 
-.shape-2 {
-  width: 500px;
-  height: 500px;
-  background: #dde5ec;
-  bottom: -150px;
-  right: -100px;
-  animation-delay: -5s;
+.sphere-2 {
+  width: 420px;
+  height: 420px;
+  background: rgba(6, 182, 212, 0.14);
+  bottom: 10%;
+  right: -5%;
+  animation: floatSphere2 25s infinite alternate ease-in-out;
 }
 
-@keyframes float {
-  0% {
-    transform: translate(0, 0) scale(1);
-  }
-
-  100% {
-    transform: translate(30px, 50px) scale(1.1);
-  }
+@keyframes floatSphere1 {
+  0% { transform: translate(0, 0) scale(1); }
+  100% { transform: translate(30px, 40px) scale(1.1); }
 }
 
-.login-container {
+@keyframes floatSphere2 {
+  0% { transform: translate(0, 0) scale(1); }
+  100% { transform: translate(-40px, -30px) scale(1.08); }
+}
+
+.brand-bg-pattern {
+  position: absolute;
+  bottom: 5%;
+  right: -5%;
+  width: 440px;
+  height: 440px;
+  background-image: url("data:image/svg+xml,%3Csvg width='380' height='380' viewBox='0 0 380 380' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 120 L130 80 L200 120 L200 200 L130 240 L60 200 Z' stroke='rgba(99, 102, 241, 0.12)' stroke-width='1.2'/%3E%3Cpath d='M200 120 L270 80 L340 120 L340 200 L270 240 L200 200' stroke='rgba(6, 182, 212, 0.1)' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='120' r='4' fill='rgba(99, 102, 241, 0.25)'/%3E%3Ccircle cx='60' cy='120' r='8' stroke='rgba(99, 102, 241, 0.08)' stroke-width='1'/%3E%3Ccircle cx='130' cy='80' r='3' fill='rgba(99, 102, 241, 0.18)'/%3E%3Ccircle cx='200' cy='120' r='4' fill='rgba(99, 102, 241, 0.25)'/%3E%3Ccircle cx='200' cy='200' r='3' fill='rgba(99, 102, 241, 0.18)'/%3E%3Ccircle cx='130' cy='240' r='4' fill='rgba(99, 102, 241, 0.2)'/%3E%3Ccircle cx='60' cy='200' r='3' fill='rgba(99, 102, 241, 0.15)'/%3E%3Ccircle cx='270' cy='80' r='4' fill='rgba(6, 182, 212, 0.2)'/%3E%3Ccircle cx='340' cy='120' r='5' fill='rgba(6, 182, 212, 0.25)'/%3E%3Ccircle cx='340' cy='120' r='10' stroke='rgba(6, 182, 212, 0.08)' stroke-width='1'/%3E%3Ccircle cx='340' cy='200' r='3' fill='rgba(6, 182, 212, 0.15)'/%3E%3Ccircle cx='270' cy='240' r='4' fill='rgba(6, 182, 212, 0.2)'/%3E%3Cpath d='M130 80 L130 30 M270 80 L270 30' stroke='rgba(99, 102, 241, 0.08)' stroke-width='1.2' stroke-dasharray='2 2'/%3E%3Ccircle cx='130' cy='30' r='2' fill='rgba(99, 102, 241, 0.12)'/%3E%3Ccircle cx='270' cy='30' r='2' fill='rgba(6, 182, 212, 0.12)'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0.8;
+  animation: bgPatternFloat 30s infinite alternate ease-in-out;
+}
+
+@keyframes bgPatternFloat {
+  0% { transform: translate(0, 0) rotate(0deg); }
+  100% { transform: translate(-10px, 15px) rotate(2deg); }
+}
+
+.brand-content-wrapper {
   position: relative;
-  z-index: 10;
-  width: clamp(480px, 34vw, 560px);
-  max-width: calc(100vw - 40px);
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
 }
 
-.login-card {
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(20px);
-  border-radius: 20px;
-  padding: 48px 40px 28px;
-  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
-  border: 1px solid rgba(255, 255, 255, 0.5);
+/* 迷你Logo */
+.brand-mini-logo {
+  display: flex;
+  align-items: center;
+  gap: 14px;
 }
 
-.login-header {
-  text-align: center;
-  margin-bottom: 36px;
-}
-
-.logo-box {
-  display: inline-flex;
+.mini-logo-icon {
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 56px;
-  height: 56px;
-  background: linear-gradient(135deg, #3f5d75, #24496f);
-  color: #ffffff;
-  border-radius: 16px;
-  margin-bottom: 20px;
-  box-shadow: 0 8px 20px -6px rgba(63, 93, 117, 0.4);
+  width: 55px;
+  height: 55px;
+  background: #2563eb;
+  border-radius: 14px;
+  color: white;
 }
 
-.sys-title {
-  font-size: 24px;
+.mini-logo-text {
+  font-size: 26px;
   font-weight: 700;
   color: #1e293b;
-  margin: 0 0 8px;
-  letter-spacing: -0.5px;
+  letter-spacing: 0.5px;
 }
 
-.sys-subtitle {
-  font-size: 14px;
+/* Slogan 区 */
+.brand-slogan-block {
+  margin: 32px 0 0;
+  max-width: 520px;
+}
+
+.brand-main-title {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-size: 38px;
+  font-weight: 800;
+  line-height: 1.25;
+  letter-spacing: -1px;
+  margin: 0 0 20px;
+  color: #1e293b;
+}
+
+.company-name {
+  background: linear-gradient(135deg, #1d4ed8, #0891b2);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.system-name {
+  color: #0f172a;
+}
+
+.brand-sub-desc {
+  font-size: 15px;
   color: #64748b;
+  line-height: 1.8;
+  margin: 0;
+  font-weight: 500;
+}
+
+/* 特征卡片网格 */
+.brand-features-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin: 32px 0;
+  width: 100%;
+  max-width: 520px;
+}
+
+.feature-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 18px 22px;
+  background: rgba(255, 255, 255, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.45);
+  border-radius: 16px;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  cursor: default;
+  opacity: 0;
+  transform: translateY(20px);
+  animation: cardFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.feature-card.delay-1 { animation-delay: 0.15s; }
+.feature-card.delay-2 { animation-delay: 0.3s; }
+.feature-card.delay-3 { animation-delay: 0.45s; }
+
+@keyframes cardFadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.feature-card:hover {
+  background: rgba(255, 255, 255, 0.55);
+  border-color: rgba(37, 99, 235, 0.22);
+  transform: translateY(-3px);
+  box-shadow: 
+    0 12px 30px -10px rgba(37, 99, 235, 0.08),
+    0 4px 12px -2px rgba(0, 0, 0, 0.02);
+}
+
+.feature-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  background: rgba(37, 99, 235, 0.06);
+  border-radius: 10px;
+  color: #2563eb;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.feature-card:hover .feature-icon-wrapper {
+  background: #2563eb;
+  color: #ffffff;
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
+}
+
+.feature-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.feature-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0;
+  line-height: 1.4;
+  transition: color 0.3s;
+}
+
+.feature-card:hover .feature-title {
+  color: #0f172a;
+}
+
+.feature-desc {
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.6;
+  margin: 0;
+  font-weight: 500;
+}
+
+/* 底部声明 */
+.brand-legal-info {
+  border-top: 1px solid rgba(148, 163, 184, 0.15);
+  padding-top: 24px;
+}
+
+.legal-item {
+  font-family: 'Outfit', sans-serif;
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: uppercase;
   margin: 0;
 }
 
+/* ═══════════════════════
+   右侧：极简白底登录面板
+   ═══════════════════════ */
+.login-right-form {
+  flex: 1;
+  background: #ffffff;
+  padding: 60px 80px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 上方浏览器兼容建议 */
+.browser-tip {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 90%;
+  max-width: 600px;
+  text-align: center;
+  font-size: 12px;
+  color: #64748b;
+  white-space: nowrap;
+}
+
+.download-link {
+  color: #2563eb;
+  text-decoration: none;
+  font-weight: 600;
+}
+.download-link:hover {
+  text-decoration: underline;
+}
+
+/* 卡片容器 */
+.login-card-container {
+  width: 100%;
+  max-width: 380px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部品牌Logo */
+.login-brand-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 40px;
+}
+
+.brand-logo-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  background: #2563eb;
+  border-radius: 9px;
+  color: white;
+}
+
+.brand-divider {
+  width: 1.5px;
+  height: 18px;
+  background: #e2e8f0;
+}
+
+.brand-system-text {
+  font-family: 'Outfit', sans-serif;
+  font-size: 20px;
+  font-weight: 800;
+  color: #1e293b;
+  letter-spacing: -0.5px;
+}
+
+/* Tabs */
+.login-tabs {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 36px;
+  border-bottom: 1.5px solid #f1f5f9;
+}
+
+.tab-item {
+  font-size: 15px;
+  font-weight: 600;
+  color: #94a3b8;
+  padding-bottom: 10px;
+  cursor: pointer;
+  position: relative;
+  transition: color 0.2s;
+  user-select: none;
+}
+
+.tab-item.active {
+  color: #2563eb;
+}
+
+.tab-item.active::after {
+  content: "";
+  position: absolute;
+  bottom: -1.5px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: #2563eb;
+  border-radius: 2px;
+}
+
+.tab-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* ═══════════════════════
+   通知与错误提示
+   ═══════════════════════ */
 .logout-notice {
   display: flex;
   align-items: flex-start;
   gap: 10px;
-  margin: -14px 0 24px;
+  margin-bottom: 24px;
   padding: 12px 14px;
-  border-radius: 12px;
+  border-radius: 10px;
   border: 1px solid;
 }
 
 .logout-notice--warning {
-  color: #8a5b12;
-  background: #fff7e8;
-  border-color: #f3d19e;
+  color: #b45309;
+  background: #fffbeb;
+  border-color: #fde68a;
 }
 
 .logout-notice--info {
-  color: #315f49;
-  background: #eef8f2;
-  border-color: #b9dec8;
+  color: #047857;
+  background: #f0fdf4;
+  border-color: #bbf7d0;
 }
 
-.logout-notice-icon {
-  width: 22px;
-  height: 22px;
-  display: inline-flex;
+.ln-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
+.ln-icon svg { width: 100%; height: 100%; }
+.ln-body { display: flex; flex-direction: column; gap: 2px; }
+.ln-body strong { font-size: 12px; font-weight: 700; }
+.ln-body span   { font-size: 11px; opacity: 0.9; }
+
+.login-error-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 20px;
+  padding: 12px 14px;
+  border-radius: 10px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #b91c1c;
+}
+
+.leb-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
+.leb-icon svg { width: 100%; height: 100%; }
+.leb-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.leb-body strong { font-size: 12px; font-weight: 700; }
+.leb-body span   { font-size: 11px; opacity: 0.9; }
+.leb-close {
+  flex-shrink: 0;
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 2px;
+  cursor: pointer;
+  color: #f87171;
+  display: flex;
   align-items: center;
   justify-content: center;
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-
-.logout-notice-icon svg {
-  width: 18px;
-  height: 18px;
-}
-
-.logout-notice-body {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.logout-notice-body strong {
-  font-size: 13px;
-  line-height: 18px;
-  font-weight: 800;
-}
-
-.logout-notice-body span {
-  font-size: 12px;
-  line-height: 18px;
-  font-weight: 600;
 }
+.leb-close:hover { color: #b91c1c; }
+.leb-close svg { width: 12px; height: 12px; }
 
+/* ═══════════════════════
+   表单输入框 (下划线风格)
+   ═══════════════════════ */
 .login-form :deep(.el-form-item) {
   margin-bottom: 22px;
 }
@@ -413,81 +774,68 @@ const onSubmit = async () => {
 .login-form :deep(.el-form-item__label) {
   font-weight: 600;
   color: #475569;
-  font-size: 14px;
-  padding-bottom: 8px;
+  font-size: 13px;
+  padding-bottom: 6px;
   line-height: 1;
 }
 
 .login-form :deep(.el-form-item__error) {
   margin-top: 6px;
+  font-size: 11px;
+  color: #ef4444;
 }
 
 .login-input :deep(.el-input__wrapper) {
-  box-shadow: 0 0 0 1px #e2e8f0;
-  border-radius: 10px;
-  padding: 2px 14px;
-  background-color: #ffffff;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  background: transparent !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  border-bottom: 1.5px solid #e2e8f0;
+  padding: 6px 0 !important;
+  transition: border-color 0.25s ease;
 }
 
 .login-input :deep(.el-input__wrapper:hover) {
-  box-shadow: 0 0 0 1px #cbd5e1;
+  border-bottom-color: #cbd5e1;
 }
 
 .login-input :deep(.el-input__wrapper.is-focus) {
-  box-shadow: 0 0 0 2px #3f5d75 !important;
-  background-color: #ffffff;
-}
-
-.login-input :deep(.el-input__prefix) {
-  color: #94a3b8;
-  margin-right: 8px;
+  border-bottom-color: #2563eb !important;
 }
 
 .login-input :deep(.el-input__inner) {
-  height: 44px;
+  height: 38px;
   font-size: 15px;
-  color: #1e293b;
+  color: #0f172a;
 }
 
-.login-input :deep(.el-input__inner:-webkit-autofill),
-.login-input :deep(.el-input__inner:-webkit-autofill:hover),
-.login-input :deep(.el-input__inner:-webkit-autofill:focus) {
-  -webkit-box-shadow: 0 0 0 100px white inset !important;
-  -webkit-text-fill-color: #1e293b !important;
-  transition: background-color 5000s ease-in-out 0s;
+.login-input :deep(.el-input__inner::placeholder) {
+  color: #94a3b8;
 }
 
+/* 协议区 */
 .login-options {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin: -4px 0 26px;
+  margin: 4px 0 24px;
 }
 
-.protocol-checkbox {
-  display: flex;
-  align-items: flex-start;
-  width: 100%;
-  min-height: 24px;
+.protocol-checkbox :deep(.el-checkbox__input .el-checkbox__inner) {
+  border-color: #cbd5e1;
+  border-radius: 4px;
 }
 
-.protocol-checkbox :deep(.el-checkbox__input) {
-  margin-top: 2px;
+.protocol-checkbox :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+  background: #2563eb;
+  border-color: #2563eb;
 }
 
 .protocol-checkbox :deep(.el-checkbox__label) {
-  display: block;
-  padding-left: 10px;
-  line-height: 20px;
+  padding-left: 8px;
   white-space: normal;
+  line-height: 1.6;
 }
 
 .protocol-text {
-  color: #475569;
+  color: #64748b;
   font-size: 12px;
-  font-weight: 700;
-  line-height: 18px;
 }
 
 .protocol-link {
@@ -495,50 +843,149 @@ const onSubmit = async () => {
   padding: 0;
   border: 0;
   background: transparent;
-  color: #4da3ff;
-  cursor: pointer;
   font: inherit;
-  font-weight: 800;
+  font-weight: 600;
+  cursor: pointer;
+  color: #2563eb;
 }
-
 .protocol-link:hover {
-  color: #2f8fff;
   text-decoration: underline;
 }
 
+/* 按钮 */
+.login-btn {
+  width: 100%;
+  height: 48px;
+  border-radius: 8px;
+  font-size: 15px;
+  font-weight: 600;
+  background: #2563eb;
+  border: none;
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
+  transition: all 0.2s ease;
+}
+
+.login-btn:hover {
+  background: #1d4ed8;
+  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
+  transform: translateY(-1px);
+}
+
+.login-btn:active {
+  transform: translateY(0);
+}
+
+/* 注册与忘记密码左右分开 */
+.forgot-register-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.forgot-link, .register-link {
+  font-size: 13px;
+  color: #2563eb;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.15s;
+}
+
+.forgot-link:hover, .register-link:hover {
+  color: #1d4ed8;
+  text-decoration: underline;
+}
+
+/* ═══════════════════════
+   右侧底部页脚 (支持与版权)
+   ═══════════════════════ */
+.login-right-footer {
+  margin-top: 40px;
+  border-top: 1px solid #f1f5f9;
+  padding-top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.footer-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 11px;
+  color: #94a3b8;
+  line-height: 1.5;
+}
+
+.footer-label {
+  font-weight: 500;
+  color: #64748b;
+}
+
+.footer-link-text {
+  color: #64748b;
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+.footer-link-text:hover {
+  text-decoration: underline;
+  color: #2563eb;
+}
+
+.copyright-line {
+  margin-top: 2px;
+}
+
+.lang-switch {
+  font-weight: 600;
+  color: #64748b;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.meta-sep {
+  color: #e2e8f0;
+  margin: 0 8px;
+}
+
+.privacy-link {
+  cursor: pointer;
+  transition: color 0.2s;
+}
+.privacy-link:hover {
+  color: #475569;
+}
+
+.compliance-line {
+  color: #94a3b8;
+}
+
+.version-tag {
+  font-weight: 600;
+  color: #64748b;
+}
+
+.compliance-text {
+  opacity: 0.85;
+}
+
+/* ═══════════════════════
+   协议弹窗
+   ═══════════════════════ */
 .protocol-content {
   max-height: 58vh;
   overflow-y: auto;
   padding: 2px 8px 2px 0;
 }
 
-.protocol-section {
-  margin-bottom: 26px;
-}
-
-.protocol-section:last-child {
-  margin-bottom: 0;
-}
-
-.protocol-section h3 {
-  margin: 0 0 14px;
-  color: #2f3946;
-  font-size: 18px;
-  font-weight: 800;
-  line-height: 1.4;
-}
-
-.protocol-section p {
-  margin: 0 0 10px;
-  color: #5f6b7a;
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.8;
-}
-
-.protocol-section p:last-child {
-  margin-bottom: 0;
-}
+.protocol-section { margin-bottom: 26px; }
+.protocol-section:last-child { margin-bottom: 0; }
+.protocol-section h3 { margin: 0 0 14px; font-size: 18px; font-weight: 800; line-height: 1.4; color: #111827; }
+.protocol-section p  { margin: 0 0 10px; font-size: 15px; font-weight: 400; line-height: 1.8; color: #6b7280; }
+.protocol-section p:last-child { margin-bottom: 0; }
 
 .protocol-confirm-btn {
   min-width: 112px;
@@ -547,87 +994,67 @@ const onSubmit = async () => {
   font-size: 16px;
   font-weight: 700;
   letter-spacing: 2px;
-  background: linear-gradient(135deg, #3f5d75, #4a6d87);
+  background: #2563eb;
   border: none;
-  box-shadow: 0 8px 16px -4px rgba(63, 93, 117, 0.3);
+  box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.4);
+}
+.protocol-confirm-btn:hover {
+  background: #1d4ed8;
+}
+
+:global(.protocol-dialog .el-dialog) {
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 24px 64px rgba(0,0,0,0.1);
 }
 
 :global(.protocol-dialog .el-dialog__header) {
   padding: 24px 28px 12px;
   margin-right: 0;
+  background: #fafafa;
 }
 
 :global(.protocol-dialog .el-dialog__title) {
-  color: #2f3946;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 800;
+  color: #111827;
 }
 
-:global(.protocol-dialog .el-dialog__body) {
-  padding: 22px 36px 10px;
-}
+:global(.protocol-dialog .el-dialog__body) { padding: 22px 36px 10px; }
+:global(.protocol-dialog .el-dialog__footer) { padding: 18px 28px 24px; }
 
-:global(.protocol-dialog .el-dialog__footer) {
-  padding: 18px 28px 24px;
-}
+/* ═══════════════════════
+   响应式断点适配
+   ═══════════════════════ */
 
-.login-btn {
-  width: 100%;
-  height: 48px;
-  border-radius: 10px;
-  font-size: 16px;
-  font-weight: 600;
-  letter-spacing: 2px;
-  background: linear-gradient(135deg, #3f5d75, #4a6d87);
-  border: none;
-  box-shadow: 0 8px 16px -4px rgba(63, 93, 117, 0.3);
-  transition: all 0.2s;
-}
-
-.login-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 12px 20px -6px rgba(63, 93, 117, 0.4);
-  background: linear-gradient(135deg, #365067, #3f5d75);
-}
-
-.login-btn:active {
-  transform: translateY(1px);
-  box-shadow: 0 4px 8px -2px rgba(63, 93, 117, 0.3);
-}
-
-.footer-text {
-  text-align: center;
-  color: #94a3b8;
-  font-size: 13px;
-  margin: 18px 0 0;
-}
-
-.footer-link {
-  color: #3f5d75;
-  text-decoration: none;
-  font-weight: 600;
-}
-
-.footer-link:hover {
-  color: #365067;
-}
-
-@media (max-width: 640px) {
-  .login-card {
-    padding: 36px 24px 24px;
-    border-radius: 18px;
+@media (max-width: 960px) {
+  .login-left-brand {
+    display: none;
   }
-
-  .sys-title {
-    font-size: 22px;
+  .login-right-form {
+    padding: 40px 24px;
+    width: 100%;
   }
-
-  :global(.protocol-dialog) {
-    width: calc(100vw - 32px) !important;
+  .browser-tip {
+    display: none;
   }
+  .login-card-container {
+    max-width: 440px;
+  }
+  .login-right-footer {
+    margin-top: 40px;
+  }
+}
 
-  :global(.protocol-dialog .el-dialog__body) {
-    padding: 18px 22px 8px;
+@media (max-width: 480px) {
+  .login-brand-header {
+    margin-bottom: 28px;
+  }
+  .login-tabs {
+    margin-bottom: 24px;
+  }
+  .login-right-footer {
+    margin-top: 32px;
   }
 }
 </style>
diff --git a/frontend/src/views/Register.vue b/frontend/src/views/Register.vue
index d3a31c71..2ff2665a 100644
--- a/frontend/src/views/Register.vue
+++ b/frontend/src/views/Register.vue
@@ -1,311 +1,316 @@
 <template>
-  <div class="register-container">
-    <!-- 背景装饰 -->
-    <div class="bg-decoration">
-      <div class="floating-orb orb-1"></div>
-      <div class="floating-orb orb-2"></div>
-      <div class="floating-orb orb-3"></div>
-    </div>
+  <div class="register-wrapper">
+    <div class="register-split-container">
 
-    <!-- 主容器 -->
-    <div class="glass-card">
-      <!-- 玻璃层效果 -->
-      <div class="glass-backdrop"></div>
-      <div class="glass-overlay"></div>
-      <div class="glass-border"></div>
+      <!-- 左侧：明亮极光品牌面板（与登录页完全一致） -->
+      <div class="reg-left-brand">
+        <div class="brand-bg-pattern"></div>
+        <div class="brand-content-wrapper">
+          <!-- 顶部系统微标 -->
+          <div class="brand-mini-logo">
+            <div class="mini-logo-icon">
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                <path d="M2 17l10 5 10-5"/>
+                <path d="M2 12l10 5 10-5"/>
+              </svg>
+            </div>
+            <span class="mini-logo-text">华邦制药 · CTMS</span>
+          </div>
 
-      <!-- 顶部区域 - 欢迎与进度 -->
-      <div class="card-header">
-        <!-- Logo & 品牌 -->
-        <div class="brand-section">
-          <div class="logo-container">
-            <div class="logo-glass"></div>
-            <div class="logo-gradient"></div>
-            <div class="logo-border"></div>
-            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round" class="logo-icon">
-              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
-            </svg>
+          <!-- 中部标语区 -->
+          <div class="brand-slogan-block">
+            <h1 class="brand-main-title">
+              <span class="system-name">临床试验管理系统</span>
+            </h1>
+            <p class="brand-sub-desc">
+              全流程覆盖临床试验立项、执行、监查与归档，以规范化管理保障数据质量，助力研究团队高效推进项目合规落地。
+            </p>
           </div>
-          <h1 class="welcome-title">{{ TEXT.modules.auth.registerTitle }}</h1>
-          <p class="welcome-subtitle">{{ TEXT.modules.auth.registerDesc }}</p>
-        </div>
 
-        <!-- 进度步骤 -->
-        <div class="progress-steps">
-          <div class="step-group">
-            <div :class="['step-indicator', { active: currentStep >= 1 }]">1</div>
-            <span class="step-label">基本信息</span>
+          <!-- 特征卡片 -->
+          <div class="brand-features-grid">
+            <div class="feature-card delay-1">
+              <div class="feature-icon-wrapper">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                  <path d="M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/>
+                </svg>
+              </div>
+              <div class="feature-info">
+                <h3 class="feature-title">项目全流程管理</h3>
+                <p class="feature-desc">覆盖立项审批、方案配置、人员分工到进度追踪，多中心协同操作，信息集中透明可查。</p>
+              </div>
+            </div>
+            <div class="feature-card delay-2">
+              <div class="feature-icon-wrapper">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                </svg>
+              </div>
+              <div class="feature-info">
+                <h3 class="feature-title">合规核查与数据溯源</h3>
+                <p class="feature-desc">深度契合 GCP 与 NMPA 规范，记录完整操作轨迹与数据变更历史，确保每一条记录真实可追溯。</p>
+              </div>
+            </div>
+            <div class="feature-card delay-3">
+              <div class="feature-icon-wrapper">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                  <path d="M3 3v18h18M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"/>
+                </svg>
+              </div>
+              <div class="feature-info">
+                <h3 class="feature-title">偏差与安全事件管理</h3>
+                <p class="feature-desc">结构化记录研究偏差与不良事件，支持分级处理与闭环追踪，保障受试者安全与项目数据完整性。</p>
+              </div>
+            </div>
           </div>
-          <div class="step-line"></div>
-          <div class="step-group">
-            <div :class="['step-indicator', { active: currentStep >= 2 }]">2</div>
-            <span class="step-label">安全设置</span>
-          </div>
-          <div class="step-line"></div>
-          <div class="step-group">
-            <div :class="['step-indicator', { active: currentStep >= 3 }]">3</div>
-            <span class="step-label">完成注册</span>
+
+          <!-- 底部声明 -->
+          <div class="brand-legal-info">
+            <p class="legal-item">Compliance with GCP &amp; NMPA Regulations</p>
           </div>
         </div>
       </div>
 
-      <!-- 底部区域 - 注册表单 -->
-      <div class="card-body">
-        <!-- 表单头部 -->
-        <div class="form-header">
-          <h2 class="form-title">{{ stepTitle }}</h2>
-          <p class="form-subtitle">步骤 {{ currentStep }}/3 · {{ stepDescription }}</p>
-        </div>
-
-        <section v-if="registrationSubmitted" class="approval-notice" aria-live="polite">
-          <div class="approval-icon">
-            <svg width="28" height="28" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-            </svg>
-          </div>
-          <h3 class="approval-title">注册申请已提交</h3>
-          <p class="approval-message">待管理员审核通过后方可登录。</p>
-          <p class="approval-hint">管理员审核通过前，请勿重复提交注册申请。</p>
-        </section>
-
-        <!-- 注册表单 -->
-        <form v-else class="register-form" @submit.prevent="handleSubmit">
-          <!-- 步骤 1: 基本信息 -->
-          <div v-show="currentStep === 1" class="step-content">
-            <!-- 邮箱 -->
-            <div class="form-group">
-              <label class="form-label">{{ TEXT.modules.auth.emailLabel }}</label>
-              <div class="input-wrapper">
-                <div class="input-glass"></div>
-                <div class="input-overlay"></div>
-                <div class="input-border"></div>
-                <input
-                  v-model="form.email"
-                  type="email"
-                  class="glass-input"
-                  :placeholder="TEXT.modules.auth.emailPlaceholder"
-                  autocomplete="email"
-                />
-              </div>
-              <span v-if="errors.email" class="error-text">{{ errors.email }}</span>
+      <!-- 右侧：注册表单面板 -->
+      <div class="reg-right-form">
+        <div class="reg-card-container">
+          <!-- 顶部 Logo -->
+          <div class="reg-brand-header">
+            <div class="brand-logo-icon">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                <path d="M2 17l10 5 10-5"/>
+                <path d="M2 12l10 5 10-5"/>
+              </svg>
             </div>
+            <div class="brand-divider"></div>
+            <span class="brand-system-text">新用户注册</span>
+          </div>
 
-            <!-- 姓名和部门 -->
-            <div class="form-row">
+          <!-- 步骤进度条 -->
+          <div class="reg-steps">
+            <div v-for="(label, idx) in ['基本信息', '安全设置', '完成注册']" :key="idx" class="step-item">
+              <div :class="['step-dot', { active: currentStep >= idx + 1, done: currentStep > idx + 1 }]">
+                <svg v-if="currentStep > idx + 1" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+                  <path d="M20 6 9 17l-5-5"/>
+                </svg>
+                <span v-else>{{ idx + 1 }}</span>
+              </div>
+              <span :class="['step-label', { active: currentStep >= idx + 1 }]">{{ label }}</span>
+              <div v-if="idx < 2" class="step-line" :class="{ active: currentStep > idx + 1 }"></div>
+            </div>
+          </div>
+
+          <!-- 提交成功状态 -->
+          <section v-if="registrationSubmitted" class="approval-notice" aria-live="polite">
+            <div class="approval-icon">
+              <svg width="26" height="26" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
+              </svg>
+            </div>
+            <h3 class="approval-title">注册申请已提交</h3>
+            <p class="approval-message">待管理员审核通过后方可登录系统。</p>
+            <p class="approval-hint">管理员审核通过前，请勿重复提交注册申请。</p>
+            <RouterLink to="/login" class="back-to-login-btn">返回登录</RouterLink>
+          </section>
+
+          <!-- 注册表单 -->
+          <form v-else class="register-form" @submit.prevent="handleSubmit">
+            <!-- 步骤 1: 基本信息 -->
+            <div v-show="currentStep === 1" class="step-content">
               <div class="form-group">
-                <label class="form-label">{{ TEXT.modules.auth.fullNameLabel }}</label>
-                <div class="input-wrapper">
-                  <div class="input-glass"></div>
-                  <div class="input-overlay"></div>
-                  <div class="input-border"></div>
+                <label class="form-label">{{ TEXT.modules.auth.emailLabel }}</label>
+                <div class="line-input-wrapper">
                   <input
-                    v-model="form.full_name"
-                    type="text"
-                    class="glass-input"
-                    :placeholder="TEXT.modules.auth.fullNamePlaceholder"
+                    v-model="form.email"
+                    type="email"
+                    class="line-input"
+                    :placeholder="TEXT.modules.auth.emailPlaceholder"
+                    autocomplete="email"
+                    @input="clearError('email')"
+                    @blur="validateEmailAvailability"
                   />
                 </div>
-                <span v-if="errors.full_name" class="error-text">{{ errors.full_name }}</span>
+                <span v-if="errors.email" class="error-text">{{ errors.email }}</span>
+              </div>
+              <div class="form-row">
+                <div class="form-group">
+                  <label class="form-label">{{ TEXT.modules.auth.fullNameLabel }}</label>
+                  <div class="line-input-wrapper">
+                    <input
+                      v-model="form.full_name"
+                      type="text"
+                      class="line-input"
+                      :placeholder="TEXT.modules.auth.fullNamePlaceholder"
+                      @input="clearError('full_name')"
+                    />
+                  </div>
+                  <span v-if="errors.full_name" class="error-text">{{ errors.full_name }}</span>
+                </div>
+                <div class="form-group">
+                  <label class="form-label">{{ TEXT.modules.auth.clinicalDepartmentLabel }}</label>
+                  <div class="line-input-wrapper">
+                    <input
+                      v-model="form.clinical_department"
+                      type="text"
+                      class="line-input"
+                      :placeholder="TEXT.modules.auth.clinicalDepartmentPlaceholder"
+                      @input="clearError('clinical_department')"
+                    />
+                  </div>
+                  <span v-if="errors.clinical_department" class="error-text">{{ errors.clinical_department }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 步骤 2: 安全设置 -->
+            <div v-show="currentStep === 2" class="step-content">
+              <div class="form-group">
+                <label class="form-label">{{ TEXT.modules.auth.passwordLabel }}</label>
+                <div class="line-input-wrapper password-wrapper">
+                  <input
+                    v-model="form.password"
+                    :type="showPassword ? 'text' : 'password'"
+                    class="line-input"
+                    :placeholder="TEXT.modules.auth.passwordRuleMix"
+                    autocomplete="new-password"
+                    @input="clearError('password')"
+                  />
+                  <button type="button" class="toggle-password-btn" @click="showPassword = !showPassword">
+                    <svg v-if="!showPassword" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+                    </svg>
+                    <svg v-else width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
+                    </svg>
+                  </button>
+                </div>
+                <span v-if="errors.password" class="error-text">{{ errors.password }}</span>
               </div>
               <div class="form-group">
-                <label class="form-label">{{ TEXT.modules.auth.clinicalDepartmentLabel }}</label>
-                <div class="input-wrapper">
-                  <div class="input-glass"></div>
-                  <div class="input-overlay"></div>
-                  <div class="input-border"></div>
+                <label class="form-label">{{ TEXT.modules.auth.confirmPasswordLabel }}</label>
+                <div class="line-input-wrapper password-wrapper">
                   <input
-                    v-model="form.clinical_department"
-                    type="text"
-                    class="glass-input"
-                    :placeholder="TEXT.modules.auth.clinicalDepartmentPlaceholder"
+                    v-model="form.confirmPassword"
+                    :type="showConfirmPassword ? 'text' : 'password'"
+                    class="line-input"
+                    :placeholder="TEXT.modules.auth.confirmPasswordPlaceholder"
+                    autocomplete="new-password"
+                    @input="clearError('confirmPassword')"
                   />
-                </div>
-                <span v-if="errors.clinical_department" class="error-text">{{ errors.clinical_department }}</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- 步骤 2: 安全设置 -->
-          <div v-show="currentStep === 2" class="step-content">
-            <!-- 密码 -->
-            <div class="form-group">
-              <label class="form-label">{{ TEXT.modules.auth.passwordLabel }}</label>
-              <div class="input-wrapper">
-                <div class="input-glass"></div>
-                <div class="input-overlay"></div>
-                <div class="input-border"></div>
-                <input
-                  v-model="form.password"
-                  :type="showPassword ? 'text' : 'password'"
-                  class="glass-input"
-                  :placeholder="TEXT.modules.auth.passwordRuleMix"
-                  autocomplete="new-password"
-                />
-                <button type="button" class="toggle-password" @click="showPassword = !showPassword">
-                  <svg v-if="!showPassword" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                  </svg>
-                  <svg v-else width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-                  </svg>
-                </button>
-              </div>
-              <span v-if="errors.password" class="error-text">{{ errors.password }}</span>
-            </div>
-
-            <!-- 确认密码 -->
-            <div class="form-group">
-              <label class="form-label">{{ TEXT.modules.auth.confirmPasswordLabel }}</label>
-              <div class="input-wrapper">
-                <div class="input-glass"></div>
-                <div class="input-overlay"></div>
-                <div class="input-border"></div>
-                <input
-                  v-model="form.confirmPassword"
-                  :type="showConfirmPassword ? 'text' : 'password'"
-                  class="glass-input"
-                  :placeholder="TEXT.modules.auth.confirmPasswordPlaceholder"
-                  autocomplete="new-password"
-                />
-                <button type="button" class="toggle-password" @click="showConfirmPassword = !showConfirmPassword">
-                  <svg v-if="!showConfirmPassword" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                  </svg>
-                  <svg v-else width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-                  </svg>
-                </button>
-              </div>
-              <span v-if="errors.confirmPassword" class="error-text">{{ errors.confirmPassword }}</span>
-            </div>
-
-            <!-- 密码强度提示 -->
-            <div class="password-hints">
-              <div :class="['hint-item', { valid: passwordHints.minLength }]">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <polyline v-if="passwordHints.minLength" points="20 6 9 17 4 12"></polyline>
-                  <circle v-else cx="12" cy="12" r="10"></circle>
-                </svg>
-                <span>至少 8 位字符</span>
-              </div>
-              <div :class="['hint-item', { valid: passwordHints.hasLetter }]">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <polyline v-if="passwordHints.hasLetter" points="20 6 9 17 4 12"></polyline>
-                  <circle v-else cx="12" cy="12" r="10"></circle>
-                </svg>
-                <span>包含字母</span>
-              </div>
-              <div :class="['hint-item', { valid: passwordHints.hasNumber }]">
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <polyline v-if="passwordHints.hasNumber" points="20 6 9 17 4 12"></polyline>
-                  <circle v-else cx="12" cy="12" r="10"></circle>
-                </svg>
-                <span>包含数字</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- 步骤 3: 完成确认 -->
-          <div v-show="currentStep === 3" class="step-content">
-            <!-- 条款复选框 -->
-            <div class="terms-section">
-              <label class="checkbox-wrapper">
-                <input v-model="form.agreeTerms" type="checkbox" class="checkbox-input" />
-                <span class="checkbox-custom"></span>
-                <span class="checkbox-label">
-                  我同意
-                  <button type="button" class="link link-button" @click.stop.prevent="openProtocolDialog('terms')">
-                    服务条款
+                  <button type="button" class="toggle-password-btn" @click="showConfirmPassword = !showConfirmPassword">
+                    <svg v-if="!showConfirmPassword" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+                    </svg>
+                    <svg v-else width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/>
+                    </svg>
                   </button>
-                  和
-                  <button type="button" class="link link-button" @click.stop.prevent="openProtocolDialog('privacy')">
-                    隐私政策
-                  </button>
-                </span>
-              </label>
-              <span v-if="errors.agreeTerms" class="error-text">{{ errors.agreeTerms }}</span>
-            </div>
-
-            <!-- 汇总信息 -->
-            <div class="summary-section">
-              <h3 class="summary-title">注册信息确认</h3>
-              <div class="summary-grid">
-                <div class="summary-item">
-                  <span class="summary-label">邮箱</span>
-                  <span class="summary-value">{{ form.email || '-' }}</span>
                 </div>
-                <div class="summary-item">
-                  <span class="summary-label">姓名</span>
-                  <span class="summary-value">{{ form.full_name || '-' }}</span>
+                <span v-if="errors.confirmPassword" class="error-text">{{ errors.confirmPassword }}</span>
+              </div>
+              <!-- 密码强度提示 -->
+              <div class="password-hints">
+                <div :class="['hint-item', { valid: passwordHints.minLength }]">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                    <polyline v-if="passwordHints.minLength" points="20 6 9 17 4 12"/>
+                    <circle v-else cx="12" cy="12" r="10"/>
+                  </svg>
+                  <span>至少 8 位字符</span>
                 </div>
-                <div class="summary-item">
-                  <span class="summary-label">部门</span>
-                  <span class="summary-value">{{ form.clinical_department || '-' }}</span>
+                <div :class="['hint-item', { valid: passwordHints.hasLetter }]">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                    <polyline v-if="passwordHints.hasLetter" points="20 6 9 17 4 12"/>
+                    <circle v-else cx="12" cy="12" r="10"/>
+                  </svg>
+                  <span>包含字母</span>
+                </div>
+                <div :class="['hint-item', { valid: passwordHints.hasNumber }]">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                    <polyline v-if="passwordHints.hasNumber" points="20 6 9 17 4 12"/>
+                    <circle v-else cx="12" cy="12" r="10"/>
+                  </svg>
+                  <span>包含数字</span>
                 </div>
               </div>
             </div>
-          </div>
 
-          <!-- 按钮区域 -->
-          <div class="button-group">
-            <button
-              v-if="currentStep > 1"
-              type="button"
-              class="btn-secondary"
-              @click="prevStep"
-            >
-              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"></path>
-              </svg>
-              <span>上一步</span>
-            </button>
+            <!-- 步骤 3: 完成确认 -->
+            <div v-show="currentStep === 3" class="step-content">
+              <!-- 汇总信息 -->
+              <div class="summary-section">
+                <h3 class="summary-title">注册信息确认</h3>
+                <div class="summary-grid">
+                  <div class="summary-item">
+                    <span class="summary-label">邮箱</span>
+                    <span class="summary-value">{{ form.email || '-' }}</span>
+                  </div>
+                  <div class="summary-item">
+                    <span class="summary-label">姓名</span>
+                    <span class="summary-value">{{ form.full_name || '-' }}</span>
+                  </div>
+                  <div class="summary-item">
+                    <span class="summary-label">部门</span>
+                    <span class="summary-value">{{ form.clinical_department || '-' }}</span>
+                  </div>
+                </div>
+              </div>
+              <!-- 条款同意 -->
+              <div class="terms-section">
+                <label class="checkbox-wrapper">
+                  <input v-model="form.agreeTerms" type="checkbox" class="checkbox-input"/>
+                  <span class="checkbox-custom"></span>
+                  <span class="checkbox-label">
+                    我同意
+                    <button type="button" class="proto-link" @click.stop.prevent="openProtocolDialog('terms')">服务条款</button>
+                    和
+                    <button type="button" class="proto-link" @click.stop.prevent="openProtocolDialog('privacy')">隐私政策</button>
+                  </span>
+                </label>
+                <span v-if="errors.agreeTerms" class="error-text">{{ errors.agreeTerms }}</span>
+              </div>
+            </div>
 
-            <button
-              v-if="currentStep < 3"
-              type="button"
-              class="btn-primary"
-              @click="nextStep"
-            >
-              <span>继续</span>
-              <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-              </svg>
-            </button>
-
-            <button
-              v-else
-              type="submit"
-              class="btn-primary"
-              :disabled="submitting"
-            >
-              <span v-if="submitting">提交中...</span>
-              <template v-else>
-                <span>{{ TEXT.modules.auth.registerButton }}</span>
-                <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+            <!-- 按钮区 -->
+            <div class="button-group">
+              <button v-if="currentStep > 1" type="button" class="btn-secondary" @click="prevStep">
+                <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"/>
                 </svg>
-              </template>
-            </button>
-          </div>
-        </form>
+                上一步
+              </button>
+              <button v-if="currentStep < 3" type="button" class="btn-primary" :disabled="checkingEmail" @click="nextStep">
+                {{ currentStep === 1 && checkingEmail ? "校验中..." : "继续" }}
+                <svg v-if="!(currentStep === 1 && checkingEmail)" width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
+                </svg>
+              </button>
+              <button v-else type="submit" class="btn-primary" :disabled="submitting">
+                <span v-if="submitting">提交中...</span>
+                <template v-else>
+                  {{ TEXT.modules.auth.registerButton }}
+                  <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                  </svg>
+                </template>
+              </button>
+            </div>
+          </form>
 
-        <!-- 页脚 -->
-        <div class="card-footer">
-          <p class="footer-text">
-            {{ TEXT.modules.auth.backToLogin.replace('已有账号？', '') }}
-            <RouterLink to="/login" class="footer-link">{{ TEXT.common.actions.login }}</RouterLink>
-          </p>
-          <div class="footer-links">
-            <button type="button" class="footer-small-link footer-link-button">帮助中心</button>
-            <span class="footer-divider">•</span>
-            <button type="button" class="footer-small-link footer-link-button">联系支持</button>
+          <!-- 底部返回登录 -->
+          <div class="reg-footer">
+            <span class="footer-text">已有账号？</span>
+            <RouterLink to="/login" class="footer-link">立即登录</RouterLink>
           </div>
         </div>
       </div>
+
     </div>
 
+    <!-- 协议弹窗 -->
     <el-dialog
       v-model="protocolDialogVisible"
       :title="activeProtocolTitle"
@@ -321,9 +326,7 @@
         </section>
       </div>
       <template #footer>
-        <el-button type="primary" size="large" class="protocol-confirm-btn" @click="closeProtocolDialog">
-          确 定
-        </el-button>
+        <el-button type="primary" size="large" class="protocol-confirm-btn" @click="closeProtocolDialog">确 定</el-button>
       </template>
     </el-dialog>
   </div>
@@ -331,9 +334,10 @@
 
 <script setup lang="ts">
 import { reactive, ref, computed } from "vue";
+import axios from "axios";
 import { ElMessage } from "element-plus";
-import { register as apiRegister } from "../api/auth";
-import type { RegisterRequest } from "../types/api";
+import { checkEmailAvailability, register as apiRegister } from "../api/auth";
+import type { ApiError, RegisterRequest } from "../types/api";
 import { TEXT, requiredMessage } from "../locales";
 import { privacyPolicySections, serviceTermsSections } from "../content/authProtocol";
 
@@ -357,34 +361,13 @@ const errors = reactive<Record<string, string>>({});
 
 // UI状态
 const submitting = ref(false);
+const checkingEmail = ref(false);
 const showPassword = ref(false);
 const showConfirmPassword = ref(false);
 const protocolDialogVisible = ref(false);
 const activeProtocolType = ref<ProtocolType>("terms");
 const registrationSubmitted = ref(false);
 
-// 步骤标题
-const stepTitle = computed(() => {
-  if (registrationSubmitted.value) return "注册申请已提交";
-  switch (currentStep.value) {
-    case 1: return "基本信息";
-    case 2: return "安全设置";
-    case 3: return "完成注册";
-    default: return "";
-  }
-});
-
-// 步骤描述
-const stepDescription = computed(() => {
-  if (registrationSubmitted.value) return "待管理员审核通过后方可登录";
-  switch (currentStep.value) {
-    case 1: return "填写您的基本信息";
-    case 2: return "设置登录密码";
-    case 3: return "确认信息并提交";
-    default: return "";
-  }
-});
-
 // 密码强度提示
 const passwordHints = computed(() => ({
   minLength: form.password.length >= 8,
@@ -400,24 +383,27 @@ const activeProtocolSections = computed(() => (
   activeProtocolType.value === "terms" ? serviceTermsSections : privacyPolicySections
 ));
 
+// 清除字段错误
+const clearError = (field: string) => {
+  delete errors[field];
+};
+
+const isEmailFormatValid = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+
 // 验证步骤1
 const validateStep1 = (): boolean => {
   const newErrors: Record<string, string> = {};
-  
   if (!form.email) {
     newErrors.email = requiredMessage(TEXT.modules.auth.emailLabel);
-  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
+  } else if (!isEmailFormatValid(form.email)) {
     newErrors.email = TEXT.common.validation.invalidEmail;
   }
-  
   if (!form.full_name) {
     newErrors.full_name = requiredMessage(TEXT.modules.auth.fullNameLabel);
   }
-  
   if (!form.clinical_department) {
     newErrors.clinical_department = requiredMessage(TEXT.modules.auth.clinicalDepartmentLabel);
   }
-  
   Object.assign(errors, newErrors);
   return Object.keys(newErrors).length === 0;
 };
@@ -425,7 +411,6 @@ const validateStep1 = (): boolean => {
 // 验证步骤2
 const validateStep2 = (): boolean => {
   const newErrors: Record<string, string> = {};
-  
   if (!form.password) {
     newErrors.password = requiredMessage(TEXT.modules.auth.passwordLabel);
   } else if (form.password.length < 8) {
@@ -433,13 +418,11 @@ const validateStep2 = (): boolean => {
   } else if (!/[A-Za-z]/.test(form.password) || !/[0-9]/.test(form.password)) {
     newErrors.password = TEXT.modules.auth.passwordRuleMix;
   }
-  
   if (!form.confirmPassword) {
     newErrors.confirmPassword = requiredMessage(TEXT.modules.auth.confirmPasswordLabel);
   } else if (form.confirmPassword !== form.password) {
     newErrors.confirmPassword = TEXT.modules.auth.passwordMismatch;
   }
-  
   Object.assign(errors, newErrors);
   return Object.keys(newErrors).length === 0;
 };
@@ -447,20 +430,13 @@ const validateStep2 = (): boolean => {
 // 验证步骤3
 const validateStep3 = (): boolean => {
   const newErrors: Record<string, string> = {};
-  
   if (!form.agreeTerms) {
     newErrors.agreeTerms = "请同意服务条款和隐私政策";
   }
-  
   Object.assign(errors, newErrors);
   return Object.keys(newErrors).length === 0;
 };
 
-// 清除特定字段的错误
-const clearError = (field: string) => {
-  delete errors[field];
-};
-
 const openProtocolDialog = (type: ProtocolType) => {
   activeProtocolType.value = type;
   protocolDialogVisible.value = true;
@@ -470,12 +446,51 @@ const closeProtocolDialog = () => {
   protocolDialogVisible.value = false;
 };
 
+const validateEmailAvailability = async (): Promise<boolean> => {
+  if (!form.email || !isEmailFormatValid(form.email)) {
+    return false;
+  }
+  checkingEmail.value = true;
+  try {
+    const { data } = await checkEmailAvailability(form.email);
+    if (!data.available) {
+      errors.email = "邮箱已注册";
+      return false;
+    }
+    if (errors.email === "邮箱已注册" || errors.email === "邮箱已存在") {
+      delete errors.email;
+    }
+    return true;
+  } catch (error) {
+    const message = getRegisterErrorMessage(error);
+    errors.email = message;
+    return false;
+  } finally {
+    checkingEmail.value = false;
+  }
+};
+
+const getRegisterErrorMessage = (error: unknown): string => {
+  if (!axios.isAxiosError<ApiError | { detail?: unknown }>(error)) {
+    return TEXT.common.messages.requestFailed;
+  }
+  const data = error.response?.data;
+  const detail = (data as { detail?: unknown } | undefined)?.detail;
+  if (typeof detail === "string") return detail;
+  if (detail && typeof detail === "object" && "message" in detail) {
+    const message = (detail as { message?: unknown }).message;
+    if (typeof message === "string") return message;
+  }
+  if (typeof (data as ApiError | undefined)?.message === "string") {
+    return (data as ApiError).message;
+  }
+  return TEXT.common.messages.requestFailed;
+};
+
 // 下一步
-const nextStep = () => {
-  // 清除之前的错误
+const nextStep = async () => {
   Object.keys(errors).forEach(key => delete errors[key]);
-  
-  if (currentStep.value === 1 && validateStep1()) {
+  if (currentStep.value === 1 && validateStep1() && await validateEmailAvailability()) {
     currentStep.value = 2;
   } else if (currentStep.value === 2 && validateStep2()) {
     currentStep.value = 3;
@@ -486,22 +501,17 @@ const nextStep = () => {
 const prevStep = () => {
   if (currentStep.value > 1) {
     currentStep.value--;
-    // 清除错误
     Object.keys(errors).forEach(key => delete errors[key]);
   }
 };
 
 // 提交表单
 const handleSubmit = async () => {
-  // 先验证最后一步
   if (!validateStep3()) return;
-  
-  // 再验证所有步骤
   if (!validateStep1() || !validateStep2()) {
     ElMessage.warning("请检查所有填写的信息");
     return;
   }
-  
   submitting.value = true;
   try {
     await apiRegister({
@@ -512,16 +522,23 @@ const handleSubmit = async () => {
     });
     registrationSubmitted.value = true;
     ElMessage.success(TEXT.modules.auth.registerSuccess);
-    // 清空表单
     Object.assign(form, {
-      email: "",
-      password: "",
-      confirmPassword: "",
-      full_name: "",
-      clinical_department: "",
-      agreeTerms: false,
+      email: "", password: "", confirmPassword: "",
+      full_name: "", clinical_department: "", agreeTerms: false,
     });
     currentStep.value = 3;
+  } catch (error) {
+    const message = getRegisterErrorMessage(error);
+    if (
+      axios.isAxiosError(error) &&
+      (error.response?.status === 409 || message.includes("邮箱已注册") || message.includes("邮箱已存在"))
+    ) {
+      errors.email = message;
+      currentStep.value = 1;
+      ElMessage.error(message);
+      return;
+    }
+    ElMessage.error(message);
   } finally {
     submitting.value = false;
   }
@@ -529,464 +546,501 @@ const handleSubmit = async () => {
 </script>
 
 <style scoped>
-/* 基础变量 */
-:root {
-  --glass-bg: rgba(255, 255, 255, 0.15);
-  --glass-border: rgba(255, 255, 255, 0.3);
-  --glass-shadow: rgba(0, 0, 0, 0.1);
-}
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;600;800&display=swap");
 
-/* 容器 */
-.register-container {
+/* ═══════════════════════
+   根容器
+   ═══════════════════════ */
+.register-wrapper {
+  position: relative;
   min-height: 100vh;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px;
-  position: relative;
-  overflow: hidden;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-}
-
-/* 背景装饰 */
-.bg-decoration {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
+  align-items: stretch;
+  background: #ffffff;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
   overflow: hidden;
 }
 
-.floating-orb {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(80px);
-  animation: float 20s ease-in-out infinite;
+.register-split-container {
+  display: flex;
+  width: 100vw;
+  min-height: 100vh;
 }
 
-.orb-1 {
-  width: 500px;
-  height: 500px;
-  background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
-  top: -100px;
-  right: -100px;
-  animation-delay: 0s;
-}
-
-.orb-2 {
-  width: 400px;
-  height: 400px;
-  background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
-  bottom: -50px;
-  left: -100px;
-  animation-delay: -7s;
-}
-
-.orb-3 {
-  width: 300px;
-  height: 300px;
-  background: radial-gradient(circle, rgba(236, 72, 153, 0.25) 0%, transparent 70%);
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation-delay: -14s;
-}
-
-@keyframes float {
-  0%, 100% { transform: translate(0, 0) scale(1); }
-  25% { transform: translate(30px, -30px) scale(1.05); }
-  50% { transform: translate(-20px, 20px) scale(0.95); }
-  75% { transform: translate(20px, 30px) scale(1.02); }
-}
-
-/* 玻璃卡片 */
-.glass-card {
+/* ═══════════════════════
+   左侧：明亮极光品牌面板
+   ═══════════════════════ */
+.reg-left-brand {
+  flex: 1;
+  background: linear-gradient(135deg, #e0f2fe 0%, #e0e7ff 50%, #f3e8ff 100%);
+  padding: 60px 80px;
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  max-width: 560px;
-  width: 100%;
-  border-radius: 24px;
-  box-shadow: 
-    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
-    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
-    0 12.5px 10px rgba(0, 0, 0, 0.06),
-    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
-    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
-    0 100px 80px rgba(0, 0, 0, 0.12);
 }
 
-.glass-backdrop {
+.brand-bg-pattern {
   position: absolute;
-  inset: 0;
-  z-index: 0;
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-}
-
-.glass-overlay {
-  position: absolute;
-  inset: 0;
+  bottom: 5%;
+  right: -5%;
+  width: 440px;
+  height: 440px;
+  background-image: url("data:image/svg+xml,%3Csvg width='380' height='380' viewBox='0 0 380 380' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 120 L130 80 L200 120 L200 200 L130 240 L60 200 Z' stroke='rgba(99, 102, 241, 0.12)' stroke-width='1.2'/%3E%3Cpath d='M200 120 L270 80 L340 120 L340 200 L270 240 L200 200' stroke='rgba(6, 182, 212, 0.1)' stroke-width='1.2'/%3E%3Ccircle cx='60' cy='120' r='4' fill='rgba(99, 102, 241, 0.25)'/%3E%3Ccircle cx='130' cy='80' r='3' fill='rgba(99, 102, 241, 0.18)'/%3E%3Ccircle cx='200' cy='120' r='4' fill='rgba(99, 102, 241, 0.25)'/%3E%3Ccircle cx='270' cy='80' r='4' fill='rgba(6, 182, 212, 0.2)'/%3E%3Ccircle cx='340' cy='120' r='5' fill='rgba(6, 182, 212, 0.25)'/%3E%3C/svg%3E");
+  background-size: contain;
+  background-repeat: no-repeat;
+  pointer-events: none;
   z-index: 1;
-  background: rgba(255, 255, 255, 0.1);
+  opacity: 0.8;
+  animation: bgPatternFloat 30s infinite alternate ease-in-out;
 }
 
-.glass-border {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  border-radius: 24px;
-  box-shadow: 
-    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.4),
-    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.2);
-  pointer-events: none;
+@keyframes bgPatternFloat {
+  0%   { transform: translate(0, 0) rotate(0deg); }
+  100% { transform: translate(-10px, 15px) rotate(2deg); }
 }
 
-/* 卡片头部 */
-.card-header {
+.brand-content-wrapper {
   position: relative;
-  z-index: 10;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+  flex: 1;
+}
+
+/* 迷你Logo */
+.brand-mini-logo {
+  display: flex;
   align-items: center;
-  text-align: center;
-  padding: 32px 32px 24px;
-  background: rgba(0, 0, 0, 0.1);
+  gap: 14px;
 }
 
-/* 品牌区域 */
-.brand-section {
-  margin-bottom: 20px;
-}
-
-.logo-container {
-  position: relative;
-  display: inline-flex;
+.mini-logo-icon {
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 64px;
-  height: 64px;
-  border-radius: 16px;
-  margin-bottom: 12px;
-  overflow: hidden;
-}
-
-.logo-glass {
-  position: absolute;
-  inset: 0;
-  backdrop-filter: blur(8px);
-}
-
-.logo-gradient {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
-}
-
-.logo-border {
-  position: absolute;
-  inset: 0;
-  border-radius: 16px;
-  box-shadow: 
-    inset 3px 3px 2px 0 rgba(255, 255, 255, 0.6),
-    inset -2px -2px 2px 2px rgba(255, 255, 255, 0.3);
-  pointer-events: none;
-}
-
-.logo-icon {
-  position: relative;
-  z-index: 10;
+  width: 55px;
+  height: 55px;
+  background: #2563eb;
+  border-radius: 14px;
   color: white;
 }
 
-.welcome-title {
-  font-size: 2.5rem;
-  font-weight: 400;
-  color: white;
-  letter-spacing: -0.02em;
-  margin: 0 0 8px;
-  line-height: 1.2;
+.mini-logo-text {
+  font-size: 26px;
+  font-weight: 700;
+  color: #1e293b;
+  letter-spacing: 0.5px;
 }
 
-.welcome-subtitle {
-  font-size: 0.875rem;
-  font-weight: 300;
-  color: rgba(255, 255, 255, 0.7);
+/* Slogan 区 */
+.brand-slogan-block {
+  margin: 32px 0 0;
+  max-width: 520px;
+}
+
+.brand-main-title {
+  font-size: 38px;
+  font-weight: 800;
+  line-height: 1.25;
+  letter-spacing: -1px;
+  margin: 0 0 20px;
+  color: #0f172a;
+}
+
+.brand-sub-desc {
+  font-size: 15px;
+  color: #64748b;
+  line-height: 1.8;
   margin: 0;
-  line-height: 1.5;
+  font-weight: 500;
 }
 
-/* 进度步骤 */
-.progress-steps {
+/* 特征卡片 */
+.brand-features-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin: 32px 0;
+  width: 100%;
+  max-width: 520px;
+}
+
+.feature-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 18px 22px;
+  background: rgba(255, 255, 255, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.45);
+  border-radius: 16px;
+  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  cursor: default;
+  opacity: 0;
+  transform: translateY(20px);
+  animation: cardFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+.feature-card.delay-1 { animation-delay: 0.15s; }
+.feature-card.delay-2 { animation-delay: 0.30s; }
+.feature-card.delay-3 { animation-delay: 0.45s; }
+
+@keyframes cardFadeIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.feature-card:hover {
+  background: rgba(255, 255, 255, 0.55);
+  border-color: rgba(37, 99, 235, 0.22);
+  transform: translateY(-3px);
+  box-shadow: 0 12px 30px -10px rgba(37, 99, 235, 0.08), 0 4px 12px -2px rgba(0,0,0,0.02);
+}
+
+.feature-icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  background: rgba(37, 99, 235, 0.06);
+  border-radius: 10px;
+  color: #2563eb;
+  flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.feature-card:hover .feature-icon-wrapper {
+  background: #2563eb;
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
+}
+
+.feature-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.feature-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #1e293b;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.feature-desc {
+  font-size: 12px;
+  color: #64748b;
+  line-height: 1.6;
+  margin: 0;
+  font-weight: 500;
+}
+
+/* 底部声明 */
+.brand-legal-info {
+  border-top: 1px solid rgba(148, 163, 184, 0.15);
+  padding-top: 24px;
+}
+
+.legal-item {
+  font-family: 'Outfit', sans-serif;
+  font-size: 11px;
+  color: #94a3b8;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  margin: 0;
+}
+
+/* ═══════════════════════
+   右侧：注册表单面板
+   ═══════════════════════ */
+.reg-right-form {
+  flex: 1;
+  background: #ffffff;
+  padding: 60px 80px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+}
+
+.reg-card-container {
+  width: 100%;
+  max-width: 420px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 顶部品牌Logo */
+.reg-brand-header {
   display: flex;
   align-items: center;
   gap: 12px;
+  margin-bottom: 32px;
 }
 
-.step-group {
+.brand-logo-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  background: #2563eb;
+  border-radius: 9px;
+  color: white;
+}
+
+.brand-divider {
+  width: 1.5px;
+  height: 18px;
+  background: #e2e8f0;
+}
+
+.brand-system-text {
+  font-family: 'Outfit', sans-serif;
+  font-size: 20px;
+  font-weight: 800;
+  color: #1e293b;
+  letter-spacing: -0.5px;
+}
+
+/* ═══════════════════════
+   步骤进度条
+   ═══════════════════════ */
+.reg-steps {
+  display: flex;
+  align-items: center;
+  margin-bottom: 36px;
+}
+
+.step-item {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.step-indicator {
-  width: 32px;
-  height: 32px;
+.step-dot {
+  width: 28px;
+  height: 28px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: white;
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(4px);
+  font-size: 12px;
+  font-weight: 700;
+  background: #f1f5f9;
+  color: #94a3b8;
   transition: all 0.3s ease;
+  flex-shrink: 0;
 }
 
-.step-indicator.active {
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
-  box-shadow: 
-    inset 1px 1px 1px rgba(255, 255, 255, 0.5),
-    0 4px 12px rgba(99, 102, 241, 0.3);
+.step-dot.active {
+  background: #2563eb;
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+}
+
+.step-dot.done {
+  background: #2563eb;
+  color: #fff;
 }
 
 .step-label {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 500;
-  color: rgba(255, 255, 255, 0.6);
+  color: #94a3b8;
+  white-space: nowrap;
+  transition: color 0.3s;
 }
 
-.step-indicator.active + .step-label {
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.step-line {
-  width: 24px;
-  height: 1px;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-/* 卡片主体 */
-.card-body {
-  position: relative;
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  padding: 24px 32px 32px;
-}
-
-/* 表单头部 */
-.form-header {
-  margin-bottom: 24px;
-}
-
-.form-title {
-  font-size: 1.5rem;
-  font-weight: 500;
-  color: white;
-  margin: 0 0 8px;
-}
-
-.form-subtitle {
-  font-size: 0.875rem;
-  font-weight: 400;
-  color: rgba(255, 255, 255, 0.6);
-  margin: 0;
-}
-
-/* 表单 */
-.register-form {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.approval-notice {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 18px 12px 10px;
-  text-align: center;
-}
-
-.approval-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  height: 56px;
-  color: #ffffff;
-  background: linear-gradient(135deg, rgba(52, 211, 153, 0.45), rgba(99, 102, 241, 0.28));
-  border-radius: 16px;
-  box-shadow:
-    inset 1px 1px 1px rgba(255, 255, 255, 0.45),
-    0 12px 30px rgba(52, 211, 153, 0.16);
-}
-
-.approval-title {
-  margin: 4px 0 0;
-  color: #ffffff;
-  font-size: 1.375rem;
+.step-label.active {
+  color: #1e293b;
   font-weight: 600;
 }
 
-.approval-message,
-.approval-hint {
-  max-width: 360px;
-  margin: 0;
-  color: rgba(255, 255, 255, 0.72);
-  font-size: 0.9375rem;
-  line-height: 1.7;
+.step-line {
+  flex: 1;
+  height: 1.5px;
+  background: #e2e8f0;
+  margin: 0 8px;
+  min-width: 20px;
+  transition: background 0.3s;
 }
 
-.approval-hint {
-  color: rgba(255, 255, 255, 0.54);
-  font-size: 0.8125rem;
+.step-line.active {
+  background: #2563eb;
+}
+
+/* ═══════════════════════
+   表单样式（下划线风格）
+   ═══════════════════════ */
+.register-form {
+  display: flex;
+  flex-direction: column;
 }
 
 .step-content {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 22px;
+  margin-bottom: 28px;
 }
 
 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 12px;
+  gap: 16px;
 }
 
 .form-group {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
 
 .form-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: white;
+  font-size: 13px;
+  font-weight: 600;
+  color: #475569;
+  line-height: 1;
 }
 
-/* 输入框 */
-.input-wrapper {
+.line-input-wrapper {
   position: relative;
-  border-radius: 12px;
-  overflow: hidden;
 }
 
-.input-glass {
-  position: absolute;
-  inset: 0;
-  backdrop-filter: blur(4px);
-}
-
-.input-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.input-border {
-  position: absolute;
-  inset: 0;
-  border-radius: 12px;
-  box-shadow: 
-    inset 1px 1px 1px 0 rgba(255, 255, 255, 0.3),
-    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.1);
-  pointer-events: none;
-  transition: box-shadow 0.2s ease;
-}
-
-.input-wrapper:focus-within .input-border {
-  box-shadow: 
-    inset 1px 1px 1px 0 rgba(255, 255, 255, 0.5),
-    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.2),
-    0 0 0 2px rgba(99, 102, 241, 0.3);
-}
-
-.glass-input {
-  position: relative;
-  z-index: 5;
+.line-input {
   width: 100%;
-  padding: 12px 16px;
+  padding: 8px 0;
   background: transparent;
   border: none;
+  border-bottom: 1.5px solid #e2e8f0;
   outline: none;
-  font-size: 0.875rem;
-  color: white;
+  font-size: 14px;
+  color: #0f172a;
   font-family: inherit;
+  transition: border-color 0.25s ease;
+  box-sizing: border-box;
 }
 
-.glass-input::placeholder {
-  color: rgba(255, 255, 255, 0.4);
+.line-input::placeholder {
+  color: #cbd5e1;
 }
 
-.toggle-password {
+.line-input:focus {
+  border-bottom-color: #2563eb;
+}
+
+.password-wrapper .line-input {
+  padding-right: 32px;
+}
+
+.toggle-password-btn {
   position: absolute;
-  right: 12px;
+  right: 0;
   top: 50%;
   transform: translateY(-50%);
-  z-index: 10;
   background: none;
   border: none;
   padding: 4px;
   cursor: pointer;
-  color: rgba(255, 255, 255, 0.5);
-  transition: color 0.2s ease;
+  color: #94a3b8;
+  display: flex;
+  align-items: center;
+  transition: color 0.2s;
 }
 
-.toggle-password:hover {
-  color: rgba(255, 255, 255, 0.8);
+.toggle-password-btn:hover {
+  color: #2563eb;
 }
 
-/* 错误文本 */
 .error-text {
-  font-size: 0.75rem;
-  color: #f87171;
+  font-size: 11px;
+  color: #ef4444;
+  margin-top: 2px;
 }
 
-/* 密码提示 */
+/* 密码强度提示 */
 .password-hints {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
-  padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.05);
+  padding: 10px 14px;
+  background: #f8fafc;
   border-radius: 8px;
+  border: 1px solid #f1f5f9;
 }
 
 .hint-item {
   display: flex;
   align-items: center;
-  gap: 6px;
-  font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.5);
-  transition: color 0.2s ease;
+  gap: 5px;
+  font-size: 12px;
+  color: #94a3b8;
+  transition: color 0.2s;
 }
 
 .hint-item.valid {
-  color: #34d399;
+  color: #16a34a;
 }
 
-.hint-item svg {
-  flex-shrink: 0;
+/* 汇总信息 */
+.summary-section {
+  padding: 16px 18px;
+  background: #f8fafc;
+  border-radius: 12px;
+  border: 1px solid #f1f5f9;
 }
 
-/* 条款部分 */
+.summary-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #475569;
+  margin: 0 0 12px;
+}
+
+.summary-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.summary-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.summary-label {
+  font-size: 12px;
+  color: #94a3b8;
+  font-weight: 500;
+}
+
+.summary-value {
+  font-size: 13px;
+  color: #1e293b;
+  font-weight: 600;
+}
+
+/* 条款 */
 .terms-section {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
 }
 
 .checkbox-wrapper {
   display: flex;
   align-items: flex-start;
-  gap: 12px;
+  gap: 10px;
   cursor: pointer;
 }
 
@@ -999,58 +1053,197 @@ const handleSubmit = async () => {
 
 .checkbox-custom {
   flex-shrink: 0;
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  border: 1.5px solid #cbd5e1;
+  background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease;
+  margin-top: 2px;
 }
 
 .checkbox-input:checked + .checkbox-custom {
-  background: linear-gradient(135deg, #6366f1, #8b5cf6);
-  border-color: transparent;
+  background: #2563eb;
+  border-color: #2563eb;
 }
 
 .checkbox-input:checked + .checkbox-custom::after {
   content: '';
-  width: 10px;
-  height: 6px;
+  width: 9px;
+  height: 5px;
   border-left: 2px solid white;
   border-bottom: 2px solid white;
   transform: rotate(-45deg) translateY(-1px);
 }
 
 .checkbox-label {
-  font-size: 0.875rem;
-  color: rgba(255, 255, 255, 0.7);
+  font-size: 13px;
+  color: #64748b;
   line-height: 1.5;
 }
 
-.link {
-  color: white;
-  text-decoration: underline;
-  font-weight: 500;
-  transition: opacity 0.2s ease;
-}
-
-.link-button,
-.footer-link-button {
+.proto-link {
   padding: 0;
   border: 0;
   background: transparent;
   font: inherit;
-  line-height: inherit;
+  color: #2563eb;
+  font-weight: 600;
   cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 
-.link:hover {
+.proto-link:hover {
   opacity: 0.8;
 }
 
+/* ═══════════════════════
+   按钮组
+   ═══════════════════════ */
+.button-group {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 28px;
+}
+
+.btn-primary,
+.btn-secondary {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 13px 20px;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  border: none;
+}
+
+.btn-primary {
+  background: #2563eb;
+  color: #fff;
+  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #1d4ed8;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
+}
+
+.btn-primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn-secondary {
+  background: #f8fafc;
+  color: #475569;
+  border: 1.5px solid #e2e8f0;
+}
+
+.btn-secondary:hover {
+  background: #f1f5f9;
+  border-color: #cbd5e1;
+}
+
+/* 提交成功 */
+.approval-notice {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  padding: 32px 0 28px;
+  text-align: center;
+}
+
+.approval-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  background: #eff6ff;
+  border-radius: 16px;
+  color: #2563eb;
+}
+
+.approval-title {
+  margin: 0;
+  color: #0f172a;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.approval-message {
+  margin: 0;
+  color: #475569;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.approval-hint {
+  margin: 0;
+  color: #94a3b8;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.back-to-login-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 11px 28px;
+  background: #2563eb;
+  color: #fff;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  margin-top: 8px;
+  transition: all 0.25s ease;
+}
+
+.back-to-login-btn:hover {
+  background: #1d4ed8;
+  transform: translateY(-1px);
+}
+
+/* 底部返回登录 */
+.reg-footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  border-top: 1px solid #f1f5f9;
+  padding-top: 24px;
+}
+
+.reg-footer .footer-text {
+  font-size: 13px;
+  color: #94a3b8;
+}
+
+.reg-footer .footer-link {
+  font-size: 13px;
+  font-weight: 600;
+  color: #2563eb;
+  text-decoration: none;
+  transition: opacity 0.2s;
+}
+
+.reg-footer .footer-link:hover {
+  opacity: 0.8;
+}
+
+/* 协议弹窗 */
 .protocol-content {
   max-height: 58vh;
   overflow-y: auto;
@@ -1092,9 +1285,6 @@ const handleSubmit = async () => {
   font-size: 16px;
   font-weight: 700;
   letter-spacing: 2px;
-  background: linear-gradient(135deg, #3f5d75, #4a6d87);
-  border: none;
-  box-shadow: 0 8px 16px -4px rgba(63, 93, 117, 0.3);
 }
 
 :global(.register-protocol-dialog .el-dialog__header) {
@@ -1116,177 +1306,25 @@ const handleSubmit = async () => {
   padding: 0 28px 24px;
 }
 
-/* 汇总部分 */
-.summary-section {
-  padding: 16px;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.summary-title {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.8);
-  margin: 0 0 12px;
-}
-
-.summary-grid {
-  display: grid;
-  gap: 12px;
-}
-
-.summary-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.summary-label {
-  font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.summary-value {
-  font-size: 0.875rem;
-  color: white;
-  font-weight: 500;
-}
-
-/* 按钮组 */
-.button-group {
-  display: flex;
-  gap: 12px;
-  margin-top: 8px;
-}
-
-.btn-primary,
-.btn-secondary {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 14px 20px;
-  border-radius: 12px;
-  font-size: 0.875rem;
-  font-weight: 600;
-  font-family: inherit;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 2.2);
-}
-
-.btn-primary {
-  position: relative;
-  overflow: hidden;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15));
-  border: none;
-  color: white;
-  box-shadow: 
-    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
-    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.3);
-}
-
-.btn-primary:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 
-    inset 2px 2px 1px 0 rgba(255, 255, 255, 0.6),
-    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.4),
-    0 10px 30px rgba(99, 102, 241, 0.3);
-}
-
-.btn-primary:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.btn-secondary {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.3);
-}
-
-/* 页脚 */
-.card-footer {
-  text-align: center;
-  margin-top: 24px;
-}
-
-.footer-text {
-  font-size: 0.875rem;
-  color: rgba(255, 255, 255, 0.7);
-  margin: 0 0 12px;
-}
-
-.footer-link {
-  color: white;
-  font-weight: 600;
-  text-decoration: none;
-  margin-left: 4px;
-  transition: opacity 0.2s ease;
-}
-
-.footer-link:hover {
-  opacity: 0.8;
-}
-
-.footer-links {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-}
-
-.footer-small-link {
-  font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.4);
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
-
-.footer-small-link:hover {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.footer-divider {
-  color: rgba(255, 255, 255, 0.3);
-}
-
-/* 响应式 */
-@media (max-width: 640px) {
-  .register-container {
-    padding: 16px;
+/* ═══════════════════════
+   响应式
+   ═══════════════════════ */
+@media (max-width: 900px) {
+  .reg-left-brand {
+    display: none;
   }
-
-  .glass-card {
-    border-radius: 20px;
+  .reg-right-form {
+    padding: 40px 32px;
   }
+}
 
-  .card-header {
-    padding: 24px 20px 20px;
+@media (max-width: 480px) {
+  .reg-right-form {
+    padding: 32px 20px;
   }
-
-  .card-body {
-    padding: 20px;
-  }
-
-  .welcome-title {
-    font-size: 2rem;
-  }
-
   .form-row {
     grid-template-columns: 1fr;
   }
-
-  .progress-steps {
-    gap: 8px;
-  }
-
   .step-label {
     display: none;
   }