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

This reverts commit b82a5a464f35248d09abb4f78738b0acd9731409.
---
 .../user-client/src/components/LoginPanel.vue | 1244 ++---------------
 .../apps/user-client/src/styles.css           |  162 ++-
 2 files changed, 243 insertions(+), 1163 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 e75e1bf..47c9eec 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,1221 +1,145 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { onMounted, onUnmounted, ref } 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 smsCode = ref("");
-const agreed = ref(false);
+const code = ref("");
+const captchaId = ref("");
+const captchaCode = ref("");
+const captchaImage = ref("");
 const loading = ref(false);
-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 captchaLoading = ref(false);
+const message = ref("请先完成图形验证码，再获取短信验证码。");
+const errorDialog = ref("");
 const countdown = ref(0);
 let countdownTimer: ReturnType<typeof setInterval> | null = null;
 
-function startCountdown() {
-  localStorage.setItem(`sms_countdown_${phone.value}`, String(Date.now()));
-  countdown.value = 60;
+function startCountdown(seconds = 60) {
+  countdown.value = seconds;
   if (countdownTimer) clearInterval(countdownTimer);
   countdownTimer = setInterval(() => {
     countdown.value--;
-    if (countdown.value <= 0) {
-      if (countdownTimer) clearInterval(countdownTimer);
+    if (countdown.value <= 0 && 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);
 });
 
-// ── 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);
+onMounted(() => {
+  void 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() {
+async function loadCaptcha() {
   captchaLoading.value = true;
-  captchaError.value = "";
   try {
     const result = await api.captcha();
     captchaId.value = result.captchaId;
     captchaImage.value = result.imageBase64;
-    captchaCodeInput.value = "";
-  } catch (err) {
-    captchaError.value = err instanceof Error ? err.message : "图形验证码加载失败";
+    captchaCode.value = "";
+  } catch (error) {
+    message.value = error instanceof Error ? error.message : "图形验证码加载失败";
   } finally {
     captchaLoading.value = false;
   }
 }
 
-async function confirmCaptchaAndSend() {
-  if (!captchaCodeInput.value) {
-    captchaError.value = "请输入图形验证码";
+async function sendCode() {
+  if (!captchaId.value || captchaCode.value.length < 4) {
+    showError("请先输入图形验证码");
     return;
   }
-  captchaSubmitting.value = true;
-  captchaError.value = "";
+  loading.value = true;
+  message.value = "";
   try {
-    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();
+    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();
   } finally {
-    captchaSubmitting.value = false;
+    loading.value = false;
   }
 }
 
-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;
+async function login() {
+  loading.value = true;
+  message.value = "";
   try {
-    const result = await api.login(phone.value, smsCode.value);
+    const result = await api.login(phone.value, code.value);
     saveToken(result.token);
     emit("loggedIn", result.user);
-  } catch (err) {
-    showToast(err instanceof Error ? err.message : "登录失败");
+  } catch (error) {
+    message.value = error instanceof Error ? error.message : "登录失败";
   } finally {
-    submitting.value = false;
+    loading.value = false;
   }
 }
 
-// ── 协议弹窗 ──────────────────────────────────────────────
-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 = "";
+function showError(text: string) {
+  message.value = text;
+  errorDialog.value = text;
 }
 </script>
 
 <template>
-  <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>
+  <section class="login-panel">
+    <h1>大本营答疑助手</h1>
+    <p>有问题随时问，帮你快速找到答案。</p>
 
-    <!-- 表单卡片 -->
-    <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>
+      手机号
+      <input v-model="phone" inputmode="numeric" maxlength="11" placeholder="请输入手机号" />
+    </label>
 
-      <!-- 短信验证码 -->
-      <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>
+    <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>
         </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>
+    <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>
 
-      <!-- 辅助入口 -->
-      <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>
+    <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>
     </div>
-
-    <!-- 底部安全说明 -->
-    <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>
+  </section>
 </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 a9202d7..39c2054 100644
--- a/ai_knowledge_base_v2/apps/user-client/src/styles.css
+++ b/ai_knowledge_base_v2/apps/user-client/src/styles.css
@@ -51,11 +51,167 @@ button {
   color: #557066;
 }
 
-/* ── 登录页使用组件内 scoped 样式，全局仅保留基础重置 ── */
 .login-panel {
   height: 100%;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
+  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;
 }
 
 .topbar {