xiner/NextEdu
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs(architecture): update impact map, data, troubleshooting, add mockups
Some checks failed
Security / deep-security-scan (push) Failing after 2m10s
Details
DR Drill / dr-drill (push) Failing after 1m32s
Details
CI / scheduled-backup (push) Failing after 31s
Details
CI / backup-verify (push) Has been skipped
Details
CI / weekly-dr-drill (push) Failing after 0s
Details
CI / build-deploy (push) Has been cancelled
Details
CI / security-scan (push) Has been cancelled
Details

Browse Source 
- 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
2026-07-04 23:02:14 +08:00
parent e962b67050
commit d1ad7a1f75
8 changed files with 3324 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

938
docs/mockups/paper-detail-expanded.html Normal file
View 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>