From 485b9bb9267153041c2caedc72c2de9fa3afc90a Mon Sep 17 00:00:00 2001
From: iven <iven_h@qq.com>
Date: Mon, 25 May 2026 13:44:35 +0800
Subject: [PATCH] =?UTF-8?q?feat(mp):=20=E7=99=BB=E5=BD=95=E9=A1=B5=20UX=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=20=E2=80=94=20=E5=8D=8F=E8=AE=AE=E5=8C=BA?=
 =?UTF-8?q?=E5=9F=9F=E5=B0=B1=E8=BF=91=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 协议勾选移至对应操作区域（微信登录 + 绑定区）更直觉
- 统一 SHOW_DEV_LOGIN 常量控制开发模式入口
- 抽取 requireAgreement() 复用协议检查逻辑
---
 apps/miniprogram/src/pages/login/index.tsx | 100 ++++++++++++---------
 1 file changed, 60 insertions(+), 40 deletions(-)

diff --git a/apps/miniprogram/src/pages/login/index.tsx b/apps/miniprogram/src/pages/login/index.tsx
index 9ec5dc5..fa13d93 100644
--- a/apps/miniprogram/src/pages/login/index.tsx
+++ b/apps/miniprogram/src/pages/login/index.tsx
@@ -9,6 +9,7 @@ declare const __wxConfig: Record<string, unknown> | undefined;
 
 const IS_DEV = process.env.NODE_ENV !== 'production';
 const IS_SIMULATOR = typeof __wxConfig !== 'undefined' && (__wxConfig as Record<string, unknown>)?.envVersion === 'develop';
+const SHOW_DEV_LOGIN = (IS_DEV || IS_SIMULATOR) && !!(process.env.TARO_APP_DEV_USER && process.env.TARO_APP_DEV_PASS);
 
 export default function Login() {
   const [agreed, setAgreed] = useState(false);
@@ -40,11 +41,16 @@ export default function Login() {
     }
   };
 
-  const handleWechatLogin = async () => {
+  const requireAgreement = () => {
     if (!agreed) {
       Taro.showToast({ title: '请先阅读并同意用户协议', icon: 'none' });
-      return;
+      return false;
     }
+    return true;
+  };
+
+  const handleWechatLogin = async () => {
+    if (!requireAgreement()) return;
     try {
       const { code } = await Taro.login();
       const result = await login(code);
@@ -60,23 +66,6 @@ export default function Login() {
     }
   };
 
-  const handleDevQuickLogin = async () => {
-    const devUser = process.env.TARO_APP_DEV_USER || '';
-    const devPass = process.env.TARO_APP_DEV_PASS || '';
-    if (!devUser || !devPass) {
-      Taro.showToast({ title: '未配置开发账号', icon: 'none' });
-      return;
-    }
-    try {
-      const success = await credentialLogin(devUser, devPass);
-      if (success) {
-        navigateAfterLogin();
-      }
-    } catch (err: unknown) {
-      Taro.showToast({ title: err instanceof Error ? err.message : '登录失败', icon: 'none' });
-    }
-  };
-
   const handleGetPhone = async (e: { detail: { errMsg: string; encryptedData: string; iv: string } }) => {
     if (e.detail.errMsg !== 'getPhoneNumber:ok') {
       Taro.showToast({ title: '需要授权手机号', icon: 'none' });
@@ -100,6 +89,7 @@ export default function Login() {
   };
 
   // DevTools 中 getPhoneNumber 不可用，直接传 mock 数据绕过微信 SDK
+  // 仅在后端 wechat_dev_mode=true 时有效，后端会生成 mock 手机号
   const handleDevBindPhone = async () => {
     try {
       const success = await bindPhone('dev_mock', 'dev_mock');
@@ -117,6 +107,21 @@ export default function Login() {
     }
   };
 
+  const handleDevQuickLogin = async () => {
+    if (!requireAgreement()) return;
+    const devUser = process.env.TARO_APP_DEV_USER || '';
+    const devPass = process.env.TARO_APP_DEV_PASS || '';
+    if (!devUser || !devPass) return;
+    try {
+      const success = await credentialLogin(devUser, devPass);
+      if (success) {
+        navigateAfterLogin();
+      }
+    } catch (err: unknown) {
+      Taro.showToast({ title: err instanceof Error ? err.message : '登录失败', icon: 'none' });
+    }
+  };
+
   return (
     <View className="login-page">
       {/* 品牌区 */}
@@ -130,16 +135,32 @@ export default function Login() {
 
       {!needBind ? (
         <>
-          {/* 微信一键登录 */}
+          {/* 微信一键登录（主按钮） */}
           <View className="login-wechat-btn" onClick={handleWechatLogin}>
             <Text className="login-wechat-icon">微</Text>
             <Text className="login-wechat-text">微信一键登录</Text>
           </View>
+
+          {/* 协议 */}
+          <View className="agreement-row">
+            <View
+              className={`agreement-check ${agreed ? 'checked' : ''}`}
+              onClick={() => setAgreed(!agreed)}
+            >
+              {agreed && <Text className="agreement-check-mark">&#10003;</Text>}
+            </View>
+            <Text className="agreement-text">
+              登录即同意
+              <Text className="agreement-link" onClick={() => safeNavigateTo('/pages/legal/user-agreement')}>《用户协议》</Text>
+              和
+              <Text className="agreement-link" onClick={() => safeNavigateTo('/pages/legal/privacy-policy')}>《隐私政策》</Text>
+            </Text>
+          </View>
         </>
       ) : (
         <View className="login-bind-section">
           {/* 真机：微信手机号授权 */}
-          {!(IS_DEV || IS_SIMULATOR) && (
+          {!SHOW_DEV_LOGIN && (
             <Button
               className="login-btn-bind"
               openType="getPhoneNumber"
@@ -151,7 +172,7 @@ export default function Login() {
             </Button>
           )}
           {/* DevTools：跳过微信 SDK 直接调后端（后端 wechat_dev_mode 会用 mock 手机号） */}
-          {(IS_DEV || IS_SIMULATOR) && (
+          {SHOW_DEV_LOGIN && (
             <Button
               className="login-btn-bind"
               onClick={handleDevBindPhone}
@@ -161,29 +182,28 @@ export default function Login() {
               授权手机号完成绑定（开发模式）
             </Button>
           )}
+          {/* 协议 */}
+          <View className="agreement-row" style={{ marginTop: '16px' }}>
+            <View
+              className={`agreement-check ${agreed ? 'checked' : ''}`}
+              onClick={() => setAgreed(!agreed)}
+            >
+              {agreed && <Text className="agreement-check-mark">&#10003;</Text>}
+            </View>
+            <Text className="agreement-text">
+              登录即同意
+              <Text className="agreement-link" onClick={() => safeNavigateTo('/pages/legal/user-agreement')}>《用户协议》</Text>
+              和
+              <Text className="agreement-link" onClick={() => safeNavigateTo('/pages/legal/privacy-policy')}>《隐私政策》</Text>
+            </Text>
+          </View>
         </View>
       )}
 
-      {/* 协议 */}
-      <View className="agreement-row">
-        <View
-          className={`agreement-check ${agreed ? 'checked' : ''}`}
-          onClick={() => setAgreed(!agreed)}
-        >
-          {agreed && <Text className="agreement-check-mark">&#10003;</Text>}
-        </View>
-        <Text className="agreement-text">
-          登录即同意
-          <Text className="agreement-link" onClick={() => safeNavigateTo('/pages/legal/user-agreement')}>《用户协议》</Text>
-          和
-          <Text className="agreement-link" onClick={() => safeNavigateTo('/pages/legal/privacy-policy')}>《隐私政策》</Text>
-        </Text>
-      </View>
-
       <View style={{ flex: 1 }} />
 
-      {/* 开发模式 */}
-      {(IS_DEV || IS_SIMULATOR) && (
+      {/* 开发模式快速登录 — 仅 dev 构建 + DevTools 中显示 */}
+      {SHOW_DEV_LOGIN && (
         <View className="login-dev-btn" onClick={handleDevQuickLogin}>
           <Text className="login-dev-btn-text">开发模式快速登录 ›</Text>
         </View>