best-lowcode-runtime 0.2.7 → 0.2.8

package/dist/index.js

@@ -34,7 +34,7 @@ function createBestCrudAdapter(options = {}) {
 
 // src/lowcode/BestCrudPage.tsx
 import { Button as Button4, Modal as Modal2, message } from "antd";
-import dayjs5 from "dayjs";
+import dayjs6 from "dayjs";
 import { useCallback as useCallback2, useEffect as useEffect3, useLayoutEffect, useMemo as useMemo5, useRef as useRef3, useState as useState4 } from "react";
 
 // src/runtime/BestProvider.tsx
@@ -169,15 +169,66 @@ function BestBatchInput({
 }
 
 // src/ui/BestDetail.tsx
-import { Descriptions } from "antd";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function BestDetail({ fields, record = {}, column = 2 }) {
-  return /* @__PURE__ */ jsx3(Descriptions, { bordered: true, column, size: "small", children: fields.map((field) => {
+import { Descriptions, Empty, Table, Typography } from "antd";
+import dayjs2 from "dayjs";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function BestDetail({ fields, record = {}, column = 2, sections, sectionColumns, sectionGap = 20 }) {
+  const content = sections?.length ? /* @__PURE__ */ jsx3("div", { style: { display: "grid", gridTemplateColumns: `repeat(${sectionColumns ?? 1}, minmax(0, 1fr))`, gap: sectionGap }, children: sections.map((section) => {
+    const card = section.variant === "card";
+    return /* @__PURE__ */ jsxs("section", { style: { gridColumn: section.span ? `span ${section.span}` : void 0, marginBottom: 0, border: card ? "1px solid #f0f0f0" : void 0, borderRadius: card ? 6 : void 0, overflow: card ? "hidden" : void 0, background: card ? "#fff" : void 0 }, children: [
+      section.title ? /* @__PURE__ */ jsx3("div", { style: { padding: card ? "8px 12px" : void 0, background: card ? "#fafafa" : void 0, borderBottom: card ? "1px solid #f0f0f0" : void 0 }, children: /* @__PURE__ */ jsx3(Typography.Title, { level: 5, style: { margin: 0 }, children: section.title }) }) : null,
+      /* @__PURE__ */ jsxs("div", { style: { padding: card ? 12 : void 0 }, children: [
+        section.description ? /* @__PURE__ */ jsx3(Typography.Paragraph, { type: "secondary", children: section.description }) : null,
+        section.content,
+        section.fields ? /* @__PURE__ */ jsx3(FieldDescriptions, { fields: section.fields, record, column: section.columns ?? column }) : null,
+        section.table ? /* @__PURE__ */ jsx3(DetailTable, { table: section.table }) : null
+      ] })
+    ] }, section.key);
+  }) }) : /* @__PURE__ */ jsx3(FieldDescriptions, { fields, record, column });
+  return content;
+}
+function FieldDescriptions({ fields, record, column }) {
+  const visibleFields = fields.filter((field) => field.visible !== false);
+  return /* @__PURE__ */ jsx3(Descriptions, { bordered: true, column, size: "small", children: visibleFields.map((field) => {
     const value = getPathValue(record, field.field);
-    const display = field.render ? field.render(value, record) : field.valueEnum?.[String(value)] ?? (value == null || value === "" ? "-" : String(value));
+    const display = field.render ? field.render(value, record) : field.valueEnum?.[String(value)] ?? formatValue(value, field.format, field.emptyText);
     return /* @__PURE__ */ jsx3(Descriptions.Item, { label: field.label, span: field.span, children: display }, field.field);
   }) });
 }
+function DetailTable({ table }) {
+  if (!table.data.length) return /* @__PURE__ */ jsx3(Empty, { image: Empty.PRESENTED_IMAGE_SIMPLE, description: "\u6682\u65E0\u6570\u636E" });
+  return /* @__PURE__ */ jsx3(
+    Table,
+    {
+      size: "small",
+      bordered: true,
+      pagination: false,
+      rowKey: table.rowKey,
+      dataSource: table.data,
+      scroll: table.scrollX ? { x: table.scrollX } : void 0,
+      columns: table.columns.map((column) => ({ ...column, dataIndex: column.dataIndex ?? column.key }))
+    }
+  );
+}
+function formatValue(value, format, emptyText = "-") {
+  if (value == null || value === "") return emptyText;
+  const type = typeof format === "object" ? format.type : format;
+  if (!type || type === "text") return String(value);
+  if (type === "number") {
+    const number = Number(value);
+    if (!Number.isFinite(number)) return String(value);
+    const precision = typeof format === "object" ? format.precision : void 0;
+    return number.toLocaleString("zh-CN", precision === void 0 ? void 0 : { minimumFractionDigits: precision, maximumFractionDigits: precision });
+  }
+  if (type === "money") {
+    const number = Number(value);
+    return Number.isFinite(number) ? number.toLocaleString("zh-CN", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : String(value);
+  }
+  if (type === "boolean") return value ? "\u662F" : "\u5426";
+  if (type === "json") return typeof value === "string" ? value : JSON.stringify(value);
+  const date = dayjs2(value);
+  return date.isValid() ? date.format(type === "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss") : String(value);
+}
 function getPathValue(values, path) {
   if (Object.hasOwn(values, path)) return values[path];
   return path.split(".").reduce((current, part) => {
@@ -189,8 +240,8 @@ function getPathValue(values, path) {
 }
 
 // src/ui/BestFilePreview.tsx
-import { Button, Image, List, Typography } from "antd";
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Button, Image, List, Typography as Typography2 } from "antd";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function isImage(file) {
   return file.mimeType?.startsWith("image/") || /\.(avif|bmp|gif|jpe?g|png|svg|webp)(?:$|[?#])/i.test(file.url);
 }
@@ -199,7 +250,7 @@ function BestFilePreview({ files, onDownload }) {
     List,
     {
       dataSource: files,
-      renderItem: (file) => /* @__PURE__ */ jsxs(
+      renderItem: (file) => /* @__PURE__ */ jsxs2(
         List.Item,
         {
           actions: [
@@ -207,7 +258,7 @@ function BestFilePreview({ files, onDownload }) {
           ],
           children: [
             isImage(file) ? /* @__PURE__ */ jsx4(Image, { alt: file.name ?? "\u6587\u4EF6\u9884\u89C8", height: 48, preview: true, src: file.url, width: 48 }) : null,
-            /* @__PURE__ */ jsx4(Typography.Text, { ellipsis: true, style: { marginInlineStart: isImage(file) ? 12 : 0 }, children: file.name ?? file.url })
+            /* @__PURE__ */ jsx4(Typography2.Text, { ellipsis: true, style: { marginInlineStart: isImage(file) ? 12 : 0 }, children: file.name ?? file.url })
           ]
         }
       )
@@ -217,9 +268,9 @@ function BestFilePreview({ files, onDownload }) {
 
 // src/ui/BestForm.tsx
 import { Button as Button2, DatePicker, Form, Input as Input2, InputNumber, Select, Space } from "antd";
-import dayjs2 from "dayjs";
+import dayjs3 from "dayjs";
 import { useEffect, useMemo as useMemo3, useRef, useState as useState3 } from "react";
-import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function toNamePath(path) {
   return path === void 0 ? [] : Array.isArray(path) ? path : [path];
 }
@@ -230,7 +281,7 @@ function isRecord(value) {
   if (!value || typeof value !== "object" || Array.isArray(value) || value instanceof Date) {
     return false;
   }
-  if (dayjs2.isDayjs(value)) return false;
+  if (dayjs3.isDayjs(value)) return false;
   const prototype = Object.getPrototypeOf(value);
   return prototype === Object.prototype || prototype === null;
 }
@@ -252,17 +303,17 @@ function resolveFieldDisabled(field, values, mode) {
   return field.disabled || Boolean(field.disabledWhen && evaluateCondition(field.disabledWhen, values, mode));
 }
 function toDayjsValue(value) {
-  if (dayjs2.isDayjs(value)) return value;
-  if (value instanceof Date) return dayjs2(value);
+  if (dayjs3.isDayjs(value)) return value;
+  if (value instanceof Date) return dayjs3(value);
   if (typeof value === "number") {
     const normalized = Math.abs(value) >= 1e12 ? value : value * 1e3;
-    const parsed = dayjs2(normalized);
+    const parsed = dayjs3(normalized);
     return parsed.isValid() ? parsed : null;
   }
   if (typeof value === "string") {
     const trimmed = value.trim();
     if (!trimmed) return null;
-    const parsed = dayjs2(trimmed);
+    const parsed = dayjs3(trimmed);
     return parsed.isValid() ? parsed : null;
   }
   return null;
@@ -356,7 +407,7 @@ function FormControl({
           value: toDatePickerValue(value),
           onChange: (date, dateString) => onChange?.(serializeDatePickerValue(date, dateString)),
           disabled: field.disabled,
-          disabledDate: (current) => field.maxDate === "today" && current.isAfter(dayjs2(), "day"),
+          disabledDate: (current) => field.maxDate === "today" && current.isAfter(dayjs3(), "day"),
           style: { width: "100%" }
         }
       );
@@ -368,7 +419,7 @@ function FormControl({
           value: toDateRangePickerValue(value),
           onChange: (dates, dateStrings) => onChange?.(serializeDateRangePickerValue(dates, dateStrings)),
           disabled: field.disabled,
-          disabledDate: (current) => field.maxDate === "today" && current.isAfter(dayjs2(), "day"),
+          disabledDate: (current) => field.maxDate === "today" && current.isAfter(dayjs3(), "day"),
           style: { width: "100%" }
         }
       );
@@ -427,7 +478,7 @@ function RepeatableField({
   values
 }) {
   const listName = namePath ?? field.field;
-  return /* @__PURE__ */ jsx5(Form.List, { name: listName, children: (items, { add, remove }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+  return /* @__PURE__ */ jsx5(Form.List, { name: listName, children: (items, { add, remove }) => /* @__PURE__ */ jsxs3(Fragment, { children: [
     items.map((item) => /* @__PURE__ */ jsx5(
       RepeatableFieldRow,
       {
@@ -477,7 +528,7 @@ function RepeatableFieldRow({
       }
     });
   }, [field.itemFields, form, itemPath, mode, scopeValues, values]);
-  return /* @__PURE__ */ jsxs2(Space, { align: "start", children: [
+  return /* @__PURE__ */ jsxs3(Space, { align: "start", children: [
     field.itemFields?.map((itemField) => {
       if (!isFieldVisible(itemField, scopeValues, mode)) return null;
       const nextPath = appendNamePath(itemPath, itemField.field);
@@ -743,9 +794,9 @@ function BestFormBody({
   onCancel
 }) {
   const [form] = Form.useForm();
-  return /* @__PURE__ */ jsxs2(Form, { form, initialValues, layout: "vertical", onFinish: onSubmit, children: [
+  return /* @__PURE__ */ jsxs3(Form, { form, initialValues, layout: "vertical", onFinish: onSubmit, children: [
     /* @__PURE__ */ jsx5(FormFields, { fields, form, initialValues, mode }),
-    /* @__PURE__ */ jsxs2(Space, { children: [
+    /* @__PURE__ */ jsxs3(Space, { children: [
       /* @__PURE__ */ jsx5(Button2, { htmlType: "submit", loading, type: "primary", children: submitText }),
       onCancel ? /* @__PURE__ */ jsx5(Button2, { onClick: onCancel, children: "\u53D6\u6D88" }) : null,
       extra
@@ -807,7 +858,7 @@ function evaluateCondition(condition, values, mode) {
 }
 
 // src/ui/BestLightTable.tsx
-import { Table } from "antd";
+import { Table as Table2 } from "antd";
 import { jsx as jsx6 } from "react/jsx-runtime";
 function BestLightTable({
   columns,
@@ -822,7 +873,7 @@ function BestLightTable({
     render: column.render
   }));
   return /* @__PURE__ */ jsx6(
-    Table,
+    Table2,
     {
       columns: tableColumns,
       dataSource: data,
@@ -836,18 +887,18 @@ function BestLightTable({
 // src/ui/BestOverlay.tsx
 import { Drawer, Modal } from "antd";
 import { jsx as jsx7 } from "react/jsx-runtime";
-function BestDrawer({ children, open, title, onClose }) {
-  return /* @__PURE__ */ jsx7(Drawer, { destroyOnHidden: true, open, title, width: 640, onClose, children });
+function BestDrawer({ children, open, title, onClose, width, footer }) {
+  return /* @__PURE__ */ jsx7(Drawer, { destroyOnHidden: true, open, title, width: width ?? 640, footer, onClose, children });
 }
-function BestModal({ children, open, title, onClose }) {
-  return /* @__PURE__ */ jsx7(Modal, { destroyOnHidden: true, footer: null, open, title, onCancel: onClose, children });
+function BestModal({ children, open, title, onClose, width, footer }) {
+  return /* @__PURE__ */ jsx7(Modal, { destroyOnHidden: true, footer: footer ?? null, open, title, width, onCancel: onClose, children });
 }
 
 // src/ui/BestSearch.tsx
 import { Button as Button3, Col, DatePicker as DatePicker2, Form as Form2, Input as Input3, InputNumber as InputNumber2, Row, Select as Select2 } from "antd";
-import dayjs3 from "dayjs";
+import dayjs4 from "dayjs";
 import { useEffect as useEffect2, useMemo as useMemo4, useRef as useRef2 } from "react";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function searchFormSignature(fields, initialValues) {
   return JSON.stringify([
     fields.map((field) => ({
@@ -912,7 +963,7 @@ function FieldControl({ field, value, onChange, ...controlProps }) {
           value: toDatePickerValue(value),
           onChange: (date, dateString) => onChange?.(serializeDatePickerValue(date, dateString)),
           disabled: field.disabled,
-          disabledDate: (current) => field.maxDate === "today" && current.isAfter(dayjs3(), "day"),
+          disabledDate: (current) => field.maxDate === "today" && current.isAfter(dayjs4(), "day"),
           placeholder: field.placeholder,
           style: { width: "100%" }
         }
@@ -925,7 +976,7 @@ function FieldControl({ field, value, onChange, ...controlProps }) {
           value: toDateRangePickerValue(value),
           onChange: (dates, dateStrings) => onChange?.(serializeDateRangePickerValue(dates, dateStrings)),
           disabled: field.disabled,
-          disabledDate: (current) => field.maxDate === "today" && current.isAfter(dayjs3(), "day"),
+          disabledDate: (current) => field.maxDate === "today" && current.isAfter(dayjs4(), "day"),
           style: { width: "100%" }
         }
       );
@@ -1027,9 +1078,9 @@ function BestSearchBody({
       onFinish: (values) => onSearch(values),
       onValuesChange: (_, values) => onChange?.(values),
       className: "best-lowcode-search",
-      children: /* @__PURE__ */ jsxs3(Row, { gutter: 16, align: "bottom", children: [
+      children: /* @__PURE__ */ jsxs4(Row, { gutter: 16, align: "bottom", children: [
         fields.filter((field) => !field.hidden).map((field) => /* @__PURE__ */ jsx8(Col, { span: field.span ?? 6, children: /* @__PURE__ */ jsx8(Form2.Item, { label: field.label, name: field.field, rules: toAntRules(field.rules), children: /* @__PURE__ */ jsx8(FieldControl, { field }) }) }, field.field)),
-        /* @__PURE__ */ jsx8(Col, { children: /* @__PURE__ */ jsxs3(Form2.Item, { children: [
+        /* @__PURE__ */ jsx8(Col, { children: /* @__PURE__ */ jsxs4(Form2.Item, { children: [
           /* @__PURE__ */ jsx8(Button3, { htmlType: "submit", loading, type: "primary", children: submitText }),
           /* @__PURE__ */ jsx8(
             Button3,
@@ -1052,13 +1103,13 @@ function BestSearchBody({
 }
 
 // src/ui/BestStates.tsx
-import { Empty, Result, Spin } from "antd";
+import { Empty as Empty2, Result, Spin } from "antd";
 import { jsx as jsx9 } from "react/jsx-runtime";
 function BestLoading({ description = "\u52A0\u8F7D\u4E2D" }) {
   return /* @__PURE__ */ jsx9("div", { style: { display: "grid", minHeight: 160, placeItems: "center" }, children: /* @__PURE__ */ jsx9(Spin, { tip: description }) });
 }
 function BestEmpty({ description = "\u6682\u65E0\u6570\u636E" }) {
-  return /* @__PURE__ */ jsx9(Empty, { description });
+  return /* @__PURE__ */ jsx9(Empty2, { description });
 }
 function BestError({ description = "\u52A0\u8F7D\u5931\u8D25" }) {
   return /* @__PURE__ */ jsx9(Result, { status: "error", title: description });
@@ -1109,9 +1160,9 @@ function BestTable({
 }
 
 // src/lowcode/runtime.ts
-import dayjs4 from "dayjs";
+import dayjs5 from "dayjs";
 import utc from "dayjs/plugin/utc.js";
-dayjs4.extend(utc);
+dayjs5.extend(utc);
 function toBestListQuery(params, sort) {
   const { current, pageSize, ...filters } = params;
   const normalizedSort = Object.fromEntries(
@@ -1144,7 +1195,7 @@ function formatCrudValue(value, format) {
     const numericValue = typeof value === "number" ? value : Number(value.trim());
     timestamp = Number.isFinite(numericValue) && numericValue !== 0 ? Math.abs(numericValue) >= 1e12 ? numericValue : numericValue * 1e3 : value;
   }
-  const date = dayjs4.utc(timestamp);
+  const date = dayjs5.utc(timestamp);
   if (!date.isValid()) return String(value);
   return date.format(format === "date" ? "YYYY-MM-DD" : "YYYY-MM-DD HH:mm:ss");
 }
@@ -1219,9 +1270,11 @@ var builtInEffects = /* @__PURE__ */ new Set([
   "openEdit",
   "remove",
   "runAction",
-  "slot"
+  "slot",
+  "closeDetail"
 ]);
 var columnFormats = /* @__PURE__ */ new Set(["date", "datetime", "money", "text"]);
+var detailFormats = /* @__PURE__ */ new Set(["text", "number", "money", "date", "datetime", "boolean", "json"]);
 function push(diagnostics, path, code, message2) {
   diagnostics.push({ path, code, message: message2 });
 }
@@ -1268,6 +1321,14 @@ function validateCondition(condition, path, diagnostics) {
   }
   push(diagnostics, path, "condition.operator", `\u4E0D\u652F\u6301\u7684\u6761\u4EF6\uFF1A${condition.operator}`);
 }
+function validateDetailField(field, path, registry, diagnostics) {
+  if (field.visibleWhen) validateCondition(field.visibleWhen, `${path}/visibleWhen`, diagnostics);
+  if (field.slot && registry && !registry.slots[field.slot])
+    push(diagnostics, `${path}/slot`, "registry.slot", `\u672A\u6CE8\u518C\u63D2\u69FD\uFF1A${field.slot}`);
+  const format = typeof field.format === "object" ? field.format.type : field.format;
+  if (format && !detailFormats.has(format))
+    push(diagnostics, `${path}/format`, "detail.format", `\u4E0D\u652F\u6301\u7684\u8BE6\u60C5\u683C\u5F0F\uFF1A${format}`);
+}
 function validateFields(fields, path, registry, diagnostics) {
   const seen = /* @__PURE__ */ new Set();
   fields?.forEach((field, index) => {
@@ -1421,17 +1482,26 @@ function validateCrudPageSchema(schema, registry) {
     }
   });
   if (schema.detail !== void 0) {
-    if (!schema.detail || typeof schema.detail !== "object" || !Array.isArray(schema.detail.fields)) {
-      push(diagnostics, "/detail", "detail.type", "detail \u5FC5\u987B\u5305\u542B fields \u5BF9\u8C61\u6570\u7EC4");
+    if (!schema.detail || typeof schema.detail !== "object" || schema.detail.fields !== void 0 && !Array.isArray(schema.detail.fields) || schema.detail.sections !== void 0 && !Array.isArray(schema.detail.sections)) {
+      push(diagnostics, "/detail", "detail.type", "detail \u5FC5\u987B\u5305\u542B fields \u6216 sections \u6570\u7EC4");
     } else {
-      schema.detail.fields.forEach((field, index) => {
-        if (field.slot && registry && !registry.slots[field.slot])
-          push(
-            diagnostics,
-            `/detail/fields/${index}/slot`,
-            "registry.slot",
-            `\u672A\u6CE8\u518C\u63D2\u69FD\uFF1A${field.slot}`
-          );
+      schema.detail.fields?.forEach((field, index) => validateDetailField(field, `/detail/fields/${index}`, registry, diagnostics));
+      schema.detail.sections?.forEach((section, index) => {
+        if (section.visibleWhen) validateCondition(section.visibleWhen, `/detail/sections/${index}/visibleWhen`, diagnostics);
+        if (!section.key) push(diagnostics, `/detail/sections/${index}/key`, "detail.section.key", "\u8BE6\u60C5\u533A\u5757\u5FC5\u987B\u6307\u5B9A key");
+        if (section.span !== void 0 && (!Number.isInteger(section.span) || section.span < 1))
+          push(diagnostics, `/detail/sections/${index}/span`, "detail.section.span", "\u8BE6\u60C5\u533A\u5757 span \u5FC5\u987B\u662F\u6B63\u6574\u6570");
+        if (section.columns !== void 0 && (!Number.isInteger(section.columns) || section.columns < 1))
+          push(diagnostics, `/detail/sections/${index}/columns`, "detail.section.columns", "\u8BE6\u60C5\u5B57\u6BB5 columns \u5FC5\u987B\u662F\u6B63\u6574\u6570");
+        if (section.layout === "slot" && !section.slot)
+          push(diagnostics, `/detail/sections/${index}/slot`, "detail.slot", "slot \u533A\u5757\u5FC5\u987B\u6307\u5B9A slot");
+        if (section.layout === "table" && !section.table)
+          push(diagnostics, `/detail/sections/${index}/table`, "detail.table", "table \u533A\u5757\u5FC5\u987B\u6307\u5B9A table");
+        if (section.table && typeof section.table.data !== "string")
+          push(diagnostics, `/detail/sections/${index}/table/data`, "detail.table.data", "\u8BE6\u60C5\u8868\u683C data \u5FC5\u987B\u662F\u5B57\u6BB5\u8DEF\u5F84");
+        if (section.slot && registry && !registry.slots[section.slot])
+          push(diagnostics, `/detail/sections/${index}/slot`, "registry.slot", `\u672A\u6CE8\u518C\u63D2\u69FD\uFF1A${section.slot}`);
+        section.fields?.forEach((field, fieldIndex) => validateDetailField(field, `/detail/sections/${index}/fields/${fieldIndex}`, registry, diagnostics));
       });
     }
   }
@@ -1449,6 +1519,13 @@ function validateCrudPageSchema(schema, registry) {
     Boolean(schema.dataSource?.remove),
     diagnostics
   );
+  validateActions(
+    schema.detail?.footer,
+    "/detail/footer",
+    registry,
+    Boolean(schema.dataSource?.remove),
+    diagnostics
+  );
   return { valid: diagnostics.length === 0, diagnostics };
 }
 function assertValidCrudPageSchema(schema, registry) {
@@ -1500,7 +1577,7 @@ ${message2}`);
 }
 
 // src/lowcode/BestCrudPage.tsx
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 function pickRowKeyValues(record, rowKey) {
   if (!record) return {};
   const keys = Array.isArray(rowKey) ? rowKey : [rowKey];
@@ -1573,7 +1650,7 @@ function useFields(fields = []) {
   const registry = useBestRegistry();
   return fields.map((field) => toFieldDefinition(field, registry.dictionaries, registry.slots));
 }
-function toDetailField(field, dictionary, slots) {
+function toDetailField(field, dictionary, slots, record = {}) {
   const slot = field.slot;
   const valueEnum = field.dict ? Object.fromEntries(
     (dictionary[field.dict] ?? []).map((item) => [String(item.value), item.label])
@@ -1582,10 +1659,50 @@ function toDetailField(field, dictionary, slots) {
     field: field.field,
     label: field.label,
     span: field.span,
+    format: field.format,
+    emptyText: field.emptyText,
+    visible: !field.visibleWhen || evaluateCondition(field.visibleWhen, record, "detail"),
     valueEnum,
-    render: slot ? (value, record) => slots[slot]?.({ field: field.field, record, value }) ?? "-" : void 0
+    render: slot ? (value, record2) => slots[slot]?.({ field: field.field, record: record2, value }) ?? "-" : void 0
   };
 }
+function getPathValue3(values, path) {
+  if (Object.hasOwn(values, path)) return values[path];
+  return path.split(".").reduce((current, part) => {
+    if (current && typeof current === "object") return current[part];
+    return void 0;
+  }, values);
+}
+function toDetailSection(section, record, dictionaries, slots) {
+  if (section.visibleWhen && !evaluateCondition(section.visibleWhen, record, "detail")) return null;
+  const fields = section.fields?.map((field) => toDetailField(field, dictionaries, slots, record));
+  const table = section.table ? {
+    key: section.key,
+    data: getPathValue3(record, section.table.data) ?? [],
+    rowKey: section.table.rowKey,
+    scrollX: section.table.scrollX,
+    columns: section.table.columns.map((column) => ({
+      key: column.field,
+      title: column.title,
+      dataIndex: column.field,
+      width: column.width,
+      fixed: column.fixed,
+      render: (value, row) => {
+        if (column.slot) return slots[column.slot]?.({ field: column.field, record: row, value }) ?? "-";
+        if (column.dict) {
+          const item = (dictionaries[column.dict] ?? []).find((candidate) => candidate.value === value);
+          if (item) return item.label;
+        }
+        const format = column.format;
+        if (format === "date" || format === "datetime") return formatCrudValue(value, format);
+        if (format === "money") return formatCrudValue(value, format);
+        return value == null || value === "" ? "-" : String(value);
+      }
+    }))
+  } : void 0;
+  const content = section.layout === "slot" && section.slot ? slots[section.slot]?.({ record }) : void 0;
+  return { key: section.key, title: section.title, description: section.description, columns: section.columns, span: section.span, variant: section.variant, fields, table, content };
+}
 function toTableColumn(column, dictionary, slots) {
   const slot = column.slot;
   const valueEnum = column.dict ? Object.fromEntries(
@@ -1631,7 +1748,7 @@ function toProTableSearchColumn(field, dictionary) {
     initialValue: field.defaultValue,
     fieldProps: {
       ...options ? { options } : {},
-      ...field.maxDate === "today" ? { disabledDate: (current) => current.isAfter(dayjs5(), "day") } : {}
+      ...field.maxDate === "today" ? { disabledDate: (current) => current.isAfter(dayjs6(), "day") } : {}
     }
   };
 }
@@ -1685,14 +1802,44 @@ function BestCrudPage({ adapter, className, schema }) {
     userTouched: false
   });
   const [drawer, setDrawer] = useState4({ mode: "closed" });
+  const [detailState, setDetailState] = useState4({ loading: false });
+  const detailRequestRef = useRef3(void 0);
   const [submitting, setSubmitting] = useState4(false);
   const submittingRef = useRef3(false);
   const handleAction = useCallback2(
     async (action, record) => {
       if (action.access && !registry.access(action.access)) return;
+      if (action.effect === "closeDetail") {
+        detailRequestRef.current?.abort();
+        setDrawer({ mode: "closed" });
+        setDetailState({ loading: false });
+        return;
+      }
       if (action.effect !== "remove" && !await confirmBeforeAction(action.confirm, confirmAction))
         return;
-      if (action.effect === "openDetail") setDrawer({ mode: "detail", record });
+      if (action.effect === "openDetail") {
+        detailRequestRef.current?.abort();
+        const controller = new AbortController();
+        detailRequestRef.current = controller;
+        setDrawer({ mode: "detail", record });
+        setDetailState({ loading: Boolean(schema.dataSource.detail), record });
+        if (schema.dataSource.detail) {
+          const detailService = registry.services[schema.dataSource.detail];
+          if (!detailService) {
+            setDetailState({ loading: false, error: new Error(`\u672A\u6CE8\u518C\u670D\u52A1\uFF1A${schema.dataSource.detail}`), record });
+            return;
+          }
+          try {
+            const detail = await detailService(record ?? {}, { signal: controller.signal });
+            if (controller.signal.aborted) return;
+            const normalized = isRecord2(detail) ? adapter?.fromDetail ? adapter.fromDetail(detail) : detail : record ?? {};
+            setDetailState({ loading: false, record: normalized });
+            setDrawer({ mode: "detail", record: normalized });
+          } catch (error) {
+            if (!controller.signal.aborted) setDetailState({ loading: false, error, record });
+          }
+        }
+      }
       if (action.effect === "openEdit") {
         let editRecord = record;
         if (schema.dataSource.detail) {
@@ -1858,7 +2005,7 @@ function BestCrudPage({ adapter, className, schema }) {
       schema.dataSource.update
     ]
   );
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
     useBestSearch && searchFields.length ? /* @__PURE__ */ jsx11(
       BestSearch,
       {
@@ -1893,22 +2040,41 @@ function BestCrudPage({ adapter, className, schema }) {
         toolBarRender: () => schema.toolbar?.map((action) => /* @__PURE__ */ jsx11(ActionButton, { action, onExecute: handleAction }, action.id)) ?? []
       }
     ),
-    /* @__PURE__ */ jsxs4(
+    drawer.mode === "detail" && schema.detail?.mode === "inline" ? /* @__PURE__ */ jsx11(DetailContent, { state: detailState, record: drawer.record }) : null,
+    drawer.mode !== "closed" && (schema.detail?.mode !== "inline" || drawer.mode !== "detail") && schema.detail?.mode === "drawer" ? /* @__PURE__ */ jsxs5(
+      BestDrawer,
+      {
+        open: true,
+        width: schema.detail.width,
+        title: drawer.mode === "detail" ? `${schema.title}\u8BE6\u60C5` : drawer.mode === "edit" ? `\u7F16\u8F91${schema.title}` : `\u65B0\u5EFA${schema.title}`,
+        footer: drawer.mode === "detail" && schema.detail.footer?.length ? /* @__PURE__ */ jsx11("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: schema.detail.footer.map((action) => /* @__PURE__ */ jsx11(ActionButton, { action, record: drawer.record, onExecute: handleAction }, action.id)) }) : void 0,
+        onClose: () => {
+          detailRequestRef.current?.abort();
+          setDrawer({ mode: "closed" });
+          setDetailState({ loading: false });
+        },
+        children: [
+          drawer.mode === "detail" ? /* @__PURE__ */ jsx11(DetailContent, { state: detailState, record: drawer.record }) : null,
+          drawer.mode === "edit" || drawer.mode === "create" ? /* @__PURE__ */ jsx11(BestForm, { fields: formFields, initialValues: drawer.record, loading: submitting, mode: drawer.mode, onCancel: () => setDrawer({ mode: "closed" }), onSubmit: (values) => {
+            void submitForm(values);
+          } }) : null
+        ]
+      }
+    ) : null,
+    drawer.mode !== "closed" && (schema.detail?.mode !== "inline" || drawer.mode !== "detail") && schema.detail?.mode !== "drawer" ? /* @__PURE__ */ jsxs5(
       BestModal,
       {
-        open: drawer.mode !== "closed",
+        open: true,
         title: drawer.mode === "detail" ? `${schema.title}\u8BE6\u60C5` : drawer.mode === "edit" ? `\u7F16\u8F91${schema.title}` : `\u65B0\u5EFA${schema.title}`,
-        onClose: () => setDrawer({ mode: "closed" }),
+        width: schema.detail?.width,
+        footer: drawer.mode === "detail" && schema.detail?.footer?.length ? /* @__PURE__ */ jsx11("div", { style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: schema.detail.footer.map((action) => /* @__PURE__ */ jsx11(ActionButton, { action, record: drawer.record, onExecute: handleAction }, action.id)) }) : void 0,
+        onClose: () => {
+          detailRequestRef.current?.abort();
+          setDrawer({ mode: "closed" });
+          setDetailState({ loading: false });
+        },
         children: [
-          drawer.mode === "detail" ? /* @__PURE__ */ jsx11(
-            BestDetail,
-            {
-              fields: schema.detail?.fields.map(
-                (field) => toDetailField(field, registry.dictionaries, registry.slots)
-              ) ?? [],
-              record: drawer.record
-            }
-          ) : null,
+          drawer.mode === "detail" ? /* @__PURE__ */ jsx11(DetailContent, { state: detailState, record: drawer.record }) : null,
           drawer.mode === "edit" || drawer.mode === "create" ? /* @__PURE__ */ jsx11(
             BestForm,
             {
@@ -1924,8 +2090,24 @@ function BestCrudPage({ adapter, className, schema }) {
           ) : null
         ]
       }
-    )
+    ) : null
   ] });
+  function DetailContent({ state, record }) {
+    if (state.loading) return /* @__PURE__ */ jsx11(BestLoading, {});
+    if (state.error) return /* @__PURE__ */ jsx11(BestError, { description: errorMessage(state.error, `${schema.title}\u8BE6\u60C5\u52A0\u8F7D\u5931\u8D25`) });
+    if (!record) return /* @__PURE__ */ jsx11(BestEmpty, {});
+    const sections = schema.detail?.sections?.map((section) => toDetailSection(section, record, registry.dictionaries, registry.slots)).filter(Boolean);
+    return /* @__PURE__ */ jsx11(
+      BestDetail,
+      {
+        fields: schema.detail?.fields?.map((field) => toDetailField(field, registry.dictionaries, registry.slots, record)) ?? [],
+        sections,
+        sectionColumns: schema.detail?.columns,
+        sectionGap: schema.detail?.gap,
+        record
+      }
+    );
+  }
   function ActionButton({
     action,
     record,