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

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

apps/web/src/app/main.tsx

@@ -1,34 +1,99 @@
 /**
- * apps/web 唯一组装层(编码规范 §9):Provider、鉴权壳、SSE 连接。
- * 样式整文件搬自两台原型:设计令牌 + 全部 `jc-*` 组件样式 + vendor 皮肤。
+ * apps/web 唯一组装层(编码规范 §9):样式装载、Provider、鉴权壳、SSE 连接。
+ *
+ * **两台面各自装自己的皮肤。**
+ * 两份原型本是两个独立应用,各自只加载自己那两份 CSS:
+ *   工作台 = `proto.vendor.css`(原型皮肤)+ `app.css`(补充,作用域 `.proto-root`)
+ *   治理台 = `theme.css`(令牌 + 页面基座)+ `console.css`(gov-* 组件)
+ * 两份基座都写了 `body { min-width / background }` 这类**全局**规则,谁后加载谁赢 ——
+ * 四份一起塞进同一个文档,后加载的治理台基座会把工作台的壳整个盖掉(实测:布局全崩)。
+ * 所以按台面**分别装载**,这也正是 1:1 平移该有的样子:每台面拿到的样式集与它的原型一致。
  */
 import { StrictMode, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
-import { QueryClientProvider } from '@tanstack/react-query';
-import './styles/proto.vendor.css';
-import './styles/app.css';
-import './styles/theme.css';
-import './styles/console.css';
+import { QueryClientProvider, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { Session } from '@contracts';
+import { sessionRoute } from '@contracts';
 import { AppShell } from './app-shell.tsx';
 import { connectStream } from './subscribe.ts';
 import { GovShell } from './gov-shell.tsx';
-import { queryClient } from './query.ts';
+import { LoginPage } from '@features/auth';
+import { ApiCallError, call } from '@web-shared/typed-fetch.ts';
+import { queryClient, queryKeys } from './query.ts';
+import { applyTabIdentity } from './tab-identity.ts';
 
 const container = document.getElementById('root');
 if (!container) throw new Error('#root 缺失');
 
-/**
- * 两台面共一个 SPA:路径决定进哪台。
- * 路由状态即应用状态 —— 可深链(§9.2);TanStack Router 的类型化 search params 随后续接入。
+/** 路径或 hash 决定进哪台 —— 路由状态即应用状态,可深链(§9.2) */
+const isGovernance =
+  window.location.pathname.startsWith('/gov') || window.location.hash.startsWith('#/gov');
+
+// 网页标签的名与章 —— 样式装载前就挂上,标签从第一帧起就叫对名字
+applyTabIdentity(isGovernance);
+
+/*
+ * 样式先装、再渲染:CSS 落地后才挂 DOM,避免无样式闪烁。
+ * 台面切换靠整页导航(两台面的 body 基座互斥,不做客户端软切换)。
+ * 登录页两台面共用,故恒装 —— 它通篇作用域在 `.jc-login`,不与任一基座相争。
  */
+await import('./styles/login.css');
+if (isGovernance) {
+  await import('./styles/theme.css');
+  await import('./styles/console.css');
+} else {
+  await import('./styles/proto.vendor.css');
+  await import('./styles/app.css');
+}
+
+/**
+ * 鉴权壳(ADR-010)—— 会话是**服务端**的事:401 即落登录页。
+ * 前端不自存身份,刷新照样问一次 `/api/session`;登出后缓存整体清空,
+ * 免得上一个人的任务、审批、消息留在下一个人眼前。
+ */
+function Gate() {
+  const client = useQueryClient();
+  const session = useQuery({
+    queryKey: queryKeys.session,
+    queryFn: () => call<Session>(sessionRoute),
+    // 未登录是正常状态,不是故障 —— 不重试,直接落登录页
+    retry: (_count, error) => !(error instanceof ApiCallError && error.status === 401),
+  });
+
+  /*
+   * 判据要看 error,不能只看 data。
+   * TanStack Query 在**重取失败时保留上一次成功的 data** —— 会话过期或登出后重取拿到 401,
+   * `session.data` 依旧是旧身份;只认 data 就会停在一个空壳里,退不出去(实测如此)。
+   */
+  const expired = session.error instanceof ApiCallError && session.error.status === 401;
+  const authed = session.data !== undefined && !expired;
+
+  // SSE 只在登录后连:未登录时那条连接会被中间件 401 挡下
+  useEffect(() => (authed ? connectStream(client) : undefined), [authed, client]);
+
+  if (session.isPending) return null;
+  if (!authed) {
+    // 只落身份,**不要 clear()**:clear 会连同已挂载的观察者一起移除,
+    // 随后 setQueryData 建的是新条目,老观察者接不上 —— 界面会卡在「登录中…」(实测)。
+    // 缓存的清空由登出那侧的整页跳转保证,这里到达时本就是空的。
+    return <LoginPage onLogin={(s) => client.setQueryData(queryKeys.session, s)} />;
+  }
+
+  return isGovernance ? (
+    <GovShell />
+  ) : (
+    // .proto-root 是工作台补充样式的作用域(原型 app.css 通篇以它起头);
+    // 治理台不裹它 —— 裹了工作台的补充样式就会漏进治理台的树里
+    <div className="proto-root">
+      <AppShell />
+    </div>
+  );
+}
+
 function Root() {
-  // 单一 SSE 连接在组装层建立;feature 只管订阅缓存键,不自建连接、不轮询
-  useEffect(() => connectStream(queryClient), []);
-  const governance = window.location.pathname.startsWith('/gov') || window.location.hash.startsWith('#/gov');
   return (
     <QueryClientProvider client={queryClient}>
-      {/* .proto-root 是设计令牌的作用域(原型 app.css 的 `.proto-root .app-shell`) */}
-      <div className="proto-root">{governance ? <GovShell /> : <AppShell />}</div>
+      <Gate />
     </QueryClientProvider>
   );
 }