scaffold-engine 0.1.0

package/tools/lib/renderers/form-page-renderer.cjs

@@ -0,0 +1,553 @@
+function renderAdminFormPage(context, helpers) {
+  if (context.childTables.length > 0) {
+    return renderChildTableAdminFormPage(context, helpers);
+  }
+
+  const formFields = helpers.getFormFields(context);
+  const updateFieldCases = formFields.map((field) => helpers.renderFieldInput(context, field, 'form')).join('\n');
+  const headerIcon = helpers.getAdminHeaderIcon(context);
+
+  return `import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import { Save, ${headerIcon}, X } from "lucide-react";
+import { toast } from "sonner";
+import type { ${context.objectPascal}Vo } from "@scaffold/api/client";
+import { ObjectPage } from "@/components/admin-ui/object-page";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  createEmpty${context.objectPascal}Form,
+  create${context.objectPascal}Api,
+  getOptionLabel,
+  ${context.fields.filter((field) => field.type === 'enum').map((field) => `${field.name.toUpperCase()}_OPTIONS`).join(',\n  ')},
+  toCreate${context.objectPascal}Payload,
+  to${context.objectPascal}FormState,
+  toUpdate${context.objectPascal}Payload,
+  validate${context.objectPascal}Form,
+  type ${context.objectPascal}FormState,
+} from "./${context.objectKebab}-ui";
+
+type ${context.objectPascal}FieldKey = keyof ${context.objectPascal}FormState;
+
+function LoadingState() {
+  return (
+    <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
+      <p className="text-sm text-muted-foreground">正在加载${context.label}数据...</p>
+    </div>
+  );
+}
+
+interface ErrorStateProps {
+  message: string;
+  onBack: () => void;
+}
+
+function ErrorState({ message, onBack }: ErrorStateProps) {
+  return (
+    <div className="rounded-xl border border-destructive/20 bg-card p-6 shadow-sm">
+      <h2 className="text-base font-semibold text-destructive">${context.label}数据加载失败</h2>
+      <p className="mt-2 text-sm text-muted-foreground">{message}</p>
+      <Button type="button" variant="outline" className="mt-4" onClick={onBack}>
+        返回列表
+      </Button>
+    </div>
+  );
+}
+
+export function FormPage() {
+  const navigate = useNavigate();
+  const params = useParams<{ id: string }>();
+  const ${context.objectCamel}Api = useMemo(() => create${context.objectPascal}Api(), []);
+  const ${context.objectCamel}Id = params.id;
+  const mode = ${context.objectCamel}Id ? "edit" : "create";
+  const [form, setForm] = useState<${context.objectPascal}FormState>(() => createEmpty${context.objectPascal}Form());
+  const [loading, setLoading] = useState(Boolean(${context.objectCamel}Id));
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const load${context.objectPascal} = useCallback(async () => {
+    if (!${context.objectCamel}Id) {
+      setForm(createEmpty${context.objectPascal}Form());
+      setError(null);
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const ${context.objectCamel} = await ${context.objectCamel}Api.getById(${context.objectCamel}Id) as ${context.objectPascal}Vo;
+      setForm(to${context.objectPascal}FormState(${context.objectCamel}));
+    } catch (loadError) {
+      const message = loadError instanceof Error ? loadError.message : "加载${context.label}失败";
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, [${context.objectCamel}Api, ${context.objectCamel}Id]);
+
+  useEffect(() => {
+    void load${context.objectPascal}();
+  }, [load${context.objectPascal}]);
+
+  const updateField = <T extends ${context.objectPascal}FieldKey>(field: T, value: ${context.objectPascal}FormState[T]) => {
+    setForm((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = async () => {
+    const validationMessage = validate${context.objectPascal}Form(form);
+    if (validationMessage) {
+      toast.error(validationMessage);
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      const ${context.objectCamel} = ${context.objectCamel}Id
+        ? await ${context.objectCamel}Api.update(${context.objectCamel}Id, toUpdate${context.objectPascal}Payload(form))
+        : await ${context.objectCamel}Api.create(toCreate${context.objectPascal}Payload(form));
+
+      const saved${context.objectPascal} = ${context.objectCamel} as ${context.objectPascal}Vo;
+      toast.success(mode === "create" ? "${context.label}创建成功" : "${context.label}更新成功");
+      navigate("/${context.routePath}/" + saved${context.objectPascal}.id);
+    } catch (submitError) {
+      const message = submitError instanceof Error ? submitError.message : "保存${context.label}失败";
+      setError(message);
+      toast.error(message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return <LoadingState />;
+  }
+
+  if (error && ${context.objectCamel}Id && !form.${context.fields[0].name}) {
+    return <ErrorState message={error} onBack={() => navigate("/${context.routePath}")} />;
+  }
+
+  return (
+    <ObjectPage
+      mode={mode === "create" ? "create" : "edit"}
+      backPath={${context.objectCamel}Id ? "/${context.routePath}/" + ${context.objectCamel}Id : "/${context.routePath}"}
+      breadcrumb="${context.label}管理"
+      title={mode === "create" ? "新建${context.label}" : \`编辑${context.label} \${form.${context.fields[0].name} || ""}\`.trim()}
+      subtitle={mode === "create" ? "${helpers.getPatternFormSubtitle(context)}" : form.${context.fields[0].name} || "${context.label}编辑"}
+      headerIcon={<${headerIcon} className="h-6 w-6" />}
+      headerFields={[
+${helpers.indent(helpers.renderFormHeaderFields(context), 8)}
+      ]}
+      showSectionNav={false}
+      footerLeft={error ? <span className="text-destructive">{error}</span> : "保存后将直接进入${context.label}详情页"}
+      actions={[
+        {
+          key: "cancel",
+          label: "取消",
+          icon: <X className="h-4 w-4" />,
+          variant: "secondary",
+          onClick: () => navigate(${context.objectCamel}Id ? "/${context.routePath}/" + ${context.objectCamel}Id : "/${context.routePath}"),
+        },
+        {
+          key: "save",
+          label: mode === "create" ? "创建${context.label}" : "保存修改",
+          icon: <Save className="h-4 w-4" />,
+          variant: "primary",
+          loading: saving,
+          onClick: () => void handleSubmit(),
+        },
+      ]}
+      sections={[
+        {
+          id: "basicInfo",
+          title: "基本信息",
+          subtitle: "${helpers.getPatternFormSubtitle(context)}",
+          content: (
+            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+${helpers.indent(updateFieldCases, 14)}
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+}
+
+export default FormPage;
+`;
+}
+
+function renderChildTableAdminFormPage(context, helpers) {
+  const headerIcon = helpers.getAdminHeaderIcon(context);
+  const childKeys = context.childTables.map((child) => `"${child.variableName}"`).join(' | ');
+  const rootFieldKeyType = childKeys
+    ? `Exclude<keyof ${context.objectPascal}FormState, ${childKeys}>`
+    : `keyof ${context.objectPascal}FormState`;
+  const childImports = context.childTables.map((child) => `  createEmpty${child.className}Row,\n  type ${child.className}FormRow,`).join('\n');
+  const childColumns = context.childTables.map((child) => renderChildFormColumns(context, child, helpers)).join('\n\n');
+  const childHandlers = context.childTables.map((child) => renderChildFormHandlers(context, child)).join('\n\n');
+  const childSections = context.childTables.map((child) => renderChildFormSection(context, child)).join(',\n');
+
+  return `import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import { ${headerIcon}, Plus, Save, X } from "lucide-react";
+import { toast } from "sonner";
+import type { ${context.objectPascal}Vo } from "@scaffold/api/client";
+import { ObjectPage } from "@/components/admin-ui/object-page";
+import {
+  EditableTable,
+  TableDeleteButton,
+  TableInput,
+  TableSelect,
+  type EditableTableColumn,
+} from "@/components/admin-ui/editable-table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+${context.fields.filter((field) => field.type === 'enum').map((field) => `  ${field.name.toUpperCase()}_OPTIONS,`).join('\n')}${context.fields.some((field) => field.type === 'enum') ? '\n' : ''}${context.childTables.flatMap((child) => child.fields.filter((field) => field.type === 'enum').map((field) => `  ${helpers.getChildEnumOptionConst(child, field)},`)).join('\n')}${context.childTables.some((child) => child.fields.some((field) => field.type === 'enum')) ? '\n' : ''}${childImports ? `${childImports}\n` : ''}  create${context.objectPascal}Api,
+  createEmpty${context.objectPascal}Form,
+  formatDateTime,
+  getOptionLabel,
+  toCreate${context.objectPascal}Payload,
+  to${context.objectPascal}FormState,
+  toUpdate${context.objectPascal}Payload,
+  validate${context.objectPascal}Form,
+  type ${context.objectPascal}FormState,
+} from "./${context.objectKebab}-ui";
+
+type RootFieldKey = ${rootFieldKeyType};
+
+function LoadingState() {
+  return (
+    <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
+      <p className="text-sm text-muted-foreground">正在加载${context.label}数据...</p>
+    </div>
+  );
+}
+
+interface ErrorStateProps {
+  message: string;
+  onBack: () => void;
+}
+
+function ErrorState({ message, onBack }: ErrorStateProps) {
+  return (
+    <div className="rounded-xl border border-destructive/20 bg-card p-6 shadow-sm">
+      <h2 className="text-base font-semibold text-destructive">${context.label}数据加载失败</h2>
+      <p className="mt-2 text-sm text-muted-foreground">{message}</p>
+      <Button type="button" variant="outline" className="mt-4" onClick={onBack}>
+        返回列表
+      </Button>
+    </div>
+  );
+}
+
+export function FormPage() {
+  const navigate = useNavigate();
+  const params = useParams<{ id: string }>();
+  const ${context.objectCamel}Api = useMemo(() => create${context.objectPascal}Api(), []);
+  const ${context.objectCamel}Id = params.id;
+  const mode = ${context.objectCamel}Id ? "edit" : "create";
+  const [form, setForm] = useState<${context.objectPascal}FormState>(() => createEmpty${context.objectPascal}Form());
+  const [loading, setLoading] = useState(Boolean(${context.objectCamel}Id));
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const load${context.objectPascal} = useCallback(async () => {
+    if (!${context.objectCamel}Id) {
+      setForm(createEmpty${context.objectPascal}Form());
+      setError(null);
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const ${context.objectCamel} = await ${context.objectCamel}Api.getById(${context.objectCamel}Id) as ${context.objectPascal}Vo;
+      setForm(to${context.objectPascal}FormState(${context.objectCamel}));
+    } catch (loadError) {
+      const message = loadError instanceof Error ? loadError.message : "加载${context.label}失败";
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, [${context.objectCamel}Api, ${context.objectCamel}Id]);
+
+  useEffect(() => {
+    void load${context.objectPascal}();
+  }, [load${context.objectPascal}]);
+
+  const updateField = <T extends RootFieldKey>(field: T, value: ${context.objectPascal}FormState[T]) => {
+    setForm((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+${helpers.indent(childHandlers, 2)}
+
+${helpers.indent(childColumns, 2)}
+
+  const handleSubmit = async () => {
+    const validationMessage = validate${context.objectPascal}Form(form);
+    if (validationMessage) {
+      toast.error(validationMessage);
+      return;
+    }
+
+    setSaving(true);
+    setError(null);
+    try {
+      const ${context.objectCamel} = ${context.objectCamel}Id
+        ? await ${context.objectCamel}Api.update(${context.objectCamel}Id, toUpdate${context.objectPascal}Payload(form))
+        : await ${context.objectCamel}Api.create(toCreate${context.objectPascal}Payload(form));
+
+      const saved${context.objectPascal} = ${context.objectCamel} as ${context.objectPascal}Vo;
+      toast.success(mode === "create" ? "${context.label}创建成功" : "${context.label}更新成功");
+      navigate("/${context.routePath}/" + saved${context.objectPascal}.id);
+    } catch (submitError) {
+      const message = submitError instanceof Error ? submitError.message : "保存${context.label}失败";
+      setError(message);
+      toast.error(message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return <LoadingState />;
+  }
+
+  if (error && ${context.objectCamel}Id && !form.${context.fields[0].name} && !form.${helpers.getPrimaryTitleField(context)}) {
+    return <ErrorState message={error} onBack={() => navigate("/${context.routePath}")} />;
+  }
+
+  return (
+    <ObjectPage
+      mode={mode === "create" ? "create" : "edit"}
+      backPath={${context.objectCamel}Id ? "/${context.routePath}/" + ${context.objectCamel}Id : "/${context.routePath}"}
+      breadcrumb="${context.label}管理"
+      title={mode === "create" ? "新建${context.label}" : \`编辑${context.label} \${form.${helpers.getPrimaryTitleField(context)} || form.${context.fields[0].name} || ""}\`.trim()}
+      subtitle={mode === "create" ? "${helpers.getPatternFormSubtitle(context)}" : form.${context.fields[0].name} || "${context.label}编辑"}
+      headerIcon={<${headerIcon} className="h-6 w-6" />}
+      headerFields={[
+${helpers.indent(helpers.renderFormHeaderFields(context), 8)}
+      ]}
+      showSectionNav={false}
+      footerLeft={error ? <span className="text-destructive">{error}</span> : "保存后将直接进入${context.label}详情页"}
+      actions={[
+        {
+          key: "cancel",
+          label: "取消",
+          icon: <X className="h-4 w-4" />,
+          variant: "secondary",
+          onClick: () => navigate(${context.objectCamel}Id ? "/${context.routePath}/" + ${context.objectCamel}Id : "/${context.routePath}"),
+        },
+        {
+          key: "save",
+          label: mode === "create" ? "创建${context.label}" : "保存修改",
+          icon: <Save className="h-4 w-4" />,
+          variant: "primary",
+          loading: saving,
+          onClick: () => void handleSubmit(),
+        },
+      ]}
+      sections={[
+        {
+          id: "basicInfo",
+          title: "基本信息",
+          subtitle: "${helpers.getPatternFormSubtitle(context)}",
+          content: (
+            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+${helpers.indent(helpers.getFormFields(context).map((field) => helpers.renderFieldInput(context, field, 'form')).join('\n'), 14)}
+            </div>
+          ),
+        }${childSections ? `,\n${helpers.indent(childSections, 8)}` : ''}
+      ]}
+    />
+  );
+}
+
+export default FormPage;
+`;
+}
+
+function renderChildFormHandlers(context, child) {
+  const hasPrimaryField = child.fields.some((field) => field.name === 'isPrimary');
+  return `const add${child.className} = () => {
+    setForm((prev) => ({
+      ...prev,
+      ${child.variableName}: [
+        ...prev.${child.variableName},
+        createEmpty${child.className}Row({${hasPrimaryField ? ` isPrimary: prev.${child.variableName}.length === 0 ` : ''}})
+      ],
+    }));
+  };
+
+  const update${child.className} = <T extends keyof ${child.className}FormRow>(
+    rowId: string,
+    field: T,
+    value: ${child.className}FormRow[T]
+  ) => {
+    setForm((prev) => {
+      const nextRows = prev.${child.variableName}.map((row) => {
+        if (row.rowId !== rowId) {${hasPrimaryField ? `
+          if (field === "isPrimary" && value === true) {
+            return {
+              ...row,
+              isPrimary: false,
+            };
+          }` : ''}
+          return row;
+        }
+
+        return {
+          ...row,
+          [field]: value,
+        };
+      });
+
+      return {
+        ...prev,
+        ${child.variableName}: nextRows,
+      };
+    });
+  };
+
+  const remove${child.className} = (rowId: string) => {
+    setForm((prev) => {
+      const current = prev.${child.variableName};
+      const removed = current.find((item) => item.rowId === rowId);
+      const nextRows = current.filter((item) => item.rowId !== rowId);
+${hasPrimaryField ? `
+      if (removed?.isPrimary && nextRows.length > 0 && !nextRows.some((item) => item.isPrimary)) {
+        nextRows[0] = {
+          ...nextRows[0],
+          isPrimary: true,
+        };
+      }` : ''}
+
+      return {
+        ...prev,
+        ${child.variableName}: nextRows,
+      };
+    });
+  };`;
+}
+
+function renderChildFormColumns(context, child, helpers) {
+  return `const ${child.variableName}Columns: EditableTableColumn<${child.className}FormRow>[] = [
+${helpers.indent(child.fields.map((field) => renderChildFormColumn(child, field, helpers)).join(',\n'), 2)},
+  {
+    key: "actions",
+    title: "",
+    width: 56,
+    render: (record) => (
+      <TableDeleteButton onClick={() => remove${child.className}(record.rowId)} />
+    ),
+  },
+];`;
+}
+
+function renderChildFormColumn(child, field, helpers) {
+  if (field.tsType === 'boolean') {
+    return `{
+  key: "${field.name}",
+  title: "${field.label || field.name}",
+  width: 100,
+  align: "center",
+  render: (record) => (
+    <div className="flex justify-center">
+      <Checkbox
+        checked={Boolean(record.${field.name})}
+        onCheckedChange={(checked) => update${child.className}(record.rowId, "${field.name}", Boolean(checked))}
+      />
+    </div>
+  ),
+}`;
+  }
+
+  if (field.type === 'enum') {
+    return `{
+  key: "${field.name}",
+  title: "${field.label || field.name}",
+  width: 180,
+  ${field.required ? 'required: true,\n  ' : ''}render: (record) => (
+    <TableSelect
+      value={record.${field.name} ?? ""}
+      options={${helpers.getChildEnumOptionConst(child, field)}}
+      placeholder="请选择${field.label || field.name}"
+      onChange={(value) => update${child.className}(record.rowId, "${field.name}", value)}
+    />
+  ),
+}`;
+  }
+
+  return `{
+  key: "${field.name}",
+  title: "${field.label || field.name}",
+  width: 180,
+  ${field.required ? 'required: true,\n  ' : ''}render: (record) => (
+    <TableInput
+      value={record.${field.name} ?? ""}
+      placeholder="请输入${field.label || field.name}"
+      onChange={(value) => update${child.className}(record.rowId, "${field.name}", value)}
+    />
+  ),
+}`;
+}
+
+function renderChildFormSection(context, child) {
+  const group = ((context.ui.form && context.ui.form.groups) || []).find((item) => item.childTable === child.name);
+  return `{
+  id: "${child.variableName}",
+  title: "${group?.title || child.label || child.name}",
+  subtitle: "维护${child.label || child.name}子表",
+  content: (
+    <EditableTable<${child.className}FormRow>
+      embedded={true}
+      rowKey="rowId"
+      dataSource={form.${child.variableName}}
+      columns={${child.variableName}Columns}
+      minWidth={760}
+      emptyText="暂无${child.label || child.name}，请点击右上角新增"
+      header={{
+        title: "${group?.title || child.label || child.name}列表",
+        subtitle: "维护有效${child.label || child.name}时，会随${context.label}一起保存",
+        actions: (
+          <Button type="button" variant="outline" size="sm" onClick={add${child.className}}>
+            <Plus className="size-4" />
+            新增${child.label || child.name}
+          </Button>
+        ),
+      }}
+    />
+  ),
+}`;
+}
+
+module.exports = {
+  renderAdminFormPage,
+};