feat: 新增备课模块并修复全模块 P0/P1/P2 缺陷

主要变更:

- 新增 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)

src/modules/grades/components/grade-distribution-chart.tsx

@@ -1,21 +1,9 @@
 "use client"
 
 import { PieChart as PieChartIcon } from "lucide-react"
-import { Bar, BarChart, CartesianGrid, Cell, XAxis, YAxis } from "recharts"
 
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/shared/components/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/shared/components/ui/chart"
-import { EmptyState } from "@/shared/components/ui/empty-state"
+import { ChartCardShell } from "@/shared/components/charts/chart-card-shell"
+import { SimpleBarChart } from "@/shared/components/charts/simple-bar-chart"
 import type { GradeDistributionResult } from "@/modules/grades/types"
 
 const BUCKET_COLORS: Record<string, string> = {
@@ -26,113 +14,68 @@ const BUCKET_COLORS: Record<string, string> = {
   "<60": "hsl(0, 84%, 60%)",
 }
 
-const chartConfig = {
-  count: { label: "Students", color: "hsl(var(--primary))" },
-}
-
 interface GradeDistributionChartProps {
   data: GradeDistributionResult | null
 }
 
 export function GradeDistributionChart({ data }: GradeDistributionChartProps) {
-  if (!data || data.totalCount === 0) {
-    return (
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            <PieChartIcon className="h-4 w-4" />
-            Score Distribution
-          </CardTitle>
-          <CardDescription>
-            Number of students in each score range (normalized to 0-100).
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <EmptyState
-            icon={PieChartIcon}
-            title="No distribution data"
-            description="Select a class and subject to view score distribution."
-            className="border-none h-60"
-          />
-        </CardContent>
-      </Card>
-    )
-  }
+  const isEmpty = !data || data.totalCount === 0
 
-  const chartData = data.buckets.map((b) => ({
-    label: b.label,
-    count: b.count,
-    percentage:
-      data.totalCount > 0
-        ? Math.round((b.count / data.totalCount) * 1000) / 10
-        : 0,
-  }))
+  const chartData = isEmpty
+    ? []
+    : data.buckets.map((b) => ({
+        label: b.label,
+        count: b.count,
+        percentage:
+          data.totalCount > 0
+            ? Math.round((b.count / data.totalCount) * 1000) / 10
+            : 0,
+      }))
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <PieChartIcon className="h-4 w-4" />
-          Score Distribution
-        </CardTitle>
-        <CardDescription>
-          {data.totalCount} grade record{data.totalCount === 1 ? "" : "s"} across
-          score ranges.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={chartConfig} className="h-[280px] w-full">
-          <BarChart
-            data={chartData}
-            margin={{ left: 8, right: 8, top: 8, bottom: 8 }}
-          >
-            <CartesianGrid
-              vertical={false}
-              strokeDasharray="4 4"
-              strokeOpacity={0.4}
-            />
-            <XAxis
-              dataKey="label"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-            />
-            <YAxis
-              allowDecimals={false}
-              tickLine={false}
-              axisLine={false}
-              width={32}
-            />
-            <ChartTooltip
-              content={
-                <ChartTooltipContent
-                  className="w-[200px]"
-                  formatter={(payload: unknown) => {
-                    const item = (payload as { payload?: (typeof chartData)[number] })?.payload
-                    if (!item) return null
-                    return (
-                      <div className="flex w-full flex-col gap-0.5">
-                        <span className="text-sm font-medium">
-                          {item.label}: {item.count} student
-                          {item.count === 1 ? "" : "s"}
-                        </span>
-                        <span className="text-xs text-muted-foreground">
-                          {item.percentage}% of total
-                        </span>
-                      </div>
-                    )
-                  }}
-                />
-              }
-            />
-            <Bar dataKey="count" radius={[4, 4, 0, 0]}>
-              {chartData.map((entry) => (
-                <Cell key={entry.label} fill={BUCKET_COLORS[entry.label]} />
-              ))}
-            </Bar>
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
+    <ChartCardShell
+      title="Score Distribution"
+      description={
+        isEmpty
+          ? "Number of students in each score range (normalized to 0-100)."
+          : `${data.totalCount} grade record${data.totalCount === 1 ? "" : "s"} across score ranges.`
+      }
+      icon={PieChartIcon}
+      isEmpty={isEmpty}
+      emptyTitle="No distribution data"
+      emptyDescription="Select a class and subject to view score distribution."
+      emptyClassName="h-60"
+    >
+      <SimpleBarChart
+        data={chartData}
+        bars={[
+          {
+            dataKey: "count",
+            name: "Students",
+            color: "hsl(var(--primary))",
+          },
+        ]}
+        xKey="label"
+        xTickFormatter={null}
+        yAllowDecimals={false}
+        yWidth={32}
+        heightClassName="h-[280px]"
+        margin={{ left: 8, right: 8, top: 8, bottom: 8 }}
+        tooltipClassName="w-[200px]"
+        cellColors={BUCKET_COLORS}
+        tooltipFormatter={(payload: unknown) => {
+          const item = (payload as { payload?: { label: string; count: number; percentage: number } })?.payload
+          if (!item) return null
+          return (
+            <div className="flex w-full flex-col gap-0.5">
+              <span className="text-sm font-medium">
+                {item.label}: {item.count} student{item.count === 1 ? "" : "s"}
+              </span>
+              <span className="text-xs text-muted-foreground">{item.percentage}% of total</span>
+            </div>
+          )
+        }}
+      />
+    </ChartCardShell>
   )
 }