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

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

apps/teacher-portal/tailwind.config.js

@@ -1,24 +1,85 @@
+/**
+ * Tailwind 配置 - 对齐三层设计令牌
+ *
+ * 维护者：ai13（teacher-portal）
+ * 关联：project_rules §3.10、02-architecture-design.md §9
+ *
+ * Layer 3 映射：将 Layer 2 Semantic CSS 变量暴露为 Tailwind 类名
+ * 业务代码使用 bg-paper / text-ink / font-serif 等语义类
+ *
+ * 禁止：
+ * - 禁止 hex 字面量（colors 引用 var(--*)）
+ * - 禁止字体名字面量（fontFamily 引用 var(--font-family-*))
+ */
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
       colors: {
-        paper: 'hsl(40, 20%, 98%)',
+        // Layer 2 Semantic → Tailwind 类名映射
+        paper: "var(--bg-paper)",
+        surface: "var(--bg-surface)",
+        subtle: "var(--bg-subtle)",
         ink: {
-          DEFAULT: 'hsl(25, 3%, 15%)',
-          muted: 'hsl(30, 5%, 45%)',
+          DEFAULT: "var(--color-ink)",
+          muted: "var(--color-ink-muted)",
+          subtle: "var(--color-ink-subtle)",
+          onAccent: "var(--color-ink-on-accent)",
         },
-        accent: 'hsl(220, 60%, 35%)',
-        rule: 'hsl(30, 10%, 90%)',
+        accent: {
+          DEFAULT: "var(--color-accent)",
+          hover: "var(--color-accent-hover)",
+          subtle: "var(--color-accent-subtle)",
+        },
+        rule: {
+          DEFAULT: "var(--color-rule)",
+          strong: "var(--color-rule-strong)",
+        },
+        success: "var(--color-success)",
+        warning: "var(--color-warning)",
+        danger: "var(--color-danger)",
+        info: "var(--color-info)",
+        border: "var(--color-border)",
       },
       fontFamily: {
-        serif: ['Fraunces', 'Georgia', 'serif'],
-        sans: ['Inter', 'system-ui', 'sans-serif'],
-        mono: ['JetBrains Mono', 'monospace'],
+        sans: "var(--font-family-sans)",
+        serif: "var(--font-family-serif)",
+        mono: "var(--font-family-mono)",
+      },
+      fontSize: {
+        body: "var(--font-size-body)",
+        small: "var(--font-size-small)",
+        tiny: "var(--font-size-tiny)",
+        "heading-1": "var(--font-size-heading-1)",
+        "heading-2": "var(--font-size-heading-2)",
+        "heading-3": "var(--font-size-heading-3)",
+        display: "var(--font-size-display)",
+        "large-number": "var(--font-size-large-number)",
+      },
+      spacing: {
+        xs: "var(--space-xs)",
+        sm: "var(--space-sm)",
+        md: "var(--space-md)",
+        lg: "var(--space-lg)",
+        xl: "var(--space-xl)",
+        "2xl": "var(--space-2xl)",
       },
       borderRadius: {
-        DEFAULT: '6px',
+        DEFAULT: "var(--radius-default)",
+        card: "var(--radius-card)",
+        button: "var(--radius-button)",
+      },
+      boxShadow: {
+        sm: "var(--shadow-sm)",
+        md: "var(--shadow-md)",
+        lg: "var(--shadow-lg)",
+        xl: "var(--shadow-xl)",
+      },
+      transitionDuration: {
+        fast: "150ms",
+        normal: "200ms",
       },
     },
   },