5661938cc0
实现内容（仲裁裁决驱动，首次即最终方案）： P4 核心功能 - 认证：localStorage token 存储（F12）+ REST 登录（ISSUE-004）+ refreshAccessToken 竞态防护 - 子女切换：ChildSwitcher（Tab ≤3 / 下拉 ≥4）+ Zustand store（ISSUE-009 纯前端切换） - 数据查询：urql GraphQL 消费 parent-bff（F9）+ TanStack Query 缓存 - 通知中心：NotificationFeed + 已读/全部已读 mutations - 通知偏好：三维矩阵 + ISSUE-033 localStorage 降级 - 5 层状态管理：URL/Server/Client/Global UI/Form - 跨标签同步：BroadcastChannel + storage 事件 P5 实时推送 - WebSocket 连接 push-gateway + 指数退避重连 - HTTP 轮询降级（60s）+ 实时通知 Hook P6 硬化 - Web Vitals 上报 + OTel trace - i18n 5 语言（zh-CN/en-US/zh-TW/ja-JP/ar-SA 含 RTL） - PWA manifest + Service Worker - CSP 安全头 + 权限点 F7 命名 + 设计令牌三层 测试与构建 - Vitest 92 测试全通过（utils/auth/child-store/ChildSwitcher/NotificationFeed/login） - MSW mock 未就绪上游（parent-bff GraphQL + iam REST + iam GetChildrenByParent P0 阻塞用 fixtures） - Dockerfile 多阶段构建（G1，端口 4002，HEALTHCHECK /api/health） - typecheck + lint 零错误 经验沉淀 - known-issues.md §2.13 追加 12 条实现期经验（无 AI 身份标注） - arch.db 已更新（15 TS 模块 / 482 符号 / 138 proto） 依据：02-architecture-design.md（回写总裁裁决）、coord-final-decisions.md、 president-final-rulings.md、parent-portal_workline.md、parent-portal_contract.md
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
// parent 布局：认证守卫 + AppShell + MultiChildTabBar
|
||
// 依据：02-architecture-design.md §3.1 路由结构、§6 应用外壳
|
||
// - 未认证重定向到 /login
|
||
// - MF 启用时由 Shell 提供外壳（本布局的 AppShell 仅独立模式使用）
|
||
|
||
"use client";
|
||
|
||
import { type ReactNode, useEffect, useState } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { isAuthenticated } from "@/lib/auth";
|
||
import { AppShell } from "@/components/AppShell";
|
||
import { MultiChildTabBar } from "@/components/MultiChildTabBar";
|
||
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
|
||
import { useCrossTabSync } from "@/hooks/useCrossTabSync";
|
||
import { EmptyChildState } from "@/components/EmptyChildState";
|
||
|
||
export default function ParentLayout({ children }: { children: ReactNode }) {
|
||
const router = useRouter();
|
||
const [checked, setChecked] = useState(false);
|
||
const { children: childList, loading } = useChildSwitcher();
|
||
useCrossTabSync();
|
||
|
||
useEffect(() => {
|
||
if (!isAuthenticated()) {
|
||
router.replace("/login");
|
||
return;
|
||
}
|
||
setChecked(true);
|
||
}, [router]);
|
||
|
||
if (!checked) {
|
||
return (
|
||
<div className="flex min-h-screen items-center justify-center">
|
||
<span className="skeleton h-8 w-48 rounded" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<AppShell>
|
||
{childList.length === 0 && !loading ? (
|
||
<EmptyChildState />
|
||
) : (
|
||
<>
|
||
<MultiChildTabBar />
|
||
{children}
|
||
</>
|
||
)}
|
||
</AppShell>
|
||
);
|
||
}
|