@xbeeant/form-engine-designer 0.0.1

package/src/widgets/RemoteDataEditor.tsx

@@ -0,0 +1,382 @@
+// ============================================================================
+// RemoteDataEditor — 可视化编辑 remoteData 远程数据配置
+// 表单化配置代替手写 JSON：
+//   - 接口地址 / 请求方式（GET | POST）
+//   - 响应字段映射（数据数组路径 / 值字段 / 文案字段）
+//   - 请求参数（key-value 行编辑）
+//   - 请求头（key-value 行编辑，可选）
+//   - 缓存键 / 超时（可选）
+// 值格式：RemoteDataConfig（见 @xbeeant/form-engine-ui 的 _shared.tsx）
+// ============================================================================
+
+import type { WidgetProps } from '@xbeeant/form-engine-ui';
+import {
+  Button,
+  Collapse,
+  Form,
+  Input,
+  InputNumber,
+  Select,
+  Space,
+  Tooltip,
+} from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { genId } from './reactionsModel';
+
+interface KeyValueRow {
+  id: string;
+  key: string;
+  value: string;
+}
+
+interface RemoteDataForm {
+  url?: string;
+  method?: 'GET' | 'POST';
+  dataPath?: string;
+  valueKey?: string;
+  labelKey?: string;
+  params?: KeyValueRow[];
+  headers?: KeyValueRow[];
+  cacheKey?: string;
+  timeout?: number;
+}
+
+/** Record → key-value 行 */
+function recordToRows(
+  value: Record<string, unknown> | undefined,
+): KeyValueRow[] {
+  if (!value || typeof value !== 'object') {
+    return [];
+  }
+  return Object.entries(value).map(([key, v]) => ({
+    id: genId(),
+    key,
+    value: typeof v === 'string' ? v : JSON.stringify(v),
+  }));
+}
+
+/** key-value 行 → Record（空 key 或空 value 的行丢弃） */
+function rowsToRecord(
+  rows: KeyValueRow[] | undefined,
+): Record<string, unknown> | undefined {
+  if (!rows) {
+    return undefined;
+  }
+  const result: Record<string, unknown> = {};
+  for (const row of rows) {
+    const key = row.key.trim();
+    if (!key) {
+      continue;
+    }
+    const raw = row.value.trim();
+    if (!raw) {
+      continue;
+    }
+    // 尝试解析 JSON（数字 / 布尔 / 对象），失败保留字符串
+    try {
+      result[key] = JSON.parse(raw);
+    } catch {
+      result[key] = raw;
+    }
+  }
+  return Object.keys(result).length > 0 ? result : undefined;
+}
+
+/** RemoteDataConfig → 表单 */
+function configToForm(value: unknown): RemoteDataForm {
+  const cfg = (value ?? {}) as Record<string, any>;
+  const rf = (cfg.responseField ?? {}) as Record<string, any>;
+  const params = cfg.params;
+  return {
+    url: cfg.url,
+    method: cfg.method,
+    dataPath: rf.data,
+    valueKey: rf.value,
+    labelKey: rf.label,
+    params:
+      params && typeof params === 'object' ? recordToRows(params) : undefined,
+    headers: recordToRows(cfg.headers),
+    cacheKey: cfg.cacheKey,
+    timeout: cfg.timeout,
+  };
+}
+
+/** 表单 → RemoteDataConfig */
+function formToConfig(
+  form: RemoteDataForm,
+): Record<string, unknown> | undefined {
+  const url = form.url?.trim();
+  if (!url) {
+    return undefined;
+  }
+  const params = rowsToRecord(form.params);
+  const headers = rowsToRecord(form.headers);
+  const config: Record<string, unknown> = {
+    url,
+    method: form.method || 'GET',
+    responseField: {
+      data: form.dataPath?.trim() || 'data',
+      value: form.valueKey?.trim() || 'value',
+      label: form.labelKey?.trim() || 'label',
+    },
+  };
+  if (params) {
+    config.params = params;
+  }
+  if (headers) {
+    config.headers = headers;
+  }
+  if (form.cacheKey?.trim()) {
+    config.cacheKey = form.cacheKey.trim();
+  }
+  if (form.timeout != null) {
+    config.timeout = form.timeout;
+  }
+  return config;
+}
+
+/** key-value 行编辑器（参数 / 请求头共用） */
+function KeyValueRows({
+  rows,
+  onChange,
+  valuePlaceholder,
+  keyPlaceholder,
+}: {
+  rows: KeyValueRow[];
+  onChange: (rows: KeyValueRow[]) => void;
+  valuePlaceholder: string;
+  keyPlaceholder: string;
+}) {
+  return (
+    <div style={{ width: '100%' }}>
+      {rows.map((row) => (
+        <div
+          key={row.id}
+          style={{
+            display: 'flex',
+            gap: 6,
+            alignItems: 'center',
+            marginBottom: 6,
+          }}
+        >
+          <Input
+            size='small'
+            value={row.key}
+            placeholder={keyPlaceholder}
+            onChange={(e) =>
+              onChange(
+                rows.map((r) =>
+                  r.id === row.id ? { ...r, key: e.target.value } : r,
+                ),
+              )
+            }
+          />
+          <Input
+            size='small'
+            value={row.value}
+            placeholder={valuePlaceholder}
+            onChange={(e) =>
+              onChange(
+                rows.map((r) =>
+                  r.id === row.id ? { ...r, value: e.target.value } : r,
+                ),
+              )
+            }
+          />
+          <Button
+            size='small'
+            type='text'
+            danger
+            onClick={() => onChange(rows.filter((r) => r.id !== row.id))}
+          >
+            ✕
+          </Button>
+        </div>
+      ))}
+      <Button
+        size='small'
+        type='dashed'
+        block
+        onClick={() => onChange([...rows, { id: genId(), key: '', value: '' }])}
+      >
+        + 添加
+      </Button>
+    </div>
+  );
+}
+
+export function RemoteDataEditor({ value, onChange, title }: WidgetProps) {
+  const [form, setForm] = useState<RemoteDataForm>(() => configToForm(value));
+  const prevValueRef = useRef(value);
+  // 自身 onChange 引发的 value 回传不应触发重建（否则每次输入都被重置）
+  const lastEmittedRef = useRef(value);
+
+  useEffect(() => {
+    if (prevValueRef.current !== value) {
+      prevValueRef.current = value;
+      if (value !== lastEmittedRef.current) {
+        setForm(configToForm(value));
+      }
+    }
+  }, [value]);
+
+  const commit = (next: RemoteDataForm) => {
+    setForm(next);
+    const emitted = formToConfig(next);
+    lastEmittedRef.current = emitted;
+    onChange(emitted);
+  };
+
+  const patch = (partial: Partial<RemoteDataForm>) => {
+    commit({ ...form, ...partial });
+  };
+
+  return (
+    <Form.Item layout={'vertical'} label={title} style={{ width: '100%' }}>
+      <Space orientation='vertical' style={{ width: '100%' }} size={8}>
+        {/* 请求地址 + 方式 */}
+        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+          <Input
+            size='small'
+            placeholder='接口地址（必填），如 /api/options'
+            value={form.url}
+            onChange={(e) => patch({ url: e.target.value })}
+            style={{ flex: 1 }}
+          />
+          <Select
+            size='small'
+            style={{ width: 80 }}
+            value={form.method}
+            onChange={(v) => patch({ method: v })}
+            options={[
+              { value: 'GET', label: 'GET' },
+              { value: 'POST', label: 'POST' },
+            ]}
+          />
+        </div>
+
+        {/* 响应字段映射 */}
+        <div style={{ fontSize: 11, color: '#999' }}>响应字段映射</div>
+        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+          <Tooltip title='响应数据数组的路径，如 data.list / data.result.records'>
+            <Input
+              size='small'
+              placeholder='数据路径（默认 data）'
+              value={form.dataPath}
+              onChange={(e) => patch({ dataPath: e.target.value })}
+              style={{ flex: 1 }}
+            />
+          </Tooltip>
+          <Tooltip title='作为选项值（value）的字段名'>
+            <Input
+              size='small'
+              placeholder='值字段'
+              value={form.valueKey}
+              onChange={(e) => patch({ valueKey: e.target.value })}
+              style={{ flex: 1 }}
+            />
+          </Tooltip>
+          <Tooltip title='作为选项文案（label）的字段名'>
+            <Input
+              size='small'
+              placeholder='文案字段'
+              value={form.labelKey}
+              onChange={(e) => patch({ labelKey: e.target.value })}
+              style={{ flex: 1 }}
+            />
+          </Tooltip>
+        </div>
+
+        {/* 请求参数 / 请求头 / 高级 */}
+        <Collapse
+          size='small'
+          style={{ width: '100%', background: '#fafafa' }}
+          items={[
+            {
+              key: 'params',
+              label: '请求参数（可选）',
+              children: (
+                <KeyValueRows
+                  rows={form.params ?? []}
+                  onChange={(rows) => patch({ params: rows })}
+                  keyPlaceholder='参数名'
+                  valuePlaceholder='参数值（数字/布尔自动识别）'
+                />
+              ),
+            },
+            {
+              key: 'headers',
+              label: '请求头（可选）',
+              children: (
+                <KeyValueRows
+                  rows={form.headers ?? []}
+                  onChange={(rows) => patch({ headers: rows })}
+                  keyPlaceholder='请求头名'
+                  valuePlaceholder='如 Bearer xxxx'
+                />
+              ),
+            },
+            {
+              key: 'advanced',
+              label: '高级',
+              children: (
+                <Space
+                  orientation='vertical'
+                  style={{ width: '100%' }}
+                  size={8}
+                >
+                  <div
+                    style={{ display: 'flex', gap: 6, alignItems: 'center' }}
+                  >
+                    <span
+                      style={{
+                        fontSize: 12,
+                        color: '#666',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      缓存键
+                    </span>
+                    <Input
+                      size='small'
+                      placeholder='默认按字段路径缓存'
+                      value={form.cacheKey}
+                      onChange={(e) => patch({ cacheKey: e.target.value })}
+                    />
+                  </div>
+                  <div
+                    style={{ display: 'flex', gap: 6, alignItems: 'center' }}
+                  >
+                    <span
+                      style={{
+                        fontSize: 12,
+                        color: '#666',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      超时（秒）
+                    </span>
+                    <InputNumber
+                      size='small'
+                      min={1}
+                      value={form.timeout}
+                      onChange={(v) => patch({ timeout: v ?? undefined })}
+                      placeholder='默认 10'
+                      style={{ width: 120 }}
+                    />
+                  </div>
+                </Space>
+              ),
+            },
+          ]}
+        />
+
+        <div style={{ fontSize: 11, color: '#ccc' }}>
+          提示：字段值变化后选项自动刷新；POST 时参数放入请求体
+        </div>
+      </Space>
+    </Form.Item>
+  );
+}
+
+export const remoteDataEditorWidget = RemoteDataEditor;

package/src/widgets/ValidateEditor.tsx

@@ -0,0 +1,162 @@
+// ============================================================================
+// ValidateEditor — 可视化编辑 validate 校验规则
+// 每行一条规则：「规则名称 + 校验表达式」（表达式需返回 boolean）
+// 与 schema 的 ValidateSchema（{ key: Expression }）互相转换
+// ============================================================================
+
+import type { WidgetProps } from '@xbeeant/form-engine-ui';
+import { Button, Form, Input } from 'antd';
+import { useEffect, useRef, useState } from 'react';
+import { ExpressionBuilder } from './ExpressionBuilder';
+import { genId } from './reactionsModel';
+import { useFormDataFields } from './useFormDataFields';
+
+interface ValidateRow {
+  id: string;
+  key: string;
+  expr: string;
+}
+
+/** ValidateSchema 对象 → 规则行 */
+function validateToRows(value: unknown): ValidateRow[] {
+  if (!value || typeof value !== 'object') {
+    return [];
+  }
+  return Object.entries(value as Record<string, unknown>).map(
+    ([key, expr]) => ({ id: genId(), key, expr: String(expr ?? '') }),
+  );
+}
+
+/** 规则行 → ValidateSchema 对象（空表达式 / 空 key 的行丢弃） */
+function rowsToValidate(
+  rows: ValidateRow[],
+): Record<string, string> | undefined {
+  const result: Record<string, string> = {};
+  for (const row of rows) {
+    const key = row.key.trim();
+    const expr = row.expr.trim();
+    if (!key || !expr || expr === '{{  }}') {
+      continue;
+    }
+    result[key] = expr;
+  }
+  return Object.keys(result).length > 0 ? result : undefined;
+}
+
+export function ValidateEditor({ value, onChange, title }: WidgetProps) {
+  const fields = useFormDataFields();
+  const [rows, setRows] = useState<ValidateRow[]>(() => validateToRows(value));
+  const prevValueRef = useRef(value);
+  // 自身 onChange 引发的 value 回传不应触发重建（否则每次输入都被重置）
+  const lastEmittedRef = useRef(value);
+
+  useEffect(() => {
+    if (prevValueRef.current !== value) {
+      prevValueRef.current = value;
+      if (value !== lastEmittedRef.current) {
+        setRows(validateToRows(value));
+      }
+    }
+  }, [value]);
+
+  const commit = (next: ValidateRow[]) => {
+    setRows(next);
+    const emitted = rowsToValidate(next);
+    lastEmittedRef.current = emitted;
+    onChange(emitted);
+  };
+
+  const updateRow = (id: string, patch: Partial<ValidateRow>) => {
+    commit(rows.map((r) => (r.id === id ? { ...r, ...patch } : r)));
+  };
+
+  const removeRow = (id: string) => {
+    commit(rows.filter((r) => r.id !== id));
+  };
+
+  const addRow = () => {
+    commit([...rows, { id: genId(), key: '', expr: '{{  }}' }]);
+  };
+
+  return (
+    <Form.Item layout={'vertical'} label={title} style={{ width: '100%' }}>
+      {rows.length === 0 ? (
+        <div
+          style={{
+            fontSize: 11,
+            color: '#999',
+            background: '#fafafa',
+            border: '1px dashed #e0e0e0',
+            borderRadius: 6,
+            padding: '6px 8px',
+            marginBottom: 4,
+          }}
+        >
+          点击下方「添加校验规则」，组合 校验名称 + 表达式（变量 / 操作符 /
+          值）。表达式需返回 boolean，可用变量：$self.value、formData。
+        </div>
+      ) : (
+        rows.map((row, i) => (
+          <div
+            key={row.id}
+            style={{
+              border: '1px solid #e8e8e8',
+              borderRadius: 8,
+              padding: 8,
+              marginBottom: 8,
+              background: '#fff',
+            }}
+          >
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                marginBottom: 6,
+              }}
+            >
+              <span style={{ fontSize: 12, fontWeight: 600, color: '#333' }}>
+                校验规则 {i + 1}
+              </span>
+              <Button size='small' danger onClick={() => removeRow(row.id)}>
+                删除
+              </Button>
+            </div>
+            <div style={{ marginBottom: 6 }}>
+              <div style={{ fontSize: 11, color: '#666', marginBottom: 2 }}>
+                规则名称（key）
+              </div>
+              <Input
+                size='small'
+                placeholder='如 match / len'
+                value={row.key}
+                onChange={(e) => updateRow(row.id, { key: e.target.value })}
+              />
+            </div>
+            <div>
+              <div style={{ fontSize: 11, color: '#666', marginBottom: 2 }}>
+                校验表达式（需返回 boolean）
+              </div>
+              <ExpressionBuilder
+                value={row.expr}
+                onChange={(s) => updateRow(row.id, { expr: s })}
+                fields={fields}
+                showSelf
+                placeholder='{{ $self.value.length >= 6 }}'
+              />
+            </div>
+          </div>
+        ))
+      )}
+
+      <Button size='small' type='dashed' block onClick={addRow}>
+        + 添加校验规则
+      </Button>
+      <div style={{ fontSize: 11, color: '#999', marginTop: 4 }}>
+        提示：依赖字段（formData.xxx）变化时会自动联动重校验。
+      </div>
+    </Form.Item>
+  );
+}
+
+export const validateEditorWidget = ValidateEditor;