feat(lesson-preparation): 详情面板属性条

src/modules/lesson-preparation/components/detail-panel/detail-props.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import type { Block, DifferentiationLevel, TeachingStage } from "../../types";
+import { useLessonPlanEditor } from "../../hooks/use-lesson-plan-editor";
+
+interface Props {
+  node: Block;
+}
+
+const STAGES: TeachingStage[] = ["import", "new_teaching", "consolidation", "summary"];
+const LEVELS: DifferentiationLevel[] = ["basic", "intermediate", "advanced"];
+
+export function DetailProps({ node }: Props) {
+  const updateNode = useLessonPlanEditor((s) => s.updateNode);
+
+  return (
+    <div
+      style={{
+        padding: "10px 20px",
+        borderBottom: "1px solid var(--border)",
+        display: "flex",
+        gap: 12,
+        flexWrap: "wrap",
+        fontSize: 11.5,
+      }}
+    >
+      <PropItem
+        label="教学阶段"
+        value={node.stage ?? "—"}
+        options={STAGES}
+        onChange={(v) => updateNode(node.id, { stage: v as TeachingStage })}
+      />
+      <PropItem
+        label="差异化"
+        value={node.differentiation ?? "—"}
+        options={LEVELS}
+        onChange={(v) => updateNode(node.id, { differentiation: v as DifferentiationLevel })}
+      />
+    </div>
+  );
+}
+
+function PropItem({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  options: readonly string[];
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
+      <span style={{ color: "var(--muted-foreground)" }}>{label}</span>
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        style={{
+          color: "var(--foreground)",
+          fontWeight: 500,
+          padding: "1px 6px",
+          background: "var(--muted)",
+          border: "1px solid var(--border)",
+          borderRadius: 3,
+          fontSize: 11,
+          cursor: "pointer",
+        }}
+      >
+        <option value="—">—</option>
+        {options.map((o) => (
+          <option key={o} value={o}>
+            {o}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}