ChaiHaoandClaude Fable 5
ac85ecf2ea
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KeDBx2PHLavbURXB8LJJ7m
106 lines
4.4 KiB
TypeScript
106 lines
4.4 KiB
TypeScript
/**
|
|
* 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, 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 { 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 缺失');
|
|
|
|
/** 路径或 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() {
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<Gate />
|
|
</QueryClientProvider>
|
|
);
|
|
}
|
|
|
|
createRoot(container).render(
|
|
<StrictMode>
|
|
<Root />
|
|
</StrictMode>,
|
|
);
|