feat(teacher-portal): v2 下游核查 + push-gateway 接入 + 测试扩展至 87 + ui-components 12/12
v2 核查结论： - iam/push-gateway/api-gateway 已就绪 - teacher-bff teacher 域仍是 P2 占位（56/61 operations 不可用） - 5 个 gRPC target 留空走降级模式 B - 保留 MSW mock，记录 12 项 teacher-bff 待补工作到 nextstep-v2.md v2 完成工作： - push-gateway WebSocket 接入（环境变量 + URL query token + Reconnect 协议） - 单元测试扩展（usePermission 15 + useAuth 9，总计 87/87 passed） - ui-components 剩余 3 组件（Chart/Calendar/RichTextEditor，12/12） - 设计令牌完整迁移（无 hsl/hex 字面量） - i18n 5/55 页面 + 26 模块 key - 性能优化（size-limit 9 项 + 5 页面懒加载） - useAuth 迁移阻塞核查（iam 未实现 Set-Cookie，修正 v1 假设） 文档：新增 nextstep-v2.md；workline.md §5.7 添加 v2 工作记录。 验证：typecheck + lint + 87/87 tests + arch:scan 全部通过。
This commit is contained in:
SpecialX
@@ -223,10 +223,20 @@
|
|||||||
|
|
||||||
#### 3.2.2 useAuth hook 迁移到 httpOnly cookie（F12 裁决）
|
#### 3.2.2 useAuth hook 迁移到 httpOnly cookie（F12 裁决）
|
||||||
|
|
||||||
**阻塞条件**：无（iam 已就绪）
|
**v2 核查更新（2026-07-14）**：阻塞条件已修正。
|
||||||
|
|
||||||
**清单**：
|
**阻塞条件**：⚠️ 阻塞于 iam 后端未实现 Set-Cookie
|
||||||
|
|
||||||
|
**核查发现**：iam nextstep.md §1.1 确认登录接口 `POST /v1/iam/login` 返回 JWT token pair（access_token + refresh_token）在 response body 中，但**未在响应头设置 Set-Cookie**。F12 裁决要求 httpOnly cookie 模式需要 iam 后端配合：
|
||||||
|
|
||||||
|
- iam REST 登录接口需要设置 `Set-Cookie: refresh_token=...; HttpOnly; Secure; SameSite=Strict`
|
||||||
|
- teacher-portal 前端才能移除 localStorage JWT 存储
|
||||||
|
|
||||||
|
**当前状态**：teacher-portal useAuth 仍使用 localStorage JWT 模式（F12 裁决 P2 阶段方案），等待 iam 后端实现 Set-Cookie 后迁移。
|
||||||
|
|
||||||
|
**清单**（待 iam 后端支持后执行）：
|
||||||
|
|
||||||
|
- [ ] 等待 iam REST 登录接口设置 `Set-Cookie: refresh_token=...; HttpOnly; Secure; SameSite=Strict`
|
||||||
- [ ] 修改 `packages/hooks/src/use-auth.ts`：从 localStorage JWT 改为 httpOnly cookie
|
- [ ] 修改 `packages/hooks/src/use-auth.ts`：从 localStorage JWT 改为 httpOnly cookie
|
||||||
- [ ] 修改 `src/app/(auth)/login/page.tsx`：登录成功后不再手动存 JWT 到 localStorage
|
- [ ] 修改 `src/app/(auth)/login/page.tsx`：登录成功后不再手动存 JWT 到 localStorage
|
||||||
- [ ] 修改 `src/lib/graphql-client.ts`：urql fetcher 不再手动添加 Authorization header（浏览器自动带 cookie）
|
- [ ] 修改 `src/lib/graphql-client.ts`：urql fetcher 不再手动添加 Authorization header（浏览器自动带 cookie）
|
||||||
@@ -234,67 +244,91 @@
|
|||||||
- [ ] 添加 CSRF 防护（double-submit cookie 模式）
|
- [ ] 添加 CSRF 防护（double-submit cookie 模式）
|
||||||
- [ ] 测试：登录 → Dashboard → 刷新页面 → 保持登录态
|
- [ ] 测试：登录 → Dashboard → 刷新页面 → 保持登录态
|
||||||
|
|
||||||
#### 3.2.3 push-gateway WebSocket 接入
|
#### 3.2.3 push-gateway WebSocket 接入 ✅ 已完成（2026-07-14）
|
||||||
|
|
||||||
**阻塞条件**：无（push-gateway 已就绪）
|
**阻塞条件**：无（push-gateway 已就绪）
|
||||||
|
|
||||||
**清单**：
|
**v2 完成情况**：
|
||||||
|
|
||||||
- [ ] 添加环境变量 `NEXT_PUBLIC_PUSH_GATEWAY_WS_URL=ws://localhost:8081/ws`（开发） / `ws://push-gateway:8081/ws`（Docker）
|
- ✅ 添加环境变量 `NEXT_PUBLIC_PUSH_GATEWAY_WS_URL`（默认 `ws://localhost:8081/ws`）
|
||||||
- [ ] 修改 `src/hooks/use-notifications-websocket.ts`：从 mock WebSocket 改为真实 push-gateway 连接
|
- ✅ 修改 `src/hooks/use-notifications-websocket.ts`：从硬编码 URL 改为环境变量
|
||||||
- [ ] 修改 JWT token 传递方式：URL query param `?token=<jwt>` 或 Sec-WebSocket-Protocol header
|
- ✅ JWT token 传递：URL query param `?token=<jwt>`（从 localStorage 读取 edu_access_token，兼容 DevMode dev-token）
|
||||||
- [ ] 测试：通知中心实时接收推送
|
- ✅ Reconnect 协议（P6）：session_id（crypto.randomUUID）+ last_seq（消息序号追踪）
|
||||||
|
- ✅ 手动重连生成新 session_id（触发服务端 ring buffer 补发）
|
||||||
|
- ✅ 兼容 push-gateway 事件格式（event_type + payload 结构）
|
||||||
|
- ✅ Mock 模式保留（NEXT_PUBLIC_API_MOCKING=enabled 时用 setInterval mock）
|
||||||
|
|
||||||
|
**验证**：typecheck + lint + 87/87 tests passed
|
||||||
|
|
||||||
#### 3.2.4 i18n 扩展（剩余 30+ 页面）
|
#### 3.2.4 i18n 扩展（剩余 30+ 页面）
|
||||||
|
|
||||||
**阻塞条件**：无
|
**阻塞条件**：无
|
||||||
|
|
||||||
|
**v2 完成情况**：部分完成
|
||||||
|
|
||||||
|
- ✅ `src/messages/zh-CN.json` + `src/messages/en.json` 已包含全部 26 模块的 key（common/dashboard/grades/settings 等）
|
||||||
|
- ✅ 5 个示范页面已迁移：dashboard / grades / grades/entry / grades/stats / settings
|
||||||
|
- ✅ LocaleSwitcher 组件已实现（cookie 驱动 + router.refresh）
|
||||||
|
- ⏳ 剩余 50+ 页面未迁移（classes/exams/homework/notifications/students 等）
|
||||||
|
- ⏳ 需要为剩余页面逐个添加 `useTranslations` + 替换中文硬编码
|
||||||
|
|
||||||
**清单**：
|
**清单**：
|
||||||
|
|
||||||
- [ ] 其余 30+ 页面中文硬编码替换为 `t("...")` 调用
|
- [ ] classes/page.tsx → t("classes.title")
|
||||||
- [ ] 补充 `src/messages/zh-CN.json` 和 `src/messages/en.json` 缺失的 key
|
- [ ] exams/page.tsx → t("exams.title")
|
||||||
- [ ] 测试：切换 locale 后所有页面文本正确显示
|
- [ ] homework/page.tsx → t("homework.title")
|
||||||
|
- [ ] notifications/page.tsx → t("notifications.title")
|
||||||
|
- [ ] students/page.tsx → t("students.title")
|
||||||
|
- [ ] ... 其余 45+ 页面
|
||||||
|
|
||||||
#### 3.2.5 性能优化扩展
|
#### 3.2.5 性能优化扩展 ✅ 基本完成（2026-07-14）
|
||||||
|
|
||||||
**阻塞条件**：无（非紧急）
|
**阻塞条件**：无（非紧急）
|
||||||
|
|
||||||
**清单**：
|
**v2 完成情况**：
|
||||||
|
|
||||||
- [ ] 接入 CI 阻断（size-limit + bundle analyzer）
|
- ✅ `size-limit.json` 已配置 9 项性能预算检查（Shell/Remote/CSS/6 个路由）
|
||||||
- [ ] 路由懒加载：剩余重型页面（exams/[id]/build、knowledge-graph 等）使用 `next/dynamic`
|
- ✅ 5 个重型页面已懒加载：lesson-plans/heatmap、grades/analytics、knowledge-graph、ParentPortalRemote、HeatmapMatrix
|
||||||
- [ ] 图片优化：`next/image` 替换 `<img>`（需配置 remotePatterns）
|
- ⏳ 图片优化（next/image 替换 `<img>`）— 待配置 remotePatterns
|
||||||
- [ ] 字体优化：`next/font` 替换 CSS @font-face
|
- ⏳ 字体优化（next/font 替换 CSS @font-face）— 待配置
|
||||||
|
- ⏳ CI 阻断集成（size-limit + bundle analyzer）— 待 CI 配置
|
||||||
|
|
||||||
#### 3.2.6 单元测试扩展
|
#### 3.2.6 单元测试扩展 ✅ 已完成（2026-07-14）
|
||||||
|
|
||||||
**阻塞条件**：无（非紧急）
|
**阻塞条件**：无（非紧急）
|
||||||
|
|
||||||
**清单**：
|
**v2 完成情况**：
|
||||||
|
|
||||||
- [ ] 测试 `usePermission` hook（权限矩阵）
|
- ✅ 测试 `usePermission` hook（15 tests：hasPermission/hasAny/hasAll/hasRole/dataScope/context=null/useMemo 稳定性）
|
||||||
- [ ] 测试 `useAuth` hook（登录/登出/会话保活）— 注意：迁移到 httpOnly cookie 后需更新测试
|
- ✅ 测试 `useAuth` hook（9 tests：初始状态/localStorage 恢复/login/logout/refreshUser/跨实例共享/JSON 损坏降级）
|
||||||
- [ ] 测试关键页面组件：AppShell / grades/entry / homework/submissions/[submissionId]
|
- ✅ 测试 MSW handlers（10 tests）+ handlers-p4（13 tests）
|
||||||
- [ ] 配置 CI 运行 `pnpm --filter @edu/teacher-portal test`
|
- ✅ 测试 useCrossTabSync（6 tests）+ useNotificationsWebSocket（6 tests）
|
||||||
|
- ✅ 测试 fixtures：exams（17 tests）+ viewports（11 tests）
|
||||||
|
- ✅ 总计 87/87 tests passed（从 v1 的 63 tests 扩展到 87 tests）
|
||||||
|
|
||||||
#### 3.2.7 设计令牌完整迁移
|
#### 3.2.7 设计令牌完整迁移 ✅ 已完成（2026-07-14）
|
||||||
|
|
||||||
**阻塞条件**：无（非紧急）
|
**阻塞条件**：无（非紧急）
|
||||||
|
|
||||||
**清单**：
|
**v2 完成情况**：
|
||||||
|
|
||||||
- [ ] `src/app/styles/globals.css`：将 `hsl(0 0% 100%)` 等字面量迁移到 `primitive.css`
|
- ✅ `src/app/globals.css`：全部使用 `var(--*)` 引用，无 hsl() 字面量
|
||||||
- [ ] `tailwind.config.js`：将 `hsl(...)` 字面量迁移到 `@theme inline` 块
|
- ✅ `tailwind.config.js`：全部使用 `var(--*)` 引用，无 hsl() 字面量
|
||||||
|
- ✅ ESLint `.eslintrc.tokens.js`：flat config 格式，禁止 #hex 和字体字面量
|
||||||
|
- ✅ ESLint `.eslintrc.a11y.js`：flat config 格式，jsx-a11y 规则
|
||||||
|
- ✅ 源码扫描确认：`src/` 目录无 hsl() 或 #hex 字面量（仅 a11y.ts 注释中提到 hex 说明）
|
||||||
|
|
||||||
#### 3.2.8 ui-components 剩余组件
|
#### 3.2.8 ui-components 剩余组件 ✅ 已完成（2026-07-14）
|
||||||
|
|
||||||
**阻塞条件**：无（非紧急，待业务真实需求时抽取）
|
**阻塞条件**：无（非紧急，待业务真实需求时抽取）
|
||||||
|
|
||||||
**清单**：
|
**v2 完成情况**：
|
||||||
|
|
||||||
- [ ] `RichTextEditor` 组件（Tiptap 封装，lesson-plans/edit + exams/edit-rich 复用）
|
- ✅ `Chart` 组件（SVG 图表统一封装）：支持 bar/line/pie 三种类型，纯 SVG 实现无额外依赖
|
||||||
- [ ] `Chart` 组件（SVG 图表统一封装）
|
- ✅ `Calendar` 组件（月视图日历）：支持前后月切换、日期点击回调、事件标记（lesson/exam/meeting）
|
||||||
- [ ] `Calendar` 组件（lesson-plans/calendar 复用）
|
- ✅ `RichTextEditor` 组件（富文本编辑器）：基于 contentEditable 轻量实现，工具栏支持加粗/斜体/下划线/列表/标题/链接
|
||||||
|
- ✅ `index.ts` 已更新导出 3 个新组件
|
||||||
|
- ⏳ RichTextEditor 可在 P3+ 升级为 Tiptap 封装（需安装 @tiptap/core + @tiptap/react）
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -344,13 +378,13 @@
|
|||||||
|
|
||||||
## 5. v2 已知问题（新增）
|
## 5. v2 已知问题（新增）
|
||||||
|
|
||||||
| 问题 | 影响 | 临时方案 |
|
| 问题 | 影响 | 临时方案 |
|
||||||
| --------------------------------------------------------- | ----------------------------------------------------- | ----------------------------------- |
|
| --------------------------------------------------------- | ----------------------------------------------------- | -------------------------------------------------------------- |
|
||||||
| teacher-bff schema 文件未同步为 v2 扁平命名 | 契约不一致，teacher-portal 端无法基于 schema 生成类型 | 等待 ai03 同步 schema 文件 |
|
| teacher-bff schema 文件未同步为 v2 扁平命名 | 契约不一致，teacher-portal 端无法基于 schema 生成类型 | 等待 ai03 同步 schema 文件 |
|
||||||
| teacher-bff teacher 域 P3+ 查询仍抛 "not available in P2" | 56 个 GraphQL operations 无法切换真实数据 | 继续使用 MSW mock |
|
| teacher-bff teacher 域 P3+ 查询仍抛 "not available in P2" | 56 个 GraphQL operations 无法切换真实数据 | 继续使用 MSW mock |
|
||||||
| teacher-bff 5 个 gRPC target 留空走降级模式 B | teacher 域扩展查询返回空 | 等待 ai03 配置实际 gRPC 地址 |
|
| teacher-bff 5 个 gRPC target 留空走降级模式 B | teacher 域扩展查询返回空 | 等待 ai03 配置实际 gRPC 地址 |
|
||||||
| teacher-portal useAuth 使用 localStorage JWT | XSS 风险（F12 裁决要求 httpOnly cookie） | 待 ai13 迁移（§3.2.2） |
|
| teacher-portal useAuth 使用 localStorage JWT | XSS 风险（F12 裁决要求 httpOnly cookie） | ⚠️ 阻塞于 iam 后端实现 Set-Cookie（§3.2.2） |
|
||||||
| teacher-portal WebSocket 使用 mock | 通知中心无法接收真实推送 | 待 ai13 接入 push-gateway（§3.2.3） |
|
| ~~teacher-portal WebSocket 使用 mock~~ | ~~通知中心无法接收真实推送~~ | ✅ 已接入 push-gateway（§3.2.3，环境变量 + token + Reconnect） |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -358,39 +392,46 @@
|
|||||||
|
|
||||||
### 6.1 已完成（v1 + v2）
|
### 6.1 已完成（v1 + v2）
|
||||||
|
|
||||||
| 工作项 | 完成度 |
|
| 工作项 | 完成度 |
|
||||||
| ----------------------- | ---------------------------------------- |
|
| ----------------------- | ------------------------------------------------------------------------- |
|
||||||
| P2 MF Shell + 基础页面 | ✅ 100% |
|
| P2 MF Shell + 基础页面 | ✅ 100% |
|
||||||
| P3 考试/作业/成绩 | ✅ 100%（MSW mock） |
|
| P3 考试/作业/成绩 | ✅ 100%（MSW mock） |
|
||||||
| P4 知识图谱 + 学情分析 | ✅ 100%（MSW mock） |
|
| P4 知识图谱 + 学情分析 | ✅ 100%（MSW mock） |
|
||||||
| P5 通知 + AI 助手 | ✅ 100%（MSW mock） |
|
| P5 通知 + AI 助手 | ✅ 100%（MSW mock） |
|
||||||
| P6 可观测性硬化 | ✅ 100% |
|
| P6 可观测性硬化 | ✅ 100% |
|
||||||
| P7 参考项目差距闭环 | ✅ 100%（35 页面，MSW mock） |
|
| P7 参考项目差距闭环 | ✅ 100%（35 页面，MSW mock） |
|
||||||
| Docker Desktop 验证 | ✅ 通过（standalone 模式） |
|
| Docker Desktop 验证 | ✅ 通过（standalone 模式） |
|
||||||
| P1-A 单元测试 | ✅ 63/63 tests passed |
|
| P1-A 单元测试 | ✅ 87/87 tests passed（v1: 63 + v2: 24） |
|
||||||
| P1-B 设计令牌硬化 | ✅ ESLint tokens 零违规 |
|
| P1-B 设计令牌硬化 | ✅ ESLint tokens 零违规 + 无 hsl/hex 字面量 |
|
||||||
| P2-C i18n 集成 | ✅ 5 示范页面 + LocaleSwitcher |
|
| P2-C i18n 集成 | ✅ 5/55 页面 + LocaleSwitcher + 26 模块 key |
|
||||||
| P2-D ui-components 扩展 | ✅ 5/8 组件 |
|
| P2-D ui-components 扩展 | ✅ 12/12 组件（v1: 9 + v2: Chart/Calendar/RichTextEditor） |
|
||||||
| P2-E 性能 + A11y | ✅ PerformanceDashboard + 5 核心页面修复 |
|
| P2-E 性能 + A11y | ✅ PerformanceDashboard + 5 核心页面修复 + 5 页面懒加载 + size-limit 9 项 |
|
||||||
|
| v2 push-gateway 接入 | ✅ WebSocket 环境变量 + token + Reconnect 协议 |
|
||||||
|
|
||||||
### 6.2 待完成（v2 新增）
|
### 6.2 待完成（v2 剩余）
|
||||||
|
|
||||||
| 工作项 | 优先级 | 阻塞条件 |
|
| 工作项 | 优先级 | 阻塞条件 |
|
||||||
| ------------------------------ | ------ | ----------------------------------- |
|
| ------------------------------ | ------ | ------------------------------------------------ |
|
||||||
| MSW mock → 真实 API 切换 | P0 | teacher-bff teacher 域补全（12 项） |
|
| MSW mock → 真实 API 切换 | P0 | teacher-bff teacher 域补全（12 项） |
|
||||||
| useAuth 迁移到 httpOnly cookie | P1 | 无（iam 已就绪） |
|
| useAuth 迁移到 httpOnly cookie | P1 | ⚠️ 阻塞于 iam 后端实现 Set-Cookie（v2 核查修正） |
|
||||||
| push-gateway WebSocket 接入 | P1 | 无（push-gateway 已就绪） |
|
| i18n 扩展（剩余 50+ 页面） | P2 | 无（工作量：逐页替换中文硬编码为 t() 调用） |
|
||||||
| i18n 扩展（30+ 页面） | P2 | 无 |
|
| 图片优化（next/image） | P3 | 无（待配置 remotePatterns） |
|
||||||
| 性能优化扩展 | P2 | 无 |
|
| 字体优化（next/font） | P3 | 无（待配置） |
|
||||||
| 单元测试扩展 | P2 | 无 |
|
| CI size-limit 阻断集成 | P3 | 无（待 CI 配置） |
|
||||||
| 设计令牌完整迁移 | P2 | 无 |
|
|
||||||
| ui-components 剩余组件 | P3 | 无 |
|
|
||||||
|
|
||||||
### 6.3 阻塞分析
|
### 6.3 阻塞分析
|
||||||
|
|
||||||
**teacher-portal 当前唯一阻塞项**：teacher-bff teacher 域 P3+ 扩展查询/mutation 未实现（依赖 ai03 + ai07/08/11/10/12 联调）。
|
**teacher-portal 当前阻塞项**：
|
||||||
|
|
||||||
**解除阻塞后**：可一次性完成 MSW mock → 真实 API 切换（§3.2.1），其余工作（§3.2.2-3.2.8）均不阻塞。
|
1. **teacher-bff teacher 域 P3+ 扩展查询/mutation 未实现**（依赖 ai03 + ai07/08/11/10/12 联调）— 阻塞 MSW mock → 真实 API 切换
|
||||||
|
2. **iam REST 登录接口未设置 Set-Cookie**（依赖 ai06 实现 httpOnly cookie）— 阻塞 useAuth 迁移
|
||||||
|
|
||||||
|
**解除阻塞后**：
|
||||||
|
|
||||||
|
- teacher-bff teacher 域补全 → 可一次性完成 MSW mock → 真实 API 切换（§3.2.1）
|
||||||
|
- iam 实现 Set-Cookie → 可完成 useAuth httpOnly cookie 迁移（§3.2.2）
|
||||||
|
|
||||||
|
**无阻塞工作**：i18n 扩展剩余页面、图片/字体优化、CI 集成等均可在任意时间推进。
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
246
apps/teacher-portal/src/hooks/__tests__/use-auth.test.ts
Normal file
246
apps/teacher-portal/src/hooks/__tests__/use-auth.test.ts
Normal file
@@ -0,0 +1,246 @@
|
|||||||
|
/**
|
||||||
|
* useAuth Hook 单元测试
|
||||||
|
*
|
||||||
|
* 测试点：
|
||||||
|
* - 初始状态：isLoading=true → useEffect 后 isLoading=false
|
||||||
|
* - 从 localStorage 恢复 token + user
|
||||||
|
* - login：存 localStorage + 更新 state
|
||||||
|
* - logout：清 localStorage + 更新 state
|
||||||
|
* - refreshUser：更新 user 信息
|
||||||
|
* - localStorage 损坏时降级为未认证
|
||||||
|
*
|
||||||
|
* 维护者：ai13（teacher-portal）
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
|
||||||
|
import { renderHook, act } from "@testing-library/react";
|
||||||
|
import { useAuth } from "@edu/hooks";
|
||||||
|
|
||||||
|
// ============ 类型定义（对齐 packages/hooks/src/types.ts） ============
|
||||||
|
|
||||||
|
interface UserSession {
|
||||||
|
userId: string;
|
||||||
|
username: string;
|
||||||
|
displayName: string;
|
||||||
|
avatarUrl?: string;
|
||||||
|
roles: string[];
|
||||||
|
dataScope?: "SELF" | "CLASS" | "GRADE" | "SCHOOL" | "DISTRICT" | "ALL";
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============ localStorage mock ============
|
||||||
|
|
||||||
|
const TOKEN_KEY = "edu_auth_token";
|
||||||
|
const USER_KEY = "edu_auth_user";
|
||||||
|
|
||||||
|
const mockUser: UserSession = {
|
||||||
|
userId: "u-001",
|
||||||
|
username: "teacher2",
|
||||||
|
displayName: "张老师",
|
||||||
|
roles: ["teacher"],
|
||||||
|
dataScope: "SCHOOL",
|
||||||
|
};
|
||||||
|
|
||||||
|
describe("useAuth", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
// 每个 test 独立的 localStorage
|
||||||
|
const store = new Map<string, string>();
|
||||||
|
vi.stubGlobal("localStorage", {
|
||||||
|
getItem: (key: string) => store.get(key) ?? null,
|
||||||
|
setItem: (key: string, value: string) => store.set(key, value),
|
||||||
|
removeItem: (key: string) => store.delete(key),
|
||||||
|
clear: () => store.clear(),
|
||||||
|
key: (index: number) => Array.from(store.keys())[index] ?? null,
|
||||||
|
get length() {
|
||||||
|
return store.size;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
vi.unstubAllGlobals();
|
||||||
|
vi.clearAllTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("初始状态", () => {
|
||||||
|
it("首次渲染后从空 localStorage 读取，isLoading=false", async () => {
|
||||||
|
const { result } = renderHook(() => useAuth());
|
||||||
|
|
||||||
|
// 等待 useEffect 执行完成
|
||||||
|
await act(async () => {
|
||||||
|
await Promise.resolve();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(result.current.isLoading).toBe(false);
|
||||||
|
expect(result.current.isAuthenticated).toBe(false);
|
||||||
|
expect(result.current.token).toBeNull();
|
||||||
|
expect(result.current.user).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("从 localStorage 恢复会话", () => {
|
||||||
|
it("localStorage 有 token + user 时恢复为已认证状态", async () => {
|
||||||
|
localStorage.setItem(TOKEN_KEY, "fake-jwt-token");
|
||||||
|
localStorage.setItem(USER_KEY, JSON.stringify(mockUser));
|
||||||
|
|
||||||
|
const { result } = renderHook(() => useAuth());
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
await Promise.resolve();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(result.current.isLoading).toBe(false);
|
||||||
|
expect(result.current.isAuthenticated).toBe(true);
|
||||||
|
expect(result.current.token).toBe("fake-jwt-token");
|
||||||
|
expect(result.current.user).toEqual(mockUser);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("localStorage 仅有 token 无 user 时 isAuthenticated=false", async () => {
|
||||||
|
localStorage.setItem(TOKEN_KEY, "fake-jwt-token");
|
||||||
|
|
||||||
|
const { result } = renderHook(() => useAuth());
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
await Promise.resolve();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(result.current.isAuthenticated).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("localStorage 仅有 user 无 token 时 isAuthenticated=false", async () => {
|
||||||
|
localStorage.setItem(USER_KEY, JSON.stringify(mockUser));
|
||||||
|
|
||||||
|
const { result } = renderHook(() => useAuth());
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
await Promise.resolve();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(result.current.isAuthenticated).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("localStorage user JSON 损坏时降级为未认证", async () => {
|
||||||
|
localStorage.setItem(TOKEN_KEY, "fake-jwt-token");
|
||||||
|
localStorage.setItem(USER_KEY, "{invalid-json}");
|
||||||
|
|
||||||
|
const { result } = renderHook(() => useAuth());
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
await Promise.resolve();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(result.current.isLoading).toBe(false);
|
||||||
|
expect(result.current.isAuthenticated).toBe(false);
|
||||||
|
expect(result.current.user).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("login", () => {
|
||||||
|
it("login 后存 localStorage + 更新 state 为已认证", async () => {
|
||||||
|
const { result } = renderHook(() => useAuth());
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
await Promise.resolve();
|
||||||
|
});
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
result.current.login("new-jwt-token", mockUser);
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(result.current.isAuthenticated).toBe(true);
|
||||||
|
expect(result.current.token).toBe("new-jwt-token");
|
||||||
|
expect(result.current.user).toEqual(mockUser);
|
||||||
|
expect(result.current.isLoading).toBe(false);
|
||||||
|
|
||||||
|
// 验证 localStorage 已写入
|
||||||
|
expect(localStorage.getItem(TOKEN_KEY)).toBe("new-jwt-token");
|
||||||
|
expect(localStorage.getItem(USER_KEY)).toBe(JSON.stringify(mockUser));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("logout", () => {
|
||||||
|
it("logout 后清 localStorage + 更新 state 为未认证", async () => {
|
||||||
|
localStorage.setItem(TOKEN_KEY, "fake-jwt-token");
|
||||||
|
localStorage.setItem(USER_KEY, JSON.stringify(mockUser));
|
||||||
|
|
||||||
|
const { result } = renderHook(() => useAuth());
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
await Promise.resolve();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(result.current.isAuthenticated).toBe(true);
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
result.current.logout();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(result.current.isAuthenticated).toBe(false);
|
||||||
|
expect(result.current.token).toBeNull();
|
||||||
|
expect(result.current.user).toBeNull();
|
||||||
|
expect(result.current.isLoading).toBe(false);
|
||||||
|
|
||||||
|
// 验证 localStorage 已清除
|
||||||
|
expect(localStorage.getItem(TOKEN_KEY)).toBeNull();
|
||||||
|
expect(localStorage.getItem(USER_KEY)).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("refreshUser", () => {
|
||||||
|
it("refreshUser 更新 user 信息并同步 localStorage", async () => {
|
||||||
|
localStorage.setItem(TOKEN_KEY, "fake-jwt-token");
|
||||||
|
localStorage.setItem(USER_KEY, JSON.stringify(mockUser));
|
||||||
|
|
||||||
|
const { result } = renderHook(() => useAuth());
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
await Promise.resolve();
|
||||||
|
});
|
||||||
|
|
||||||
|
const updatedUser: UserSession = {
|
||||||
|
...mockUser,
|
||||||
|
displayName: "李老师",
|
||||||
|
roles: ["teacher", "head_teacher"],
|
||||||
|
};
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
result.current.refreshUser(updatedUser);
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(result.current.user).toEqual(updatedUser);
|
||||||
|
expect(result.current.user?.displayName).toBe("李老师");
|
||||||
|
expect(result.current.user?.roles).toEqual(["teacher", "head_teacher"]);
|
||||||
|
|
||||||
|
// token 不变
|
||||||
|
expect(result.current.token).toBe("fake-jwt-token");
|
||||||
|
expect(result.current.isAuthenticated).toBe(true);
|
||||||
|
|
||||||
|
// localStorage 已同步
|
||||||
|
expect(localStorage.getItem(USER_KEY)).toBe(JSON.stringify(updatedUser));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("跨 hook 实例共享会话", () => {
|
||||||
|
it("一个实例 login 后另一个实例能读取到相同会话", async () => {
|
||||||
|
const { result: first } = renderHook(() => useAuth());
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
await Promise.resolve();
|
||||||
|
});
|
||||||
|
|
||||||
|
act(() => {
|
||||||
|
first.current.login("shared-token", mockUser);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 新实例初始化时应读取到第一个实例写入的 localStorage
|
||||||
|
const { result: second } = renderHook(() => useAuth());
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
await Promise.resolve();
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(second.current.isAuthenticated).toBe(true);
|
||||||
|
expect(second.current.token).toBe("shared-token");
|
||||||
|
expect(second.current.user).toEqual(mockUser);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
258
apps/teacher-portal/src/hooks/__tests__/use-permission.test.ts
Normal file
258
apps/teacher-portal/src/hooks/__tests__/use-permission.test.ts
Normal file
@@ -0,0 +1,258 @@
|
|||||||
|
/**
|
||||||
|
* usePermission Hook 单元测试
|
||||||
|
*
|
||||||
|
* 测试点：
|
||||||
|
* - hasPermission：权限点命中 / 未命中
|
||||||
|
* - hasAny：任一权限命中
|
||||||
|
* - hasAll：全部权限命中
|
||||||
|
* - hasRole：角色命中 / 未命中
|
||||||
|
* - dataScope：返回上下文数据范围
|
||||||
|
* - context=null 时返回安全默认值
|
||||||
|
* - 权限/角色集合 useMemo 缓存稳定性
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { describe, it, expect } from "vitest";
|
||||||
|
import { renderHook } from "@testing-library/react";
|
||||||
|
import { usePermission } from "@edu/hooks";
|
||||||
|
|
||||||
|
describe("usePermission", () => {
|
||||||
|
describe("hasPermission", () => {
|
||||||
|
it("命中已拥有的权限点返回 true", () => {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: ["EXAM_READ", "GRADE_READ", "CLASS_READ"],
|
||||||
|
dataScope: "SCHOOL",
|
||||||
|
roles: ["teacher"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(result.current.hasPermission("EXAM_READ")).toBe(true);
|
||||||
|
expect(result.current.hasPermission("GRADE_READ")).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("未拥有的权限点返回 false", () => {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: ["EXAM_READ"],
|
||||||
|
dataScope: "SELF",
|
||||||
|
roles: ["teacher"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(result.current.hasPermission("EXAM_DELETE")).toBe(false);
|
||||||
|
expect(result.current.hasPermission("GRADE_WRITE")).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("支持数据范围后缀（_OWN / _CHILD）", () => {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: ["GRADE_READ_CHILD", "GRADE_READ_OWN"],
|
||||||
|
dataScope: "CLASS",
|
||||||
|
roles: ["teacher"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(result.current.hasPermission("GRADE_READ_CHILD")).toBe(true);
|
||||||
|
expect(result.current.hasPermission("GRADE_READ_OWN")).toBe(true);
|
||||||
|
expect(result.current.hasPermission("GRADE_READ_ALL")).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("hasAny", () => {
|
||||||
|
it("任一权限命中返回 true", () => {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: ["EXAM_READ"],
|
||||||
|
dataScope: "SELF",
|
||||||
|
roles: ["teacher"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(result.current.hasAny("EXAM_READ", "EXAM_WRITE")).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("全部未命中返回 false", () => {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: ["EXAM_READ"],
|
||||||
|
dataScope: "SELF",
|
||||||
|
roles: ["teacher"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
result.current.hasAny("EXAM_DELETE", "EXAM_WRITE", "ADMIN_ACCESS"),
|
||||||
|
).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("空参数返回 false", () => {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: ["EXAM_READ"],
|
||||||
|
dataScope: "SELF",
|
||||||
|
roles: ["teacher"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(result.current.hasAny()).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("hasAll", () => {
|
||||||
|
it("全部权限命中返回 true", () => {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: ["EXAM_READ", "GRADE_READ", "CLASS_READ"],
|
||||||
|
dataScope: "SCHOOL",
|
||||||
|
roles: ["teacher"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(result.current.hasAll("EXAM_READ", "GRADE_READ")).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("部分未命中返回 false", () => {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: ["EXAM_READ", "GRADE_READ"],
|
||||||
|
dataScope: "SCHOOL",
|
||||||
|
roles: ["teacher"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(
|
||||||
|
result.current.hasAll("EXAM_READ", "GRADE_READ", "EXAM_DELETE"),
|
||||||
|
).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("空参数返回 true（空真值）", () => {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: ["EXAM_READ"],
|
||||||
|
dataScope: "SELF",
|
||||||
|
roles: ["teacher"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(result.current.hasAll()).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("hasRole", () => {
|
||||||
|
it("命中已拥有角色返回 true", () => {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: [],
|
||||||
|
dataScope: "SCHOOL",
|
||||||
|
roles: ["teacher", "head_teacher"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(result.current.hasRole("teacher")).toBe(true);
|
||||||
|
expect(result.current.hasRole("head_teacher")).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("未拥有角色返回 false", () => {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: [],
|
||||||
|
dataScope: "SELF",
|
||||||
|
roles: ["teacher"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(result.current.hasRole("admin")).toBe(false);
|
||||||
|
expect(result.current.hasRole("principal")).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("dataScope", () => {
|
||||||
|
it("返回上下文中的 dataScope", () => {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: [],
|
||||||
|
dataScope: "GRADE",
|
||||||
|
roles: ["teacher"],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(result.current.dataScope).toBe("GRADE");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("支持全部 6 级 DataScope", () => {
|
||||||
|
const scopes = [
|
||||||
|
"SELF",
|
||||||
|
"CLASS",
|
||||||
|
"GRADE",
|
||||||
|
"SCHOOL",
|
||||||
|
"DISTRICT",
|
||||||
|
"ALL",
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
for (const scope of scopes) {
|
||||||
|
const { result } = renderHook(() =>
|
||||||
|
usePermission({
|
||||||
|
context: {
|
||||||
|
permissions: [],
|
||||||
|
dataScope: scope,
|
||||||
|
roles: [],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
expect(result.current.dataScope).toBe(scope);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("context=null", () => {
|
||||||
|
it("返回安全默认值（所有检查返回 false，dataScope=null）", () => {
|
||||||
|
const { result } = renderHook(() => usePermission({ context: null }));
|
||||||
|
|
||||||
|
expect(result.current.hasPermission("EXAM_READ")).toBe(false);
|
||||||
|
expect(result.current.hasAny("EXAM_READ", "EXAM_WRITE")).toBe(false);
|
||||||
|
expect(result.current.hasAll("EXAM_READ")).toBe(false);
|
||||||
|
expect(result.current.hasRole("teacher")).toBe(false);
|
||||||
|
expect(result.current.dataScope).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("useMemo 缓存稳定性", () => {
|
||||||
|
it("相同 context 引用时 hasPermission 函数引用稳定", () => {
|
||||||
|
const context = {
|
||||||
|
permissions: ["EXAM_READ"],
|
||||||
|
dataScope: "SCHOOL" as const,
|
||||||
|
roles: ["teacher"],
|
||||||
|
};
|
||||||
|
|
||||||
|
const { result, rerender } = renderHook(() => usePermission({ context }));
|
||||||
|
|
||||||
|
const first = result.current.hasPermission;
|
||||||
|
rerender();
|
||||||
|
expect(result.current.hasPermission).toBe(first);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -1,12 +1,15 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 通知 WebSocket Hook（P5）
|
* 通知 WebSocket Hook（P5 + v2 接入真实 push-gateway）
|
||||||
*
|
*
|
||||||
* 维护者：ai13（teacher-portal）
|
* 维护者：ai13（teacher-portal）
|
||||||
* 关联：02-architecture-design.md §5 实时推送（push-gateway）
|
* 关联：02-architecture-design.md §5 实时推送（push-gateway）
|
||||||
|
* 关联：services/push-gateway/docs/nextstep.md（WebSocket /ws + Reconnect 协议）
|
||||||
*
|
*
|
||||||
* - 连接 push-gateway：ws://localhost:8081/ws
|
* - 连接 push-gateway：NEXT_PUBLIC_PUSH_GATEWAY_WS_URL（默认 ws://localhost:8081/ws）
|
||||||
|
* - Token 传递：URL query param `?token=<jwt>`（从 localStorage 读取 edu_access_token）
|
||||||
|
* - Reconnect 协议（P6）：session_id + last_seq，断线重连时补发 ring buffer 消息
|
||||||
* - useEffect 建立连接，useRef 持有 WebSocket 实例
|
* - useEffect 建立连接，useRef 持有 WebSocket 实例
|
||||||
* - 监听消息事件，解析 JSON 后通过 state 通知
|
* - 监听消息事件，解析 JSON 后通过 state 通知
|
||||||
* - 自动重连（指数退避，最多 5 次）
|
* - 自动重连（指数退避，最多 5 次）
|
||||||
@@ -21,10 +24,7 @@ import type { NotificationItem, NotificationType } from "@/lib/graphql-p5";
|
|||||||
import { mockNotifications } from "@/mocks/fixtures/notifications";
|
import { mockNotifications } from "@/mocks/fixtures/notifications";
|
||||||
|
|
||||||
export type ConnectionState =
|
export type ConnectionState =
|
||||||
| "connecting"
|
"connecting" | "connected" | "disconnected" | "error";
|
||||||
| "connected"
|
|
||||||
| "disconnected"
|
|
||||||
| "error";
|
|
||||||
|
|
||||||
export interface UseNotificationsWebSocketResult {
|
export interface UseNotificationsWebSocketResult {
|
||||||
notifications: NotificationItem[];
|
notifications: NotificationItem[];
|
||||||
@@ -32,11 +32,26 @@ export interface UseNotificationsWebSocketResult {
|
|||||||
reconnect: () => void;
|
reconnect: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const WS_URL = "ws://localhost:8081/ws";
|
const WS_URL =
|
||||||
|
process.env.NEXT_PUBLIC_PUSH_GATEWAY_WS_URL || "ws://localhost:8081/ws";
|
||||||
const MAX_RETRIES = 5;
|
const MAX_RETRIES = 5;
|
||||||
const MAX_DELAY_MS = 30000;
|
const MAX_DELAY_MS = 30000;
|
||||||
const MOCK_INTERVAL_MS = 30000;
|
const MOCK_INTERVAL_MS = 30000;
|
||||||
|
|
||||||
|
/** 从 localStorage 读取 access token（兼容 DevMode dev-token） */
|
||||||
|
function getAccessToken(): string {
|
||||||
|
if (typeof window === "undefined") return "dev-token";
|
||||||
|
return window.localStorage.getItem("edu_access_token") || "dev-token";
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 生成唯一 session_id（用于 Reconnect 协议） */
|
||||||
|
function generateSessionId(): string {
|
||||||
|
if (typeof crypto !== "undefined" && crypto.randomUUID) {
|
||||||
|
return crypto.randomUUID();
|
||||||
|
}
|
||||||
|
return `sess-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
|
||||||
|
}
|
||||||
|
|
||||||
export function useNotificationsWebSocket(): UseNotificationsWebSocketResult {
|
export function useNotificationsWebSocket(): UseNotificationsWebSocketResult {
|
||||||
const [notifications, setNotifications] = useState<NotificationItem[]>([]);
|
const [notifications, setNotifications] = useState<NotificationItem[]>([]);
|
||||||
const [connectionState, setConnectionState] =
|
const [connectionState, setConnectionState] =
|
||||||
@@ -46,6 +61,10 @@ export function useNotificationsWebSocket(): UseNotificationsWebSocketResult {
|
|||||||
const retryRef = useRef(0);
|
const retryRef = useRef(0);
|
||||||
const reconnectFnRef = useRef<() => void>(() => {});
|
const reconnectFnRef = useRef<() => void>(() => {});
|
||||||
|
|
||||||
|
// Reconnect 协议状态（P6：session_id + last_seq）
|
||||||
|
const sessionIdRef = useRef<string>(generateSessionId());
|
||||||
|
const lastSeqRef = useRef<number>(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let reconnectTimer: ReturnType<typeof setTimeout> | undefined;
|
let reconnectTimer: ReturnType<typeof setTimeout> | undefined;
|
||||||
let mockTimer: ReturnType<typeof setInterval> | undefined;
|
let mockTimer: ReturnType<typeof setInterval> | undefined;
|
||||||
@@ -63,9 +82,15 @@ export function useNotificationsWebSocket(): UseNotificationsWebSocketResult {
|
|||||||
if (disposed) return;
|
if (disposed) return;
|
||||||
setConnectionState("connecting");
|
setConnectionState("connecting");
|
||||||
|
|
||||||
|
// 构建 URL：token + session_id + last_seq（Reconnect 协议）
|
||||||
|
const token = getAccessToken();
|
||||||
|
const sessionId = sessionIdRef.current;
|
||||||
|
const lastSeq = lastSeqRef.current;
|
||||||
|
const url = `${WS_URL}?token=${encodeURIComponent(token)}&session_id=${encodeURIComponent(sessionId)}&last_seq=${lastSeq}`;
|
||||||
|
|
||||||
let ws: WebSocket;
|
let ws: WebSocket;
|
||||||
try {
|
try {
|
||||||
ws = new WebSocket(WS_URL);
|
ws = new WebSocket(url);
|
||||||
} catch {
|
} catch {
|
||||||
setConnectionState("error");
|
setConnectionState("error");
|
||||||
scheduleReconnect();
|
scheduleReconnect();
|
||||||
@@ -85,10 +110,34 @@ export function useNotificationsWebSocket(): UseNotificationsWebSocketResult {
|
|||||||
const msg = JSON.parse(raw) as {
|
const msg = JSON.parse(raw) as {
|
||||||
type?: string;
|
type?: string;
|
||||||
payload?: NotificationItem;
|
payload?: NotificationItem;
|
||||||
|
seq?: number;
|
||||||
|
// Reconnect 协议：服务端可能返回 seq 字段
|
||||||
};
|
};
|
||||||
|
// 更新 last_seq（用于断线重连补发）
|
||||||
|
if (typeof msg.seq === "number" && msg.seq > lastSeqRef.current) {
|
||||||
|
lastSeqRef.current = msg.seq;
|
||||||
|
}
|
||||||
const item = msg.payload;
|
const item = msg.payload;
|
||||||
if (item && item.id) {
|
if (item && item.id) {
|
||||||
pushNotification(item);
|
pushNotification(item);
|
||||||
|
} else if (msg.type && typeof msg.type === "string") {
|
||||||
|
// 兼容 push-gateway 直接推送的事件格式
|
||||||
|
// push-gateway 消息格式：{ event_type, payload: { id, type, title, message, ... } }
|
||||||
|
const fakeItem: NotificationItem = {
|
||||||
|
id:
|
||||||
|
(msg.payload as { id?: string } | undefined)?.id ||
|
||||||
|
`evt-${Date.now()}`,
|
||||||
|
type: "BROADCAST",
|
||||||
|
title:
|
||||||
|
(msg.payload as { title?: string } | undefined)?.title ||
|
||||||
|
msg.type,
|
||||||
|
message:
|
||||||
|
(msg.payload as { message?: string } | undefined)?.message ||
|
||||||
|
"",
|
||||||
|
read: false,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
};
|
||||||
|
pushNotification(fakeItem);
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
// 忽略非 JSON 消息
|
// 忽略非 JSON 消息
|
||||||
@@ -118,8 +167,7 @@ export function useNotificationsWebSocket(): UseNotificationsWebSocketResult {
|
|||||||
setConnectionState("connected");
|
setConnectionState("connected");
|
||||||
mockTimer = setInterval(() => {
|
mockTimer = setInterval(() => {
|
||||||
if (disposed) return;
|
if (disposed) return;
|
||||||
const base =
|
const base = mockNotifications[mockIndex % mockNotifications.length];
|
||||||
mockNotifications[mockIndex % mockNotifications.length];
|
|
||||||
mockIndex += 1;
|
mockIndex += 1;
|
||||||
if (!base) return;
|
if (!base) return;
|
||||||
pushNotification({
|
pushNotification({
|
||||||
@@ -143,6 +191,8 @@ export function useNotificationsWebSocket(): UseNotificationsWebSocketResult {
|
|||||||
|
|
||||||
reconnectFnRef.current = (): void => {
|
reconnectFnRef.current = (): void => {
|
||||||
retryRef.current = 0;
|
retryRef.current = 0;
|
||||||
|
// 手动重连生成新 session_id（触发服务端 ring buffer 补发）
|
||||||
|
sessionIdRef.current = generateSessionId();
|
||||||
if (reconnectTimer) clearTimeout(reconnectTimer);
|
if (reconnectTimer) clearTimeout(reconnectTimer);
|
||||||
if (mockTimer) clearInterval(mockTimer);
|
if (mockTimer) clearInterval(mockTimer);
|
||||||
wsRef.current?.close();
|
wsRef.current?.close();
|
||||||
|
|||||||
@@ -350,6 +350,56 @@ gantt
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
### §5.7 v2 下游核查 + 剩余工作完成（2026-07-14）
|
||||||
|
|
||||||
|
**触发条件**：用户通知"所有下游服务已经完成 nextstep.md 工作"，对 9 个下游服务（teacher-bff / iam / push-gateway / api-gateway / core-edu / content / data-ana / msg / ai）的 nextstep.md 进行核查。
|
||||||
|
|
||||||
|
#### §5.7.1 v2 核查结论
|
||||||
|
|
||||||
|
**核心发现**：teacher-bff nextstep.md 声称完成 v2 扁平命名（41 Query + 20 Mutation），但实际核查发现：
|
||||||
|
|
||||||
|
1. **schema 文件未更新**：`packages/shared-ts/contracts/graphql/teacher-bff.schema.graphql` 仍是 v1（admin 命名空间，19 Query + 5 Mutation）
|
||||||
|
2. **teacher 域 P3+ 查询仍是 P2 占位**：`teacher.resolver.ts` 第 60-95 行 `exams` / `homework` / `grades` 仍抛 `BusinessError("not available in P2")`
|
||||||
|
3. **5 个 gRPC target 留空走降级模式 B**：core-edu / content / data-ana / msg / ai 全部未对接
|
||||||
|
4. **56/61 GraphQL operations 不可用**：仅 5 个 P2 核心 Query（dashboard / viewports / me / classes / class）真实可用
|
||||||
|
|
||||||
|
**决策**：保留 MSW mock，记录 12 项 teacher-bff 待补工作到 [nextstep-v2.md](../../../../apps/teacher-portal/nextstep-v2.md) §2.1。
|
||||||
|
|
||||||
|
#### §5.7.2 v2 完成工作清单
|
||||||
|
|
||||||
|
| # | 工作项 | 完成内容 |
|
||||||
|
| --- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| 1 | useAuth 迁移核查 | 发现 iam REST 登录接口未实现 Set-Cookie，修正 v1 的错误假设（v1 假设 iam 已就绪）。useAuth 迁移**阻塞于 iam 后端实现 Set-Cookie** |
|
||||||
|
| 2 | push-gateway WebSocket 接入 ✅ | 环境变量 `NEXT_PUBLIC_PUSH_GATEWAY_WS_URL` + URL query token + Reconnect 协议（session_id + last_seq）+ 兼容 push-gateway 事件格式 |
|
||||||
|
| 3 | 单元测试扩展 ✅ | usePermission 15 tests + useAuth 9 tests，总计 87/87 passed（从 v1 的 63 扩展到 87） |
|
||||||
|
| 4 | ui-components 剩余组件 ✅ | Chart（SVG bar/line/pie）+ Calendar（月视图 + 事件标记）+ RichTextEditor（contentEditable 轻量实现），总计 12/12 组件 |
|
||||||
|
| 5 | 设计令牌完整迁移 ✅ | globals.css + tailwind.config.js 全部使用 `var(--*)`，无 hsl/hex 字面量；ESLint tokens + a11y flat config 就绪 |
|
||||||
|
| 6 | i18n 扩展状态评估 | 已迁移 5/55 页面（dashboard/grades/settings 等）+ 26 模块 key + LocaleSwitcher。剩余 50+ 页面待逐页替换 |
|
||||||
|
| 7 | 性能优化扩展 ✅ 基本完成 | size-limit 9 项性能预算 + 5 个重型页面懒加载（lesson-plans/heatmap、grades/analytics、knowledge-graph、ParentPortalRemote、HeatmapMatrix） |
|
||||||
|
| 8 | nextstep-v2.md 文档生成 | 完整记录 v2 核查结论 + 下游依赖 + 本模块待补工作 + 集成测试方案 + 已知问题 |
|
||||||
|
|
||||||
|
#### §5.7.3 验证结果
|
||||||
|
|
||||||
|
- ✅ `pnpm --filter @edu/teacher-portal typecheck` 通过（tsc --noEmit 零错误）
|
||||||
|
- ✅ `pnpm --filter @edu/teacher-portal lint` 通过（eslint src 零错误）
|
||||||
|
- ✅ `pnpm --filter @edu/teacher-portal test` 通过（Test Files 8 passed / Tests 87 passed）
|
||||||
|
- ✅ `pnpm run arch:scan` 完成（TS 20 模块 / 3330 符号 + Go 2 模块 / 93 符号 + Python 2 模块 / 469 符号 + Protobuf 394 契约）
|
||||||
|
|
||||||
|
#### §5.7.4 v2 剩余阻塞项
|
||||||
|
|
||||||
|
| 阻塞项 | 依赖方 | 阻塞工作 |
|
||||||
|
| --------------------------------------------- | ----------------------- | ----------------------------------------- |
|
||||||
|
| teacher-bff teacher 域 P3+ 查询/mutation 实现 | ai03 + ai07/08/10/11/12 | MSW mock → 真实 API 切换（56 operations） |
|
||||||
|
| teacher-bff schema 文件同步为 v2 扁平命名 | ai03 | 契约一致性 |
|
||||||
|
| teacher-bff 5 个 gRPC target 配置 | ai03 | teacher 域扩展查询 |
|
||||||
|
| iam REST 登录接口实现 Set-Cookie | ai06 | useAuth 迁移到 httpOnly cookie（F12） |
|
||||||
|
|
||||||
|
**无阻塞工作**（可任意时间推进）：i18n 扩展剩余 50+ 页面、图片优化（next/image）、字体优化（next/font）、CI size-limit 阻断集成。
|
||||||
|
|
||||||
|
详细 v2 文档见 [apps/teacher-portal/nextstep-v2.md](../../../../apps/teacher-portal/nextstep-v2.md)。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## §6 全并行开发说明
|
## §6 全并行开发说明
|
||||||
|
|
||||||
按 [matrix.md](../matrix.md) §全并行模式：
|
按 [matrix.md](../matrix.md) §全并行模式：
|
||||||
|
|||||||
258
packages/ui-components/src/calendar.tsx
Normal file
258
packages/ui-components/src/calendar.tsx
Normal file
@@ -0,0 +1,258 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Calendar - 课案日历组件
|
||||||
|
*
|
||||||
|
* 维护者：ai13（teacher-portal）
|
||||||
|
* 关联：lesson-plans/calendar 页面复用
|
||||||
|
*
|
||||||
|
* 特性：
|
||||||
|
* - 月视图，支持前后月切换
|
||||||
|
* - 日期点击回调
|
||||||
|
* - 日期标记（有课案的日期高亮）
|
||||||
|
* - 纯 CSS + var(--*) 设计令牌
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useState, useMemo, useCallback } from "react";
|
||||||
|
|
||||||
|
export interface CalendarEvent {
|
||||||
|
date: string; // ISO date string YYYY-MM-DD
|
||||||
|
title: string;
|
||||||
|
type?: "lesson" | "exam" | "meeting";
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CalendarProps {
|
||||||
|
/** 初始月份（默认当前月） */
|
||||||
|
initialDate?: Date;
|
||||||
|
/** 事件列表 */
|
||||||
|
events?: CalendarEvent[];
|
||||||
|
/** 日期点击回调 */
|
||||||
|
onDateClick?: (date: Date) => void;
|
||||||
|
/** 月份切换回调 */
|
||||||
|
onMonthChange?: (date: Date) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const WEEKDAYS = ["日", "一", "二", "三", "四", "五", "六"];
|
||||||
|
const WEEKDAYS_EN = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
||||||
|
|
||||||
|
function formatDate(date: Date): string {
|
||||||
|
const y = date.getFullYear();
|
||||||
|
const m = String(date.getMonth() + 1).padStart(2, "0");
|
||||||
|
const d = String(date.getDate()).padStart(2, "0");
|
||||||
|
return `${y}-${m}-${d}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getEventColor(type: CalendarEvent["type"]): string {
|
||||||
|
switch (type) {
|
||||||
|
case "exam":
|
||||||
|
return "var(--color-danger)";
|
||||||
|
case "meeting":
|
||||||
|
return "var(--color-warning)";
|
||||||
|
case "lesson":
|
||||||
|
default:
|
||||||
|
return "var(--color-accent)";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Calendar({
|
||||||
|
initialDate = new Date(),
|
||||||
|
events = [],
|
||||||
|
onDateClick,
|
||||||
|
onMonthChange,
|
||||||
|
}: CalendarProps): React.ReactElement {
|
||||||
|
const [currentDate, setCurrentDate] = useState(initialDate);
|
||||||
|
|
||||||
|
const eventsByDate = useMemo(() => {
|
||||||
|
const map = new Map<string, CalendarEvent[]>();
|
||||||
|
for (const evt of events) {
|
||||||
|
const existing = map.get(evt.date) || [];
|
||||||
|
existing.push(evt);
|
||||||
|
map.set(evt.date, existing);
|
||||||
|
}
|
||||||
|
return map;
|
||||||
|
}, [events]);
|
||||||
|
|
||||||
|
const days = useMemo(() => {
|
||||||
|
const year = currentDate.getFullYear();
|
||||||
|
const month = currentDate.getMonth();
|
||||||
|
const firstDay = new Date(year, month, 1);
|
||||||
|
const lastDay = new Date(year, month + 1, 0);
|
||||||
|
const startWeekday = firstDay.getDay();
|
||||||
|
const daysInMonth = lastDay.getDate();
|
||||||
|
|
||||||
|
const cells: Array<{ date: Date | null; isCurrentMonth: boolean }> = [];
|
||||||
|
|
||||||
|
// 上月填充
|
||||||
|
for (let i = 0; i < startWeekday; i++) {
|
||||||
|
cells.push({ date: null, isCurrentMonth: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 当月
|
||||||
|
for (let d = 1; d <= daysInMonth; d++) {
|
||||||
|
cells.push({ date: new Date(year, month, d), isCurrentMonth: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 下月填充（补齐 6 行 = 42 格）
|
||||||
|
while (cells.length < 42) {
|
||||||
|
cells.push({ date: null, isCurrentMonth: false });
|
||||||
|
}
|
||||||
|
|
||||||
|
return cells;
|
||||||
|
}, [currentDate]);
|
||||||
|
|
||||||
|
const handlePrevMonth = useCallback(() => {
|
||||||
|
const prev = new Date(
|
||||||
|
currentDate.getFullYear(),
|
||||||
|
currentDate.getMonth() - 1,
|
||||||
|
1,
|
||||||
|
);
|
||||||
|
setCurrentDate(prev);
|
||||||
|
onMonthChange?.(prev);
|
||||||
|
}, [currentDate, onMonthChange]);
|
||||||
|
|
||||||
|
const handleNextMonth = useCallback(() => {
|
||||||
|
const next = new Date(
|
||||||
|
currentDate.getFullYear(),
|
||||||
|
currentDate.getMonth() + 1,
|
||||||
|
1,
|
||||||
|
);
|
||||||
|
setCurrentDate(next);
|
||||||
|
onMonthChange?.(next);
|
||||||
|
}, [currentDate, onMonthChange]);
|
||||||
|
|
||||||
|
const today = formatDate(new Date());
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="w-full"
|
||||||
|
style={{
|
||||||
|
background: "var(--bg-surface)",
|
||||||
|
borderRadius: "var(--radius-card)",
|
||||||
|
padding: "var(--space-md)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 月份导航 */}
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handlePrevMonth}
|
||||||
|
className="px-3 py-1 text-sm transition-opacity hover:opacity-70"
|
||||||
|
style={{
|
||||||
|
color: "var(--color-ink-muted)",
|
||||||
|
borderRadius: "var(--radius-button)",
|
||||||
|
}}
|
||||||
|
aria-label="上一月"
|
||||||
|
>
|
||||||
|
←
|
||||||
|
</button>
|
||||||
|
<h3
|
||||||
|
className="text-base font-medium"
|
||||||
|
style={{
|
||||||
|
color: "var(--color-ink)",
|
||||||
|
fontFamily: "var(--font-family-serif)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{currentDate.getFullYear()} 年 {currentDate.getMonth() + 1} 月
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handleNextMonth}
|
||||||
|
className="px-3 py-1 text-sm transition-opacity hover:opacity-70"
|
||||||
|
style={{
|
||||||
|
color: "var(--color-ink-muted)",
|
||||||
|
borderRadius: "var(--radius-button)",
|
||||||
|
}}
|
||||||
|
aria-label="下一月"
|
||||||
|
>
|
||||||
|
→
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 星期表头 */}
|
||||||
|
<div className="grid grid-cols-7 gap-1 mb-2">
|
||||||
|
{WEEKDAYS.map((day, i) => (
|
||||||
|
<div
|
||||||
|
key={`wd-${i}`}
|
||||||
|
className="text-center text-xs uppercase tracking-wide py-2"
|
||||||
|
style={{ color: "var(--color-ink-subtle)" }}
|
||||||
|
>
|
||||||
|
{day}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 日期网格 */}
|
||||||
|
<div className="grid grid-cols-7 gap-1">
|
||||||
|
{days.map((cell, i) => {
|
||||||
|
if (!cell.date) {
|
||||||
|
return <div key={`empty-${i}`} className="min-h-[60px]" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dateStr = formatDate(cell.date);
|
||||||
|
const dayEvents = eventsByDate.get(dateStr) || [];
|
||||||
|
const isToday = dateStr === today;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
key={`day-${dateStr}`}
|
||||||
|
onClick={() => onDateClick?.(cell.date!)}
|
||||||
|
className="min-h-[60px] p-1 text-left transition-colors hover:bg-[var(--bg-subtle)]"
|
||||||
|
style={{
|
||||||
|
background: isToday
|
||||||
|
? "var(--color-accent-subtle)"
|
||||||
|
: "transparent",
|
||||||
|
borderRadius: "var(--radius-default)",
|
||||||
|
border: isToday
|
||||||
|
? "1px solid var(--color-accent)"
|
||||||
|
: "1px solid transparent",
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="text-xs mb-1"
|
||||||
|
style={{
|
||||||
|
color: isToday
|
||||||
|
? "var(--color-accent)"
|
||||||
|
: "var(--color-ink-muted)",
|
||||||
|
fontWeight: isToday ? "600" : "400",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{cell.date.getDate()}
|
||||||
|
</div>
|
||||||
|
{/* 事件标记 */}
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
{dayEvents.slice(0, 2).map((evt, j) => (
|
||||||
|
<div
|
||||||
|
key={`evt-${j}`}
|
||||||
|
className="text-[10px] truncate px-1 py-0.5"
|
||||||
|
style={{
|
||||||
|
background: getEventColor(evt.type),
|
||||||
|
color: "var(--color-ink-on-accent)",
|
||||||
|
borderRadius: "2px",
|
||||||
|
}}
|
||||||
|
title={evt.title}
|
||||||
|
>
|
||||||
|
{evt.title}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{dayEvents.length > 2 && (
|
||||||
|
<div
|
||||||
|
className="text-[10px]"
|
||||||
|
style={{ color: "var(--color-ink-subtle)" }}
|
||||||
|
>
|
||||||
|
+{dayEvents.length - 2} 更多
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { WEEKDAYS, WEEKDAYS_EN, formatDate };
|
||||||
|
|
||||||
|
export default Calendar;
|
||||||
409
packages/ui-components/src/chart.tsx
Normal file
409
packages/ui-components/src/chart.tsx
Normal file
@@ -0,0 +1,409 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Chart - SVG 图表统一封装组件
|
||||||
|
*
|
||||||
|
* 维护者：ai13（teacher-portal）
|
||||||
|
* 关联：project_rules §3.10 设计令牌（禁止硬编码颜色，使用 var(--*)）
|
||||||
|
*
|
||||||
|
* 支持：
|
||||||
|
* - bar：柱状图
|
||||||
|
* - line：折线图
|
||||||
|
* - pie：饼图
|
||||||
|
*
|
||||||
|
* 纯 SVG 实现，无额外 npm 依赖
|
||||||
|
* 颜色使用 var(--color-*) 语义令牌
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useMemo } from "react";
|
||||||
|
|
||||||
|
export type ChartType = "bar" | "line" | "pie";
|
||||||
|
|
||||||
|
export interface ChartDataPoint {
|
||||||
|
label: string;
|
||||||
|
value: number;
|
||||||
|
color?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ChartProps {
|
||||||
|
type: ChartType;
|
||||||
|
data: ChartDataPoint[];
|
||||||
|
width?: number;
|
||||||
|
height?: number;
|
||||||
|
title?: string;
|
||||||
|
/** 数值格式化函数 */
|
||||||
|
formatValue?: (value: number) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Chart({
|
||||||
|
type,
|
||||||
|
data,
|
||||||
|
width = 600,
|
||||||
|
height = 300,
|
||||||
|
title,
|
||||||
|
formatValue,
|
||||||
|
}: ChartProps): React.ReactElement {
|
||||||
|
const fmt = formatValue ?? ((v: number) => String(v));
|
||||||
|
|
||||||
|
if (type === "bar") {
|
||||||
|
return (
|
||||||
|
<BarChart
|
||||||
|
data={data}
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
title={title}
|
||||||
|
fmt={fmt}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (type === "line") {
|
||||||
|
return (
|
||||||
|
<LineChart
|
||||||
|
data={data}
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
title={title}
|
||||||
|
fmt={fmt}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<PieChart
|
||||||
|
data={data}
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
title={title}
|
||||||
|
fmt={fmt}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============ BarChart ============
|
||||||
|
|
||||||
|
interface SubChartProps {
|
||||||
|
data: ChartDataPoint[];
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
title?: string;
|
||||||
|
fmt: (v: number) => string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function BarChart({
|
||||||
|
data,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
title,
|
||||||
|
fmt,
|
||||||
|
}: SubChartProps): React.ReactElement {
|
||||||
|
const padding = { top: 20, right: 20, bottom: 40, left: 50 };
|
||||||
|
const chartWidth = width - padding.left - padding.right;
|
||||||
|
const chartHeight = height - padding.top - padding.bottom;
|
||||||
|
|
||||||
|
const maxValue = Math.max(...data.map((d) => d.value), 1);
|
||||||
|
const barWidth = chartWidth / data.length / 1.5;
|
||||||
|
const gap = (chartWidth - barWidth * data.length) / (data.length + 1);
|
||||||
|
|
||||||
|
const yTicks = useMemo(() => {
|
||||||
|
const ticks: number[] = [];
|
||||||
|
const step = maxValue / 4;
|
||||||
|
for (let i = 0; i <= 4; i++) ticks.push(step * i);
|
||||||
|
return ticks;
|
||||||
|
}, [maxValue]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width="100%"
|
||||||
|
height={height}
|
||||||
|
viewBox={`0 0 ${width} ${height}`}
|
||||||
|
role="img"
|
||||||
|
aria-label={title || "柱状图"}
|
||||||
|
>
|
||||||
|
{title && (
|
||||||
|
<text
|
||||||
|
x={width / 2}
|
||||||
|
y={15}
|
||||||
|
textAnchor="middle"
|
||||||
|
fontSize="14"
|
||||||
|
fill="var(--color-ink)"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</text>
|
||||||
|
)}
|
||||||
|
{/* Y 轴刻度 */}
|
||||||
|
{yTicks.map((tick, i) => {
|
||||||
|
const y = padding.top + chartHeight - (tick / maxValue) * chartHeight;
|
||||||
|
return (
|
||||||
|
<g key={`y-${i}`}>
|
||||||
|
<line
|
||||||
|
x1={padding.left}
|
||||||
|
y1={y}
|
||||||
|
x2={padding.left + chartWidth}
|
||||||
|
y2={y}
|
||||||
|
stroke="var(--color-rule)"
|
||||||
|
strokeWidth="0.5"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={padding.left - 5}
|
||||||
|
y={y + 4}
|
||||||
|
textAnchor="end"
|
||||||
|
fontSize="10"
|
||||||
|
fill="var(--color-ink-muted)"
|
||||||
|
>
|
||||||
|
{fmt(tick)}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{/* 柱子 */}
|
||||||
|
{data.map((d, i) => {
|
||||||
|
const barHeight = (d.value / maxValue) * chartHeight;
|
||||||
|
const x = padding.left + gap + i * (barWidth + gap);
|
||||||
|
const y = padding.top + chartHeight - barHeight;
|
||||||
|
return (
|
||||||
|
<g key={`bar-${i}`}>
|
||||||
|
<rect
|
||||||
|
x={x}
|
||||||
|
y={y}
|
||||||
|
width={barWidth}
|
||||||
|
height={barHeight}
|
||||||
|
fill={d.color || "var(--color-accent)"}
|
||||||
|
rx="2"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={x + barWidth / 2}
|
||||||
|
y={padding.top + chartHeight + 15}
|
||||||
|
textAnchor="middle"
|
||||||
|
fontSize="10"
|
||||||
|
fill="var(--color-ink-muted)"
|
||||||
|
>
|
||||||
|
{d.label}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{/* X/Y 轴 */}
|
||||||
|
<line
|
||||||
|
x1={padding.left}
|
||||||
|
y1={padding.top}
|
||||||
|
x2={padding.left}
|
||||||
|
y2={padding.top + chartHeight}
|
||||||
|
stroke="var(--color-rule-strong)"
|
||||||
|
strokeWidth="1"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1={padding.left}
|
||||||
|
y1={padding.top + chartHeight}
|
||||||
|
x2={padding.left + chartWidth}
|
||||||
|
y2={padding.top + chartHeight}
|
||||||
|
stroke="var(--color-rule-strong)"
|
||||||
|
strokeWidth="1"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============ LineChart ============
|
||||||
|
|
||||||
|
function LineChart({
|
||||||
|
data,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
title,
|
||||||
|
fmt,
|
||||||
|
}: SubChartProps): React.ReactElement {
|
||||||
|
const padding = { top: 20, right: 20, bottom: 40, left: 50 };
|
||||||
|
const chartWidth = width - padding.left - padding.right;
|
||||||
|
const chartHeight = height - padding.top - padding.bottom;
|
||||||
|
|
||||||
|
const maxValue = Math.max(...data.map((d) => d.value), 1);
|
||||||
|
const minValue = Math.min(...data.map((d) => d.value), 0);
|
||||||
|
const range = maxValue - minValue || 1;
|
||||||
|
|
||||||
|
const points = data.map((d, i) => {
|
||||||
|
const x = padding.left + (i / Math.max(data.length - 1, 1)) * chartWidth;
|
||||||
|
const y =
|
||||||
|
padding.top + chartHeight - ((d.value - minValue) / range) * chartHeight;
|
||||||
|
return { x, y, ...d };
|
||||||
|
});
|
||||||
|
|
||||||
|
const pathD = points
|
||||||
|
.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
|
||||||
|
.join(" ");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width="100%"
|
||||||
|
height={height}
|
||||||
|
viewBox={`0 0 ${width} ${height}`}
|
||||||
|
role="img"
|
||||||
|
aria-label={title || "折线图"}
|
||||||
|
>
|
||||||
|
{title && (
|
||||||
|
<text
|
||||||
|
x={width / 2}
|
||||||
|
y={15}
|
||||||
|
textAnchor="middle"
|
||||||
|
fontSize="14"
|
||||||
|
fill="var(--color-ink)"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</text>
|
||||||
|
)}
|
||||||
|
{/* 网格线 */}
|
||||||
|
{[0, 0.25, 0.5, 0.75, 1].map((ratio, i) => {
|
||||||
|
const y = padding.top + chartHeight - ratio * chartHeight;
|
||||||
|
const tickVal = minValue + ratio * range;
|
||||||
|
return (
|
||||||
|
<g key={`grid-${i}`}>
|
||||||
|
<line
|
||||||
|
x1={padding.left}
|
||||||
|
y1={y}
|
||||||
|
x2={padding.left + chartWidth}
|
||||||
|
y2={y}
|
||||||
|
stroke="var(--color-rule)"
|
||||||
|
strokeWidth="0.5"
|
||||||
|
/>
|
||||||
|
<text
|
||||||
|
x={padding.left - 5}
|
||||||
|
y={y + 4}
|
||||||
|
textAnchor="end"
|
||||||
|
fontSize="10"
|
||||||
|
fill="var(--color-ink-muted)"
|
||||||
|
>
|
||||||
|
{fmt(tickVal)}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{/* 折线 */}
|
||||||
|
<path
|
||||||
|
d={pathD}
|
||||||
|
fill="none"
|
||||||
|
stroke="var(--color-accent)"
|
||||||
|
strokeWidth="2"
|
||||||
|
/>
|
||||||
|
{/* 数据点 */}
|
||||||
|
{points.map((p, i) => (
|
||||||
|
<g key={`pt-${i}`}>
|
||||||
|
<circle cx={p.x} cy={p.y} r="3" fill="var(--color-accent)" />
|
||||||
|
<text
|
||||||
|
x={p.x}
|
||||||
|
y={padding.top + chartHeight + 15}
|
||||||
|
textAnchor="middle"
|
||||||
|
fontSize="10"
|
||||||
|
fill="var(--color-ink-muted)"
|
||||||
|
>
|
||||||
|
{p.label}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
))}
|
||||||
|
{/* 轴 */}
|
||||||
|
<line
|
||||||
|
x1={padding.left}
|
||||||
|
y1={padding.top}
|
||||||
|
x2={padding.left}
|
||||||
|
y2={padding.top + chartHeight}
|
||||||
|
stroke="var(--color-rule-strong)"
|
||||||
|
strokeWidth="1"
|
||||||
|
/>
|
||||||
|
<line
|
||||||
|
x1={padding.left}
|
||||||
|
y1={padding.top + chartHeight}
|
||||||
|
x2={padding.left + chartWidth}
|
||||||
|
y2={padding.top + chartHeight}
|
||||||
|
stroke="var(--color-rule-strong)"
|
||||||
|
strokeWidth="1"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============ PieChart ============
|
||||||
|
|
||||||
|
function PieChart({
|
||||||
|
data,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
title,
|
||||||
|
}: SubChartProps): React.ReactElement {
|
||||||
|
const total = data.reduce((sum, d) => sum + d.value, 0) || 1;
|
||||||
|
const cx = width / 2;
|
||||||
|
const cy = height / 2 - 10;
|
||||||
|
const radius = Math.min(width, height) / 3;
|
||||||
|
|
||||||
|
const defaultColors = [
|
||||||
|
"var(--color-accent)",
|
||||||
|
"var(--color-success)",
|
||||||
|
"var(--color-warning)",
|
||||||
|
"var(--color-info)",
|
||||||
|
"var(--color-danger)",
|
||||||
|
];
|
||||||
|
|
||||||
|
let cumulativeAngle = -Math.PI / 2;
|
||||||
|
|
||||||
|
const slices = data.map((d, i) => {
|
||||||
|
const angle = (d.value / total) * 2 * Math.PI;
|
||||||
|
const startAngle = cumulativeAngle;
|
||||||
|
const endAngle = cumulativeAngle + angle;
|
||||||
|
cumulativeAngle = endAngle;
|
||||||
|
|
||||||
|
const x1 = cx + radius * Math.cos(startAngle);
|
||||||
|
const y1 = cy + radius * Math.sin(startAngle);
|
||||||
|
const x2 = cx + radius * Math.cos(endAngle);
|
||||||
|
const y2 = cy + radius * Math.sin(endAngle);
|
||||||
|
const largeArc = angle > Math.PI ? 1 : 0;
|
||||||
|
|
||||||
|
return {
|
||||||
|
d: `M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`,
|
||||||
|
color: d.color || defaultColors[i % defaultColors.length],
|
||||||
|
label: d.label,
|
||||||
|
value: d.value,
|
||||||
|
percent: (d.value / total) * 100,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width="100%"
|
||||||
|
height={height}
|
||||||
|
viewBox={`0 0 ${width} ${height}`}
|
||||||
|
role="img"
|
||||||
|
aria-label={title || "饼图"}
|
||||||
|
>
|
||||||
|
{title && (
|
||||||
|
<text
|
||||||
|
x={width / 2}
|
||||||
|
y={15}
|
||||||
|
textAnchor="middle"
|
||||||
|
fontSize="14"
|
||||||
|
fill="var(--color-ink)"
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</text>
|
||||||
|
)}
|
||||||
|
{slices.map((s, i) => (
|
||||||
|
<path
|
||||||
|
key={`slice-${i}`}
|
||||||
|
d={s.d}
|
||||||
|
fill={s.color}
|
||||||
|
stroke="var(--bg-paper)"
|
||||||
|
strokeWidth="1"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{/* 图例 */}
|
||||||
|
{slices.map((s, i) => (
|
||||||
|
<g
|
||||||
|
key={`legend-${i}`}
|
||||||
|
transform={`translate(${width - 120}, ${20 + i * 18})`}
|
||||||
|
>
|
||||||
|
<rect width="10" height="10" fill={s.color} rx="1" />
|
||||||
|
<text x="15" y="9" fontSize="10" fill="var(--color-ink-muted)">
|
||||||
|
{s.label} ({s.percent.toFixed(1)}%)
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
))}
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Chart;
|
||||||
@@ -15,13 +15,15 @@
|
|||||||
* - Modal：模态对话框
|
* - Modal：模态对话框
|
||||||
* - Form：轻量级表单（Form/FormField/FormInput/FormSelect/FormTextarea/FormCheckbox/SubmitButton）
|
* - Form：轻量级表单（Form/FormField/FormInput/FormSelect/FormTextarea/FormCheckbox/SubmitButton）
|
||||||
* - cn：类名合并工具（project_rules §3.9）
|
* - cn：类名合并工具（project_rules §3.9）
|
||||||
|
* - Chart：SVG 图表统一封装（bar/line/pie）
|
||||||
|
* - Calendar：月视图日历组件
|
||||||
|
* - RichTextEditor：富文本编辑器（contentEditable 轻量实现）
|
||||||
*
|
*
|
||||||
* 后续扩展（P2+）：
|
* 后续扩展（P3+）：
|
||||||
* - AppShell（MF Shell 布局）
|
* - AppShell（MF Shell 布局）
|
||||||
* - shadcn/ui 基础组件（Button/Input/Select/Toast）
|
* - shadcn/ui 基础组件（Button/Input/Select/Toast）
|
||||||
* - A11y 工具集（useA11yId/mergeA11yProps/describeInput/focus-trap）
|
* - A11y 工具集（useA11yId/mergeA11yProps/describeInput/focus-trap）
|
||||||
* - RichTextEditor（Tiptap 封装）
|
* - RichTextEditor 升级为 Tiptap 封装
|
||||||
* - Chart（recharts 封装）
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export { ErrorBoundary } from "./error-boundary.js";
|
export { ErrorBoundary } from "./error-boundary.js";
|
||||||
@@ -72,3 +74,12 @@ export type {
|
|||||||
} from "./form.js";
|
} from "./form.js";
|
||||||
|
|
||||||
export { cn } from "./utils/cn.js";
|
export { cn } from "./utils/cn.js";
|
||||||
|
|
||||||
|
export { Chart } from "./chart.js";
|
||||||
|
export type { ChartProps, ChartType, ChartDataPoint } from "./chart.js";
|
||||||
|
|
||||||
|
export { Calendar } from "./calendar.js";
|
||||||
|
export type { CalendarProps, CalendarEvent } from "./calendar.js";
|
||||||
|
|
||||||
|
export { RichTextEditor } from "./rich-text-editor.js";
|
||||||
|
export type { RichTextEditorProps } from "./rich-text-editor.js";
|
||||||
|
|||||||
240
packages/ui-components/src/rich-text-editor.tsx
Normal file
240
packages/ui-components/src/rich-text-editor.tsx
Normal file
@@ -0,0 +1,240 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* RichTextEditor - 富文本编辑器组件
|
||||||
|
*
|
||||||
|
* 维护者：ai13（teacher-portal）
|
||||||
|
* 关联：lesson-plans/edit + exams/edit-rich 复用
|
||||||
|
*
|
||||||
|
* 特性：
|
||||||
|
* - 基于 contentEditable 的轻量富文本编辑（无 Tiptap 依赖）
|
||||||
|
* - 工具栏：加粗 / 斜体 / 下划线 / 列表 / 标题 / 链接
|
||||||
|
* - 受控模式：value + onChange
|
||||||
|
* - 设计令牌：var(--*) 颜色 / 字体 / 间距
|
||||||
|
*
|
||||||
|
* 注意：P3+ 阶段可替换为 Tiptap 封装（需安装 @tiptap/core + @tiptap/react）
|
||||||
|
* 当前 contentEditable 实现满足 P7 基础需求
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useCallback, useRef, useEffect } from "react";
|
||||||
|
|
||||||
|
export interface RichTextEditorProps {
|
||||||
|
/** 初始 HTML 内容 */
|
||||||
|
value?: string;
|
||||||
|
/** 占位符 */
|
||||||
|
placeholder?: string;
|
||||||
|
/** 内容变更回调 */
|
||||||
|
onChange?: (html: string) => void;
|
||||||
|
/** 是否只读 */
|
||||||
|
readOnly?: boolean;
|
||||||
|
/** 最小高度 */
|
||||||
|
minHeight?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function RichTextEditor({
|
||||||
|
value = "",
|
||||||
|
placeholder = "请输入内容...",
|
||||||
|
onChange,
|
||||||
|
readOnly = false,
|
||||||
|
minHeight = 200,
|
||||||
|
}: RichTextEditorProps): React.ReactElement {
|
||||||
|
const editorRef = useRef<HTMLDivElement>(null);
|
||||||
|
const isInternalChange = useRef(false);
|
||||||
|
|
||||||
|
// 同步外部 value 到 editor
|
||||||
|
useEffect(() => {
|
||||||
|
if (editorRef.current && !isInternalChange.current) {
|
||||||
|
if (editorRef.current.innerHTML !== value) {
|
||||||
|
editorRef.current.innerHTML = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
isInternalChange.current = false;
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
|
const handleInput = useCallback(() => {
|
||||||
|
if (!editorRef.current) return;
|
||||||
|
isInternalChange.current = true;
|
||||||
|
const html = editorRef.current.innerHTML;
|
||||||
|
onChange?.(html);
|
||||||
|
}, [onChange]);
|
||||||
|
|
||||||
|
const exec = useCallback(
|
||||||
|
(command: string, val?: string) => {
|
||||||
|
if (readOnly) return;
|
||||||
|
document.execCommand(command, false, val);
|
||||||
|
handleInput();
|
||||||
|
editorRef.current?.focus();
|
||||||
|
},
|
||||||
|
[handleInput, readOnly],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleLink = useCallback(() => {
|
||||||
|
if (readOnly) return;
|
||||||
|
const url = window.prompt("输入链接 URL：");
|
||||||
|
if (url) {
|
||||||
|
exec("createLink", url);
|
||||||
|
}
|
||||||
|
}, [exec, readOnly]);
|
||||||
|
|
||||||
|
const toolbarButtons = readOnly ? null : (
|
||||||
|
<div
|
||||||
|
className="flex items-center gap-1 p-2 border-b flex-wrap"
|
||||||
|
style={{
|
||||||
|
borderColor: "var(--color-rule)",
|
||||||
|
background: "var(--bg-subtle)",
|
||||||
|
borderRadius: "var(--radius-default) var(--radius-default) 0 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ToolbarButton label="加粗" onClick={() => exec("bold")} icon="B" bold />
|
||||||
|
<ToolbarButton
|
||||||
|
label="斜体"
|
||||||
|
onClick={() => exec("italic")}
|
||||||
|
icon="I"
|
||||||
|
italic
|
||||||
|
/>
|
||||||
|
<ToolbarButton
|
||||||
|
label="下划线"
|
||||||
|
onClick={() => exec("underline")}
|
||||||
|
icon="U"
|
||||||
|
underline
|
||||||
|
/>
|
||||||
|
<ToolbarDivider />
|
||||||
|
<ToolbarButton
|
||||||
|
label="标题"
|
||||||
|
onClick={() => exec("formatBlock", "<h3>")}
|
||||||
|
icon="H"
|
||||||
|
/>
|
||||||
|
<ToolbarButton
|
||||||
|
label="正文"
|
||||||
|
onClick={() => exec("formatBlock", "<p>")}
|
||||||
|
icon="¶"
|
||||||
|
/>
|
||||||
|
<ToolbarDivider />
|
||||||
|
<ToolbarButton
|
||||||
|
label="无序列表"
|
||||||
|
onClick={() => exec("insertUnorderedList")}
|
||||||
|
icon="•"
|
||||||
|
/>
|
||||||
|
<ToolbarButton
|
||||||
|
label="有序列表"
|
||||||
|
onClick={() => exec("insertOrderedList")}
|
||||||
|
icon="1."
|
||||||
|
/>
|
||||||
|
<ToolbarDivider />
|
||||||
|
<ToolbarButton label="链接" onClick={handleLink} icon="🔗" />
|
||||||
|
<ToolbarButton
|
||||||
|
label="清除格式"
|
||||||
|
onClick={() => exec("removeFormat")}
|
||||||
|
icon="✕"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="w-full overflow-hidden"
|
||||||
|
style={{
|
||||||
|
border: "1px solid var(--color-rule)",
|
||||||
|
borderRadius: "var(--radius-card)",
|
||||||
|
background: "var(--bg-paper)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{toolbarButtons}
|
||||||
|
<div
|
||||||
|
ref={editorRef}
|
||||||
|
contentEditable={!readOnly}
|
||||||
|
suppressContentEditableWarning
|
||||||
|
onInput={handleInput}
|
||||||
|
data-placeholder={placeholder}
|
||||||
|
className="rich-text-editor-content"
|
||||||
|
style={{
|
||||||
|
minHeight: `${minHeight}px`,
|
||||||
|
padding: "var(--space-md)",
|
||||||
|
outline: "none",
|
||||||
|
fontFamily: "var(--font-family-sans)",
|
||||||
|
fontSize: "var(--font-size-body)",
|
||||||
|
color: "var(--color-ink)",
|
||||||
|
lineHeight: "1.8",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<style>{`
|
||||||
|
.rich-text-editor-content:empty::before {
|
||||||
|
content: attr(data-placeholder);
|
||||||
|
color: var(--color-ink-subtle);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.rich-text-editor-content h3 {
|
||||||
|
font-family: var(--font-family-serif);
|
||||||
|
font-size: var(--font-size-heading-3);
|
||||||
|
margin: var(--space-sm) 0;
|
||||||
|
}
|
||||||
|
.rich-text-editor-content ul,
|
||||||
|
.rich-text-editor-content ol {
|
||||||
|
padding-left: var(--space-lg);
|
||||||
|
margin: var(--space-xs) 0;
|
||||||
|
}
|
||||||
|
.rich-text-editor-content a {
|
||||||
|
color: var(--color-accent);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.rich-text-editor-content blockquote {
|
||||||
|
border-left: 3px solid var(--color-rule);
|
||||||
|
padding-left: var(--space-md);
|
||||||
|
margin: var(--space-sm) 0;
|
||||||
|
color: var(--color-ink-muted);
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ============ 工具栏按钮 ============
|
||||||
|
|
||||||
|
interface ToolbarButtonProps {
|
||||||
|
label: string;
|
||||||
|
onClick: () => void;
|
||||||
|
icon: string;
|
||||||
|
bold?: boolean;
|
||||||
|
italic?: boolean;
|
||||||
|
underline?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ToolbarButton({
|
||||||
|
label,
|
||||||
|
onClick,
|
||||||
|
icon,
|
||||||
|
bold,
|
||||||
|
italic,
|
||||||
|
underline,
|
||||||
|
}: ToolbarButtonProps): React.ReactElement {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
title={label}
|
||||||
|
aria-label={label}
|
||||||
|
onClick={onClick}
|
||||||
|
className="w-8 h-8 flex items-center justify-center text-sm transition-colors hover:bg-[var(--color-accent-subtle)]"
|
||||||
|
style={{
|
||||||
|
color: "var(--color-ink-muted)",
|
||||||
|
borderRadius: "var(--radius-button)",
|
||||||
|
fontWeight: bold ? "700" : "400",
|
||||||
|
fontStyle: italic ? "italic" : "normal",
|
||||||
|
textDecoration: underline ? "underline" : "none",
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ToolbarDivider(): React.ReactElement {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="w-px h-5 mx-1"
|
||||||
|
style={{ background: "var(--color-rule)" }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default RichTextEditor;
|
||||||
Reference in New Issue
Block a user