feat(portal-shell): v2.0 P0 shadcn standardization + security + streaming + error handling

- shadcn/ui 标准化:废弃纸感令牌,统一 bg-background/text-foreground 等
- Tailwind v4 + @theme inline,移除 tailwind.config.js
- React 19 use() + Suspense 流式渲染,首屏骨架秒出
- 三级错误边界:Route → Section → Widget 层层兜底
- 错误上报:useErrorReport → sendBeacon → /api/log mock 端点
- 三层安全边界:L1 角色门禁 / L2 权限点门禁 / L3 数据范围
- 权限位图 base36 压缩:67 权限点 → ~14 字符,JWT 体积减少 ≥ 99%
- notify 统一 Toast 封装,禁止业务直接 import sonner
- PluginBoundary 替代 PluginLoader(错误边界 + Suspense + Skeleton 三件套)

验证:typecheck 0 错误 / lint 0 错误 / build 6 路由生成成功
This commit is contained in:
SpecialX
2026-07-17 16:10:05 +08:00
parent f7e52b5b7f
commit 9cedf0c437
140 changed files with 10872 additions and 3192 deletions

View File

@@ -1,17 +1,24 @@
"use client";
/**
* LayoutManager - 5 种 Layout 模板渲染器v2.1 M8
* LayoutManager - 5 种 Layout 模板渲染器v2.1 M8 + shadcn 令牌
*
* | layoutId | 布局 | slots |
* | -------- | ------------------------- | ------------------------ |
* | classic | TopBar + SideNav + Main | top / side / main |
* | focus | TopBar + 全宽 Main | top / main |
* | split | TopBar + 左右等分 Main | top / main-left / main-right |
* | triple | TopBar + SideNav + Main + RightRail | top / side / main / right |
* | canvas | TopBar + 自由摆放 | top / canvas-grid |
* | layoutId | 布局 | slots |
* | -------- | --------------------------------- | ---------------------------------- |
* | classic | TopBar + SideNav + Main | top / side / main |
* | focus | TopBar + 全宽 Main | top / main |
* | split | TopBar + 左右等分 Main | top / main-left / main-right |
* | triple | TopBar + SideNav + Main + RightRail | top / side / main / right |
* | canvas | TopBar + 自由摆放 | top / canvas-grid |
*
* 关联portal-shell spec §4.1、§4.2
* 令牌迁移v2.0 shadcn 标准令牌
* - bg-paper → bg-background页面底色
* - bg-surface → bg-card容器表面
* - border-rule → border默认边框色
* - p-md/p-lg → p-4/p-6间距阶梯
* - gap-md → gap-4
*
* 关联portal-shell spec §4.1、§4.2、README v2.0 §3.5 shadcn 令牌
*/
import { type ReactNode } from "react";
import { SlotRenderer, type SlotRendererProps } from "./SlotRenderer";
@@ -47,15 +54,15 @@ interface LayoutShellProps {
/** classicTopBar + SideNav + Main */
function ClassicLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
return (
<div className="flex min-h-screen flex-col bg-paper">
<header className="border-b border-rule bg-surface">
<div className="flex min-h-screen flex-col bg-background">
<header className="border-b bg-card">
<SlotRenderer slotName="top" layoutId={layoutId} {...slotInput} />
</header>
<div className="flex flex-1">
<aside className="w-64 border-r border-rule bg-surface p-md">
<aside className="w-64 border-r bg-card p-4">
<SlotRenderer slotName="side" layoutId={layoutId} {...slotInput} />
</aside>
<main className="flex-1 p-lg">
<main className="flex-1 p-6">
<SlotRenderer slotName="main" layoutId={layoutId} {...slotInput} />
</main>
</div>
@@ -66,11 +73,11 @@ function ClassicLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
/** focusTopBar + 全宽 Main */
function FocusLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
return (
<div className="flex min-h-screen flex-col bg-paper">
<header className="border-b border-rule bg-surface">
<div className="flex min-h-screen flex-col bg-background">
<header className="border-b bg-card">
<SlotRenderer slotName="top" layoutId={layoutId} {...slotInput} />
</header>
<main className="flex-1 p-lg">
<main className="flex-1 p-6">
<SlotRenderer slotName="main" layoutId={layoutId} {...slotInput} />
</main>
</div>
@@ -80,11 +87,11 @@ function FocusLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
/** splitTopBar + 左右等分 Main */
function SplitLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
return (
<div className="flex min-h-screen flex-col bg-paper">
<header className="border-b border-rule bg-surface">
<div className="flex min-h-screen flex-col bg-background">
<header className="border-b bg-card">
<SlotRenderer slotName="top" layoutId={layoutId} {...slotInput} />
</header>
<div className="flex flex-1 gap-md p-lg">
<div className="flex flex-1 gap-4 p-6">
<section className="flex-1">
<SlotRenderer
slotName="main-left"
@@ -107,18 +114,18 @@ function SplitLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
/** tripleTopBar + SideNav + Main + RightRail */
function TripleLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
return (
<div className="flex min-h-screen flex-col bg-paper">
<header className="border-b border-rule bg-surface">
<div className="flex min-h-screen flex-col bg-background">
<header className="border-b bg-card">
<SlotRenderer slotName="top" layoutId={layoutId} {...slotInput} />
</header>
<div className="flex flex-1">
<aside className="w-64 border-r border-rule bg-surface p-md">
<aside className="w-64 border-r bg-card p-4">
<SlotRenderer slotName="side" layoutId={layoutId} {...slotInput} />
</aside>
<main className="flex-1 p-lg">
<main className="flex-1 p-6">
<SlotRenderer slotName="main" layoutId={layoutId} {...slotInput} />
</main>
<aside className="w-72 border-l border-rule bg-surface p-md">
<aside className="w-72 border-l bg-card p-4">
<SlotRenderer slotName="right" layoutId={layoutId} {...slotInput} />
</aside>
</div>
@@ -129,11 +136,11 @@ function TripleLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
/** canvasTopBar + 自由摆放 gridMVP 按 grid 排列,不实现拖拽) */
function CanvasLayout({ slotInput, layoutId }: LayoutShellProps): ReactNode {
return (
<div className="flex min-h-screen flex-col bg-paper">
<header className="border-b border-rule bg-surface">
<div className="flex min-h-screen flex-col bg-background">
<header className="border-b bg-card">
<SlotRenderer slotName="top" layoutId={layoutId} {...slotInput} />
</header>
<main className="flex-1 p-lg">
<main className="flex-1 p-6">
<SlotRenderer
slotName="canvas-grid"
layoutId={layoutId}