@xbeeant/form-engine-designer 0.0.1

package/src/widgets/ExpressionBuilder.tsx

@@ -0,0 +1,509 @@
+// ============================================================================
+// ExpressionBuilder — 可视化表达式构建器
+// 通过「变量 + 操作符 + 值」的条件行交互生成 `{{ ... }}` 布尔表达式，
+// 避免手写表达式。保留「高级表达式」原始编辑回退（解析失败时自动进入）。
+//
+// 状态策略：本地工作副本（conditions/raw）为唯一编辑源，每次编辑即提交；
+// 用 lastEmittedRef 跳过「自身 onChange → 引擎值回传」造成的受控重置，
+// 外部 value 变化（切换节点等）才重建工作副本。
+// ============================================================================
+
+import { Button, Input, InputNumber, Select } from 'antd';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  buildExpression,
+  type ConditionOperator,
+  createCondition,
+  type ExprCondition,
+  NO_RIGHT_OPERATORS,
+  OPERATOR_OPTIONS,
+  parseExpression,
+  parseVariable,
+  RIGHT_MODE_OPTIONS,
+  type RightMode,
+  stripBraces,
+  variableToString,
+} from './expressionModel';
+
+// ────────────────────────────────────────────────────────────────────────────
+// VariableSelect — 变量选择器（表单字段 + 快捷变量）
+// ────────────────────────────────────────────────────────────────────────────
+
+interface VariableSelectProps {
+  value: string;
+  onChange: (text: string) => void;
+  fields: string[];
+  /** 可选字段标题列表（显示 title，值为路径 key）；缺省时退化为 path 即 label */
+  fieldOptions?: Array<{ value: string; label: string }>;
+  depsCount: number;
+  showSelf: boolean;
+  placeholder?: string;
+}
+
+function VariableSelect({
+  value,
+  onChange,
+  fields,
+  fieldOptions,
+  depsCount,
+  showSelf,
+  placeholder,
+}: VariableSelectProps) {
+  const groups = useMemo(() => {
+    const base =
+      fieldOptions && fieldOptions.length > 0
+        ? fieldOptions
+        : fields.map((f) => ({ value: f, label: f }));
+    const fieldOptions2 = base.map((o) => ({
+      value: `formData.${o.value}`,
+      label: o.label,
+    }));
+    const special: Array<{ value: string; label: string }> = [];
+    if (showSelf) {
+      special.push({
+        value: '$self.value',
+        label: '当前字段值（$self.value）',
+      });
+    }
+    if (depsCount > 0) {
+      for (let i = 0; i < depsCount; i++) {
+        special.push({
+          value: `$deps[${i}]`,
+          label: `依赖 ${i + 1}（$deps[${i}]）`,
+        });
+      }
+    }
+    special.push({ value: '$index', label: '列表下标（$index）' });
+    special.push({ value: 'rootValue', label: '根值（rootValue）' });
+    return [
+      ...(fieldOptions2.length > 0
+        ? [{ label: '表单字段', options: fieldOptions2 }]
+        : []),
+      ...(special.length > 0 ? [{ label: '快捷变量', options: special }] : []),
+    ];
+  }, [fields, fieldOptions, depsCount, showSelf]);
+
+  return (
+    <Select
+      size='small'
+      showSearch
+      allowClear
+      value={value || undefined}
+      placeholder={placeholder ?? '选择变量'}
+      onChange={(v) => onChange((v as string) || '')}
+      options={groups}
+      filterOption={(input, option) =>
+        ((option?.label as string) || '')
+          .toLowerCase()
+          .includes(input.toLowerCase())
+      }
+      style={{ width: '100%' }}
+    />
+  );
+}
+
+// ────────────────────────────────────────────────────────────────────────────
+// 条件行编辑
+// ────────────────────────────────────────────────────────────────────────────
+
+function RightValueEditor({
+  mode,
+  value,
+  onChange,
+  fields,
+  fieldOptions,
+  depsCount,
+  showSelf,
+}: {
+  mode: RightMode;
+  value: string;
+  onChange: (right: string) => void;
+  fields: string[];
+  fieldOptions?: Array<{ value: string; label: string }>;
+  depsCount: number;
+  showSelf: boolean;
+}) {
+  if (mode === 'boolean') {
+    return (
+      <Select
+        size='small'
+        value={value === 'true' ? 'true' : 'false'}
+        onChange={(v) => onChange((v as string) || 'false')}
+        options={[
+          { value: 'true', label: 'true' },
+          { value: 'false', label: 'false' },
+        ]}
+        style={{ width: 72 }}
+      />
+    );
+  }
+  if (mode === 'variable') {
+    return (
+      <div style={{ flex: 1, minWidth: 100 }}>
+        <VariableSelect
+          value={value}
+          onChange={onChange}
+          fields={fields}
+          fieldOptions={fieldOptions}
+          depsCount={depsCount}
+          showSelf={showSelf}
+          placeholder='选择值变量'
+        />
+      </div>
+    );
+  }
+  if (mode === 'number') {
+    return (
+      <InputNumber
+        size='small'
+        value={value === '' ? undefined : Number(value)}
+        onChange={(v) => onChange(v == null ? '' : String(v))}
+        placeholder='数字'
+        style={{ flex: 1, minWidth: 80 }}
+      />
+    );
+  }
+  return (
+    <Input
+      size='small'
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder='文本'
+      style={{ flex: 1, minWidth: 80 }}
+    />
+  );
+}
+
+function ConditionRow({
+  condition,
+  isFirst,
+  fields,
+  fieldOptions,
+  depsCount,
+  showSelf,
+  onChange,
+  onRemove,
+}: {
+  condition: ExprCondition;
+  isFirst: boolean;
+  fields: string[];
+  fieldOptions?: Array<{ value: string; label: string }>;
+  depsCount: number;
+  showSelf: boolean;
+  onChange: (patch: Partial<ExprCondition>) => void;
+  onRemove: () => void;
+}) {
+  const needRight = !NO_RIGHT_OPERATORS.has(condition.operator);
+
+  const handleOperator = (op: ConditionOperator) => {
+    onChange({
+      operator: op,
+      ...(NO_RIGHT_OPERATORS.has(op) ? { right: '' } : {}),
+    });
+  };
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+        marginBottom: 4,
+        flexWrap: 'wrap',
+      }}
+    >
+      {isFirst ? (
+        <span
+          style={{
+            width: 44,
+            fontSize: 11,
+            color: '#999',
+            flexShrink: 0,
+            textAlign: 'center',
+          }}
+        >
+          当
+        </span>
+      ) : (
+        <Select
+          size='small'
+          value={condition.logic}
+          onChange={(v) => onChange({ logic: v as 'and' | 'or' })}
+          options={[
+            { value: 'and', label: '且' },
+            { value: 'or', label: '或' },
+          ]}
+          style={{ width: 44, flexShrink: 0 }}
+        />
+      )}
+
+      <div style={{ flex: '1 1 110px', minWidth: 110 }}>
+        <VariableSelect
+          value={variableToString(condition.variable)}
+          onChange={(text) => onChange({ variable: parseVariable(text) })}
+          fields={fields}
+          fieldOptions={fieldOptions}
+          depsCount={depsCount}
+          showSelf={showSelf}
+        />
+      </div>
+
+      <Select
+        size='small'
+        value={condition.operator}
+        onChange={handleOperator}
+        options={OPERATOR_OPTIONS}
+        style={{ width: 92, flexShrink: 0 }}
+      />
+
+      {needRight && (
+        <>
+          <Select
+            size='small'
+            value={condition.rightMode}
+            onChange={(v) => onChange({ rightMode: v as RightMode })}
+            options={RIGHT_MODE_OPTIONS}
+            style={{ width: 56, flexShrink: 0 }}
+          />
+          <div style={{ flex: '1 1 80px', minWidth: 80 }}>
+            <RightValueEditor
+              mode={condition.rightMode}
+              value={condition.right}
+              onChange={(right) => onChange({ right })}
+              fields={fields}
+              fieldOptions={fieldOptions}
+              depsCount={depsCount}
+              showSelf={showSelf}
+            />
+          </div>
+        </>
+      )}
+
+      <Button
+        size='small'
+        type='text'
+        onClick={onRemove}
+        style={{ flexShrink: 0, color: '#bbb' }}
+        title='删除条件'
+      >
+        ×
+      </Button>
+    </div>
+  );
+}
+
+// ────────────────────────────────────────────────────────────────────────────
+// ExpressionBuilder — 主组件
+// ────────────────────────────────────────────────────────────────────────────
+
+export interface ExpressionBuilderProps {
+  value?: string;
+  onChange: (next: string) => void;
+  /** 可选表单字段路径（formData.<path>） */
+  fields?: string[];
+  /** 可选字段标题列表（显示 title，值为路径 key）；缺省时表单字段退化为 path 即 label */
+  fieldOptions?: Array<{ value: string; label: string }>;
+  /** 渲染 $deps[0..depsCount-1] 快捷变量 */
+  depsCount?: number;
+  showSelf?: boolean;
+  /** 条件全部移除时的提交值：template=保持表达式模式（{{  }}），empty=清空（''） */
+  emitEmpty?: 'template' | 'empty';
+  /** 是否显示「高级表达式」原始编辑入口 */
+  allowAdvanced?: boolean;
+  placeholder?: string;
+}
+
+function getInitMode(value: string | undefined): 'builder' | 'raw' {
+  if (typeof value !== 'string' || !value.trim()) {
+    return 'builder';
+  }
+  return parseExpression(value) === null ? 'raw' : 'builder';
+}
+
+function getInitConditions(value: string | undefined): ExprCondition[] {
+  if (typeof value !== 'string' || !value.trim()) {
+    return [];
+  }
+  const parsed = parseExpression(value);
+  return parsed === null ? [] : parsed;
+}
+
+function getInitRaw(value: string | undefined): string {
+  return typeof value === 'string' ? stripBraces(value) : '';
+}
+
+export function ExpressionBuilder({
+  value,
+  onChange,
+  fields = [],
+  fieldOptions,
+  depsCount = 0,
+  showSelf = true,
+  emitEmpty = 'template',
+  allowAdvanced = true,
+  placeholder = "{{ formData.xxx == 'yyy' }}",
+}: ExpressionBuilderProps) {
+  const [mode, setMode] = useState<'builder' | 'raw'>(() => getInitMode(value));
+  const [conditions, setConditions] = useState<ExprCondition[]>(() =>
+    getInitConditions(value),
+  );
+  const [raw, setRaw] = useState<string>(() => getInitRaw(value));
+  const lastEmittedRef = useRef<string>(typeof value === 'string' ? value : '');
+
+  // 外部 value 变化（切换节点 / 属性表单重新初始化）时重建工作副本；
+  // 自身 onChange 引起的值回传不重置（lastEmittedRef 相等时跳过）
+  useEffect(() => {
+    if (value !== lastEmittedRef.current) {
+      lastEmittedRef.current = typeof value === 'string' ? value : '';
+      const parsed = typeof value === 'string' ? parseExpression(value) : [];
+      setConditions(parsed === null ? [] : parsed);
+      setMode(parsed === null ? 'raw' : 'builder');
+      setRaw(typeof value === 'string' ? stripBraces(value) : '');
+    }
+  }, [value]);
+
+  const emitBuilder = (next: ExprCondition[]) => {
+    setConditions(next);
+    const expr = buildExpression(next);
+    const out = expr === '{{  }}' && emitEmpty === 'empty' ? '' : expr;
+    lastEmittedRef.current = out;
+    onChange(out);
+  };
+
+  const emitRaw = (text: string) => {
+    setRaw(text);
+    lastEmittedRef.current = text;
+    onChange(text);
+  };
+
+  const switchToRaw = () => {
+    setRaw(typeof value === 'string' ? stripBraces(value) : '');
+    setMode('raw');
+  };
+
+  const switchToBuilder = () => {
+    const parsed = parseExpression(raw);
+    if (parsed === null) {
+      return;
+    }
+    setConditions(parsed);
+    setMode('builder');
+  };
+
+  const updateCondition = (id: string, patch: Partial<ExprCondition>) => {
+    emitBuilder(conditions.map((c) => (c.id === id ? { ...c, ...patch } : c)));
+  };
+
+  const removeCondition = (id: string) => {
+    emitBuilder(conditions.filter((c) => c.id !== id));
+  };
+
+  const addCondition = () => {
+    emitBuilder([...conditions, createCondition()]);
+  };
+
+  const rawParseFailed =
+    mode === 'raw' && raw.trim() !== '' && parseExpression(raw) === null;
+
+  return (
+    <div style={{ width: '100%' }}>
+      {mode === 'builder' ? (
+        <>
+          {conditions.length === 0 ? (
+            <div
+              style={{
+                fontSize: 11,
+                color: '#999',
+                background: '#fafafa',
+                border: '1px dashed #e0e0e0',
+                borderRadius: 6,
+                padding: '6px 8px',
+                marginBottom: 4,
+              }}
+            >
+              点击下方「添加条件」组合 变量 / 操作符 / 值 生成表达式。
+            </div>
+          ) : (
+            conditions.map((c, i) => (
+              <ConditionRow
+                key={c.id}
+                condition={c}
+                isFirst={i === 0}
+                fields={fields}
+                fieldOptions={fieldOptions}
+                depsCount={depsCount}
+                showSelf={showSelf}
+                onChange={(patch) => updateCondition(c.id, patch)}
+                onRemove={() => removeCondition(c.id)}
+              />
+            ))
+          )}
+
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 4,
+              marginTop: 2,
+            }}
+          >
+            <Button size='small' type='dashed' onClick={addCondition}>
+              + 添加条件
+            </Button>
+            {allowAdvanced && (
+              <Button
+                size='small'
+                type='link'
+                onClick={switchToRaw}
+                style={{ padding: '0 4px', height: 'auto', fontSize: 11 }}
+              >
+                高级表达式
+              </Button>
+            )}
+          </div>
+        </>
+      ) : (
+        <>
+          <Input.TextArea
+            rows={2}
+            size='small'
+            value={raw}
+            onChange={(e) => emitRaw(e.target.value)}
+            placeholder={placeholder}
+            style={{ fontFamily: 'monospace', fontSize: 12 }}
+          />
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              marginTop: 2,
+            }}
+          >
+            <span
+              style={{
+                fontSize: 11,
+                color: rawParseFailed ? '#ff4d4f' : '#999',
+              }}
+            >
+              {rawParseFailed
+                ? '当前表达式无法结构化，可继续手动编辑或点击返回'
+                : '表达式需返回 boolean，变量仅限 $deps / $self / $form / $index / formData / rootValue'}
+            </span>
+            {allowAdvanced && (
+              <Button
+                size='small'
+                type='link'
+                onClick={switchToBuilder}
+                style={{ padding: '0 4px', height: 'auto', fontSize: 11 }}
+                disabled={rawParseFailed}
+              >
+                返回可视化
+              </Button>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/widgets/ExpressionSwitch.tsx

@@ -0,0 +1,62 @@
+// ============================================================================
+// ExpressionSwitch — 编辑 ExpressionOr<boolean> 属性
+// 支持静态布尔值（Switch）与表达式（可视化构建器 / 高级手写）之间的切换
+// ============================================================================
+
+import type { WidgetProps } from '@xbeeant/form-engine-ui';
+import { Form, Switch } from 'antd';
+import { ExpressionBuilder } from './ExpressionBuilder';
+import { useFormDataFields } from './useFormDataFields';
+
+export function ExpressionSwitch({
+  value,
+  onChange,
+  title,
+  displayType,
+}: WidgetProps) {
+  // ExpressionOr<boolean>: 非空字符串=表达式模式，其他=静态模式
+  // 直接由 value 派生（受控），外部 value 变化（如切换选中节点）自动同步；
+  // 不再维护内部 isExpr state，避免与外部值脱节
+  const isExpr = typeof value === 'string' && value.length > 0;
+
+  const fields = useFormDataFields();
+
+  // 模式切换必须写回一个对应形态的值，否则状态只是视觉变化、无法持久化
+  const switchMode = (exprMode: boolean) => {
+    if (exprMode) {
+      // 切到表达式：保留已有表达式，静态布尔值则以空模板起步
+      onChange(typeof value === 'string' ? value : '{{  }}');
+    } else {
+      // 切到静态：reset 为布尔值
+      onChange(typeof value === 'boolean' ? value : false);
+    }
+  };
+
+  return (
+    <Form.Item
+      layout={displayType === 'row' ? 'horizontal' : 'vertical'}
+      label={title}
+      style={{ width: '100%' }}
+    >
+      <div className={`flex gap-2 ${isExpr ? 'flex-col' : 'flex-row'}`}>
+        {isExpr ? (
+          <ExpressionBuilder
+            value={value as string}
+            onChange={(s) => onChange(s)}
+            fields={fields}
+          />
+        ) : (
+          <Switch checked={!!value} onChange={(v) => onChange(v)} />
+        )}
+        <Switch
+          checked={isExpr}
+          checkedChildren='表达式'
+          unCheckedChildren='静态'
+          onChange={switchMode}
+        />
+      </div>
+    </Form.Item>
+  );
+}
+
+export const expressionSwitchWidget = ExpressionSwitch;

package/src/widgets/OptionsEditor.tsx

@@ -0,0 +1,141 @@
+// ============================================================================
+// OptionsEditor — 编辑选项列表（区分 value 与 label）
+// 供 select / radio / checkboxes / multiSelect / checkbox / switch 等
+// 选择类组件在属性面板中配置选项：
+//   每行 = 选项值（value，存储进 formData）+ 选项文案（label，界面展示）
+// value 支持字符串，'true'/'false' 自动转为布尔值（checkbox/switch 用）
+// 值格式：Array<{ value: unknown; label: string }>
+// ============================================================================
+
+import type { WidgetProps } from '@xbeeant/form-engine-ui';
+import { Button, Input, Space } from 'antd';
+import { useMemo } from 'react';
+
+interface OptionRow {
+  value: unknown;
+  label: string;
+}
+
+/** 归一化：兼容字符串数组（value=label）与 { value, label } 对象数组 */
+const toRows = (value: unknown): OptionRow[] => {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.map((item) => {
+    if (item && typeof item === 'object') {
+      const rec = item as Record<string, unknown>;
+      return {
+        value: rec.value,
+        label: rec.label == null ? '' : String(rec.label),
+      };
+    }
+    return { value: item, label: String(item) };
+  });
+};
+
+/** 输入回写：'true'/'false' → 布尔，其余保留字符串 */
+const parseValue = (raw: string): unknown => {
+  const trimmed = raw.trim().toLowerCase();
+  if (trimmed === 'true') {
+    return true;
+  }
+  if (trimmed === 'false') {
+    return false;
+  }
+  return raw;
+};
+
+export function OptionsEditor({ value, onChange }: WidgetProps) {
+  const rows = useMemo(() => toRows(value), [value]);
+
+  const emit = (next: OptionRow[]) => onChange(next);
+
+  const setRow = (index: number, patch: Partial<OptionRow>) => {
+    emit(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)));
+  };
+
+  const addRow = () => {
+    emit([...rows, { value: '', label: '' }]);
+  };
+
+  const removeRow = (index: number) => {
+    emit(rows.filter((_, i) => i !== index));
+  };
+
+  const moveRow = (index: number, dir: -1 | 1) => {
+    const next = [...rows];
+    const target = index + dir;
+    if (target < 0 || target >= next.length) {
+      return;
+    }
+    [next[index], next[target]] = [next[target], next[index]];
+    emit(next);
+  };
+
+  return (
+    <div style={{ width: '100%' }}>
+      {rows.map((row, index) => (
+        <div
+          key={index}
+          style={{
+            display: 'flex',
+            gap: 6,
+            alignItems: 'center',
+            marginBottom: 6,
+          }}
+        >
+          <Input
+            size='small'
+            value={row.value == null ? '' : String(row.value)}
+            placeholder='选项值 value'
+            onChange={(e) =>
+              setRow(index, { value: parseValue(e.target.value) })
+            }
+          />
+          <Input
+            size='small'
+            value={row.label}
+            placeholder='选项文案 label'
+            onChange={(e) => setRow(index, { label: e.target.value })}
+          />
+          <Space.Compact>
+            <Button
+              size='small'
+              type='text'
+              disabled={index === 0}
+              onClick={() => moveRow(index, -1)}
+            >
+              ↑
+            </Button>
+            <Button
+              size='small'
+              type='text'
+              disabled={index === rows.length - 1}
+              onClick={() => moveRow(index, 1)}
+            >
+              ↓
+            </Button>
+            <Button
+              size='small'
+              type='text'
+              danger
+              onClick={() => removeRow(index)}
+            >
+              ✕
+            </Button>
+          </Space.Compact>
+        </div>
+      ))}
+      <Button size='small' type='dashed' block onClick={addRow}>
+        + 添加选项
+      </Button>
+      {rows.length === 0 && (
+        <div style={{ fontSize: 11, color: '#999', marginTop: 6 }}>
+          value 为存入 formData 的选项值，label 为界面展示文案，每行一组
+        </div>
+      )}
+    </div>
+  );
+}
+
+export const optionsEditorWidget = OptionsEditor;