scaffold-engine 0.1.0

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

@@ -0,0 +1,327 @@
+function renderAdminDetailPage(context, helpers) {
+  if (context.childTables.length > 0) {
+    return renderChildTableAdminDetailPage(context, helpers);
+  }
+
+  const headerIcon = helpers.getAdminHeaderIcon(context);
+  return `import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import { Pencil, ${headerIcon} } from "lucide-react";
+import type { ${context.objectPascal}Vo } from "@scaffold/api/client";
+import { ObjectPage } from "@/components/admin-ui/object-page";
+import { Button } from "@/components/ui/button";
+import {
+  create${context.objectPascal}Api,
+  formatDateTime,
+  getOptionLabel,
+  ${context.fields.some((field) => field.name === 'status') ? `get${context.objectPascal}StatusMeta,\n  ` : ''}${context.fields.filter((field) => field.type === 'enum').map((field) => `${field.name.toUpperCase()}_OPTIONS`).join(',\n  ')}
+} from "./${context.objectKebab}-ui";
+
+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 DetailPage() {
+  const navigate = useNavigate();
+  const params = useParams<{ id: string }>();
+  const ${context.objectCamel}Api = useMemo(() => create${context.objectPascal}Api(), []);
+  const ${context.objectCamel}Id = params.id;
+  const [${context.objectCamel}, set${context.objectPascal}] = useState<${context.objectPascal}Vo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load${context.objectPascal} = useCallback(async () => {
+    if (!${context.objectCamel}Id) {
+      setError("缺少${context.label} ID");
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await ${context.objectCamel}Api.getById(${context.objectCamel}Id) as ${context.objectPascal}Vo;
+      set${context.objectPascal}(response);
+    } 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}]);
+
+  if (loading) {
+    return <LoadingState />;
+  }
+
+  if (error || !${context.objectCamel}) {
+    return <ErrorState message={error ?? "${context.label}不存在"} onBack={() => navigate("/${context.routePath}")} />;
+  }
+
+${context.fields.some((field) => field.name === 'status') ? `  const statusMeta = get${context.objectPascal}StatusMeta(${context.objectCamel}.status);\n` : ''}  return (
+    <ObjectPage
+      mode="display"
+      backPath="/${context.routePath}"
+      breadcrumb="${context.label}管理"
+      title={${context.objectCamel}.${helpers.getPrimaryTitleField(context)} || "${context.label}详情"}
+      subtitle={${context.objectCamel}.${context.fields[0].name}}
+      ${context.fields.some((field) => field.name === 'status') ? 'status={{ label: statusMeta.label, color: statusMeta.objectPageColor }}' : ''}
+      headerIcon={<${headerIcon} className="h-6 w-6" />}
+      headerFields={[
+${helpers.indent(helpers.renderDetailHeaderFields(context), 8)}
+      ]}
+      showSectionNav={true}
+      actions={[
+        {
+          key: "edit",
+          label: "编辑",
+          icon: <Pencil className="h-4 w-4" />,
+          variant: "secondary",
+          onClick: () => navigate("/${context.routePath}/" + ${context.objectCamel}.id + "/edit"),
+        },
+      ]}
+      sections={[
+        {
+          id: "basicInfo",
+          title: "基本信息",
+          subtitle: "${helpers.getPatternDetailSubtitle(context)}",
+          content: (
+            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+${helpers.indent(helpers.renderDetailFields(context), 14)}
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+}
+
+export default DetailPage;
+`;
+}
+
+function renderChildTableAdminDetailPage(context, helpers) {
+  const headerIcon = helpers.getAdminHeaderIcon(context);
+  const childSections = context.childTables.map((child) => renderChildDetailSection(context, child)).join(',\n');
+  const childColumns = context.childTables.map((child) => renderChildDetailColumns(context, child, helpers)).join('\n\n');
+
+  return `import { useCallback, useEffect, useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import { Pencil, ${headerIcon} } from "lucide-react";
+import type { ${context.objectPascal}Vo } from "@scaffold/api/client";
+import { ObjectPage } from "@/components/admin-ui/object-page";
+import {
+  EditableTable,
+  TableText,
+  type EditableTableColumn,
+} from "@/components/admin-ui/editable-table";
+import { Button } from "@/components/ui/button";
+import {
+  create${context.objectPascal}Api,
+  formatDateTime,
+  getOptionLabel,
+  ${context.fields.some((field) => field.name === 'status') ? `get${context.objectPascal}StatusMeta,\n  ` : ''}${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  ')}
+} from "./${context.objectKebab}-ui";
+
+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 DetailPage() {
+  const navigate = useNavigate();
+  const params = useParams<{ id: string }>();
+  const ${context.objectCamel}Api = useMemo(() => create${context.objectPascal}Api(), []);
+  const ${context.objectCamel}Id = params.id;
+  const [${context.objectCamel}, set${context.objectPascal}] = useState<${context.objectPascal}Vo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const load${context.objectPascal} = useCallback(async () => {
+    if (!${context.objectCamel}Id) {
+      setError("缺少${context.label} ID");
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await ${context.objectCamel}Api.getById(${context.objectCamel}Id) as ${context.objectPascal}Vo;
+      set${context.objectPascal}(response);
+    } 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}]);
+
+  if (loading) {
+    return <LoadingState />;
+  }
+
+  if (error || !${context.objectCamel}) {
+    return <ErrorState message={error ?? "${context.label}不存在"} onBack={() => navigate("/${context.routePath}")} />;
+  }
+
+${context.fields.some((field) => field.name === 'status') ? `  const statusMeta = get${context.objectPascal}StatusMeta(${context.objectCamel}.status);\n` : ''}${helpers.indent(childColumns, 2)}
+
+  return (
+    <ObjectPage
+      mode="display"
+      backPath="/${context.routePath}"
+      breadcrumb="${context.label}管理"
+      title={${context.objectCamel}.${helpers.getPrimaryTitleField(context)} || "${context.label}详情"}
+      subtitle={${context.objectCamel}.${context.fields[0].name}}
+      ${context.fields.some((field) => field.name === 'status') ? 'status={{ label: statusMeta.label, color: statusMeta.objectPageColor }}' : ''}
+      headerIcon={<${headerIcon} className="h-6 w-6" />}
+      headerFields={[
+${helpers.indent(helpers.renderDetailHeaderFields(context), 8)}
+      ]}
+      showSectionNav={true}
+      actions={[
+        {
+          key: "edit",
+          label: "编辑",
+          icon: <Pencil className="h-4 w-4" />,
+          variant: "secondary",
+          onClick: () => navigate("/${context.routePath}/" + ${context.objectCamel}.id + "/edit"),
+        },
+      ]}
+      sections={[
+        {
+          id: "basicInfo",
+          title: "基本信息",
+          subtitle: "${helpers.getPatternDetailSubtitle(context)}",
+          content: (
+            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+${helpers.indent(helpers.renderDetailFields(context), 14)}
+            </div>
+          ),
+        }${childSections ? `,\n${helpers.indent(childSections, 8)}` : ''}
+      ]}
+    />
+  );
+}
+
+export default DetailPage;
+`;
+}
+
+function renderChildDetailColumns(context, child, helpers) {
+  return `const ${child.variableName}Columns: EditableTableColumn<NonNullable<${context.objectPascal}Vo["${child.variableName}"]>[number]>[] = [
+${helpers.indent(child.fields.map((field) => renderChildDetailColumn(child, field, helpers)).join(',\n'), 2)}
+];`;
+}
+
+function renderChildDetailColumn(child, field, helpers) {
+  if (field.tsType === 'boolean') {
+    return `{
+  key: "${field.name}",
+  title: "${field.label || field.name}",
+  width: 100,
+  align: "center",
+  render: (record) => (
+    <TableText variant={record.${field.name} ? "primary" : "muted"}>
+      {record.${field.name} ? "是" : "否"}
+    </TableText>
+  ),
+}`;
+  }
+  if (field.type === 'enum') {
+    return `{
+  key: "${field.name}",
+  title: "${field.label || field.name}",
+  width: 180,
+  render: (record) => <TableText>{getOptionLabel(${helpers.getChildEnumOptionConst(child, field)}, record.${field.name})}</TableText>,
+}`;
+  }
+  if (field.tsType === 'number') {
+    return `{
+  key: "${field.name}",
+  title: "${field.label || field.name}",
+  width: 180,
+  render: (record) => <TableText>{record.${field.name} === undefined || record.${field.name} === null ? "-" : String(record.${field.name})}</TableText>,
+}`;
+  }
+  return `{
+  key: "${field.name}",
+  title: "${field.label || field.name}",
+  width: 180,
+  render: (record) => <TableText>{record.${field.name} || "-"}</TableText>,
+}`;
+}
+
+function renderChildDetailSection(context, child) {
+  const sectionId = (context.ui.detail && context.ui.detail.sections || []).includes(child.name) ? child.name : child.variableName;
+  return `{
+  id: "${sectionId}",
+  title: "${child.label || child.name}",
+  subtitle: "${context.label}${child.label || child.name}子表",
+  content: (
+    <EditableTable
+      embedded={true}
+      showIndex={false}
+      rowKey={(record) => JSON.stringify(record)}
+      dataSource={${context.objectCamel}.${child.variableName} ?? []}
+      columns={${child.variableName}Columns}
+      minWidth={700}
+      emptyText="暂无${child.label || child.name}"
+    />
+  ),
+}`;
+}
+
+module.exports = {
+  renderAdminDetailPage,
+};