diff --git a/web/src/App.tsx b/web/src/App.tsx
index bd7c99e1..1b3151e5 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -6,6 +6,7 @@ import { ConfirmDialogRoot } from '@/app/ConfirmDialogRoot';
import { GlobalToastRoot } from '@/app/GlobalToastRoot';
import { KickedNoticeRoot } from '@/app/KickedNoticeRoot';
import { RequireAuth } from '@/app/RequireAuth';
+import { SecurityChallengeModal } from '@/app/SecurityChallengeModal';
import { EnterpriseRegisterPage } from '@/features/auth/EnterpriseRegisterPage';
import { LoginPage } from '@/features/auth/LoginPage';
import { ResetPasswordPage } from '@/features/auth/ResetPasswordPage';
@@ -106,6 +107,7 @@ export default function App() {
+
);
}
diff --git a/web/src/app/RequireAuth.tsx b/web/src/app/RequireAuth.tsx
index 29da0a8a..2651de4a 100644
--- a/web/src/app/RequireAuth.tsx
+++ b/web/src/app/RequireAuth.tsx
@@ -106,9 +106,17 @@ export function RequireAuth() {
return (
{restoreTimedOut ? '连接时间较长，你可以继续等待，或改为重新登录' : '正在恢复登录状态…'}
-
- 改为重新登录
-
+ {/* Only past the same timeout the message text itself waits for -- a normal restore usually
+ resolves in well under a second (real WS round trip), and this link showing unconditionally
+ from the very first frame made every ordinary reload/deep-link flash a "重新登录" escape
+ hatch that had nothing to escape from (a real, reported false-alarm: "短暂白屏并误显改为
+ 重新登录"). The escape hatch is only actually useful once restoreTimedOut has already told
+ the user this is taking longer than normal. */}
+ {restoreTimedOut ? (
+
+ 改为重新登录
+
+ ) : null}
);
}
diff --git a/web/src/app/SecurityChallengeModal.tsx b/web/src/app/SecurityChallengeModal.tsx
new file mode 100644
index 00000000..4835a661
--- /dev/null
+++ b/web/src/app/SecurityChallengeModal.tsx
@@ -0,0 +1,144 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { useEscapeKey } from '@/lib/hooks';
+import { ImApiError } from '@/lib/api/client';
+import { requestSecurityChallenge, verifySecurityChallenge } from '@/lib/api/security';
+import { useSecurityChallengeStore } from '@/stores/securityChallenge';
+
+/** Mounted once at the app root (App.tsx), same placement/pattern as ConfirmDialogRoot -- renders
+ * whatever `requestActionToken()` (stores/securityChallenge.ts) most recently asked for: the
+ * protocol's sensitive-action SMS re-verification (docs/IM-前后端对接文档.md:762-766), needed before
+ * a group can actually be dissolved (or its ownership transferred) -- both require `X-Action-Token`,
+ * and there was previously no UI anywhere in this app that could produce one. */
+export function SecurityChallengeModal() {
+ const pending = useSecurityChallengeStore((s) => s.pending);
+ const respond = useSecurityChallengeStore((s) => s.respond);
+ const [challengeId, setChallengeId] = useState('');
+ const [phoneMask, setPhoneMask] = useState('');
+ const [code, setCode] = useState('');
+ const [seconds, setSeconds] = useState(0);
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState('');
+ const timerRef = useRef(undefined);
+ useEscapeKey(() => respond(null));
+
+ const tick = (initial: number) => {
+ window.clearInterval(timerRef.current);
+ setSeconds(initial);
+ timerRef.current = window.setInterval(() => {
+ setSeconds((s) => {
+ if (s <= 1) {
+ window.clearInterval(timerRef.current);
+ return 0;
+ }
+ return s - 1;
+ });
+ }, 1000);
+ };
+
+ // Fires the first SMS the moment the modal opens -- the doc's own flow has no separate "get code"
+ // click for this endpoint (unlike VerificationCodeButton's register/reset-password scenes), since
+ // the phone number isn't something the user enters here at all (read server-side from the login
+ // identity), so there's nothing to wait on the user to fill in first.
+ useEffect(() => {
+ window.clearInterval(timerRef.current);
+ setChallengeId('');
+ setCode('');
+ setError('');
+ setSeconds(0);
+ if (!pending) return undefined;
+ let cancelled = false;
+ requestSecurityChallenge(pending.scene)
+ .then((data) => {
+ if (cancelled) return;
+ setChallengeId(data.challenge_id);
+ setPhoneMask(data.phone_mask);
+ tick(data.resend_after_seconds || 60);
+ })
+ .catch((err) => {
+ if (cancelled) return;
+ setError(err instanceof ImApiError ? err.message : '验证码发送失败，请重试');
+ });
+ return () => {
+ cancelled = true;
+ window.clearInterval(timerRef.current);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [pending?.scene]);
+
+ if (!pending) return null;
+
+ const resend = () => {
+ if (busy || seconds > 0) return;
+ setError('');
+ setBusy(true);
+ requestSecurityChallenge(pending.scene)
+ .then((data) => {
+ setChallengeId(data.challenge_id);
+ setPhoneMask(data.phone_mask);
+ tick(data.resend_after_seconds || 60);
+ })
+ .catch((err) => setError(err instanceof ImApiError ? err.message : '验证码发送失败，请重试'))
+ .finally(() => setBusy(false));
+ };
+
+ const submit = async () => {
+ if (!challengeId || !/^\d{6}$/.test(code)) return setError('请输入 6 位验证码');
+ setBusy(true);
+ setError('');
+ try {
+ const verified = await verifySecurityChallenge(challengeId, code);
+ respond(verified.action_token);
+ } catch (err) {
+ setError(err instanceof ImApiError ? err.message : '验证码错误或已过期');
+ setBusy(false);
+ }
+ };
+
+ return (
+