feat(teacher-portal): 完整实现 teacher-portal 微前端

包含 settings/students/api、graphql、mocks、ui-tokens 设计令牌等

apps/teacher-portal/src/components/AppShell.tsx

@@ -1,123 +1,126 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+/**
+ * AppShell - MF Shell 布局容器
+ *
+ * 职责（02-architecture-design.md §1.2）：
+ * 1. 左侧导航树（viewports GraphQL query，ARB-001 §1.2）
+ * 2. 主内容区（children slot）
+ * 3. 路由守卫（未登录跳转 /login）
+ * 4. 用户信息 + 登出
+ * 5. 按 requiredPermission 过滤视口（F7 权限点）
+ *
+ * 数据来源（ARB-002 §2.4 ai13 执行项 #3）：
+ * - viewports: GraphQL ViewportsQuery（替代 REST /api/v1/teacher/viewports）
+ * - user: GraphQL MeQuery（在 DashboardPage 已加载，AppShell 从 localStorage 兜底）
+ *
+ * 维护者：ai13（teacher-portal）
+ */
+
+import { useEffect, useMemo } from "react";
 import { useRouter, usePathname } from "next/navigation";
 import Link from "next/link";
+import { useQuery } from "urql";
+import { ErrorBoundary, Loading } from "@edu/ui-components";
+import { usePermission } from "@edu/hooks";
+import { ViewportsQuery, MeQuery } from "@/lib/graphql";
+import type { ViewportItem, User } from "@/lib/graphql";
 import { getToken, getUser, logout } from "@/lib/auth";
 
-interface ViewportItem {
-  key: string;
-  label: string;
-  route: string;
-  icon: string | null;
-  sortOrder: string;
-  requiredPermission: string | null;
+/**
+ * 权限上下文：从 localStorage 读取（登录时由 iam 返回并存储）。
+ * P3+ 改为 GraphQL me query 实时拉取（usePermission hook 接受 context props）。
+ */
+function buildPermissionContext(user: User | null) {
+  if (!user) return null;
+  // localStorage UserInfo 包含 permissions 字段（iam /iam/permissions/effective 返回）
+  const stored = getUser();
+  return {
+    permissions: stored?.permissions ?? [],
+    roles: user.roles,
+    dataScope: user.dataScope,
+  };
 }
 
 export default function AppShell({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const pathname = usePathname();
-  const [viewports, setViewports] = useState<ViewportItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [mounted, setMounted] = useState(false);
 
-  const fetchViewports = useCallback(async () => {
+  // 路由守卫：未登录跳转 /login
+  useEffect(() => {
     const token = getToken();
     if (!token) {
       router.replace("/login");
-      return;
-    }
-    try {
-      const res = await fetch("/api/v1/teacher/viewports", {
-        headers: { Authorization: `Bearer ${token}` },
-      });
-      if (res.status === 401) {
-        logout();
-        return;
-      }
-      const json = await res.json();
-      if (json.success && json.data) {
-        setViewports(json.data);
-      }
-    } catch {
-      // 网络错误，保持空视口
-    } finally {
-      setLoading(false);
     }
   }, [router]);
 
-  useEffect(() => {
-    setMounted(true);
-    const token = getToken();
-    if (!token) {
-      router.replace("/login");
-      return;
-    }
-    fetchViewports();
-  }, [router, fetchViewports]);
+  // GraphQL: viewports query（替代 REST /api/v1/teacher/viewports）
+  const [viewportsResult] = useQuery({
+    query: ViewportsQuery,
+  });
 
-  // 防止 SSR 闪烁
-  if (!mounted) return null;
+  // GraphQL: me query（实时获取当前用户信息，替代 localStorage 读取）
+  const [meResult] = useQuery({
+    query: MeQuery,
+  });
 
-  const user = getUser();
+  const user = meResult.data?.me ?? null;
+  const permissionContext = useMemo(
+    () => buildPermissionContext(user ?? null),
+    [user],
+  );
+  const { hasPermission } = usePermission({ context: permissionContext });
+
+  // 按权限过滤视口（F7: requiredPermission 为 null 表示公开视口）
+  const visibleViewports = useMemo(() => {
+    const list: ViewportItem[] = viewportsResult.data?.viewports ?? [];
+    return list.filter(
+      (vp) => !vp.requiredPermission || hasPermission(vp.requiredPermission),
+    );
+  }, [viewportsResult, hasPermission]);
+
+  // 视口加载中：占位（避免导航闪烁）
+  if (viewportsResult.fetching && visibleViewports.length === 0) {
+    return (
+      <div className="min-h-screen bg-paper">
+        <Loading lines={5} />
+      </div>
+    );
+  }
+
+  // 视口加载错误：ErrorBoundary 兜底（不阻塞主内容）
+  const viewportError = viewportsResult.error ? (
+    <p className="px-3 py-2 text-tiny text-danger">
+      导航加载失败：{viewportsResult.error.message}
+    </p>
+  ) : null;
 
   return (
-    <div
-      className="min-h-screen flex"
-      style={{ background: "var(--bg-paper)" }}
-    >
+    <div className="min-h-screen flex bg-paper">
       {/* 左侧栏：导航树 */}
-      <aside
-        className="w-56 flex-shrink-0 border-r relative flex flex-col"
-        style={{
-          borderColor: "var(--color-rule)",
-          background: "var(--bg-paper)",
-        }}
-      >
+      <aside className="w-56 flex-shrink-0 border-r border-rule bg-paper flex flex-col">
         <div className="px-6 py-6">
-          <h1
-            className="text-xl"
-            style={{
-              fontFamily: "var(--font-serif)",
-              color: "var(--color-ink)",
-            }}
-          >
-            Edu
-          </h1>
-          <p
-            className="text-xs mt-1"
-            style={{ color: "var(--color-ink-muted)" }}
-          >
-            教师端
-          </p>
+          <h1 className="text-xl font-serif text-ink">Edu</h1>
+          <p className="mt-1 text-tiny text-ink-muted">教师端</p>
         </div>
         <div className="rule-thin mx-6" />
 
         <nav className="mt-4 px-3">
-          {loading ? (
-            <p
-              className="text-xs px-3 py-2"
-              style={{ color: "var(--color-ink-muted)" }}
-            >
-              加载导航...
-            </p>
+          {viewportError}
+          {visibleViewports.length === 0 && !viewportError ? (
+            <p className="px-3 py-2 text-tiny text-ink-muted">暂无可用视口</p>
           ) : (
-            viewports.map((vp) => {
+            visibleViewports.map((vp) => {
               const active = pathname === vp.route;
               return (
                 <Link
                   key={vp.key}
                   href={vp.route}
-                  className="block px-3 py-2 text-sm transition-colors"
-                  style={{
-                    color: active ? "var(--color-accent)" : "var(--color-ink)",
-                    borderLeft: active
-                      ? "2px solid var(--color-accent)"
-                      : "2px solid transparent",
-                    fontFamily: active
-                      ? "var(--font-serif)"
-                      : "var(--font-inter)",
-                  }}
+                  className={`block px-3 py-2 text-sm transition-colors ${
+                    active
+                      ? "text-accent border-l-2 border-accent font-serif"
+                      : "text-ink border-l-2 border-transparent font-sans hover:text-accent"
+                  }`}
                 >
                   {vp.label}
                 </Link>
@@ -127,27 +130,18 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
         </nav>
 
         {/* 底部：用户信息 + 登出 */}
-        <div
-          className="mt-auto px-6 py-4 border-t"
-          style={{ borderColor: "var(--color-rule)" }}
-        >
+        <div className="mt-auto px-6 py-4 border-t border-rule">
           {user && (
             <div className="mb-2">
-              <p className="text-sm" style={{ color: "var(--color-ink)" }}>
-                {user.name}
-              </p>
-              <p
-                className="text-xs"
-                style={{ color: "var(--color-ink-muted)" }}
-              >
+              <p className="text-sm text-ink">{user.name}</p>
+              <p className="text-tiny text-ink-muted">
                 {user.roles.join(", ") || "无角色"}
               </p>
             </div>
           )}
           <button
             onClick={logout}
-            className="text-xs uppercase tracking-wide hover:opacity-70"
-            style={{ color: "var(--color-ink-muted)" }}
+            className="text-tiny uppercase tracking-wide text-ink-muted hover:opacity-70"
           >
             退出登录
           </button>
@@ -155,7 +149,28 @@ export default function AppShell({ children }: { children: React.ReactNode }) {
       </aside>
 
       {/* 中间：内容区（纸面） */}
-      <main className="flex-1 overflow-auto">{children}</main>
+      <main className="flex-1 overflow-auto">
+        <ErrorBoundary
+          fallback={(error, reset) => (
+            <div
+              role="alert"
+              className="flex min-h-[200px] flex-col items-center justify-center gap-4 p-8"
+            >
+              <h2 className="text-lg font-serif text-ink">页面出错了</h2>
+              <p className="text-sm text-ink-muted">{error.message}</p>
+              <button
+                type="button"
+                onClick={reset}
+                className="px-4 py-2 text-sm text-ink-on-accent bg-accent rounded-button hover:bg-accent-hover"
+              >
+                重试
+              </button>
+            </div>
+          )}
+        >
+          {children}
+        </ErrorBoundary>
+      </main>
     </div>
   );
 }