docs(architecture): update impact map, data, troubleshooting, add mockups
Some checks failed
Security / deep-security-scan (push) Failing after 2m10s
DR Drill / dr-drill (push) Failing after 1m32s
CI / scheduled-backup (push) Failing after 31s
CI / backup-verify (push) Has been skipped
CI / weekly-dr-drill (push) Failing after 0s
CI / build-deploy (push) Has been cancelled
CI / security-scan (push) Has been cancelled
Some checks failed
Security / deep-security-scan (push) Failing after 2m10s
DR Drill / dr-drill (push) Failing after 1m32s
CI / scheduled-backup (push) Failing after 31s
CI / backup-verify (push) Has been skipped
CI / weekly-dr-drill (push) Failing after 0s
CI / build-deploy (push) Has been cancelled
CI / security-scan (push) Has been cancelled
- Update 004_architecture_impact_map.md and 005_architecture_data.json - Remove obsolete _update_004.cjs helper script - Update troubleshooting/known-issues.md - Add docs/mockups/ directory
This commit is contained in:
SpecialX
@@ -2820,6 +2820,9 @@ src/auth.ts ──▶ import { ... } from "@/shared/lib/permissions"
|
||||
> - **J4 架构图同步**：004_architecture_impact_map.md 新增 V4 纸感重构章节；005_architecture_data.json 更新 lesson_preparation 节点——description 改为 V4 描述、dependencies 移除 `@xyflow/react` 改为 `@tiptap/*` 包、files 数组移除 9 个废弃文件并新增 V4 组件、auditFixes 新增 V4-PAPER-1~8 + V4-PAPER-DOC 条目
|
||||
> - **J5 known-issues V4 规则**：`docs/troubleshooting/known-issues.md` 新增 V4 纸感重构规则表，记录 8 条规则——React Flow 弃用、Tiptap Mark 锚点替代字符串偏移、setState in effect 禁用、doc.version=4、editor-slice 移除画布相关方法、interaction block 注册、PrintView 按 order 排序、AnchorMigrationBanner 失效提示
|
||||
> - **数据模型 v4**：`types.ts` `LessonPlanDocument.version = 4`；`lib/document-migration.ts` `normalizeDocument` 兼容 v1/v2/v3/v4 链式迁移；`editor-slice.ts` 移除 `updateNodePosition`/`connect`/`setEdges`/`autoLayout` 画布相关方法；`hooks/expanded-slice.ts` 新增 `expandedNodeIds`/`toggleExpand`/`setExpanded` 状态（节点展开到正文流）；`lib/anchor-mark.ts` 新增 Tiptap `AnchorMark` + `AnchorPoint` 扩展（替代 v3 字符串偏移锚点）
|
||||
> - **V2-1 复制节点**：`hooks/editor-slice.ts` 新增 `duplicateNode(id)` 方法（深拷贝 `BlockData` + 新 id + 标题加"副本" + order 置末，interaction 节点的 turns 重新生成 id 避免冲突）；`components/paper-editor/paper-context-menu.tsx` 的 `copyNode` 从 toast 占位改为调用 `duplicateNode` 并 toast 成功提示；i18n 新增 `v4.contextMenu.copied`/`copyFailed` 键（zh-CN + en）
|
||||
> - **V2-2 节点级 AI 协助 4 项**：`lib/ai-node-assist.ts` 新增 4 个服务函数（`generateNodeContent`/`optimizeNodeExpression`/`suggestNodeDifferentiation`/`generateLayeredQuestions`），全部纯服务端、Zod 校验、失败返回 null；`actions-ai.ts` 新增 4 个 Server Action，每个 action 校验 `LESSON_PLAN_READ + LESSON_PLAN_CREATE + AI_CHAT` 三个权限点；`hooks/use-node-ai-assist.ts` 新增客户端 hook；`components/paper-editor/paper-editor.tsx` 注入 `onAiAction` 回调；`components/detail-panel/detail-panel.tsx` 的 4 个 `AiButton` 接入真实 action；i18n 新增 `v4.contextMenu.aiRunning`/`aiSuccess`/`aiFailed`/`aiComingSoon` 键（zh-CN + en）
|
||||
> - **V4-I18N-1 i18n 完整审查与修复**：对 lesson-preparation 模块 i18n 配置进行全量审查并修复——P0 修复运行时 MISSING_MESSAGE：`version.diff.*` 3 键（title/summary/noChanges）+ `schema.ts` 引用的 8 个 `error.*` 键（labelTooLong/versionNoInvalid/nameRequired/nameTooLong/queryTooLong/blockIdRequired/commentTooLong/reviewerRequired）+ `v4.contextMenu` 6 键（copied/copyFailed/aiComingSoon/aiRunning/aiSuccess/aiFailed）（zh-CN + en 同步）；P1 修复 en locale 下大面积报错：en `calendar` 节键名对齐 zh-CN（weekView/monthView/loadFailed + prev/next/eventMeta/weekDays 子节），en `analytics` 节补齐 totalPublished/totalSubmitted/totalStandardsLinked/loadFailed；P2 修复 7 处硬编码中文（detail-props.tsx 的 stageLabel/differentiationLabel、inline-node.tsx 的 exerciseCount、inline-qa-dialog.tsx 的 expectedAnswer、qa-editor.tsx 的 turnContentPlaceholder、curriculum-map-view.tsx 的 legendTitle/noData）并新增对应 6 个 i18n 键（`v4.detail.stageLabel`/`differentiationLabel`/`exerciseCount`/`turnContentPlaceholder`、`v4.heatmap.legendTitle`/`noData`）；清理 7 个 dead 节（review/comment/formative/substitute/evaluation/standards/gradeHead，analytics 因被 `app/(dashboard)/admin/curriculum-map` 引用而保留）；`lib/i18n-errors.ts` 新增 `t.has(msg)` 运行时守卫，避免 `as` 断言绕过类型检查（键不存在时返回原消息而非抛出 MISSING_MESSAGE）；zh-CN 与 en 顶层键集一致性验证通过（43 = 43）；005_architecture_data.json 同步追加 `V4-I18N-1` auditFixes 条目；known-issues.md 追加 3 个 i18n 规则表（键缺失与中英文不同步 / dead 节清理规则 / 动态键翻译守卫）
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -6713,7 +6713,11 @@
|
||||
],
|
||||
"uiDeps": [],
|
||||
"uiDepsNote": "已通过 render prop 解耦，TeacherTextbookReader 已移至 app 层（src/app/(dashboard)/teacher/textbooks/[id]/_components/），textbooks 模块不再直接 import questions 模块组件",
|
||||
"npmDeps": ["@xyflow/react", "@dagrejs/dagre", "react-force-graph-2d"],
|
||||
"npmDeps": [
|
||||
"@xyflow/react",
|
||||
"@dagrejs/dagre",
|
||||
"react-force-graph-2d"
|
||||
],
|
||||
"npmDepsNote": "v4 新增 react-force-graph-2d（基于 d3-force + Canvas）实现 Obsidian 风格力导向图谱；通过 next/dynamic ssr:false 加载避免 SSR canvas/window 报错；@xyflow/react + @dagrejs/dagre 用于分层有向图布局",
|
||||
"knownIssues": [
|
||||
"v4 新增（2026-07-03）：知识点图谱新增 Obsidian 风格力导向布局（force 模式），与原分层有向图（hierarchical 模式）共存，工具栏可切换；新增组件 force-graph.tsx，新增类型 GraphLayoutMode；保留全部现有功能（掌握度视图/搜索高亮/邻居高亮/前置依赖增删）",
|
||||
@@ -20777,6 +20781,30 @@
|
||||
"permission": "LESSON_PLAN_READ",
|
||||
"file": "actions-ai.ts",
|
||||
"purpose": "V5-21 A4 辅助新增：按 textbookId 获取知识点列表（仅 id+name），供课标核对 Tab 按需加载"
|
||||
},
|
||||
{
|
||||
"name": "generateNodeContentAction",
|
||||
"permission": "LESSON_PLAN_READ + LESSON_PLAN_CREATE + AI_CHAT",
|
||||
"file": "actions-ai.ts",
|
||||
"purpose": "V4-N1 新增：节点级 AI 协助 - 根据节点 type 生成对应字段，返回 patch 由前端合并到 node.data"
|
||||
},
|
||||
{
|
||||
"name": "optimizeNodeExpressionAction",
|
||||
"permission": "LESSON_PLAN_READ + LESSON_PLAN_CREATE + AI_CHAT",
|
||||
"file": "actions-ai.ts",
|
||||
"purpose": "V4-N2 新增：节点级 AI 协助 - 优化节点现有表达，保留结构仅修改字段值"
|
||||
},
|
||||
{
|
||||
"name": "suggestNodeDifferentiationAction",
|
||||
"permission": "LESSON_PLAN_READ + LESSON_PLAN_CREATE + AI_CHAT",
|
||||
"file": "actions-ai.ts",
|
||||
"purpose": "V4-N3 新增：节点级 AI 协助 - 判定节点适合的差异化层次（basic/intermediate/advanced），前端据此设置 node.differentiation"
|
||||
},
|
||||
{
|
||||
"name": "generateLayeredQuestionsAction",
|
||||
"permission": "LESSON_PLAN_READ + LESSON_PLAN_CREATE + AI_CHAT",
|
||||
"file": "actions-ai.ts",
|
||||
"purpose": "V4-N4 新增：节点级 AI 协助 - 为 interaction 节点生成分层提问，返回 QATurn[] 由前端追加到 turns"
|
||||
}
|
||||
],
|
||||
"schemas": [
|
||||
@@ -20876,6 +20904,7 @@
|
||||
"lib/document-migration.ts",
|
||||
"lib/node-summary.ts",
|
||||
"lib/anchor-mark.ts",
|
||||
"lib/ai-node-assist.ts",
|
||||
"lib/export.ts",
|
||||
"lib/scope-check.ts",
|
||||
"lib/document-diff.ts",
|
||||
@@ -20903,6 +20932,7 @@
|
||||
"hooks/version-slice.ts",
|
||||
"hooks/history-slice.ts",
|
||||
"hooks/expanded-slice.ts",
|
||||
"hooks/use-node-ai-assist.ts",
|
||||
"components/lesson-plan-list.tsx",
|
||||
"components/lesson-plan-card.tsx",
|
||||
"components/lesson-plan-filters.tsx",
|
||||
@@ -21059,7 +21089,10 @@
|
||||
"V4-PAPER-6": "J3 lint + tsc 零错误验证：tsc --noEmit 0 错误；lint 中 V4 引入的 react-hooks/set-state-in-effect 错误已通过 anchor-migration-banner.tsx 的 key-based remount + lazy initial state 模式修复；剩余 6 个 lint 错误为预存无关模块问题（exams/use-exam-preview-tasks react-hooks/refs 3 个、template-picker V5-9 set-state-in-effect 1 个），按计划要求记录不修复",
|
||||
"V4-PAPER-7": "J4 架构图同步：004_architecture_impact_map.md 新增 V4 纸感重构章节；005_architecture_data.json 更新 lesson_preparation 节点——description 改为 V4 描述、dependencies 移除 @xyflow/react 改为 @tiptap/* 包、files 数组移除 9 个废弃文件并新增 V4 组件（paper-editor/structure-tree/detail-panel/interaction-block/anchor-migration-banner/print-view/schedule-dialog/consistency-check-dialog/ai-feedback-dialog/ai-differentiation-dialog/expanded-slice/history-slice/anchor-mark/export/scope-check/document-diff 等）、auditFixes 新增 V4-PAPER-1~7 条目",
|
||||
"V4-PAPER-8": "J5 known-issues V4 规则：docs/troubleshooting/known-issues.md 新增 V4 纸感重构规则表，记录 8 条规则——React Flow 弃用、Tiptap Mark 锚点替代字符串偏移、setState in effect 禁用（用 key-based remount + lazy initial state 替代）、doc.version=4、editor-slice 移除画布相关方法、interaction block 注册、PrintView 按 order 排序、AnchorMigrationBanner 失效提示",
|
||||
"V4-PAPER-DOC": "documentVersion 升级为 4：types.ts LessonPlanDocument.version = 4；lib/document-migration.ts normalizeDocument 兼容 v1/v2/v3/v4 链式迁移；editor-slice.ts 移除 updateNodePosition/connect/setEdges/autoLayout 画布相关方法；hooks/expanded-slice.ts 新增 expandedNodeIds/toggleExpand/setExpanded 状态（节点展开到正文流）；lib/anchor-mark.ts 新增 Tiptap AnchorMark + AnchorPoint 扩展（替代 v3 字符串偏移锚点）"
|
||||
"V4-PAPER-DOC": "documentVersion 升级为 4：types.ts LessonPlanDocument.version = 4；lib/document-migration.ts normalizeDocument 兼容 v1/v2/v3/v4 链式迁移；editor-slice.ts 移除 updateNodePosition/connect/setEdges/autoLayout 画布相关方法；hooks/expanded-slice.ts 新增 expandedNodeIds/toggleExpand/setExpanded 状态（节点展开到正文流）；lib/anchor-mark.ts 新增 Tiptap AnchorMark + AnchorPoint 扩展（替代 v3 字符串偏移锚点）",
|
||||
"V4-PAPER-V2-1": "V2 复制节点功能完整实现：hooks/editor-slice.ts 新增 duplicateNode(id) 方法（深拷贝 BlockData + 新 id + 标题加'副本' + order 置末，interaction 节点的 turns 重新生成 id 避免冲突）；components/paper-editor/paper-context-menu.tsx 的 copyNode 从 toast 占位改为调用 duplicateNode 并 toast 成功提示；i18n 新增 v4.contextMenu.copied/copyFailed 键（zh-CN + en）",
|
||||
"V4-PAPER-V2-2": "V2 节点级 AI 协助 4 项完整实现：lib/ai-node-assist.ts 新增 4 个服务函数（generateNodeContent/optimizeNodeExpression/suggestNodeDifferentiation/generateLayeredQuestions），全部纯服务端、Zod 校验、失败返回 null；actions-ai.ts 新增 4 个 Server Action，每个 action 校验 LESSON_PLAN_READ + LESSON_PLAN_CREATE + AI_CHAT 三个权限点；hooks/use-node-ai-assist.ts 新增客户端 hook；components/paper-editor/paper-editor.tsx 注入 onAiAction 回调；components/detail-panel/detail-panel.tsx 的 4 个 AiButton 接入真实 action；i18n 新增 v4.contextMenu.aiRunning/aiSuccess/aiFailed/aiComingSoon 键",
|
||||
"V4-I18N-1": "i18n 完整审查与修复：P0 修复 version.diff.* 3 键 + schema.ts 8 个 error.* 键 + contextMenu 6 键（zh-CN + en 同步）；P1 修复 en calendar 节键名对齐 zh-CN；P2 修复 7 处硬编码中文 + 新增 6 个 i18n 键；清理 7 个 dead 节（review/comment/formative/substitute/evaluation/standards/gradeHead，analytics 因被 admin/curriculum-map 引用保留）；lib/i18n-errors.ts 新增 t.has() 守卫"
|
||||
}
|
||||
},
|
||||
"error-book": {
|
||||
@@ -26907,4 +26940,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
// 临时脚本：更新 004_architecture_impact_map.md
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const filePath = path.join(__dirname, '004_architecture_impact_map.md');
|
||||
const content = fs.readFileSync(filePath, 'utf8');
|
||||
|
||||
const oldString = [
|
||||
'| `components/blocks/reflection-block.tsx` | 反思 Block（V3 续：select onChange 使用 `isReflectionAspect` 类型守卫替代 `as` 断言） |',
|
||||
'',
|
||||
'---',
|
||||
'',
|
||||
'## 2.28 error-book（错题本模块）'
|
||||
].join('\r\n');
|
||||
|
||||
const newLines = [
|
||||
'| `components/blocks/reflection-block.tsx` | 反思 Block（V3 续：select onChange 使用 `isReflectionAspect` 类型守卫替代 `as` 断言） |',
|
||||
'| `components/calendar-view.tsx` | **M9 日历视图组件（2026-07-01 新增）**：客户端组件，支持周历/月历切换，6 种事件类型颜色映射 |',
|
||||
'| `components/curriculum-map-view.tsx` | **M4 课程地图热力图组件（2026-07-01 新增）**：学科×年级矩阵表格，颜色编码覆盖率 |',
|
||||
'| `data-access-calendar.ts` | **M9 日历事件数据访问层（2026-07-01 新增）** |',
|
||||
'| `data-access-review.ts` | **M3 审核工作流数据访问层（2026-07-01 新增）** |',
|
||||
'| `data-access-comments.ts` | **M2 协同备课评论数据访问层（2026-07-01 新增）** |',
|
||||
'| `data-access-formative.ts` | **M5 形成性评价数据访问层（2026-07-01 新增）** |',
|
||||
'| `data-access-attachments.ts` | **M6 资源附件库数据访问层（2026-07-01 新增）** |',
|
||||
'| `data-access-substitutes.ts` | **M12 代课教师数据访问层（2026-07-01 新增）** |',
|
||||
'| `data-access-ai-evaluation.ts` | **M8 AI 评估数据访问层（2026-07-01 新增）** |',
|
||||
'| `data-access-analytics.ts` | **M10 备课分析仪表盘数据访问层（2026-07-01 新增）** |',
|
||||
'| `actions-calendar.ts` | **M9 日历 Server Actions（2026-07-01 新增）** |',
|
||||
'| `actions-review.ts` | **M3 审核工作流 Server Actions（2026-07-01 新增）** |',
|
||||
'| `actions-comments.ts` | **M2 评论 Server Actions（2026-07-01 新增）** |',
|
||||
'| `actions-formative.ts` | **M5 形成性评价 Server Actions（2026-07-01 新增）** |',
|
||||
'| `actions-attachments.ts` | **M6 附件库 Server Actions（2026-07-01 新增）** |',
|
||||
'| `actions-substitutes.ts` | **M12 代课教师 Server Actions（2026-07-01 新增）** |',
|
||||
'| `actions-ai-evaluation.ts` | **M8 AI 评估 Server Actions（2026-07-01 新增）** |',
|
||||
'| `actions-analytics.ts` | **M10 分析仪表盘 Server Actions（2026-07-01 新增）** |',
|
||||
'',
|
||||
'> 架构变更（2026-07-01，M1-M12 中长期计划完整实施）：',
|
||||
'> - **M1 课标对标体系**：新增 modules/standards/ 模块；新增 3 个 STANDARD_* 权限点；新增路由 /admin/curriculum-map',
|
||||
'> - **M2 协同备课评论**：新增 data-access-comments.ts + actions-comments.ts，支持 Block 级评论、resolved 状态',
|
||||
'> - **M3 审核工作流**：新增 data-access-review.ts + actions-review.ts，状态机 draft → submitted → approved/rejected → published',
|
||||
'> - **M4 课程地图**：新增 admin/curriculum-map 路由 + curriculum-map-view.tsx 热力图组件',
|
||||
'> - **M5 形成性评价闭环**：新增 data-access-formative.ts + actions-formative.ts，4 种互动类型',
|
||||
'> - **M6 资源附件库**：新增 data-access-attachments.ts + actions-attachments.ts',
|
||||
'> - **M7 移动端 PWA**：见 1.1.1 章节',
|
||||
'> - **M8 AI 差异化生成 + 评估**：新增 data-access-ai-evaluation.ts + actions-ai-evaluation.ts',
|
||||
'> - **M9 日历视图**：新增 data-access-calendar.ts + actions-calendar.ts + calendar-view.tsx + teacher/lesson-plans/calendar 路由',
|
||||
'> - **M10 备课分析仪表盘**：新增 data-access-analytics.ts + actions-analytics.ts，3 个分析维度',
|
||||
'> - **M11 版本 diff 预览**：data-access-versions.ts 的 getVersionContent 支持读取历史版本内容',
|
||||
'> - **M12 代课教师**：新增 data-access-substitutes.ts + actions-substitutes.ts',
|
||||
'> - **权限扩展**：新增 STANDARD_READ/MANAGE/LINK + LESSON_PLAN_SUBMIT/REVIEW/ANALYTICS_READ/SUBSTITUTE_MANAGE',
|
||||
'> - **i18n 扩展**：zh-CN 新增 9 个命名空间；status 扩展为 6 状态',
|
||||
'> - **数据库表**：新增 6 张表（lessonPlanComments/lessonPlanReviewRecords/lessonPlanFormativeItems/lessonPlanAttachments/lessonPlanAiEvaluations/lessonPlanSubstituteAssignments）',
|
||||
'',
|
||||
'---',
|
||||
'',
|
||||
'## 2.27b standards（课标模块，2026-07-01 新增）',
|
||||
'',
|
||||
'**职责**：K12 课标管理，支持课标树、按学科+年级筛选、课案与课标多对多关联。',
|
||||
'',
|
||||
'**导出函数**：',
|
||||
'- Data-access：getStandards / getStandardsTree / getStandardById / createStandard / updateStandard / deactivateStandard / searchStandards / getStandardsByPlanId / linkPlanToStandard / unlinkPlanFromStandard',
|
||||
'- Actions：10 个 Server Actions，全部使用 requirePermission() + ActionState<T>',
|
||||
'- Schema：createStandardSchema / updateStandardSchema / getStandardsParamsSchema / linkPlanToStandardSchema',
|
||||
'- Types：Standard / StandardTreeNode / LessonPlanStandardLink',
|
||||
'',
|
||||
'**权限点**：',
|
||||
'- STANDARD_READ（standard:read）',
|
||||
'- STANDARD_MANAGE（standard:manage）',
|
||||
'- STANDARD_LINK（standard:link）',
|
||||
'',
|
||||
'**依赖关系**：',
|
||||
'- 依赖：shared/*、modules/lesson-preparation/lib/i18n-errors',
|
||||
'- 被依赖：modules/lesson-preparation、app/(dashboard)/admin/curriculum-map',
|
||||
'',
|
||||
'**文件清单**：',
|
||||
'| 文件 | 职责 |',
|
||||
'|------|------|',
|
||||
'| types.ts | 类型定义 |',
|
||||
'| schema.ts | Zod 验证 |',
|
||||
'| data-access.ts | 课标 CRUD + 树形查询 + 课案关联 |',
|
||||
'| actions.ts | 10 个 Server Actions |',
|
||||
'',
|
||||
'---',
|
||||
'',
|
||||
'## 2.28 error-book（错题本模块）'
|
||||
];
|
||||
const newString = newLines.join('\r\n');
|
||||
|
||||
if (!content.includes(oldString)) {
|
||||
console.error('ERROR: old string not found');
|
||||
process.exit(1);
|
||||
}
|
||||
const occurrences = content.split(oldString).length - 1;
|
||||
if (occurrences !== 1) {
|
||||
console.error('ERROR: appears ' + occurrences + ' times');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const newContent = content.replace(oldString, newString);
|
||||
fs.writeFileSync(filePath, newContent, 'utf8');
|
||||
console.log('SUCCESS 004 updated, before=' + content.length + ' after=' + newContent.length);
|
||||
637
docs/mockups/editor-layout-comparison.html
Normal file
637
docs/mockups/editor-layout-comparison.html
Normal file
@@ -0,0 +1,637 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>备课编辑器 · 正文节点布局对比</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f6f7f9;
|
||||
--surface: #ffffff;
|
||||
--surface-low: #f0f2f5;
|
||||
--surface-high: #e7e9ee;
|
||||
--outline: #d1d5db;
|
||||
--outline-strong: #9ca3af;
|
||||
--on-surface: #1f2937;
|
||||
--on-surface-variant: #6b7280;
|
||||
--primary: #1976d2;
|
||||
--primary-soft: rgba(25, 118, 210, 0.12);
|
||||
--anchor: #f59e0b;
|
||||
--node-objective: #4caf50;
|
||||
--node-teach: #1976d2;
|
||||
--node-exercise: #9c27b0;
|
||||
--node-summary: #ff9800;
|
||||
--node-textbook: #455a64;
|
||||
--radius: 10px;
|
||||
--shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
|
||||
--shadow-lg: 0 10px 30px rgba(0,0,0,0.10), 0 3px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--on-surface);
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.page {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 24px 80px;
|
||||
}
|
||||
header.page-head {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
header.page-head h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
header.page-head p {
|
||||
margin: 0;
|
||||
color: var(--on-surface-variant);
|
||||
font-size: 15px;
|
||||
max-width: 720px;
|
||||
}
|
||||
.layout-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
}
|
||||
@media (min-width: 1100px) {
|
||||
.layout-grid { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
|
||||
}
|
||||
.option {
|
||||
background: var(--surface);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.option-head {
|
||||
padding: 20px 20px 16px;
|
||||
border-bottom: 1px solid var(--outline);
|
||||
}
|
||||
.option-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--primary);
|
||||
background: var(--primary-soft);
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.option-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
.option-sub {
|
||||
font-size: 13px;
|
||||
color: var(--on-surface-variant);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.option-body {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
/* 共用 wireframe 样式 */
|
||||
.wireframe {
|
||||
background: var(--surface-low);
|
||||
border: 1px solid var(--outline);
|
||||
border-radius: 8px;
|
||||
aspect-ratio: 4 / 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
font-size: 10px;
|
||||
color: var(--on-surface-variant);
|
||||
position: relative;
|
||||
}
|
||||
.wf-toolbar {
|
||||
height: 16px;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--outline);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 6px;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wf-toolbar .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--outline-strong); }
|
||||
.wf-toolbar .pill { width: 18px; height: 7px; border-radius: 3px; background: var(--surface-high); }
|
||||
.wf-toolbar .pill.accent { background: var(--primary-soft); }
|
||||
.wf-area { flex: 1; display: flex; position: relative; overflow: hidden; }
|
||||
.wf-sidebar {
|
||||
width: 22%;
|
||||
background: var(--surface);
|
||||
border-right: 1px solid var(--outline);
|
||||
padding: 6px 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wf-side-item {
|
||||
height: 8px;
|
||||
border-radius: 3px;
|
||||
background: var(--surface-high);
|
||||
padding: 0 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
font-size: 7px;
|
||||
}
|
||||
.wf-side-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
|
||||
.wf-side-item .ico { width: 5px; height: 5px; border-radius: 1px; flex-shrink: 0; }
|
||||
.wf-main { flex: 1; position: relative; overflow: hidden; }
|
||||
.wf-right {
|
||||
width: 26%;
|
||||
background: var(--surface);
|
||||
border-left: 1px solid var(--outline);
|
||||
padding: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.wf-right .field { height: 7px; border-radius: 2px; background: var(--surface-high); }
|
||||
.wf-right .field.short { width: 60%; }
|
||||
.wf-right .field.tall { height: 28px; }
|
||||
.wf-label {
|
||||
font-size: 7px;
|
||||
color: var(--on-surface-variant);
|
||||
font-weight: 600;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
/* 节点小卡片（画布模式） */
|
||||
.wf-node {
|
||||
position: absolute;
|
||||
background: var(--surface);
|
||||
border: 1.5px solid var(--outline-strong);
|
||||
border-radius: 4px;
|
||||
padding: 3px 5px;
|
||||
font-size: 7px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wf-node .ndot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }
|
||||
.wf-node.objective { border-color: var(--node-objective); }
|
||||
.wf-node.objective .ndot { background: var(--node-objective); }
|
||||
.wf-node.teach { border-color: var(--node-teach); }
|
||||
.wf-node.teach .ndot { background: var(--node-teach); }
|
||||
.wf-node.exercise { border-color: var(--node-exercise); }
|
||||
.wf-node.exercise .ndot { background: var(--node-exercise); }
|
||||
.wf-node.summary { border-color: var(--node-summary); }
|
||||
.wf-node.summary .ndot { background: var(--node-summary); }
|
||||
|
||||
/* 正文编辑器卡片 */
|
||||
.wf-textbook {
|
||||
position: absolute;
|
||||
background: var(--surface);
|
||||
border: 2px solid var(--node-textbook);
|
||||
border-radius: 6px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wf-textbook-head {
|
||||
background: var(--node-textbook);
|
||||
color: white;
|
||||
font-size: 7px;
|
||||
padding: 2px 5px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.wf-textbook-body {
|
||||
padding: 5px 6px;
|
||||
font-size: 7px;
|
||||
line-height: 1.5;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wf-textbook-body .h { font-weight: 700; font-size: 8px; display: block; margin-bottom: 2px; }
|
||||
.wf-textbook-body .bold { font-weight: 700; }
|
||||
.wf-textbook-body .anchor {
|
||||
background: var(--anchor);
|
||||
color: white;
|
||||
padding: 0 2px;
|
||||
border-radius: 2px;
|
||||
font-size: 6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.wf-textbook-body .point-anchor {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
line-height: 8px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: var(--anchor);
|
||||
color: white;
|
||||
font-size: 6px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.wf-textbook-toolbar {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
padding: 2px 5px;
|
||||
border-top: 1px solid var(--outline);
|
||||
background: var(--surface-low);
|
||||
font-size: 6px;
|
||||
}
|
||||
.wf-textbook-toolbar .tb {
|
||||
padding: 1px 3px;
|
||||
border-radius: 2px;
|
||||
background: var(--surface-high);
|
||||
}
|
||||
|
||||
/* 连线 */
|
||||
.wf-edge {
|
||||
position: absolute;
|
||||
background: var(--primary);
|
||||
opacity: 0.4;
|
||||
transform-origin: 0 0;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
/* 文档流样式 */
|
||||
.wf-docflow {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 8px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
background: var(--surface);
|
||||
}
|
||||
.wf-docblock {
|
||||
border-radius: 4px;
|
||||
padding: 5px 6px;
|
||||
font-size: 7px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.wf-docblock.textbook {
|
||||
background: rgba(69, 90, 100, 0.06);
|
||||
border-left: 3px solid var(--node-textbook);
|
||||
}
|
||||
.wf-docblock.objective {
|
||||
background: rgba(76, 175, 80, 0.07);
|
||||
border-left: 3px solid var(--node-objective);
|
||||
}
|
||||
.wf-docblock.teach {
|
||||
background: rgba(25, 118, 210, 0.07);
|
||||
border-left: 3px solid var(--node-teach);
|
||||
}
|
||||
.wf-docblock.exercise {
|
||||
background: rgba(156, 39, 176, 0.07);
|
||||
border-left: 3px solid var(--node-exercise);
|
||||
}
|
||||
.wf-docblock.summary {
|
||||
background: rgba(255, 152, 0, 0.07);
|
||||
border-left: 3px solid var(--node-summary);
|
||||
}
|
||||
.wf-docblock .db-head {
|
||||
font-weight: 700;
|
||||
font-size: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.wf-docblock .db-head .ico { width: 6px; height: 6px; border-radius: 1px; }
|
||||
.wf-docblock.textbook .ico { background: var(--node-textbook); }
|
||||
.wf-docblock.objective .ico { background: var(--node-objective); }
|
||||
.wf-docblock.teach .ico { background: var(--node-teach); }
|
||||
.wf-docblock.exercise .ico { background: var(--node-exercise); }
|
||||
.wf-docblock.summary .ico { background: var(--node-summary); }
|
||||
.wf-docblock .anchor { background: var(--anchor); color: white; padding: 0 2px; border-radius: 2px; font-size: 6px; font-weight: 700; }
|
||||
|
||||
/* 优劣对比 */
|
||||
.pros-cons { display: flex; flex-direction: column; gap: 8px; }
|
||||
.pros-cons .pc {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.pros-cons .pc-label {
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
margin-bottom: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.pros-cons .pc-label.pro { color: #16a34a; }
|
||||
.pros-cons .pc-label.con { color: #dc2626; }
|
||||
.pros-cons ul { margin: 0; padding-left: 14px; }
|
||||
.pros-cons li { margin-bottom: 2px; color: var(--on-surface-variant); }
|
||||
|
||||
.recommend {
|
||||
margin-top: 8px;
|
||||
padding: 10px 12px;
|
||||
background: var(--primary-soft);
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
footer.page-foot {
|
||||
margin-top: 40px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--outline);
|
||||
color: var(--on-surface-variant);
|
||||
font-size: 13px;
|
||||
}
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.legend-item { display: flex; align-items: center; gap: 5px; }
|
||||
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="page-head">
|
||||
<h1>备课编辑器 · 正文节点布局对比</h1>
|
||||
<p>三种交互形态对比。共同前提：正文节点变成<strong>真实的富文本编辑器</strong>（Tiptap），支持加粗/标题/列表/图片真实排版，锚点用 Mark 系统而非字符串偏移。三种方案只差在"正文和教学节点如何排布"。</p>
|
||||
<div class="legend">
|
||||
<div class="legend-item"><span class="legend-dot" style="background:var(--node-textbook)"></span>教材正文</div>
|
||||
<div class="legend-item"><span class="legend-dot" style="background:var(--node-objective)"></span>教学目标</div>
|
||||
<div class="legend-item"><span class="legend-dot" style="background:var(--node-teach)"></span>新授</div>
|
||||
<div class="legend-item"><span class="legend-dot" style="background:var(--node-exercise)"></span>练习</div>
|
||||
<div class="legend-item"><span class="legend-dot" style="background:var(--node-summary)"></span>总结</div>
|
||||
<div class="legend-item"><span class="legend-dot" style="background:var(--anchor)"></span>锚点标记</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="layout-grid">
|
||||
|
||||
<!-- 方案 1：画布 + 真实编辑器 -->
|
||||
<section class="option">
|
||||
<div class="option-head">
|
||||
<span class="option-tag">方案 A</span>
|
||||
<h2 class="option-title">保留画布 · 正文节点变真实编辑器</h2>
|
||||
<p class="option-sub">最小改动。React Flow 画布不变，把中央那个 520px 假正文框换成真正的 Tiptap 富文本编辑器卡片，可拖拽缩放到更大。</p>
|
||||
</div>
|
||||
<div class="option-body">
|
||||
<div class="wireframe">
|
||||
<div class="wf-toolbar">
|
||||
<span class="dot"></span><span class="dot"></span><span class="dot"></span>
|
||||
<span class="pill accent"></span><span class="pill"></span><span class="pill"></span>
|
||||
<span style="margin-left:auto;font-size:6px;">已保存</span>
|
||||
</div>
|
||||
<div class="wf-area">
|
||||
<div class="wf-main">
|
||||
<!-- 散布的教学节点 -->
|
||||
<div class="wf-node objective" style="top:8%;left:6%;">
|
||||
<span class="ndot"></span>教学目标
|
||||
</div>
|
||||
<div class="wf-node teach" style="top:14%;right:8%;">
|
||||
<span class="ndot"></span>新授
|
||||
</div>
|
||||
<!-- 中央正文编辑器（变大） -->
|
||||
<div class="wf-textbook" style="top:26%;left:18%;width:64%;height:52%;">
|
||||
<div class="wf-textbook-head">
|
||||
<span>📖 教材正文（可编辑副本）</span>
|
||||
<span>右键锚定</span>
|
||||
</div>
|
||||
<div class="wf-textbook-body">
|
||||
<span class="h">第一章 · 走进大自然</span>
|
||||
春天的<span class="anchor">风</span>轻轻吹过田野，
|
||||
带来泥土的芬芳。
|
||||
<br/>
|
||||
<span class="bold">观察要点：</span>
|
||||
<br/>• 花朵的颜色变化
|
||||
<br/>• <span class="point-anchor">①</span> 叶片的形状
|
||||
<br/>• 气温的回升
|
||||
</div>
|
||||
<div class="wf-textbook-toolbar">
|
||||
<span class="tb">B</span><span class="tb">I</span>
|
||||
<span class="tb">H1</span><span class="tb">≡</span>
|
||||
<span class="tb">🖼</span><span class="tb">•</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下方的教学节点 -->
|
||||
<div class="wf-node exercise" style="bottom:8%;left:20%;">
|
||||
<span class="ndot"></span>课堂练习
|
||||
</div>
|
||||
<div class="wf-node summary" style="bottom:10%;right:14%;">
|
||||
<span class="ndot"></span>总结
|
||||
</div>
|
||||
<!-- 连线 -->
|
||||
<div class="wf-edge" style="top:13%;left:14%;width:40px;transform:rotate(35deg);"></div>
|
||||
<div class="wf-edge" style="top:18%;right:14%;width:38px;transform:rotate(150deg);"></div>
|
||||
</div>
|
||||
<div class="wf-right">
|
||||
<div class="wf-label">选中节点</div>
|
||||
<div class="field"></div>
|
||||
<div class="field short"></div>
|
||||
<div class="field tall"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons">
|
||||
<div class="pc">
|
||||
<div class="pc-label pro">✓ 优点</div>
|
||||
<ul>
|
||||
<li>改动最小，画布交互不变</li>
|
||||
<li>保留"思维导图"式空间关系</li>
|
||||
<li>锚点系统改造可独立进行</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pc">
|
||||
<div class="pc-label con">✗ 缺点</div>
|
||||
<ul>
|
||||
<li>长文档在画布上仍受限，需频繁缩放</li>
|
||||
<li>编辑器卡片和教学节点抢空间</li>
|
||||
<li>移动端几乎不可用</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 方案 2：文档流（类 Notion） -->
|
||||
<section class="option">
|
||||
<div class="option-head">
|
||||
<span class="option-tag">方案 B</span>
|
||||
<h2 class="option-title">文档流为主（类 Notion）</h2>
|
||||
<p class="option-sub">正文和教学节点都在同一文档流里，按顺序拼成一篇完整教案。左侧大纲，中间文档，右侧选中节点详情。</p>
|
||||
</div>
|
||||
<div class="option-body">
|
||||
<div class="wireframe">
|
||||
<div class="wf-toolbar">
|
||||
<span class="dot"></span><span class="dot"></span><span class="dot"></span>
|
||||
<span class="pill accent"></span><span class="pill"></span><span class="pill"></span>
|
||||
<span style="margin-left:auto;font-size:6px;">已保存</span>
|
||||
</div>
|
||||
<div class="wf-area">
|
||||
<div class="wf-sidebar">
|
||||
<div class="wf-label">大纲</div>
|
||||
<div class="wf-side-item active"><span class="ico" style="background:var(--node-textbook)"></span>正文</div>
|
||||
<div class="wf-side-item" style="padding-left:8px;"><span class="ico" style="background:var(--node-objective)"></span>目标</div>
|
||||
<div class="wf-side-item" style="padding-left:8px;"><span class="ico" style="background:var(--node-teach)"></span>新授</div>
|
||||
<div class="wf-side-item" style="padding-left:8px;"><span class="ico" style="background:var(--node-exercise)"></span>练习</div>
|
||||
<div class="wf-side-item" style="padding-left:8px;"><span class="ico" style="background:var(--node-summary)"></span>总结</div>
|
||||
</div>
|
||||
<div class="wf-main">
|
||||
<div class="wf-docflow">
|
||||
<div class="wf-docblock textbook">
|
||||
<div class="db-head"><span class="ico"></span>📖 教材正文</div>
|
||||
<span style="font-weight:700;">第一章 · 走进大自然</span><br/>
|
||||
春天的<span class="anchor">风</span>轻轻吹过田野，带来泥土的芬芳。
|
||||
<span class="point-anchor" style="display:inline-block;width:8px;height:8px;line-height:8px;text-align:center;border-radius:50%;background:var(--anchor);color:white;font-size:6px;font-weight:700;">①</span> 叶片的形状
|
||||
</div>
|
||||
<div class="wf-docblock objective">
|
||||
<div class="db-head"><span class="ico"></span>🎯 教学目标</div>
|
||||
认识春天的自然现象…
|
||||
</div>
|
||||
<div class="wf-docblock teach">
|
||||
<div class="db-head"><span class="ico"></span>📚 新授</div>
|
||||
引导学生观察…
|
||||
</div>
|
||||
<div class="wf-docblock exercise">
|
||||
<div class="db-head"><span class="ico"></span>✏ 课堂练习</div>
|
||||
画一画你看到的春天…
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wf-right">
|
||||
<div class="wf-label">选中: 新授</div>
|
||||
<div class="field"></div>
|
||||
<div class="field short"></div>
|
||||
<div class="field tall"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons">
|
||||
<div class="pc">
|
||||
<div class="pc-label pro">✓ 优点</div>
|
||||
<ul>
|
||||
<li>编辑体验最好，长文档自然滚动</li>
|
||||
<li>所见即所得，适合打印导出</li>
|
||||
<li>移动端友好</li>
|
||||
<li>教学节点和正文同流，关系清晰</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pc">
|
||||
<div class="pc-label con">✗ 缺点</div>
|
||||
<ul>
|
||||
<li>失去"画布"的空间思维导图感</li>
|
||||
<li>需要重构数据模型（节点顺序流）</li>
|
||||
<li>锚点仍需跨"正文块"定位</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 方案 3：双栏 -->
|
||||
<section class="option">
|
||||
<div class="option-head">
|
||||
<span class="option-tag">方案 C</span>
|
||||
<h2 class="option-title">双栏 · 正文编辑器 + 节点面板</h2>
|
||||
<p class="option-sub">正文富文本编辑器独占主区域（类 A4 文档页），教学节点在右侧面板编辑，左侧是节点树。正文与节点通过锚点关联，互不混排。</p>
|
||||
</div>
|
||||
<div class="option-body">
|
||||
<div class="wireframe">
|
||||
<div class="wf-toolbar">
|
||||
<span class="dot"></span><span class="dot"></span><span class="dot"></span>
|
||||
<span class="pill accent"></span><span class="pill"></span><span class="pill"></span>
|
||||
<span style="margin-left:auto;font-size:6px;">已保存</span>
|
||||
</div>
|
||||
<div class="wf-area">
|
||||
<div class="wf-sidebar">
|
||||
<div class="wf-label">节点树</div>
|
||||
<div class="wf-side-item"><span class="ico" style="background:var(--node-textbook)"></span>📖 正文</div>
|
||||
<div class="wf-side-item active"><span class="ico" style="background:var(--node-objective)"></span>🎯 目标</div>
|
||||
<div class="wf-side-item"><span class="ico" style="background:var(--node-teach)"></span>📚 新授</div>
|
||||
<div class="wf-side-item"><span class="ico" style="background:var(--node-exercise)"></span>✏ 练习</div>
|
||||
<div class="wf-side-item"><span class="ico" style="background:var(--node-summary)"></span>📝 总结</div>
|
||||
</div>
|
||||
<div class="wf-main" style="background:var(--surface-low);display:flex;justify-content:center;padding:8px;">
|
||||
<div style="background:var(--surface);width:80%;border-radius:4px;box-shadow:var(--shadow);padding:8px;font-size:7px;line-height:1.6;overflow:hidden;">
|
||||
<div style="font-weight:700;font-size:8px;margin-bottom:3px;">第一章 · 走进大自然</div>
|
||||
春天的<span class="anchor" style="background:var(--anchor);color:white;padding:0 2px;border-radius:2px;font-size:6px;font-weight:700;">风</span>轻轻吹过田野，带来泥土的芬芳。
|
||||
<br/><br/>
|
||||
<span style="font-weight:700;">观察要点：</span>
|
||||
<br/>• 花朵的颜色变化
|
||||
<br/>• <span style="display:inline-block;width:8px;height:8px;line-height:8px;text-align:center;border-radius:50%;background:var(--anchor);color:white;font-size:6px;font-weight:700;">①</span> 叶片的形状
|
||||
<br/>• 气温的回升
|
||||
<div style="margin-top:6px;padding-top:4px;border-top:1px solid var(--outline);display:flex;gap:3px;">
|
||||
<span style="padding:1px 3px;border-radius:2px;background:var(--surface-high);font-size:6px;">B</span>
|
||||
<span style="padding:1px 3px;border-radius:2px;background:var(--surface-high);font-size:6px;">I</span>
|
||||
<span style="padding:1px 3px;border-radius:2px;background:var(--surface-high);font-size:6px;">H1</span>
|
||||
<span style="padding:1px 3px;border-radius:2px;background:var(--surface-high);font-size:6px;">≡</span>
|
||||
<span style="padding:1px 3px;border-radius:2px;background:var(--surface-high);font-size:6px;">🖼</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wf-right">
|
||||
<div class="wf-label">🎯 教学目标</div>
|
||||
<div class="field"></div>
|
||||
<div class="field short"></div>
|
||||
<div class="field tall"></div>
|
||||
<div style="margin-top:4px;padding:3px;border:1px dashed var(--primary);border-radius:3px;font-size:6px;color:var(--primary);text-align:center;">+ AI 生成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons">
|
||||
<div class="pc">
|
||||
<div class="pc-label pro">✓ 优点</div>
|
||||
<ul>
|
||||
<li>正文编辑区最大、最专注</li>
|
||||
<li>正文与节点分离，职责清晰</li>
|
||||
<li>锚点只在正文里，定位简单</li>
|
||||
<li>保留节点树导航，不丢结构</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pc">
|
||||
<div class="pc-label con">✗ 缺点</div>
|
||||
<ul>
|
||||
<li>失去画布的连线/空间感</li>
|
||||
<li>节点间关系靠树而非图表达</li>
|
||||
<li>需要新增"节点树"组件</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommend">
|
||||
★ 推荐：在"正文必须好编辑"这个核心诉求下，C 兼顾了编辑体验和结构清晰，改动量适中。
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="page-foot">
|
||||
<p>三种方案的正文节点都是<strong>真正的 Tiptap 富文本编辑器</strong>，区别只在布局。锚点系统统一从"字符串偏移"改为 Tiptap Mark，编辑时锚点自动跟随。</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
938
docs/mockups/paper-detail-expanded.html
Normal file
938
docs/mockups/paper-detail-expanded.html
Normal file
@@ -0,0 +1,938 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>备课编辑器 · 统一展开 + 详情面板</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #0a0a0a;
|
||||
--card: #ffffff;
|
||||
--muted: #f5f5f4;
|
||||
--muted-foreground: #78716c;
|
||||
--border: #e7e5e4;
|
||||
--primary: #1c1917;
|
||||
--primary-foreground: #fafaf9;
|
||||
|
||||
--paper: #fefefe;
|
||||
--paper-edge: #f8f8f7;
|
||||
--paper-shadow: 0 1px 2px rgba(15,15,15,0.04), 0 8px 24px rgba(15,15,15,0.04);
|
||||
--paper-shadow-active: 0 1px 2px rgba(15,15,15,0.06), 0 12px 36px rgba(15,15,15,0.08);
|
||||
|
||||
--anchor-range: rgba(28, 25, 23, 0.08);
|
||||
--anchor-range-active: rgba(28, 25, 23, 0.16);
|
||||
--anchor-point: #1c1917;
|
||||
|
||||
--dot-objective: #4b5563;
|
||||
--dot-teach: #1c1917;
|
||||
--dot-interaction: #6366f1;
|
||||
--dot-exercise: #6b7280;
|
||||
--dot-summary: #525252;
|
||||
--dot-textbook: #44403c;
|
||||
--dot-default: #a8a29e;
|
||||
|
||||
--inline-node-border: #d6d3d1;
|
||||
--inline-node-text: #44403c;
|
||||
--inline-node-meta: #a8a29e;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; height: 100%; }
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: var(--muted);
|
||||
color: var(--foreground);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app { display: grid; grid-template-rows: 52px 1fr; height: 100vh; }
|
||||
|
||||
/* 顶部工具栏 */
|
||||
.topbar {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 0 20px;
|
||||
background: var(--background);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
}
|
||||
.topbar .title-input {
|
||||
background: transparent; border: none; outline: none;
|
||||
font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px;
|
||||
color: var(--foreground); width: 280px; letter-spacing: -0.01em;
|
||||
}
|
||||
.topbar .meta-chip {
|
||||
padding: 3px 8px; border: 1px solid var(--border);
|
||||
border-radius: 4px; background: var(--background);
|
||||
font-size: 11px; color: var(--muted-foreground);
|
||||
}
|
||||
.topbar .spacer { flex: 1; }
|
||||
.topbar .status {
|
||||
font-size: 11px; color: var(--muted-foreground);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.topbar .status::before {
|
||||
content: ""; display: inline-block;
|
||||
width: 5px; height: 5px; border-radius: 50%;
|
||||
background: #16a34a; margin-right: 6px; vertical-align: middle;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 6px 10px; border: 1px solid var(--border);
|
||||
border-radius: 5px; background: var(--background);
|
||||
font-size: 12px; color: var(--foreground); cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.btn.primary {
|
||||
background: var(--primary); color: var(--primary-foreground);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.btn.ghost { border-color: transparent; background: transparent; }
|
||||
.btn.ghost:hover { background: var(--muted); }
|
||||
.btn-icon { width: 28px; height: 28px; padding: 0; justify-content: center; }
|
||||
|
||||
.main {
|
||||
display: grid;
|
||||
grid-template-columns: 260px 1fr 380px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* === 左侧结构树 === */
|
||||
.sidebar {
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--background);
|
||||
padding: 16px 12px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-head {
|
||||
font-size: 10px; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.08em;
|
||||
color: var(--muted-foreground);
|
||||
padding: 0 8px 12px;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
}
|
||||
.sidebar-head .count {
|
||||
font-weight: 500; color: var(--muted-foreground);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* 树形结构 */
|
||||
.tree { font-size: 13px; }
|
||||
.tree-node { position: relative; }
|
||||
.tree-row {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
padding: 6px 8px; border-radius: 5px;
|
||||
cursor: pointer; transition: background .12s;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.tree-row:hover { background: var(--muted); }
|
||||
.tree-row.active { background: var(--muted); }
|
||||
.tree-row .toggle {
|
||||
width: 14px; height: 14px;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: 9px; color: var(--muted-foreground);
|
||||
cursor: pointer; flex-shrink: 0;
|
||||
transition: transform .15s;
|
||||
}
|
||||
.tree-row .toggle.noop { visibility: hidden; }
|
||||
.tree-row .dot {
|
||||
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
|
||||
}
|
||||
.tree-row .label {
|
||||
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
color: var(--foreground);
|
||||
}
|
||||
.tree-row .kind {
|
||||
font-size: 10px; color: var(--muted-foreground);
|
||||
font-weight: 500;
|
||||
}
|
||||
/* 展开到正文标记 */
|
||||
.tree-row .expanded-mark {
|
||||
font-size: 9px; color: var(--foreground);
|
||||
background: var(--muted); padding: 1px 5px;
|
||||
border-radius: 2px; font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.tree-children {
|
||||
margin-left: 10px;
|
||||
padding-left: 8px;
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar-add {
|
||||
margin-top: 10px; padding: 7px 8px;
|
||||
border: 1px dashed var(--border); border-radius: 5px;
|
||||
text-align: center; font-size: 12px;
|
||||
color: var(--muted-foreground); cursor: pointer;
|
||||
}
|
||||
.sidebar-add:hover { border-color: var(--foreground); color: var(--foreground); }
|
||||
|
||||
/* === 中间纸区 === */
|
||||
.paper-area {
|
||||
overflow-y: auto;
|
||||
padding: 48px 32px 120px;
|
||||
background:
|
||||
radial-gradient(circle at 50% 0%, rgba(0,0,0,0.015) 0%, transparent 60%),
|
||||
var(--muted);
|
||||
}
|
||||
.paper {
|
||||
background: var(--paper);
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 64px 72px;
|
||||
box-shadow: var(--paper-shadow);
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--paper-edge);
|
||||
min-height: 800px;
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.7;
|
||||
font-size: 16px;
|
||||
}
|
||||
.paper-header {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px; color: var(--muted-foreground);
|
||||
letter-spacing: 0.08em; text-transform: uppercase;
|
||||
margin-bottom: 24px; padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex; justify-content: space-between;
|
||||
}
|
||||
.paper h1 {
|
||||
font-family: 'Fraunces', serif; font-weight: 600;
|
||||
font-size: 30px; line-height: 1.2;
|
||||
margin: 0 0 8px; letter-spacing: -0.015em; color: #0a0a0a;
|
||||
}
|
||||
.paper .subtitle {
|
||||
font-family: 'Fraunces', serif; font-style: italic;
|
||||
font-weight: 400; font-size: 16px;
|
||||
color: #525252; margin-bottom: 32px;
|
||||
}
|
||||
.paper h2 {
|
||||
font-family: 'Fraunces', serif; font-weight: 500;
|
||||
font-size: 20px; margin: 28px 0 12px; color: #1a1a1a;
|
||||
}
|
||||
.paper p {
|
||||
margin: 0 0 16px; font-size: 16px;
|
||||
line-height: 1.75; color: #1a1a1a;
|
||||
}
|
||||
.paper ul, .paper ol { margin: 0 0 16px; padding-left: 22px; }
|
||||
.paper li { margin-bottom: 6px; line-height: 1.7; }
|
||||
.paper strong { font-weight: 600; }
|
||||
|
||||
/* 锚点 */
|
||||
.anchor-range {
|
||||
background: var(--anchor-range); border-radius: 2px;
|
||||
padding: 1px 2px; margin: 0 -2px; cursor: pointer;
|
||||
border-bottom: 1.5px solid var(--anchor-point);
|
||||
}
|
||||
.anchor-range:hover, .anchor-range.active { background: var(--anchor-range-active); }
|
||||
.anchor-range::after {
|
||||
content: attr(data-label);
|
||||
display: inline-block; margin-left: 4px;
|
||||
padding: 0 4px; background: var(--anchor-point); color: #fff;
|
||||
font-family: 'Inter', sans-serif; font-size: 9px;
|
||||
font-weight: 600; border-radius: 2px; vertical-align: middle;
|
||||
line-height: 14px; height: 14px;
|
||||
}
|
||||
.anchor-point {
|
||||
display: inline-block; width: 16px; height: 16px;
|
||||
line-height: 16px; text-align: center; border-radius: 50%;
|
||||
background: var(--anchor-point); color: #fff;
|
||||
font-family: 'Inter', sans-serif; font-size: 9px;
|
||||
font-weight: 600; margin: 0 2px; vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* === 展开节点（统一 inline-node 样式） === */
|
||||
.inline-node {
|
||||
font-family: 'Inter', sans-serif;
|
||||
margin: 20px 0 20px;
|
||||
padding: 14px 18px 14px 20px;
|
||||
border-left: 2px solid var(--inline-node-border);
|
||||
color: var(--inline-node-text);
|
||||
font-size: 13.5px; line-height: 1.65;
|
||||
position: relative;
|
||||
transition: border-color .2s;
|
||||
}
|
||||
.inline-node:hover { border-left-color: var(--foreground); }
|
||||
.inline-node-head {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 10px; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.08em;
|
||||
color: var(--inline-node-meta);
|
||||
}
|
||||
.inline-node-head .dot { width: 5px; height: 5px; border-radius: 50%; }
|
||||
.inline-node-head .anchor-ref {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 9px; color: var(--inline-node-meta);
|
||||
margin-left: auto;
|
||||
}
|
||||
.inline-node-head .collapse {
|
||||
cursor: pointer; padding: 2px 6px;
|
||||
border-radius: 3px; color: var(--inline-node-meta);
|
||||
font-size: 11px; letter-spacing: 0; text-transform: none;
|
||||
}
|
||||
.inline-node-head .collapse:hover { background: var(--muted); color: var(--foreground); }
|
||||
.inline-node-title {
|
||||
font-family: 'Inter', sans-serif; font-weight: 600;
|
||||
font-size: 14px; color: #1a1a1a;
|
||||
margin: 0 0 6px; line-height: 1.35;
|
||||
}
|
||||
.inline-node-body {
|
||||
font-size: 13px; line-height: 1.6; color: #404040;
|
||||
}
|
||||
.inline-node-body p { margin: 0 0 6px; font-size: 13px; line-height: 1.6; }
|
||||
.inline-node-body ul { margin: 4px 0; padding-left: 16px; }
|
||||
.inline-node-body li { margin-bottom: 3px; font-size: 13px; }
|
||||
|
||||
/* 师生交互对话体 */
|
||||
.qa-dialog { margin: 8px 0 4px; }
|
||||
.qa-turn {
|
||||
display: grid; grid-template-columns: 28px 1fr;
|
||||
gap: 10px; padding: 8px 0;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
font-size: 12.5px; line-height: 1.55;
|
||||
}
|
||||
.qa-turn:last-child { border-bottom: none; }
|
||||
.qa-role {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 9px; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.05em;
|
||||
padding-top: 2px; text-align: right;
|
||||
}
|
||||
.qa-role.teacher { color: #1c1917; }
|
||||
.qa-role.student { color: #6b7280; }
|
||||
.qa-content { color: #404040; }
|
||||
.qa-content .prompt {
|
||||
font-style: italic; color: #525252;
|
||||
font-size: 11px; display: block; margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 右键菜单 */
|
||||
.context-menu {
|
||||
position: absolute;
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 6px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
|
||||
padding: 5px;
|
||||
min-width: 220px;
|
||||
z-index: 100;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.context-menu .cm-section {
|
||||
font-size: 9px; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.08em;
|
||||
color: var(--muted-foreground);
|
||||
padding: 6px 10px 4px;
|
||||
}
|
||||
.context-menu .cm-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 7px 10px; border-radius: 4px;
|
||||
cursor: pointer; color: var(--foreground);
|
||||
transition: background .1s;
|
||||
}
|
||||
.context-menu .cm-item:hover { background: var(--muted); }
|
||||
.context-menu .cm-item .cm-icon {
|
||||
width: 14px; color: var(--muted-foreground);
|
||||
font-size: 11px; text-align: center;
|
||||
}
|
||||
.context-menu .cm-item .cm-label { flex: 1; }
|
||||
.context-menu .cm-item .cm-shortcut {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px; color: var(--muted-foreground);
|
||||
}
|
||||
.context-menu .cm-divider {
|
||||
height: 1px; background: var(--border);
|
||||
margin: 4px 0;
|
||||
}
|
||||
.context-menu .cm-item.danger { color: #dc2626; }
|
||||
.context-menu .cm-item.danger .cm-icon { color: #dc2626; }
|
||||
.context-menu .cm-item.ai { color: #6366f1; }
|
||||
.context-menu .cm-item.ai .cm-icon { color: #6366f1; }
|
||||
|
||||
/* === 右侧详情面板（不再是便签） === */
|
||||
.detail-panel {
|
||||
border-left: 1px solid var(--border);
|
||||
background: var(--background);
|
||||
overflow-y: auto;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.detail-head {
|
||||
padding: 16px 20px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
}
|
||||
.detail-head .dot {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
margin-top: 6px; flex-shrink: 0;
|
||||
}
|
||||
.detail-head .head-text { flex: 1; min-width: 0; }
|
||||
.detail-head .kind {
|
||||
font-size: 10px; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.08em;
|
||||
color: var(--muted-foreground); margin-bottom: 4px;
|
||||
}
|
||||
.detail-head .title-input {
|
||||
width: 100%; background: transparent; border: none; outline: none;
|
||||
font-family: 'Inter', sans-serif; font-weight: 600;
|
||||
font-size: 16px; color: var(--foreground);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.detail-head .actions {
|
||||
display: flex; gap: 4px;
|
||||
}
|
||||
.detail-head .actions .icon-btn {
|
||||
width: 26px; height: 26px;
|
||||
border: none; background: transparent;
|
||||
border-radius: 4px; cursor: pointer;
|
||||
color: var(--muted-foreground);
|
||||
font-size: 14px;
|
||||
}
|
||||
.detail-head .actions .icon-btn:hover { background: var(--muted); color: var(--foreground); }
|
||||
|
||||
/* 属性条 */
|
||||
.detail-props {
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex; gap: 12px; flex-wrap: wrap;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
.detail-props .prop {
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
.detail-props .prop-label { color: var(--muted-foreground); }
|
||||
.detail-props .prop-value {
|
||||
color: var(--foreground); font-weight: 500;
|
||||
padding: 1px 6px; background: var(--muted);
|
||||
border-radius: 3px;
|
||||
}
|
||||
.detail-props .prop-value.select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 详情主体 */
|
||||
.detail-body {
|
||||
flex: 1; padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.detail-section { margin-bottom: 24px; }
|
||||
.detail-section .section-label {
|
||||
font-size: 10px; font-weight: 600;
|
||||
text-transform: uppercase; letter-spacing: 0.08em;
|
||||
color: var(--muted-foreground);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.detail-section .field-edit {
|
||||
width: 100%;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
padding: 8px 10px;
|
||||
background: var(--background);
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 13px; line-height: 1.6;
|
||||
color: var(--foreground);
|
||||
resize: vertical; min-height: 80px;
|
||||
}
|
||||
.detail-section .field-edit:focus {
|
||||
outline: none; border-color: var(--foreground);
|
||||
box-shadow: 0 0 0 2px rgba(28,25,23,0.08);
|
||||
}
|
||||
|
||||
/* 师生交互详情 */
|
||||
.qa-editor { display: flex; flex-direction: column; gap: 8px; }
|
||||
.qa-edit-turn {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
padding: 8px 10px;
|
||||
background: var(--background);
|
||||
}
|
||||
.qa-edit-turn .turn-head {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.qa-edit-turn .role-select {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 9px; font-weight: 600;
|
||||
padding: 2px 6px; border-radius: 2px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--background); cursor: pointer;
|
||||
}
|
||||
.qa-edit-turn .role-select.teacher { color: #1c1917; }
|
||||
.qa-edit-turn .role-select.student { color: #6b7280; }
|
||||
.qa-edit-turn .turn-actions { margin-left: auto; }
|
||||
.qa-edit-turn .turn-actions .mini-btn {
|
||||
border: none; background: transparent;
|
||||
color: var(--muted-foreground); cursor: pointer;
|
||||
padding: 2px 4px; font-size: 11px;
|
||||
}
|
||||
.qa-edit-turn .turn-actions .mini-btn:hover { color: var(--foreground); }
|
||||
.qa-edit-turn .turn-content {
|
||||
width: 100%; border: none; outline: none;
|
||||
background: transparent; resize: vertical;
|
||||
font-family: 'Inter', sans-serif; font-size: 12.5px;
|
||||
line-height: 1.5; color: var(--foreground);
|
||||
min-height: 36px;
|
||||
}
|
||||
.qa-edit-turn .turn-prompt {
|
||||
width: 100%; border: none; outline: none;
|
||||
background: var(--muted); resize: vertical;
|
||||
font-family: 'Inter', sans-serif; font-size: 11px;
|
||||
font-style: italic; color: var(--muted-foreground);
|
||||
padding: 4px 8px; border-radius: 3px;
|
||||
margin-top: 4px; min-height: 24px;
|
||||
}
|
||||
.qa-add-turn {
|
||||
border: 1px dashed var(--border);
|
||||
background: transparent; padding: 8px;
|
||||
border-radius: 5px; text-align: center;
|
||||
font-size: 12px; color: var(--muted-foreground);
|
||||
cursor: pointer;
|
||||
}
|
||||
.qa-add-turn:hover { border-color: var(--foreground); color: var(--foreground); }
|
||||
|
||||
/* 详情底部 AI 区 */
|
||||
.detail-ai {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 14px 20px;
|
||||
background: var(--muted);
|
||||
}
|
||||
.detail-ai .ai-title {
|
||||
font-size: 11px; font-weight: 600;
|
||||
color: #6366f1; margin-bottom: 8px;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.detail-ai .ai-btns {
|
||||
display: flex; gap: 6px; flex-wrap: wrap;
|
||||
}
|
||||
.detail-ai .ai-btn {
|
||||
padding: 5px 10px; border: 1px solid var(--border);
|
||||
background: var(--background); border-radius: 4px;
|
||||
font-size: 11.5px; cursor: pointer; color: var(--foreground);
|
||||
transition: all .12s;
|
||||
}
|
||||
.detail-ai .ai-btn:hover {
|
||||
border-color: #6366f1; color: #6366f1;
|
||||
}
|
||||
|
||||
/* 详情底部署名/元信息 */
|
||||
.detail-meta {
|
||||
padding: 10px 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 10.5px; color: var(--muted-foreground);
|
||||
display: flex; flex-wrap: wrap; gap: 8px;
|
||||
}
|
||||
.detail-meta .tag {
|
||||
padding: 1px 5px; background: var(--muted);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }
|
||||
|
||||
@keyframes paperIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.paper { animation: paperIn .5s cubic-bezier(.2,.7,.3,1); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
|
||||
<header class="topbar">
|
||||
<input class="title-input" value="第一单元 · 走进大自然" />
|
||||
<span class="meta-chip">二年级 · 语文</span>
|
||||
<span class="meta-chip">人教版 · 上册</span>
|
||||
<div class="spacer"></div>
|
||||
<span class="status">已保存 · 14:32</span>
|
||||
<button class="btn ghost btn-icon">↶</button>
|
||||
<button class="btn ghost btn-icon">↷</button>
|
||||
<button class="btn ghost">历史版本</button>
|
||||
<button class="btn ghost">AI 反馈</button>
|
||||
<button class="btn primary">发布课案</button>
|
||||
</header>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<!-- 左侧结构树（完整结构） -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-head">
|
||||
<span>结构</span>
|
||||
<span class="count">7 节点 · 3 已展开</span>
|
||||
</div>
|
||||
<div class="tree">
|
||||
|
||||
<!-- 正文节点 -->
|
||||
<div class="tree-node">
|
||||
<div class="tree-row">
|
||||
<span class="toggle noop"></span>
|
||||
<span class="dot" style="background:var(--dot-textbook)"></span>
|
||||
<span class="label">教材正文</span>
|
||||
<span class="kind">正文</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 教学目标（已展开） -->
|
||||
<div class="tree-node">
|
||||
<div class="tree-row active">
|
||||
<span class="toggle noop"></span>
|
||||
<span class="dot" style="background:var(--dot-objective)"></span>
|
||||
<span class="label">教学目标</span>
|
||||
<span class="kind">目标</span>
|
||||
<span class="expanded-mark">纸上</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 字词学习 -->
|
||||
<div class="tree-node">
|
||||
<div class="tree-row">
|
||||
<span class="toggle noop"></span>
|
||||
<span class="dot" style="background:var(--dot-teach)"></span>
|
||||
<span class="label">字词学习</span>
|
||||
<span class="kind">新授</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 师生互动（已展开，带子节点） -->
|
||||
<div class="tree-node">
|
||||
<div class="tree-row">
|
||||
<span class="toggle">▾</span>
|
||||
<span class="dot" style="background:var(--dot-interaction)"></span>
|
||||
<span class="label">感受夏天的声音</span>
|
||||
<span class="kind">互动</span>
|
||||
<span class="expanded-mark">纸上</span>
|
||||
</div>
|
||||
<div class="tree-children">
|
||||
<div class="tree-row">
|
||||
<span class="toggle noop"></span>
|
||||
<span class="dot" style="background:var(--dot-default);opacity:0.5"></span>
|
||||
<span class="label">第 1 轮 · 提问</span>
|
||||
<span class="kind">师</span>
|
||||
</div>
|
||||
<div class="tree-row">
|
||||
<span class="toggle noop"></span>
|
||||
<span class="dot" style="background:var(--dot-default);opacity:0.5"></span>
|
||||
<span class="label">第 2 轮 · 回答</span>
|
||||
<span class="kind">生</span>
|
||||
</div>
|
||||
<div class="tree-row">
|
||||
<span class="toggle noop"></span>
|
||||
<span class="dot" style="background:var(--dot-default);opacity:0.5"></span>
|
||||
<span class="label">第 3 轮 · 追问</span>
|
||||
<span class="kind">师</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 课文精读 -->
|
||||
<div class="tree-node">
|
||||
<div class="tree-row">
|
||||
<span class="toggle noop"></span>
|
||||
<span class="dot" style="background:var(--dot-teach)"></span>
|
||||
<span class="label">课文精读</span>
|
||||
<span class="kind">新授</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 课堂练习（已展开） -->
|
||||
<div class="tree-node">
|
||||
<div class="tree-row">
|
||||
<span class="toggle noop"></span>
|
||||
<span class="dot" style="background:var(--dot-exercise)"></span>
|
||||
<span class="label">仿写：金色的信</span>
|
||||
<span class="kind">练习</span>
|
||||
<span class="expanded-mark">纸上</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本课小结 -->
|
||||
<div class="tree-node">
|
||||
<div class="tree-row">
|
||||
<span class="toggle noop"></span>
|
||||
<span class="dot" style="background:var(--dot-summary)"></span>
|
||||
<span class="label">本课小结</span>
|
||||
<span class="kind">总结</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="sidebar-add">+ 添加节点</div>
|
||||
</aside>
|
||||
|
||||
<!-- 中间纸区 -->
|
||||
<main class="paper-area">
|
||||
<article class="paper">
|
||||
|
||||
<div class="paper-header">
|
||||
<span>教材正文 · 可编辑副本</span>
|
||||
<span>3 节点已展开</span>
|
||||
</div>
|
||||
|
||||
<h1>1 走进大自然</h1>
|
||||
<p class="subtitle">—— 选自人教版二年级上册</p>
|
||||
|
||||
<p>春天的<span class="anchor-range" data-label="A">风</span>轻轻吹过田野，带来泥土的芬芳。柳枝抽出嫩芽，小草从泥土里探出头来，<span class="anchor-range" data-label="B">燕子也从南方飞回来了</span>。</p>
|
||||
|
||||
<!-- 展开的教学目标节点 -->
|
||||
<div class="inline-node">
|
||||
<div class="inline-node-head">
|
||||
<span class="dot" style="background:var(--dot-objective)"></span>
|
||||
<span>教学目标</span>
|
||||
<span class="anchor-ref">A · B</span>
|
||||
<span class="collapse">收起 ▴</span>
|
||||
</div>
|
||||
<h4 class="inline-node-title">感受四季变化</h4>
|
||||
<div class="inline-node-body">
|
||||
<ul>
|
||||
<li>认识"春、夏、秋、冬"四个生字，会写"风、燕、荷、稻"等 12 个字。</li>
|
||||
<li>正确、流利、有感情地朗读课文，背诵第一自然段。</li>
|
||||
<li>感受四季的美丽，培养观察自然的兴趣。</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>夏天，<span class="anchor-range" data-label="C">雷雨过后，天空中常常会出现一道美丽的彩虹</span>。池塘里的荷花开了，青蛙在荷叶上<span class="anchor-point">1</span>呱呱地唱歌。</p>
|
||||
|
||||
<!-- 展开的师生交互节点 -->
|
||||
<div class="inline-node">
|
||||
<div class="inline-node-head">
|
||||
<span class="dot" style="background:var(--dot-interaction)"></span>
|
||||
<span>师生互动</span>
|
||||
<span class="anchor-ref">C · 1</span>
|
||||
<span class="collapse">收起 ▴</span>
|
||||
</div>
|
||||
<h4 class="inline-node-title">感受夏天的声音</h4>
|
||||
<div class="inline-node-body">
|
||||
<p>围绕"雷雨后的夏天"展开问答，引导学生用感官词描述季节。</p>
|
||||
<div class="qa-dialog">
|
||||
<div class="qa-turn">
|
||||
<div class="qa-role teacher">师</div>
|
||||
<div class="qa-content">
|
||||
课文中说"青蛙在荷叶上呱呱地唱歌"，你还听过夏天有哪些声音？
|
||||
<span class="prompt">[预期：蝉鸣、雷声、雨打芭蕉]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-turn">
|
||||
<div class="qa-role student">生</div>
|
||||
<div class="qa-content">
|
||||
我听过知了在树上"知了知了"地叫，还有晚上蛐蛐的声音。
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-turn">
|
||||
<div class="qa-role teacher">师</div>
|
||||
<div class="qa-content">
|
||||
说得真好！那这些声音给你什么样的感觉？能用一个词形容吗？
|
||||
<span class="prompt">[预期：热闹、生机勃勃]</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>观察要点</h2>
|
||||
|
||||
<ul>
|
||||
<li><strong>花朵的颜色变化</strong>：从早到晚，颜色会有什么不同？</li>
|
||||
<li><span class="anchor-point">2</span> <strong>叶片的形状</strong>：心形、针形、掌状……</li>
|
||||
<li><strong>气温的回升</strong>：用温度计记录一周的气温。</li>
|
||||
</ul>
|
||||
|
||||
<p>秋天，树叶<span class="anchor-range" data-label="D">变黄了，一片片飘落下来</span>，像一封封金色的信。田野里，稻谷弯下了腰，<span class="anchor-point">3</span>农民伯伯露出了丰收的喜悦。</p>
|
||||
|
||||
<!-- 展开的练习节点 -->
|
||||
<div class="inline-node">
|
||||
<div class="inline-node-head">
|
||||
<span class="dot" style="background:var(--dot-exercise)"></span>
|
||||
<span>课堂练习</span>
|
||||
<span class="anchor-ref">D</span>
|
||||
<span class="collapse">收起 ▴</span>
|
||||
</div>
|
||||
<h4 class="inline-node-title">仿写：金色的信</h4>
|
||||
<div class="inline-node-body">
|
||||
<p>模仿"树叶变黄了，一片片飘落下来，像一封封金色的信"，写一句自己观察到的秋天。</p>
|
||||
<ul>
|
||||
<li>提示：可以用"像"字打比方</li>
|
||||
<li>时间：8 分钟</li>
|
||||
<li>分享：3 位同学朗读</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>冬天，<span class="anchor-range" data-label="E">雪花纷纷扬扬地飘落</span>，大地披上了银装。孩子们在雪地里堆雪人、打雪仗。</p>
|
||||
|
||||
</article>
|
||||
|
||||
<!-- 右键菜单示意（绝对定位浮在纸上） -->
|
||||
<div class="context-menu" style="top: 380px; left: 320px;">
|
||||
<div class="cm-section">节点操作</div>
|
||||
<div class="cm-item">
|
||||
<span class="cm-icon">▾</span>
|
||||
<span class="cm-label">展开到正文</span>
|
||||
<span class="cm-shortcut">⏎</span>
|
||||
</div>
|
||||
<div class="cm-item">
|
||||
<span class="cm-icon">▴</span>
|
||||
<span class="cm-label">从正文收起</span>
|
||||
</div>
|
||||
<div class="cm-item">
|
||||
<span class="cm-icon">↕</span>
|
||||
<span class="cm-label">上移 / 下移</span>
|
||||
</div>
|
||||
<div class="cm-divider"></div>
|
||||
<div class="cm-section">AI 协助</div>
|
||||
<div class="cm-item ai">
|
||||
<span class="cm-icon">✦</span>
|
||||
<span class="cm-label">生成本节点内容</span>
|
||||
</div>
|
||||
<div class="cm-item ai">
|
||||
<span class="cm-icon">✎</span>
|
||||
<span class="cm-label">优化表达</span>
|
||||
</div>
|
||||
<div class="cm-item ai">
|
||||
<span class="cm-icon">⚖</span>
|
||||
<span class="cm-label">差异化建议</span>
|
||||
</div>
|
||||
<div class="cm-item ai">
|
||||
<span class="cm-icon">?</span>
|
||||
<span class="cm-label">生成分层提问</span>
|
||||
</div>
|
||||
<div class="cm-divider"></div>
|
||||
<div class="cm-item">
|
||||
<span class="cm-icon">⎘</span>
|
||||
<span class="cm-label">复制节点</span>
|
||||
</div>
|
||||
<div class="cm-item danger">
|
||||
<span class="cm-icon">×</span>
|
||||
<span class="cm-label">删除节点</span>
|
||||
<span class="cm-shortcut">⌫</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 右侧详情面板（不是便签） -->
|
||||
<aside class="detail-panel">
|
||||
|
||||
<div class="detail-head">
|
||||
<span class="dot" style="background:var(--dot-interaction)"></span>
|
||||
<div class="head-text">
|
||||
<div class="kind">师生互动 · 已展开到正文</div>
|
||||
<input class="title-input" value="感受夏天的声音" />
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="icon-btn" title="展开/收起">▾</button>
|
||||
<button class="icon-btn" title="更多">⋯</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-props">
|
||||
<div class="prop">
|
||||
<span class="prop-label">教学阶段</span>
|
||||
<span class="prop-value select">新授</span>
|
||||
</div>
|
||||
<div class="prop">
|
||||
<span class="prop-label">差异化</span>
|
||||
<span class="prop-value select">分层</span>
|
||||
</div>
|
||||
<div class="prop">
|
||||
<span class="prop-label">时长</span>
|
||||
<span class="prop-value select">8 分钟</span>
|
||||
</div>
|
||||
<div class="prop">
|
||||
<span class="prop-label">锚点</span>
|
||||
<span class="prop-value">C · 1</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-body">
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="section-label">设计意图</div>
|
||||
<textarea class="field-edit" rows="2">围绕"雷雨后的夏天"展开问答，引导学生用感官词描述季节。</textarea>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<div class="section-label">对话设计</div>
|
||||
<div class="qa-editor">
|
||||
|
||||
<div class="qa-edit-turn">
|
||||
<div class="turn-head">
|
||||
<span class="role-select teacher">师 · 提问</span>
|
||||
<span style="color:var(--muted-foreground);font-size:10px;">第 1 轮</span>
|
||||
<div class="turn-actions">
|
||||
<button class="mini-btn">↑</button>
|
||||
<button class="mini-btn">↓</button>
|
||||
<button class="mini-btn">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea class="turn-content">课文中说"青蛙在荷叶上呱呱地唱歌"，你还听过夏天有哪些声音？</textarea>
|
||||
<textarea class="turn-prompt">[预期：蝉鸣、雷声、雨打芭蕉]</textarea>
|
||||
</div>
|
||||
|
||||
<div class="qa-edit-turn">
|
||||
<div class="turn-head">
|
||||
<span class="role-select student">生 · 回答</span>
|
||||
<span style="color:var(--muted-foreground);font-size:10px;">第 2 轮</span>
|
||||
<div class="turn-actions">
|
||||
<button class="mini-btn">↑</button>
|
||||
<button class="mini-btn">↓</button>
|
||||
<button class="mini-btn">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea class="turn-content">我听过知了在树上"知了知了"地叫，还有晚上蛐蛐的声音。</textarea>
|
||||
</div>
|
||||
|
||||
<div class="qa-edit-turn">
|
||||
<div class="turn-head">
|
||||
<span class="role-select teacher">师 · 追问</span>
|
||||
<span style="color:var(--muted-foreground);font-size:10px;">第 3 轮</span>
|
||||
<div class="turn-actions">
|
||||
<button class="mini-btn">↑</button>
|
||||
<button class="mini-btn">↓</button>
|
||||
<button class="mini-btn">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea class="turn-content">说得真好！那这些声音给你什么样的感觉？能用一个词形容吗？</textarea>
|
||||
<textarea class="turn-prompt">[预期：热闹、生机勃勃、夏天的味道]</textarea>
|
||||
</div>
|
||||
|
||||
<div class="qa-add-turn">+ 添加一轮对话</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="detail-ai">
|
||||
<div class="ai-title">✦ AI 协助</div>
|
||||
<div class="ai-btns">
|
||||
<button class="ai-btn">生成分层提问</button>
|
||||
<button class="ai-btn">补充预期回答</button>
|
||||
<button class="ai-btn">优化追问</button>
|
||||
<button class="ai-btn">差异化建议</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-meta">
|
||||
<span class="tag">互动</span>
|
||||
<span class="tag">感官词</span>
|
||||
<span class="tag">3 轮对话</span>
|
||||
<span style="margin-left:auto;">更新于 14:30</span>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
799
docs/mockups/paper-sticky-design.html
Normal file
799
docs/mockups/paper-sticky-design.html
Normal file
@@ -0,0 +1,799 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>备课编辑器 · 无边记纸感设计</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
/* shadcn 中性令牌（light） */
|
||||
--background: #ffffff;
|
||||
--foreground: #0a0a0a;
|
||||
--card: #ffffff;
|
||||
--card-foreground: #0a0a0a;
|
||||
--muted: #f5f5f4;
|
||||
--muted-foreground: #78716c;
|
||||
--border: #e7e5e4;
|
||||
--input: #e7e5e4;
|
||||
--primary: #1c1917;
|
||||
--primary-foreground: #fafaf9;
|
||||
--secondary: #f5f5f4;
|
||||
--secondary-foreground: #1c1917;
|
||||
--accent: #f5f5f4;
|
||||
--accent-foreground: #1c1917;
|
||||
--ring: #1c1917;
|
||||
|
||||
/* 纸感专用 */
|
||||
--paper: #fefefe;
|
||||
--paper-edge: #f8f8f7;
|
||||
--paper-shadow: 0 1px 2px rgba(15,15,15,0.04), 0 8px 24px rgba(15,15,15,0.04);
|
||||
--paper-shadow-active: 0 1px 2px rgba(15,15,15,0.06), 0 12px 36px rgba(15,15,15,0.08);
|
||||
|
||||
/* 便签 */
|
||||
--sticky-bg: #fffdf5;
|
||||
--sticky-bg-alt: #f7f6f1;
|
||||
--sticky-border: #ebe8df;
|
||||
--sticky-shadow: 0 1px 1px rgba(15,15,15,0.04), 0 2px 4px rgba(15,15,15,0.04);
|
||||
--sticky-shadow-hover: 0 2px 4px rgba(15,15,15,0.06), 0 6px 14px rgba(15,15,15,0.06);
|
||||
|
||||
/* 锚点高亮 */
|
||||
--anchor-range: rgba(28, 25, 23, 0.08);
|
||||
--anchor-range-active: rgba(28, 25, 23, 0.16);
|
||||
--anchor-point: #1c1917;
|
||||
|
||||
/* 节点类型色点（极克制） */
|
||||
--dot-objective: #4b5563;
|
||||
--dot-teach: #1c1917;
|
||||
--dot-exercise: #6b7280;
|
||||
--dot-summary: #525252;
|
||||
--dot-textbook: #44403c;
|
||||
--dot-default: #a8a29e;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; height: 100%; }
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: var(--muted);
|
||||
color: var(--foreground);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: "ss01", "cv11";
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: grid;
|
||||
grid-template-rows: 52px 1fr;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* 顶部工具栏 */
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 20px;
|
||||
background: var(--background);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
}
|
||||
.topbar .title-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: var(--foreground);
|
||||
width: 280px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.topbar .meta {
|
||||
color: var(--muted-foreground);
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.topbar .meta-chip {
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--background);
|
||||
font-size: 11px;
|
||||
}
|
||||
.topbar .spacer { flex: 1; }
|
||||
.topbar .status {
|
||||
font-size: 11px;
|
||||
color: var(--muted-foreground);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.topbar .status::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 5px; height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #16a34a;
|
||||
margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
background: var(--background);
|
||||
font-size: 12px;
|
||||
color: var(--foreground);
|
||||
cursor: pointer;
|
||||
transition: background .15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.btn:hover { background: var(--muted); }
|
||||
.btn.primary {
|
||||
background: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.btn.primary:hover { background: #292524; }
|
||||
.btn.ghost {
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
.btn.ghost:hover { background: var(--muted); }
|
||||
.btn-icon {
|
||||
width: 28px; height: 28px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 主区域三栏 */
|
||||
.main {
|
||||
display: grid;
|
||||
grid-template-columns: 220px 1fr 360px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 左侧节点树 */
|
||||
.sidebar {
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--background);
|
||||
padding: 16px 12px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-head {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted-foreground);
|
||||
padding: 0 8px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.sidebar-head .count {
|
||||
font-weight: 500;
|
||||
color: var(--muted-foreground);
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.node-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
.node-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 7px 8px;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
color: var(--foreground);
|
||||
cursor: pointer;
|
||||
transition: background .12s;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.node-item:hover { background: var(--muted); }
|
||||
.node-item.active {
|
||||
background: var(--muted);
|
||||
color: var(--foreground);
|
||||
}
|
||||
.node-item.active .dot { transform: scale(1.15); }
|
||||
.node-item .dot {
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
transition: transform .15s;
|
||||
}
|
||||
.node-item .label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.node-item .kind {
|
||||
font-size: 10px;
|
||||
color: var(--muted-foreground);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.sidebar-add {
|
||||
margin-top: 10px;
|
||||
padding: 7px 8px;
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--muted-foreground);
|
||||
cursor: pointer;
|
||||
transition: all .15s;
|
||||
}
|
||||
.sidebar-add:hover {
|
||||
border-color: var(--foreground);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
/* 中间纸区 */
|
||||
.paper-area {
|
||||
overflow-y: auto;
|
||||
padding: 48px 32px 120px;
|
||||
background:
|
||||
radial-gradient(circle at 50% 0%, rgba(0,0,0,0.015) 0%, transparent 60%),
|
||||
var(--muted);
|
||||
}
|
||||
.paper {
|
||||
background: var(--paper);
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 64px 72px;
|
||||
box-shadow: var(--paper-shadow);
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--paper-edge);
|
||||
min-height: 800px;
|
||||
transition: box-shadow .25s;
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.7;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
}
|
||||
.paper:focus-within { box-shadow: var(--paper-shadow-active); }
|
||||
|
||||
.paper-header {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
color: var(--muted-foreground);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.paper h1 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 8px;
|
||||
letter-spacing: -0.015em;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
.paper .subtitle {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #525252;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.paper h2 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
margin: 28px 0 12px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.paper p {
|
||||
margin: 0 0 16px;
|
||||
font-size: 16px;
|
||||
line-height: 1.75;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.paper ul, .paper ol {
|
||||
margin: 0 0 16px;
|
||||
padding-left: 22px;
|
||||
}
|
||||
.paper li {
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.paper strong { font-weight: 600; }
|
||||
.paper em { font-style: italic; }
|
||||
|
||||
/* 锚点标记 */
|
||||
.anchor-range {
|
||||
background: var(--anchor-range);
|
||||
border-radius: 2px;
|
||||
padding: 1px 2px;
|
||||
margin: 0 -2px;
|
||||
cursor: pointer;
|
||||
transition: background .15s;
|
||||
border-bottom: 1.5px solid var(--anchor-point);
|
||||
}
|
||||
.anchor-range:hover, .anchor-range.active {
|
||||
background: var(--anchor-range-active);
|
||||
}
|
||||
.anchor-range::after {
|
||||
content: attr(data-label);
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
padding: 0 4px;
|
||||
background: var(--anchor-point);
|
||||
color: #fff;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.anchor-point {
|
||||
display: inline-block;
|
||||
width: 16px; height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: var(--anchor-point);
|
||||
color: #fff;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
margin: 0 2px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
transition: transform .15s;
|
||||
}
|
||||
.anchor-point:hover, .anchor-point.active {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
/* 纸上的工具条（聚焦时显示） */
|
||||
.paper-toolbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
margin: -64px -72px 24px;
|
||||
padding: 10px 72px;
|
||||
background: rgba(255,255,255,0.92);
|
||||
backdrop-filter: blur(8px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .2s;
|
||||
z-index: 5;
|
||||
}
|
||||
.paper:focus-within .paper-toolbar { opacity: 1; pointer-events: auto; }
|
||||
.tb-btn {
|
||||
width: 28px; height: 28px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 13px;
|
||||
color: var(--foreground);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background .12s;
|
||||
}
|
||||
.tb-btn:hover { background: var(--muted); }
|
||||
.tb-btn.b { font-weight: 700; }
|
||||
.tb-btn.i { font-style: italic; font-family: 'Fraunces', serif; }
|
||||
.tb-btn.h1 { font-size: 11px; font-weight: 600; }
|
||||
.tb-btn.ul { font-size: 14px; }
|
||||
.tb-btn.divider {
|
||||
width: 1px;
|
||||
background: var(--border);
|
||||
margin: 4px 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 右侧便签区 */
|
||||
.sticky-area {
|
||||
border-left: 1px solid var(--border);
|
||||
background: var(--muted);
|
||||
padding: 24px 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sticky-area-head {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted-foreground);
|
||||
padding: 0 0 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.sticky-area-head .hint {
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
background: var(--sticky-bg);
|
||||
border: 1px solid var(--sticky-border);
|
||||
border-radius: 4px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: var(--sticky-shadow);
|
||||
transition: all .2s;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.sticky:hover {
|
||||
box-shadow: var(--sticky-shadow-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.sticky.active {
|
||||
border-color: var(--foreground);
|
||||
box-shadow: 0 0 0 1px var(--foreground), var(--sticky-shadow-hover);
|
||||
}
|
||||
.sticky-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sticky-head .dot {
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.sticky-head .kind {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
.sticky-head .spacer { flex: 1; }
|
||||
.sticky-head .anchor-ref {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
color: var(--muted-foreground);
|
||||
background: var(--background);
|
||||
padding: 1px 5px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.sticky-title {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
margin: 0 0 6px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.sticky-body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.55;
|
||||
color: #404040;
|
||||
}
|
||||
.sticky-body p { margin: 0 0 6px; }
|
||||
.sticky-body ul { margin: 4px 0; padding-left: 16px; }
|
||||
.sticky-body li { margin-bottom: 2px; }
|
||||
|
||||
.sticky-footer {
|
||||
margin-top: 10px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed var(--sticky-border);
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
.sticky-footer .tag {
|
||||
padding: 1px 5px;
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.sticky-add {
|
||||
border: 1px dashed var(--border);
|
||||
background: transparent;
|
||||
padding: 14px 16px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 12px;
|
||||
color: var(--muted-foreground);
|
||||
cursor: pointer;
|
||||
transition: all .15s;
|
||||
}
|
||||
.sticky-add:hover {
|
||||
border-color: var(--foreground);
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
}
|
||||
|
||||
/* 滚动条 */
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(0,0,0,0.12);
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }
|
||||
|
||||
/* 微动效 */
|
||||
@keyframes paperIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes stickyIn {
|
||||
from { opacity: 0; transform: translateX(8px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
.paper { animation: paperIn .5s cubic-bezier(.2,.7,.3,1); }
|
||||
.sticky { animation: stickyIn .4s cubic-bezier(.2,.7,.3,1) backwards; }
|
||||
.sticky:nth-child(2) { animation-delay: .05s; }
|
||||
.sticky:nth-child(3) { animation-delay: .1s; }
|
||||
.sticky:nth-child(4) { animation-delay: .15s; }
|
||||
.sticky:nth-child(5) { animation-delay: .2s; }
|
||||
|
||||
@keyframes cursorBlink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 1.5px;
|
||||
height: 1.1em;
|
||||
background: var(--anchor-point);
|
||||
vertical-align: text-bottom;
|
||||
margin-left: 1px;
|
||||
animation: cursorBlink 1s infinite;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
|
||||
<!-- 顶部工具栏 -->
|
||||
<header class="topbar">
|
||||
<input class="title-input" value="第一单元 · 走进大自然" />
|
||||
<div class="meta">
|
||||
<span class="meta-chip">二年级 · 语文</span>
|
||||
<span class="meta-chip">人教版 · 上册</span>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<span class="status">已保存 · 14:32</span>
|
||||
<button class="btn ghost btn-icon" title="撤销">↶</button>
|
||||
<button class="btn ghost btn-icon" title="重做">↷</button>
|
||||
<button class="btn ghost">历史版本</button>
|
||||
<button class="btn ghost">一致性校验</button>
|
||||
<button class="btn ghost">AI 反馈</button>
|
||||
<button class="btn primary">发布课案</button>
|
||||
</header>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<!-- 左侧节点树 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-head">
|
||||
<span>结构</span>
|
||||
<span class="count">6</span>
|
||||
</div>
|
||||
<div class="node-list">
|
||||
<div class="node-item">
|
||||
<span class="dot" style="background:var(--dot-textbook)"></span>
|
||||
<span class="label">教材正文</span>
|
||||
<span class="kind">正文</span>
|
||||
</div>
|
||||
<div class="node-item active">
|
||||
<span class="dot" style="background:var(--dot-objective)"></span>
|
||||
<span class="label">教学目标</span>
|
||||
<span class="kind">目标</span>
|
||||
</div>
|
||||
<div class="node-item">
|
||||
<span class="dot" style="background:var(--dot-teach)"></span>
|
||||
<span class="label">字词学习</span>
|
||||
<span class="kind">新授</span>
|
||||
</div>
|
||||
<div class="node-item">
|
||||
<span class="dot" style="background:var(--dot-teach)"></span>
|
||||
<span class="label">课文精读</span>
|
||||
<span class="kind">新授</span>
|
||||
</div>
|
||||
<div class="node-item">
|
||||
<span class="dot" style="background:var(--dot-exercise)"></span>
|
||||
<span class="label">课堂练习</span>
|
||||
<span class="kind">练习</span>
|
||||
</div>
|
||||
<div class="node-item">
|
||||
<span class="dot" style="background:var(--dot-summary)"></span>
|
||||
<span class="label">本课小结</span>
|
||||
<span class="kind">总结</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-add">+ 添加节点</div>
|
||||
</aside>
|
||||
|
||||
<!-- 中间纸区 -->
|
||||
<main class="paper-area">
|
||||
<article class="paper" contenteditable="false" tabindex="0">
|
||||
|
||||
<!-- 浮动工具条（聚焦时显示） -->
|
||||
<div class="paper-toolbar">
|
||||
<button class="tb-btn b" title="加粗">B</button>
|
||||
<button class="tb-btn i" title="斜体">I</button>
|
||||
<span class="tb-btn divider"></span>
|
||||
<button class="tb-btn h1" title="标题">H1</button>
|
||||
<button class="tb-btn h1" title="副标题" style="font-size:10px;">H2</button>
|
||||
<span class="tb-btn divider"></span>
|
||||
<button class="tb-btn ul" title="无序列表">•</button>
|
||||
<button class="tb-btn ul" title="有序列表" style="font-size:11px;">1.</button>
|
||||
<span class="tb-btn divider"></span>
|
||||
<button class="tb-btn" title="引用" style="font-family:'Fraunces',serif;font-style:italic;font-size:14px;">"</button>
|
||||
<button class="tb-btn" title="分隔线">—</button>
|
||||
</div>
|
||||
|
||||
<div class="paper-header">
|
||||
<span>教材正文 · 可编辑副本</span>
|
||||
<span>第 1 / 3 页</span>
|
||||
</div>
|
||||
|
||||
<h1>1 走进大自然</h1>
|
||||
<p class="subtitle">—— 选自人教版二年级上册</p>
|
||||
|
||||
<p>春天的<span class="anchor-range" data-label="A">风</span>轻轻吹过田野，带来泥土的芬芳。柳枝抽出嫩芽，小草从泥土里探出头来，<span class="anchor-range" data-label="B">燕子也从南方飞回来了</span>。</p>
|
||||
|
||||
<p>夏天，<span class="anchor-range" data-label="C">雷雨过后，天空中常常会出现一道美丽的彩虹</span>。池塘里的荷花开了，青蛙在荷叶上<span class="anchor-point">1</span>呱呱地唱歌。</p>
|
||||
|
||||
<h2>观察要点</h2>
|
||||
|
||||
<ul>
|
||||
<li><strong>花朵的颜色变化</strong>：从早到晚，颜色会有什么不同？</li>
|
||||
<li><span class="anchor-point">2</span> <strong>叶片的形状</strong>：心形、针形、掌状……</li>
|
||||
<li><strong>气温的回升</strong>：用温度计记录一周的气温。</li>
|
||||
</ul>
|
||||
|
||||
<p>秋天，树叶<span class="anchor-range" data-label="D">变黄了，一片片飘落下来</span>，像一封封金色的信。田野里，稻谷弯下了腰，<span class="anchor-point">3</span>农民伯伯露出了丰收的喜悦。</p>
|
||||
|
||||
<p>冬天，<span class="anchor-range" data-label="E">雪花纷纷扬扬地飘落</span>，大地披上了银装。孩子们在雪地里堆雪人、打雪仗，<span class="caret"></span></p>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<!-- 右侧便签区 -->
|
||||
<aside class="sticky-area">
|
||||
<div class="sticky-area-head">
|
||||
<span>教学节点</span>
|
||||
<span class="hint">5 个便签 · 锚定到正文</span>
|
||||
</div>
|
||||
|
||||
<div class="sticky active">
|
||||
<div class="sticky-head">
|
||||
<span class="dot" style="background:var(--dot-objective)"></span>
|
||||
<span class="kind">教学目标</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="anchor-ref">A · B</span>
|
||||
</div>
|
||||
<h3 class="sticky-title">感受四季变化</h3>
|
||||
<div class="sticky-body">
|
||||
<p>1. 认识"春、夏、秋、冬"四个生字，会写"风、燕、荷、稻"等 12 个字。</p>
|
||||
<p>2. 正确、流利、有感情地朗读课文，背诵第一自然段。</p>
|
||||
<p>3. 感受四季的美丽，培养观察自然的兴趣。</p>
|
||||
</div>
|
||||
<div class="sticky-footer">
|
||||
<span class="tag">朗读</span>
|
||||
<span class="tag">识字</span>
|
||||
<span class="tag">2 课时</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky">
|
||||
<div class="sticky-head">
|
||||
<span class="dot" style="background:var(--dot-teach)"></span>
|
||||
<span class="kind">新授</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="anchor-ref">C · 1</span>
|
||||
</div>
|
||||
<h3 class="sticky-title">字词学习</h3>
|
||||
<div class="sticky-body">
|
||||
<p>重点字词：</p>
|
||||
<ul>
|
||||
<li>芬芳 — 香气</li>
|
||||
<li>嫩芽 — 初生的芽</li>
|
||||
<li>纷纷扬扬 — 飘洒的样子</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sticky-footer">
|
||||
<span class="tag">生字 12</span>
|
||||
<span class="tag">词语 8</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky">
|
||||
<div class="sticky-head">
|
||||
<span class="dot" style="background:var(--dot-teach)"></span>
|
||||
<span class="kind">新授</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="anchor-ref">2 · D</span>
|
||||
</div>
|
||||
<h3 class="sticky-title">课文精读</h3>
|
||||
<div class="sticky-body">
|
||||
<p>引导提问：</p>
|
||||
<ul>
|
||||
<li>为什么说"燕子从南方飞回来了"是春天的信号？</li>
|
||||
<li>课文按什么顺序写的？你怎么看出来的？</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sticky-footer">
|
||||
<span class="tag">精读</span>
|
||||
<span class="tag">15 分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky">
|
||||
<div class="sticky-head">
|
||||
<span class="dot" style="background:var(--dot-exercise)"></span>
|
||||
<span class="kind">课堂练习</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="anchor-ref">E</span>
|
||||
</div>
|
||||
<h3 class="sticky-title">仿写练习</h3>
|
||||
<div class="sticky-body">
|
||||
<p>模仿课文"春天的风轻轻吹过田野，带来泥土的芬芳"，写一句自己观察到的季节变化。</p>
|
||||
</div>
|
||||
<div class="sticky-footer">
|
||||
<span class="tag">仿写</span>
|
||||
<span class="tag">8 分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky">
|
||||
<div class="sticky-head">
|
||||
<span class="dot" style="background:var(--dot-summary)"></span>
|
||||
<span class="kind">总结</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="anchor-ref">3</span>
|
||||
</div>
|
||||
<h3 class="sticky-title">本课小结</h3>
|
||||
<div class="sticky-body">
|
||||
<p>回顾四季特点，串联课文脉络。引导学生用一句话说说自己最喜欢的季节。</p>
|
||||
</div>
|
||||
<div class="sticky-footer">
|
||||
<span class="tag">回顾</span>
|
||||
<span class="tag">5 分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky-add">+ 添加教学节点</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
882
docs/mockups/paper-sticky-expanded.html
Normal file
882
docs/mockups/paper-sticky-expanded.html
Normal file
@@ -0,0 +1,882 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>备课编辑器 · 节点展开与师生交互</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #0a0a0a;
|
||||
--card: #ffffff;
|
||||
--muted: #f5f5f4;
|
||||
--muted-foreground: #78716c;
|
||||
--border: #e7e5e4;
|
||||
--primary: #1c1917;
|
||||
--primary-foreground: #fafaf9;
|
||||
|
||||
--paper: #fefefe;
|
||||
--paper-edge: #f8f8f7;
|
||||
--paper-shadow: 0 1px 2px rgba(15,15,15,0.04), 0 8px 24px rgba(15,15,15,0.04);
|
||||
--paper-shadow-active: 0 1px 2px rgba(15,15,15,0.06), 0 12px 36px rgba(15,15,15,0.08);
|
||||
|
||||
--sticky-bg: #fffdf5;
|
||||
--sticky-border: #ebe8df;
|
||||
--sticky-shadow: 0 1px 1px rgba(15,15,15,0.04), 0 2px 4px rgba(15,15,15,0.04);
|
||||
--sticky-shadow-hover: 0 2px 4px rgba(15,15,15,0.06), 0 6px 14px rgba(15,15,15,0.06);
|
||||
|
||||
--anchor-range: rgba(28, 25, 23, 0.08);
|
||||
--anchor-range-active: rgba(28, 25, 23, 0.16);
|
||||
--anchor-point: #1c1917;
|
||||
|
||||
--dot-objective: #4b5563;
|
||||
--dot-teach: #1c1917;
|
||||
--dot-interaction: #6366f1;
|
||||
--dot-exercise: #6b7280;
|
||||
--dot-summary: #525252;
|
||||
--dot-textbook: #44403c;
|
||||
--dot-default: #a8a29e;
|
||||
|
||||
/* 展开节点（流入正文）的样式 */
|
||||
--inline-node-bg: transparent;
|
||||
--inline-node-border: #d6d3d1;
|
||||
--inline-node-text: #44403c;
|
||||
--inline-node-meta: #a8a29e;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; height: 100%; }
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: var(--muted);
|
||||
color: var(--foreground);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: grid;
|
||||
grid-template-rows: 52px 1fr;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 20px;
|
||||
background: var(--background);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 13px;
|
||||
}
|
||||
.topbar .title-input {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: var(--foreground);
|
||||
width: 280px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.topbar .meta-chip {
|
||||
padding: 3px 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--background);
|
||||
font-size: 11px;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
.topbar .spacer { flex: 1; }
|
||||
.topbar .status {
|
||||
font-size: 11px;
|
||||
color: var(--muted-foreground);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.topbar .status::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 5px; height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #16a34a;
|
||||
margin-right: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
background: var(--background);
|
||||
font-size: 12px;
|
||||
color: var(--foreground);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
}
|
||||
.btn.primary {
|
||||
background: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.btn.ghost { border-color: transparent; background: transparent; }
|
||||
.btn.ghost:hover { background: var(--muted); }
|
||||
.btn-icon { width: 28px; height: 28px; padding: 0; justify-content: center; }
|
||||
|
||||
.main {
|
||||
display: grid;
|
||||
grid-template-columns: 220px 1fr 360px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 左侧节点树 */
|
||||
.sidebar {
|
||||
border-right: 1px solid var(--border);
|
||||
background: var(--background);
|
||||
padding: 16px 12px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-head {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted-foreground);
|
||||
padding: 0 8px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.node-list { display: flex; flex-direction: column; gap: 1px; }
|
||||
.node-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
padding: 7px 8px;
|
||||
border-radius: 5px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background .12s;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.node-item:hover { background: var(--muted); }
|
||||
.node-item.active { background: var(--muted); }
|
||||
.node-item .dot {
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.node-item .label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.node-item .kind {
|
||||
font-size: 10px;
|
||||
color: var(--muted-foreground);
|
||||
font-weight: 500;
|
||||
}
|
||||
/* 展开状态指示 */
|
||||
.node-item .expand-state {
|
||||
font-size: 9px;
|
||||
color: var(--muted-foreground);
|
||||
width: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.node-item.expanded .expand-state { color: var(--foreground); }
|
||||
.sidebar-add {
|
||||
margin-top: 10px;
|
||||
padding: 7px 8px;
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--muted-foreground);
|
||||
cursor: pointer;
|
||||
}
|
||||
.sidebar-add:hover { border-color: var(--foreground); color: var(--foreground); }
|
||||
|
||||
/* 中间纸区 */
|
||||
.paper-area {
|
||||
overflow-y: auto;
|
||||
padding: 48px 32px 120px;
|
||||
background:
|
||||
radial-gradient(circle at 50% 0%, rgba(0,0,0,0.015) 0%, transparent 60%),
|
||||
var(--muted);
|
||||
}
|
||||
.paper {
|
||||
background: var(--paper);
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
padding: 64px 72px;
|
||||
box-shadow: var(--paper-shadow);
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--paper-edge);
|
||||
min-height: 800px;
|
||||
font-family: 'Fraunces', Georgia, serif;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.7;
|
||||
font-size: 16px;
|
||||
}
|
||||
.paper-header {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 11px;
|
||||
color: var(--muted-foreground);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.paper h1 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
line-height: 1.2;
|
||||
margin: 0 0 8px;
|
||||
letter-spacing: -0.015em;
|
||||
color: #0a0a0a;
|
||||
}
|
||||
.paper .subtitle {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #525252;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.paper h2 {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
margin: 28px 0 12px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.paper p {
|
||||
margin: 0 0 16px;
|
||||
font-size: 16px;
|
||||
line-height: 1.75;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.paper ul, .paper ol { margin: 0 0 16px; padding-left: 22px; }
|
||||
.paper li { margin-bottom: 6px; line-height: 1.7; }
|
||||
.paper strong { font-weight: 600; }
|
||||
|
||||
/* 锚点 */
|
||||
.anchor-range {
|
||||
background: var(--anchor-range);
|
||||
border-radius: 2px;
|
||||
padding: 1px 2px;
|
||||
margin: 0 -2px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1.5px solid var(--anchor-point);
|
||||
}
|
||||
.anchor-range:hover, .anchor-range.active { background: var(--anchor-range-active); }
|
||||
.anchor-range::after {
|
||||
content: attr(data-label);
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
padding: 0 4px;
|
||||
background: var(--anchor-point);
|
||||
color: #fff;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
border-radius: 2px;
|
||||
vertical-align: middle;
|
||||
line-height: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.anchor-point {
|
||||
display: inline-block;
|
||||
width: 16px; height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: var(--anchor-point);
|
||||
color: #fff;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
margin: 0 2px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* === 关键：节点展开到正文流 === */
|
||||
.inline-node {
|
||||
font-family: 'Inter', sans-serif;
|
||||
margin: 18px 0 18px;
|
||||
padding: 14px 18px 14px 20px;
|
||||
border-left: 2px solid var(--inline-node-border);
|
||||
background: var(--inline-node-bg);
|
||||
color: var(--inline-node-text);
|
||||
font-size: 13.5px;
|
||||
line-height: 1.65;
|
||||
position: relative;
|
||||
transition: border-color .2s;
|
||||
}
|
||||
.inline-node:hover { border-left-color: var(--foreground); }
|
||||
.inline-node-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--inline-node-meta);
|
||||
}
|
||||
.inline-node-head .dot {
|
||||
width: 5px; height: 5px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.inline-node-head .anchor-ref {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 9px;
|
||||
color: var(--inline-node-meta);
|
||||
margin-left: auto;
|
||||
}
|
||||
.inline-node-head .collapse {
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
color: var(--inline-node-meta);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
.inline-node-head .collapse:hover { background: var(--muted); color: var(--foreground); }
|
||||
.inline-node-title {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 6px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.inline-node-body {
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #404040;
|
||||
}
|
||||
.inline-node-body p { margin: 0 0 6px; font-size: 13px; line-height: 1.6; }
|
||||
.inline-node-body ul { margin: 4px 0; padding-left: 16px; }
|
||||
.inline-node-body li { margin-bottom: 3px; font-size: 13px; }
|
||||
|
||||
/* 师生交互对话体 */
|
||||
.qa-dialog {
|
||||
margin: 8px 0 4px;
|
||||
padding: 0;
|
||||
}
|
||||
.qa-turn {
|
||||
display: grid;
|
||||
grid-template-columns: 28px 1fr;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
font-size: 12.5px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.qa-turn:last-child { border-bottom: none; }
|
||||
.qa-role {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
padding-top: 2px;
|
||||
text-align: right;
|
||||
}
|
||||
.qa-role.teacher { color: #1c1917; }
|
||||
.qa-role.student { color: #6b7280; }
|
||||
.qa-content { color: #404040; }
|
||||
.qa-content .prompt {
|
||||
font-style: italic;
|
||||
color: #525252;
|
||||
font-size: 11px;
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 右侧便签区 */
|
||||
.sticky-area {
|
||||
border-left: 1px solid var(--border);
|
||||
background: var(--muted);
|
||||
padding: 24px 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sticky-area-head {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted-foreground);
|
||||
padding: 0 0 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.sticky-area-head .hint {
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
font-size: 11px;
|
||||
}
|
||||
.sticky {
|
||||
background: var(--sticky-bg);
|
||||
border: 1px solid var(--sticky-border);
|
||||
border-radius: 4px;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: var(--sticky-shadow);
|
||||
transition: all .2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sticky:hover {
|
||||
box-shadow: var(--sticky-shadow-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.sticky.active {
|
||||
border-color: var(--foreground);
|
||||
box-shadow: 0 0 0 1px var(--foreground), var(--sticky-shadow-hover);
|
||||
}
|
||||
.sticky.collapsed-on-paper {
|
||||
opacity: 0.5;
|
||||
background: var(--muted);
|
||||
}
|
||||
.sticky-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sticky-head .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
||||
.sticky-head .kind {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
.sticky-head .spacer { flex: 1; }
|
||||
.sticky-head .anchor-ref {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 10px;
|
||||
color: var(--muted-foreground);
|
||||
background: var(--background);
|
||||
padding: 1px 5px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.sticky-head .expand-toggle {
|
||||
font-size: 11px;
|
||||
color: var(--muted-foreground);
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.sticky-head .expand-toggle:hover { background: var(--background); color: var(--foreground); }
|
||||
.sticky-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--foreground);
|
||||
margin: 0 0 6px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.sticky-body {
|
||||
font-size: 12.5px;
|
||||
line-height: 1.55;
|
||||
color: #404040;
|
||||
}
|
||||
.sticky-body p { margin: 0 0 6px; }
|
||||
.sticky-body ul { margin: 4px 0; padding-left: 16px; }
|
||||
.sticky-body li { margin-bottom: 2px; }
|
||||
.sticky-footer {
|
||||
margin-top: 10px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed var(--sticky-border);
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
font-size: 10px;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
.sticky-footer .tag {
|
||||
padding: 1px 5px;
|
||||
background: var(--background);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.sticky-add {
|
||||
border: 1px dashed var(--border);
|
||||
background: transparent;
|
||||
padding: 14px 16px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: var(--muted-foreground);
|
||||
cursor: pointer;
|
||||
}
|
||||
.sticky-add:hover { border-color: var(--foreground); color: var(--foreground); background: var(--background); }
|
||||
|
||||
/* 便签内的师生交互预览（折叠态） */
|
||||
.qa-preview {
|
||||
font-size: 11.5px;
|
||||
line-height: 1.5;
|
||||
color: #525252;
|
||||
padding: 6px 8px;
|
||||
background: var(--background);
|
||||
border-radius: 3px;
|
||||
border: 1px solid var(--border);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.qa-preview .role-tag {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.qa-preview .role-tag.t { color: #1c1917; }
|
||||
.qa-preview .role-tag.s { color: #6b7280; }
|
||||
.qa-preview .ellipsis { color: var(--muted-foreground); font-size: 10px; margin-top: 2px; }
|
||||
|
||||
::-webkit-scrollbar { width: 8px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }
|
||||
|
||||
@keyframes paperIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.paper { animation: paperIn .5s cubic-bezier(.2,.7,.3,1); }
|
||||
|
||||
/* 展开状态指示器（小标签） */
|
||||
.expand-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: 500;
|
||||
color: var(--muted-foreground);
|
||||
padding: 2px 6px;
|
||||
background: var(--muted);
|
||||
border-radius: 2px;
|
||||
margin-left: 6px;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
.expand-badge:hover { color: var(--foreground); background: var(--border); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
|
||||
<header class="topbar">
|
||||
<input class="title-input" value="第一单元 · 走进大自然" />
|
||||
<span class="meta-chip">二年级 · 语文</span>
|
||||
<span class="meta-chip">人教版 · 上册</span>
|
||||
<div class="spacer"></div>
|
||||
<span class="status">已保存 · 14:32</span>
|
||||
<button class="btn ghost btn-icon">↶</button>
|
||||
<button class="btn ghost btn-icon">↷</button>
|
||||
<button class="btn ghost">历史版本</button>
|
||||
<button class="btn ghost">AI 反馈</button>
|
||||
<button class="btn primary">发布课案</button>
|
||||
</header>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<!-- 左侧节点树 -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-head">
|
||||
<span>结构</span>
|
||||
<span>6</span>
|
||||
</div>
|
||||
<div class="node-list">
|
||||
<div class="node-item">
|
||||
<span class="dot" style="background:var(--dot-textbook)"></span>
|
||||
<span class="label">教材正文</span>
|
||||
<span class="kind">正文</span>
|
||||
<span class="expand-state"></span>
|
||||
</div>
|
||||
<div class="node-item active">
|
||||
<span class="dot" style="background:var(--dot-objective)"></span>
|
||||
<span class="label">教学目标</span>
|
||||
<span class="kind">目标</span>
|
||||
<span class="expand-state"></span>
|
||||
</div>
|
||||
<div class="node-item">
|
||||
<span class="dot" style="background:var(--dot-teach)"></span>
|
||||
<span class="label">字词学习</span>
|
||||
<span class="kind">新授</span>
|
||||
<span class="expand-state"></span>
|
||||
</div>
|
||||
<div class="node-item expanded">
|
||||
<span class="dot" style="background:var(--dot-interaction)"></span>
|
||||
<span class="label">师生互动</span>
|
||||
<span class="kind">互动</span>
|
||||
<span class="expand-state">▾</span>
|
||||
</div>
|
||||
<div class="node-item">
|
||||
<span class="dot" style="background:var(--dot-teach)"></span>
|
||||
<span class="label">课文精读</span>
|
||||
<span class="kind">新授</span>
|
||||
<span class="expand-state"></span>
|
||||
</div>
|
||||
<div class="node-item expanded">
|
||||
<span class="dot" style="background:var(--dot-exercise)"></span>
|
||||
<span class="label">课堂练习</span>
|
||||
<span class="kind">练习</span>
|
||||
<span class="expand-state">▾</span>
|
||||
</div>
|
||||
<div class="node-item">
|
||||
<span class="dot" style="background:var(--dot-summary)"></span>
|
||||
<span class="label">本课小结</span>
|
||||
<span class="kind">总结</span>
|
||||
<span class="expand-state"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-add">+ 添加节点</div>
|
||||
</aside>
|
||||
|
||||
<!-- 中间纸区 -->
|
||||
<main class="paper-area">
|
||||
<article class="paper">
|
||||
|
||||
<div class="paper-header">
|
||||
<span>教材正文 · 可编辑副本</span>
|
||||
<span>2 个节点已展开到正文</span>
|
||||
</div>
|
||||
|
||||
<h1>1 走进大自然</h1>
|
||||
<p class="subtitle">—— 选自人教版二年级上册</p>
|
||||
|
||||
<p>春天的<span class="anchor-range" data-label="A">风</span>轻轻吹过田野，带来泥土的芬芳。柳枝抽出嫩芽，小草从泥土里探出头来，<span class="anchor-range" data-label="B">燕子也从南方飞回来了</span>。</p>
|
||||
|
||||
<p>夏天，<span class="anchor-range" data-label="C">雷雨过后，天空中常常会出现一道美丽的彩虹</span>。池塘里的荷花开了，青蛙在荷叶上<span class="anchor-point">1</span>呱呱地唱歌。</p>
|
||||
|
||||
<!-- 展开的师生交互节点（流入正文） -->
|
||||
<div class="inline-node">
|
||||
<div class="inline-node-head">
|
||||
<span class="dot" style="background:var(--dot-interaction)"></span>
|
||||
<span>师生互动</span>
|
||||
<span class="anchor-ref">C · 1</span>
|
||||
<span class="collapse" title="收起回便签">收起 ▴</span>
|
||||
</div>
|
||||
<h4 class="inline-node-title">感受夏天的声音</h4>
|
||||
<div class="inline-node-body">
|
||||
<p>围绕"雷雨后的夏天"展开问答，引导学生用感官词描述季节。</p>
|
||||
<div class="qa-dialog">
|
||||
<div class="qa-turn">
|
||||
<div class="qa-role teacher">师</div>
|
||||
<div class="qa-content">
|
||||
课文中说"青蛙在荷叶上呱呱地唱歌"，你还听过夏天有哪些声音？
|
||||
<span class="prompt">[预期：蝉鸣、雷声、雨打芭蕉]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-turn">
|
||||
<div class="qa-role student">生</div>
|
||||
<div class="qa-content">
|
||||
我听过知了在树上"知了知了"地叫，还有晚上蛐蛐的声音。
|
||||
</div>
|
||||
</div>
|
||||
<div class="qa-turn">
|
||||
<div class="qa-role teacher">师</div>
|
||||
<div class="qa-content">
|
||||
说得真好！那这些声音给你什么样的感觉？能用一个词形容吗？
|
||||
<span class="prompt">[预期：热闹、生机勃勃、夏天的味道]</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>观察要点</h2>
|
||||
|
||||
<ul>
|
||||
<li><strong>花朵的颜色变化</strong>：从早到晚，颜色会有什么不同？</li>
|
||||
<li><span class="anchor-point">2</span> <strong>叶片的形状</strong>：心形、针形、掌状……</li>
|
||||
<li><strong>气温的回升</strong>：用温度计记录一周的气温。</li>
|
||||
</ul>
|
||||
|
||||
<p>秋天，树叶<span class="anchor-range" data-label="D">变黄了，一片片飘落下来</span>，像一封封金色的信。田野里，稻谷弯下了腰，<span class="anchor-point">3</span>农民伯伯露出了丰收的喜悦。</p>
|
||||
|
||||
<!-- 展开的练习节点 -->
|
||||
<div class="inline-node">
|
||||
<div class="inline-node-head">
|
||||
<span class="dot" style="background:var(--dot-exercise)"></span>
|
||||
<span>课堂练习</span>
|
||||
<span class="anchor-ref">D</span>
|
||||
<span class="collapse" title="收起回便签">收起 ▴</span>
|
||||
</div>
|
||||
<h4 class="inline-node-title">仿写：金色的信</h4>
|
||||
<div class="inline-node-body">
|
||||
<p>模仿"树叶变黄了，一片片飘落下来，像一封封金色的信"，写一句自己观察到的秋天。</p>
|
||||
<ul>
|
||||
<li>提示：可以用"像"字打比方</li>
|
||||
<li>时间：8 分钟</li>
|
||||
<li>分享：3 位同学朗读</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>冬天，<span class="anchor-range" data-label="E">雪花纷纷扬扬地飘落</span>，大地披上了银装。孩子们在雪地里堆雪人、打雪仗。</p>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<!-- 右侧便签区 -->
|
||||
<aside class="sticky-area">
|
||||
<div class="sticky-area-head">
|
||||
<span>教学节点</span>
|
||||
<span class="hint">5 个便签 · 2 已展开</span>
|
||||
</div>
|
||||
|
||||
<div class="sticky active">
|
||||
<div class="sticky-head">
|
||||
<span class="dot" style="background:var(--dot-objective)"></span>
|
||||
<span class="kind">教学目标</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="anchor-ref">A · B</span>
|
||||
<span class="expand-toggle" title="展开到正文">▾</span>
|
||||
</div>
|
||||
<h3 class="sticky-title">感受四季变化</h3>
|
||||
<div class="sticky-body">
|
||||
<p>1. 认识"春、夏、秋、冬"四个生字，会写"风、燕、荷、稻"等 12 个字。</p>
|
||||
<p>2. 正确、流利、有感情地朗读课文，背诵第一自然段。</p>
|
||||
<p>3. 感受四季的美丽，培养观察自然的兴趣。</p>
|
||||
</div>
|
||||
<div class="sticky-footer">
|
||||
<span class="tag">朗读</span>
|
||||
<span class="tag">识字</span>
|
||||
<span class="tag">2 课时</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky">
|
||||
<div class="sticky-head">
|
||||
<span class="dot" style="background:var(--dot-teach)"></span>
|
||||
<span class="kind">新授</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="anchor-ref">C · 1</span>
|
||||
<span class="expand-toggle">▾</span>
|
||||
</div>
|
||||
<h3 class="sticky-title">字词学习</h3>
|
||||
<div class="sticky-body">
|
||||
<p>重点字词：</p>
|
||||
<ul>
|
||||
<li>芬芳 — 香气</li>
|
||||
<li>嫩芽 — 初生的芽</li>
|
||||
<li>纷纷扬扬 — 飘洒的样子</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sticky-footer">
|
||||
<span class="tag">生字 12</span>
|
||||
<span class="tag">词语 8</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 师生交互便签（折叠态） -->
|
||||
<div class="sticky collapsed-on-paper">
|
||||
<div class="sticky-head">
|
||||
<span class="dot" style="background:var(--dot-interaction)"></span>
|
||||
<span class="kind">师生互动</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="anchor-ref">C · 1</span>
|
||||
<span class="expand-toggle" title="已展开到正文，点击收起">▴</span>
|
||||
</div>
|
||||
<h3 class="sticky-title">感受夏天的声音</h3>
|
||||
<div class="sticky-body">
|
||||
<p>围绕"雷雨后的夏天"展开问答，引导学生用感官词描述季节。</p>
|
||||
<div class="qa-preview">
|
||||
<div><span class="role-tag t">师</span>课文中说"青蛙在荷叶上呱呱地唱歌"…</div>
|
||||
<div><span class="role-tag s">生</span>我听过知了在树上"知了知了"…</div>
|
||||
<div class="ellipsis">共 3 轮对话 · 已展开到正文 ▾</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sticky-footer">
|
||||
<span class="tag">问答</span>
|
||||
<span class="tag">感官词</span>
|
||||
<span class="tag">8 分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky">
|
||||
<div class="sticky-head">
|
||||
<span class="dot" style="background:var(--dot-teach)"></span>
|
||||
<span class="kind">新授</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="anchor-ref">2 · D</span>
|
||||
<span class="expand-toggle">▾</span>
|
||||
</div>
|
||||
<h3 class="sticky-title">课文精读</h3>
|
||||
<div class="sticky-body">
|
||||
<p>引导提问：</p>
|
||||
<ul>
|
||||
<li>为什么说"燕子从南方飞回来了"是春天的信号？</li>
|
||||
<li>课文按什么顺序写的？</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sticky-footer">
|
||||
<span class="tag">精读</span>
|
||||
<span class="tag">15 分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 练习便签（折叠态，已展开） -->
|
||||
<div class="sticky collapsed-on-paper">
|
||||
<div class="sticky-head">
|
||||
<span class="dot" style="background:var(--dot-exercise)"></span>
|
||||
<span class="kind">课堂练习</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="anchor-ref">D</span>
|
||||
<span class="expand-toggle" title="已展开到正文，点击收起">▴</span>
|
||||
</div>
|
||||
<h3 class="sticky-title">仿写：金色的信</h3>
|
||||
<div class="sticky-body">
|
||||
<p>模仿课文写一句自己观察到的秋天。</p>
|
||||
<div class="qa-preview">
|
||||
<div class="ellipsis">已展开到正文 ▾</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sticky-footer">
|
||||
<span class="tag">仿写</span>
|
||||
<span class="tag">8 分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky">
|
||||
<div class="sticky-head">
|
||||
<span class="dot" style="background:var(--dot-summary)"></span>
|
||||
<span class="kind">总结</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="anchor-ref">3</span>
|
||||
<span class="expand-toggle">▾</span>
|
||||
</div>
|
||||
<h3 class="sticky-title">本课小结</h3>
|
||||
<div class="sticky-body">
|
||||
<p>回顾四季特点，串联课文脉络。引导学生用一句话说说自己最喜欢的季节。</p>
|
||||
</div>
|
||||
<div class="sticky-footer">
|
||||
<span class="tag">回顾</span>
|
||||
<span class="tag">5 分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sticky-add">+ 添加教学节点</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -665,3 +665,32 @@ export function SubjectTabs({ subjects, currentSubjectId }: Props) {
|
||||
| 右键菜单触发对象区分 | inline-node 右键 = 节点菜单；正文右键 = 锚定菜单 | 任何右键都触发同一菜单 |
|
||||
| v3 锚点迁移失效提示 | `<AnchorMigrationBanner />`（按 planId localStorage） | toast 一闪即逝 |
|
||||
|
||||
|
||||
### i18n 键缺失与中英文不同步
|
||||
|
||||
模块新增 t() 调用时，必须同步更新 zh-CN 和 en 两个语言文件，且键名必须完全一致（不能用 `week`/`weekView` 这种同义不同名的两套键）。
|
||||
|
||||
| 规则 | 正确写法 | 错误写法 |
|
||||
|------|---------|---------|
|
||||
| 嵌套路径不存在时需创建子对象 | JSON 中 `"version": { "diff": { "title": "..." } }` 对应 `t("version.diff.title")` | JSON 中 `"version"` 和 `"diff"` 是平级节，却调用 `t("version.diff.title")` → MISSING_MESSAGE |
|
||||
| Zod schema 错误键必须存在于 JSON `error` 节 | `z.string().min(1, "error.labelTooLong")` + JSON `error.labelTooLong` 存在 | schema 引用 `error.labelTooLong` 但 JSON 中无此键 → 校验失败时显示键路径 |
|
||||
| zh-CN 与 en 键名必须完全一致 | zh-CN `calendar.weekView` + en `calendar.weekView` | zh-CN `calendar.weekView` + en `calendar.week` → en locale 下 MISSING_MESSAGE |
|
||||
| 禁止 JSX 中硬编码中文 | `label={t("v4.detail.stageLabel")}` | `label="教学阶段"` → en 用户看到中文 |
|
||||
| 未启用 useTranslations 的组件如需展示文本，必须先引入 | `import { useTranslations } from "next-intl"; const t = useTranslations("lessonPreparation");` | 组件内直接写中文字面量 |
|
||||
|
||||
### i18n dead 节清理规则
|
||||
|
||||
语言文件中未被任何 `t()` 调用引用的节（dead keys）应定期清理，避免 zh-CN 与 en 各持不同 schema 导致维护混乱。清理前必须全代码库搜索（含 `src/app/`），确认无引用。
|
||||
|
||||
| 规则 | 正确写法 | 错误写法 |
|
||||
|------|---------|---------|
|
||||
| 删除 dead 节前必须验证全代码库无引用 | `grep -r "t(\"review." src/` 无结果后删除 | 直接删除节，导致隐藏引用方 MISSING_MESSAGE |
|
||||
| zh-CN 和 en 键集必须完全一致 | 两文件均保留 `analytics` 节且键名相同 | zh-CN 有 `analytics.totalPublished`，en 只有 `analytics.publishedPlans` |
|
||||
|
||||
### i18n 动态键翻译守卫
|
||||
|
||||
Zod schema 中存储的 i18n 键（如 `"error.titleRequired"`）在服务端翻译时，必须先用 `t.has()` 守卫检查键是否存在，避免 schema 误写不存在的键时抛出 MISSING_MESSAGE。
|
||||
|
||||
| 规则 | 正确写法 | 错误写法 |
|
||||
|------|---------|---------|
|
||||
| 动态键翻译前必须用 t.has() 守卫 | `if (t.has(msg)) { return t(msg); } return msg;` | `return t(msg);` — 键不存在时抛 MISSING_MESSAGE |
|
||||
|
||||
Reference in New Issue
Block a user