基线:鉴权会话+工作组+工作台三区修复+编排工作区+产品设计文档

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m

apps/web/src/app/gov-shell.tsx

@@ -8,6 +8,9 @@
  * 刷新与深链都能完整还原;前端零过程状态。
  */
 import { useCallback, useEffect, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { logoutRoute } from '@contracts';
+import { call } from '@web-shared/typed-fetch.ts';
 import { Ico } from '@web-shared/Ico.tsx';
 import { TABS, ZM, ZONES, routeLabel } from '@web-shared/gov/gov-route.ts';
 import type { GovZone, Nav, Route } from '@web-shared/gov/gov-route.ts';
@@ -48,6 +51,17 @@ export function GovShell() {
   const [place, setPlace] = useState<Place>(readPlace);
   const staff = useGovStaff();
   const tasks = useGovTasks();
+  const queryClient = useQueryClient();
+
+  /** 登出后整体清空缓存 —— 治理台看到的是全组织数据,更不能留给下一个人 */
+  const logout = useMutation({
+    mutationFn: () => call<{ ok: boolean }>(logoutRoute),
+    onSuccess: () => {
+      queryClient.clear();
+      // 整页导航:SSE 连接、组件状态、路由位置一并归零 —— 登出不留残影
+      window.location.assign('/');
+    },
+  });
 
   // 浏览器前进 / 后退即导航 —— 路由状态就是应用状态
   useEffect(() => {
@@ -145,6 +159,10 @@ export function GovShell() {
               <Ico name="list-checks" s={13} />
               工作台
             </a>
+            <button className="g-tbtn" onClick={() => logout.mutate()} disabled={logout.isPending}>
+              <Ico name="log-out" s={13} />
+              登出
+            </button>
           </div>
         </header>