@xbeeant/form-engine-designer 0.0.1

package/src/Palette.tsx

@@ -0,0 +1,261 @@
+// ============================================================================
+// @xbeeant/form-engine-designer — 左侧组件目录面板
+// ============================================================================
+
+import type { SchemaNode } from '@xbeeant/form-engine';
+import { Collapse, Input } from 'antd';
+import type { DragEvent } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { useDesigner } from './DesignerContext';
+import {
+  generateKey,
+  getNodeAtProperties,
+  getPropertiesOf,
+} from './schemaUtils';
+import type { CatalogItem, FieldDef } from './types';
+
+// 拖拽负载：palette 组件目录项 or 外部字段定义
+export interface PaletteDragPayload {
+  source: 'palette';
+  catalogItem: CatalogItem;
+}
+export interface FieldDefDragPayload {
+  source: 'fieldDef';
+  fieldDef: FieldDef;
+}
+export type PaletteDragData = PaletteDragPayload | FieldDefDragPayload;
+
+// 面板类型 → 允许的唯一父容器类型（面板不能直接添加到根或普通容器）
+const PANE_PARENT_TYPE: Record<string, string> = {
+  tabPane: 'tabs',
+  collapsePanel: 'collapse',
+  step: 'steps',
+};
+
+const isPaneItem = (item: CatalogItem): boolean =>
+  item.category === 'layout' && !!PANE_PARENT_TYPE[item.layoutType ?? ''];
+
+function PaletteItem({
+  item,
+  onAdd,
+}: {
+  item: CatalogItem;
+  onAdd: (item: CatalogItem) => void;
+}) {
+  const handleDragStart = (e: DragEvent<HTMLDivElement>) => {
+    const payload: PaletteDragPayload = {
+      source: 'palette',
+      catalogItem: item,
+    };
+    e.dataTransfer.setData('application/json', JSON.stringify(payload));
+    e.dataTransfer.effectAllowed = 'copy';
+  };
+
+  // 面板类组件只能放入对应容器，点击/拖拽提示差异化
+  const paneParent = isPaneItem(item)
+    ? PANE_PARENT_TYPE[item.layoutType ?? '']
+    : undefined;
+  const title = paneParent
+    ? `拖拽「${item.label}」到「${paneParent}」容器中，或选中容器后点击`
+    : `点击添加或拖拽「${item.label}」到画布`;
+
+  return (
+    <div
+      className='group flex flex-col items-center gap-1 rounded-lg border border-[#f0f0f0] bg-white px-1 py-2 cursor-grab select-none transition-all hover:-translate-y-px hover:border-[#1677ff] hover:shadow-[0_2px_8px_rgba(22,119,255,0.12)] active:cursor-grabbing'
+      draggable
+      onDragStart={handleDragStart}
+      onClick={() => onAdd(item)}
+      title={title}
+    >
+      <span className='flex h-7 w-7 items-center justify-center rounded-md bg-[#f5f7fa] text-[15px] transition-colors group-hover:bg-[#e8f1ff]'>
+        {item.icon}
+      </span>
+      <span className='w-full truncate text-center text-xs text-[#666] transition-colors group-hover:text-[#1677ff]'>
+        {item.label}
+      </span>
+    </div>
+  );
+}
+
+function FieldDefItem({ field }: { field: FieldDef }) {
+  const handleDragStart = (e: DragEvent<HTMLDivElement>) => {
+    const payload: FieldDefDragPayload = {
+      source: 'fieldDef',
+      fieldDef: field,
+    };
+    e.dataTransfer.setData('application/json', JSON.stringify(payload));
+    e.dataTransfer.effectAllowed = 'copy';
+  };
+
+  return (
+    <div
+      className='flex items-center gap-2 rounded-lg border border-[#f0f0f0] bg-white px-2 py-1.5 cursor-grab select-none transition-all hover:-translate-y-px hover:border-[#1677ff] hover:shadow-[0_2px_8px_rgba(22,119,255,0.12)] active:cursor-grabbing'
+      draggable
+      onDragStart={handleDragStart}
+      title={`id: ${field.id} · widget: ${field.widget}`}
+    >
+      <span className='flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md bg-[#f5f7fa] text-[13px]'>
+        🔧
+      </span>
+      <span className='truncate text-xs text-[#666]'>{field.name}</span>
+    </div>
+  );
+}
+
+export function Palette() {
+  const {
+    schema,
+    selectedPath,
+    addNode,
+    fields,
+    widgetCatalog,
+    layoutCatalog,
+  } = useDesigner();
+  const [keyword, setKeyword] = useState('');
+
+  const handleAdd = useCallback(
+    (item: CatalogItem) => {
+      const base = item.widget || item.layoutType || 'field';
+      // 面板类组件只能放入对应容器：点击时若已选中匹配容器则加入，否则忽略
+      const paneParentType = isPaneItem(item)
+        ? PANE_PARENT_TYPE[item.layoutType ?? '']
+        : undefined;
+      if (paneParentType) {
+        if (!selectedPath || selectedPath.length === 0) {
+          return;
+        }
+        const parent = getNodeAtProperties(schema.properties, selectedPath);
+        if (!parent || parent.type !== paneParentType) {
+          return;
+        }
+        const parentProps = getPropertiesOf(parent);
+        if (!parentProps) {
+          return;
+        }
+        const key = generateKey(parentProps, base);
+        addNode(selectedPath, key, item.createNode() as unknown as SchemaNode);
+        return;
+      }
+      const key = generateKey(schema.properties, base);
+      const node = item.createNode() as unknown as SchemaNode;
+      addNode([], key, node);
+    },
+    [schema, addNode, selectedPath],
+  );
+
+  const kw = keyword.trim().toLowerCase();
+
+  const widgetItems = useMemo(
+    () =>
+      widgetCatalog
+        .filter((item) => item.label.toLowerCase().includes(kw))
+        .map((item) => (
+          <PaletteItem key={item.widget} item={item} onAdd={handleAdd} />
+        )),
+    [widgetCatalog, kw, handleAdd],
+  );
+
+  const layoutItems = useMemo(
+    () =>
+      layoutCatalog
+        .filter((item) => item.label.toLowerCase().includes(kw))
+        .map((item) => (
+          <PaletteItem key={item.layoutType} item={item} onAdd={handleAdd} />
+        )),
+    [layoutCatalog, kw, handleAdd],
+  );
+
+  const fieldItems = useMemo(
+    () =>
+      (fields ?? [])
+        .filter((field) => field.name.toLowerCase().includes(kw))
+        .map((field) => <FieldDefItem key={field.id} field={field} />),
+    [fields, kw],
+  );
+
+  const sectionGrid = (items: React.ReactNode[], hasMore: boolean) =>
+    items.length > 0 ? (
+      <div className='grid grid-cols-2 gap-1.5 px-1 pb-2'>{items}</div>
+    ) : (
+      <div className='py-3 text-center text-xs text-[#c0c4cc]'>
+        {hasMore ? '无匹配组件' : '暂无组件'}
+      </div>
+    );
+
+  const collapseItems = [
+    {
+      key: 'widgets',
+      label: (
+        <span className='flex w-full items-center justify-between pr-1'>
+          <span>表单组件</span>
+          <span className='rounded-full bg-[#f0f0f0] px-1.5 py-px text-[11px] text-[#999]'>
+            {widgetItems.length}
+          </span>
+        </span>
+      ),
+      children: sectionGrid(widgetItems, true),
+    },
+    {
+      key: 'layouts',
+      label: (
+        <span className='flex w-full items-center justify-between pr-1'>
+          <span>布局组件</span>
+          <span className='rounded-full bg-[#f0f0f0] px-1.5 py-px text-[11px] text-[#999]'>
+            {layoutItems.length}
+          </span>
+        </span>
+      ),
+      children: sectionGrid(layoutItems, true),
+    },
+  ];
+
+  // 仅当传入 fields 时显示「字段列表」分组
+  if (fields && fields.length > 0) {
+    collapseItems.push({
+      key: 'fieldList',
+      label: (
+        <span className='flex w-full items-center justify-between pr-1'>
+          <span>字段列表</span>
+          <span className='rounded-full bg-[#f0f0f0] px-1.5 py-px text-[11px] text-[#999]'>
+            {fieldItems.length}
+          </span>
+        </span>
+      ),
+      children: (
+        <div className='flex flex-col gap-1.5 px-1 pb-2'>
+          {fieldItems.length > 0 ? (
+            fieldItems
+          ) : (
+            <div className='py-3 text-center text-xs text-[#c0c4cc]'>
+              无匹配字段
+            </div>
+          )}
+        </div>
+      ),
+    });
+  }
+
+  return (
+    <div className='flex h-full flex-col border-r border-[#f0f0f0] bg-[#f7f8fa]'>
+      <div className='px-3 pb-2 pt-3'>
+        <Input
+          size='small'
+          allowClear
+          prefix={<span className='text-xs text-[#bbb]'>🔍</span>}
+          placeholder='搜索组件…'
+          value={keyword}
+          onChange={(e) => setKeyword(e.target.value)}
+          className='nexus-palette-search'
+        />
+      </div>
+      <div className='flex-1 overflow-y-auto px-2 pb-3'>
+        <Collapse
+          className='nexus-palette-collapse'
+          expandIconPlacement='end'
+          defaultActiveKey={['widgets', 'layouts']}
+          items={collapseItems}
+        />
+      </div>
+    </div>
+  );
+}