feat(h5-auth): remember SMS sessions and simplify media access

Hide WeChat login for shop and partner users, keep verified sessions for seven days, and allow JSSDK camera or album access without an OpenID binding.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/h5-shop/src/components/AuthGate.tsx

@@ -1,5 +1,4 @@
 import { Navigate, useLocation } from 'react-router-dom';
-import { getStoreProfile, hasShopWxSession } from '../lib/api';
 import { useStoreSession } from '../contexts/StoreSessionContext';
 
 const PUBLIC_PATHS = new Set(['/login', '/legal/user-agreement', '/legal/privacy-policy']);
@@ -26,10 +25,6 @@ export default function AuthGate({ children }: { children: React.ReactNode }) {
   }
 
   if (!authenticated && !PUBLIC_PATHS.has(location.pathname)) {
-    const profile = getStoreProfile();
-    if (profile && hasShopWxSession() && location.pathname !== '/login') {
-      return <Navigate to="/login?quick=1" replace state={{ from: location }} />;
-    }
     return <Navigate to="/login" replace state={{ from: location }} />;
   }
 

apps/h5-shop/src/components/WeakNetFallbackPanel.tsx

@@ -19,6 +19,7 @@ export default function WeakNetFallbackPanel({ redeemToken, failCount }: Props)
   const [photoResourceId, setPhotoResourceId] = useState('');
   const [result, setResult] = useState<RedeemPendingSubmitResult | null>(null);
   const [msg, setMsg] = useState('');
+  const [showAlbumFallback, setShowAlbumFallback] = useState(false);
 
   async function handleFile(file: File) {
     setUploading(true);
@@ -49,7 +50,11 @@ export default function WeakNetFallbackPanel({ redeemToken, failCount }: Props)
         }
       } catch (e) {
         const text = e instanceof Error ? e.message : '选图失败';
-        if (!/cancel/i.test(text)) setMsg(text);
+        if (!/cancel/i.test(text)) {
+          setMsg(`${text}，可改从系统相册选择`);
+          setShowAlbumFallback(true);
+          inputRef.current?.click();
+        }
       } finally {
         setUploading(false);
       }
@@ -120,11 +125,13 @@ export default function WeakNetFallbackPanel({ redeemToken, failCount }: Props)
             ref={inputRef}
             type="file"
             accept="image/*"
-            capture="environment"
             hidden
             onChange={(e) => {
               const file = e.target.files?.[0];
-              if (file) void handleFile(file);
+              if (file) {
+                setShowAlbumFallback(false);
+                void handleFile(file);
+              }
             }}
           />
           {previewUrl && (
@@ -134,6 +141,16 @@ export default function WeakNetFallbackPanel({ redeemToken, failCount }: Props)
             <button type="button" className="shop-redeem-confirm-btn" disabled={uploading} onClick={() => void pickPhoto()}>
               {uploading ? '上传中…' : previewUrl ? '重新拍照' : '拍照 / 选图'}
             </button>
+            {showAlbumFallback && isWechatEnv() && (
+              <button
+                type="button"
+                className="shop-btn-outline"
+                disabled={uploading}
+                onClick={() => inputRef.current?.click()}
+              >
+                从系统相册选择
+              </button>
+            )}
             <button
               type="button"
               className="shop-redeem-confirm-btn"

apps/h5-shop/src/lib/api.ts

@@ -53,7 +53,7 @@ const STORE_PROFILE = 'shopStoreProfile';
 const SESSION_EXPIRES_AT = 'shopSessionExpiresAt';
 export const SHOP_WX_BOUND = 'shopWxBound';
 
-/** 微信验证通过后的免登录时长 */
+/** 手机号或微信验证通过后的免登录时长 */
 export const SHOP_SESSION_TTL_MS = 7 * 24 * 60 * 60 * 1000;
 
 const AUTH_RECOVERY_EXEMPT_PATHS = [
@@ -87,7 +87,7 @@ export function isShopSessionExpired() {
 }
 
 export function touchShopSession() {
-  if (!hasShopWxSession()) return;
+  if (!localStorage.getItem(REFRESH_TOKEN)) return;
   localStorage.setItem(SESSION_EXPIRES_AT, String(Date.now() + SHOP_SESSION_TTL_MS));
 }
 
@@ -119,11 +119,16 @@ export function saveAuth(data: ShopSessionPayload) {
   }
 }
 
+/** 手机号验证成功后写入 7 天免验证码会话 */
+export function saveRememberedSession(data: ShopSessionPayload) {
+  saveAuth(data);
+  localStorage.setItem(SESSION_EXPIRES_AT, String(Date.now() + SHOP_SESSION_TTL_MS));
+}
+
 /** 微信登录/绑定成功后写入 7 天免登录 session */
 export function saveWechatSession(data: ShopSessionPayload) {
-  saveAuth(data);
+  saveRememberedSession(data);
   localStorage.setItem(SHOP_WX_BOUND, '1');
-  localStorage.setItem(SESSION_EXPIRES_AT, String(Date.now() + SHOP_SESSION_TTL_MS));
 }
 
 export function clearAuth(options?: { keepProfile?: boolean }) {

apps/h5-shop/src/pages/LoginPage.tsx

@@ -1,32 +1,14 @@
-import { useEffect, useRef, useState, type RefObject } from 'react';
-import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { useRef, useState, type RefObject } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import AppImage from '@dukang/shared-ui/AppImage';
-import { isWxAuthorizeEnabled } from '@dukang/shared-types';
-import { stripOAuthParamsFromLocation } from '@dukang/weixin-sdk';
 import { useStoreSession } from '../contexts/StoreSessionContext';
-import { getLastPhone, getStoreProfile, hasShopWxSession, request, saveAuth, type ShopSessionPayload } from '../lib/api';
-import { routeAfterShopLogin } from './SelectStorePage';
 import {
-  bindShopWechatAfterSmsLogin,
-  fetchClientConfig,
-  handleShopWechatCallback,
-  handleShopWechatLoginResult,
-  loginShopWithWechat,
-} from '../lib/wechat-auth';
-import { isWechatEnv } from '../lib/weixin';
-
-function maskPhone(phone: string) {
-  if (phone.length < 7) return phone;
-  return `${phone.slice(0, 3)} **** ${phone.slice(-4)}`;
-}
-
-function formatWechatError(e: unknown): string {
-  const text = e instanceof Error ? e.message : '微信登录失败';
-  if (text.includes('首次登录') || text.includes('手机验证码')) {
-    return '该微信尚未绑定门店账号，请先使用手机验证码登录，登录后将自动关联微信';
-  }
-  return text;
-}
+  getLastPhone,
+  request,
+  saveRememberedSession,
+  type ShopSessionPayload,
+} from '../lib/api';
+import { routeAfterShopLogin } from './SelectStorePage';
 
 function ShopAgreementCheckbox({
   agreed,
@@ -35,7 +17,7 @@ function ShopAgreementCheckbox({
 }: {
   agreed: boolean;
   onChange: (next: boolean) => void;
-  labelRef?: RefObject<HTMLLabelElement | null>;
+  labelRef?: RefObject<HTMLLabelElement>;
 }) {
   return (
     <label className="shop-login-agreement" ref={labelRef}>
@@ -61,44 +43,14 @@ function ShopAgreementCheckbox({
 export default function LoginPage() {
   const navigate = useNavigate();
   const { applySession } = useStoreSession();
-  const [params, setSearchParams] = useSearchParams();
-  const quick = params.get('quick') === '1';
-  const savedProfile = getStoreProfile();
   const [phone, setPhone] = useState(getLastPhone());
   const [code, setCode] = useState('');
   const [agreed, setAgreed] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [wxLoading, setWxLoading] = useState(false);
   const [msg, setMsg] = useState('');
   const [codeCooldown, setCodeCooldown] = useState(0);
-  const [wxAuthorize, setWxAuthorize] = useState(false);
   const agreementRef = useRef<HTMLLabelElement>(null);
 
-  useEffect(() => {
-    fetchClientConfig()
-      .then((config) => setWxAuthorize(isWxAuthorizeEnabled(config)))
-      .catch(() => setWxAuthorize(false));
-  }, []);
-
-  useEffect(() => {
-    if (!isWechatEnv() || !wxAuthorize || !params.get('code')) return;
-    void handleShopWechatCallback()
-      .then((result) => {
-        if (!result) return;
-        const session = handleShopWechatLoginResult(result);
-        if (session) {
-          applySession(session);
-          stripOAuthParamsFromLocation();
-          setSearchParams({}, { replace: true });
-          routeAfterShopLogin(session, navigate);
-        }
-      })
-      .catch((e) => setMsg(formatWechatError(e)));
-  }, [applySession, navigate, params, setSearchParams, wxAuthorize]);
-
-  const quickStoreName = savedProfile?.storeName ?? '门店管理中心';
-  const quickPhone = savedProfile?.phone || phone;
-
   function ensureAgreed() {
     if (!agreed) {
       setMsg('请先阅读并同意用户协议');
@@ -141,13 +93,8 @@ export default function LoginPage() {
         method: 'POST',
         body: JSON.stringify({ phone, code }),
       });
-      saveAuth(data);
+      saveRememberedSession(data);
       applySession(data);
-      if (isWechatEnv() && wxAuthorize) {
-        setMsg('登录成功，正在关联微信…');
-        await bindShopWechatAfterSmsLogin();
-        return;
-      }
       routeAfterShopLogin(data, navigate);
     } catch (e) {
       setMsg(e instanceof Error ? e.message : '登录失败');
@@ -156,103 +103,6 @@ export default function LoginPage() {
     }
   }
 
-  async function wechatLogin() {
-    if (!ensureAgreed()) return;
-    setMsg('');
-    if (!isWechatEnv()) {
-      setMsg('请在微信内打开以使用微信一键登录');
-      return;
-    }
-    setWxLoading(true);
-    try {
-      const session = await loginShopWithWechat();
-      if (session) {
-        applySession(session);
-        routeAfterShopLogin(session, navigate);
-      }
-    } catch (e) {
-      setMsg(formatWechatError(e));
-    } finally {
-      setWxLoading(false);
-    }
-  }
-
-  if (quick) {
-    const canWechatQuick = wxAuthorize && isWechatEnv() && hasShopWxSession() && !!savedProfile;
-
-    return (
-      <div className="shop-quick-login-page">
-        <header className="shop-quick-header">
-          <AppImage src="/logo.png" alt="杜康好客" wrapperClassName="shop-quick-logo" fit="contain" />
-          <h1 className="shop-quick-welcome">欢迎回来</h1>
-          <div className="shop-quick-welcome-line" />
-        </header>
-
-        <section className="shop-quick-store-card">
-          <div className="shop-quick-store-inner">
-            <div className="shop-quick-store-icon">
-              <span className="material-symbols-outlined shop-fill-icon">storefront</span>
-            </div>
-            <div>
-              <h2 className="shop-quick-store-name">{quickStoreName}</h2>
-              <p className="shop-quick-store-phone">{maskPhone(quickPhone)}</p>
-            </div>
-            <span className="shop-quick-verified">
-              <span className="material-symbols-outlined shop-fill-icon" style={{ fontSize: 14 }}>verified_user</span>
-              认证门店
-            </span>
-            <div className="shop-quick-switch">
-              <Link to="/login">
-                <span className="material-symbols-outlined" style={{ fontSize: 18 }}>sync</span>
-                切换账号
-              </Link>
-            </div>
-          </div>
-        </section>
-
-        <div className="shop-quick-actions">
-          {msg && <p className="shop-login-msg">{msg}</p>}
-          <ShopAgreementCheckbox
-            agreed={agreed}
-            onChange={setAgreed}
-            labelRef={agreementRef}
-          />
-          {canWechatQuick ? (
-            <button
-              type="button"
-              className="shop-quick-login-btn shop-quick-login-btn--wechat"
-              disabled={wxLoading}
-              onClick={() => void wechatLogin()}
-            >
-              <span className="material-symbols-outlined">chat</span>
-              <span>{wxLoading ? '登录中...' : '微信一键登录'}</span>
-            </button>
-          ) : (
-            <p className="shop-login-msg" style={{ textAlign: 'center' }}>
-              {wxAuthorize && !isWechatEnv()
-                ? '请在微信内打开以使用一键登录'
-                : '请使用验证码登录并绑定微信后，即可 7 天内免登录'}
-            </p>
-          )}
-          {!canWechatQuick && (
-            <Link to="/login" className="shop-quick-login-btn" style={{ textAlign: 'center', textDecoration: 'none' }}>
-              验证码登录
-            </Link>
-          )}
-          <div className="shop-quick-secure">
-            <span className="material-symbols-outlined" style={{ fontSize: 16 }}>lock</span>
-            <span>{canWechatQuick ? '微信验证 · 7 天内免登录' : '加密环境安全登录中'}</span>
-          </div>
-        </div>
-
-        <footer className="shop-quick-footer">
-          <p className="shop-login-footer-brand">SECURED BY DUKANG HERITAGE</p>
-          <p style={{ fontSize: 10, fontFamily: 'var(--font-label)' }}>© 2024 杜康酒业门店管理系统</p>
-        </footer>
-      </div>
-    );
-  }
-
   return (
     <div className="shop-login-page">
       <header className="shop-login-hero">
@@ -322,26 +172,9 @@ export default function LoginPage() {
             <span>{loading ? '登录中...' : '登录'}</span>
             {!loading && <span className="material-symbols-outlined">arrow_forward</span>}
           </button>
-
-          {wxAuthorize && (
-            <>
-              <div className="shop-login-divider">
-                <span className="shop-login-divider-line" />
-                <span className="shop-login-divider-text">或者</span>
-                <span className="shop-login-divider-line" />
-              </div>
-
-              <button
-                type="button"
-                className="shop-login-wechat"
-                disabled={wxLoading}
-                onClick={() => void wechatLogin()}
-              >
-                <span className="material-symbols-outlined">chat</span>
-                <span>{wxLoading ? '登录中...' : '微信一键登录'}</span>
-              </button>
-            </>
-          )}
+          <p className="shop-login-msg" style={{ textAlign: 'center', marginTop: 12 }}>
+            手机号验证成功后，7 天内无需再次输入验证码
+          </p>
         </div>
       </main>
 
@@ -350,11 +183,6 @@ export default function LoginPage() {
         <span className="material-symbols-outlined shop-fill-icon" style={{ opacity: 0.3, fontSize: 20, color: 'var(--color-outline)' }}>
           security
         </span>
-        {hasShopWxSession() && savedProfile && (
-          <p style={{ marginTop: 16, textAlign: 'center' }}>
-            <Link to="/login?quick=1" className="text-primary body-md">微信快捷登录</Link>
-          </p>
-        )}
       </footer>
     </div>
   );