@cisri/db-schema-editor 1.0.0

package/README.md

@@ -0,0 +1,70 @@
+# @cisri/db-schema-editor
+
+A database table schema editor based on shadcn/ui. Structurally express a database table — table name, columns, types, and constraints — and edit it through a tree/table UI.
+
+## 安装
+
+```bash
+npm install @cisri/db-schema-editor
+```
+
+## Peer Dependencies
+
+本组件依赖以下库，请确保你的项目已安装：
+
+```bash
+npm install react react-dom @radix-ui/react-checkbox @radix-ui/react-select @radix-ui/react-slot class-variance-authority clsx lucide-react tailwind-merge
+```
+
+## 使用
+
+```tsx
+import { useState } from 'react';
+import { DbSchemaEditor } from '@cisri/db-schema-editor';
+import type { DbTable } from '@cisri/db-schema-core';
+
+export default function App() {
+  const [table, setTable] = useState<DbTable>({
+    id: 't1',
+    name: 'users',
+    columns: [
+      { id: 'c1', name: 'id', type: 'uuid', nullable: false, primaryKey: true },
+      { id: 'c2', name: 'email', type: 'varchar', nullable: false, unique: true },
+    ],
+  });
+
+  return <DbSchemaEditor value={table} onChange={setTable} />;
+}
+```
+
+## Tailwind 配置
+
+确保 `tailwind.config.ts` 的 `content` 包含以下路径，否则组件的 Tailwind 类名不会被扫描到：
+
+```ts
+content: [
+  './node_modules/@cisri/db-schema-editor/dist/**/*.{js,cjs}',
+];
+```
+
+如果同时使用多个 `@cisri/*` 组件，可以使用通配符：
+
+```ts
+content: [
+  './node_modules/@cisri/*/dist/**/*.{js,cjs}',
+];
+```
+
+## CSS 变量
+
+本组件使用 shadcn/ui 标准 CSS 变量，可通过覆盖 `:root` 中的变量自定义主题。
+
+## 自定义样式
+
+```tsx
+<DbSchemaEditor
+  value={table}
+  onChange={setTable}
+  className="w-full max-w-2xl border-primary"
+/>
+```

package/dist/db-schema-editor.d.ts

@@ -0,0 +1,10 @@
+import { type DbTable } from '@cisri/db-schema-core';
+export interface DbSchemaEditorProps {
+    value: DbTable;
+    onChange: (value: DbTable) => void;
+    onSave?: (value: DbTable) => void;
+    readOnly?: boolean;
+    className?: string;
+}
+export declare function DbSchemaEditor({ value, onChange, onSave, readOnly, className, }: DbSchemaEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=db-schema-editor.d.ts.map

package/dist/db-schema-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"db-schema-editor.d.ts","sourceRoot":"","sources":["../src/db-schema-editor.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAIL,KAAK,OAAO,EACb,MAAM,uBAAuB,CAAC;AAY/B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsKD,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,mBAAmB,+BAuOrB"}

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),p=require("@dnd-kit/core"),w=require("@dnd-kit/sortable"),B=require("@dnd-kit/modifiers"),A=require("@dnd-kit/utilities"),t=require("@cisri/shadcn"),k=require("@cisri/core"),N=require("lucide-react"),v=require("@cisri/db-schema-core");function V(s,n,c){return{...s,columns:s.columns.map(a=>a.id===n?{...a,...c}:a)}}function T(s,n){const c=s.columns.findIndex(x=>x.id===n);if(c<0)return s;const a=[...s.columns];return a.splice(c+1,0,v.createEmptyColumn()),{...s,columns:a}}function z(s,n){return{...s,columns:s.columns.filter(c=>c.id!==n)}}function P(s,n,c){const a=s.columns.findIndex(l=>l.id===n),x=s.columns.findIndex(l=>l.id===c);if(a<0||x<0||a===x)return s;const d=[...s.columns],[h]=d.splice(a,1);return d.splice(x,0,h),{...s,columns:d}}function K(s,n){return{...s,name:n}}function F(s,n){return{...s,description:n}}function y(s,n){if(s===n)return!0;if(typeof s!="object"||typeof n!="object"||s==null||n==null)return!1;const c=Array.isArray(s),a=Array.isArray(n);if(c!==a)return!1;if(c){const b=s,j=n;return b.length===j.length&&b.every((f,C)=>y(f,j[C]))}const x=s,d=n,h=Object.keys(x),l=Object.keys(d);return h.length===l.length&&h.every(b=>y(x[b],d[b]))}const G=["varchar","text","integer","bigint","decimal","boolean","date","timestamp","uuid","jsonb"];function S({column:s,readOnly:n,disableDelete:c,onUpdate:a,onInsertBelow:x,onDelete:d}){const{attributes:h,listeners:l,setNodeRef:b,transform:j,transition:f,isDragging:C}=w.useSortable({id:s.id,disabled:n}),i=s.name||"未命名";return e.jsxs(t.TableRow,{ref:b,style:{transform:A.CSS.Transform.toString(j),transition:f},className:k.cn(C&&"opacity-50"),children:[e.jsx(t.TableCell,{className:"w-10 px-2",children:n?e.jsx("span",{className:"flex h-7 w-7 items-center justify-center text-muted-foreground/30",children:e.jsx(N.GripVertical,{className:"h-4 w-4"})}):e.jsx("button",{type:"button",className:"flex h-7 w-7 cursor-grab items-center justify-center text-muted-foreground active:cursor-grabbing","aria-label":`拖动列 ${i} 排序`,...h,...l,children:e.jsx(N.GripVertical,{className:"pointer-events-none h-4 w-4"})})}),e.jsx(t.TableCell,{children:e.jsx(t.Input,{"aria-label":`列 ${i} 名称`,autoComplete:"off",disabled:n,className:"h-7",value:s.name,onChange:o=>a({name:o.target.value})})}),e.jsx(t.TableCell,{children:e.jsxs(t.Select,{value:s.type,onValueChange:o=>a({type:o}),disabled:n,children:[e.jsx(t.SelectTrigger,{"aria-label":`列 ${i} 类型`,className:"h-7 w-28 text-xs",children:e.jsx(t.SelectValue,{})}),e.jsx(t.SelectContent,{children:G.map(o=>e.jsx(t.SelectItem,{value:o,className:"text-xs",children:o},o))})]})}),e.jsx(t.TableCell,{children:e.jsx(t.Checkbox,{"aria-label":`列 ${i} 可空`,checked:s.nullable,disabled:n,onCheckedChange:o=>a({nullable:o===!0})})}),e.jsx(t.TableCell,{children:e.jsx(t.Checkbox,{"aria-label":`列 ${i} 主键`,checked:s.primaryKey,disabled:n,onCheckedChange:o=>a({primaryKey:o===!0})})}),e.jsx(t.TableCell,{children:e.jsx(t.Checkbox,{"aria-label":`列 ${i} 唯一`,checked:s.unique,disabled:n,onCheckedChange:o=>a({unique:o===!0})})}),e.jsx(t.TableCell,{children:e.jsx(t.Input,{"aria-label":`列 ${i} 默认值`,autoComplete:"off",disabled:n,className:"h-7",value:s.defaultValue??"",onChange:o=>a({defaultValue:o.target.value||void 0})})}),e.jsx(t.TableCell,{children:e.jsx(t.Input,{"aria-label":`列 ${i} 描述`,autoComplete:"off",disabled:n,className:"h-7",value:s.description??"",onChange:o=>a({description:o.target.value||void 0})})}),e.jsx(t.TableCell,{children:!n&&e.jsxs("div",{className:"flex items-center justify-end gap-1",children:[e.jsx(t.Button,{type:"button",variant:"ghost",size:"icon",className:"h-7 w-7",onClick:x,"aria-label":`在列 ${i} 下方添加列`,children:e.jsx(N.Plus,{className:"h-4 w-4"})}),e.jsx(t.Button,{type:"button",variant:"ghost",size:"icon",className:"h-7 w-7",disabled:c,onClick:d,"aria-label":`删除列 ${i}`,children:e.jsx(N.Trash2,{className:"h-4 w-4 text-destructive"})})]})})]})}function L({value:s,onChange:n,onSave:c,readOnly:a,className:x}){const[d,h]=m.useState(()=>({history:[s],index:0})),l=d.history[d.index],b=m.useRef(d);m.useEffect(()=>{b.current=d},[d]);const j=m.useRef(s),[f]=m.useState(()=>v.createEmptyColumn());m.useEffect(()=>{y(s,j.current)||(h({history:[s],index:0}),j.current=s)},[s]);const C=m.useCallback(r=>{h(u=>y(u.history[u.index],r)?u:{history:[...u.history.slice(0,u.index+1),r],index:u.index+1})},[]),i=m.useCallback(r=>{j.current=r,C(r),n(r)},[n,C]),o=d.index>0,I=d.index<d.history.length-1,R=m.useCallback(()=>{const r=b.current;if(r.index<=0)return;const u=r.index-1,g=r.history[u];h({...r,index:u}),j.current=g,n(g)},[n]),q=m.useCallback(()=>{const r=b.current;if(r.index>=r.history.length-1)return;const u=r.index+1,g=r.history[u];h({...r,index:u}),j.current=g,n(g)},[n]),E=m.useCallback(()=>{c==null||c(l)},[c,l]),D=p.useSensors(p.useSensor(p.PointerSensor,{activationConstraint:{distance:5}}),p.useSensor(p.KeyboardSensor,{coordinateGetter:w.sortableKeyboardCoordinates})),$=m.useCallback(r=>{const{active:u,over:g}=r;!g||u.id===g.id||i(P(l,String(u.id),String(g.id)))},[i,l]),H=l.columns.length>0?l.columns.map(r=>r.id):a?[]:[f.id];return e.jsxs("div",{className:k.cn("rounded-md border border-border bg-card text-card-foreground",x),children:[e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-2 border-b border-border p-2",children:[e.jsx("div",{className:"text-sm font-medium",children:"数据库表编辑器"}),e.jsxs("div",{className:"flex items-center gap-2",children:[!a&&c&&e.jsx(t.Button,{type:"button",size:"sm",onClick:E,className:"h-7 text-xs",children:"保存"}),!a&&e.jsxs(e.Fragment,{children:[e.jsx(t.Button,{type:"button",variant:"ghost",size:"icon",onClick:R,disabled:!o,className:"h-7 w-7","aria-label":"撤销",children:e.jsx(N.Undo2,{className:"h-4 w-4"})}),e.jsx(t.Button,{type:"button",variant:"ghost",size:"icon",onClick:q,disabled:!I,className:"h-7 w-7","aria-label":"恢复",children:e.jsx(N.Redo2,{className:"h-4 w-4"})})]})]})]}),e.jsxs("div",{className:"space-y-2 border-b border-border p-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("label",{htmlFor:"db-table-name",className:"w-10 shrink-0 text-xs text-muted-foreground",children:"表名"}),e.jsx(t.Input,{id:"db-table-name",autoComplete:"off",disabled:a,className:"h-7",value:l.name,onChange:r=>i(K(l,r.target.value))})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("label",{htmlFor:"db-table-description",className:"w-10 shrink-0 text-xs text-muted-foreground",children:"描述"}),e.jsx(t.Input,{id:"db-table-description",autoComplete:"off",disabled:a,className:"h-7",value:l.description??"",onChange:r=>i(F(l,r.target.value||void 0))})]})]}),e.jsx(p.DndContext,{sensors:D,collisionDetection:p.closestCenter,modifiers:[B.restrictToVerticalAxis],onDragEnd:$,children:e.jsxs(t.Table,{children:[e.jsx(t.TableHeader,{children:e.jsxs(t.TableRow,{children:[e.jsx(t.TableHead,{className:"w-10"}),e.jsx(t.TableHead,{className:"w-[20%]",children:"名称"}),e.jsx(t.TableHead,{className:"w-[12%]",children:"类型"}),e.jsx(t.TableHead,{className:"w-[8%]",children:"可空"}),e.jsx(t.TableHead,{className:"w-[8%]",children:"主键"}),e.jsx(t.TableHead,{className:"w-[8%]",children:"唯一"}),e.jsx(t.TableHead,{className:"w-[14%]",children:"默认值"}),e.jsx(t.TableHead,{className:"w-[20%]",children:"描述"}),e.jsx(t.TableHead,{className:"w-[10%]"})]})}),e.jsx(t.TableBody,{children:e.jsx(w.SortableContext,{items:H,strategy:w.verticalListSortingStrategy,children:l.columns.length===0?a?e.jsx(t.TableRow,{children:e.jsx(t.TableCell,{colSpan:9,className:"h-12 text-center text-sm text-muted-foreground",children:"暂无列"})}):e.jsx(S,{column:f,disableDelete:!0,onUpdate:r=>i({...l,columns:[{...f,...r}]}),onInsertBelow:()=>i(T({...l,columns:[f]},f.id)),onDelete:()=>{}},f.id):l.columns.map(r=>e.jsx(S,{column:r,readOnly:a,onUpdate:u=>i(V(l,r.id,u)),onInsertBelow:()=>i(T(l,r.id)),onDelete:()=>i(z(l,r.id))},r.id))})})]})})]})}exports.DbSchemaEditor=L;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { DbSchemaEditor } from './db-schema-editor';
+export type { DbSchemaEditorProps } from './db-schema-editor';
+export type { DbTable, DbColumn, DbColumnType } from '@cisri/db-schema-core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAC9D,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,373 @@
+import { jsxs as u, jsx as e, Fragment as L } from "react/jsx-runtime";
+import { useState as j, useRef as I, useEffect as D, useCallback as w } from "react";
+import { useSensors as Y, useSensor as $, PointerSensor as _, KeyboardSensor as J, DndContext as M, closestCenter as Q } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates as W, SortableContext as X, verticalListSortingStrategy as Z, useSortable as U } from "@dnd-kit/sortable";
+import { restrictToVerticalAxis as O } from "@dnd-kit/modifiers";
+import { CSS as ee } from "@dnd-kit/utilities";
+import { Button as y, Input as v, Table as te, TableHeader as ne, TableRow as T, TableHead as N, TableBody as re, TableCell as p, Select as se, SelectTrigger as ie, SelectValue as ae, SelectContent as oe, SelectItem as le, Checkbox as k } from "@cisri/shadcn";
+import { cn as V } from "@cisri/core";
+import { Undo2 as ce, Redo2 as de, GripVertical as E, Plus as me, Trash2 as ue } from "lucide-react";
+import { createEmptyColumn as z } from "@cisri/db-schema-core";
+function he(t, n, o) {
+  return {
+    ...t,
+    columns: t.columns.map((s) => s.id === n ? { ...s, ...o } : s)
+  };
+}
+function R(t, n) {
+  const o = t.columns.findIndex((m) => m.id === n);
+  if (o < 0) return t;
+  const s = [...t.columns];
+  return s.splice(o + 1, 0, z()), { ...t, columns: s };
+}
+function fe(t, n) {
+  return { ...t, columns: t.columns.filter((o) => o.id !== n) };
+}
+function be(t, n, o) {
+  const s = t.columns.findIndex((i) => i.id === n), m = t.columns.findIndex((i) => i.id === o);
+  if (s < 0 || m < 0 || s === m) return t;
+  const c = [...t.columns], [h] = c.splice(s, 1);
+  return c.splice(m, 0, h), { ...t, columns: c };
+}
+function xe(t, n) {
+  return { ...t, name: n };
+}
+function pe(t, n) {
+  return { ...t, description: n };
+}
+function S(t, n) {
+  if (t === n) return !0;
+  if (typeof t != "object" || typeof n != "object" || t == null || n == null) return !1;
+  const o = Array.isArray(t), s = Array.isArray(n);
+  if (o !== s) return !1;
+  if (o) {
+    const f = t, b = n;
+    return f.length === b.length && f.every((x, C) => S(x, b[C]));
+  }
+  const m = t, c = n, h = Object.keys(m), i = Object.keys(c);
+  return h.length === i.length && h.every((f) => S(m[f], c[f]));
+}
+const ge = [
+  "varchar",
+  "text",
+  "integer",
+  "bigint",
+  "decimal",
+  "boolean",
+  "date",
+  "timestamp",
+  "uuid",
+  "jsonb"
+];
+function A({
+  column: t,
+  readOnly: n,
+  disableDelete: o,
+  onUpdate: s,
+  onInsertBelow: m,
+  onDelete: c
+}) {
+  const { attributes: h, listeners: i, setNodeRef: f, transform: b, transition: x, isDragging: C } = U({ id: t.id, disabled: n }), a = t.name || "未命名";
+  return /* @__PURE__ */ u(
+    T,
+    {
+      ref: f,
+      style: { transform: ee.Transform.toString(b), transition: x },
+      className: V(C && "opacity-50"),
+      children: [
+        /* @__PURE__ */ e(p, { className: "w-10 px-2", children: n ? /* @__PURE__ */ e("span", { className: "flex h-7 w-7 items-center justify-center text-muted-foreground/30", children: /* @__PURE__ */ e(E, { className: "h-4 w-4" }) }) : /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "flex h-7 w-7 cursor-grab items-center justify-center text-muted-foreground active:cursor-grabbing",
+            "aria-label": `拖动列 ${a} 排序`,
+            ...h,
+            ...i,
+            children: /* @__PURE__ */ e(E, { className: "pointer-events-none h-4 w-4" })
+          }
+        ) }),
+        /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
+          v,
+          {
+            "aria-label": `列 ${a} 名称`,
+            autoComplete: "off",
+            disabled: n,
+            className: "h-7",
+            value: t.name,
+            onChange: (l) => s({ name: l.target.value })
+          }
+        ) }),
+        /* @__PURE__ */ e(p, { children: /* @__PURE__ */ u(
+          se,
+          {
+            value: t.type,
+            onValueChange: (l) => s({ type: l }),
+            disabled: n,
+            children: [
+              /* @__PURE__ */ e(ie, { "aria-label": `列 ${a} 类型`, className: "h-7 w-28 text-xs", children: /* @__PURE__ */ e(ae, {}) }),
+              /* @__PURE__ */ e(oe, { children: ge.map((l) => /* @__PURE__ */ e(le, { value: l, className: "text-xs", children: l }, l)) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
+          k,
+          {
+            "aria-label": `列 ${a} 可空`,
+            checked: t.nullable,
+            disabled: n,
+            onCheckedChange: (l) => s({ nullable: l === !0 })
+          }
+        ) }),
+        /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
+          k,
+          {
+            "aria-label": `列 ${a} 主键`,
+            checked: t.primaryKey,
+            disabled: n,
+            onCheckedChange: (l) => s({ primaryKey: l === !0 })
+          }
+        ) }),
+        /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
+          k,
+          {
+            "aria-label": `列 ${a} 唯一`,
+            checked: t.unique,
+            disabled: n,
+            onCheckedChange: (l) => s({ unique: l === !0 })
+          }
+        ) }),
+        /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
+          v,
+          {
+            "aria-label": `列 ${a} 默认值`,
+            autoComplete: "off",
+            disabled: n,
+            className: "h-7",
+            value: t.defaultValue ?? "",
+            onChange: (l) => s({ defaultValue: l.target.value || void 0 })
+          }
+        ) }),
+        /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(
+          v,
+          {
+            "aria-label": `列 ${a} 描述`,
+            autoComplete: "off",
+            disabled: n,
+            className: "h-7",
+            value: t.description ?? "",
+            onChange: (l) => s({ description: l.target.value || void 0 })
+          }
+        ) }),
+        /* @__PURE__ */ e(p, { children: !n && /* @__PURE__ */ u("div", { className: "flex items-center justify-end gap-1", children: [
+          /* @__PURE__ */ e(
+            y,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "h-7 w-7",
+              onClick: m,
+              "aria-label": `在列 ${a} 下方添加列`,
+              children: /* @__PURE__ */ e(me, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ e(
+            y,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "h-7 w-7",
+              disabled: o,
+              onClick: c,
+              "aria-label": `删除列 ${a}`,
+              children: /* @__PURE__ */ e(ue, { className: "h-4 w-4 text-destructive" })
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+function De({
+  value: t,
+  onChange: n,
+  onSave: o,
+  readOnly: s,
+  className: m
+}) {
+  const [c, h] = j(() => ({
+    history: [t],
+    index: 0
+  })), i = c.history[c.index], f = I(c);
+  D(() => {
+    f.current = c;
+  }, [c]);
+  const b = I(t), [x] = j(() => z());
+  D(() => {
+    S(t, b.current) || (h({ history: [t], index: 0 }), b.current = t);
+  }, [t]);
+  const C = w((r) => {
+    h((d) => S(d.history[d.index], r) ? d : {
+      history: [...d.history.slice(0, d.index + 1), r],
+      index: d.index + 1
+    });
+  }, []), a = w(
+    (r) => {
+      b.current = r, C(r), n(r);
+    },
+    [n, C]
+  ), l = c.index > 0, B = c.index < c.history.length - 1, K = w(() => {
+    const r = f.current;
+    if (r.index <= 0) return;
+    const d = r.index - 1, g = r.history[d];
+    h({ ...r, index: d }), b.current = g, n(g);
+  }, [n]), P = w(() => {
+    const r = f.current;
+    if (r.index >= r.history.length - 1) return;
+    const d = r.index + 1, g = r.history[d];
+    h({ ...r, index: d }), b.current = g, n(g);
+  }, [n]), q = w(() => {
+    o == null || o(i);
+  }, [o, i]), F = Y(
+    $(_, { activationConstraint: { distance: 5 } }),
+    $(J, { coordinateGetter: W })
+  ), G = w(
+    (r) => {
+      const { active: d, over: g } = r;
+      !g || d.id === g.id || a(be(i, String(d.id), String(g.id)));
+    },
+    [a, i]
+  ), H = i.columns.length > 0 ? i.columns.map((r) => r.id) : s ? [] : [x.id];
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: V(
+        "rounded-md border border-border bg-card text-card-foreground",
+        m
+      ),
+      children: [
+        /* @__PURE__ */ u("div", { className: "flex flex-wrap items-center justify-between gap-2 border-b border-border p-2", children: [
+          /* @__PURE__ */ e("div", { className: "text-sm font-medium", children: "数据库表编辑器" }),
+          /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+            !s && o && /* @__PURE__ */ e(y, { type: "button", size: "sm", onClick: q, className: "h-7 text-xs", children: "保存" }),
+            !s && /* @__PURE__ */ u(L, { children: [
+              /* @__PURE__ */ e(
+                y,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: K,
+                  disabled: !l,
+                  className: "h-7 w-7",
+                  "aria-label": "撤销",
+                  children: /* @__PURE__ */ e(ce, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ e(
+                y,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  onClick: P,
+                  disabled: !B,
+                  className: "h-7 w-7",
+                  "aria-label": "恢复",
+                  children: /* @__PURE__ */ e(de, { className: "h-4 w-4" })
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ u("div", { className: "space-y-2 border-b border-border p-2", children: [
+          /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e("label", { htmlFor: "db-table-name", className: "w-10 shrink-0 text-xs text-muted-foreground", children: "表名" }),
+            /* @__PURE__ */ e(
+              v,
+              {
+                id: "db-table-name",
+                autoComplete: "off",
+                disabled: s,
+                className: "h-7",
+                value: i.name,
+                onChange: (r) => a(xe(i, r.target.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e(
+              "label",
+              {
+                htmlFor: "db-table-description",
+                className: "w-10 shrink-0 text-xs text-muted-foreground",
+                children: "描述"
+              }
+            ),
+            /* @__PURE__ */ e(
+              v,
+              {
+                id: "db-table-description",
+                autoComplete: "off",
+                disabled: s,
+                className: "h-7",
+                value: i.description ?? "",
+                onChange: (r) => a(pe(i, r.target.value || void 0))
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
+          M,
+          {
+            sensors: F,
+            collisionDetection: Q,
+            modifiers: [O],
+            onDragEnd: G,
+            children: /* @__PURE__ */ u(te, { children: [
+              /* @__PURE__ */ e(ne, { children: /* @__PURE__ */ u(T, { children: [
+                /* @__PURE__ */ e(N, { className: "w-10" }),
+                /* @__PURE__ */ e(N, { className: "w-[20%]", children: "名称" }),
+                /* @__PURE__ */ e(N, { className: "w-[12%]", children: "类型" }),
+                /* @__PURE__ */ e(N, { className: "w-[8%]", children: "可空" }),
+                /* @__PURE__ */ e(N, { className: "w-[8%]", children: "主键" }),
+                /* @__PURE__ */ e(N, { className: "w-[8%]", children: "唯一" }),
+                /* @__PURE__ */ e(N, { className: "w-[14%]", children: "默认值" }),
+                /* @__PURE__ */ e(N, { className: "w-[20%]", children: "描述" }),
+                /* @__PURE__ */ e(N, { className: "w-[10%]" })
+              ] }) }),
+              /* @__PURE__ */ e(re, { children: /* @__PURE__ */ e(X, { items: H, strategy: Z, children: i.columns.length === 0 ? s ? /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e(p, { colSpan: 9, className: "h-12 text-center text-sm text-muted-foreground", children: "暂无列" }) }) : /* @__PURE__ */ e(
+                A,
+                {
+                  column: x,
+                  disableDelete: !0,
+                  onUpdate: (r) => a({ ...i, columns: [{ ...x, ...r }] }),
+                  onInsertBelow: () => a(
+                    R({ ...i, columns: [x] }, x.id)
+                  ),
+                  onDelete: () => {
+                  }
+                },
+                x.id
+              ) : i.columns.map((r) => /* @__PURE__ */ e(
+                A,
+                {
+                  column: r,
+                  readOnly: s,
+                  onUpdate: (d) => a(he(i, r.id, d)),
+                  onInsertBelow: () => a(R(i, r.id)),
+                  onDelete: () => a(fe(i, r.id))
+                },
+                r.id
+              )) }) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  De as DbSchemaEditor
+};

package/dist/schema-utils.d.ts

@@ -0,0 +1,20 @@
+import type { DbColumn, DbTable } from '@cisri/db-schema-core';
+/** 列字段的部分更新（不可更新 id）。 */
+export type ColumnPatch = Partial<Omit<DbColumn, 'id'>>;
+/** 更新指定列的字段，返回新表。 */
+export declare function updateColumn(table: DbTable, id: string, patch: ColumnPatch): DbTable;
+/** 追加一个空列（默认 varchar、可空）。 */
+export declare function addColumn(table: DbTable, name?: string): DbTable;
+/** 在指定列下方插入一个空列；找不到 id 时返回原表。 */
+export declare function insertColumnBelow(table: DbTable, id: string): DbTable;
+/** 按 id 删除列。 */
+export declare function deleteColumn(table: DbTable, id: string): DbTable;
+/** 将 fromId 列移动到 toId 列的位置（dnd-kit onDragEnd 语义：active 落到 over 的位置）；任一 id 不存在或相同时返回原表。 */
+export declare function reorderColumns(table: DbTable, fromId: string, toId: string): DbTable;
+/** 更新表名。 */
+export declare function updateTableName(table: DbTable, name: string): DbTable;
+/** 更新表描述（传 undefined 清除）。 */
+export declare function updateTableDescription(table: DbTable, description: string | undefined): DbTable;
+/** 深比较，用于历史去重与外部 value 同步判断。 */
+export declare function deepEqual(a: unknown, b: unknown): boolean;
+//# sourceMappingURL=schema-utils.d.ts.map

package/dist/schema-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema-utils.d.ts","sourceRoot":"","sources":["../src/schema-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAG/D,yBAAyB;AACzB,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;AAExD,qBAAqB;AACrB,wBAAgB,YAAY,CAC1B,KAAK,EAAE,OAAO,EACd,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,WAAW,GACjB,OAAO,CAKT;AAED,6BAA6B;AAC7B,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,SAAK,GAAG,OAAO,CAE5D;AAED,iCAAiC;AACjC,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,GAAG,OAAO,CAMrE;AAED,gBAAgB;AAChB,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,GAAG,OAAO,CAEhE;AAED,0FAA0F;AAC1F,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAQpF;AAED,YAAY;AACZ,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAErE;AAED,6BAA6B;AAC7B,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,OAAO,EACd,WAAW,EAAE,MAAM,GAAG,SAAS,GAC9B,OAAO,CAET;AAED,gCAAgC;AAChC,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,CAgBzD"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@cisri/db-schema-editor",
+  "version": "1.0.0",
+  "description": "Database table schema editor business component based on shadcn/ui",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@cisri/core": "1.0.0",
+    "@cisri/db-schema-core": "1.0.0",
+    "@cisri/shadcn": "1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "lucide-react": "^0.300.0",
+    "@dnd-kit/core": "^6.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/utilities": "^3.2.0"
+  },
+  "peerDependenciesMeta": {
+    "lucide-react": {
+      "optional": false
+    },
+    "@dnd-kit/core": {
+      "optional": false
+    },
+    "@dnd-kit/sortable": {
+      "optional": false
+    },
+    "@dnd-kit/modifiers": {
+      "optional": false
+    },
+    "@dnd-kit/utilities": {
+      "optional": false
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^15.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "jsdom": "^24.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vitest": "^1.6.0",
+    "@vitejs/plugin-react": "^4.2.0"
+  },
+  "scripts": {
+    "build": "tsc && vite build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}