@xbeeant/form-engine-designer 0.0.3 → 0.0.4

package/src/Designer.css

@@ -1,206 +0,0 @@
-/* ============================================================================
- * @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

@@ -1,254 +0,0 @@
-// ============================================================================
-// @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

@@ -1,192 +0,0 @@
-// ============================================================================
-// @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;
-}