@xbeeant/form-engine-designer 0.0.1

package/src/Designer.css

@@ -0,0 +1,206 @@
+/* ============================================================================
+ * @xbeeant/form-engine-designer — Tailwind 无法表达的样式
+ *
+ * 注意：本包使用 Tailwind 工具类，但不在此导入 Tailwind CSS。
+ * 消费方需在自己的 CSS 中引入 Tailwind 并通过 @source 扫描本包源码，例如：
+ *   @import "tailwindcss";
+ *   @source "../../designer/src";
+ * ========================================================================== */
+
+/* 拖拽插入指示线：使用伪元素，无法用工具类表达 */
+.drop-indicator-line::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 3px;
+  background: #1677ff;
+  border-radius: 2px;
+  box-shadow: 0 0 8px rgba(22, 119, 255, 0.6);
+  animation: nexus-drop-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes nexus-drop-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+/* 面板拖拽手柄 — 中间 4px 区域常驻极淡分隔线，hover 时整条 5px 通栏高亮 */
+.nexus-resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 5px;
+  cursor: col-resize;
+  z-index: 10;
+  background: transparent;
+  transition: background 150ms;
+}
+
+.nexus-resize-handle::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1px;
+  background: #e8e8e8;
+  transition:
+    background 150ms,
+    width 150ms;
+}
+
+.nexus-resize-handle:hover,
+.nexus-resize-handle.nexus-resize-active {
+  background: rgba(22, 119, 255, 0.08);
+}
+
+.nexus-resize-handle:hover::after,
+.nexus-resize-handle.nexus-resize-active::after {
+  width: 4px;
+  background: #1677ff;
+  border-radius: 2px;
+}
+
+/* ────────────────────────────────────────────────────────────────
+ * 侧边面板折叠按钮
+ * ──────────────────────────────────────────────────────────────── */
+.nexus-panel-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #e8e8e8;
+  border-radius: 999px;
+  background: #fff;
+  color: #999;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  transition:
+    color 150ms,
+    border-color 150ms,
+    background 150ms,
+    box-shadow 150ms;
+}
+
+.nexus-panel-toggle:hover {
+  color: #1677ff;
+  border-color: #1677ff;
+  background: #f0f7ff;
+  box-shadow: 0 2px 6px rgba(22, 119, 255, 0.15);
+}
+
+/* ────────────────────────────────────────────────────────────────
+ * 组件面板（Palette）
+ * ──────────────────────────────────────────────────────────────── */
+.nexus-palette-search.ant-input-affix-wrapper {
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+/* 折叠分组：无边框卡片式 */
+.nexus-palette-collapse {
+  background: transparent;
+  border: none;
+}
+
+.nexus-palette-collapse > .ant-collapse-item {
+  margin-bottom: 8px;
+  overflow: hidden;
+  border: 1px solid #f0f0f0;
+  border-radius: 10px;
+  background: #fff;
+}
+
+.nexus-palette-collapse > .ant-collapse-item:last-child {
+  margin-bottom: 0;
+}
+
+.nexus-palette-collapse > .ant-collapse-item > .ant-collapse-header {
+  padding: 9px 10px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #333;
+  align-items: center;
+  background: #fff;
+  transition: background 150ms;
+}
+
+.nexus-palette-collapse > .ant-collapse-item > .ant-collapse-header:hover {
+  background: #fafbfc;
+}
+
+.nexus-palette-collapse
+  > .ant-collapse-item
+  > .ant-collapse-header
+  .ant-collapse-arrow {
+  font-size: 10px;
+  color: #999;
+}
+
+.nexus-palette-collapse
+  > .ant-collapse-item
+  > .ant-collapse-content
+  > .ant-collapse-content-box {
+  padding: 8px 0 4px;
+}
+
+/* ────────────────────────────────────────────────────────────────
+ * 属性面板（PropertyPanel）
+ * ──────────────────────────────────────────────────────────────── */
+.nexus-key-input.ant-input {
+  border-radius: 6px;
+}
+
+/* 属性表单内的 antd Collapse 分区：无边框、紧凑 */
+.nexus-property-body .ant-collapse {
+  background: transparent;
+  border: none;
+}
+
+.nexus-property-body .ant-collapse > .ant-collapse-item {
+  margin-bottom: 8px;
+  overflow: hidden;
+  border: 1px solid #f0f0f0;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.nexus-property-body .ant-collapse > .ant-collapse-item:last-child {
+  margin-bottom: 0;
+}
+
+.nexus-property-body .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  padding: 8px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #333;
+  align-items: center;
+}
+
+.nexus-property-body
+  .ant-collapse
+  > .ant-collapse-item
+  > .ant-collapse-header
+  .ant-collapse-arrow {
+  font-size: 10px;
+  color: #999;
+}
+
+.nexus-property-body
+  .ant-collapse
+  > .ant-collapse-item
+  > .ant-collapse-content
+  > .ant-collapse-content-box {
+  padding: 8px 10px 4px;
+}

package/src/Designer.tsx

@@ -0,0 +1,254 @@
+// ============================================================================
+// @xbeeant/form-engine-designer — 主组件
+// ============================================================================
+
+import type { NexusEngine, NexusSchema } from '@xbeeant/form-engine';
+import type { PropertySchemaMap } from '@xbeeant/form-engine-ui';
+import { registerAntdUI, widgetSchemas } from '@xbeeant/form-engine-ui';
+import {
+  Button,
+  Input,
+  message,
+  Popconfirm,
+  Radio,
+  Space,
+  Typography,
+} from 'antd';
+import { useMemo, useState } from 'react';
+import { Canvas } from './Canvas';
+import './Designer.css';
+import { layoutCatalog, widgetCatalog } from './catalog';
+import { DesignerProvider, useDesigner } from './DesignerContext';
+import { Palette } from './Palette';
+import { PropertyPanel } from './PropertyPanel';
+import { ResizablePanel } from './ResizablePanel';
+import type { CatalogItem, DesignerMode, FieldDef } from './types';
+
+const DEFAULT_SCHEMA: NexusSchema = {
+  type: 'object',
+  displayType: 'row',
+  properties: {},
+};
+
+export interface DesignerProps {
+  schema?: NexusSchema;
+  /**
+   * widget 名 → 属性描述符映射，决定属性面板「组件属性」分区展示哪些配置项。
+   * 默认使用 @xbeeant/form-engine-ui 的 widgetSchemas（antd 组件全覆盖）；
+   * 传入自定义映射可整体替换，也可在默认基础上按 widget 名覆盖（如
+   * `{ ...widgetSchemas, input: myInputSchema }`）。
+   */
+  propertySchemaMap?: PropertySchemaMap;
+  onSchemaChange?: (schema: NexusSchema) => void;
+  /**
+   * UI 注册函数，向引擎注册 widgets 和 layouts。
+   * 默认使用 @xbeeant/form-engine-ui 的 registerAntdUI；接入其它 UI 库时传入自定义注册函数。
+   */
+  registerUI?: (engine: NexusEngine) => void;
+  /** 外部字段列表，传入后左侧 palette 多一个「字段列表」分组 */
+  fields?: FieldDef[];
+  /** 额外的 widget 目录项，与内置 widgetCatalog 合并（同 widget 名时外部覆盖内置） */
+  widgetCatalog?: CatalogItem[];
+  /** 额外的 layout 目录项，与内置 layoutCatalog 合并（同 layoutType 时外部覆盖内置） */
+  layoutCatalog?: CatalogItem[];
+}
+
+export function Designer({
+  schema,
+  propertySchemaMap = widgetSchemas,
+  onSchemaChange,
+  registerUI = registerAntdUI,
+  fields,
+  widgetCatalog: extraWidgetCatalog,
+  layoutCatalog: extraLayoutCatalog,
+}: DesignerProps) {
+  const initialSchema = useMemo<NexusSchema>(
+    () => schema ?? DEFAULT_SCHEMA,
+    [schema],
+  );
+
+  // 合并内置 catalog 与外部传入的 catalog：外部同名项覆盖内置
+  const mergedWidgetCatalog = useMemo(
+    () => mergeCatalog(widgetCatalog, extraWidgetCatalog, 'widget'),
+    [extraWidgetCatalog],
+  );
+  const mergedLayoutCatalog = useMemo(
+    () => mergeCatalog(layoutCatalog, extraLayoutCatalog, 'layoutType'),
+    [extraLayoutCatalog],
+  );
+
+  return (
+    <DesignerProvider
+      initialSchema={initialSchema}
+      onSchemaChange={onSchemaChange}
+      registerUI={registerUI}
+      fields={fields}
+      propertySchemaMap={propertySchemaMap}
+      widgetCatalog={mergedWidgetCatalog}
+      layoutCatalog={mergedLayoutCatalog}
+    >
+      <DesignerForm />
+    </DesignerProvider>
+  );
+}
+
+// 合并内置与外部 catalog：外部项按 key 覆盖内置同名项，其余追加到末尾
+function mergeCatalog(
+  builtIn: CatalogItem[],
+  extra: CatalogItem[] | undefined,
+  keyField: 'widget' | 'layoutType',
+): CatalogItem[] {
+  if (!extra || extra.length === 0) {
+    return builtIn;
+  }
+  const extraKeys = new Set(extra.map((c) => c[keyField]).filter(Boolean));
+  const preserved = builtIn.filter((c) => !extraKeys.has(c[keyField]));
+  return [...preserved, ...extra];
+}
+
+function DesignerForm() {
+  const { mode, setMode, schema, setSchema, selectNode } = useDesigner();
+  const [schemaText, setSchemaText] = useState('');
+  const [schemaActive, setSchemaActive] = useState(false);
+
+  // 清空画布：重置为空 schema 并取消选中（必须新建对象，保证触发重渲染）
+  const handleClearSchema = () => {
+    setSchema(DEFAULT_SCHEMA);
+    selectNode(null);
+    if (mode === 'schema') {
+      setSchemaText(JSON.stringify(DEFAULT_SCHEMA, null, 2));
+    }
+  };
+
+  // 进入 schema 模式时同步当前 schema 到编辑框
+  const handleEnterSchema = () => {
+    setSchemaText(JSON.stringify(schema, null, 2));
+    setSchemaActive(true);
+  };
+
+  // 离开 schema 模式时尝试解析并写回
+  const handleLeaveSchema = () => {
+    if (!schemaActive) {
+      return;
+    }
+    try {
+      const parsed = JSON.parse(schemaText) as NexusSchema;
+      if (parsed && parsed.type === 'object' && parsed.properties) {
+        setSchema(parsed);
+      } else {
+        message.warning('Schema 必须包含 type: "object" 和 properties');
+      }
+    } catch {
+      message.error('JSON 格式错误，无法解析');
+    }
+    setSchemaActive(false);
+  };
+
+  // Radio.Group 切换
+  const handleModeChange = (value: DesignerMode) => {
+    if (value === 'schema') {
+      handleEnterSchema();
+    } else {
+      handleLeaveSchema();
+    }
+    setMode(value);
+  };
+
+  const handleExport = () => {
+    const json = JSON.stringify(schema, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'schema.json';
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleImport = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'application/json';
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (!file) {
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = () => {
+        try {
+          const parsed = JSON.parse(reader.result as string) as NexusSchema;
+          if (parsed && parsed.type === 'object' && parsed.properties) {
+            setSchema(parsed);
+          }
+        } catch {
+          // 忽略非法 JSON
+        }
+      };
+      reader.readAsText(file);
+    };
+    input.click();
+  };
+
+  return (
+    <div className='flex flex-col h-full bg-white'>
+      <div className='flex items-center justify-between px-4 py-2 border-b border-[#f0f0f0] bg-[#fafafa]'>
+        <Typography.Text strong>Nexus 表单设计器</Typography.Text>
+        <Space>
+          <Radio.Group
+            value={mode}
+            onChange={(e) => handleModeChange(e.target.value as DesignerMode)}
+          >
+            <Radio.Button value='design'>设计</Radio.Button>
+            <Radio.Button value='preview'>预览</Radio.Button>
+            <Radio.Button value='schema'>Schema</Radio.Button>
+          </Radio.Group>
+          <Button onClick={handleImport}>导入</Button>
+          <Button onClick={handleExport}>导出</Button>
+          <Popconfirm
+            title='清空画布'
+            description='将移除画布上所有组件，此操作不可撤销'
+            okText='清空'
+            cancelText='取消'
+            okButtonProps={{ danger: true }}
+            onConfirm={handleClearSchema}
+          >
+            <Button danger>清空</Button>
+          </Popconfirm>
+        </Space>
+      </div>
+      {mode === 'schema' ? (
+        <div className='flex-1 overflow-auto p-4 bg-[#1e1e1e]'>
+          <Input.TextArea
+            value={schemaText}
+            onChange={(e) => setSchemaText(e.target.value)}
+            autoSize={{ minRows: 20 }}
+            className='font-mono! text-[13px]! leading-[1.6]! bg-[#1e1e1e]! text-[#d4d4d4]! border-[#3e3e42]!'
+          />
+        </div>
+      ) : (
+        <div className='flex flex-1 overflow-hidden'>
+          <ResizablePanel
+            side='left'
+            defaultWidth={240}
+            minWidth={160}
+            maxWidth={420}
+            collapsedTitle='组件面板'
+          >
+            <Palette />
+          </ResizablePanel>
+          <Canvas />
+          <ResizablePanel
+            side='right'
+            defaultWidth={320}
+            minWidth={240}
+            maxWidth={560}
+            collapsedTitle='属性面板'
+          >
+            <PropertyPanel />
+          </ResizablePanel>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/DesignerContext.tsx

@@ -0,0 +1,192 @@
+// ============================================================================
+// @xbeeant/form-engine-designer — 设计器状态上下文
+// ============================================================================
+
+import type {
+  NexusEngine,
+  NexusSchema,
+  SchemaNode,
+} from '@xbeeant/form-engine';
+import type { PropertySchemaMap } from '@xbeeant/form-engine-ui';
+import type { ReactNode } from 'react';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  addChildToSchema,
+  moveNodeInSchema,
+  removeNodeFromSchema,
+  renameNodeInSchema,
+  updateNodeWithNesting,
+} from './schemaUtils';
+import type { CatalogItem, DesignerMode, FieldDef } from './types';
+
+/** 设计器内部状态 */
+export interface DesignerState {
+  schema: NexusSchema;
+  selectedPath: string[] | null;
+  mode: DesignerMode;
+}
+
+export interface DesignerContextValue {
+  schema: NexusSchema;
+  propertySchemaMap: PropertySchemaMap;
+  selectedPath: string[] | null;
+  mode: DesignerMode;
+  /** UI 注册函数，向引擎注册 widgets/layouts */
+  registerUI?: (engine: NexusEngine) => void;
+  /** 外部字段列表 */
+  fields?: FieldDef[];
+  /** 合并后的 widget 目录（内置 + 外部传入） */
+  widgetCatalog: CatalogItem[];
+  /** 合并后的 layout 目录（内置 + 外部传入） */
+  layoutCatalog: CatalogItem[];
+  setSchema: (schema: NexusSchema) => void;
+  selectNode: (path: string[] | null) => void;
+  setMode: (mode: DesignerMode) => void;
+  addNode: (parentPath: string[], key: string, node: SchemaNode) => void;
+  removeNode: (path: string[]) => void;
+  updateNode: (path: string[], patch: Record<string, unknown>) => void;
+  moveNode: (fromPath: string[], toParentPath: string[]) => void;
+  /** 重命名节点 key（schema 结构级操作，保留节点在父级中的位置） */
+  renameNode: (path: string[], newKey: string) => void;
+}
+
+interface DesignerProviderProps {
+  initialSchema: NexusSchema;
+  propertySchemaMap: PropertySchemaMap;
+  onSchemaChange?: (schema: NexusSchema) => void;
+  registerUI?: (engine: NexusEngine) => void;
+  fields?: FieldDef[];
+  widgetCatalog: CatalogItem[];
+  layoutCatalog: CatalogItem[];
+  children: ReactNode;
+}
+
+const DesignerContext = createContext<DesignerContextValue | null>(null);
+
+export function DesignerProvider({
+  initialSchema,
+  propertySchemaMap,
+  onSchemaChange,
+  registerUI,
+  fields,
+  widgetCatalog,
+  layoutCatalog,
+  children,
+}: DesignerProviderProps) {
+  const [schema, setSchemaState] = useState<NexusSchema>(initialSchema);
+  const [selectedPath, setSelectedPath] = useState<string[] | null>(null);
+  const [mode, setMode] = useState<DesignerMode>('design');
+
+  // 写入 schema 并同步通知外部
+  const emit = useCallback(
+    (next: NexusSchema) => {
+      setSchemaState(next);
+      onSchemaChange?.(next);
+    },
+    [onSchemaChange],
+  );
+
+  const setSchema = useCallback((next: NexusSchema) => emit(next), [emit]);
+
+  const selectNode = useCallback((path: string[] | null) => {
+    setSelectedPath(path);
+  }, []);
+
+  // setMode 直接复用 useState 的 setter（稳定引用，无需额外包裹）
+
+  const addNode = useCallback(
+    (parentPath: string[], key: string, node: SchemaNode) => {
+      emit(addChildToSchema(schema, parentPath, key, node));
+    },
+    [schema, emit],
+  );
+
+  const removeNode = useCallback(
+    (path: string[]) => {
+      emit(removeNodeFromSchema(schema, path));
+      setSelectedPath(null);
+    },
+    [schema, emit],
+  );
+
+  const updateNode = useCallback(
+    (path: string[], patch: Record<string, unknown>) => {
+      emit(updateNodeWithNesting(schema, path, patch));
+    },
+    [schema, emit],
+  );
+
+  const moveNode = useCallback(
+    (fromPath: string[], toParentPath: string[]) => {
+      emit(moveNodeInSchema(schema, fromPath, toParentPath));
+    },
+    [schema, emit],
+  );
+
+  const renameNode = useCallback(
+    (path: string[], newKey: string) => {
+      const result = renameNodeInSchema(schema, path, newKey);
+      emit(result.schema);
+      setSelectedPath(result.newPath);
+    },
+    [schema, emit],
+  );
+
+  const value = useMemo<DesignerContextValue>(
+    () => ({
+      schema,
+      selectedPath,
+      mode,
+      registerUI,
+      fields,
+      widgetCatalog,
+      layoutCatalog,
+      propertySchemaMap,
+      setSchema,
+      selectNode,
+      setMode,
+      addNode,
+      removeNode,
+      updateNode,
+      moveNode,
+      renameNode,
+    }),
+    [
+      schema,
+      propertySchemaMap,
+      selectedPath,
+      mode,
+      registerUI,
+      fields,
+      widgetCatalog,
+      layoutCatalog,
+      setSchema,
+      selectNode,
+      addNode,
+      removeNode,
+      updateNode,
+      moveNode,
+      renameNode,
+    ],
+  );
+
+  return (
+    <DesignerContext.Provider value={value}>
+      {children}
+    </DesignerContext.Provider>
+  );
+}
+
+export function useDesigner(): DesignerContextValue {
+  const ctx = useContext(DesignerContext);
+  if (!ctx) {
+    throw new Error('useDesigner 必须在 <DesignerProvider> 内使用');
+  }
+  return ctx;
+}