From f10fddc59a85a817c8570108e86731246a0b9d91 Mon Sep 17 00:00:00 2001
From: 3030332422 <3030332422@qq.com>
Date: Tue, 30 Sep 2025 17:52:38 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A=E6=96=B0=E5=A2=9E=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=BF=98=E8=AE=B0=E5=AF=86=E7=A0=81=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/manager-mobile/src/i18n/en.ts            |  25 +-
 main/manager-mobile/src/i18n/zh_CN.ts         |  25 +-
 main/manager-mobile/src/i18n/zh_TW.ts         |  29 +-
 .../src/pages/forgot-password/index.vue       | 622 ++++++++++++++++++
 main/manager-mobile/src/pages/login/index.vue |  42 +-
 5 files changed, 720 insertions(+), 23 deletions(-)
 create mode 100644 main/manager-mobile/src/pages/forgot-password/index.vue

diff --git a/main/manager-mobile/src/i18n/en.ts b/main/manager-mobile/src/i18n/en.ts
index fbc7be20..3618ea9d 100644
--- a/main/manager-mobile/src/i18n/en.ts
+++ b/main/manager-mobile/src/i18n/en.ts
@@ -19,8 +19,7 @@ export default {
   'login.enterCaptcha': 'Please enter verification code',
   'login.loginButton': 'Login',
   'login.loggingIn': 'Logging in...',
-  'login.noAccount': 'did not have an account?',
-  'login.registerNow': 'Register Now',
+  'login.noAccount': 'Sign Up',
   'login.enterPhone': 'Please enter phone number',
   'login.selectCountry': 'Select Country/Region',
   'login.confirm': 'Confirm',
@@ -30,6 +29,7 @@ export default {
   'login.requiredCaptcha': 'Verification code cannot be empty',
   'login.requiredMobile': 'Please enter a valid phone number',
   'login.captchaError': 'Graphic verification code error',
+  'login.forgotPassword': 'Forgot Password',
 
   // Register page
   'register.pageTitle': 'Register',
@@ -189,6 +189,27 @@ export default {
   'common.unknownError': 'Unknown error',
   'common.networkError': 'Network error',
 
+  // Retrieve Password page
+  'retrievePassword.title': 'Reset Password',
+  'retrievePassword.subtitle': 'Recover your account password via mobile number',
+  'retrievePassword.mobileRequired': 'Please enter mobile number',
+  'retrievePassword.inputCorrectMobile': 'Please enter a valid mobile number',
+  'retrievePassword.captchaRequired': 'Please enter graphic verification code',
+  'retrievePassword.mobileCaptchaRequired': 'Please enter SMS verification code',
+  'retrievePassword.newPasswordRequired': 'Please enter new password',
+  'retrievePassword.confirmNewPasswordRequired': 'Please confirm new password',
+  'retrievePassword.passwordsNotMatch': 'Passwords do not match',
+  'retrievePassword.mobilePlaceholder': 'Please enter mobile number',
+  'retrievePassword.captchaPlaceholder': 'Please enter graphic verification code',
+  'retrievePassword.mobileCaptchaPlaceholder': 'Please enter SMS verification code',
+  'retrievePassword.newPasswordPlaceholder': 'Please enter new password',
+  'retrievePassword.confirmNewPasswordPlaceholder': 'Please confirm new password',
+  'retrievePassword.getMobileCaptcha': 'Get Code',
+  'retrievePassword.captchaSendSuccess': 'Verification code sent successfully',
+  'retrievePassword.passwordUpdateSuccess': 'Password reset successfully',
+  'retrievePassword.resetButton': 'Reset Password',
+  'retrievePassword.goToLogin': 'Back to Login',
+
   // SM2 encryption related error messages
   'sm2.publicKeyNotConfigured': 'SM2 public key not configured, please contact administrator',
   'sm2.encryptionFailed': 'Password encryption failed',
diff --git a/main/manager-mobile/src/i18n/zh_CN.ts b/main/manager-mobile/src/i18n/zh_CN.ts
index 5b25c57b..c1e9b856 100644
--- a/main/manager-mobile/src/i18n/zh_CN.ts
+++ b/main/manager-mobile/src/i18n/zh_CN.ts
@@ -19,8 +19,7 @@ export default {
   'login.enterCaptcha': '请输入验证码',
   'login.loginButton': '登录',
   'login.loggingIn': '登录中...',
-  'login.noAccount': '还没有账户？',
-  'login.registerNow': '立即注册',
+  'login.noAccount': '新用户注册',
   'login.enterPhone': '请输入手机号码',
   'login.selectCountry': '选择国家/地区',
   'login.confirm': '确认',
@@ -30,6 +29,7 @@ export default {
   'login.requiredCaptcha': '验证码不能为空',
   'login.requiredMobile': '请输入正确的手机号码',
   'login.captchaError': '图形验证码错误',
+  'login.forgotPassword': '忘记密码',
 
   // 注册页面
   'register.pageTitle': '注册',
@@ -265,6 +265,27 @@ export default {
   'settings.selectLanguage': '选择语言',
   'settings.languageChanged': '语言切换成功',
 
+  // 重置密码页面
+  'retrievePassword.title': '重置密码',
+  'retrievePassword.subtitle': '通过手机号找回您的账户密码',
+  'retrievePassword.mobileRequired': '请输入手机号码',
+  'retrievePassword.inputCorrectMobile': '请输入正确的手机号码',
+  'retrievePassword.captchaRequired': '请输入图形验证码',
+  'retrievePassword.mobileCaptchaRequired': '请输入短信验证码',
+  'retrievePassword.newPasswordRequired': '请输入新密码',
+  'retrievePassword.confirmNewPasswordRequired': '请确认新密码',
+  'retrievePassword.passwordsNotMatch': '两次输入的密码不一致',
+  'retrievePassword.mobilePlaceholder': '请输入手机号码',
+  'retrievePassword.captchaPlaceholder': '请输入图形验证码',
+  'retrievePassword.mobileCaptchaPlaceholder': '请输入短信验证码',
+  'retrievePassword.newPasswordPlaceholder': '请输入新密码',
+  'retrievePassword.confirmNewPasswordPlaceholder': '请确认新密码',
+  'retrievePassword.getMobileCaptcha': '获取验证码',
+  'retrievePassword.captchaSendSuccess': '验证码发送成功',
+  'retrievePassword.passwordUpdateSuccess': '密码重置成功',
+  'retrievePassword.resetButton': '重置密码',
+  'retrievePassword.goToLogin': '返回登录',
+
   // 消息提示
   'message.loginSuccess': '登录成功！',
   'message.loginFail': '登录失败',
diff --git a/main/manager-mobile/src/i18n/zh_TW.ts b/main/manager-mobile/src/i18n/zh_TW.ts
index 617aa5fb..8040dc0c 100644
--- a/main/manager-mobile/src/i18n/zh_TW.ts
+++ b/main/manager-mobile/src/i18n/zh_TW.ts
@@ -19,8 +19,7 @@ export default {
   'login.enterCaptcha': '請輸入驗證碼',
   'login.loginButton': '登錄',
   'login.loggingIn': '登錄中...',
-  'login.noAccount': '還沒有賬戶？',
-  'login.registerNow': '立即註冊',
+  'login.noAccount': '新用戶註冊',
   'login.enterPhone': '請輸入手機號碼',
   'login.selectCountry': '選擇國家/地區',
   'login.confirm': '確認',
@@ -30,6 +29,32 @@ export default {
   'login.requiredCaptcha': '驗證碼不能為空',
   'login.requiredMobile': '請輸入正確的手機號碼',
   'login.captchaError': '圖形驗證碼錯誤',
+  'login.forgotPassword': '忘記密碼',
+
+  // 忘記密碼頁面
+  'retrievePassword.title': '重置密碼',
+  'retrievePassword.subtitle': '請輸入您的手機號碼以重置密碼',
+  'retrievePassword.mobileRequired': '請輸入手機號碼',
+  'retrievePassword.inputCorrectMobile': '請輸入正確的手機號碼',
+  'retrievePassword.captchaRequired': '請輸入圖形驗證碼',
+  'retrievePassword.mobileCaptchaRequired': '請輸入手機驗證碼',
+  'retrievePassword.newPasswordRequired': '請輸入新密碼',
+  'retrievePassword.confirmNewPasswordRequired': '請確認新密碼',
+  'retrievePassword.passwordsNotMatch': '兩次輸入的密碼不一致',
+  'retrievePassword.mobilePlaceholder': '請輸入手機號碼',
+  'retrievePassword.captchaPlaceholder': '請輸入圖形驗證碼',
+  'retrievePassword.mobileCaptchaPlaceholder': '請輸入手機驗證碼',
+  'retrievePassword.newPasswordPlaceholder': '請輸入新密碼',
+  'retrievePassword.confirmNewPasswordPlaceholder': '請確認新密碼',
+  'retrievePassword.confirmPasswordPlaceholder': '請確認新密碼',
+  'retrievePassword.captchaSendSuccess': '驗證碼發送成功',
+  'retrievePassword.passwordUpdateSuccess': '密碼更新成功',
+  'retrievePassword.getCaptcha': '獲取驗證碼',
+  'retrievePassword.getMobileCaptcha': '獲取驗證碼',
+  'retrievePassword.resend': '重新發送',
+  'retrievePassword.resetPasswordButton': '重置密碼',
+  'retrievePassword.resetButton': '重置密碼',
+  'retrievePassword.goToLogin': '返回登錄',
 
   // 註冊頁面
   'register.pageTitle': '註冊',
diff --git a/main/manager-mobile/src/pages/forgot-password/index.vue b/main/manager-mobile/src/pages/forgot-password/index.vue
new file mode 100644
index 00000000..486321fa
--- /dev/null
+++ b/main/manager-mobile/src/pages/forgot-password/index.vue
@@ -0,0 +1,622 @@
+<route lang="jsonc" type="page">
+{
+  "layout": "default",
+  "style": {
+    "navigationStyle": "custom",
+    "navigationBarTitleText": "ForgotPassword"
+  }
+}
+</route>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { useConfigStore } from "@/store";
+import { getEnvBaseUrl } from "@/utils";
+import { toast } from "@/utils/toast";
+// 导入国际化相关功能
+import { t, initI18n } from "@/i18n";
+
+// 获取屏幕边界到安全区域距离
+let safeAreaInsets;
+let systemInfo;
+
+// #ifdef MP-WEIXIN
+// 微信小程序使用新的API
+systemInfo = uni.getWindowInfo();
+safeAreaInsets = systemInfo.safeArea
+  ? {
+      top: systemInfo.safeArea.top,
+      right: systemInfo.windowWidth - systemInfo.safeArea.right,
+      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
+      left: systemInfo.safeArea.left,
+    }
+  : null;
+// #endif
+
+// #ifndef MP-WEIXIN
+// 其他平台继续使用uni API
+systemInfo = uni.getSystemInfoSync();
+safeAreaInsets = systemInfo.safeAreaInsets;
+// #endif
+
+// 表单数据
+interface ForgotPasswordData {
+  mobile: string;
+  captcha: string;
+  captchaId: string;
+  mobileCaptcha: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
+const formData = ref<ForgotPasswordData>({
+  mobile: "",
+  captcha: "",
+  captchaId: "",
+  mobileCaptcha: "",
+  newPassword: "",
+  confirmPassword: "",
+});
+
+// 验证码图片
+const captchaImage = ref("");
+const loading = ref(false);
+
+// 获取配置store
+const configStore = useConfigStore();
+
+// 区号选择相关
+const selectedAreaCode = ref("+86");
+
+// 短信验证码倒计时
+const smsCountdown = ref(0);
+const smsLoading = ref(false);
+
+// 计算属性：区号列表
+const areaCodeList = computed(() => {
+  return configStore.config.mobileAreaList || [{ name: "中国大陆", key: "+86" }];
+});
+
+// 生成UUID
+function generateUUID() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+// 获取图形验证码
+async function refreshCaptcha() {
+  const uuid = generateUUID();
+  formData.value.captchaId = uuid;
+  captchaImage.value = `${getEnvBaseUrl()}/user/captcha?uuid=${uuid}&t=${Date.now()}`;
+}
+
+// 发送短信验证码
+async function sendSmsCode() {
+  // 手机号格式验证
+  const phoneRegex = /^1[3-9]\d{9}$/;
+  if (!phoneRegex.test(formData.value.mobile)) {
+    toast.warning(t("retrievePassword.inputCorrectMobile"));
+    return;
+  }
+
+  if (!formData.value.captcha) {
+    toast.warning(t("retrievePassword.captchaRequired"));
+    return;
+  }
+
+  try {
+    smsLoading.value = true;
+    // TODO: 调用发送短信验证码API
+    // await sendSmsCode({
+    //   mobile: formData.value.mobile,
+    //   captcha: formData.value.captcha,
+    //   captchaId: formData.value.captchaId
+    // })
+
+    toast.success(t("retrievePassword.captchaSendSuccess"));
+
+    // 开始倒计时
+    smsCountdown.value = 60;
+    const timer = setInterval(() => {
+      smsCountdown.value--;
+      if (smsCountdown.value <= 0) {
+        clearInterval(timer);
+      }
+    }, 1000);
+  } catch (error: any) {
+    // 处理验证码错误
+    if (error.message.includes("请求错误[10067]")) {
+      toast.warning(t("login.captchaError"));
+    }
+    // 发送失败重新获取图形验证码
+    refreshCaptcha();
+  } finally {
+    smsLoading.value = false;
+  }
+}
+
+// 重置密码
+async function handleResetPassword() {
+  // 表单验证
+  if (!formData.value.mobile) {
+    toast.warning(t("retrievePassword.mobileRequired"));
+    return;
+  }
+
+  // 手机号格式验证
+  const phoneRegex = /^1[3-9]\d{9}$/;
+  if (!phoneRegex.test(formData.value.mobile)) {
+    toast.warning(t("retrievePassword.inputCorrectMobile"));
+    return;
+  }
+
+  if (!formData.value.captcha) {
+    toast.warning(t("retrievePassword.captchaRequired"));
+    return;
+  }
+
+  if (!formData.value.mobileCaptcha) {
+    toast.warning(t("retrievePassword.mobileCaptchaRequired"));
+    return;
+  }
+
+  if (!formData.value.newPassword) {
+    toast.warning(t("retrievePassword.newPasswordRequired"));
+    return;
+  }
+
+  if (!formData.value.confirmPassword) {
+    toast.warning(t("retrievePassword.confirmNewPasswordRequired"));
+    return;
+  }
+
+  if (formData.value.newPassword !== formData.value.confirmPassword) {
+    toast.warning(t("retrievePassword.passwordsNotMatch"));
+    return;
+  }
+
+  try {
+    loading.value = true;
+
+    // TODO: 调用重置密码API
+    // await resetPassword({
+    //   mobile: formData.value.mobile,
+    //   mobileCaptcha: formData.value.mobileCaptcha,
+    //   password: formData.value.newPassword,
+    //   captchaId: formData.value.captchaId
+    // })
+
+    toast.success(t("retrievePassword.passwordUpdateSuccess"));
+
+    // 跳转到登录页
+    setTimeout(() => {
+      uni.redirectTo({
+        url: "/pages/login/index",
+      });
+    }, 1000);
+  } catch (error: any) {
+    // 处理验证码错误
+    if (error.message.includes("请求错误[10067]")) {
+      toast.warning(t("login.captchaError"));
+    }
+    // 重置失败重新获取验证码
+    refreshCaptcha();
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 返回登录
+function goBack() {
+  uni.redirectTo({
+    url: "/pages/login/index",
+  });
+}
+
+// 页面加载时获取验证码
+onLoad(() => {
+  refreshCaptcha();
+});
+
+// 组件挂载时确保配置已加载
+onMounted(async () => {
+  if (!configStore.config.name) {
+    try {
+      await configStore.fetchPublicConfig();
+    } catch (error) {
+      console.error("获取配置失败:", error);
+    }
+  }
+  // 初始化国际化
+  initI18n();
+});
+</script>
+
+<template>
+  <view
+    class="app-container box-border h-screen w-full"
+    :style="{ paddingTop: `${safeAreaInsets?.top}px` }"
+  >
+    <view class="header">
+      <view class="back-button" @click="goBack">
+        <wd-icon name="arrow-left" custom-class="back-icon" />
+      </view>
+      <view class="logo-section">
+        <wd-img :width="80" :height="80" round src="/static/logo.png" class="logo" />
+        <text class="welcome-text">
+          {{ t("retrievePassword.title") }}
+        </text>
+        <text class="subtitle">
+          {{ t("retrievePassword.subtitle") }}
+        </text>
+      </view>
+    </view>
+
+    <view class="form-container">
+      <view class="form">
+        <!-- 手机号输入 -->
+        <view class="input-group">
+          <view class="input-wrapper mobile-wrapper">
+            <view class="area-code-selector">
+              <text class="area-code-text">
+                {{ selectedAreaCode }}
+              </text>
+            </view>
+            <view class="mobile-input-wrapper">
+              <wd-input
+                v-model="formData.mobile"
+                custom-class="styled-input"
+                no-border
+                :placeholder="t('retrievePassword.mobilePlaceholder')"
+                type="number"
+                :maxlength="11"
+              />
+            </view>
+          </view>
+        </view>
+
+        <!-- 图形验证码 -->
+        <view class="input-group">
+          <view class="input-wrapper captcha-wrapper">
+            <wd-input
+              v-model="formData.captcha"
+              custom-class="styled-input"
+              no-border
+              :placeholder="t('retrievePassword.captchaPlaceholder')"
+              :maxlength="6"
+            />
+            <view class="captcha-image" @click="refreshCaptcha">
+              <image :src="captchaImage" class="captcha-img" />
+            </view>
+          </view>
+        </view>
+
+        <!-- 短信验证码 -->
+        <view class="input-group">
+          <view class="input-wrapper sms-wrapper">
+            <wd-input
+              v-model="formData.mobileCaptcha"
+              custom-class="styled-input"
+              no-border
+              :placeholder="t('retrievePassword.mobileCaptchaPlaceholder')"
+              :maxlength="6"
+            />
+            <view class="sms-button" @click="sendSmsCode">
+              <text class="sms-text">
+                {{
+                  smsCountdown > 0
+                    ? `${smsCountdown}${t("register.secondsLater")}`
+                    : t("retrievePassword.getMobileCaptcha")
+                }}
+              </text>
+            </view>
+          </view>
+        </view>
+
+        <!-- 新密码 -->
+        <view class="input-group">
+          <view class="input-wrapper">
+            <wd-input
+              v-model="formData.newPassword"
+              custom-class="styled-input"
+              no-border
+              :placeholder="t('retrievePassword.newPasswordPlaceholder')"
+              show-password
+              :maxlength="20"
+            />
+          </view>
+        </view>
+
+        <!-- 确认新密码 -->
+        <view class="input-group">
+          <view class="input-wrapper">
+            <wd-input
+              v-model="formData.confirmPassword"
+              custom-class="styled-input"
+              no-border
+              :placeholder="t('retrievePassword.confirmNewPasswordPlaceholder')"
+              show-password
+              :maxlength="20"
+            />
+          </view>
+        </view>
+
+        <!-- 重置密码按钮 -->
+        <view class="reset-btn" @click="handleResetPassword">
+          {{ loading ? t("common.loading") : t("retrievePassword.resetButton") }}
+        </view>
+
+        <!-- 返回登录链接 -->
+        <view class="back-login-hint" @click="goBack">
+          <text class="hint-text">
+            {{ t("retrievePassword.goToLogin") }}
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.app-container {
+  background: linear-gradient(145deg, #f5f8fd, #6baaff, #9ebbfc, #f5f8fd);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  min-height: 100vh;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -50%;
+    left: -50%;
+    width: 200%;
+    height: 200%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
+    animation: float 6s ease-in-out infinite;
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+  }
+}
+
+.header {
+  flex: 0 0 auto;
+  min-height: 280rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 15% 0 40rpx 0;
+  position: relative;
+
+  .back-button {
+    position: absolute;
+    left: 30rpx;
+    top: 50rpx;
+    width: 60rpx;
+    height: 60rpx;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    backdrop-filter: blur(10rpx);
+    border: 1rpx solid rgba(255, 255, 255, 0.3);
+
+    .back-icon {
+      font-size: 32rpx;
+      color: #ffffff;
+    }
+  }
+
+  .logo-section {
+    text-align: center;
+
+    .logo {
+      margin-bottom: 20rpx;
+      box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
+    }
+
+    .welcome-text {
+      display: block;
+      color: #ffffff;
+      font-size: 40rpx;
+      font-weight: 600;
+      margin-bottom: 12rpx;
+      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+    }
+
+    .subtitle {
+      display: block;
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 26rpx;
+      font-weight: 400;
+    }
+  }
+}
+
+.form-container {
+  padding: 0 40rpx 40rpx 40rpx;
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+
+  .form {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 24rpx;
+    padding: 40rpx 30rpx 30rpx 30rpx;
+    backdrop-filter: blur(10rpx);
+    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
+    border: 1rpx solid rgba(255, 255, 255, 0.2);
+    max-height: calc(100vh - 350rpx);
+    overflow-y: auto;
+
+    .input-group {
+      margin-bottom: 24rpx;
+
+      .input-wrapper {
+        position: relative;
+        background: #f8f9fa;
+        border-radius: 16rpx;
+        padding: 20rpx 16rpx;
+        border: 2rpx solid #e9ecef;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+
+        &:focus-within {
+          border-color: #667eea;
+          background: #ffffff;
+          box-shadow: 0 0 0 6rpx rgba(102, 126, 234, 0.1);
+        }
+
+        &.mobile-wrapper {
+          padding: 0;
+          background: transparent;
+          border: none;
+
+          .area-code-selector {
+            width: 120rpx;
+            height: 60rpx;
+            background: #f8f9fa;
+            border-radius: 12rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 16rpx;
+            border: 2rpx solid #e9ecef;
+
+            .area-code-text {
+              font-size: 28rpx;
+              color: #333333;
+              font-weight: 500;
+            }
+          }
+
+          .mobile-input-wrapper {
+            flex: 1;
+          }
+        }
+
+        &.captcha-wrapper {
+          .captcha-image {
+            margin-left: 20rpx;
+            width: 150rpx;
+            height: 60rpx;
+            border-radius: 8rpx;
+            overflow: hidden;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #e9ecef;
+            border: 1rpx solid #ddd;
+
+            .captcha-img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+
+        &.sms-wrapper {
+          .sms-button {
+            margin-left: 20rpx;
+            width: 180rpx;
+            height: 60rpx;
+            border-radius: 12rpx;
+            background: #667eea;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+
+            &:active {
+              background: #5a6fd8;
+              transform: scale(0.98);
+            }
+
+            .sms-text {
+              font-size: 24rpx;
+              color: #ffffff;
+              font-weight: 500;
+            }
+          }
+        }
+
+        :deep(.styled-input) {
+          background: transparent !important;
+          border: none !important;
+          outline: none !important;
+          font-size: 32rpx;
+          color: #333333;
+          flex: 1;
+
+          &::placeholder {
+            color: #999999;
+            font-size: 28rpx;
+          }
+        }
+      }
+    }
+
+    .reset-btn {
+      width: 100%;
+      height: 80rpx;
+      border: none;
+      border-radius: 16rpx;
+      font-size: 30rpx;
+      font-weight: 600;
+      color: #ffffff;
+      margin-bottom: 30rpx;
+      box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
+      transition: all 0.3s ease;
+      background-color: var(
+        --wot-button-primary-bg-color,
+        var(--wot-color-theme, #4d80f0)
+      );
+      text-align: center;
+      line-height: 80rpx;
+
+      &:active {
+        transform: translateY(2rpx);
+        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+
+    .back-login-hint {
+      text-align: center;
+
+      .hint-text {
+        color: #667eea;
+        font-size: 26rpx;
+        font-weight: 500;
+        cursor: pointer;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/main/manager-mobile/src/pages/login/index.vue b/main/manager-mobile/src/pages/login/index.vue
index 0a87707e..ffb8e740 100644
--- a/main/manager-mobile/src/pages/login/index.vue
+++ b/main/manager-mobile/src/pages/login/index.vue
@@ -116,6 +116,13 @@ function goToRegister() {
   })
 }
 
+// 跳转到忘记密码页面
+function goToForgotPassword() {
+  uni.navigateTo({
+    url: '/pages/forgot-password/index',
+  })
+}
+
 // 生成UUID
 function generateUUID() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
@@ -369,13 +376,18 @@ onMounted(async () => {
           {{ loading ? t('login.loggingIn') : t('login.loginButton') }}
         </view>
 
-        <view class="register-hint">
-          <text class="hint-text">
-            {{ t('login.noAccount') }}
-          </text>
-          <text class="register-link" @click="goToRegister">
-            {{ t('login.registerNow') }}
-          </text>
+        <view class="hint-row">
+          <view class="register-hint">
+            <text class="register-link" @click="goToRegister">
+              {{ t('login.noAccount') }}
+            </text>
+          </view>
+
+          <view class="forgot-password">
+            <text class="forgot-text" @click="goToForgotPassword">
+              {{ t('login.forgotPassword') }}
+            </text>
+          </view>
         </view>
 
         <!-- 登录方式切换 -->
@@ -665,10 +677,14 @@ onMounted(async () => {
       }
     }
 
-    .forgot-password {
-      text-align: right;
+    .hint-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       margin-bottom: 30rpx;
+    }
 
+    .forgot-password {
       .forgot-text {
         color: #667eea;
         font-size: 26rpx;
@@ -706,14 +722,6 @@ onMounted(async () => {
     }
 
     .register-hint {
-      text-align: center;
-
-      .hint-text {
-        color: #666666;
-        font-size: 26rpx;
-        margin-right: 8rpx;
-      }
-
       .register-link {
         color: #667eea;
         font-size: 26rpx;