feat(lesson-preparation): 详情面板头部

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

@@ -0,0 +1,90 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import type { Block } from "../../types";
+import { useLessonPlanEditor } from "../../hooks/use-lesson-plan-editor";
+
+interface Props {
+  node: Block;
+  isExpanded: boolean;
+}
+
+export function DetailHead({ node, isExpanded }: Props) {
+  const t = useTranslations("lessonPreparation");
+  const updateNode = useLessonPlanEditor((s) => s.updateNode);
+  const toggleExpand = useLessonPlanEditor((s) => s.toggleExpand);
+
+  const dotColor = `var(--lp-dot-${node.type})`;
+
+  return (
+    <div
+      style={{
+        padding: "16px 20px 12px",
+        borderBottom: "1px solid var(--border)",
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 10,
+      }}
+    >
+      <span
+        style={{
+          width: 8,
+          height: 8,
+          borderRadius: "50%",
+          background: dotColor,
+          marginTop: 6,
+          flexShrink: 0,
+        }}
+      />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            fontSize: 10,
+            fontWeight: 600,
+            textTransform: "uppercase",
+            letterSpacing: "0.08em",
+            color: "var(--muted-foreground)",
+            marginBottom: 4,
+          }}
+        >
+          {node.type}
+          {isExpanded ? ` · ${t("v4.contextMenu.expandToPaper")}` : ""}
+        </div>
+        <input
+          value={node.title}
+          onChange={(e) => updateNode(node.id, { title: e.target.value })}
+          style={{
+            width: "100%",
+            background: "transparent",
+            border: "none",
+            outline: "none",
+            fontFamily: "Inter, sans-serif",
+            fontWeight: 600,
+            fontSize: 16,
+            color: "var(--foreground)",
+            lineHeight: 1.3,
+          }}
+        />
+      </div>
+      <div style={{ display: "flex", gap: 4 }}>
+        <button
+          type="button"
+          onClick={() => toggleExpand(node.id)}
+          title={isExpanded ? t("v4.contextMenu.collapseFromPaper") : t("v4.contextMenu.expandToPaper")}
+          style={{
+            width: 26,
+            height: 26,
+            border: "none",
+            background: "transparent",
+            borderRadius: 4,
+            cursor: "pointer",
+            color: "var(--muted-foreground)",
+            fontSize: 14,
+          }}
+        >
+          {isExpanded ? "▴" : "▾"}
+        </button>
+      </div>
+    </div>
+  );
+}