Archived
189 lines
8.2 KiB
TypeScript
189 lines
8.2 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 { Principal } from '@contracts';
|
|
import { meRoute } from '@contracts';
|
|
import { AppShell } from './app-shell.tsx';
|
|
import { MePage } from '@features/desk-me';
|
|
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 { initAuth, logout } from '@web-shared/auth.ts';
|
|
import { Ico } from '@web-shared/Ico.tsx';
|
|
import { Btn } from '@web-shared/Btn.tsx';
|
|
import { queryClient, queryKeys } from './query.ts';
|
|
import { applyTabIdentity } from './tab-identity.ts';
|
|
import type { TabSurface } from './tab-identity.ts';
|
|
import { SURFACE_META, legacyGovTarget } from '@web-shared/gov/surfaces.ts';
|
|
import type { Surface } from '@web-shared/gov/surfaces.ts';
|
|
|
|
const container = document.getElementById('root');
|
|
if (!container) throw new Error('#root 缺失');
|
|
|
|
/*
|
|
* 旧 `/gov` 链接一条不死:带着深链原样改写到新台面(replace —— 不在历史里留一个回不去的地址)。
|
|
* 治理中心一分为二后,`/gov` 只剩这一个职责。
|
|
*/
|
|
const legacy = window.location.pathname.startsWith('/gov')
|
|
? (legacyGovTarget(window.location.hash) ?? `${SURFACE_META.ops.path}#/ops/cockpit/dash`)
|
|
: undefined;
|
|
if (legacy !== undefined) window.location.replace(legacy);
|
|
|
|
/** 路径决定进哪一面 —— 路由状态即应用状态,可深链(§9.2) */
|
|
const meSurface = window.location.pathname.startsWith('/me');
|
|
const surface: TabSurface = window.location.pathname.startsWith(SURFACE_META.design.path)
|
|
? 'design'
|
|
: window.location.pathname.startsWith(SURFACE_META.ops.path)
|
|
? 'ops'
|
|
: 'desk';
|
|
const govSurface: Surface | undefined = surface === 'desk' ? undefined : surface;
|
|
|
|
// 网页标签的名与章 —— 样式装载前就挂上,标签从第一帧起就叫对名字
|
|
applyTabIdentity(surface);
|
|
|
|
/*
|
|
* 样式先装、再渲染:CSS 落地后才挂 DOM,避免无样式闪烁。
|
|
* 台面切换靠整页导航(工作台与治理面的 body 基座互斥,不做客户端软切换)。
|
|
* 登录页三面共用,故恒装 —— 它通篇作用域在 `.jc-login`,不与任一基座相争。
|
|
*/
|
|
await import('./styles/login.css');
|
|
if (govSurface !== undefined) {
|
|
await import('./styles/theme.css');
|
|
await import('./styles/console.css');
|
|
} else {
|
|
await import('./styles/proto.vendor.css');
|
|
await import('./styles/app.css');
|
|
}
|
|
/*
|
|
* 键感与「在办」那一层三面共用,**装在最后** —— 同名规则以它为准。
|
|
* (2026-08-24 用户:「点击了都不知道点没点上」;见 styles/press.css 头注)
|
|
*/
|
|
await import('./styles/press.css');
|
|
|
|
/**
|
|
* 鉴权壳(ADR-012)—— 统一鉴权中心后,身份分两层:
|
|
*
|
|
* ① **登录态**:浏览器与 Keycloak 之间的事,模块加载时 `initAuth()` 静默探测一次
|
|
* (隐藏 iframe,用户无感);没有就摆登录页,一键跳统一登录。
|
|
* ② **准入**:`GET /api/me` 回答「我是谁、能进哪几个端(`ends`)」。
|
|
* 入口亮灯与深链保护都只看 `ends`;`ends` 为空也 200 —— 摆「未授权」页,不落登录页。
|
|
*
|
|
* token 只活在 keycloak-js 的内存里,刷新页面靠 SSO 会话静默恢复(手册 §16,不"优化")。
|
|
*/
|
|
const auth = await initAuth().catch(() => undefined);
|
|
|
|
/** 未授权提示页(角色不够 / ends 为空共用)—— 与登录页同一套 jc-login 皮肤 */
|
|
function Denied({ title, desc }: { title: string; desc: string }) {
|
|
return (
|
|
<div className="jc-login">
|
|
<div className="jc-login-card">
|
|
<span className="jc-login-mark">
|
|
<Ico name="shield-check" s={24} />
|
|
</span>
|
|
<h1 className="jc-login-title">{title}</h1>
|
|
<p className="jc-login-sub">{desc}</p>
|
|
{/* 角色不够时跳登录页没用(还是同一个人)—— 给的是登出,换账号再来(手册 §4.3) */}
|
|
<Btn className="jc-login-go" onClick={() => void logout()}>
|
|
退出登录
|
|
</Btn>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Gate() {
|
|
const client = useQueryClient();
|
|
const me = useQuery({
|
|
queryKey: queryKeys.me,
|
|
queryFn: () => call<Principal>(meRoute),
|
|
// 只有登录了才问 /api/me;401 是正常状态(会话没了),不重试
|
|
enabled: auth?.authenticated === true && auth.authorized,
|
|
retry: (_count, error) => !(error instanceof ApiCallError && error.status === 401),
|
|
});
|
|
|
|
const ends = me.data?.ends;
|
|
/*
|
|
* 深链保护:进 /design /ops 而 ends 不含该端 → 落到能进的第一个端;
|
|
* 工作台 / 个人中心同理要看 'workbench'。一个都进不了时 Denied 已接住,到不了这里。
|
|
*/
|
|
const need: Surface | 'workbench' | undefined =
|
|
govSurface ?? (meSurface || surface === 'desk' ? 'workbench' : undefined);
|
|
const blocked = ends !== undefined && ends.length > 0 && need !== undefined && !ends.includes(need);
|
|
// 落到能进的第一个端:工作台优先,否则第一个治理端
|
|
const firstGovEnd = ends?.find((e): e is Surface => e === 'design' || e === 'ops');
|
|
const fallback =
|
|
ends?.includes('workbench') === true ? '/' : firstGovEnd !== undefined ? SURFACE_META[firstGovEnd].path : undefined;
|
|
|
|
useEffect(() => {
|
|
if (blocked && fallback !== undefined) window.location.replace(fallback);
|
|
}, [blocked, fallback]);
|
|
|
|
// SSE 只在登录后连:未登录时那条连接会被中间件 401 挡下
|
|
const streaming = me.data !== undefined && !blocked;
|
|
useEffect(() => (streaming ? connectStream(client) : undefined), [streaming, client]);
|
|
|
|
// 鉴权中心本身没应答(网络 / 配置)—— 摆实话,不落登录页打转
|
|
if (auth === undefined)
|
|
return <Denied title="鉴权中心暂时连不上" desc="请检查网络后刷新重试;反复出现请联系管理员。" />;
|
|
if (!auth.authenticated) return <LoginPage />;
|
|
if (!auth.authorized)
|
|
return <Denied title="你没有本系统的访问权限" desc="当前账号缺少本端要求的角色,请退出后换账号登录。" />;
|
|
|
|
if (me.isPending) return null;
|
|
// 401(token 救不回来)落登录页;别的错误如实摆出来,不装没发生
|
|
if (me.data === undefined) {
|
|
if (me.error instanceof ApiCallError && me.error.status === 401) return <LoginPage />;
|
|
return <Denied title="身份确认失败" desc={me.error instanceof Error ? me.error.message : '请刷新重试'} />;
|
|
}
|
|
if (me.data.ends.length === 0)
|
|
return (
|
|
<Denied
|
|
title="还没有可进的端"
|
|
desc={`你的角色(${me.data.roles.join('、') || '无'})还没有被授权进入任何一端,请联系运营中心。`}
|
|
/>
|
|
);
|
|
if (blocked) return null; // 重定向进行中(effect 已发)
|
|
|
|
return govSurface !== undefined ? (
|
|
<GovShell surface={govSurface} />
|
|
) : meSurface ? (
|
|
// 个人中心与工作台同皮肤,整页导航进出(2026-08-25)
|
|
<div className="proto-root">
|
|
<MePage />
|
|
</div>
|
|
) : (
|
|
// .proto-root 是工作台补充样式的作用域(原型 app.css 通篇以它起头);
|
|
// 治理台不裹它 —— 裹了工作台的补充样式就会漏进治理台的树里
|
|
<div className="proto-root">
|
|
<AppShell />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Root() {
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<Gate />
|
|
</QueryClientProvider>
|
|
);
|
|
}
|
|
|
|
createRoot(container).render(
|
|
<StrictMode>
|
|
<Root />
|
|
</StrictMode>,
|
|
);
|