接入统一鉴权中心(Keycloak,ADR-012);活动模块 L1/L2 运营态模版(历史活动列表+检索+沙箱);数据域与工作台界面改版;个人中心 /me

apps/web/src/app/main.tsx

@@ -13,13 +13,17 @@
 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 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';
@@ -39,6 +43,7 @@ const legacy = window.location.pathname.startsWith('/gov')
 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)
@@ -69,40 +74,96 @@ if (govSurface !== undefined) {
 await import('./styles/press.css');
 
 /**
- * 鉴权壳(ADR-010)—— 会话是**服务端**的事:401 即落登录页。
- * 前端不自存身份,刷新照样问一次 `/api/session`;登出后缓存整体清空,
- * 免得上一个人的任务、审批、消息留在下一个人眼前。
+ * 鉴权壳(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 session = useQuery({
-    queryKey: queryKeys.session,
-    queryFn: () => call<Session>(sessionRoute),
-    // 未登录是正常状态,不是故障 —— 不重试,直接落登录页
+  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;
   /*
-   * 判据要看 error,不能只看 data。
-   * TanStack Query 在**重取失败时保留上一次成功的 data** —— 会话过期或登出后重取拿到 401,
-   * `session.data` 依旧是旧身份;只认 data 就会停在一个空壳里,退不出去(实测如此)。
+   * 深链保护:进 /design /ops 而 ends 不含该端 → 落到能进的第一个端;
+   * 工作台 / 个人中心同理要看 'workbench'。一个都进不了时 Denied 已接住,到不了这里。
    */
-  const expired = session.error instanceof ApiCallError && session.error.status === 401;
-  const authed = session.data !== undefined && !expired;
+  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 挡下
-  useEffect(() => (authed ? connectStream(client) : undefined), [authed, client]);
+  const streaming = me.data !== undefined && !blocked;
+  useEffect(() => (streaming ? connectStream(client) : undefined), [streaming, client]);
 
-  if (session.isPending) return null;
-  if (!authed) {
-    // 只落身份,**不要 clear()**:clear 会连同已挂载的观察者一起移除,
-    // 随后 setQueryData 建的是新条目,老观察者接不上 —— 界面会卡在「登录中…」(实测)。
-    // 缓存的清空由登出那侧的整页跳转保证,这里到达时本就是空的。
-    return <LoginPage onLogin={(s) => client.setQueryData(queryKeys.session, s)} />;
+  // 鉴权中心本身没应答(网络 / 配置)—— 摆实话,不落登录页打转
+  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 通篇以它起头);
     // 治理台不裹它 —— 裹了工作台的补充样式就会漏进治理台的树里