Refine account modal entry flow and local web binding

src/components/auth/AccountModal.test.tsx

@@ -26,6 +26,7 @@ const baseUser: AuthUser = {
 
 function renderAccountModal(overrides?: {
   user?: AuthUser;
+  entryMode?: 'settings' | 'account';
   riskBlocks?: AuthRiskBlockSummary[];
   sessions?: AuthSessionSummary[];
   auditLogs?: AuthAuditLogEntry[];
@@ -41,6 +42,7 @@ function renderAccountModal(overrides?: {
     <AccountModal
       user={overrides?.user ?? baseUser}
       isOpen
+      entryMode={overrides?.entryMode ?? 'settings'}
       initialSection={overrides?.initialSection ?? null}
       platformTheme="light"
       riskBlocks={overrides?.riskBlocks ?? []}
@@ -91,6 +93,21 @@ test('settings header uses a generic title instead of the phone number', () => {
   expect(screen.queryByRole('button', { name: '退出全部设备' })).toBeNull();
 });
 
+test('direct account entry does not render the settings shell as another dialog', () => {
+  renderAccountModal({ entryMode: 'account' });
+
+  const accountDialog = screen.getByRole('dialog', { name: '账号信息' });
+  expect(accountDialog).toBeTruthy();
+  expect(screen.queryByRole('dialog', { name: '设置与账号安全' })).toBeNull();
+  expect(screen.queryByText('设置与账号安全')).toBeNull();
+  expect(
+    within(accountDialog).getByRole('button', { name: '关闭' }),
+  ).toBeTruthy();
+  expect(
+    within(accountDialog).queryByRole('button', { name: '返回' }),
+  ).toBeNull();
+});
+
 test('account actions open in independent panels instead of inline expansion', async () => {
   const user = userEvent.setup();
 
@@ -131,9 +148,9 @@ test('nested settings panels keep back navigation without an extra close action'
   expect(
     within(accountDialog).getByRole('button', { name: '返回' }),
   ).toBeTruthy();
-  expect(
-    accountHeader?.lastElementChild?.textContent?.includes('返回'),
-  ).toBe(true);
+  expect(accountHeader?.lastElementChild?.textContent?.includes('返回')).toBe(
+    true,
+  );
   expect(
     within(accountDialog).queryByRole('button', { name: '关闭' }),
   ).toBeNull();

src/components/auth/AccountModal.tsx

@@ -20,6 +20,7 @@ import { CaptchaChallengeField } from './CaptchaChallengeField';
 type AccountModalProps = {
   user: AuthUser;
   isOpen: boolean;
+  entryMode?: 'settings' | 'account';
   initialSection?: PlatformSettingsSection | null;
   platformTheme: PlatformTheme;
   riskBlocks: AuthRiskBlockSummary[];
@@ -159,6 +160,7 @@ function OverlayPanel({
   title,
   description,
   action,
+  standalone = false,
   onBack,
   onClose,
   children,
@@ -167,64 +169,73 @@ function OverlayPanel({
   title: string;
   description?: string;
   action?: ReactNode;
+  standalone?: boolean;
   onBack?: () => void;
   onClose: () => void;
   children: ReactNode;
 }) {
+  const panel = (
+    <div
+      className="platform-auth-card flex max-h-full w-full min-h-0 flex-col overflow-hidden rounded-[28px] p-5 sm:max-w-3xl sm:p-6"
+      role="dialog"
+      aria-modal="true"
+      aria-label={title}
+      style={{ maxHeight: ACCOUNT_MODAL_MAX_HEIGHT }}
+      onClick={(event) => event.stopPropagation()}
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div className="min-w-0">
+          <div className="text-xs uppercase tracking-[0.28em] text-[var(--platform-cool-text)]">
+            {eyebrow}
+          </div>
+          <div className="mt-2 text-2xl font-semibold text-[var(--platform-text-strong)]">
+            {title}
+          </div>
+          {description ? (
+            <div className="mt-2 text-sm text-[var(--platform-text-base)]">
+              {description}
+            </div>
+          ) : null}
+        </div>
+        <div className="flex items-center gap-2">
+          {action}
+          {onBack ? (
+            <button
+              type="button"
+              autoFocus
+              className="platform-button platform-button--ghost min-h-0 rounded-full px-3 py-1.5 text-xs"
+              onClick={onBack}
+            >
+              返回
+            </button>
+          ) : (
+            <button
+              type="button"
+              className="platform-button platform-button--ghost min-h-0 rounded-full px-3 py-1.5 text-xs"
+              onClick={onClose}
+            >
+              关闭
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="mt-5 min-h-0 flex-1 overflow-y-auto overscroll-y-contain pr-1">
+        {children}
+      </div>
+    </div>
+  );
+
+  if (standalone) {
+    return panel;
+  }
+
   return (
     <div
       className="absolute inset-0 z-10 flex items-end bg-black/20 backdrop-blur-[2px] sm:items-center sm:justify-center sm:p-4"
       onClick={onBack ?? onClose}
     >
-      <div
-        className="platform-auth-card flex max-h-full w-full min-h-0 flex-col overflow-hidden rounded-[28px] p-5 sm:max-w-3xl sm:p-6"
-        role="dialog"
-        aria-modal="true"
-        aria-label={title}
-        style={{ maxHeight: ACCOUNT_MODAL_MAX_HEIGHT }}
-        onClick={(event) => event.stopPropagation()}
-      >
-        <div className="flex items-start justify-between gap-4">
-          <div className="min-w-0">
-            <div className="text-xs uppercase tracking-[0.28em] text-[var(--platform-cool-text)]">
-              {eyebrow}
-            </div>
-            <div className="mt-2 text-2xl font-semibold text-[var(--platform-text-strong)]">
-              {title}
-            </div>
-            {description ? (
-              <div className="mt-2 text-sm text-[var(--platform-text-base)]">
-                {description}
-              </div>
-            ) : null}
-          </div>
-          <div className="flex items-center gap-2">
-            {action}
-            {onBack ? (
-              <button
-                type="button"
-                autoFocus
-                className="platform-button platform-button--ghost min-h-0 rounded-full px-3 py-1.5 text-xs"
-                onClick={onBack}
-              >
-                返回
-              </button>
-            ) : (
-              <button
-                type="button"
-                className="platform-button platform-button--ghost min-h-0 rounded-full px-3 py-1.5 text-xs"
-                onClick={onClose}
-              >
-                关闭
-              </button>
-            )}
-          </div>
-        </div>
-
-        <div className="mt-5 min-h-0 flex-1 overflow-y-auto overscroll-y-contain pr-1">
-          {children}
-        </div>
-      </div>
+      {panel}
     </div>
   );
 }
@@ -266,6 +277,7 @@ function ThemeOptionCard({
 export function AccountModal({
   user,
   isOpen,
+  entryMode = 'settings',
   initialSection = null,
   platformTheme,
   riskBlocks,
@@ -314,6 +326,7 @@ export function AccountModal({
   const sectionTriggerRef = useRef<HTMLButtonElement | null>(null);
   const changePhoneTriggerRef = useRef<HTMLButtonElement | null>(null);
   const passwordTriggerRef = useRef<HTMLButtonElement | null>(null);
+  const isDirectAccountMode = entryMode === 'account';
 
   const focusAfterNextPaint = useCallback((element: HTMLElement | null) => {
     if (!element) {
@@ -347,7 +360,11 @@ export function AccountModal({
       return;
     }
 
-    setActiveSection(normalizeSettingsSection(initialSection));
+    setActiveSection(
+      isDirectAccountMode
+        ? 'account'
+        : normalizeSettingsSection(initialSection),
+    );
     setIsChangePhonePanelOpen(false);
     setIsPasswordPanelOpen(false);
     setAccountNotice('');
@@ -356,7 +373,13 @@ export function AccountModal({
     passwordTriggerRef.current = null;
     resetChangePhoneDraft();
     resetPasswordDraft();
-  }, [initialSection, isOpen, resetChangePhoneDraft, resetPasswordDraft]);
+  }, [
+    initialSection,
+    isDirectAccountMode,
+    isOpen,
+    resetChangePhoneDraft,
+    resetPasswordDraft,
+  ]);
 
   useEffect(() => {
     const settingsHome = settingsHomeRef.current;
@@ -446,47 +469,55 @@ export function AccountModal({
       onClick={onClose}
     >
       <div
-        className="platform-auth-card relative flex h-[min(100%,calc(100vh-2rem))] w-full max-w-5xl min-h-0 flex-col overflow-hidden rounded-[28px] p-5 sm:p-6"
-        role="dialog"
-        aria-modal="true"
-        aria-label="设置与账号安全"
+        className={
+          isDirectAccountMode
+            ? 'relative flex max-h-full w-full max-w-3xl min-h-0 flex-col overflow-hidden'
+            : 'platform-auth-card relative flex h-[min(100%,calc(100vh-2rem))] w-full max-w-5xl min-h-0 flex-col overflow-hidden rounded-[28px] p-5 sm:p-6'
+        }
+        role={isDirectAccountMode ? undefined : 'dialog'}
+        aria-modal={isDirectAccountMode ? undefined : true}
+        aria-label={isDirectAccountMode ? undefined : '设置与账号安全'}
         style={{ maxHeight: ACCOUNT_MODAL_MAX_HEIGHT }}
         onClick={(event) => event.stopPropagation()}
       >
-        <div className="flex items-start justify-between gap-4">
-          <div>
-            <div className="text-2xl font-semibold text-[var(--platform-text-strong)]">
-              设置与账号安全
+        {!isDirectAccountMode ? (
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <div className="text-2xl font-semibold text-[var(--platform-text-strong)]">
+                设置与账号安全
+              </div>
             </div>
+            <button
+              type="button"
+              className="platform-button platform-button--ghost min-h-0 rounded-full px-3 py-1.5 text-xs"
+              onClick={onClose}
+            >
+              关闭
+            </button>
           </div>
-          <button
-            type="button"
-            className="platform-button platform-button--ghost min-h-0 rounded-full px-3 py-1.5 text-xs"
-            onClick={onClose}
-          >
-            关闭
-          </button>
-        </div>
+        ) : null}
 
-        <div className="mt-5 min-h-0 flex-1 overflow-y-auto overscroll-y-contain pr-1">
-          <div ref={settingsHomeRef} className="flex min-h-0 flex-col gap-4">
-            <div className="grid gap-3 sm:grid-cols-2">
-              {SETTINGS_SECTIONS.map((section) => (
-                <SettingsEntryCard
-                  key={section.id}
-                  label={section.label}
-                  detail={section.detail}
-                  summary={sectionSummaries[section.id]}
-                  onClick={(trigger) => {
-                    sectionTriggerRef.current = trigger;
-                    setAccountNotice('');
-                    setActiveSection(section.id);
-                  }}
-                />
-              ))}
+        {!isDirectAccountMode ? (
+          <div className="mt-5 min-h-0 flex-1 overflow-y-auto overscroll-y-contain pr-1">
+            <div ref={settingsHomeRef} className="flex min-h-0 flex-col gap-4">
+              <div className="grid gap-3 sm:grid-cols-2">
+                {SETTINGS_SECTIONS.map((section) => (
+                  <SettingsEntryCard
+                    key={section.id}
+                    label={section.label}
+                    detail={section.detail}
+                    summary={sectionSummaries[section.id]}
+                    onClick={(trigger) => {
+                      sectionTriggerRef.current = trigger;
+                      setAccountNotice('');
+                      setActiveSection(section.id);
+                    }}
+                  />
+                ))}
+              </div>
             </div>
           </div>
-        </div>
+        ) : null}
 
         {activeSection === 'appearance' ? (
           <OverlayPanel
@@ -538,7 +569,8 @@ export function AccountModal({
             eyebrow="身份信息"
             title="账号信息"
             description="统一查看身份、安全状态、登录设备与最近操作。"
-            onBack={closeSectionPanel}
+            standalone={isDirectAccountMode}
+            onBack={isDirectAccountMode ? undefined : closeSectionPanel}
             onClose={onClose}
           >
             <div className="flex min-h-0 flex-col gap-4">
@@ -671,7 +703,10 @@ export function AccountModal({
                           <span>{block.title}</span>
                           <span className="text-xs">
                             剩余约{' '}
-                            {Math.max(1, Math.ceil(block.remainingSeconds / 60))}{' '}
+                            {Math.max(
+                              1,
+                              Math.ceil(block.remainingSeconds / 60),
+                            )}{' '}
                             分钟
                           </span>
                         </div>
@@ -965,7 +1000,9 @@ export function AccountModal({
                       type="password"
                       autoComplete="current-password"
                       placeholder="首次设置可留空"
-                      onChange={(event) => setCurrentPassword(event.target.value)}
+                      onChange={(event) =>
+                        setCurrentPassword(event.target.value)
+                      }
                     />
                   </label>
                   <label className="grid gap-2 text-sm text-[var(--platform-text-base)]">

src/components/auth/AuthGate.tsx

@@ -84,6 +84,9 @@ export function AuthGate({ children }: AuthGateProps) {
   const [wechatLoading, setWechatLoading] = useState(false);
   const [showLoginModal, setShowLoginModal] = useState(false);
   const [showSettingsModal, setShowSettingsModal] = useState(false);
+  const [settingsEntryMode, setSettingsEntryMode] = useState<
+    'settings' | 'account'
+  >('settings');
   const [initialSettingsSection, setInitialSettingsSection] =
     useState<PlatformSettingsSection | null>(null);
   const [sessions, setSessions] = useState<AuthSessionSummary[]>([]);
@@ -126,6 +129,7 @@ export function AuthGate({ children }: AuthGateProps) {
     setStatus('unauthenticated');
     setShowLoginModal(false);
     setShowSettingsModal(false);
+    setSettingsEntryMode('settings');
     setInitialSettingsSection(null);
     setSessions([]);
     setAuditLogs([]);
@@ -169,6 +173,12 @@ export function AuthGate({ children }: AuthGateProps) {
     setError('');
   }, []);
 
+  const closeSettingsModal = useCallback(() => {
+    setShowSettingsModal(false);
+    setSettingsEntryMode('settings');
+    setInitialSettingsSection(null);
+  }, []);
+
   const openLoginModal = useCallback(
     (postLoginAction?: (() => void) | null) => {
       if (readyUser) {
@@ -192,6 +202,7 @@ export function AuthGate({ children }: AuthGateProps) {
   const openSettingsModal = useCallback(
     (section?: PlatformSettingsSection) => {
       if (readyUser) {
+        setSettingsEntryMode('settings');
         setInitialSettingsSection(section ?? null);
         setShowSettingsModal(true);
         return;
@@ -203,8 +214,15 @@ export function AuthGate({ children }: AuthGateProps) {
   );
 
   const openAccountModal = useCallback(() => {
-    openSettingsModal('account');
-  }, [openSettingsModal]);
+    if (readyUser) {
+      setSettingsEntryMode('account');
+      setInitialSettingsSection('account');
+      setShowSettingsModal(true);
+      return;
+    }
+
+    openLoginModal();
+  }, [openLoginModal, readyUser]);
 
   useEffect(() => {
     let isActive = true;
@@ -224,7 +242,7 @@ export function AuthGate({ children }: AuthGateProps) {
 
       const resolveGuestFallback = async () => {
         try {
-          const options = await loadLoginOptions();
+          await loadLoginOptions();
           if (!isActive) {
             return;
           }
@@ -555,6 +573,7 @@ export function AuthGate({ children }: AuthGateProps) {
             <AccountModal
               user={readyUser}
               isOpen={showSettingsModal}
+              entryMode={settingsEntryMode}
               initialSection={initialSettingsSection}
               platformTheme={settings.platformTheme}
               riskBlocks={riskBlocks}
@@ -566,7 +585,7 @@ export function AuthGate({ children }: AuthGateProps) {
               isHydratingSettings={settings.isHydratingSettings}
               isPersistingSettings={settings.isPersistingSettings}
               settingsError={settings.settingsError}
-              onClose={() => setShowSettingsModal(false)}
+              onClose={closeSettingsModal}
               onPlatformThemeChange={settings.setPlatformTheme}
               onLogout={logoutCurrentSession}
               onRefreshRiskBlocks={async () => {