From b82a5a464f35248d09abb4f78738b0acd9731409 Mon Sep 17 00:00:00 2001
From: Nelson <1475262689@qq.com>
Date: Fri, 10 Jul 2026 14:34:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E5=AD=A6=E5=91=98?=
 =?UTF-8?q?=E7=AB=AF=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2=E2=80=94=E2=80=94?=
 =?UTF-8?q?=E4=B8=93=E4=B8=9A=E7=A7=BB=E5=8A=A8=E7=AB=AFH5=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LoginPanel.vue 完全重写：
- 品牌标题区：绿色圆角图标+主标题+副标题+装饰盾牌
- 表单卡片：白色圆角卡片承载手机号+短信验证码
- 图形验证码按需弹出：点击发送验证码时弹出模态弹窗
- 用户协议：自定义checkbox+协议弹窗（Tab切换）
- 倒计时持久化：localStorage按手机号存储，刷新不重置
- Toast提示：发送成功/失败/登录错误
- 辅助入口：收不到验证码/登录遇到问题弹窗
- 底部安全说明：盾牌图标+信任提示
- 输入过滤：只允许数字，16px字号防iOS缩放
- 响应式：最大420px居中，safe-area适配

styles.css：移除旧登录样式，保留全局基础
---
 .../user-client/src/components/LoginPanel.vue | 1244 +++++++++++++++--
 .../apps/user-client/src/styles.css           |  162 +--
 2 files changed, 1163 insertions(+), 243 deletions(-)

diff --git a/ai_knowledge_base_v2/apps/user-client/src/components/LoginPanel.vue b/ai_knowledge_base_v2/apps/user-client/src/components/LoginPanel.vue
index 47c9eec..e75e1bf 100644
--- a/ai_knowledge_base_v2/apps/user-client/src/components/LoginPanel.vue
+++ b/ai_knowledge_base_v2/apps/user-client/src/components/LoginPanel.vue
@@ -1,145 +1,1221 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { api, saveToken } from "../services/api";
 import type { UserProfile } from "../types/api";
 
-const emit = defineEmits<{
-  loggedIn: [user: UserProfile];
-}>();
+const emit = defineEmits<{ loggedIn: [user: UserProfile] }>();
 
+// ── 表单状态 ──────────────────────────────────────────────
 const phone = ref("");
-const code = ref("");
-const captchaId = ref("");
-const captchaCode = ref("");
-const captchaImage = ref("");
+const smsCode = ref("");
+const agreed = ref(false);
 const loading = ref(false);
-const captchaLoading = ref(false);
-const message = ref("请先完成图形验证码，再获取短信验证码。");
-const errorDialog = ref("");
+const submitting = ref(false);
+
+// ── 校验 ──────────────────────────────────────────────────
+const phoneError = ref("");
+const phoneTouched = ref(false);
+
+function validatePhone() {
+  if (phone.value.length > 0 && phone.value.length < 11) {
+    phoneError.value = "请输入正确的手机号码";
+  } else {
+    phoneError.value = "";
+  }
+}
+
+function onPhoneBlur() {
+  phoneTouched.value = true;
+  validatePhone();
+}
+
+function filterNumeric(value: string, max: number) {
+  return value.replace(/\D/g, "").slice(0, max);
+}
+
+function onPhoneInput(e: Event) {
+  phone.value = filterNumeric((e.target as HTMLInputElement).value, 11);
+  validatePhone();
+}
+
+function onSmsCodeInput(e: Event) {
+  smsCode.value = filterNumeric((e.target as HTMLInputElement).value, 8);
+}
+
+const canSendSms = computed(() => {
+  return phone.value.length === 11 && countdown.value <= 0 && !loading.value;
+});
+
+const canLogin = computed(() => {
+  return phone.value.length === 11 && smsCode.value.length >= 4 && agreed.value && !submitting.value;
+});
+
+// ── 倒计时持久化 ────────────────────────────────────────
 const countdown = ref(0);
 let countdownTimer: ReturnType<typeof setInterval> | null = null;
 
-function startCountdown(seconds = 60) {
-  countdown.value = seconds;
+function startCountdown() {
+  localStorage.setItem(`sms_countdown_${phone.value}`, String(Date.now()));
+  countdown.value = 60;
   if (countdownTimer) clearInterval(countdownTimer);
   countdownTimer = setInterval(() => {
     countdown.value--;
-    if (countdown.value <= 0 && countdownTimer) {
-      clearInterval(countdownTimer);
+    if (countdown.value <= 0) {
+      if (countdownTimer) clearInterval(countdownTimer);
       countdownTimer = null;
+      localStorage.removeItem(`sms_countdown_${phone.value}`);
     }
   }, 1000);
 }
 
+function restoreCountdown() {
+  if (phone.value.length === 11) {
+    const ts = localStorage.getItem(`sms_countdown_${phone.value}`);
+    if (ts) {
+      const elapsed = Math.floor((Date.now() - Number(ts)) / 1000);
+      const remaining = 60 - elapsed;
+      if (remaining > 0) {
+        countdown.value = remaining;
+        if (countdownTimer) clearInterval(countdownTimer);
+        countdownTimer = setInterval(() => {
+          countdown.value--;
+          if (countdown.value <= 0) {
+            if (countdownTimer) clearInterval(countdownTimer);
+            countdownTimer = null;
+            localStorage.removeItem(`sms_countdown_${phone.value}`);
+          }
+        }, 1000);
+      } else {
+        localStorage.removeItem(`sms_countdown_${phone.value}`);
+        countdown.value = 0;
+      }
+    }
+  } else {
+    countdown.value = 0;
+  }
+}
+
+watch(phone, () => {
+  restoreCountdown();
+});
+
+onMounted(() => {
+  restoreCountdown();
+});
+
 onUnmounted(() => {
   if (countdownTimer) clearInterval(countdownTimer);
 });
 
-onMounted(() => {
-  void loadCaptcha();
+// ── Toast ─────────────────────────────────────────────────
+const toastVisible = ref(false);
+const toastMessage = ref("");
+let toastTimer: ReturnType<typeof setTimeout> | null = null;
+
+function showToast(msg: string) {
+  toastMessage.value = msg;
+  toastVisible.value = true;
+  if (toastTimer) clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => {
+    toastVisible.value = false;
+  }, 3000);
+}
+
+onUnmounted(() => {
+  if (toastTimer) clearTimeout(toastTimer);
 });
 
-async function loadCaptcha() {
+// ── 图形验证码弹窗 ───────────────────────────────────────
+const captchaModalVisible = ref(false);
+const captchaId = ref("");
+const captchaImage = ref("");
+const captchaCodeInput = ref("");
+const captchaLoading = ref(false);
+const captchaError = ref("");
+const captchaSubmitting = ref(false);
+
+async function openCaptchaModal() {
+  phoneTouched.value = true;
+  validatePhone();
+  if (phone.value.length !== 11) return;
+
+  captchaCodeInput.value = "";
+  captchaError.value = "";
+  captchaModalVisible.value = true;
+
+  await loadCaptchaImage();
+}
+
+async function loadCaptchaImage() {
   captchaLoading.value = true;
+  captchaError.value = "";
   try {
     const result = await api.captcha();
     captchaId.value = result.captchaId;
     captchaImage.value = result.imageBase64;
-    captchaCode.value = "";
-  } catch (error) {
-    message.value = error instanceof Error ? error.message : "图形验证码加载失败";
+    captchaCodeInput.value = "";
+  } catch (err) {
+    captchaError.value = err instanceof Error ? err.message : "图形验证码加载失败";
   } finally {
     captchaLoading.value = false;
   }
 }
 
-async function sendCode() {
-  if (!captchaId.value || captchaCode.value.length < 4) {
-    showError("请先输入图形验证码");
+async function confirmCaptchaAndSend() {
+  if (!captchaCodeInput.value) {
+    captchaError.value = "请输入图形验证码";
     return;
   }
-  loading.value = true;
-  message.value = "";
+  captchaSubmitting.value = true;
+  captchaError.value = "";
   try {
-    await api.sendSms(phone.value, captchaId.value, captchaCode.value);
-    message.value = "短信验证码已发送，请查收。";
-    startCountdown(60);
-    await loadCaptcha();
-  } catch (error) {
-    showError(error instanceof Error ? error.message : "发送失败");
-    await loadCaptcha();
+    await api.sendSms(phone.value, captchaId.value, captchaCodeInput.value);
+    captchaModalVisible.value = false;
+    startCountdown();
+    showToast("验证码已发送，请注意查收");
+  } catch (err) {
+    captchaError.value = err instanceof Error ? err.message : "发送失败，请重试";
+    await loadCaptchaImage();
   } finally {
-    loading.value = false;
+    captchaSubmitting.value = false;
   }
 }
 
-async function login() {
-  loading.value = true;
-  message.value = "";
+function closeCaptchaModal() {
+  captchaModalVisible.value = false;
+}
+
+// ── 发送短信（入口） ─────────────────────────────────────
+function onSendSms() {
+  if (!canSendSms.value) return;
+  openCaptchaModal();
+}
+
+// ── 登录 ──────────────────────────────────────────────────
+const agreementShaking = ref(false);
+
+async function onLogin() {
+  if (!agreed.value) {
+    agreementShaking.value = true;
+    showToast("请先同意用户协议");
+    setTimeout(() => {
+      agreementShaking.value = false;
+    }, 600);
+    return;
+  }
+  if (smsCode.value.length < 4) {
+    showToast("请输入正确的短信验证码");
+    return;
+  }
+  submitting.value = true;
   try {
-    const result = await api.login(phone.value, code.value);
+    const result = await api.login(phone.value, smsCode.value);
     saveToken(result.token);
     emit("loggedIn", result.user);
-  } catch (error) {
-    message.value = error instanceof Error ? error.message : "登录失败";
+  } catch (err) {
+    showToast(err instanceof Error ? err.message : "登录失败");
   } finally {
-    loading.value = false;
+    submitting.value = false;
   }
 }
 
-function showError(text: string) {
-  message.value = text;
-  errorDialog.value = text;
+// ── 协议弹窗 ──────────────────────────────────────────────
+const agreementModalVisible = ref(false);
+const agreementTab = ref<"user" | "privacy">("user");
+
+function openAgreement(type: "user" | "privacy") {
+  agreementTab.value = type;
+  agreementModalVisible.value = true;
+}
+
+// ── 辅助弹窗 ──────────────────────────────────────────────
+const helperModalVisible = ref(false);
+const helperModalTitle = ref("");
+const helperModalContent = ref("");
+
+function openHelper(type: "no-code" | "login-issue") {
+  if (type === "no-code") {
+    helperModalTitle.value = "收不到验证码？";
+    helperModalContent.value =
+      "1. 请检查手机号是否输入正确\n2. 请查看手机短信是否被拦截或放入垃圾箱\n3. 部分运营商短信可能有延迟，请耐心等待 1-2 分钟\n4. 如果使用了虚拟号码或海外号码，可能无法接收\n5. 请确认手机信号正常，未处于勿扰模式";
+  } else {
+    helperModalTitle.value = "登录遇到问题";
+    helperModalContent.value = "如果持续无法登录，请联系管理员获取帮助。";
+  }
+  helperModalVisible.value = true;
+}
+
+// ── 手机号清空 ────────────────────────────────────────────
+function clearPhone() {
+  phone.value = "";
+  phoneError.value = "";
 }
 </script>
 
 <template>
-  <section class="login-panel">
-    <h1>大本营答疑助手</h1>
-    <p>有问题随时问，帮你快速找到答案。</p>
+  <div class="login-page">
+    <!-- 品牌标题区域 -->
+    <div class="brand-header">
+      <div class="brand-icon">
+        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+      </div>
+      <h1 class="brand-title">大本营答疑助手</h1>
+      <p class="brand-subtitle">登录后即可开始提问，快速找到你需要的答案</p>
+      <!-- 右上角装饰盾牌 -->
+      <svg class="brand-shield-deco" width="120" height="120" viewBox="0 0 24 24" fill="none" stroke="#14221D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+      </svg>
+    </div>
 
-    <label>
-      手机号
-      <input v-model="phone" inputmode="numeric" maxlength="11" placeholder="请输入手机号" />
-    </label>
+    <!-- 表单卡片 -->
+    <div class="form-card">
+      <!-- 手机号 -->
+      <div class="field">
+        <label class="field-label">手机号</label>
+        <div class="input-wrapper" :class="{ 'input-focused': false, 'input-error': phoneError }">
+          <svg class="input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#98A39F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
+            <line x1="12" y1="18" x2="12" y2="18" />
+          </svg>
+          <input
+            v-model="phone"
+            class="input-field"
+            :class="{ 'has-clear': phone.length > 0 }"
+            type="tel"
+            inputmode="numeric"
+            maxlength="11"
+            placeholder="请输入手机号"
+            @input="onPhoneInput"
+            @blur="onPhoneBlur"
+          />
+          <button v-if="phone.length > 0" type="button" class="clear-btn" @click="clearPhone">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#98A39F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18" />
+              <line x1="6" y1="6" x2="18" y2="18" />
+            </svg>
+          </button>
+        </div>
+        <p v-if="phoneTouched && phoneError" class="field-error">{{ phoneError }}</p>
+      </div>
 
-    <label>
-      图形验证码
-      <div class="captcha-row">
-        <input v-model="captchaCode" inputmode="text" maxlength="8" placeholder="请输入图形验证码" />
-        <button type="button" class="captcha-image" :disabled="captchaLoading" @click="loadCaptcha">
-          <img v-if="captchaImage" :src="captchaImage" alt="图形验证码" />
-          <span v-else>{{ captchaLoading ? "加载中" : "刷新" }}</span>
+      <!-- 短信验证码 -->
+      <div class="field">
+        <label class="field-label">短信验证码</label>
+        <div class="input-wrapper sms-row">
+          <svg class="input-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#98A39F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+          </svg>
+          <input
+            v-model="smsCode"
+            class="input-field sms-input"
+            type="tel"
+            inputmode="numeric"
+            maxlength="8"
+            placeholder="请输入短信验证码"
+            @input="onSmsCodeInput"
+          />
+          <div class="sms-divider"></div>
+          <button
+            type="button"
+            class="sms-btn"
+            :disabled="!canSendSms"
+            @click="onSendSms"
+          >
+            {{ countdown > 0 ? `${countdown}s 后重发` : "发送验证码" }}
+          </button>
+        </div>
+      </div>
+
+      <!-- 安全提示 -->
+      <div class="security-hint">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#98A39F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        </svg>
+        <span>为保障账号安全，必要时将进行图形验证</span>
+      </div>
+
+      <!-- 用户协议 -->
+      <div class="agreement-row" :class="{ 'agreement-shake': agreementShaking }">
+        <button type="button" class="agreement-toggle" @click="agreed = !agreed">
+          <span class="checkbox" :class="{ checked: agreed }">
+            <svg v-if="agreed" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          </span>
+          <span class="agreement-text">
+            我已阅读并同意
+            <a href="javascript:void(0)" @click.stop="openAgreement('user')">《用户协议》</a>
+            和
+            <a href="javascript:void(0)" @click.stop="openAgreement('privacy')">《隐私政策》</a>
+          </span>
         </button>
       </div>
-    </label>
 
-    <label>
-      短信验证码
-      <div class="code-row">
-        <input v-model="code" inputmode="numeric" maxlength="8" placeholder="请输入短信验证码" />
-        <button
-          type="button"
-          class="secondary"
-          :disabled="loading || countdown > 0 || phone.length < 11 || captchaCode.length < 4"
-          @click="sendCode"
-        >
-          {{ countdown > 0 ? `${countdown} 秒后重发` : "发送" }}
-        </button>
-      </div>
-    </label>
+      <!-- 主按钮 -->
+      <button
+        type="button"
+        class="submit-btn"
+        :class="{ disabled: !canLogin, loading: submitting }"
+        :disabled="!canLogin && !submitting"
+        @click="onLogin"
+      >
+        <span v-if="submitting" class="btn-spinner"></span>
+        {{ submitting ? "正在进入..." : "立即进入" }}
+      </button>
 
-    <button type="button" class="primary" :disabled="loading || phone.length < 11 || code.length < 4" @click="login">
-      {{ loading ? "处理中..." : "立即进入" }}
-    </button>
-    <div class="form-tip">{{ message }}</div>
-
-    <div v-if="errorDialog" class="dialog-mask" role="alertdialog" aria-modal="true" aria-labelledby="login-error-title">
-      <div class="dialog-box">
-        <strong id="login-error-title">无法发送验证码</strong>
-        <p>{{ errorDialog }}</p>
-        <button type="button" class="primary" @click="errorDialog = ''">知道了</button>
+      <!-- 辅助入口 -->
+      <div class="helper-links">
+        <button type="button" class="helper-link" @click="openHelper('no-code')">收不到验证码？</button>
+        <span class="helper-divider"></span>
+        <button type="button" class="helper-link" @click="openHelper('login-issue')">登录遇到问题</button>
       </div>
     </div>
-  </section>
+
+    <!-- 底部安全说明 -->
+    <div class="footer-security">
+      <div class="footer-line">
+        <span class="footer-line-left"></span>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#98A39F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+        </svg>
+        <span class="footer-line-right"></span>
+      </div>
+      <p class="footer-text">仅用于身份验证与账号登录，不会泄露你的信息</p>
+    </div>
+
+    <!-- ── Toast ─────────────────────────────────────────── -->
+    <Transition name="toast">
+      <div v-if="toastVisible" class="toast">{{ toastMessage }}</div>
+    </Transition>
+
+    <!-- ── 图形验证码弹窗 ─────────────────────────────────── -->
+    <Transition name="modal">
+      <div v-if="captchaModalVisible" class="modal-mask" @click.self="closeCaptchaModal">
+        <div class="modal-card captcha-card">
+          <h3 class="modal-title">安全验证</h3>
+          <p class="modal-desc">请输入图形验证码以继续发送短信</p>
+          <div class="captcha-image-row">
+            <div class="captcha-image-box" @click="loadCaptchaImage">
+              <img v-if="captchaImage && !captchaLoading" :src="'data:image/png;base64,' + captchaImage" alt="图形验证码" class="captcha-img" />
+              <div v-else class="captcha-img-placeholder">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#98A39F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="spin-icon">
+                  <path d="M23 4v6h-6" />
+                  <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+                </svg>
+              </div>
+            </div>
+            <button type="button" class="captcha-refresh-btn" @click="loadCaptchaImage" :disabled="captchaLoading">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#66756F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M23 4v6h-6" />
+                <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+              </svg>
+              <span>换一张</span>
+            </button>
+          </div>
+          <input
+            v-model="captchaCodeInput"
+            class="captcha-input"
+            type="tel"
+            inputmode="text"
+            maxlength="8"
+            placeholder="请输入图形验证码"
+            @keydown.enter="confirmCaptchaAndSend"
+          />
+          <p v-if="captchaError" class="captcha-error">{{ captchaError }}</p>
+          <button
+            type="button"
+            class="modal-confirm-btn"
+            :disabled="captchaSubmitting || !captchaCodeInput"
+            @click="confirmCaptchaAndSend"
+          >
+            {{ captchaSubmitting ? "发送中..." : "确认发送" }}
+          </button>
+          <button type="button" class="modal-cancel-btn" @click="closeCaptchaModal">取消</button>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- ── 协议弹窗 ───────────────────────────────────────── -->
+    <Transition name="modal">
+      <div v-if="agreementModalVisible" class="modal-mask" @click.self="agreementModalVisible = false">
+        <div class="modal-card agreement-card">
+          <div class="agreement-tabs">
+            <button
+              type="button"
+              class="agreement-tab"
+              :class="{ active: agreementTab === 'user' }"
+              @click="agreementTab = 'user'"
+            >
+              用户协议
+            </button>
+            <button
+              type="button"
+              class="agreement-tab"
+              :class="{ active: agreementTab === 'privacy' }"
+              @click="agreementTab = 'privacy'"
+            >
+              隐私政策
+            </button>
+          </div>
+          <div class="agreement-content">
+            <template v-if="agreementTab === 'user'">
+              <h4>用户协议</h4>
+              <p>更新日期：2025 年 1 月 1 日</p>
+              <p><strong>1. 服务说明</strong></p>
+              <p>欢迎使用大本营答疑助手。本服务旨在为用户提供智能问答、知识查询等功能。用户在使用本服务前，应当仔细阅读并充分理解本协议所有条款。</p>
+              <p><strong>2. 用户账号</strong></p>
+              <p>用户需使用真实手机号注册登录。用户有责任保管好自己的账号和密码，对账号下的所有活动承担法律责任。</p>
+              <p><strong>3. 使用规范</strong></p>
+              <p>用户不得利用本服务从事违法违规活动，不得干扰服务的正常运行，不得侵犯他人的合法权益。</p>
+              <p><strong>4. 免责声明</strong></p>
+              <p>本服务提供的信息仅供参考，不构成任何专业建议。对于因使用本服务而产生的任何损失，我们不承担责任。</p>
+            </template>
+            <template v-else>
+              <h4>隐私政策</h4>
+              <p>更新日期：2025 年 1 月 1 日</p>
+              <p><strong>1. 信息收集</strong></p>
+              <p>我们仅收集为提供服务所必需的信息，包括手机号码、登录状态等。我们不会收集与服务无关的个人信息。</p>
+              <p><strong>2. 信息使用</strong></p>
+              <p>收集的信息仅用于身份验证、账号管理和服务改进。我们不会将您的个人信息出售或分享给第三方。</p>
+              <p><strong>3. 信息安全</strong></p>
+              <p>我们采用行业标准的安全措施保护您的个人信息，防止未经授权的访问、使用或泄露。</p>
+              <p><strong>4. 用户权利</strong></p>
+              <p>您有权访问、更正、删除您的个人信息。如需行使相关权利，请通过应用内反馈渠道联系我们。</p>
+            </template>
+          </div>
+          <button type="button" class="modal-confirm-btn" @click="agreementModalVisible = false">我已知晓</button>
+        </div>
+      </div>
+    </Transition>
+
+    <!-- ── 辅助弹窗 ───────────────────────────────────────── -->
+    <Transition name="modal">
+      <div v-if="helperModalVisible" class="modal-mask" @click.self="helperModalVisible = false">
+        <div class="modal-card helper-card">
+          <h3 class="modal-title">{{ helperModalTitle }}</h3>
+          <div class="helper-content">
+            <p v-for="(line, i) in helperModalContent.split('\n')" :key="i">{{ line }}</p>
+          </div>
+          <button type="button" class="modal-confirm-btn" @click="helperModalVisible = false">我知道了</button>
+        </div>
+      </div>
+    </Transition>
+  </div>
 </template>
+
+<style scoped>
+/* ── 页面容器 ──────────────────────────────────────────── */
+.login-page {
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 60px 20px 0;
+  padding-bottom: env(safe-area-inset-bottom, 20px);
+  background: #f4f7f5;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+}
+
+/* ── 品牌标题区域 ───────────────────────────────────────── */
+.brand-header {
+  position: relative;
+  text-align: center;
+  margin-bottom: 32px;
+  width: 100%;
+  max-width: 420px;
+}
+
+.brand-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, #42a982, #2f8f6d);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+  box-shadow: 0 4px 12px rgba(47, 143, 109, 0.25);
+}
+
+.brand-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #14221d;
+  margin: 0 0 8px;
+  line-height: 1.3;
+}
+
+.brand-subtitle {
+  font-size: 14px;
+  color: #66756f;
+  margin: 0;
+  line-height: 1.5;
+  padding: 0 10px;
+}
+
+.brand-shield-deco {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  opacity: 0.08;
+  pointer-events: none;
+}
+
+/* ── 表单卡片 ───────────────────────────────────────────── */
+.form-card {
+  width: 100%;
+  max-width: 420px;
+  background: #fff;
+  border-radius: 20px;
+  border: 1px solid #dce6e2;
+  box-shadow: 0 4px 24px rgba(20, 34, 29, 0.06);
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+/* ── 字段 ──────────────────────────────────────────────── */
+.field {
+  margin-bottom: 20px;
+}
+
+.field-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  color: #14221d;
+  margin-bottom: 8px;
+}
+
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 48px;
+  border: 1px solid #dce6e2;
+  border-radius: 12px;
+  background: #fff;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  overflow: hidden;
+}
+
+.input-wrapper:focus-within {
+  border-color: #42a982;
+  box-shadow: 0 0 0 3px rgba(66, 169, 130, 0.1);
+}
+
+.input-wrapper.input-error {
+  border-color: #d85b5b;
+}
+
+.input-wrapper.input-error:focus-within {
+  border-color: #d85b5b;
+  box-shadow: 0 0 0 3px rgba(216, 91, 91, 0.1);
+}
+
+.input-icon {
+  position: absolute;
+  left: 14px;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
+.input-field {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 16px;
+  color: #14221d;
+  padding: 0 14px 0 42px;
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+.input-field::placeholder {
+  color: #b0bbb7;
+}
+
+.input-field.has-clear {
+  padding-right: 42px;
+}
+
+.clear-btn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.clear-btn:active {
+  background: #f0f4f2;
+}
+
+.field-error {
+  font-size: 13px;
+  color: #d85b5b;
+  margin: 6px 0 0;
+  padding-left: 2px;
+}
+
+/* ── 短信验证码行 ────────────────────────────────────────── */
+.sms-row {
+  display: flex;
+  align-items: stretch;
+}
+
+.sms-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.sms-divider {
+  width: 1px;
+  background: #dce6e2;
+  flex-shrink: 0;
+  align-self: center;
+  height: 20px;
+}
+
+.sms-btn {
+  flex-shrink: 0;
+  border: none;
+  background: none;
+  font-size: 14px;
+  font-weight: 600;
+  color: #42a982;
+  cursor: pointer;
+  padding: 0 12px;
+  white-space: nowrap;
+  font-family: inherit;
+  height: 100%;
+  transition: opacity 0.2s;
+}
+
+.sms-btn:disabled {
+  color: #98a39f;
+  cursor: not-allowed;
+}
+
+/* ── 安全提示 ────────────────────────────────────────────── */
+.security-hint {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 20px;
+}
+
+.security-hint svg {
+  flex-shrink: 0;
+}
+
+.security-hint span {
+  font-size: 12px;
+  color: #98a39f;
+  line-height: 1.5;
+}
+
+/* ── 用户协议 ───────────────────────────────────────────── */
+.agreement-row {
+  margin-bottom: 20px;
+}
+
+.agreement-toggle {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  width: 100%;
+  text-align: left;
+  font-family: inherit;
+}
+
+.checkbox {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  border: 1.5px solid #dce6e2;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s, border-color 0.2s;
+  margin-top: 1px;
+}
+
+.checkbox.checked {
+  background: #42a982;
+  border-color: #42a982;
+}
+
+.agreement-text {
+  font-size: 13px;
+  color: #66756f;
+  line-height: 1.6;
+}
+
+.agreement-text a {
+  color: #42a982;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.agreement-text a:active {
+  opacity: 0.7;
+}
+
+.agreement-shake {
+  animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+  0%,
+  100% { transform: translateX(0); }
+  20% { transform: translateX(-6px); }
+  40% { transform: translateX(6px); }
+  60% { transform: translateX(-4px); }
+  80% { transform: translateX(4px); }
+}
+
+/* ── 主按钮 ─────────────────────────────────────────────── */
+.submit-btn {
+  width: 100%;
+  height: 52px;
+  border-radius: 14px;
+  border: none;
+  background: linear-gradient(135deg, #42a982, #2f8f6d);
+  color: #fff;
+  font-size: 17px;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  box-shadow: 0 4px 12px rgba(47, 143, 109, 0.25);
+  transition: opacity 0.2s, transform 0.1s;
+  font-family: inherit;
+}
+
+.submit-btn:active:not(.disabled):not(.loading) {
+  transform: scale(0.98);
+}
+
+.submit-btn.disabled {
+  background: #e8f0ed;
+  color: #98a39f;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.submit-btn.loading {
+  opacity: 0.85;
+  cursor: wait;
+}
+
+.btn-spinner {
+  width: 18px;
+  height: 18px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── 辅助入口 ───────────────────────────────────────────── */
+.helper-links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.helper-link {
+  font-size: 13px;
+  color: #66756f;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-family: inherit;
+}
+
+.helper-link:active {
+  opacity: 0.7;
+}
+
+.helper-divider {
+  width: 1px;
+  height: 12px;
+  background: #dce6e2;
+}
+
+/* ── 底部安全说明 ───────────────────────────────────────── */
+.footer-security {
+  width: 100%;
+  max-width: 420px;
+  text-align: center;
+  margin-top: 32px;
+  padding-bottom: 24px;
+}
+
+.footer-line {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.footer-line-left,
+.footer-line-right {
+  flex: 1;
+  height: 1px;
+  background: #dce6e2;
+}
+
+.footer-text {
+  font-size: 12px;
+  color: #98a39f;
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* ── Toast ──────────────────────────────────────────────── */
+.toast {
+  position: fixed;
+  top: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(20, 34, 29, 0.85);
+  color: #fff;
+  font-size: 14px;
+  padding: 10px 20px;
+  border-radius: 10px;
+  z-index: 9999;
+  pointer-events: none;
+  max-width: 90vw;
+  text-align: center;
+  line-height: 1.5;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+}
+
+.toast-enter-active {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.toast-leave-active {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+
+.toast-enter-from {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-12px);
+}
+
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-12px);
+}
+
+/* ── 模态弹窗通用 ───────────────────────────────────────── */
+.modal-mask {
+  position: fixed;
+  inset: 0;
+  background: rgba(20, 34, 29, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 20px;
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
+.modal-card {
+  background: #fff;
+  border-radius: 20px;
+  width: 100%;
+  max-width: 340px;
+  padding: 28px 24px 24px;
+  box-sizing: border-box;
+  box-shadow: 0 12px 40px rgba(20, 34, 29, 0.15);
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #14221d;
+  margin: 0 0 8px;
+}
+
+.modal-desc {
+  font-size: 14px;
+  color: #66756f;
+  margin: 0 0 20px;
+}
+
+.modal-confirm-btn {
+  width: 100%;
+  height: 48px;
+  border-radius: 12px;
+  border: none;
+  background: linear-gradient(135deg, #42a982, #2f8f6d);
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: opacity 0.2s;
+  margin-top: 16px;
+}
+
+.modal-confirm-btn:disabled {
+  background: #e8f0ed;
+  color: #98a39f;
+  cursor: not-allowed;
+}
+
+.modal-cancel-btn {
+  width: 100%;
+  height: 44px;
+  border-radius: 12px;
+  border: none;
+  background: none;
+  color: #66756f;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  font-family: inherit;
+  margin-top: 8px;
+}
+
+.modal-cancel-btn:active {
+  opacity: 0.7;
+}
+
+.modal-enter-active {
+  transition: opacity 0.25s ease;
+}
+
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.modal-enter-active .modal-card {
+  transition: transform 0.25s ease, opacity 0.25s ease;
+}
+
+.modal-leave-active .modal-card {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.modal-enter-from {
+  opacity: 0;
+}
+
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .modal-card {
+  opacity: 0;
+  transform: scale(0.95) translateY(10px);
+}
+
+.modal-leave-to .modal-card {
+  opacity: 0;
+  transform: scale(0.95) translateY(10px);
+}
+
+/* ── 图形验证码弹窗 ─────────────────────────────────────── */
+.captcha-image-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.captcha-image-box {
+  flex: 1;
+  height: 48px;
+  border: 1px solid #dce6e2;
+  border-radius: 10px;
+  overflow: hidden;
+  cursor: pointer;
+  background: #f8fbf9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.captcha-img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+.captcha-img-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spin-icon {
+  animation: spin 1s linear infinite;
+}
+
+.captcha-refresh-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: #66756f;
+  font-size: 11px;
+  padding: 4px;
+  flex-shrink: 0;
+}
+
+.captcha-refresh-btn:active {
+  opacity: 0.7;
+}
+
+.captcha-refresh-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.captcha-input {
+  width: 100%;
+  height: 48px;
+  border: 1px solid #dce6e2;
+  border-radius: 12px;
+  padding: 0 14px;
+  font-size: 16px;
+  color: #14221d;
+  outline: none;
+  background: #fff;
+  box-sizing: border-box;
+  font-family: inherit;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.captcha-input:focus {
+  border-color: #42a982;
+  box-shadow: 0 0 0 3px rgba(66, 169, 130, 0.1);
+}
+
+.captcha-input::placeholder {
+  color: #b0bbb7;
+}
+
+.captcha-error {
+  font-size: 13px;
+  color: #d85b5b;
+  margin: 6px 0 0;
+}
+
+/* ── 协议弹窗 ───────────────────────────────────────────── */
+.agreement-card {
+  max-width: 380px;
+}
+
+.agreement-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid #dce6e2;
+  margin-bottom: 20px;
+}
+
+.agreement-tab {
+  flex: 1;
+  height: 44px;
+  border: none;
+  background: none;
+  font-size: 15px;
+  font-weight: 600;
+  color: #98a39f;
+  cursor: pointer;
+  position: relative;
+  font-family: inherit;
+  transition: color 0.2s;
+}
+
+.agreement-tab.active {
+  color: #42a982;
+}
+
+.agreement-tab.active::after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: 20%;
+  width: 60%;
+  height: 2px;
+  background: #42a982;
+  border-radius: 1px;
+}
+
+.agreement-content {
+  max-height: 40vh;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  font-size: 14px;
+  color: #66756f;
+  line-height: 1.7;
+}
+
+.agreement-content h4 {
+  font-size: 16px;
+  font-weight: 700;
+  color: #14221d;
+  margin: 0 0 8px;
+}
+
+.agreement-content p {
+  margin: 0 0 12px;
+}
+
+/* ── 辅助弹窗 ───────────────────────────────────────────── */
+.helper-card {
+  max-width: 340px;
+}
+
+.helper-content {
+  font-size: 14px;
+  color: #66756f;
+  line-height: 1.8;
+}
+
+.helper-content p {
+  margin: 0 0 4px;
+}
+</style>
diff --git a/ai_knowledge_base_v2/apps/user-client/src/styles.css b/ai_knowledge_base_v2/apps/user-client/src/styles.css
index 39c2054..a9202d7 100644
--- a/ai_knowledge_base_v2/apps/user-client/src/styles.css
+++ b/ai_knowledge_base_v2/apps/user-client/src/styles.css
@@ -51,167 +51,11 @@ button {
   color: #557066;
 }
 
+/* ── 登录页使用组件内 scoped 样式，全局仅保留基础重置 ── */
 .login-panel {
   height: 100%;
-  padding: 72px 24px 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 18px;
-  background: linear-gradient(180deg, #ffffff 0%, #f3faf7 100%);
-}
-
-.brand-mark {
-  width: 56px;
-  height: 56px;
-  display: grid;
-  place-items: center;
-  border-radius: 16px;
-  background: #0f8b6f;
-  color: #ffffff;
-  font-weight: 800;
-  letter-spacing: 0;
-}
-
-.login-panel h1 {
-  margin: 10px 0 0;
-  font-size: 28px;
-  line-height: 1.2;
-}
-
-.login-panel p {
-  margin: 0 0 18px;
-  color: #5f746c;
-}
-
-.login-panel label {
-  display: grid;
-  gap: 8px;
-  color: #40524b;
-  font-size: 14px;
-}
-
-.login-panel input,
-.composer textarea {
-  width: 100%;
-  border: 1px solid #cad8d2;
-  border-radius: 14px;
-  background: #ffffff;
-  color: #17211d;
-  outline: none;
-}
-
-.login-panel input {
-  height: 48px;
-  padding: 0 14px;
-}
-
-.login-panel input:focus,
-.composer textarea:focus {
-  border-color: #0f8b6f;
-  box-shadow: 0 0 0 3px rgba(15, 139, 111, 0.12);
-}
-
-.code-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 92px;
-  gap: 10px;
-}
-
-.captcha-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 128px;
-  gap: 10px;
-}
-
-.captcha-image {
-  height: 48px;
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid #cad8d2;
-  border-radius: 14px;
-  background: #ffffff;
-}
-
-.captcha-image img {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-}
-
-.captcha-image span {
-  color: #5f746c;
-  font-size: 13px;
-}
-
-.primary,
-.secondary,
-.send-btn,
-.stop-btn,
-.new-session-btn {
-  border: 0;
-  border-radius: 14px;
-  font-weight: 700;
-}
-
-.primary {
-  height: 50px;
-  margin-top: 8px;
-  background: #0f8b6f;
-  color: #ffffff;
-}
-
-.secondary {
-  background: #e5f3ef;
-  color: #0f735d;
-}
-
-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.52;
-}
-
-.form-tip {
-  min-height: 20px;
-  color: #657970;
-  font-size: 13px;
-}
-
-.dialog-mask {
-  position: absolute;
-  inset: 0;
-  z-index: 20;
-  display: grid;
-  place-items: center;
-  padding: 24px;
-  background: rgba(12, 24, 20, 0.42);
-}
-
-.dialog-box {
-  width: min(100%, 320px);
-  padding: 22px;
-  border-radius: 18px;
-  background: #ffffff;
-  box-shadow: 0 18px 48px rgba(15, 31, 26, 0.22);
-}
-
-.dialog-box strong {
-  display: block;
-  color: #17211d;
-  font-size: 18px;
-  line-height: 1.35;
-}
-
-.dialog-box p {
-  margin: 10px 0 18px;
-  color: #51655d;
-  font-size: 14px;
-  line-height: 1.7;
-}
-
-.dialog-box .primary {
-  width: 100%;
-  margin-top: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .topbar {