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

feat: 新增备课模块并修复全模块 P0/P1/P2 缺陷
Some checks failed
Security / deep-security-scan (push) Failing after 20m5s
Details
DR Drill / dr-drill (push) Failing after 1m31s
Details
CI / scheduled-backup (push) Failing after 1m31s
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 
主要变更:

- 新增 lesson-preparation 模块: 备课编辑器、节点编辑、AI 建议、知识点选择、版本历史、作业发布

- 新增 shared 通用组件: charts/question-bank-filters/schedule-list/ui (chip-nav/filter-bar/page-header/stat-card/stat-item)

- 新增 student/admin 端 loading.tsx 与 error.tsx, 优化加载与错误态体验

- 新增 teacher/lesson-plans 页面 (列表/新建/编辑)

- 新增 drizzle 迁移 0002_tiny_lionheart 及 snapshot

- 新增 textbooks/schema.ts 与 exams/utils/normalize-structure.ts

- 修复 Tiptap v3 SSR hydration 崩溃 (rich-text-block immediatelyRender: false)

- 重构多模块 data-access/actions/组件, 修复权限校验与类型规范

- 同步架构文档 004/005 反映新增模块、导出、依赖关系

- 归档 bugs/* 测试报告与 e2e 测试脚本 (admin/parent/student/teacher web_test)
This commit is contained in:
SpecialX
2026-06-22 01:06:16 +08:00
parent d8962aba96
commit 978d9a8309
327 changed files with 34070 additions and 5642 deletions
Download Patch File Download Diff File Expand all files Collapse all files

412
docs/feature/f_bk.md Normal file
View File

@@ -0,0 +1,412 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Chinese Education Suite - Text Study</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&amp;family=JetBrains+Mono:wght@400&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"surface-container-highest": "#e4e2e2",
"error-container": "#ffdad6",
"primary-fixed": "#d4e3ff",
"primary": "#005dac",
"secondary-fixed-dim": "#ffb786",
"primary-fixed-dim": "#a5c8ff",
"secondary": "#964900",
"primary-container": "#1976d2",
"surface-container-low": "#f5f3f3",
"on-tertiary-fixed": "#002204",
"on-surface-variant": "#414752",
"on-surface": "#1b1c1c",
"tertiary": "#0d6c1e",
"on-primary-fixed-variant": "#004786",
"inverse-surface": "#303031",
"secondary-container": "#fc820c",
"on-secondary-fixed-variant": "#723600",
"surface": "#fbf9f8",
"error": "#ba1a1a",
"background": "#fbf9f8",
"on-primary-fixed": "#001c3a",
"on-secondary-fixed": "#311300",
"on-primary-container": "#fffdff",
"outline-variant": "#c1c6d4",
"on-tertiary": "#ffffff",
"tertiary-fixed": "#9df898",
"on-error-container": "#93000a",
"surface-variant": "#e4e2e2",
"tertiary-container": "#2f8635",
"surface-container-lowest": "#ffffff",
"on-tertiary-fixed-variant": "#005312",
"surface-tint": "#005faf",
"on-background": "#1b1c1c",
"surface-bright": "#fbf9f8",
"outline": "#717783",
"on-tertiary-container": "#fdfff7",
"inverse-primary": "#a5c8ff",
"on-secondary-container": "#5e2c00",
"on-secondary": "#ffffff",
"surface-dim": "#dbdad9",
"surface-container": "#efeded",
"secondary-fixed": "#ffdcc6",
"on-primary": "#ffffff",
"on-error": "#ffffff",
"tertiary-fixed-dim": "#82db7e",
"surface-container-high": "#e9e8e7",
"inverse-on-surface": "#f2f0f0"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"xl": "32px",
"sidebar_width": "80px",
"sidebar_width_hover": "280px",
"grid_columns": "12",
"gutter": "24px",
"2xl": "48px",
"xs": "8px",
"md": "16px",
"lg": "24px",
"sm": "12px",
"base": "4px"
},
"fontFamily": {
"title-lg": ["Inter"],
"display-lg": ["Inter"],
"code-md": ["JetBrains Mono"],
"body-lg": ["Inter"],
"headline-lg-mobile": ["Inter"],
"headline-md": ["Inter"],
"label-md": ["Inter"],
"headline-lg": ["Inter"],
"title-md": ["Inter"],
"body-md": ["Inter"]
},
"fontSize": {
"title-lg": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
"display-lg": ["48px", { "lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"code-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"body-lg": ["16px", { "lineHeight": "26px", "fontWeight": "400" }],
"headline-lg-mobile": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
"headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
"label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500" }],
"headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600" }],
"title-md": ["16px", { "lineHeight": "24px", "fontWeight": "600" }],
"body-md": ["14px", { "lineHeight": "22px", "fontWeight": "400" }]
}
}
}
}
</script>
<style>
.text-reading-chinese {
font-family: "KaiTi", "STKaiti", serif;
line-height: 2.2;
letter-spacing: 0.05em;
}
.annotation-highlight-yellow {
background-color: rgba(252, 130, 12, 0.2);
border-bottom: 2px dashed #fc820c;
transition: all 0.2s ease;
}
.annotation-highlight-yellow.active {
background-color: rgba(252, 130, 12, 0.4);
box-shadow: 0 0 0 2px rgba(252, 130, 12, 0.5);
}
.annotation-highlight-green {
background-color: rgba(47, 134, 53, 0.15);
border-bottom: 2px dashed #2f8635;
transition: all 0.2s ease;
}
.annotation-highlight-green.active {
background-color: rgba(47, 134, 53, 0.3);
box-shadow: 0 0 0 2px rgba(47, 134, 53, 0.5);
}
.floating-toolbar {
box-shadow: 0px 4px 12px rgba(0,0,0,0.08);
backdrop-filter: blur(8px);
}
.node-canvas-bg {
background-image: radial-gradient(var(--tw-colors-outline-variant) 1px, transparent 1px);
background-size: 24px 24px;
background-position: -12px -12px;
}
.sidebar-collapsed {
width: 80px;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-collapsed:hover {
width: 280px;
}
.sidebar-collapsed .sidebar-text {
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.2s ease, transform 0.2s ease;
white-space: nowrap;
}
.sidebar-collapsed:hover .sidebar-text {
opacity: 1;
transform: translateX(0);
transition-delay: 0.1s;
}
.sidebar-collapsed .sidebar-header-compact {
display: flex;
transition: opacity 0.2s ease;
}
.sidebar-collapsed:hover .sidebar-header-compact {
display: none;
opacity: 0;
}
.sidebar-collapsed .sidebar-header-full {
display: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.sidebar-collapsed:hover .sidebar-header-full {
display: flex;
opacity: 1;
transition-delay: 0.1s;
}
.connection-line {
stroke-dasharray: 6 6;
animation: dash 20s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: -100;
}
}
</style>
</head>
<body class="bg-background text-on-background antialiased font-body-md overflow-hidden flex">
<!-- SideNavBar (Shared Component) - Collapsed by Default -->
<nav class="bg-surface-container-low border-r border-outline-variant fixed left-0 top-0 h-full sidebar-collapsed flex flex-col z-40 overflow-hidden shadow-[4px_0_12px_rgba(0,0,0,0.05)]">
<!-- Header Profile/Brand Area -->
<div class="p-lg border-b border-outline-variant min-h-[140px] flex flex-col justify-center">
<!-- Compact Header (Icon only) -->
<div class="sidebar-header-compact justify-center items-center h-full">
<img class="w-10 h-10 rounded-full object-cover" data-alt="A small, professional portrait avatar of an elementary school teacher, wearing a neat blouse, softly lit with a friendly expression. The background is a clean, bright, out-of-focus classroom setting. Light, optimistic, modern educational aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCPm6ajyPls5KuN3NyxyIsYDJjwr4nGreE-xX_wJmhJXxEoloRJliDYKXVHc7pGX7V0JzgMspJ1gypOgUa9gsueX9F6-v1Nyq-yoOajjl5IkVUK-EcPVN1I_QOnZDkoyS-bKMM6bqTmwvjNT-Qeg3ZCLwAbQIVkGSlqmQcXG5XlZ3oHBtVYgcYOZpbEMegS75pxILeSysUPGRhfOxl3LerA0SoAsTgOTo6nIq7AcBzAmmGN_Qjst-6n5EeWdIni83vKOeYjHpOPyuc"/>
</div>
<!-- Full Header -->
<div class="sidebar-header-full flex-col gap-sm">
<div class="flex items-center gap-sm">
<img class="w-10 h-10 rounded-full object-cover shrink-0" data-alt="A small, professional portrait avatar of an elementary school teacher, wearing a neat blouse, softly lit with a friendly expression. The background is a clean, bright, out-of-focus classroom setting. Light, optimistic, modern educational aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCPm6ajyPls5KuN3NyxyIsYDJjwr4nGreE-xX_wJmhJXxEoloRJliDYKXVHc7pGX7V0JzgMspJ1gypOgUa9gsueX9F6-v1Nyq-yoOajjl5IkVUK-EcPVN1I_QOnZDkoyS-bKMM6bqTmwvjNT-Qeg3ZCLwAbQIVkGSlqmQcXG5XlZ3oHBtVYgcYOZpbEMegS75pxILeSysUPGRhfOxl3LerA0SoAsTgOTo6nIq7AcBzAmmGN_Qjst-6n5EeWdIni83vKOeYjHpOPyuc"/>
<div class="sidebar-text">
<h2 class="font-headline-md text-headline-md font-bold text-primary">Lesson Planner</h2>
<p class="font-body-md text-body-md text-on-surface-variant">Primary Chinese</p>
</div>
</div>
<button class="mt-md bg-primary-container text-on-primary-container font-label-md text-label-md py-sm px-md rounded-lg flex items-center justify-center gap-xs hover:opacity-90 transition-opacity sidebar-text w-full">
<span class="material-symbols-outlined text-[18px]">add</span>
New Lesson Plan
</button>
</div>
</div>
<!-- Navigation Links -->
<div class="flex-1 overflow-y-auto py-md">
<ul class="flex flex-col gap-base px-sm">
<!-- Text Study (ACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-primary font-bold border-l-4 border-primary bg-primary-container/10 transition-transform duration-150" href="#">
<span class="material-symbols-outlined shrink-0" style="font-variation-settings: 'FILL' 1;">book</span>
<span class="font-title-md text-title-md sidebar-text">Text Study</span>
</a>
</li>
<!-- Objectives (INACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined shrink-0">target</span>
<span class="font-title-md text-title-md sidebar-text">Objectives</span>
</a>
</li>
<!-- Teaching Process (INACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined shrink-0">school</span>
<span class="font-title-md text-title-md sidebar-text">Teaching Process</span>
</a>
</li>
<!-- Blackboard Design (INACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined shrink-0">draw</span>
<span class="font-title-md text-title-md sidebar-text">Blackboard Design</span>
</a>
</li>
<!-- Resources (INACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined shrink-0">folder_open</span>
<span class="font-title-md text-title-md sidebar-text">Resources</span>
</a>
</li>
<!-- Homework (INACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined shrink-0">assignment</span>
<span class="font-title-md text-title-md sidebar-text">Homework</span>
</a>
</li>
<!-- Preview (INACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined shrink-0">visibility</span>
<span class="font-title-md text-title-md sidebar-text">Preview</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- Main Content Wrapper -->
<div class="ml-[80px] flex-1 flex flex-col h-screen overflow-hidden bg-background">
<!-- TopNavBar (Shared Component) -->
<header class="bg-surface border-b border-outline-variant flex justify-between items-center h-16 px-lg shrink-0 z-10 relative">
<!-- Left: Brand/Context -->
<div class="flex items-center gap-md">
<h1 class="font-title-lg text-title-lg font-black text-primary">Chinese Education Suite</h1>
<div class="h-6 w-px bg-outline-variant mx-sm"></div>
<div class="flex items-center gap-xs">
<span class="font-title-md text-title-md text-on-surface">《秋天》 (Autumn)</span>
<span class="bg-surface-container-high text-on-surface-variant font-label-md text-label-md px-2 py-1 rounded">Grade 1</span>
</div>
</div>
<!-- Center: Nav Links -->
<nav class="hidden lg:flex gap-lg h-full absolute left-1/2 -translate-x-1/2">
<a class="flex items-center h-full font-body-md text-body-md text-on-surface-variant hover:text-primary border-b-2 border-transparent transition-colors" href="#">Curriculum</a>
<a class="flex items-center h-full font-body-md text-body-md text-on-surface-variant hover:text-primary border-b-2 border-transparent transition-colors" href="#">Standards</a>
<a class="flex items-center h-full font-body-md text-body-md text-on-surface-variant hover:text-primary border-b-2 border-transparent transition-colors" href="#">Analytics</a>
</nav>
<!-- Right: Actions -->
<div class="flex items-center gap-md ml-auto">
<div class="relative">
<span class="material-symbols-outlined absolute left-sm top-1/2 -translate-y-1/2 text-outline text-[20px]">search</span>
<input class="pl-xl pr-sm py-1.5 bg-surface-container-low border border-outline-variant rounded-full font-body-md text-body-md focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 transition-all w-48" placeholder="Search..." type="text"/>
</div>
<button class="bg-secondary-container text-on-secondary-container font-label-md text-label-md py-1.5 px-md rounded-full border border-secondary-container hover:bg-transparent transition-colors flex items-center gap-xs">
<span class="material-symbols-outlined text-[16px]">smart_toy</span>
AI Assistant
</button>
<button class="text-primary font-label-md text-label-md hover:opacity-80 transition-opacity">Export Plan</button>
<div class="flex items-center gap-xs text-on-surface-variant">
<button class="p-xs rounded-full hover:bg-surface-container-highest transition-colors"><span class="material-symbols-outlined text-[20px]">notifications</span></button>
<button class="p-xs rounded-full hover:bg-surface-container-highest transition-colors"><span class="material-symbols-outlined text-[20px]">settings</span></button>
</div>
<img class="w-8 h-8 rounded-full border border-outline-variant" data-alt="A small circular avatar of a user, standard blank profile icon style, subtle grey tones on a white background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAoTWwwvka05iqtq0cMgF0dpJUpK_48qzYYStPnxDXFahYje8tyCmqaSyBF3jwLqLg6BmaRQJYOnQ40GhsX4wZWX5tHGYz7gRT_E_rPjuD9kzSG5A9wXmc1bbSwiuQ1GAGmL-C7lP5P3fuO5jGFNyQdLwxROqRD5LOpj0zGvcVpEKC7w8XAywqptBTED0cyde1nOpxiCtuap-NzXBMuj-smrxOzXEaGlY4Z98u_OqHKFk6xgSRW4BoqmDk5-tlmDuv-6qyz_4S-Vqc"/>
</div>
</header>
<!-- Workspace Layout - Integrated Canvas -->
<main class="flex-1 flex overflow-hidden relative bg-surface-container-low node-canvas-bg cursor-grab active:cursor-grabbing">
<!-- Dynamic Connecting Lines (SVG Layer) -->
<svg class="absolute inset-0 pointer-events-none w-full h-full" style="z-index: 10;">
<path class="connection-line" d="M 580 320 C 650 320, 700 250, 750 250" fill="none" opacity="1" stroke="#fc820c" stroke-dasharray="6 6" stroke-width="2"></path>
<path class="connection-line" d="M 520 450 C 600 450, 700 390, 750 390" fill="none" opacity="0.2" stroke="#2f8635" stroke-dasharray="6 6" stroke-width="2"></path>
</svg>
<!-- Integrated Document Container -->
<div class="absolute left-12 top-12 bottom-12 w-[600px] bg-surface-container-lowest border border-outline-variant rounded-xl shadow-md overflow-y-auto z-20 cursor-text">
<!-- Floating Toolbar (Attached to document) -->
<div class="sticky top-6 left-1/2 -translate-x-1/2 w-max floating-toolbar bg-surface/95 border border-outline-variant rounded-full px-md py-sm flex items-center gap-sm z-30 mb-8 mt-6 mx-auto">
<button class="p-xs text-primary rounded hover:bg-primary/10 transition-colors tooltip-trigger" title="Highlight">
<span class="material-symbols-outlined text-[20px]">format_ink_highlighter</span>
</button>
<button class="p-xs text-on-surface-variant rounded hover:bg-surface-container-highest transition-colors tooltip-trigger" title="Underline">
<span class="material-symbols-outlined text-[20px]">format_underlined</span>
</button>
<button class="p-xs text-on-surface-variant rounded hover:bg-surface-container-highest transition-colors tooltip-trigger" title="Add Note">
<span class="material-symbols-outlined text-[20px]">add_comment</span>
</button>
<div class="w-px h-5 bg-outline-variant mx-xs"></div>
<button class="w-5 h-5 rounded-full bg-secondary-container border border-outline-variant hover:scale-110 transition-transform ring-2 ring-offset-1 ring-secondary-container"></button>
<button class="w-5 h-5 rounded-full bg-tertiary-container border border-outline-variant hover:scale-110 transition-transform"></button>
<button class="w-5 h-5 rounded-full bg-primary border border-outline-variant hover:scale-110 transition-transform"></button>
</div>
<!-- Text Document -->
<div class="px-2xl pb-2xl">
<h2 class="text-center font-headline-lg text-headline-lg mb-xl text-on-surface">《秋天》</h2>
<div class="text-reading-chinese text-[28px] text-on-surface">
<p class="mb-lg indent-8">
天气凉了，树叶黄了，一片片叶子从树上落下来。
<span class="relative inline-block cursor-pointer group">
<span class="annotation-highlight-yellow active px-1 rounded" id="highlight-1">天空那么蓝，那么高。</span>
<!-- Connection Anchor -->
</span></p><div class="absolute -right-2 top-1/2 w-2 h-2 rounded-full bg-secondary-container opacity-100"></div>
<p></p>
<p class="mb-lg indent-8">
一群大雁往南飞，一会儿排成个“人”字，一会儿排成个“一”字。
<span class="relative inline-block cursor-pointer group">
<span class="annotation-highlight-green px-1 rounded" id="highlight-2">啊！秋天来了！</span>
<!-- Connection Anchor -->
</span></p><div class="absolute -right-2 top-1/2 w-2 h-2 rounded-full bg-tertiary-container opacity-0 group-hover:opacity-100 transition-opacity"></div>
<p></p>
</div>
<!-- UI Hint for Interaction -->
<div class="mt-2xl pt-lg border-t border-outline-variant/30 flex items-center justify-center gap-sm text-on-surface-variant/70 font-label-md text-sm">
<span class="material-symbols-outlined text-[18px]">lightbulb</span>
<span>Select text and hold <kbd class="bg-surface-container px-1.5 py-0.5 rounded border border-outline-variant font-code-md text-xs">Shift</kbd> to create a new node</span>
</div>
</div>
</div>
<!-- Nodes on Canvas (Positioned to the right) -->
<div class="absolute top-[200px] left-[750px] w-[280px] bg-surface rounded-lg border-2 border-secondary-container shadow-md transition-shadow cursor-pointer group z-20" id="node-1">
<div class="bg-secondary-fixed-dim/30 px-3 py-2 rounded-t-sm border-b border-secondary-container/50 flex justify-between items-center">
<span class="text-on-secondary-fixed-variant font-label-md text-label-md font-bold">Language Feature</span>
<button class="text-on-secondary-fixed-variant hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[16px]">more_horiz</span></button>
</div>
<div class="p-4 relative">
<!-- Connection Anchor -->
<div class="absolute -left-2 top-[30px] w-4 h-4 rounded-full bg-surface border-2 border-secondary-container"></div>
<p class="font-body-md text-on-surface text-sm italic mb-3">"天空那么蓝，那么高。"</p>
<div class="text-xs text-on-surface-variant border-t border-outline-variant/30 pt-2">
<span class="font-bold text-on-surface">Note:</span> Focus on repetition of "那么".
</div>
</div>
</div>
<div class="absolute top-[350px] left-[750px] w-[280px] bg-surface rounded-lg border border-tertiary-container/50 shadow-sm transition-all hover:shadow-md hover:border-tertiary-container cursor-pointer group z-20 opacity-80 hover:opacity-100" id="node-2">
<div class="bg-tertiary-fixed-dim/20 px-3 py-2 rounded-t-sm border-b border-outline-variant flex justify-between items-center">
<span class="text-on-tertiary-fixed-variant font-label-md text-label-md">Action Suggestion</span>
<button class="text-outline hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[16px]">more_horiz</span></button>
</div>
<div class="p-4 relative">
<!-- Connection Anchor -->
<div class="absolute -left-2 top-[30px] w-4 h-4 rounded-full bg-surface border-2 border-outline-variant group-hover:border-tertiary-container transition-colors"></div>
<p class="font-body-md text-on-surface text-sm italic">"啊！秋天来了！"</p>
</div>
</div>
<!-- Floating Detail/Parameter Panel (Right side) -->
<div class="absolute top-md right-md w-[320px] bg-surface/90 backdrop-blur-md rounded-2xl p-lg shadow-[0_8px_32px_rgba(0,0,0,0.08)] border border-outline-variant/50 flex flex-col gap-md z-30">
<div class="flex justify-between items-start">
<span class="bg-secondary-fixed-dim/40 text-on-secondary-fixed-variant font-label-md text-label-md px-2 py-1 rounded-sm border border-secondary-container/20">Language Feature</span>
<button class="text-outline hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[18px]">close</span></button>
</div>
<div class="bg-surface-container-lowest p-3 rounded-lg border border-outline-variant/50">
<p class="font-body-md text-body-md text-on-surface italic">"天空那么蓝，那么高。"</p>
</div>
<div class="flex flex-col gap-xs">
<label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Instructional Notes</label>
<p class="font-body-md text-body-md text-on-surface">Focus on the repetition of "那么" (so) to emphasize the vastness of the autumn sky. Guide students to read with a prolonged, airy tone.</p>
</div>
<div class="flex flex-col gap-xs mt-auto pt-sm border-t border-outline-variant/30">
<label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Tags</label>
<div class="flex gap-xs flex-wrap">
<span class="bg-surface-container border border-outline-variant text-on-surface-variant font-label-md text-[10px] px-2 py-1 rounded-full">朗读指导</span>
<button class="bg-transparent border border-dashed border-outline-variant text-on-surface-variant hover:text-primary hover:border-primary font-label-md text-[10px] px-2 py-1 rounded-full transition-colors flex items-center gap-1">
<span class="material-symbols-outlined text-[12px]">add</span> Add Tag
</button>
</div>
</div>
</div>
</main>
</div>
</body></html>