@supos-grid-table/core 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/react.mjs

@@ -1,6 +1,7 @@
 import { n as copyTemplate, r as isComputed, t as TableError } from "./model-BrBCOyRY.mjs";
 import { a as summarize, i as queryRows, n as groupRows, t as displayValue } from "./query-DDwS9-yU.mjs";
-import { t as Grid } from "./grid-DqJTLeBs.mjs";
+import { t as Grid } from "./grid-DeVIC26t.mjs";
+import { At as DialogHeader, Bt as Textarea, C as ComboboxChip, Ct as AlertDialogTitle, D as ComboboxContent, Dt as DialogContent, Et as DialogClose, Ft as Checkbox, Ht as Button, I as ComboboxValue, It as NativeSelect, L as useComboboxAnchor, N as ComboboxList, Nt as DialogTitle, O as ComboboxEmpty, Ot as DialogDescription, Rt as NativeSelectOption, S as Combobox, T as ComboboxChipsInput, Tt as Dialog, Vt as Input, _ as Tabs, _t as AlertDialogDescription, b as TabsTrigger, c as Alert, g as CollapsibleTrigger, gt as AlertDialogContent, h as CollapsibleContent, ht as AlertDialogCancel, j as ComboboxItem, m as Collapsible, mt as AlertDialogAction, pt as AlertDialog, t as Card, v as TabsContent, vt as AlertDialogFooter, w as ComboboxChips, y as TabsList, yt as AlertDialogHeader, zt as Label } from "./ui-esOhDo-4.mjs";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangle, ArrowDownUp, Braces, CalendarDays, ChartNoAxesCombined, Check, ChevronDown, ClipboardList, Columns3, Database, Download, Filter, Plus, Redo2, Search, SlidersHorizontal, Table2, Trash2, Undo2, X } from "lucide-react";
@@ -153,43 +154,58 @@ function fromCell(field, value) {
 	return raw;
 }
 function Modal({ title, close, children, error }) {
-	const ref = useRef(null);
-	useEffect(() => {
-		ref.current?.showModal();
-		return () => ref.current?.close();
-	}, []);
-	return /* @__PURE__ */ jsxs("dialog", {
-		className: "sg-modal",
-		ref,
-		onCancel: (event) => {
-			event.preventDefault();
-			close();
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: true,
+		disablePointerDismissal: true,
+		onOpenChange: (open, details) => {
+			const target = details.event.target;
+			if (!open && details.reason === "escape-key" && target instanceof Element && target.closest("[role=\"combobox\"]")) {
+				details.cancel();
+				return;
+			}
+			if (!open) close();
 		},
-		children: [
-			/* @__PURE__ */ jsxs("header", { children: [/* @__PURE__ */ jsx("h2", { children: title }), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				"aria-label": "关闭",
-				onClick: close,
-				children: /* @__PURE__ */ jsx(X, { size: 18 })
-			})] }),
-			error && /* @__PURE__ */ jsx("p", {
-				className: "sg-error",
-				role: "alert",
-				children: error
-			}),
-			children
-		]
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "sg-portal sg-modal",
+			showCloseButton: false,
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, {
+					className: "sg-modal-header",
+					children: [
+						/* @__PURE__ */ jsx(DialogTitle, { children: title }),
+						/* @__PURE__ */ jsx(DialogDescription, {
+							className: "sr-only",
+							children: "填写并保存本次修改，按 Escape 或关闭按钮返回。"
+						}),
+						/* @__PURE__ */ jsx(DialogClose, {
+							render: /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "icon-sm",
+								"aria-label": "关闭"
+							}),
+							children: /* @__PURE__ */ jsx(X, { size: 18 })
+						})
+					]
+				}),
+				error && /* @__PURE__ */ jsx(Alert, {
+					className: "sg-error",
+					role: "alert",
+					children: error
+				}),
+				children
+			]
+		})
 	});
 }
 function FieldInput({ field, value, set, snapshot }) {
+	const anchor = useComboboxAnchor();
 	if (isComputed(field) || field.readonly) return /* @__PURE__ */ jsx("output", { children: displayValue(value) || "保存后计算" });
-	if (field.type === "boolean") return /* @__PURE__ */ jsx("input", {
+	if (field.type === "boolean") return /* @__PURE__ */ jsx(Checkbox, {
 		"aria-label": field.name,
-		type: "checkbox",
 		checked: value === true,
-		onChange: (e) => set(e.target.checked)
+		onCheckedChange: (checked) => set(checked === true)
 	});
-	if (field.type === "textarea") return /* @__PURE__ */ jsx("textarea", {
+	if (field.type === "textarea") return /* @__PURE__ */ jsx(Textarea, {
 		"aria-label": field.name,
 		rows: 3,
 		value: String(value ?? ""),
@@ -205,22 +221,52 @@ function FieldInput({ field, value, set, snapshot }) {
 			id: o,
 			label: o
 		}));
-		return /* @__PURE__ */ jsxs("select", {
+		if (multiple) return /* @__PURE__ */ jsxs(Combobox, {
+			multiple: true,
+			items: options.map((option) => option.id),
+			value: Array.isArray(value) ? value.map(String) : [],
+			onValueChange: (next, details) => {
+				if (details.reason === "escape-key") {
+					details.cancel();
+					return;
+				}
+				set(next);
+			},
+			itemToStringLabel: (id) => options.find((option) => option.id === id)?.label ?? id,
+			children: [/* @__PURE__ */ jsxs(ComboboxChips, {
+				ref: anchor,
+				children: [/* @__PURE__ */ jsx(ComboboxValue, { children: (selected) => selected.map((id) => /* @__PURE__ */ jsx(ComboboxChip, {
+					"aria-label": `移除 ${options.find((option) => option.id === id)?.label ?? id}`,
+					children: options.find((option) => option.id === id)?.label ?? id
+				}, id)) }), /* @__PURE__ */ jsx(ComboboxChipsInput, {
+					"aria-label": field.name,
+					placeholder: "搜索并选择，可多选"
+				})]
+			}), /* @__PURE__ */ jsxs(ComboboxContent, {
+				className: "sg-portal",
+				anchor,
+				children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: "没有匹配的记录或选项" }), /* @__PURE__ */ jsx(ComboboxList, { children: (id) => /* @__PURE__ */ jsx(ComboboxItem, {
+					value: id,
+					children: options.find((option) => option.id === id)?.label ?? id
+				}, id) })]
+			})]
+		});
+		return /* @__PURE__ */ jsxs(NativeSelect, {
 			"aria-label": field.name,
 			multiple: !!multiple,
 			required: field.required,
 			value: multiple ? Array.isArray(value) ? value.map(String) : [] : Array.isArray(value) ? String(value[0] ?? "") : String(value ?? ""),
 			onChange: (e) => set(multiple ? Array.from(e.target.selectedOptions, (o) => o.value) : field.type === "relation" ? e.target.value ? [e.target.value] : [] : e.target.value || null),
-			children: [!multiple && /* @__PURE__ */ jsx("option", {
+			children: [!multiple && /* @__PURE__ */ jsx(NativeSelectOption, {
 				value: "",
 				children: "请选择"
-			}), options.map((o) => /* @__PURE__ */ jsx("option", {
+			}), options.map((o) => /* @__PURE__ */ jsx(NativeSelectOption, {
 				value: o.id,
 				children: o.label
 			}, o.id))]
 		});
 	}
-	return /* @__PURE__ */ jsx("input", {
+	return /* @__PURE__ */ jsx(Input, {
 		"aria-label": field.name,
 		type: field.type === "number" ? "number" : field.type === "date" ? "date" : "text",
 		step: field.type === "number" ? "any" : void 0,
@@ -261,12 +307,12 @@ function RecordForm({ table, snapshot, row, busy, onSave, onDelete, error }) {
 				className: "sg-muted",
 				children: row ? "修改将校验打开记录时的版本，其他人的更新会提示冲突。" : "按数据模型填写，保存成功后可在所有视图查看。"
 			}),
-			error && /* @__PURE__ */ jsxs("p", {
+			error && /* @__PURE__ */ jsxs(Alert, {
 				role: "alert",
 				className: "sg-error",
 				children: [error, "。待提交内容已保留。"]
 			}),
-			table.fields.map((field) => /* @__PURE__ */ jsxs("label", { children: [
+			table.fields.map((field) => /* @__PURE__ */ jsxs(Label, { children: [
 				/* @__PURE__ */ jsxs("span", { children: [
 					field.name,
 					field.required && /* @__PURE__ */ jsx("b", {
@@ -287,7 +333,9 @@ function RecordForm({ table, snapshot, row, busy, onSave, onDelete, error }) {
 					},
 					snapshot: draftSnapshot
 				}),
-				field.type === "relation" && !field.readonly && /* @__PURE__ */ jsxs("button", {
+				field.type === "relation" && !field.readonly && /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
 					type: "button",
 					disabled: !snapshot.capabilities.atomicBatch || busy,
 					onClick: () => setRelationDraft(field),
@@ -295,7 +343,9 @@ function RecordForm({ table, snapshot, row, busy, onSave, onDelete, error }) {
 				})
 			] }, field.id)),
 			/* @__PURE__ */ jsxs("footer", { children: [
-				onDelete && /* @__PURE__ */ jsxs("button", {
+				onDelete && /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
 					type: "button",
 					className: "sg-danger",
 					disabled: busy,
@@ -307,7 +357,9 @@ function RecordForm({ table, snapshot, row, busy, onSave, onDelete, error }) {
 					className: "sg-success",
 					children: [/* @__PURE__ */ jsx(Check, { size: 15 }), "已保存"]
 				}),
-				/* @__PURE__ */ jsx("button", {
+				/* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					size: "sm",
 					className: "sg-primary",
 					type: "submit",
 					disabled: busy || !snapshot.capabilities.write,
@@ -346,15 +398,16 @@ function RecordForm({ table, snapshot, row, busy, onSave, onDelete, error }) {
 }
 function SchemaEditor({ snapshot, table, save, close, error }) {
 	const [base, setBase] = useState(() => structuredClone(snapshot.base));
+	const [deleteField, setDeleteField] = useState();
 	const draft = base.tables.find((t) => t.id === table.id);
 	function update() {
 		setBase(structuredClone(base));
 	}
-	return /* @__PURE__ */ jsx(Modal, {
+	return /* @__PURE__ */ jsxs(Modal, {
 		title: "字段与 UNS 绑定",
 		close,
 		error,
-		children: /* @__PURE__ */ jsxs("form", {
+		children: [/* @__PURE__ */ jsxs("form", {
 			className: "sg-schema",
 			onSubmit: async (e) => {
 				e.preventDefault();
@@ -365,7 +418,7 @@ function SchemaEditor({ snapshot, table, save, close, error }) {
 					className: "sg-muted",
 					children: "字段引用使用稳定 ID。绑定仅配置映射，实际读写由已接入的 UNS 适配器执行。"
 				}),
-				/* @__PURE__ */ jsxs("label", { children: ["数据表名称", /* @__PURE__ */ jsx("input", {
+				/* @__PURE__ */ jsxs(Label, { children: ["数据表名称", /* @__PURE__ */ jsx(Input, {
 					required: true,
 					value: draft.name,
 					onChange: (e) => {
@@ -378,18 +431,16 @@ function SchemaEditor({ snapshot, table, save, close, error }) {
 					children: draft.fields.map((field) => /* @__PURE__ */ jsxs("fieldset", { children: [
 						/* @__PURE__ */ jsxs("div", {
 							className: "sg-field-heading",
-							children: [/* @__PURE__ */ jsx("code", { children: field.id }), /* @__PURE__ */ jsx("button", {
+							children: [/* @__PURE__ */ jsx("code", { children: field.id }), /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
 								type: "button",
 								title: `删除字段 ${field.name}`,
-								onClick: () => {
-									if (!confirm(`删除字段“${field.name}”的应用配置？关联公式和视图也需要调整。`)) return;
-									draft.fields = draft.fields.filter((f) => f.id !== field.id);
-									update();
-								},
+								onClick: () => setDeleteField(field),
 								children: /* @__PURE__ */ jsx(Trash2, { size: 14 })
 							})]
 						}),
-						/* @__PURE__ */ jsxs("label", { children: ["名称", /* @__PURE__ */ jsx("input", {
+						/* @__PURE__ */ jsxs(Label, { children: ["名称", /* @__PURE__ */ jsx(Input, {
 							required: true,
 							value: field.name,
 							onChange: (e) => {
@@ -397,7 +448,7 @@ function SchemaEditor({ snapshot, table, save, close, error }) {
 								update();
 							}
 						})] }),
-						/* @__PURE__ */ jsxs("label", { children: ["类型", /* @__PURE__ */ jsx("select", {
+						/* @__PURE__ */ jsxs(Label, { children: ["类型", /* @__PURE__ */ jsx(NativeSelect, {
 							value: field.type,
 							onChange: (e) => {
 								field.type = e.target.value;
@@ -416,38 +467,36 @@ function SchemaEditor({ snapshot, table, save, close, error }) {
 								"formula",
 								"lookup",
 								"rollup"
-							].map((kind) => /* @__PURE__ */ jsx("option", { children: kind }, kind))
+							].map((kind) => /* @__PURE__ */ jsx(NativeSelectOption, { children: kind }, kind))
 						})] }),
-						/* @__PURE__ */ jsxs("label", {
+						/* @__PURE__ */ jsxs(Label, {
 							className: "sg-check",
-							children: [/* @__PURE__ */ jsx("input", {
-								type: "checkbox",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
 								checked: !!field.required,
-								onChange: (e) => {
-									field.required = e.target.checked;
+								onCheckedChange: (checked) => {
+									field.required = checked === true;
 									update();
 								}
 							}), "必填"]
 						}),
-						/* @__PURE__ */ jsxs("label", {
+						/* @__PURE__ */ jsxs(Label, {
 							className: "sg-check",
-							children: [/* @__PURE__ */ jsx("input", {
-								type: "checkbox",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
 								checked: !!field.readonly,
-								onChange: (e) => {
-									field.readonly = e.target.checked;
+								onCheckedChange: (checked) => {
+									field.readonly = checked === true;
 									update();
 								}
 							}), "只读"]
 						}),
-						(field.type === "select" || field.type === "multiSelect") && /* @__PURE__ */ jsxs("label", { children: ["选项（每行一个）", /* @__PURE__ */ jsx("textarea", {
+						(field.type === "select" || field.type === "multiSelect") && /* @__PURE__ */ jsxs(Label, { children: ["选项（每行一个）", /* @__PURE__ */ jsx(Textarea, {
 							value: (field.options ?? []).join("\n"),
 							onChange: (e) => {
 								field.options = e.target.value.split("\n");
 								update();
 							}
 						})] }),
-						field.type === "formula" && /* @__PURE__ */ jsxs("label", { children: ["公式", /* @__PURE__ */ jsx("textarea", {
+						field.type === "formula" && /* @__PURE__ */ jsxs(Label, { children: ["公式", /* @__PURE__ */ jsx(Textarea, {
 							placeholder: "IF({status} = '已过账', {quantity}, 0)",
 							value: field.formula ?? "",
 							onChange: (e) => {
@@ -455,7 +504,7 @@ function SchemaEditor({ snapshot, table, save, close, error }) {
 								update();
 							}
 						})] }),
-						field.type === "relation" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("label", { children: ["关联表", /* @__PURE__ */ jsxs("select", {
+						field.type === "relation" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Label, { children: ["关联表", /* @__PURE__ */ jsxs(NativeSelect, {
 							value: field.relation?.tableId ?? "",
 							onChange: (e) => {
 								field.relation = {
@@ -464,29 +513,28 @@ function SchemaEditor({ snapshot, table, save, close, error }) {
 								};
 								update();
 							},
-							children: [/* @__PURE__ */ jsx("option", {
+							children: [/* @__PURE__ */ jsx(NativeSelectOption, {
 								value: "",
 								children: "请选择"
-							}), base.tables.map((t) => /* @__PURE__ */ jsx("option", {
+							}), base.tables.map((t) => /* @__PURE__ */ jsx(NativeSelectOption, {
 								value: t.id,
 								children: t.name
 							}, t.id))]
-						})] }), /* @__PURE__ */ jsxs("label", {
+						})] }), /* @__PURE__ */ jsxs(Label, {
 							className: "sg-check",
-							children: [/* @__PURE__ */ jsx("input", {
-								type: "checkbox",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
 								checked: field.relation?.multiple ?? true,
-								onChange: (e) => {
+								onCheckedChange: (checked) => {
 									field.relation = {
 										tableId: field.relation?.tableId ?? "",
-										multiple: e.target.checked
+										multiple: checked === true
 									};
 									update();
 								}
 							}), "允许关联多个记录"]
 						})] }),
 						(field.type === "lookup" || field.type === "rollup") && /* @__PURE__ */ jsxs(Fragment, { children: [
-							/* @__PURE__ */ jsxs("label", { children: ["关联字段 ID", /* @__PURE__ */ jsx("input", {
+							/* @__PURE__ */ jsxs(Label, { children: ["关联字段 ID", /* @__PURE__ */ jsx(Input, {
 								value: field.lookup?.relationFieldId ?? "",
 								onChange: (e) => {
 									field.lookup = {
@@ -497,7 +545,7 @@ function SchemaEditor({ snapshot, table, save, close, error }) {
 									update();
 								}
 							})] }),
-							/* @__PURE__ */ jsxs("label", { children: ["目标字段 ID", /* @__PURE__ */ jsx("input", {
+							/* @__PURE__ */ jsxs(Label, { children: ["目标字段 ID", /* @__PURE__ */ jsx(Input, {
 								value: field.lookup?.targetFieldId ?? "",
 								onChange: (e) => {
 									field.lookup = {
@@ -508,7 +556,7 @@ function SchemaEditor({ snapshot, table, save, close, error }) {
 									update();
 								}
 							})] }),
-							field.type === "rollup" && /* @__PURE__ */ jsxs("label", { children: ["汇总", /* @__PURE__ */ jsx("select", {
+							field.type === "rollup" && /* @__PURE__ */ jsxs(Label, { children: ["汇总", /* @__PURE__ */ jsx(NativeSelect, {
 								value: field.lookup?.aggregate ?? "sum",
 								onChange: (e) => {
 									field.lookup = {
@@ -523,12 +571,14 @@ function SchemaEditor({ snapshot, table, save, close, error }) {
 									"min",
 									"max",
 									"average"
-								].map((s) => /* @__PURE__ */ jsx("option", { children: s }, s))
+								].map((s) => /* @__PURE__ */ jsx(NativeSelectOption, { children: s }, s))
 							})] })
 						] })
 					] }, field.id))
 				}),
-				/* @__PURE__ */ jsxs("button", {
+				/* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
 					type: "button",
 					onClick: () => {
 						draft.fields.push({
@@ -540,39 +590,63 @@ function SchemaEditor({ snapshot, table, save, close, error }) {
 					},
 					children: [/* @__PURE__ */ jsx(Plus, { size: 16 }), "新增字段"]
 				}),
-				/* @__PURE__ */ jsxs("details", { children: [
-					/* @__PURE__ */ jsx("summary", { children: "UNS 数据绑定" }),
-					/* @__PURE__ */ jsxs("label", { children: ["UNS alias", /* @__PURE__ */ jsx("input", {
-						value: draft.binding?.alias ?? "",
-						onChange: (e) => {
-							draft.binding = {
-								alias: e.target.value,
-								fieldMap: draft.binding?.fieldMap ?? {}
-							};
-							update();
-						}
-					})] }),
-					draft.fields.filter((f) => !isComputed(f)).map((f) => /* @__PURE__ */ jsxs("label", { children: [f.name, /* @__PURE__ */ jsx("input", {
-						placeholder: "UNS 字段名",
-						value: draft.binding?.fieldMap[f.id] ?? "",
-						onChange: (e) => {
-							draft.binding ??= {
-								alias: "",
-								fieldMap: {}
-							};
-							if (e.target.value) draft.binding.fieldMap[f.id] = e.target.value;
-							else delete draft.binding.fieldMap[f.id];
-							update();
-						}
-					})] }, f.id))
-				] }),
-				/* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx("button", {
+				/* @__PURE__ */ jsxs(Collapsible, { children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						type: "button"
+					}),
+					children: "UNS 数据绑定"
+				}), /* @__PURE__ */ jsxs(CollapsibleContent, { children: [/* @__PURE__ */ jsxs(Label, { children: ["UNS alias", /* @__PURE__ */ jsx(Input, {
+					value: draft.binding?.alias ?? "",
+					onChange: (e) => {
+						draft.binding = {
+							alias: e.target.value,
+							fieldMap: draft.binding?.fieldMap ?? {}
+						};
+						update();
+					}
+				})] }), draft.fields.filter((f) => !isComputed(f)).map((f) => /* @__PURE__ */ jsxs(Label, { children: [f.name, /* @__PURE__ */ jsx(Input, {
+					placeholder: "UNS 字段名",
+					value: draft.binding?.fieldMap[f.id] ?? "",
+					onChange: (e) => {
+						draft.binding ??= {
+							alias: "",
+							fieldMap: {}
+						};
+						if (e.target.value) draft.binding.fieldMap[f.id] = e.target.value;
+						else delete draft.binding.fieldMap[f.id];
+						update();
+					}
+				})] }, f.id))] })] }),
+				/* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					size: "sm",
 					type: "submit",
 					className: "sg-primary",
 					children: "保存配置"
 				}) })
 			]
-		})
+		}), /* @__PURE__ */ jsx(AlertDialog, {
+			open: !!deleteField,
+			onOpenChange: (open) => {
+				if (!open) setDeleteField(void 0);
+			},
+			children: /* @__PURE__ */ jsxs(AlertDialogContent, {
+				className: "sg-portal",
+				children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "删除字段配置" }), /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
+					"确认删除“",
+					deleteField?.name,
+					"”的应用配置？关联公式和视图也需要调整。"
+				] })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "取消" }), /* @__PURE__ */ jsx(AlertDialogAction, {
+					onClick: () => {
+						draft.fields = draft.fields.filter((field) => field.id !== deleteField?.id);
+						update();
+						setDeleteField(void 0);
+					},
+					children: "确认删除"
+				})] })]
+			})
+		})]
 	});
 }
 function ViewEditor({ view, table, save, close, error }) {
@@ -588,7 +662,7 @@ function ViewEditor({ view, table, save, close, error }) {
 				if (await save(draft)) close();
 			},
 			children: [
-				/* @__PURE__ */ jsxs("label", { children: ["名称", /* @__PURE__ */ jsx("input", {
+				/* @__PURE__ */ jsxs(Label, { children: ["名称", /* @__PURE__ */ jsx(Input, {
 					required: true,
 					value: draft.name,
 					onChange: (e) => setDraft({
@@ -596,46 +670,46 @@ function ViewEditor({ view, table, save, close, error }) {
 						name: e.target.value
 					})
 				})] }),
-				/* @__PURE__ */ jsxs("label", { children: ["视图类型", /* @__PURE__ */ jsx("select", {
+				/* @__PURE__ */ jsxs(Label, { children: ["视图类型", /* @__PURE__ */ jsx(NativeSelect, {
 					value: draft.type,
 					onChange: (e) => setDraft({
 						...draft,
 						type: e.target.value
 					}),
-					children: Object.entries(viewNames).map(([id, name]) => /* @__PURE__ */ jsx("option", {
+					children: Object.entries(viewNames).map(([id, name]) => /* @__PURE__ */ jsx(NativeSelectOption, {
 						value: id,
 						children: name
 					}, id))
 				})] }),
-				/* @__PURE__ */ jsxs("label", { children: ["分组字段", /* @__PURE__ */ jsxs("select", {
+				/* @__PURE__ */ jsxs(Label, { children: ["分组字段", /* @__PURE__ */ jsxs(NativeSelect, {
 					value: draft.groupBy ?? "",
 					onChange: (e) => setDraft({
 						...draft,
 						groupBy: e.target.value || void 0
 					}),
-					children: [/* @__PURE__ */ jsx("option", {
+					children: [/* @__PURE__ */ jsx(NativeSelectOption, {
 						value: "",
 						children: "不分组"
-					}), table.fields.map((f) => /* @__PURE__ */ jsx("option", {
+					}), table.fields.map((f) => /* @__PURE__ */ jsx(NativeSelectOption, {
 						value: f.id,
 						children: f.name
 					}, f.id))]
 				})] }),
-				/* @__PURE__ */ jsxs("label", { children: ["日历日期字段", /* @__PURE__ */ jsxs("select", {
+				/* @__PURE__ */ jsxs(Label, { children: ["日历日期字段", /* @__PURE__ */ jsxs(NativeSelect, {
 					value: draft.dateFieldId ?? "",
 					onChange: (e) => setDraft({
 						...draft,
 						dateFieldId: e.target.value || void 0
 					}),
-					children: [/* @__PURE__ */ jsx("option", {
+					children: [/* @__PURE__ */ jsx(NativeSelectOption, {
 						value: "",
 						children: "请选择"
-					}), table.fields.filter((f) => f.type === "date").map((f) => /* @__PURE__ */ jsx("option", {
+					}), table.fields.filter((f) => f.type === "date").map((f) => /* @__PURE__ */ jsx(NativeSelectOption, {
 						value: f.id,
 						children: f.name
 					}, f.id))]
 				})] }),
-				/* @__PURE__ */ jsxs("label", { children: ["冻结列数", /* @__PURE__ */ jsx("input", {
+				/* @__PURE__ */ jsxs(Label, { children: ["冻结列数", /* @__PURE__ */ jsx(Input, {
 					type: "number",
 					min: 0,
 					max: table.fields.length,
@@ -645,14 +719,13 @@ function ViewEditor({ view, table, save, close, error }) {
 						freezeColumns: Number(e.target.value)
 					})
 				})] }),
-				/* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsx("legend", { children: "显示字段" }), table.fields.map((f) => /* @__PURE__ */ jsxs("label", {
+				/* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsx("legend", { children: "显示字段" }), table.fields.map((f) => /* @__PURE__ */ jsxs(Label, {
 					className: "sg-check",
-					children: [/* @__PURE__ */ jsx("input", {
-						type: "checkbox",
+					children: [/* @__PURE__ */ jsx(Checkbox, {
 						checked: !draft.hiddenFields?.includes(f.id),
-						onChange: (e) => setDraft({
+						onCheckedChange: (checked) => setDraft({
 							...draft,
-							hiddenFields: e.target.checked ? (draft.hiddenFields ?? []).filter((id) => id !== f.id) : [...draft.hiddenFields ?? [], f.id]
+							hiddenFields: checked === true ? (draft.hiddenFields ?? []).filter((id) => id !== f.id) : [...draft.hiddenFields ?? [], f.id]
 						})
 					}), f.name]
 				}, f.id))] }),
@@ -661,19 +734,19 @@ function ViewEditor({ view, table, save, close, error }) {
 					(draft.filters ?? []).map((filter, index) => /* @__PURE__ */ jsxs("div", {
 						className: "sg-filter-line",
 						children: [
-							/* @__PURE__ */ jsx("select", {
+							/* @__PURE__ */ jsx(NativeSelect, {
 								"aria-label": "筛选字段",
 								value: filter.fieldId,
 								onChange: (e) => {
 									draft.filters[index].fieldId = e.target.value;
 									setDraft(structuredClone(draft));
 								},
-								children: table.fields.map((f) => /* @__PURE__ */ jsx("option", {
+								children: table.fields.map((f) => /* @__PURE__ */ jsx(NativeSelectOption, {
 									value: f.id,
 									children: f.name
 								}, f.id))
 							}),
-							/* @__PURE__ */ jsx("select", {
+							/* @__PURE__ */ jsx(NativeSelect, {
 								"aria-label": "筛选方式",
 								value: filter.op,
 								onChange: (e) => {
@@ -689,9 +762,9 @@ function ViewEditor({ view, table, save, close, error }) {
 									"lt",
 									"lte",
 									"empty"
-								].map((op) => /* @__PURE__ */ jsx("option", { children: op }, op))
+								].map((op) => /* @__PURE__ */ jsx(NativeSelectOption, { children: op }, op))
 							}),
-							/* @__PURE__ */ jsx("input", {
+							/* @__PURE__ */ jsx(Input, {
 								"aria-label": "筛选值",
 								value: displayValue(filter.value),
 								onChange: (e) => {
@@ -700,7 +773,9 @@ function ViewEditor({ view, table, save, close, error }) {
 									setDraft(structuredClone(draft));
 								}
 							}),
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
 								type: "button",
 								"aria-label": "移除筛选",
 								onClick: () => setDraft({
@@ -711,7 +786,9 @@ function ViewEditor({ view, table, save, close, error }) {
 							})
 						]
 					}, index)),
-					/* @__PURE__ */ jsx("button", {
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
 						type: "button",
 						onClick: () => setDraft({
 							...draft,
@@ -724,7 +801,7 @@ function ViewEditor({ view, table, save, close, error }) {
 						children: "添加条件"
 					})
 				] }),
-				/* @__PURE__ */ jsxs("label", { children: ["排序字段", /* @__PURE__ */ jsxs("select", {
+				/* @__PURE__ */ jsxs(Label, { children: ["排序字段", /* @__PURE__ */ jsxs(NativeSelect, {
 					value: draft.sorts?.[0]?.fieldId ?? "",
 					onChange: (e) => setDraft({
 						...draft,
@@ -733,15 +810,15 @@ function ViewEditor({ view, table, save, close, error }) {
 							direction: draft.sorts?.[0]?.direction ?? "asc"
 						}] : []
 					}),
-					children: [/* @__PURE__ */ jsx("option", {
+					children: [/* @__PURE__ */ jsx(NativeSelectOption, {
 						value: "",
 						children: "默认顺序"
-					}), table.fields.map((f) => /* @__PURE__ */ jsx("option", {
+					}), table.fields.map((f) => /* @__PURE__ */ jsx(NativeSelectOption, {
 						value: f.id,
 						children: f.name
 					}, f.id))]
 				})] }),
-				/* @__PURE__ */ jsxs("label", { children: ["方向", /* @__PURE__ */ jsxs("select", {
+				/* @__PURE__ */ jsxs(Label, { children: ["方向", /* @__PURE__ */ jsxs(NativeSelect, {
 					value: draft.sorts?.[0]?.direction ?? "asc",
 					onChange: (e) => setDraft({
 						...draft,
@@ -750,15 +827,17 @@ function ViewEditor({ view, table, save, close, error }) {
 							direction: e.target.value
 						}))
 					}),
-					children: [/* @__PURE__ */ jsx("option", {
+					children: [/* @__PURE__ */ jsx(NativeSelectOption, {
 						value: "asc",
 						children: "升序"
-					}), /* @__PURE__ */ jsx("option", {
+					}), /* @__PURE__ */ jsx(NativeSelectOption, {
 						value: "desc",
 						children: "降序"
 					})]
 				})] }),
-				/* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx("button", {
+				/* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					size: "sm",
 					className: "sg-primary",
 					type: "submit",
 					children: "保存视图"
@@ -779,7 +858,7 @@ function CalendarView({ rows, view, table, open }) {
 	const padding = new Date(Date.UTC(year, mm - 1, 1)).getUTCDay();
 	return /* @__PURE__ */ jsxs("section", {
 		className: "sg-calendar",
-		children: [/* @__PURE__ */ jsxs("label", { children: ["月份", /* @__PURE__ */ jsx("input", {
+		children: [/* @__PURE__ */ jsxs(Label, { children: ["月份", /* @__PURE__ */ jsx(Input, {
 			"aria-label": "日历月份",
 			type: "month",
 			value: month,
@@ -803,7 +882,10 @@ function CalendarView({ rows, view, table, open }) {
 					const date = `${month}-${String(i + 1).padStart(2, "0")}`;
 					return /* @__PURE__ */ jsxs("div", {
 						className: "sg-calendar-day",
-						children: [/* @__PURE__ */ jsx("span", { children: i + 1 }), rows.filter((r) => r.values[dateField] === date).map((r) => /* @__PURE__ */ jsx("button", {
+						children: [/* @__PURE__ */ jsx("span", { children: i + 1 }), rows.filter((r) => r.values[dateField] === date).map((r) => /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							type: "button",
 							onClick: () => open(r),
 							children: displayValue(r.values[table.fields[0].id]) || r.id
 						}, r.id))]
@@ -821,6 +903,8 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 	const [busy, setBusy] = useState(false), [connected, setConnected] = useState(false);
 	const [online, setOnline] = useState([]);
 	const [record, setRecord] = useState();
+	const [newTable, setNewTable] = useState(false), [newTableName, setNewTableName] = useState("");
+	const [confirmation, setConfirmation] = useState();
 	const [schemaOpen, setSchemaOpen] = useState(false), [viewDraft, setViewDraft] = useState();
 	const [pending, setPending] = useState();
 	const [undo, setUndo] = useState([]), [redo, setRedo] = useState([]);
@@ -924,7 +1008,10 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 		children: [
 			/* @__PURE__ */ jsx(Database, { size: 32 }),
 			/* @__PURE__ */ jsx("p", { children: error || "正在加载多维表格…" }),
-			error && /* @__PURE__ */ jsx("button", {
+			error && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				type: "button",
 				onClick: () => void refresh(),
 				children: "重新加载"
 			})
@@ -1003,7 +1090,10 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 					/* @__PURE__ */ jsx("i", {}),
 					name,
 					/* @__PURE__ */ jsx("small", { children: records.length })
-				] }), records.map((row) => /* @__PURE__ */ jsxs("button", {
+				] }), records.map((row) => /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					type: "button",
 					className: "sg-card",
 					draggable: !readonly && groupingField?.type === "select",
 					onDragStart: (e) => e.dataTransfer.setData("text/plain", row.id),
@@ -1152,6 +1242,22 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 			})]
 		}, groupName ?? "all");
 	}
+	const confirmationDialog = /* @__PURE__ */ jsx(AlertDialog, {
+		open: !!confirmation,
+		onOpenChange: (open) => {
+			if (!open) setConfirmation(void 0);
+		},
+		children: /* @__PURE__ */ jsxs(AlertDialogContent, {
+			className: "sg-portal",
+			children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: confirmation?.title }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: confirmation?.description })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "取消" }), /* @__PURE__ */ jsx(AlertDialogAction, {
+				onClick: () => {
+					confirmation?.action();
+					setConfirmation(void 0);
+				},
+				children: "确认"
+			})] })]
+		})
+	});
 	return /* @__PURE__ */ jsxs("main", {
 		className: "sg-app",
 		children: [
@@ -1171,7 +1277,10 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 					}),
 					/* @__PURE__ */ jsx("nav", {
 						"aria-label": "数据表",
-						children: snapshot.base.tables.map((t) => /* @__PURE__ */ jsxs("button", {
+						children: snapshot.base.tables.map((t) => /* @__PURE__ */ jsxs(Button, {
+							variant: "ghost",
+							size: "sm",
+							type: "button",
 							className: t.id === table.id ? "active" : "",
 							onClick: () => {
 								setTableId(t.id);
@@ -1186,28 +1295,14 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 							]
 						}, t.id))
 					}),
-					/* @__PURE__ */ jsxs("button", {
+					/* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						type: "button",
 						className: "sg-add-table",
-						onClick: async () => {
-							const name = prompt("新数据表名称");
-							if (!name?.trim()) return;
-							const id = `t_${crypto.randomUUID().slice(0, 8)}`, base = structuredClone(snapshot.base);
-							base.tables.push({
-								id,
-								name,
-								fields: [{
-									id: "name",
-									name: "名称",
-									type: "text",
-									required: true
-								}],
-								views: [{
-									id: "grid",
-									name: "全部记录",
-									type: "grid"
-								}]
-							});
-							if (await configure(base)) setTableId(id);
+						onClick: () => {
+							setNewTableName("");
+							setNewTable(true);
 						},
 						children: [/* @__PURE__ */ jsx(Plus, { size: 15 }), "添加数据表"]
 					}),
@@ -1216,7 +1311,10 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 						children: [
 							/* @__PURE__ */ jsx("span", { className: `sg-connection ${connected ? "connected" : ""}` }),
 							connected ? "协同已连接" : "正在重连，输入会保留",
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								title: "导出不含数据和绑定的应用模板",
 								onClick: () => download(`${snapshot.base.name}.template.json`, JSON.stringify(copyTemplate(snapshot.base), null, 2), "application/json"),
 								children: /* @__PURE__ */ jsx(Download, { size: 15 })
@@ -1225,8 +1323,11 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 					})
 				]
 			}),
-			/* @__PURE__ */ jsxs("section", {
+			/* @__PURE__ */ jsxs(Tabs, {
+				value: view.id,
+				onValueChange: (value) => setViewId(String(value)),
 				className: "sg-workspace",
+				render: /* @__PURE__ */ jsx("section", {}),
 				children: [
 					/* @__PURE__ */ jsxs("header", {
 						className: "sg-topbar",
@@ -1242,7 +1343,10 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 									title: `${p.name}${p.fieldId ? ` · ${p.fieldId}` : ""}`,
 									children: p.name.slice(0, 1)
 								}, `${p.userId}/${p.clientId}`))
-							}), /* @__PURE__ */ jsxs("button", {
+							}), /* @__PURE__ */ jsxs(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								onClick: () => setSchemaOpen(true),
 								children: [/* @__PURE__ */ jsx(SlidersHorizontal, { size: 16 }), "字段与绑定"]
 							})]
@@ -1251,14 +1355,21 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 					/* @__PURE__ */ jsxs("nav", {
 						className: "sg-view-tabs",
 						"aria-label": "视图",
-						children: [table.views.map((v) => {
-							const Icon = viewIcons[v.type];
-							return /* @__PURE__ */ jsxs("button", {
-								className: v.id === view.id ? "active" : "",
-								onClick: () => setViewId(v.id),
-								children: [/* @__PURE__ */ jsx(Icon, { size: 15 }), v.name]
-							}, v.id);
-						}), /* @__PURE__ */ jsx("button", {
+						children: [/* @__PURE__ */ jsx(TabsList, {
+							variant: "line",
+							"aria-label": "视图",
+							children: table.views.map((v) => {
+								const Icon = viewIcons[v.type];
+								return /* @__PURE__ */ jsxs(TabsTrigger, {
+									value: v.id,
+									className: v.id === view.id ? "active" : "",
+									children: [/* @__PURE__ */ jsx(Icon, { size: 15 }), v.name]
+								}, v.id);
+							})
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							type: "button",
 							"aria-label": "新增视图",
 							onClick: () => setViewDraft({
 								id: `v_${crypto.randomUUID().slice(0, 8)}`,
@@ -1271,13 +1382,19 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 					/* @__PURE__ */ jsxs("div", {
 						className: "sg-toolbar",
 						children: [/* @__PURE__ */ jsxs("div", { children: [
-							/* @__PURE__ */ jsxs("button", {
+							/* @__PURE__ */ jsxs(Button, {
+								variant: "default",
+								size: "sm",
+								type: "button",
 								className: "sg-primary",
 								disabled: readonly || busy,
 								onClick: () => setRecord("new"),
 								children: [/* @__PURE__ */ jsx(Plus, { size: 16 }), "新增记录"]
 							}),
-							/* @__PURE__ */ jsxs("button", {
+							/* @__PURE__ */ jsxs(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								onClick: () => setViewDraft(view),
 								children: [
 									/* @__PURE__ */ jsx(Filter, { size: 15 }),
@@ -1285,35 +1402,50 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 									view.filters?.length ? ` ${view.filters.length}` : ""
 								]
 							}),
-							/* @__PURE__ */ jsxs("button", {
+							/* @__PURE__ */ jsxs(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								onClick: () => setViewDraft(view),
 								children: [/* @__PURE__ */ jsx(ArrowDownUp, { size: 15 }), "排序"]
 							}),
-							/* @__PURE__ */ jsxs("button", {
+							/* @__PURE__ */ jsxs(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								onClick: () => setViewDraft(view),
 								children: [/* @__PURE__ */ jsx(SlidersHorizontal, { size: 15 }), "视图设置"]
 							})
 						] }), /* @__PURE__ */ jsxs("div", { children: [
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								"aria-label": "撤销",
 								disabled: !undo.length || busy,
 								onClick: () => void commit(undo[undo.length - 1], "undo"),
 								children: /* @__PURE__ */ jsx(Undo2, { size: 16 })
 							}),
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								"aria-label": "重做",
 								disabled: !redo.length || busy,
 								onClick: () => void commit(redo[redo.length - 1], "redo"),
 								children: /* @__PURE__ */ jsx(Redo2, { size: 16 })
 							}),
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								"aria-label": "导出 CSV",
 								onClick: exportCsv,
 								children: /* @__PURE__ */ jsx(Download, { size: 16 })
 							}),
-							/* @__PURE__ */ jsxs("label", {
+							/* @__PURE__ */ jsxs(Label, {
 								className: "sg-search",
-								children: [/* @__PURE__ */ jsx(Search, { size: 15 }), /* @__PURE__ */ jsx("input", {
+								children: [/* @__PURE__ */ jsx(Search, { size: 15 }), /* @__PURE__ */ jsx(Input, {
 									placeholder: "搜索当前表",
 									value: search,
 									onChange: (e) => setSearch(e.target.value)
@@ -1321,74 +1453,105 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 							})
 						] })]
 					}),
-					snapshot.dataError && /* @__PURE__ */ jsxs("div", {
+					snapshot.dataError && /* @__PURE__ */ jsxs(Alert, {
 						className: "sg-error",
 						role: "alert",
 						children: [
 							/* @__PURE__ */ jsx(AlertTriangle, { size: 16 }),
 							/* @__PURE__ */ jsx("span", { children: snapshot.dataError }),
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								onClick: () => setSchemaOpen(true),
 								children: "检查字段与绑定"
 							}),
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								onClick: () => void refresh(),
 								children: "重新连接"
 							})
 						]
 					}),
-					error && /* @__PURE__ */ jsxs("div", {
+					error && /* @__PURE__ */ jsxs(Alert, {
 						className: "sg-error",
 						role: "alert",
 						children: [
 							/* @__PURE__ */ jsx(AlertTriangle, { size: 16 }),
 							/* @__PURE__ */ jsxs("span", { children: [error, pending && "。待提交内容已保留。"] }),
-							pending && /* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsx("summary", { children: "查看保留的修改" }), pending.map((mutation) => /* @__PURE__ */ jsxs("p", { children: [
+							pending && /* @__PURE__ */ jsxs(Collapsible, { children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+								render: /* @__PURE__ */ jsx(Button, {
+									variant: "ghost",
+									type: "button"
+								}),
+								children: "查看保留的修改"
+							}), /* @__PURE__ */ jsx(CollapsibleContent, { children: pending.map((mutation) => /* @__PURE__ */ jsxs("p", { children: [
 								snapshot.base.tables.find((t) => t.id === mutation.tableId)?.name,
-								" · ",
+								" ·",
+								" ",
 								mutation.type === "delete" ? "删除记录" : Object.entries(mutation.values).map(([id, value]) => `${snapshot.base.tables.find((t) => t.id === mutation.tableId)?.fields.find((f) => f.id === id)?.name ?? id}：${displayValue(value)}`).join("；")
-							] }, `${mutation.tableId}/${mutation.id}`))] }),
-							/* @__PURE__ */ jsx("button", {
+							] }, `${mutation.tableId}/${mutation.id}`)) })] }),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								onClick: () => void refresh(),
 								children: "刷新数据"
 							}),
-							pending && /* @__PURE__ */ jsx("button", {
+							pending && /* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								onClick: () => {
-									const latest = snapshotRef.current;
-									if (!confirm("请确认已核对其他人的修改。将把保留的字段值提交到当前最新版本。")) return;
-									commit(pending.map((m) => m.type === "create" ? m : {
-										...m,
-										expectedVersion: latest.records[m.tableId]?.find((r) => r.id === m.id)?.version ?? m.expectedVersion
-									}));
+									setConfirmation({
+										title: "核对后重新提交",
+										description: "请确认已核对其他人的修改。将把保留的字段值提交到当前最新版本。",
+										action: () => {
+											const latest = snapshotRef.current;
+											commit(pending.map((m) => m.type === "create" ? m : {
+												...m,
+												expectedVersion: latest.records[m.tableId]?.find((r) => r.id === m.id)?.version ?? m.expectedVersion
+											}));
+										}
+									});
 								},
 								children: "核对后重新提交"
 							}),
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								"aria-label": "关闭错误提示",
 								onClick: () => setError(""),
 								children: /* @__PURE__ */ jsx(X, { size: 15 })
 							})
 						]
 					}),
-					Object.keys(snapshot.errors).length > 0 && /* @__PURE__ */ jsxs("div", {
+					Object.keys(snapshot.errors).length > 0 && /* @__PURE__ */ jsxs(Alert, {
 						className: "sg-error",
 						children: [
 							/* @__PURE__ */ jsx(Braces, { size: 16 }),
 							"有 ",
 							Object.keys(snapshot.errors).length,
 							" 个计算字段错误，请检查公式与引用。",
-							/* @__PURE__ */ jsx("button", {
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								type: "button",
 								onClick: () => setSchemaOpen(true),
 								children: "检查字段"
 							})
 						]
 					}),
-					/* @__PURE__ */ jsxs("div", {
+					/* @__PURE__ */ jsxs(TabsContent, {
+						value: view.id,
 						className: `sg-content sg-content-${view.type}`,
 						children: [
 							view.type === "grid" && (view.groupBy ? [...groups].map(([name, records]) => grid(records, name)) : grid(rows)),
 							view.type === "kanban" && board(),
-							view.type === "form" && /* @__PURE__ */ jsxs("div", {
+							view.type === "form" && /* @__PURE__ */ jsxs(Card, {
 								className: "sg-form-page",
 								children: [
 									/* @__PURE__ */ jsx("span", {
@@ -1418,7 +1581,7 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 							}),
 							view.type === "dashboard" && /* @__PURE__ */ jsxs("div", {
 								className: "sg-dashboard",
-								children: [/* @__PURE__ */ jsxs("div", {
+								children: [/* @__PURE__ */ jsxs(Card, {
 									className: "sg-metric",
 									children: [
 										/* @__PURE__ */ jsx("small", { children: "匹配记录" }),
@@ -1427,7 +1590,7 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 									]
 								}), table.fields.filter((f) => f.type === "number" || f.type === "rollup" || f.type === "formula").map((f) => {
 									const stats = summarize(rows, f.id);
-									return /* @__PURE__ */ jsxs("div", {
+									return /* @__PURE__ */ jsxs(Card, {
 										className: "sg-metric",
 										children: [
 											/* @__PURE__ */ jsxs("small", { children: [f.name, " · 合计"] }),
@@ -1463,10 +1626,54 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 					})
 				]
 			}),
-			record && /* @__PURE__ */ jsx(Modal, {
+			newTable && /* @__PURE__ */ jsx(Modal, {
+				title: "新增数据表",
+				close: () => setNewTable(false),
+				error,
+				children: /* @__PURE__ */ jsxs("form", {
+					className: "sg-record-form",
+					onSubmit: async (event) => {
+						event.preventDefault();
+						if (!newTableName.trim()) return;
+						const id = `t_${crypto.randomUUID().slice(0, 8)}`, base = structuredClone(snapshot.base);
+						base.tables.push({
+							id,
+							name: newTableName.trim(),
+							fields: [{
+								id: "name",
+								name: "名称",
+								type: "text",
+								required: true
+							}],
+							views: [{
+								id: "grid",
+								name: "全部记录",
+								type: "grid"
+							}]
+						});
+						if (await configure(base)) {
+							setTableId(id);
+							setNewTable(false);
+						}
+					},
+					children: [/* @__PURE__ */ jsxs(Label, { children: ["数据表名称", /* @__PURE__ */ jsx(Input, {
+						"aria-label": "数据表名称",
+						required: true,
+						maxLength: 200,
+						value: newTableName,
+						onChange: (event) => setNewTableName(event.target.value)
+					})] }), /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						disabled: busy,
+						children: "创建数据表"
+					}) })]
+				})
+			}),
+			!record && confirmationDialog,
+			record && /* @__PURE__ */ jsxs(Modal, {
 				title: record === "new" ? `新增${table.name}记录` : "记录详情",
 				close: () => setRecord(void 0),
-				children: /* @__PURE__ */ jsx(RecordForm, {
+				children: [/* @__PURE__ */ jsx(RecordForm, {
 					table,
 					row: record === "new" ? void 0 : record,
 					snapshot,
@@ -1489,16 +1696,22 @@ function MultiTableApp({ endpoint = "/api/multitable", client: suppliedClient })
 						return success;
 					},
 					onDelete: record === "new" ? void 0 : () => {
-						if (confirm("确认删除此记录？被其他记录引用时会拒绝删除。")) commit([{
-							type: "delete",
-							tableId: table.id,
-							id: record.id,
-							expectedVersion: record.version
-						}]).then((ok) => {
-							if (ok) setRecord(void 0);
+						setConfirmation({
+							title: "删除记录",
+							description: "确认删除此记录？被其他记录引用时会拒绝删除。",
+							action: () => {
+								commit([{
+									type: "delete",
+									tableId: table.id,
+									id: record.id,
+									expectedVersion: record.version
+								}]).then((ok) => {
+									if (ok) setRecord(void 0);
+								});
+							}
 						});
 					}
-				}, record === "new" ? "new" : record.id)
+				}, record === "new" ? "new" : record.id), confirmationDialog]
 			}),
 			schemaOpen && /* @__PURE__ */ jsx(SchemaEditor, {
 				snapshot,