Module Update

docs/design/001_auth_ui_implementation.md

@@ -0,0 +1,76 @@
+# Auth UI Implementation Details
+
+**Date**: 2025-12-23
+**Author**: Senior Frontend Engineer
+**Module**: Auth (`src/modules/auth`)
+
+---
+
+## 1. 概述 (Overview)
+
+本文档记录了登录 (`/login`) 和注册 (`/register`) 页面的前端实现细节。遵循 Vertical Slice Architecture 和 Pixel-Perfect UI 规范。
+
+## 2. 架构设计 (Architecture)
+
+### 2.1 目录结构
+所有认证相关的业务逻辑和组件均封装在 `src/modules/auth` 下，保持了高内聚。
+
+```
+src/
+├── app/
+│   └── (auth)/             # 路由层 (Server Components)
+│       ├── layout.tsx      # 统一的 AuthLayout 容器
+│       ├── login/page.tsx
+│       └── register/page.tsx
+│
+├── modules/
+│   └── auth/               # 业务模块
+│       └── components/     # 模块私有组件
+│           ├── auth-layout.tsx  # 左右分屏布局
+│           ├── login-form.tsx   # 登录表单 (Client Component)
+│           └── register-form.tsx # 注册表单 (Client Component)
+```
+
+### 2.2 渲染策略
+*   **Server Components**: 页面入口 (`page.tsx`) 和布局 (`layout.tsx`) 默认为服务端组件，负责元数据 (`Metadata`) 和静态结构渲染。
+*   **Client Components**: 表单组件 (`*-form.tsx`) 标记为 `'use client'`，处理交互逻辑（状态管理、表单提交、Loading 状态）。
+
+## 3. UI/UX 细节
+
+### 3.1 布局 (Layout)
+采用 **Split Screen (分屏)** 设计：
+*   **左侧 (Desktop Only)**:
+    *   深色背景 (`bg-zinc-900`)，强调品牌沉浸感。
+    *   包含 Logo (`Next_Edu`) 和用户证言 (`Blockquote`)。
+    *   使用 `hidden lg:flex` 实现响应式显隐。
+*   **右侧**:
+    *   居中对齐的表单容器。
+    *   移动端优先 (`w-full`)，桌面端限制最大宽度 (`sm:w-[350px]`)。
+
+### 3.2 交互 (Interactions)
+*   **Loading State**: 表单提交时按钮进入 `disabled` 状态并显示 `Loader2` 旋转动画。
+*   **Micro-animations**:
+    *   按钮 Hover 效果。
+    *   链接 Hover 下划线 (`hover:underline`).
+*   **Feedback**: 模拟了 3 秒的异步请求延迟，用于演示加载状态。
+
+## 4. 错误处理 (Error Handling)
+
+### 4.1 模块级错误边界
+*   **Scoped Error Boundary**: `src/app/(auth)/error.tsx` 仅处理 Auth 模块内的运行时错误。
+    *   显示友好的 "Authentication Error" 提示。
+    *   提供 "Try again" 按钮重置状态。
+
+### 4.2 模块级 404
+*   **Scoped Not Found**: `src/app/(auth)/not-found.tsx` 处理 Auth 模块内的无效路径。
+    *   引导用户返回 `/login` 页面，防止用户迷失。
+
+## 5. 组件复用
+*   使用了 `src/shared/components/ui` 中的标准 Shadcn 组件：
+    *   `Button`, `Input`, `Label` (新增).
+*   图标库统一使用 `lucide-react`.
+
+## 5. 后续计划 (Next Steps)
+*   [ ] 集成 `next-auth` (Auth.js) 进行实际的身份验证。
+*   [ ] 添加 Zod Schema 进行前端表单验证。
+*   [ ] 对接后端 API (`src/modules/auth/actions.ts`).

docs/design/002_teacher_dashboard_implementation.md

@@ -0,0 +1,100 @@
+# 教师仪表盘实现与 Hydration 修复记录
+
+**日期**: 2025-12-23
+**作者**: 资深前端工程师 (Senior Frontend Engineer)
+**状态**: 已实现
+
+## 1. 概述
+
+本文档详细说明了教师仪表盘 (Teacher Dashboard) 的实现细节，该实现严格遵循 Next_Edu 设计系统 v1.3.0。文档还记录了开发过程中遇到的 Hydration 错误及其解决方案。
+
+## 2. 组件架构
+
+仪表盘采用垂直切片架构 (Vertical Slice Architecture)，代码位于 `src/modules/dashboard`。
+
+### 2.1 文件结构
+```
+src/modules/dashboard/
+└── components/
+    ├── teacher-stats.tsx        # 核心指标 (学生数, 课程数, 待批改作业)
+    ├── teacher-schedule.tsx     # 今日日程列表
+    ├── recent-submissions.tsx   # 最近的学生提交记录
+    └── teacher-quick-actions.tsx # 常用操作 (创建作业等)
+```
+
+### 2.2 设计系统集成
+所有组件严格遵循 v1.3.0 规范：
+- **排版 (Typography)**: 使用 `Geist Sans`，数据展示开启 `tabular-nums`。
+- **色彩 (Colors)**: 使用语义化 HSL 变量 (`muted`, `primary`, `destructive`)。
+- **图标 (Icons)**: 使用 `lucide-react` (如 `Users`, `BookOpen`, `Inbox`)。
+- **状态 (States)**:
+  - **Loading**: 使用自定义骨架屏 (Skeleton)，拒绝全屏 Spinner。
+  - **Empty**: 使用 `EmptyState` 组件处理无数据场景。
+
+## 3. 组件详情
+
+### 3.1 TeacherStats (教师统计)
+- **用途**: 展示教师当前状态的高层概览。
+- **特性**:
+  - 在响应式网格中展示 4 个关键指标。
+  - 支持 `isLoading` 属性以渲染骨架屏。
+  - 使用 `Card` 组件作为容器。
+
+### 3.2 TeacherSchedule (教师日程)
+- **用途**: 展示今日课程安排。
+- **特性**:
+  - 列出课程时间及地点。
+  - 使用 Badge 区分 "Lecture" (讲座) 和 "Workshop" (研讨会)。
+  - **空状态**: 当无日程时显示 "No Classes Today"。
+
+### 3.3 RecentSubmissions (最近提交)
+- **用途**: 追踪最新的学生活动。
+- **特性**:
+  - 展示学生头像、姓名、作业名称及时间。
+  - "Late" (迟交) 状态指示器。
+  - **空状态**: 当列表为空时显示 "No New Submissions"。
+
+### 3.4 EmptyState Component (空状态组件)
+- **位置**: `src/shared/components/ui/empty-state.tsx`
+- **规范**:
+  - 虚线边框容器。
+  - 居中图标 (Muted 背景)。
+  - 清晰的标题和描述。
+  - 可选的操作按钮插槽。
+
+## 4. Hydration 错误修复
+
+### 4.1 问题描述
+开发过程中观察到 "Hydration failed" 错误，原因是 HTML 嵌套无效。具体来说，是 `p` 标签内包含了块级元素（或 React 在 hydration 检查期间视为块级的元素）。
+
+### 4.2 根本原因分析
+React 的 hydration 过程对 HTML 有效性要求极高。将 `div` 放入 `p` 标签中违反了 HTML5 标准，但浏览器通常会自动修正 DOM 结构，导致实际 DOM 与 React 基于虚拟 DOM 预期的结构不一致。
+
+### 4.3 实施的修复
+将所有仪表盘组件中存在风险的 `p` 标签替换为 `div` 标签，以确保嵌套结构的健壮性。
+
+**示例 (RecentSubmissions):**
+
+*修改前 (有风险):*
+```tsx
+<p className="text-sm font-medium leading-none">
+  {item.studentName}
+</p>
+```
+
+*修改后 (安全):*
+```tsx
+<div className="text-sm font-medium leading-none">
+  {item.studentName}
+</div>
+```
+
+**受影响的组件:**
+1.  `recent-submissions.tsx`
+2.  `teacher-stats.tsx`
+3.  `teacher-schedule.tsx`
+
+## 5. 下一步计划
+- 将 Mock Data 对接到真实的 API 端点 (React Server Actions)。
+- 实现 "Quick Actions" (快捷操作) 的具体功能。
+- 为 Submissions 和 Schedule 添加 "View All" (查看全部) 跳转导航。

docs/design/003_textbooks_module_implementation.md

@@ -0,0 +1,98 @@
+# Textbooks Module Implementation Details
+
+**Date**: 2025-12-23
+**Author**: DevOps Architect
+**Module**: Textbooks (`src/modules/textbooks`)
+
+---
+
+## 1. 概述 (Overview)
+
+本文档记录了教材模块 (`Textbooks Module`) 的全栈实现细节。该模块负责教材、章节结构及知识点映射的数字化管理，采用了 **Vertical Slice Architecture** 和 **Immersive Workbench** 交互设计。
+
+## 2. 架构设计 (Architecture)
+
+### 2.1 目录结构
+所有教材相关的业务逻辑、数据访问和组件均封装在 `src/modules/textbooks` 下，实现了高度的模块化和隔离。
+
+```
+src/
+├── app/
+│   └── (dashboard)/
+│       └── teacher/
+│           └── textbooks/          # 路由层 (Server Components)
+│               ├── page.tsx        # 列表页
+│               ├── loading.tsx     # 列表骨架屏
+│               └── [id]/           # 详情页
+│                   ├── page.tsx
+│                   └── loading.tsx
+│
+├── modules/
+│   └── textbooks/                  # 业务模块
+│       ├── actions.ts              # Server Actions (增删改)
+│       ├── data-access.ts          # 数据访问层 (Mock/DB)
+│       ├── types.ts                # 类型定义 (Schema-aligned)
+│       └── components/             # 模块私有组件
+│           ├── textbook-content-layout.tsx # [核心] 三栏布局工作台
+│           ├── chapter-sidebar-list.tsx    # 递归章节树
+│           ├── knowledge-point-panel.tsx   # 知识点管理面板
+│           ├── create-chapter-dialog.tsx   # 章节创建弹窗
+│           └── ... (其他交互组件)
+```
+
+### 2.2 渲染策略
+*   **Server Components**: 页面入口 (`page.tsx`) 负责初始数据获取 (Data Fetching)，利用 `Promise.all` 并行拉取教材、章节和知识点数据，实现 "Render-as-you-fetch"。
+*   **Client Components**: 工作台布局 (`textbook-content-layout.tsx`) 标记为 `'use client'`，接管后续的所有交互逻辑（状态管理、局部更新、弹窗控制），提供类似 SPA 的流畅体验。
+
+## 3. UI/UX 细节
+
+### 3.1 布局 (Layout)
+采用 **Immersive Workbench (沉浸式工作台)** 三栏设计：
+*   **左侧 (Navigation)**:
+    *   展示递归的章节树 (`Recursive Tree`)。
+    *   支持折叠/展开，清晰展示教材结构。
+    *   顶部提供 "+" 按钮快速创建新章节。
+*   **中间 (Content)**:
+    *   **阅读模式**: 渲染 Markdown 格式的章节正文。
+    *   **编辑模式**: 提供 `Textarea` 进行内容创作，支持实时保存。
+*   **右侧 (Context)**:
+    *   **上下文感知**: 仅显示当前选中章节的关联知识点。
+    *   提供知识点的快速添加 (`Dialog`) 和删除操作。
+
+### 3.2 交互 (Interactions)
+*   **Selection State**: 点击左侧章节，中间和右侧区域即时更新，无需页面跳转。
+*   **Optimistic UI**: 虽然使用 Server Actions，但通过本地状态 (`useState`) 实现了操作的即时反馈（如保存正文后立即退出编辑模式）。
+*   **Feedback**: 使用 `sonner` (`toast`) 提供操作成功或失败的提示。
+
+## 4. 数据流与逻辑 (Data Flow)
+
+### 4.1 Server Actions
+所有数据变更操作均通过 `src/modules/textbooks/actions.ts` 定义的 Server Actions 处理：
+*   `createChapterAction`: 创建章节（支持嵌套）。
+*   `updateChapterContentAction`: 更新正文内容。
+*   `createKnowledgePointAction`: 创建知识点并自动关联当前章节。
+*   `updateTextbookAction`: 更新教材元数据（Title, Subject, Grade, Publisher）。
+*   `deleteTextbookAction`: 删除教材及其关联数据。
+*   `delete...Action`: 处理删除逻辑。
+
+### 4.2 数据访问层 (Data Access)
+*   **Mock Implementation**: 目前在 `data-access.ts` 中使用内存数组模拟数据库操作，并人为增加了延迟 (`setTimeout`) 以测试 Loading 状态。
+*   **Type Safety**: 定义了严格的 TypeScript 类型 (`Chapter`, `KnowledgePoint`, `UpdateTextbookInput`)，确保前后端数据契约一致。
+
+## 5. 组件复用
+*   使用了 `src/shared/components/ui` 中的 Shadcn 组件：
+    *   `Dialog`, `ScrollArea`, `Card`, `Button`, `Input`, `Textarea`, `Select`.
+    *   `Collapsible` 用于实现递归章节树。
+*   图标库统一使用 `lucide-react`.
+
+## 6. Settings 功能实现 (New)
+*   **入口**: 详情页右上角的 "Settings" 按钮。
+*   **组件**: `TextbookSettingsDialog`。
+*   **功能**:
+    *   **Edit**: 修改教材的基本信息。
+    *   **Delete**: 提供红色删除按钮，二次确认后执行删除并跳转回列表页。
+
+## 7. 后续计划 (Next Steps)
+*   [ ] **富文本编辑器**: 集成 Tiptap 替换现有的 Markdown Textarea，支持更丰富的格式。
+*   [ ] **拖拽排序**: 实现章节树的拖拽排序 (`dnd-kit`)。
+*   [ ] **数据库对接**: 将 `data-access.ts` 中的 Mock 逻辑替换为真实的 `drizzle-orm` 数据库调用。

docs/design/004_question_bank_implementation.md

@@ -0,0 +1,87 @@
+# Question Bank Module Implementation
+
+## 1. Overview
+The Question Bank module (`src/modules/questions`) is a core component for teachers to manage their examination resources. It implements a comprehensive CRUD interface with advanced filtering and batch operations.
+
+**Status**: IMPLEMENTED  
+**Date**: 2025-12-23  
+**Author**: Senior Frontend Engineer
+
+---
+
+## 2. Architecture & Tech Stack
+
+### 2.1 Vertical Slice Architecture
+Following the project's architectural guidelines, all question-related logic is encapsulated within `src/modules/questions`:
+- `components/`: UI components (Data Table, Dialogs, Filters)
+- `actions.ts`: Server Actions for data mutation
+- `data-access.ts`: Database query logic
+- `schema.ts`: Zod schemas for validation
+- `types.ts`: TypeScript interfaces
+
+### 2.2 Key Technologies
+- **Data Grid**: `@tanstack/react-table` for high-performance rendering.
+- **State Management**: `nuqs` for URL-based state (filters, search).
+- **Forms**: `react-hook-form` + `zod` + `shadcn/ui` form components.
+- **Validation**: Strict server-side and client-side validation using Zod schemas.
+
+---
+
+## 3. Component Design
+
+### 3.1 QuestionDataTable (`question-data-table.tsx`)
+- **Features**: Pagination, Sorting, Row Selection.
+- **Performance**: Uses `React.memo` compatible patterns where possible (though `useReactTable` itself is not memoized).
+- **Responsiveness**: Mobile-first design with horizontal scroll for complex columns.
+
+### 3.2 QuestionColumns (`question-columns.tsx`)
+Custom cell renderers for rich data display:
+- **Type Badge**: Color-coded badges for different question types (Single Choice, Multiple Choice, etc.).
+- **Difficulty**: Visual indicator with color (Green -> Red) and numerical value.
+- **Actions**: Dropdown menu for Edit, Delete, View Details, and Copy ID.
+
+### 3.3 Create/Edit Dialog (`create-question-dialog.tsx`)
+A unified dialog component for both creating and editing questions.
+- **Dynamic Fields**: Shows/hides "Options" field based on question type.
+- **Interactive Options**: Allows adding/removing/reordering options for choice questions.
+- **Optimistic UI**: Shows loading states during submission.
+
+### 3.4 Filters (`question-filters.tsx`)
+- **URL Sync**: All filter states (Search, Type, Difficulty) are synced to URL parameters.
+- **Debounce**: Search input uses debounce to prevent excessive requests.
+- **Server Filtering**: Filtering logic is executed on the server side (currently simulated in `page.tsx`, ready for DB integration).
+
+---
+
+## 4. Implementation Details
+
+### 4.1 Data Flow
+1. **Read**: `page.tsx` (Server Component) fetches data based on `searchParams`.
+2. **Write**: Client components invoke Server Actions (simulated) -> Revalidate Path -> UI Updates.
+3. **Filter**: User interaction -> Update URL -> Server Component Re-render -> New Data.
+
+### 4.2 Type Safety
+A shared `Question` interface ensures consistency across the stack:
+```typescript
+export interface Question {
+  id: string;
+  content: any; // Rich text structure
+  type: QuestionType;
+  difficulty: number;
+  // ... relations
+}
+```
+
+### 4.3 UI/UX Standards
+- **Empty States**: Custom `EmptyState` component when no data matches.
+- **Loading States**: Skeleton screens for table loading.
+- **Feedback**: `Sonner` toasts for success/error notifications.
+- **Confirmation**: `AlertDialog` for destructive actions (Delete).
+
+---
+
+## 5. Next Steps
+- [ ] Integrate with real Database (replace Mock Data).
+- [ ] Implement Rich Text Editor (Slate.js / Tiptap) for question content.
+- [ ] Add "Batch Import" functionality.
+- [ ] Implement "Tags" management for Knowledge Points.

docs/design/005_exam_module_implementation.md

@@ -0,0 +1,90 @@
+# 考试模块实现设计文档
+
+## 1. 概述
+考试模块提供了一个完整的评估管理生命周期，使教师能够创建考试、组卷（支持嵌套分组）、发布评估以及对学生的提交进行评分。
+
+## 2. 数据架构
+
+### 2.1 核心实体
+- **Exams**: 根实体，包含元数据（标题、时间安排）和结构信息。
+- **ExamQuestions**: 关系链接，用于查询题目的使用情况（扁平化表示）。
+- **ExamSubmissions**: 学生的考试尝试记录。
+- **SubmissionAnswers**: 链接到特定题目的单个答案。
+
+### 2.2 `structure` 字段
+为了支持层级布局（如章节/分组），我们在 `exams` 表中引入了一个 JSON 列 `structure`。这作为考试布局的“单一事实来源”（Source of Truth）。
+
+**JSON Schema:**
+```typescript
+type ExamNode = {
+  id: string;              // 节点的唯一 UUID
+  type: 'group' | 'question';
+  title?: string;          // 'group' 类型必填
+  questionId?: string;     // 'question' 类型必填
+  score?: number;          // 在此考试上下文中的分值
+  children?: ExamNode[];   // 'group' 类型的递归子节点
+}
+```
+
+## 3. 组件架构
+
+### 3.1 组卷（构建器）
+位于 `/teacher/exams/[id]/build`。
+
+- **`ExamAssembly` (客户端组件)**
+  - 管理 `structure` 状态树。
+  - 处理“添加题目”、“添加章节”、“移除”和“重新排序”操作。
+  - 实时计算总分和进度。
+- **`StructureEditor` (客户端组件)**
+  - 基于 `@dnd-kit` 构建。
+  - 提供嵌套的可排序（Sortable）界面。
+  - 支持在组内/组间拖拽题目（当前优化为 2 层深度）。
+- **`QuestionBankList`**
+  - 可搜索/筛选的可用题目列表。
+  - “添加”操作将节点追加到结构树中。
+
+### 3.2 阅卷界面
+位于 `/teacher/exams/grading/[submissionId]`。
+
+- **`GradingView` (客户端组件)**
+  - **左侧面板**: 只读视图，显示学生的答案与题目内容。
+  - **右侧面板**: 评分和反馈的输入字段。
+  - **状态**: 在提交前管理本地更改。
+- **Actions**: `gradeSubmissionAction` 更新 `submissionAnswers` 并将总分聚合到 `examSubmissions`。
+
+## 4. 关键工作流
+
+### 4.1 创建与构建考试
+1.  **创建**: 教师输入基本信息（标题、科目）。数据库创建记录（草稿状态）。
+2.  **构建**:
+    - 教师打开“构建”页面。
+    - 服务器从数据库 Hydrate（注水）`initialStructure`。
+    - 教师从题库拖拽题目到结构树。
+    - 教师创建章节（分组）。
+    - **保存**: 同时提交 `questionsJson`（扁平化，用于索引）和 `structureJson`（树状，用于布局）到 `updateExamAction`。
+3.  **发布**: 状态变更为 `published`。
+
+### 4.2 阅卷流程
+1.  **列表**: 教师查看 `submission-data-table`。
+2.  **评分**: 打开特定提交。
+3.  **审查**: 遍历题目。
+    - 系统显示学生答案。
+    - 教师输入分数（上限为满分）和反馈。
+4.  **提交**: 服务器更新单个答案记录并重新计算提交总分。
+
+## 5. 技术决策
+
+### 5.1 混合存储策略
+我们在存储考试题目时采用了 **混合方法**：
+- **关系型 (`exam_questions`)**: 用于“查找所有使用题目 X 的考试”查询和外键约束。
+- **文档型 (`exams.structure`)**: 用于渲染嵌套 UI 和保留任意排序/分组。
+*理由*: 这结合了 SQL 的完整性和 NoSQL 在 UI 布局上的灵活性。
+
+### 5.2 拖拽功能
+使用 `@dnd-kit` 代替旧库，因为：
+- 更好的无障碍支持（键盘支持）。
+- 模块化架构（Sensors, Modifiers）。
+- 面向未来（现代 React Hooks 模式）。
+
+### 5.3 Server Actions
+所有变更操作（保存草稿、发布、评分）均使用 Next.js Server Actions，以确保类型安全并自动重新验证缓存。

docs/design/design_system.md

@@ -0,0 +1,258 @@
+# Next_Edu Design System Specs
+
+**Version**: 1.4.0 (Updated)
+**Status**: ACTIVE
+**Role**: Chief Creative Director
+**Philosophy**: "Data as Art" - Clean, Minimalist, Information-Dense.
+
+---
+
+## 1. 核心理念 (Core Philosophy)
+
+Next_Edu 旨在对抗教育系统常见的信息过载。我们的设计风格深受 **International Typographic Style (国际主义设计风格)** 影响。
+
+*   **Precision (精准)**: 每一个像素的留白都有其目的。
+*   **Clarity (清晰)**: 通过排版和对比度区分层级，而非装饰性的色块。
+*   **Efficiency (效率)**: 专为高密度数据操作优化，减少视觉噪音。
+
+---
+
+## 2. 视觉基础 (Visual Foundation)
+
+### 2.1 色彩系统 (Color System)
+
+我们放弃 Hex 直选，全面采用 **HSL 语义化变量** 以支持完美的多主题适配。
+
+#### **Base (基调)**
+*   **Neutral**: Zinc (锌色). 冷峻、纯净，无偏色。
+*   **Brand**: Deep Indigo (深靛蓝).
+    *   `Primary`: 专业、权威，避免幼稚的高饱和蓝。
+    *   语义: `hsl(var(--primary))`
+
+#### **Functional (功能色)**
+| 语义 | 色系 | 用途 |
+| :--- | :--- | :--- |
+| **Destructive** | Red | 删除、危险操作、系统错误 |
+| **Warning** | Amber | 需注意的状态、非阻断性警告 |
+| **Success** | Emerald | 操作成功、状态正常 |
+| **Info** | Blue | 一般性提示、帮助信息 |
+
+#### **Surface Hierarchy (层级)**
+1.  **Background**: 应用底层背景。
+2.  **Card**: 内容承载容器，轻微提升层级。
+3.  **Popover**: 悬浮层、下拉菜单，最高层级。
+4.  **Muted**: 用于次级信息或禁用状态背景。
+
+### 2.2 排版 (Typography)
+
+*   **Font Family**: `Geist Sans` > `Inter` > `System UI`.
+    *   *Requirement*: 必须开启 `tabular-nums` (等宽数字) 特性，确保表格数据对齐。
+*   **Scale**:
+    *   **Base Body**: 14px (0.875rem) - 提升信息密度。
+    *   **H1 (Page Title)**: 24px, Tracking -0.02em, Weight 600.
+    *   **H2 (Section Title)**: 20px, Tracking -0.01em, Weight 600.
+    *   **H3 (Card Title)**: 16px, Weight 600.
+    *   **Tiny/Caption**: 12px, Text-Muted-Foreground.
+
+### 2.3 质感 (Look & Feel)
+
+*   **Borders**: `1px solid var(--border)`. 界面骨架，以此分割区域而非背景色块。
+*   **Radius**:
+    *   `sm` (4px): Badges, Checkboxes.
+    *   `md` (8px): **Default**. Buttons, Inputs, Cards.
+    *   `lg` (12px): Modals, Dialogs.
+*   **Shadows**:
+    *   Default: None (Flat).
+    *   Hover: `shadow-sm` (仅用于可交互元素).
+    *   Dropdown/Popover: `shadow-md`.
+    *   *Ban*: 禁止使用大面积弥散阴影。
+
+---
+
+## 3. 核心布局 (App Shell)
+
+### 3.1 架构 (Architecture)
+我们采用了 `SidebarProvider` + `AppSidebar` 的组合模式，确保了布局的灵活性和移动端的完美适配。
+
+*   **Provider**: `SidebarProvider` (src/modules/layout/components/sidebar-provider.tsx)
+    *   管理侧边栏状态 (`expanded`, `isMobile`).
+    *   负责在移动端渲染 Sheet (Drawer)。
+    *   负责在桌面端渲染 Sticky Sidebar。
+    *   **Key Prop**: `sidebar` (显式传递侧边栏组件)。
+
+### 3.2 布局结构
+```
++-------------------------------------------------------+
+|  Sidebar  |  Header (Sticky)                          |
+|           |-------------------------------------------|
+| (Collap-  |  Main Content                             |
+|  sible)   |                                           |
+|           |  +-------------------------------------+  |
+|           |  | Card                                |  |
+|           |  | +---------------------------------+ |  |
+|           |  | | Data Table                      | |  |
+|           |  | +---------------------------------+ |  |
+|           |  +-------------------------------------+  |
+|           |                                           |
++-------------------------------------------------------+
+```
+
+### 3.3 详细规范
+
+#### **Sidebar (侧边栏)**
+*   **Width**: Expanded `260px` | Collapsed `64px` | Mobile `Sheet (Drawer)`.
+*   **Behavior**:
+    *   Desktop: 固定左侧，支持折叠。
+    *   Mobile: 默认隐藏，点击汉堡菜单从左侧滑出。
+*   **Navigation Item**:
+    *   Height: `36px` (Compact).
+    *   State:
+        *   `Inactive`: `text-muted-foreground hover:text-foreground`.
+        *   `Active`: `bg-sidebar-accent text-sidebar-accent-foreground font-medium`.
+
+#### **Header (顶栏)**
+*   **Height**: `64px` (h-16).
+*   **Layout**: `flex items-center justify-between px-6 border-b`.
+*   **Components**:
+    1.  **Breadcrumb**: 显示当前路径，层级清晰。
+    2.  **Global Search**: `Cmd+K` 触发，居中或靠右。
+    3.  **User Nav**: 头像 + 下拉菜单。
+
+#### **Main Content (内容区)**
+*   **Padding**: `p-6` (Desktop) / `p-4` (Mobile).
+*   **Max Width**: `max-w-[1600px]` (默认) 或 `w-full` (针对超宽报表)。
+
+---
+
+## 4. 导航与角色系统 (Navigation & Roles)
+
+Next_Edu 支持多角色（Multi-Tenant / Role-Based）导航系统。
+
+### 4.1 配置文件
+导航结构已从 UI 组件中解耦，统一配置在：
+`src/modules/layout/config/navigation.ts`
+
+### 4.2 支持的角色 (Roles)
+系统内置支持以下角色，每个角色拥有独立的侧边栏菜单结构：
+*   **Admin**: 系统管理员，拥有所有管理权限 (School Management, User Management, Finance)。
+*   **Teacher**: 教师，关注班级管理 (My Classes)、成绩录入 (Gradebook) 和日程。
+*   **Student**: 学生，关注课程学习 (My Learning) 和作业提交。
+*   **Parent**: 家长，关注子女动态和学费缴纳。
+
+### 4.3 开发与调试
+*   **View As (Dev Mode)**: 在开发环境下，侧边栏顶部提供 "View As" 下拉菜单，允许开发者实时切换角色视角，预览不同角色的导航结构。
+*   **Implementation**: `AppSidebar` 组件通过读取 `NAV_CONFIG[currentRole]` 动态渲染菜单项。
+
+---
+
+## 5. 错误处理与边界情况 (Error Handling & Boundaries)
+
+系统必须优雅地处理错误和边缘情况，避免白屏或无反馈。
+
+### 5.1 全局错误边界 (Global Error Boundary)
+*   **Scope**: 捕获渲染期间的未处理异常。
+*   **UI**: 显示友好的错误页面（非技术堆栈信息），提供 "Try Again" 按钮重置状态。
+*   **Implementation**: 使用 React `ErrorBoundary` 或 Next.js `error.tsx`。
+
+### 5.2 404 Not Found
+*   **Design**: 必须保留 App Shell (Sidebar + Header)，仅在 Main Content 区域显示 404 提示。
+*   **Content**: "Page not found" 文案 + 返回 Dashboard 的主操作按钮。
+
+### 5.3 空状态 (Empty States)
+当列表或表格无数据时，**严禁**只显示空白。
+*   **Component**: `EmptyState`。
+*   **Composition**:
+    1.  **Icon**: 线性风格图标 (muted foreground).
+    2.  **Title**: 简短说明 (e.g., "No students found").
+    3.  **Description**: 解释原因或下一步操作 (e.g., "Add a student to get started").
+    4.  **Action**: (可选) "Create New" 按钮。
+
+### 5.4 加载状态 (Loading States)
+*   **Initial Load**: 使用 `Skeleton` 骨架屏，模拟内容布局，避免 CLS (Content Layout Shift)。禁止使用全屏 Spinner。
+*   **Action Loading**: 按钮点击后进入 `disabled` + `spinner` 状态。
+*   **Table Loading**: 表格内容区域显示 3-5 行 Skeleton Rows。
+
+### 5.5 表单验证 (Form Validation)
+*   **Style**: 错误信息显示在输入框下方，字号 `text-xs`，颜色 `text-destructive`。
+*   **Input**: 边框变红 (`border-destructive`)。
+
+---
+
+## 6. 职责边界与协作 (Responsibility Boundaries)
+
+**[IMPORTANT] 严禁越界修改 (Strict No-Modification Policy)**
+
+为了维护大型项目的可维护性，UI 工程师和开发人员必须遵守以下边界规则：
+
+### 6.1 模块化原则 (Modularity)
+*   **Scope**: 开发者仅应对分配给自己的模块负责。例如，负责 "Dashboard" 的开发者**不应**修改 "Sidebar" 或 "Auth" 模块的代码。
+*   **Dependencies**: 如果你的模块依赖于其他模块的变更，**必须**先与该模块的负责人沟通，或在 PR 中明确标注。
+
+### 6.2 共享组件 (Shared Components)
+*   **Immutable Core**: `src/shared/components/ui` 下的基础组件（如 Button, Card）视为**核心库**。
+*   **Extension**: 如果基础组件不能满足需求，优先考虑组合（Composition）或创建新的业务组件，而不是修改核心组件的源码。
+*   **Modification Request**: 只有在发现严重 Bug 或需要全局样式调整时，才允许修改核心组件，且必须经过 Design Lead 审批。
+
+### 6.3 样式一致性 (Consistency)
+*   **Global CSS**: `globals.css` 定义了系统的物理法则。严禁在局部组件中随意覆盖全局 CSS 变量。
+*   **Tailwind Config**: 禁止随意在组件中添加任意值（Arbitrary Values, e.g., `w-[123px]`），必须使用 Design Token。
+
+---
+
+## 7. 组件设计规范 (Component Specs)
+
+### 7.1 Card (卡片)
+卡片是信息组织的基本单元。
+*   **Class**: `bg-card text-card-foreground border rounded-lg shadow-none`.
+*   **Header**: `p-6 pb-2`. Title (`font-semibold leading-none tracking-tight`).
+*   **Content**: `p-6 pt-0`.
+
+### 7.2 Data Table (数据表格)
+教务系统的核心组件。
+*   **Density**: 
+    *   `Default`: Row Height `48px` (h-12).
+    *   `Compact`: Row Height `36px` (h-9).
+*   **Header**: `bg-muted/50 text-muted-foreground text-xs uppercase font-medium`.
+*   **Stripes**: 默认关闭。仅在列数 > 8 时开启 `even:bg-muted/50`。
+*   **Actions**: 行操作按钮应默认隐形 (`opacity-0`)，Hover 时显示 (`group-hover:opacity-100`)，减少视觉干扰。
+
+### 7.3 Feedback (反馈与通知)
+*   **Toast**: 使用 `Sonner` 组件。
+    *   位置: 默认右下角 (Bottom Right).
+    *   样式: 极简黑白风格 (跟随主题)，支持撤销操作。
+    *   调用: `toast("Event has been created", { description: "Sunday, December 03, 2023 at 9:00 AM" })`.
+*   **Skeleton**: 加载状态必须使用 Skeleton 骨架屏，禁止使用全屏 Spinner。
+*   **Badge**: 状态指示器。
+    *   `default`: 主要状态 (Primary).
+    *   `secondary`: 次要状态 (Neutral).
+    *   `destructive`: 错误/警告状态 (Error).
+    *   `outline`: 描边风格 (Subtle).
+
+---
+
+## 8. 开发指南 (Developer Guide)
+
+### 8.1 CSS Variables
+所有颜色和圆角均通过 CSS 变量控制，定义在 `globals.css` 中。禁止在代码中 Hardcode 颜色值 (如 `#FFFFFF`, `rgb(0,0,0)` )。
+
+### 8.2 Tailwind Utility 优先
+优先使用 Tailwind Utility Classes。
+*   ✅ `text-sm text-muted-foreground`
+*   ❌ `.custom-text-class { font-size: 14px; color: #666; }`
+
+### 8.3 Dark Mode
+设计系统原生支持深色模式。只要正确使用语义化颜色变量（如 `bg-background`, `text-foreground`），Dark Mode 将自动完美适配，无需额外编写 `dark:` 修饰符（除非为了特殊调整）。
+
+### 8.4 组件库引用
+所有 UI 组件位于 `src/shared/components/ui`。
+*   `Button`: 基础按钮
+*   `Input`: 输入框
+*   `Select`: 下拉选择器 (New)
+*   `Sheet`: 侧边栏/抽屉
+*   `Sonner`: Toast 通知
+*   `Badge`: 徽章/标签
+*   `Skeleton`: 加载占位符
+*   `DropdownMenu`: 下拉菜单
+*   `Avatar`: 头像
+*   `Label`: 表单标签
+*   `EmptyState`: 空状态占位 (New)