From 985a7ac0d8f110dc9fa77f631c728178c19dc0b5 Mon Sep 17 00:00:00 2001
From: lili <lili@lili-mac.local>
Date: Sun, 21 Jun 2026 02:53:22 -0700
Subject: [PATCH] =?UTF-8?q?feat(studio):=20B5b=20planning=20=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E7=BB=84=E4=BB=B6=20+=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=20vitest=20jsx=20runtime[P1]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PlanningEditor.tsx:按 projection.fieldType 动态渲染(enum→select/number→number/boolean→checkbox/text→textarea);edits-diff pattern(字段值=编辑优先否则已存值,避免 effect setState 级联渲染);保存收集有值字段为 content+usedFieldKeys,成功清编辑。

- vite.config.ts:esbuild.jsx='automatic'。修复 vitest 默认 classic jsx runtime(需 React in scope)与生产 plugin-react/tsconfig react-jsx 不一致——此前仅 renderHook 测试未暴露,PlanningEditor 首个 render 组件测试触发 'React is not defined'。

验证:vitest PlanningEditor 2/2、全量 64/64、eslint clean、tsc 0 error。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../editor/components/PlanningEditor.test.tsx |  41 ++++
 .../editor/components/PlanningEditor.tsx      | 176 ++++++++++++++++++
 muse-studio/vite.config.ts                    |   5 +
 3 files changed, 222 insertions(+)
 create mode 100644 muse-studio/src/features/editor/components/PlanningEditor.test.tsx
 create mode 100644 muse-studio/src/features/editor/components/PlanningEditor.tsx

diff --git a/muse-studio/src/features/editor/components/PlanningEditor.test.tsx b/muse-studio/src/features/editor/components/PlanningEditor.test.tsx
new file mode 100644
index 00000000..3911adf4
--- /dev/null
+++ b/muse-studio/src/features/editor/components/PlanningEditor.test.tsx
@@ -0,0 +1,41 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import PlanningEditor from './PlanningEditor';
+import { resetMockDb } from '@/api/mocks/handlers/content';
+import React from 'react';
+
+const renderWithClient = (ui: React.ReactElement) => {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 } } });
+  return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
+};
+
+describe('PlanningEditor 组件', () => {
+  beforeEach(() => resetMockDb());
+
+  it('应按 schema 字段类型渲染对应控件', async () => {
+    renderWithClient(<PlanningEditor workId="1" projectionKey="setting" />);
+    // enum→select、text→textarea（aria-label 为字段显示名）。
+    const select = await screen.findByLabelText('时代背景');
+    expect(select.tagName).toBe('SELECT');
+    expect(screen.getByLabelText('世界观概述').tagName).toBe('TEXTAREA');
+    // enum 选项来自 enumValues。
+    expect(screen.getByRole('option', { name: '古代' })).toBeTruthy();
+  });
+
+  it('填字段并保存后只回填有值字段（content/usedFieldKeys 仅含填写字段）', async () => {
+    const onSaved = vi.fn();
+    renderWithClient(<PlanningEditor workId="1" projectionKey="setting" onSaved={onSaved} />);
+    const select = (await screen.findByLabelText('时代背景')) as HTMLSelectElement;
+    fireEvent.change(select, { target: { value: '古代' } });
+    // 故意不填 world_overview。
+    fireEvent.click(screen.getByRole('button', { name: /保存规划/ }));
+
+    await waitFor(() => expect(onSaved).toHaveBeenCalled());
+    // 保存成功后 invalidate→重拉 projection→useEffect 回填：time_period='古代'、world_overview 仍空。
+    await waitFor(() =>
+      expect((screen.getByLabelText('时代背景') as HTMLSelectElement).value).toBe('古代'),
+    );
+    expect((screen.getByLabelText('世界观概述') as HTMLTextAreaElement).value).toBe('');
+  });
+});
diff --git a/muse-studio/src/features/editor/components/PlanningEditor.tsx b/muse-studio/src/features/editor/components/PlanningEditor.tsx
new file mode 100644
index 00000000..5d42747e
--- /dev/null
+++ b/muse-studio/src/features/editor/components/PlanningEditor.tsx
@@ -0,0 +1,176 @@
+import { useState } from 'react';
+import { useMetaProjection, useSavePlanningItem } from '../hooks/usePlanning';
+import type { MetaProjectionDetail } from '@/types/openapi';
+
+/** projection 字段类型（取自 MetaProjectionDetail.fields[]） */
+type ProjectionField = MetaProjectionDetail['fields'][number];
+
+interface PlanningEditorProps {
+  /** 作品 ID */
+  workId: string;
+  /** 规划项 / 投影 key（projectionKey == sectionKey） */
+  projectionKey: string;
+  /** 保存成功回调 */
+  onSaved?: () => void;
+}
+
+const FIELD_CLS =
+  'w-full px-3 py-2 rounded-lg border border-slate-200 bg-slate-50/50 text-sm text-slate-900 focus:bg-white focus:border-violet-600 focus:outline-none focus:ring-2 focus:ring-violet-500/20 transition-all disabled:bg-slate-100 disabled:text-slate-400';
+
+/** 按 fieldType 渲染对应输入控件；aria-label 用字段显示名，供测试 / 无障碍定位。 */
+function renderField(field: ProjectionField, value: unknown, onChange: (v: unknown) => void) {
+  const disabled = field.userEditable === false;
+  const label = field.fieldName ?? field.fieldKey;
+  switch (field.fieldType) {
+    case 'enum':
+      return (
+        <select
+          aria-label={label}
+          disabled={disabled}
+          value={(value as string) ?? ''}
+          onChange={(e) => onChange(e.target.value)}
+          className={FIELD_CLS}
+        >
+          <option value="">请选择</option>
+          {(field.enumValues ?? []).map((opt) => (
+            <option key={opt} value={opt}>
+              {opt}
+            </option>
+          ))}
+        </select>
+      );
+    case 'number':
+      return (
+        <input
+          type="number"
+          aria-label={label}
+          disabled={disabled}
+          value={(value as number | string) ?? ''}
+          onChange={(e) => onChange(e.target.value === '' ? undefined : Number(e.target.value))}
+          className={FIELD_CLS}
+        />
+      );
+    case 'boolean':
+      return (
+        <input
+          type="checkbox"
+          aria-label={label}
+          disabled={disabled}
+          checked={!!value}
+          onChange={(e) => onChange(e.target.checked)}
+          className="h-4 w-4 rounded border-slate-300 text-violet-600"
+        />
+      );
+    default:
+      // text / structured / reference / date 统一用文本域承载。
+      return (
+        <textarea
+          aria-label={label}
+          disabled={disabled}
+          value={(value as string) ?? ''}
+          onChange={(e) => onChange(e.target.value)}
+          rows={2}
+          className={`${FIELD_CLS} resize-none`}
+        />
+      );
+  }
+}
+
+/** 某字段是否“有值”（用于收集 usedFieldKeys：本次实际填了的 schema 字段）。 */
+function hasValue(v: unknown): boolean {
+  return v !== undefined && v !== null && v !== '';
+}
+
+/**
+ * 按 Meta Schema 投影字段编辑作品规划项的编辑器。
+ *
+ * <p>数据流：useMetaProjection 拉字段定义（含已存值回填）→ 按 fieldType 动态渲染表单 →
+ * 保存时 content 放 fieldKey→value、usedFieldKeys 收集本次有值的 schema 字段
+ * （后者写入后端字段用量快照，使 Meta Schema 用量投影 Planning 维度可字段级真实计数）。</p>
+ */
+export default function PlanningEditor({ workId, projectionKey, onSaved }: PlanningEditorProps) {
+  const { data: projection, isLoading } = useMetaProjection(workId, projectionKey);
+  const { mutate: save, isPending } = useSavePlanningItem(workId);
+  // 只记录用户本次的编辑（diff）。字段当前值 = 编辑优先，否则取 projection 回填的已存值；
+  // 如此无需在 effect 里同步 setState 初始化表单（避免级联渲染），并天然区分“已存”与“本次改动”。
+  const [edits, setEdits] = useState<Record<string, unknown>>({});
+
+  if (isLoading || !projection) {
+    return <div className="p-6 text-sm text-slate-400">加载规划字段…</div>;
+  }
+
+  // 字段当前值：用户编辑过取编辑值，否则取已存值。
+  const valueOf = (fieldKey: string, savedValue: unknown) =>
+    fieldKey in edits ? edits[fieldKey] : savedValue;
+
+  const handleChange = (fieldKey: string, value: unknown) => {
+    setEdits((prev) => ({ ...prev, [fieldKey]: value }));
+  };
+
+  const handleSave = () => {
+    // content = 各字段当前值（已存值叠加本次编辑），只收有值字段。
+    const content: Record<string, unknown> = {};
+    projection.fields.forEach((f) => {
+      const v = valueOf(f.fieldKey, f.value);
+      if (hasValue(v)) content[f.fieldKey] = v;
+    });
+    // usedFieldKeys = 本次有值的 schema 字段（字段级用量来源，未填的不计入）。
+    const usedFieldKeys = projection.fields
+      .filter((f) => hasValue(content[f.fieldKey]))
+      .map((f) => f.fieldKey);
+    save(
+      {
+        sectionKey: projectionKey,
+        reqVO: {
+          commandId: crypto.randomUUID(),
+          content,
+          // 乐观锁：以拉取时的 dataRevision 为期望版本（首次为 0 即新建）。
+          expectedRevision: projection.dataRevision ?? 0,
+          expectedSchemaVersion: projection.schemaVersion,
+          expectedProjectionVersion: projection.projectionVersion,
+          usedFieldKeys,
+          auditReason: '用户编辑规划',
+        },
+      },
+      // 保存成功后清空本地编辑：已落库，后续以重拉的 projection.value 为准。
+      {
+        onSuccess: () => {
+          setEdits({});
+          onSaved?.();
+        },
+      },
+    );
+  };
+
+  return (
+    <div className="p-6">
+      <h3 className="text-base font-bold text-slate-900 mb-4">{projection.projectionName ?? projectionKey}</h3>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          handleSave();
+        }}
+        className="space-y-4"
+      >
+        {projection.fields
+          .filter((f) => f.uiVisible)
+          .map((field) => (
+            <div key={field.fieldKey}>
+              <label className="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1.5">
+                {field.fieldName ?? field.fieldKey}
+                {field.required && <span className="text-rose-500"> *</span>}
+              </label>
+              {renderField(field, valueOf(field.fieldKey, field.value), (v) => handleChange(field.fieldKey, v))}
+            </div>
+          ))}
+        <button
+          type="submit"
+          disabled={isPending}
+          className="px-5 py-2.5 rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 text-white text-sm font-semibold shadow-md hover:from-violet-700 hover:to-indigo-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          {isPending ? '保存中…' : '保存规划'}
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/muse-studio/vite.config.ts b/muse-studio/vite.config.ts
index 3aae5c29..79678bbe 100644
--- a/muse-studio/vite.config.ts
+++ b/muse-studio/vite.config.ts
@@ -5,6 +5,11 @@ import path from 'path'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  // vitest 走 esbuild transform，默认 classic jsx runtime（需 React in scope）；
+  // 显式设 automatic，与生产 plugin-react / tsconfig react-jsx 一致，组件文件无需手动 import React。
+  esbuild: {
+    jsx: 'automatic',
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src'),