From f502e2d7136d27147544cf96e13a015c41944f68 Mon Sep 17 00:00:00 2001
From: Zyronon <Zyronon@163.com>
Date: Tue, 11 Nov 2025 02:09:54 +0800
Subject: [PATCH] save

---
 components.d.ts                   |   1 +
 src/components/base/BaseInput.vue |   1 +
 src/pages/user/PrivacyPolicy.vue  | 144 +++++
 src/pages/user/UserAgreement.vue  | 131 +++++
 src/pages/user/login.vue          | 948 ++++++++++++++----------------
 src/router.ts                     |   7 +-
 6 files changed, 717 insertions(+), 515 deletions(-)
 create mode 100644 src/pages/user/PrivacyPolicy.vue
 create mode 100644 src/pages/user/UserAgreement.vue

diff --git a/components.d.ts b/components.d.ts
index 59240612..a673d1c1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -56,6 +56,7 @@ declare module 'vue' {
     IconFluentChevronLeft28Filled: typeof import('~icons/fluent/chevron-left28-filled')['default']
     IconFluentDatabasePerson20Regular: typeof import('~icons/fluent/database-person20-regular')['default']
     IconFluentDelete20Regular: typeof import('~icons/fluent/delete20-regular')['default']
+    IconFluentDismiss12Regular: typeof import('~icons/fluent/dismiss12-regular')['default']
     IconFluentDismiss20Regular: typeof import('~icons/fluent/dismiss20-regular')['default']
     IconFluentDismissCircle16Regular: typeof import('~icons/fluent/dismiss-circle16-regular')['default']
     IconFluentDismissCircle20Filled: typeof import('~icons/fluent/dismiss-circle20-filled')['default']
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 5088bf0f..4a0533c7 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -198,6 +198,7 @@ const vFocus = {
     height: 1.5rem;
     color: var(--color-input-color);
     background: transparent;
+    width: 100%;
   }
 }
 </style>
diff --git a/src/pages/user/PrivacyPolicy.vue b/src/pages/user/PrivacyPolicy.vue
new file mode 100644
index 00000000..561d048e
--- /dev/null
+++ b/src/pages/user/PrivacyPolicy.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import BasePage from "@/components/BasePage.vue";
+import BackIcon from "@/components/BackIcon.vue";
+</script>
+
+<template>
+  <BasePage>
+    <div class="privacy-page">
+      <BackIcon />
+      <h1 class="page-title">隐私政策</h1>
+      <div class="content">
+        <section>
+          <h2>一、引言</h2>
+          <p>我们非常重视您的隐私保护。本隐私政策说明了我们如何收集、使用、存储和保护您的个人信息。在使用本应用之前，请您仔细阅读本隐私政策。</p>
+        </section>
+
+        <section>
+          <h2>二、信息收集</h2>
+          <p>我们可能收集以下信息：</p>
+          <p><strong>1. 账户信息：</strong>当您注册账户时，我们会收集您的手机号、邮箱地址、密码等信息。</p>
+          <p><strong>2. 学习数据：</strong>我们会记录您的学习进度、学习记录、练习数据等信息，以便为您提供个性化的学习服务。</p>
+          <p><strong>3. 设备信息：</strong>我们可能收集您的设备型号、操作系统版本、唯一设备标识符等信息，用于改善服务质量和安全性。</p>
+          <p><strong>4. 日志信息：</strong>当您使用本应用时，我们可能自动收集某些信息，包括IP地址、访问时间、访问页面等。</p>
+        </section>
+
+        <section>
+          <h2>三、信息使用</h2>
+          <p>我们使用收集的信息用于以下目的：</p>
+          <p>1. 提供、维护和改进我们的服务；</p>
+          <p>2. 处理您的注册、登录、学习记录等请求；</p>
+          <p>3. 向您发送服务通知、更新和安全提醒；</p>
+          <p>4. 进行数据分析，以改善用户体验和服务质量；</p>
+          <p>5. 检测、预防和解决技术问题；</p>
+          <p>6. 遵守法律法规要求。</p>
+        </section>
+
+        <section>
+          <h2>四、信息存储</h2>
+          <p>1. 我们采用行业标准的安全措施来保护您的个人信息，防止未经授权的访问、使用或泄露。</p>
+          <p>2. 您的个人信息将存储在安全的服务器上，我们会对数据进行加密处理。</p>
+          <p>3. 我们仅在为实现本隐私政策所述目的所必需的期间内保留您的个人信息。</p>
+        </section>
+
+        <section>
+          <h2>五、信息共享</h2>
+          <p>我们不会向第三方出售、交易或转让您的个人信息，除非：</p>
+          <p>1. 获得您的明确同意；</p>
+          <p>2. 法律法规要求或司法机关、行政机关依法要求提供；</p>
+          <p>3. 为履行我们的服务协议或本隐私政策，我们可能需要与我们的服务提供商共享某些信息。</p>
+        </section>
+
+        <section>
+          <h2>六、Cookie和类似技术</h2>
+          <p>我们可能使用Cookie和类似技术来收集信息、改善用户体验和分析服务使用情况。您可以通过浏览器设置管理Cookie，但这可能影响某些功能的正常使用。</p>
+        </section>
+
+        <section>
+          <h2>七、您的权利</h2>
+          <p>根据相关法律法规，您对自己的个人信息享有以下权利：</p>
+          <p>1. <strong>访问权：</strong>您有权访问我们持有的关于您的个人信息；</p>
+          <p>2. <strong>更正权：</strong>您有权要求更正不准确的个人信息；</p>
+          <p>3. <strong>删除权：</strong>在特定情况下，您有权要求删除您的个人信息；</p>
+          <p>4. <strong>撤回同意：</strong>您有权随时撤回您之前给予的同意；</p>
+          <p>5. <strong>投诉权：</strong>如果您认为我们对您个人信息的处理违反了相关法律法规，您有权向相关监管部门投诉。</p>
+        </section>
+
+        <section>
+          <h2>八、未成年人保护</h2>
+          <p>我们非常重视未成年人的个人信息保护。如果您是未成年人，建议您请您的父母或监护人仔细阅读本隐私政策，并在征得您的父母或监护人同意的前提下使用我们的服务。</p>
+        </section>
+
+        <section>
+          <h2>九、隐私政策更新</h2>
+          <p>我们可能会不时更新本隐私政策。我们会在本页面上发布新的隐私政策，并通过适当方式通知您。如果您不同意更新后的隐私政策，您可以选择停止使用我们的服务。</p>
+        </section>
+
+        <section>
+          <h2>十、联系我们</h2>
+          <p>如果您对本隐私政策有任何疑问、意见或建议，或需要行使您的相关权利，请通过以下方式联系我们：</p>
+          <p>邮箱：privacy@example.com</p>
+        </section>
+
+        <div class="update-time">
+          <p>最后更新时间：2024年1月1日</p>
+        </div>
+      </div>
+    </div>
+  </BasePage>
+</template>
+
+<style scoped lang="scss">
+.privacy-page {
+  padding: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.page-title {
+  font-size: 2rem;
+  font-weight: 600;
+  margin: 2rem 0;
+  text-align: center;
+  color: var(--color-text);
+}
+
+.content {
+  line-height: 1.8;
+  color: var(--color-text);
+  
+  section {
+    margin-bottom: 2rem;
+    
+    h2 {
+      font-size: 1.3rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      color: var(--color-text);
+    }
+    
+    p {
+      margin-bottom: 0.8rem;
+      text-align: justify;
+      color: var(--color-text-secondary, #666);
+      
+      strong {
+        color: var(--color-text);
+      }
+    }
+  }
+}
+
+.update-time {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-border, #eee);
+  text-align: center;
+  
+  p {
+    color: var(--color-text-secondary, #999);
+    font-size: 0.9rem;
+  }
+}
+</style>
+
diff --git a/src/pages/user/UserAgreement.vue b/src/pages/user/UserAgreement.vue
new file mode 100644
index 00000000..5d2f55d0
--- /dev/null
+++ b/src/pages/user/UserAgreement.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import BasePage from "@/components/BasePage.vue";
+import BackIcon from "@/components/BackIcon.vue";
+</script>
+
+<template>
+  <BasePage>
+    <div class="agreement-page">
+      <BackIcon />
+      <h1 class="page-title">用户协议</h1>
+      <div class="content">
+        <section>
+          <h2>一、总则</h2>
+          <p>欢迎使用本应用！在使用本应用之前，请您仔细阅读本用户协议（以下简称"本协议"）。当您注册、登录、使用（以下统称"使用"）本应用时，即表示您已阅读、理解并同意接受本协议的全部内容。</p>
+        </section>
+
+        <section>
+          <h2>二、服务内容</h2>
+          <p>本应用为用户提供单词学习、文章阅读等在线教育服务。我们保留随时修改或中断服务而不需通知用户的权利，我们行使修改或中断服务的权利，不需对用户或第三方负责。</p>
+        </section>
+
+        <section>
+          <h2>三、用户账户</h2>
+          <p>1. 用户在使用本应用前需要注册一个账户。用户应当使用真实、准确、完整的信息注册账户。</p>
+          <p>2. 用户有责任维护账户信息的安全，对账户下的所有活动负责。</p>
+          <p>3. 用户不得将账户转让、出售或以其他方式提供给第三方使用。</p>
+        </section>
+
+        <section>
+          <h2>四、用户行为规范</h2>
+          <p>用户在使用本应用时，应当遵守相关法律法规，不得从事以下行为：</p>
+          <p>1. 发布、传播违法、有害、威胁、辱骂、骚扰、侵权、诽谤、淫秽、暴力或其他不当内容；</p>
+          <p>2. 侵犯他人知识产权、隐私权或其他合法权益；</p>
+          <p>3. 干扰或破坏本应用的正常运行；</p>
+          <p>4. 使用自动化工具或脚本进行数据采集、批量操作等；</p>
+          <p>5. 其他违反法律法规或本协议的行为。</p>
+        </section>
+
+        <section>
+          <h2>五、知识产权</h2>
+          <p>1. 本应用的所有内容，包括但不限于文字、图片、音频、视频、软件、程序、版面设计等，均受知识产权法保护。</p>
+          <p>2. 未经我们书面许可，用户不得复制、传播、展示、镜像、上传、下载本应用的任何内容。</p>
+        </section>
+
+        <section>
+          <h2>六、隐私保护</h2>
+          <p>我们重视用户的隐私保护。关于我们如何收集、使用、存储和保护您的个人信息，请详见《隐私政策》。</p>
+        </section>
+
+        <section>
+          <h2>七、免责声明</h2>
+          <p>1. 用户明确同意使用本应用的风险由用户个人承担。</p>
+          <p>2. 我们不对因不可抗力或非我们原因造成的服务中断或终止承担责任。</p>
+          <p>3. 我们不对用户在使用本应用过程中产生的任何直接、间接、偶然、特殊及后续的损害承担责任。</p>
+        </section>
+
+        <section>
+          <h2>八、协议修改</h2>
+          <p>我们有权随时修改本协议的任何条款。一旦本协议的内容发生变动，我们将会通过适当方式向用户提示修改内容。如果用户不同意我们对本协议相关条款所做的修改，用户有权停止使用本应用。如果用户继续使用本应用，则视为用户接受我们对本协议相关条款所做的修改。</p>
+        </section>
+
+        <section>
+          <h2>九、法律适用与争议解决</h2>
+          <p>1. 本协议的订立、执行和解释及争议的解决均应适用中华人民共和国法律。</p>
+          <p>2. 如双方就本协议内容或其执行发生任何争议，双方应尽量友好协商解决；协商不成时，任何一方均可向我们所在地的人民法院提起诉讼。</p>
+        </section>
+
+        <section>
+          <h2>十、其他</h2>
+          <p>1. 本协议构成双方对本协议之约定事项及其他有关事宜的完整协议，除本协议规定的之外，未赋予本协议各方其他权利。</p>
+          <p>2. 如本协议中的任何条款无论因何种原因完全或部分无效或不具有执行力，本协议的其余条款仍应有效并且有约束力。</p>
+        </section>
+
+        <div class="update-time">
+          <p>最后更新时间：2024年1月1日</p>
+        </div>
+      </div>
+    </div>
+  </BasePage>
+</template>
+
+<style scoped lang="scss">
+.agreement-page {
+  padding: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.page-title {
+  font-size: 2rem;
+  font-weight: 600;
+  margin: 2rem 0;
+  text-align: center;
+  color: var(--color-text);
+}
+
+.content {
+  line-height: 1.8;
+  color: var(--color-text);
+  
+  section {
+    margin-bottom: 2rem;
+    
+    h2 {
+      font-size: 1.3rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+      color: var(--color-text);
+    }
+    
+    p {
+      margin-bottom: 0.8rem;
+      text-align: justify;
+      color: var(--color-text-secondary, #666);
+    }
+  }
+}
+
+.update-time {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  border-top: 1px solid var(--color-border, #eee);
+  text-align: center;
+  
+  p {
+    color: var(--color-text-secondary, #999);
+    font-size: 0.9rem;
+  }
+}
+</style>
+
diff --git a/src/pages/user/login.vue b/src/pages/user/login.vue
index a53a374e..8c03e966 100644
--- a/src/pages/user/login.vue
+++ b/src/pages/user/login.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import {APP_NAME} from "@/config/env.ts";
-import {useAuthStore} from "@/stores/auth.ts";
-import {sendCode, register as registerApi, resetPassword, uploadImportData} from "@/apis";
-import {validateLoginForm, validateRegisterForm, validateResetPasswordForm} from "@/utils/validation.ts";
+import { APP_NAME } from "@/config/env.ts";
+import { useAuthStore } from "@/stores/auth.ts";
+import { sendCode, register as registerApi, resetPassword, uploadImportData } from "@/apis";
+import { validateLoginForm, validateRegisterForm, validateResetPasswordForm } from "@/utils/validation.ts";
 import Toast from "@/components/base/toast/Toast.ts";
 import { getWechatAuthUrl, PHONE_CONFIG } from "@/config/auth.ts";
 
 // 状态管理
 const authStore = useAuthStore()
 const route = useRoute()
-const router = useRouter()
 
 // 页面状态
 let currentMode = $ref<'login' | 'register' | 'forgot'>('login')
@@ -21,8 +20,20 @@ let loginType = $ref<'code' | 'password'>('code') // 默认验证码登录
 let isLoading = $ref(false)
 let isSendingCode = $ref(false)
 let codeCountdown = $ref(0)
-let showWechatQR = $ref(false)
+let showWechatQR = $ref(true)
 let wechatQRUrl = $ref('')
+let qrExpired = $ref(false)
+let qrScanned = $ref(true) // 二维码是否已扫描
+let qrExpireTimer: ReturnType<typeof setTimeout> | null = null
+let qrCheckInterval: ReturnType<typeof setInterval> | null = null
+const QR_EXPIRE_TIME = 5 * 60 * 1000 // 5分钟过期
+
+// 密码显示/隐藏状态
+let showLoginPassword = $ref(false)
+let showRegisterPassword = $ref(false)
+let showRegisterConfirmPassword = $ref(false)
+let showForgotPassword = $ref(false)
+let showForgotConfirmPassword = $ref(false)
 
 // 表单数据
 const loginForm = $ref({
@@ -44,7 +55,6 @@ const registerForm = $ref({
 
 const forgotForm = $ref({
   phone: '',
-  email: '',
   code: '',
   newPassword: '',
   confirmPassword: ''
@@ -61,7 +71,7 @@ async function sendVerificationCode(phone: string, type: 'login' | 'register' |
     Toast.error('请输入手机号')
     return
   }
-  
+
   if (!PHONE_CONFIG.phoneRegex.test(phone)) {
     Toast.error('请输入有效的手机号')
     return
@@ -69,8 +79,8 @@ async function sendVerificationCode(phone: string, type: 'login' | 'register' |
 
   try {
     isSendingCode = true
-    const response = await sendCode({ phone, type })
-    
+    const response = await sendCode({phone, type})
+
     if (response.success) {
       Toast.success('验证码已发送')
       codeCountdown = PHONE_CONFIG.sendInterval
@@ -190,7 +200,7 @@ async function handleForgotPassword() {
 
   const validation = validateResetPasswordForm({
     phone: forgotForm.phone,
-    email: forgotForm.email,
+    email: undefined,
     code: forgotForm.code,
     newPassword: forgotForm.newPassword
   })
@@ -204,11 +214,11 @@ async function handleForgotPassword() {
   try {
     const response = await authStore.resetPassword({
       phone: forgotForm.phone,
-      email: forgotForm.email,
+      email: undefined,
       code: forgotForm.code,
       newPassword: forgotForm.newPassword
     })
-    
+
     if (response.success) {
       Toast.success('密码重置成功，请重新登录')
       switchMode('login')
@@ -220,35 +230,64 @@ async function handleForgotPassword() {
   }
 }
 
+// 清除二维码相关定时器
+function clearQRTimers() {
+  if (qrExpireTimer) {
+    clearTimeout(qrExpireTimer)
+    qrExpireTimer = null
+  }
+  if (qrCheckInterval) {
+    clearInterval(qrCheckInterval)
+    qrCheckInterval = null
+  }
+}
+
+// 刷新二维码
+async function refreshQRCode() {
+  clearQRTimers()
+  qrExpired = false
+  qrScanned = false
+  await handleWechatLogin()
+}
+
 // 微信登录 - 显示二维码
 async function handleWechatLogin() {
   try {
     showWechatQR = true
+    qrExpired = false
+    qrScanned = false
+
     // 这里应该调用后端获取二维码
     // const response = await getWechatQR()
     // wechatQRUrl = response.qrUrl
-    
+
     // 暂时使用占位二维码
     wechatQRUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2Y1ZjVmNSIvPgogIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OTk5OSI+55So5o6l566h55CG6L295Lit6K+B77yBPC90ZXh0Pgo8L3N2Zz4K'
-    
+
     // 模拟轮询检查扫码状态
-    const checkInterval = setInterval(async () => {
+    qrCheckInterval = setInterval(async () => {
       // 这里应该轮询后端检查扫码状态
       // const result = await checkWechatLoginStatus()
+      // if (result.scanned) {
+      //   qrScanned = true // 设置扫描成功状态
+      // }
       // if (result.success) {
-      //   clearInterval(checkInterval)
+      //   clearQRTimers()
       //   showWechatQR = false
+      //   qrScanned = false
       //   // 登录成功处理
       // }
     }, 2000)
-    
-    // 5分钟后自动关闭二维码
-    setTimeout(() => {
-      clearInterval(checkInterval)
-      showWechatQR = false
-      Toast.info('二维码已过期，请重新获取')
-    }, 300000)
-    
+
+    // 设置二维码过期
+    qrExpireTimer = setTimeout(() => {
+      qrExpired = true
+      qrScanned = false
+      clearInterval(qrCheckInterval!)
+      qrCheckInterval = null
+      Toast.info('二维码已过期，请点击刷新')
+    }, QR_EXPIRE_TIME)
+
   } catch (error) {
     console.error('Wechat login error:', error)
     Toast.error('微信登录失败')
@@ -259,6 +298,14 @@ async function handleWechatLogin() {
 function switchMode(mode: 'login' | 'register' | 'forgot') {
   currentMode = mode
   clearErrors()
+  // 切换到注册或忘记密码模式时，隐藏微信扫码
+  if (mode === 'register' || mode === 'forgot') {
+    if (showWechatQR) {
+      clearQRTimers()
+      showWechatQR = false
+      qrExpired = false
+    }
+  }
 }
 
 // 清除错误
@@ -300,520 +347,395 @@ onMounted(() => {
     Toast.info('请先登录后再访问该页面')
   }
 })
+
+// 组件卸载时清理定时器
+onBeforeUnmount(() => {
+  clearQRTimers()
+})
 </script>
 
 <template>
-  <div class="login-container">
-    <!-- 左侧登录区域 -->
-    <div class="login-section">
-      <h1 class="mb-0 text-align-center">{{ APP_NAME }}</h1>
-      <span class="agreement-text">继续操作即表示你同意我们的 <a href="" class="color-link">用户协议</a> 并确认已了解 <a href="" class="color-link">隐私政策</a>。</span>
-      
-      <!-- 登录选项 -->
-      <div v-if="currentMode === 'login' && !showWechatQR" class="login-options">
-        <!-- Tab切换 -->
-        <div class="login-tabs">
-          <div 
-            class="tab-item" 
-            :class="{ active: loginType === 'code' }"
-            @click="loginType = 'code'"
-          >
-            验证码登录
-          </div>
-          <div 
-            class="tab-item" 
-            :class="{ active: loginType === 'password' }"
-            @click="loginType = 'password'"
-          >
-            密码登录
-          </div>
-        </div>
+  <div class="center min-h-screen">
+    <div class="rounded-2xl p-6 bg-white shadow-lg">
+      <!-- 登录区域容器 - 弹框形式 -->
+      <div class="flex gap-8">
+        <!-- 左侧登录区域 -->
+        <div class="flex-1 w-80">
+          <h1 class="mb-6 text-center text-2xl font-semibold">{{ APP_NAME }}</h1>
 
-        <!-- 验证码登录表单 -->
-        <template v-if="loginType === 'code'">
-          <div class="form-group">
-            <BaseInput 
-              v-model="phoneLoginForm.phone" 
-              type="tel" 
-              size="large" 
-              placeholder="请输入手机号"
-              :class="{ 'has-error': loginErrors.phone }"
-            />
-            <div v-if="loginErrors.phone" class="error-text">{{ loginErrors.phone }}</div>
-          </div>
-          
-          <div class="form-group flex gap-2">
-            <div class="flex-1">
-              <BaseInput 
-                v-model="phoneLoginForm.code" 
-                type="text" 
-                size="large" 
-                placeholder="请输入验证码"
-                :class="{ 'has-error': loginErrors.code }"
-              />
-              <div v-if="loginErrors.code" class="error-text">{{ loginErrors.code }}</div>
+          <!-- 登录选项 -->
+          <div v-if="currentMode === 'login'">
+            <!-- Tab切换 -->
+            <div class="flex mb-6 border-b border-gray-200">
+              <div
+                  class="flex-1 py-3 text-center cursor-pointer transition-colors relative"
+                  :class="loginType === 'code' ? 'text-blue-600 font-medium' : 'text-gray-600'"
+                  @click="loginType = 'code'"
+              >
+                验证码登录
+                <div
+                    v-if="loginType === 'code'"
+                    class="absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 bg-blue-600"
+                    style="width: 4rem;"
+                ></div>
+              </div>
+              <div
+                  class="flex-1 py-3 text-center cursor-pointer transition-colors relative"
+                  :class="loginType === 'password' ? 'text-blue-600 font-medium' : 'text-gray-600'"
+                  @click="loginType = 'password'"
+              >
+                密码登录
+                <div
+                    v-if="loginType === 'password'"
+                    class="absolute bottom-0 left-1/2 transform -translate-x-1/2 h-0.5 bg-blue-600"
+                    style="width: 4rem;"
+                ></div>
+              </div>
             </div>
-            <BaseButton 
-              @click="sendVerificationCode(phoneLoginForm.phone, 'login')"
-              :disabled="isSendingCode || codeCountdown > 0"
-              type="info"
-              size="large"
-              class="send-code-btn"
+
+            <!-- 验证码登录表单 -->
+            <template v-if="loginType === 'code'">
+              <div class="mb-4">
+                <BaseInput
+                    v-model="phoneLoginForm.phone"
+                    type="tel"
+                    size="large"
+                    placeholder="请输入手机号"
+                    :class="{ 'has-error': loginErrors.phone }"
+                />
+                <div v-if="loginErrors.phone" class="mt-1 text-sm text-red-500 pl-2">{{ loginErrors.phone }}</div>
+              </div>
+
+              <div class="mb-4 flex gap-2">
+                <div class="flex-1">
+                  <BaseInput
+                      v-model="phoneLoginForm.code"
+                      type="text"
+                      size="large"
+                      placeholder="请输入验证码"
+                      :class="{ 'has-error': loginErrors.code }"
+                  />
+                  <div v-if="loginErrors.code" class="mt-1 text-sm text-red-500 pl-2">{{ loginErrors.code }}</div>
+                </div>
+                <BaseButton
+                    @click="sendVerificationCode(phoneLoginForm.phone, 'login')"
+                    :disabled="isSendingCode || codeCountdown > 0"
+                    type="info"
+                    size="large"
+                    class="whitespace-nowrap flex-shrink-0 min-w-[100px]"
+                >
+                  {{ codeCountdown > 0 ? `${codeCountdown}s` : (isSendingCode ? '发送中' : '获取验证码') }}
+                </BaseButton>
+              </div>
+
+            </template>
+
+            <!-- 密码登录表单 -->
+            <template v-else>
+              <div class="mb-4">
+                <BaseInput
+                    v-model="loginForm.account"
+                    type="text"
+                    size="large"
+                    placeholder="请输入邮箱或手机号"
+                    :class="{ 'has-error': loginErrors.email || loginErrors.phone }"
+                />
+                <div v-if="loginErrors.email" class="mt-1 text-sm text-red-500 pl-2">{{ loginErrors.email }}</div>
+                <div v-if="loginErrors.phone" class="mt-1 text-sm text-red-500 pl-2">{{ loginErrors.phone }}</div>
+              </div>
+              <div class="mb-4 relative">
+                <BaseInput
+                    v-model="loginForm.password"
+                    :type="showLoginPassword ? 'text' : 'password'"
+                    size="large"
+                    placeholder="请输入密码"
+                    :class="{ 'has-error': loginErrors.password }"
+                />
+                <div
+                    class="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500 hover:text-gray-700 z-10"
+                    @click="showLoginPassword = !showLoginPassword"
+                >
+                  <IconFluentEye16Regular v-if="!showLoginPassword"/>
+                  <IconFluentEyeOff16Regular v-else/>
+                </div>
+                <div v-if="loginErrors.password" class="mt-1 text-sm text-red-500 pl-2">{{ loginErrors.password }}</div>
+              </div>
+            </template>
+
+            <div class="mb-4 text-xs text-gray-500 text-center leading-relaxed">
+              继续操作即表示你同意我们的
+              <router-link to="/user-agreement" class="text-blue-600 hover:opacity-80">用户协议</router-link>
+              与
+              <router-link to="/privacy-policy" class="text-blue-600 hover:opacity-80">隐私政策</router-link>
+            </div>
+
+            <BaseButton
+                class="w-full"
+                size="large"
+                :loading="isLoading"
+                @click="handlePhoneCodeLogin"
             >
-              {{ codeCountdown > 0 ? `${codeCountdown}s` : (isSendingCode ? '发送中' : '获取验证码') }}
+              登录
             </BaseButton>
-          </div>
-          
-          <BaseButton 
-            class="w-full" 
-            size="large" 
-            :loading="isLoading"
-            @click="handlePhoneCodeLogin"
-          >
-            登录
-          </BaseButton>
-        </template>
 
-        <!-- 密码登录表单 -->
-        <template v-else>
-          <div class="form-group">
-            <BaseInput 
-              v-model="loginForm.account" 
-              type="text" 
-              size="large" 
-              placeholder="请输入邮箱或手机号"
-              :class="{ 'has-error': loginErrors.email || loginErrors.phone }"
-            />
-            <div v-if="loginErrors.email" class="error-text">{{ loginErrors.email }}</div>
-            <div v-if="loginErrors.phone" class="error-text">{{ loginErrors.phone }}</div>
+            <!-- 底部操作链接 - 只在密码登录时显示 -->
+            <div class="mt-4 flex justify-between text-sm" v-opacity="loginType !== 'code'">
+              <div class="text-blue-600 cursor-pointer hover:opacity-80" @click="switchMode('register')">注册账号</div>
+              <div class="text-blue-600 cursor-pointer hover:opacity-80" @click="switchMode('forgot')">忘记密码?</div>
+            </div>
           </div>
-          <div class="form-group">
-            <BaseInput 
-              v-model="loginForm.password" 
-              type="password" 
-              size="large" 
-              placeholder="请输入密码"
-              :class="{ 'has-error': loginErrors.password }"
-            />
-            <div v-if="loginErrors.password" class="error-text">{{ loginErrors.password }}</div>
-          </div>
-          
-          <BaseButton 
-            class="w-full" 
-            size="large" 
-            :loading="isLoading"
-            @click="handleLogin"
-          >
-            登录
-          </BaseButton>
-        </template>
 
-        <!-- 底部操作链接 -->
-        <div class="bottom-actions">
-          <div class="color-link cp" @click="currentMode = 'register'">注册账号</div>
-          <div class="color-link cp" @click="currentMode = 'forgot'">忘记密码?</div>
-        </div>
-      </div>
+          <!-- 注册模式 -->
+          <div v-else-if="currentMode === 'register'">
+            <h2 class="mb-6 text-xl font-semibold text-center">注册新账号</h2>
 
-      <!-- 注册模式 -->
-      <template v-else-if="currentMode === 'register'" class="register-form">
-        <h2 class="form-title">注册新账号</h2>
-        
-        <div class="form-group">
-          <BaseInput 
-            v-model="registerForm.phone" 
-            type="tel" 
-            size="large" 
-            placeholder="请输入手机号"
-            :class="{ 'has-error': registerErrors.phone }"
-          />
-          <div v-if="registerErrors.phone" class="error-text">{{ registerErrors.phone }}</div>
-        </div>
-        
-        <div class="form-group flex gap-2">
-          <div class="flex-1">
-            <BaseInput 
-              v-model="registerForm.code" 
-              type="text" 
-              size="large" 
-              placeholder="请输入验证码"
-              :class="{ 'has-error': registerErrors.code }"
-            />
-            <div v-if="registerErrors.code" class="error-text">{{ registerErrors.code }}</div>
-          </div>
-          <BaseButton 
-            @click="sendVerificationCode(registerForm.phone, 'register')"
-            :disabled="isSendingCode || codeCountdown > 0"
-            type="info"
-            size="large"
-            class="send-code-btn"
-          >
-            {{ codeCountdown > 0 ? `${codeCountdown}s` : (isSendingCode ? '发送中' : '获取验证码') }}
+            <div class="mb-4">
+              <BaseInput
+                  v-model="registerForm.phone"
+                  type="tel"
+                  size="large"
+                  placeholder="请输入手机号"
+                  :class="{ 'has-error': registerErrors.phone }"
+              />
+              <div v-if="registerErrors.phone" class="mt-1 text-sm text-red-500 pl-2">{{ registerErrors.phone }}</div>
+            </div>
+
+            <div class="mb-4 flex gap-2">
+              <div class="flex-1">
+                <BaseInput
+                    v-model="registerForm.code"
+                    type="text"
+                    size="large"
+                    placeholder="请输入验证码"
+                    :class="{ 'has-error': registerErrors.code }"
+                />
+                <div v-if="registerErrors.code" class="mt-1 text-sm text-red-500 pl-2">{{ registerErrors.code }}</div>
+              </div>
+              <BaseButton
+                  @click="sendVerificationCode(registerForm.phone, 'register')"
+                  :disabled="isSendingCode || codeCountdown > 0"
+                  type="info"
+                  size="large"
+                  class="whitespace-nowrap flex-shrink-0 min-w-[100px]"
+              >
+                {{ codeCountdown > 0 ? `${codeCountdown}s` : (isSendingCode ? '发送中' : '获取验证码') }}
+              </BaseButton>
+            </div>
+
+            <div class="mb-4 relative">
+              <BaseInput
+                  v-model="registerForm.password"
+                  :type="showRegisterPassword ? 'text' : 'password'"
+                  size="large"
+                  placeholder="请设置密码（6-20位）"
+                  :class="{ 'has-error': registerErrors.password }"
+              />
+              <div
+                  class="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500 hover:text-gray-700 z-10"
+                  @click="showRegisterPassword = !showRegisterPassword"
+              >
+                <IconFluentEye16Regular v-if="!showRegisterPassword"/>
+                <IconFluentEyeOff16Regular v-else/>
+              </div>
+              <div v-if="registerErrors.password" class="mt-1 text-sm text-red-500 pl-2">{{
+                  registerErrors.password
+                }}
+              </div>
+            </div>
+
+            <div class="mb-4 relative">
+              <BaseInput
+                  v-model="registerForm.confirmPassword"
+                  :type="showRegisterConfirmPassword ? 'text' : 'password'"
+                  size="large"
+                  placeholder="请再次输入密码"
+              />
+              <div
+                  class="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500 hover:text-gray-700 z-10"
+                  @click="showRegisterConfirmPassword = !showRegisterConfirmPassword"
+              >
+                <IconFluentEye16Regular v-if="!showRegisterConfirmPassword"/>
+                <IconFluentEyeOff16Regular v-else/>
+              </div>
+            </div>
+
+            <div class="mb-4 text-xs text-gray-500 text-center leading-relaxed">
+              继续操作即表示你同意我们的
+              <router-link to="/user-agreement" class="text-blue-600 hover:opacity-80">用户协议</router-link>
+              并确认已了解
+              <router-link to="/privacy-policy" class="text-blue-600 hover:opacity-80">隐私政策</router-link>
+              。
+            </div>
+
+            <BaseButton
+                class="w-full"
+                size="large"
+                :loading="isLoading"
+                @click="handleRegister"
+            >
+              注册
             </BaseButton>
-        </div>
 
-        <div class="form-group">
-          <BaseInput 
-            v-model="registerForm.password" 
-            type="password" 
-            size="large" 
-            placeholder="请设置密码（6-20位）"
-            :class="{ 'has-error': registerErrors.password }"
-          />
-          <div v-if="registerErrors.password" class="error-text">{{ registerErrors.password }}</div>
-        </div>
-        
-        <div class="form-group">
-          <BaseInput 
-            v-model="registerForm.confirmPassword" 
-            type="password" 
-            size="large" 
-            placeholder="请再次输入密码"
-          />
-        </div>
-
-        <div class="form-actions">
-          <BaseButton 
-            class="w-full" 
-            size="large" 
-            :loading="isLoading"
-            @click="handleRegister"
-          >
-            注册
-          </BaseButton>
-          
-          <div class="back-link">
-            <div class="color-link cp" @click="switchMode('login')">返回登录</div>
+            <div class="mt-4 text-center">
+              <div class="text-blue-600 cursor-pointer hover:opacity-80 text-sm" @click="switchMode('login')">返回登录
+              </div>
+            </div>
           </div>
-        </div>
-      </template>
 
-      <!-- 忘记密码模式 -->
-      <template v-else-if="currentMode === 'forgot'" class="forgot-form">
-        <h2 class="form-title">重置密码</h2>
-        
-        <div class="form-group">
-          <BaseInput 
-            v-model="forgotForm.phone" 
-            type="tel" 
-            size="large" 
-            placeholder="请输入手机号"
-            :class="{ 'has-error': forgotErrors.phone }"
-          />
-          <div v-if="forgotErrors.phone" class="error-text">{{ forgotErrors.phone }}</div>
-        </div>
-        
-        <div class="form-group flex gap-2">
-          <div class="flex-1">
-            <BaseInput 
-              v-model="forgotForm.code" 
-              type="text" 
-              size="large" 
-              placeholder="请输入验证码"
-              :class="{ 'has-error': forgotErrors.code }"
-            />
-            <div v-if="forgotErrors.code" class="error-text">{{ forgotErrors.code }}</div>
-          </div>
-          <BaseButton 
-            @click="sendVerificationCode(forgotForm.phone, 'reset_password')"
-            :disabled="isSendingCode || codeCountdown > 0"
-            type="info"
-            size="large"
-            class="send-code-btn"
-          >
-              {{ codeCountdown > 0 ? `${codeCountdown}s` : (isSendingCode ? '发送中' : '获取验证码') }}
+          <!-- 忘记密码模式 -->
+          <div v-else-if="currentMode === 'forgot'">
+            <h2 class="mb-6 text-xl font-semibold text-center">重置密码</h2>
+
+            <div class="mb-4">
+              <BaseInput
+                  v-model="forgotForm.phone"
+                  type="tel"
+                  size="large"
+                  placeholder="请输入手机号"
+                  :class="{ 'has-error': forgotErrors.phone }"
+              />
+              <div v-if="forgotErrors.phone" class="mt-1 text-sm text-red-500 pl-2">{{ forgotErrors.phone }}</div>
+            </div>
+
+            <div class="mb-4 flex gap-2">
+              <div class="flex-1">
+                <BaseInput
+                    v-model="forgotForm.code"
+                    type="text"
+                    size="large"
+                    placeholder="请输入验证码"
+                    :class="{ 'has-error': forgotErrors.code }"
+                />
+                <div v-if="forgotErrors.code" class="mt-1 text-sm text-red-500 pl-2">{{ forgotErrors.code }}</div>
+              </div>
+              <BaseButton
+                  @click="sendVerificationCode(forgotForm.phone, 'reset_password')"
+                  :disabled="isSendingCode || codeCountdown > 0"
+                  type="info"
+                  size="large"
+                  class="whitespace-nowrap flex-shrink-0 min-w-[100px]"
+              >
+                {{ codeCountdown > 0 ? `${codeCountdown}s` : (isSendingCode ? '发送中' : '获取验证码') }}
+              </BaseButton>
+            </div>
+
+            <div class="mb-4 relative">
+              <BaseInput
+                  v-model="forgotForm.newPassword"
+                  :type="showForgotPassword ? 'text' : 'password'"
+                  size="large"
+                  placeholder="请输入新密码（6-20位）"
+                  :class="{ 'has-error': forgotErrors.newPassword }"
+              />
+              <div
+                  class="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500 hover:text-gray-700 z-10"
+                  @click="showForgotPassword = !showForgotPassword"
+              >
+                <IconFluentEye16Regular v-if="!showForgotPassword"/>
+                <IconFluentEyeOff16Regular v-else/>
+              </div>
+              <div v-if="forgotErrors.newPassword" class="mt-1 text-sm text-red-500 pl-2">{{
+                  forgotErrors.newPassword
+                }}
+              </div>
+            </div>
+
+            <div class="mb-4 relative">
+              <BaseInput
+                  v-model="forgotForm.confirmPassword"
+                  :type="showForgotConfirmPassword ? 'text' : 'password'"
+                  size="large"
+                  placeholder="请再次输入新密码"
+              />
+              <div
+                  class="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500 hover:text-gray-700 z-10"
+                  @click="showForgotConfirmPassword = !showForgotConfirmPassword"
+              >
+                <IconFluentEye16Regular v-if="!showForgotConfirmPassword"/>
+                <IconFluentEyeOff16Regular v-else/>
+              </div>
+            </div>
+
+            <div class="mb-4 text-xs text-gray-500 text-center leading-relaxed">
+              继续操作即表示你同意我们的
+              <router-link to="/user-agreement" class="text-blue-600 hover:opacity-80">用户协议</router-link>
+              并确认已了解
+              <router-link to="/privacy-policy" class="text-blue-600 hover:opacity-80">隐私政策</router-link>
+              。
+            </div>
+
+            <BaseButton
+                class="w-full"
+                size="large"
+                :loading="isLoading"
+                @click="handleForgotPassword"
+            >
+              重置密码
             </BaseButton>
-        </div>
 
-        <div class="form-group">
-          <BaseInput 
-            v-model="forgotForm.newPassword" 
-            type="password" 
-            size="large" 
-            placeholder="请输入新密码（6-20位）"
-            :class="{ 'has-error': forgotErrors.newPassword }"
-          />
-          <div v-if="forgotErrors.newPassword" class="error-text">{{ forgotErrors.newPassword }}</div>
-        </div>
-        
-        <div class="form-group">
-          <BaseInput 
-            v-model="forgotForm.confirmPassword" 
-            type="password" 
-            size="large" 
-            placeholder="请再次输入新密码"
-          />
-        </div>
-
-        <div class="form-group">
-          <BaseInput 
-            v-model="forgotForm.email" 
-            type="email" 
-            size="large" 
-            placeholder="请输入邮箱地址（选填）"
-            :class="{ 'has-error': forgotErrors.email }"
-          />
-          <div v-if="forgotErrors.email" class="error-text">{{ forgotErrors.email }}</div>
-        </div>
-
-        <div class="form-actions">
-          <BaseButton 
-            class="w-full" 
-            size="large" 
-            :loading="isLoading"
-            @click="handleForgotPassword"
-          >
-            重置密码
-          </BaseButton>
-          
-          <div class="back-link">
-            <div class="color-link cp" @click="switchMode('login')">返回登录</div>
+            <div class="mt-4 text-center">
+              <div class="text-blue-600 cursor-pointer hover:opacity-80 text-sm" @click="switchMode('login')">返回登录
+              </div>
+            </div>
           </div>
         </div>
-      </template>
-    </div>
 
-    <!-- 右侧微信二维码 -->
-    <div class="qr-section">
-      <div class="qr-container">
-        <div class="qr-header">
-          <h3>微信扫码登录</h3>
-          <div v-if="showWechatQR" class="close-btn" @click="showWechatQR = false">
-            <IconFluentDismiss12Regular />
-          </div>
-        </div>
-        <div class="qr-content">
-          <img 
-            v-if="showWechatQR" 
-            :src="wechatQRUrl" 
-            alt="微信登录二维码" 
-            class="qr-image active" 
-          />
-          <img 
-            v-else 
-            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2Y1ZjVmNSIvPgogIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OTk5OSI+55So5o6l566h55CG6L295Lit6K+B77yBPC90ZXh0Pgo8L3N2Zz4K"
-            alt="微信登录二维码"
-            class="qr-image" 
-          />
-          <p class="qr-tip" v-if="!showWechatQR">请使用微信扫描二维码登录</p>
-          <p class="qr-tip active" v-else>正在扫码，请稍候...</p>
-        </div>
+        <!-- 右侧微信二维码 - 只在登录模式时显示 -->
+         <div v-if="currentMode === 'login'" class="center flex-col bg-gray-100 rounded-xl p-8 shadow-lg">
+           <div class="flex flex-col items-center">
+             <div class="relative inline-block">
+               <img
+                   v-if="showWechatQR"
+                   :src="wechatQRUrl"
+                   alt="微信登录二维码"
+                   class="w-[200px] h-[200px] border border-gray-300 rounded-lg bg-white block transition-opacity"
+                   :class="{ 'opacity-50': qrExpired }"
+               />
+               <img
+                   v-else
+                   src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2Y1ZjVmNSIvPgogIDx0ZXh0IHg9IjUwJSIgeT0iNTAlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OTk5OSI+55So5o6l566h55CG6L295Lit6K+B77yBPC90ZXh0Pgo8L3N2Zz4K"
+                   alt="微信登录二维码"
+                   class="w-[200px] h-[200px] border border-gray-300 rounded-lg bg-white block"
+               />
+               <!-- 扫描成功蒙层 -->
+               <div
+                   v-if="showWechatQR && qrScanned && !qrExpired"
+                   class="absolute top-0 left-0 right-0 bottom-0 bg-white bg-opacity-95 rounded-lg flex items-center justify-center backdrop-blur-sm z-10"
+               >
+                 <div class="text-center px-4">
+                   <p class="text-base text-gray-700 mb-2 font-medium">扫描成功</p>
+                   <p class="text-sm text-gray-600">在微信中轻触允许即可登录</p>
+                 </div>
+               </div>
+               <!-- 过期蒙层 -->
+               <div
+                   v-if="showWechatQR && qrExpired"
+                   class="absolute top-0 left-0 right-0 bottom-0 bg-white bg-opacity-95 rounded-lg flex items-center justify-center backdrop-blur-sm z-10"
+               >
+                 <div class="text-center">
+                   <p class="text-base text-gray-600 mb-4 font-medium">二维码已过期</p>
+                   <BaseButton
+                       @click="refreshQRCode"
+                       type="primary"
+                       size="large"
+                       class="flex items-center justify-center"
+                   >
+                     <IconFluentReplay20Regular class="mr-2"/>
+                     刷新二维码
+                   </BaseButton>
+                 </div>
+               </div>
+             </div>
+             <p class="mt-4 text-sm text-gray-600">微信扫码登录</p>
+           </div>
+         </div>
       </div>
     </div>
   </div>
 </template>
 <style scoped lang="scss">
-.item {
-  border-radius: 2rem;
-  border: 1px solid #ccc;
-  padding: 0.6rem 1rem;
-  background: white;
-  display: flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  transition: all 0.3s;
-
-  svg {
-    font-size: 1.6rem;
-  }
-
-  div {
-    font-size: 1rem;
-    width: 100%;
-    position: absolute;
-    left: 0;
-    text-align: center;
-  }
-
-  &:hover {
-    border-color: var(--color-select-bg);
-    background: #f9f9f9;
-  }
-}
-
-.line-wrap {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  color: #999;
-  font-size: 0.9rem;
-
-  .line {
-    flex: 1;
-    height: 1px;
-    background: #cfcfcf;
-    border: none;
-  }
-}
-
-// 表单组样式
-.form-group {
-  margin-bottom: 1rem;
-  position: relative;
-
-  &.flex {
-    display: flex;
-    align-items: flex-end;
-    gap: 0.5rem;
-  }
-}
-
-// Tab切换样式
-.login-tabs {
-  display: flex;
-  margin-bottom: 1rem;
-  border-bottom: 1px solid #eee;
-}
-
-.tab-item {
-  flex: 1;
-  padding: 1rem 1rem;
-  text-align: center;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  transition: all 0.3s;
-  color: #666;
-  font-size: 0.95rem;
-
-  &:hover {
-    color: var(--color-select-bg);
-  }
-
-  &.active {
-    color: var(--color-select-bg);
-    border-bottom: 2px solid var(--color-select-bg);
-    font-weight: 500;
-  }
-}
-
-.tab-item {
-  flex: 1;
-  padding: 0.8rem 1rem;
-  text-align: center;
-  cursor: pointer;
-  border-bottom: 3px solid transparent;
-  transition: all 0.3s;
-  color: #666;
-  font-size: 0.95rem;
-
-  &:hover {
-    color: var(--color-select-bg);
-  }
-
-  &.active {
-    color: var(--color-select-bg);
-    border-bottom: 3px solid var(--color-select-bg);
-    font-weight: 500;
-  }
-}
-
-// 验证码按钮样式
-.send-code-btn {
-  min-width: 100px;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-// 错误文本样式
-.error-text {
-  color: #f56c6c;
-  font-size: 0.85rem;
-  margin-top: 0.25rem;
-  padding-left: 0.5rem;
-  line-height: 1.2;
-}
-
-// 链接样式
-.color-link {
-  color: var(--color-select-bg);
-  text-decoration: none;
-  transition: opacity 0.3s;
-
-  &:hover {
-    opacity: 0.8;
-  }
-}
-
-.cp {
-  cursor: pointer;
-}
-
 // Input错误状态覆盖
 :deep(.base-input2.has-error) {
   border-color: #f56c6c;
 }
-
-// 微信二维码样式
-.wechat-qr-container {
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  padding: 1.5rem;
-  background: white;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  
-  .qr-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem;
-    
-    h3 {
-      margin: 0;
-      font-size: 1.1rem;
-      color: #333;
-    }
-    
-    .close-btn {
-      cursor: pointer;
-      color: #999;
-      transition: color 0.3s;
-      
-      &:hover {
-        color: #666;
-      }
-    }
-  }
-  
-  .qr-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    
-    .qr-image {
-      width: 200px;
-      height: 200px;
-      border: 1px solid #e4e7ed;
-      border-radius: 4px;
-    }
-    
-    .qr-tip {
-      margin-top: 1rem;
-      color: #666;
-      font-size: 0.9rem;
-      margin: 0;
-    }
-  }
-}
-
-// 登录容器布局 - 居中显示
-.login-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  padding: 2rem;
-  gap: 3rem;
-}
-
-.login-section {
-  flex: 1;
-  max-width: 500px;
-}
-
-.qr-section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 </style>
diff --git a/src/router.ts b/src/router.ts
index d0b32d5a..cf6a3482 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -12,7 +12,8 @@ import BookList from "@/pages/article/BookList.vue";
 import Setting from "@/pages/setting/Setting.vue";
 import Login from "@/pages/user/login.vue";
 import User from "@/pages/user/index.vue";
-import WechatCallback from "@/pages/user/wechat-callback.vue";
+import UserAgreement from "@/pages/user/UserAgreement.vue";
+import PrivacyPolicy from "@/pages/user/PrivacyPolicy.vue";
 import { useAuthStore } from "@/stores/auth.ts";
 
 export const routes: RouteRecordRaw[] = [
@@ -37,6 +38,8 @@ export const routes: RouteRecordRaw[] = [
       {path: 'setting', component: Setting},
       {path: 'login', component: Login},
       {path: 'user', component: User},
+      {path: 'user-agreement', component: UserAgreement},
+      {path: 'privacy-policy', component: PrivacyPolicy},
     ]
   },
   {path: '/batch-edit-article', component: () => import("@/pages/article/BatchEditArticlePage.vue")},
@@ -63,7 +66,7 @@ router.beforeEach(async (to: any, from: any) => {
   const authStore = useAuthStore()
   
   // 公共路由，不需要登录验证
-  const publicRoutes = ['/login', '/wechat/callback']
+  const publicRoutes = ['/login', '/wechat/callback', '/user-agreement', '/privacy-policy']
   
   // 如果目标路由是公共路由，直接放行
   if (publicRoutes.includes(to.path)) {