@c2-markdown-ui/svelte 0.0.0-stage → 0.4.2

package/src/lib/widgets/Form.svelte

@@ -0,0 +1,571 @@
+<script lang="ts">
+	import Button from './Button.svelte';
+	import ButtonGroup from './ButtonGroup.svelte';
+	import Select from './Select.svelte';
+	import SelectMulti from './SelectMulti.svelte';
+	import RadioGroup from './Radio.svelte';
+	import Cascader from './Cascader.svelte';
+	import TreeSelect from './TreeSelect.svelte';
+	import Slider from './Slider.svelte';
+	import Switch from './Switch.svelte';
+	import TextInput from './TextInput.svelte';
+	import DatePicker from './DatePicker.svelte';
+	import NumberInput from './NumberInput.svelte';
+	import Text from './Text.svelte';
+	import Chart from './Chart.svelte';
+	import { parseChoice, parseChoices } from './remoteChoices';
+
+  interface FieldWhen {
+    field: string;
+    values: string[];
+  }
+  interface Field {
+    type: string;
+    id: string;
+    /** 在 row 内占据的栅格数（1-24，类似 antd Col 的 span） */
+    span?: number;
+    /** 显示条件（form 内联动显隐）：
+     *  - 单条件对象/数组（AND 组合）：依赖字段的值命中 values 任一时显示，多条件全部命中才显示
+     *  - 分组对象 { all, any }：all 且组全部命中 且 any 或组任一命中 */
+    when?: FieldWhen | FieldWhen[] | { all?: FieldWhen[]; any?: FieldWhen[] };
+    [key: string]: any;
+  }
+  interface FormRow {
+    /** 列间距（px），类似 antd Row 的 gutter */
+    gutter?: number;
+    fields: Field[];
+  }
+  interface Props {
+    id?: string;
+    fields: Field[];
+    /** 行分组（对象形态 { gutter, fields }；兼容旧数组形态 Field[][]） */
+    rows?: (FormRow | Field[])[];
+    inline?: boolean;
+    columns?: number;
+    submitLabel?: string;
+    /** 取消按钮文案，未设置则不显示 */
+    cancelLabel?: string;
+    /** 清空/重置按钮文案，未设置则不显示 */
+    resetLabel?: string;
+    /** 按钮组对齐：left / center / right */
+    buttonsAlign?: 'left' | 'center' | 'right';
+    /** 字段 label 与内容的布局：vertical 上下（默认）/ horizontal 左右 */
+    layout?: 'vertical' | 'horizontal';
+    /** 左右布局时 label 的宽度（px），默认 80 */
+    labelWidth?: number;
+    /** 左右布局时内容区域的宽度（px，省略自适应填满） */
+    contentWidth?: number;
+    /** 是否禁用：级联禁用所有字段与按钮 */
+    disabled?: boolean;
+    onchange: (values: Record<string, unknown>) => void;
+  }
+  let { id, fields, rows, inline, columns, submitLabel, cancelLabel, resetLabel, buttonsAlign, layout, labelWidth, contentWidth, disabled = false, onchange }: Props = $props();
+
+  // 左右布局：容器类 + CSS 变量（label 宽度 / 内容宽度）
+  const isHorizontal = layout === 'horizontal';
+  const layoutClass = isHorizontal ? 'widget-form-layout-horizontal' : '';
+  const layoutStyle = isHorizontal
+    ? [
+        `--form-label-width: ${labelWidth ?? 80}px`,
+        contentWidth ? `--form-content-width: ${contentWidth}px` : ''
+      ].filter(Boolean).join('; ')
+    : '';
+
+  // 规范化 row：兼容旧数组形态 Field[][]
+  function normalizeRow(row: FormRow | Field[]): FormRow {
+    return Array.isArray(row) ? { fields: row } : row;
+  }
+
+  // 计算行内每个字段的 grid span（24 栅格，类似 antd）
+  // 显式 span 优先；无 span 时若 form 设置了 columns，则每字段占 24/columns（跨行对齐），
+  // 否则均分剩余栅格；总 span 超 24 时自动换行（由 grid auto-flow 处理）
+  function computeSpans(fields: Field[]): number[] {
+    const spans = fields.map(f =>
+      typeof f.span === 'number' && f.span >= 1 && f.span <= 24 ? Math.round(f.span) : undefined
+    );
+    const fixedTotal = spans.reduce<number>((acc, s) => acc + (s ?? 0), 0);
+    const autoCount = spans.filter(s => s === undefined).length;
+    let autoSpan = 0;
+    if (autoCount > 0) {
+      if (columns && columns >= 1) {
+        autoSpan = Math.max(Math.floor(24 / columns), 1);
+      } else {
+        const remaining = 24 - fixedTotal;
+        // 剩余栅格不足时占满整行（grid auto-flow 会自动换行），避免被挤进窄列导致文字竖排
+        if (remaining <= 0) {
+          autoSpan = 24;
+        } else {
+          autoSpan = Math.max(Math.floor(remaining / autoCount), 1);
+        }
+      }
+    }
+    return spans.map(s => s ?? autoSpan);
+  }
+
+  // ---------- 重复 id 防护 ----------
+  // DSL 手写或编辑器插入可能产生重复字段 id；keyed each (f.id) 遇重复 key 会渲染崩溃（整个表单消失）。
+  // 这里统一过滤：fields/rows 各处只保留每个 id 的首次出现，重复项静默忽略。
+  function dedupe(list: Field[]): Field[] {
+    const seen = new Set<string>();
+    return (list ?? []).filter(f => {
+      if (!f?.id) return false;
+      if (seen.has(f.id)) return false;
+      seen.add(f.id);
+      return true;
+    });
+  }
+  /** 去重后的顶层字段（渲染与数据初始化均用它；row 存在时 parser 已合并进 fields） */
+  const uniqueFields = $derived(dedupe(fields));
+  /** row 分组也去重：row 内重复 id 保留首个，并滤掉空 row */
+  const normRows = $derived(
+    Array.isArray(rows)
+      ? rows.map(normalizeRow).map(r => ({ ...r, fields: dedupe(r.fields) })).filter(r => r.fields.length > 0)
+      : []
+  );
+
+  // 字段模式（无 row 分组）：任一字段带显式 span 时切换为 24 栅格布局，让 span 生效
+  // （无 span 的字段保持整行显示，不配 span 的表单仍走 flex 纵向布局，完全向后兼容）
+  const fieldsGridMode = $derived(
+    !inline && (!Array.isArray(rows) || rows.length === 0) &&
+    uniqueFields.some(f => typeof f?.span === 'number' && f.span >= 1 && f.span <= 24)
+  );
+
+  /** 字段模式栅格样式：显式 span 占 N 列；无 span 占满整行（1/-1，保持传统一行一个） */
+  function fieldsSpanStyle(f: Field): string | undefined {
+    if (!fieldsGridMode) return undefined;
+    const s = typeof f.span === 'number' && f.span >= 1 && f.span <= 24 ? Math.round(f.span) : 0;
+    return s >= 1 ? `grid-column: span ${s}` : 'grid-column: 1 / -1';
+  }
+
+  /** inline 模式：显式 span 覆盖 flex-basis（占行宽 N/24，flex-shrink 保证与相邻字段同行收放） */
+  function inlineSpanStyle(f: Field): string | undefined {
+    const s = typeof f.span === 'number' && f.span >= 1 && f.span <= 24 ? Math.round(f.span) : 0;
+    return s >= 1 ? `flex: 0 1 calc(${s} / 24 * 100%)` : undefined;
+  }
+
+  // ---------- helper ----------
+  function buildDefaults(fields: Field[]): Record<string, unknown> {
+    const out: Record<string, unknown> = {};
+
+    for (const f of fields) {
+      switch (f.type) {
+        case 'button':
+          out[f.id] = f.label ?? '';
+          break;
+
+        case 'button-group':
+        case 'select':
+          // choices[0] 可能是 key:label 格式，默认值取 key（表单值体系）
+          out[f.id] = f.default !== undefined
+            ? (f.default !== null && f.default !== '' ? parseChoice(String(f.default)).value : f.default)
+            : (f.choices?.[0] !== undefined ? parseChoice(String(f.choices[0])).value : undefined);
+          break;
+
+        case 'select-multi': {
+          // choices 可能是对象数组（{value,key,label}）：default 写 label 时映射回 value 取值体系
+          const items = parseChoices(f.choices as any) ?? [];
+          const mapDefault = (v: any): string => {
+            const s = String(v);
+            const hit = items.find(it => it.value === s || it.label === s);
+            return hit ? hit.value : parseChoice(s).value;
+          };
+          out[f.id] = Array.isArray(f.default)
+            ? f.default.map(mapDefault)
+            : (f.default ? [mapDefault(f.default)] : []);
+          break;
+        }
+
+        case 'radio-group': {
+          // 单选：default 写 label 时映射回 value；无 default 时选中第一项（与 button-group 一致）
+          const items = parseChoices(f.choices as any) ?? [];
+          const mapDefault = (v: any): string => {
+            const s = String(v);
+            const hit = items.find(it => it.value === s || it.label === s);
+            return hit ? hit.value : parseChoice(s).value;
+          };
+          const d = f.default;
+          if (d !== undefined && d !== null && d !== '') {
+            out[f.id] = mapDefault(Array.isArray(d) ? d[0] : d);
+          } else {
+            out[f.id] = items.length ? items[0].value : '';
+          }
+          break;
+        }
+
+        case 'cascade':
+          // 默认值为完整路径（value 串，/ 分隔）；无 default 时为空串（未选择）
+          out[f.id] = f.default ?? '';
+          break;
+
+        case 'slider':
+          out[f.id] = f.default ?? (typeof f.min === 'number' ? f.min : 0);
+          break;
+
+        case 'switch':
+          out[f.id] = f.default ?? false;
+          break;
+
+        case 'date-picker':
+          // 范围模式默认 []（空数组），单选默认 null；default 已是时间戳/格式化字符串
+          out[f.id] = f.range
+            ? (Array.isArray(f.default) ? f.default : (f.default !== undefined ? [f.default] : []))
+            : (f.default ?? null);
+          break;
+
+        case 'number-input':
+          // 无 default 时为 null（空值），由组件内部处理显示
+          out[f.id] = f.default ?? null;
+          break;
+
+        case 'text-input':
+          out[f.id] = f.default ?? '';
+          break;
+      }
+    }
+    return out;
+  }
+
+  // ---------- state ----------
+  // 注意：不能在顶层直接读取 $derived 的 uniqueFields（只捕获初始值的告警）；
+  // fields 是 prop 不可变引用，dedupe(fields) 与 uniqueFields 结果一致
+  const initialData = buildDefaults(dedupe(fields));
+  const data = $state<Record<string, unknown>>({ ...initialData });
+
+  /** 字段是否可见：无 when 时恒可见；单个 when 依赖字段值命中 values 任一；
+   *  多个 when（数组）为 AND 组合，全部命中才显示 */
+  function isVisible(f: Field): boolean {
+    if (!f.when) return true;
+    // 单条件命中：eq 为依赖字段的值在 values 任一中；比较运算符（gt/gte/lt/lte/ne）按数值比较
+    // （依赖值或任一匹配值非数字时该值视为不命中）。values 为空或条件非法视为忽略=true
+    const matchCond = (c: any): boolean => {
+      if (!c?.field || !Array.isArray(c.values) || c.values.length === 0) return true; // 非法条件忽略
+      const dep = data[c.field];
+      const op = c.op || 'eq';
+      if (op === 'eq') return c.values.includes(String(dep ?? ''));
+      const left = Number(dep);
+      if (dep === undefined || dep === null || dep === '' || isNaN(left)) return false;
+      return c.values.some((v: string) => {
+        const right = Number(v);
+        if (isNaN(right)) return false;
+        if (op === 'gt') return left > right;
+        if (op === 'gte') return left >= right;
+        if (op === 'lt') return left < right;
+        if (op === 'lte') return left <= right;
+        return left !== right; // ne
+      });
+    };
+    const when = f.when as any;
+    // 分组形态 { all, any }：且组全部命中 且 或组任一命中
+    if (!Array.isArray(when) && typeof when === 'object' && ('all' in when || 'any' in when)) {
+      const allOk = (when.all || []).every(matchCond);
+      const anyList = when.any || [];
+      const anyOk = anyList.length === 0 ? true : anyList.some(matchCond);
+      return allOk && anyOk;
+    }
+    // 数组形态（AND）/单条件对象
+    const conds = Array.isArray(when) ? when : [when];
+    if (conds.length === 0) return true;
+    return conds.every(matchCond);
+  }
+
+  // 清空计数：递增触发 {#key} 重建字段区，让子组件恢复初始值（子组件显示值是各自本地状态，只重置 data 不会刷新 UI）
+  let resetCount = $state(0);
+
+  // 字段校验错误：提交时统一校验填充，key 为字段 id
+  let errors = $state<Record<string, string>>({});
+
+  function set(id: string, value: unknown) {
+    data[id] = value;
+    // 用户修改后清除该字段的提交错误（组件内部即时校验仍会显示）
+    if (errors[id]) errors[id] = '';
+  }
+
+  /** 单字段校验：返回错误文案或空串 */
+  function validateField(f: Field): string {
+    const v = data[f.id];
+    if (f.required) {
+      const empty = v === undefined || v === null || v === '' ||
+        (Array.isArray(v) && v.length === 0);
+      if (empty) return f.message || (f.label ? `请填写${f.label}` : '该项为必填项');
+    }
+    if (f.pattern && typeof v === 'string' && v && !new RegExp(f.pattern).test(v)) {
+      return f.message || (f.label ? `${f.label}格式不正确` : '格式不正确');
+    }
+    return '';
+  }
+
+  /** 提交前校验所有可见字段，全部通过返回 true（隐藏字段不校验） */
+  function validateAll(): boolean {
+    const next: Record<string, string> = {};
+    for (const f of uniqueFields) {
+      if (!isVisible(f)) continue;
+      const err = validateField(f);
+      if (err) next[f.id] = err;
+    }
+    errors = next;
+    return Object.keys(next).length === 0;
+  }
+
+  function submit() {
+    if (disabled) return;
+    if (!validateAll()) return;
+    // 提交数据中剔除隐藏字段的值（避免提交不可见的中间值）
+    const visible: Record<string, unknown> = {};
+    for (const key of Object.keys(data)) {
+      const f = uniqueFields.find(x => x.id === key);
+      if (f && !isVisible(f)) continue;
+      visible[key] = data[key];
+    }
+    // 控制台打印表单提交信息（字段值 + 全量表单信息）
+    console.log('[form submit] 表单数据:', visible);
+    console.log('[form submit] 表单信息:', {
+      id,
+      fields: uniqueFields.map(f => ({ id: f.id, type: f.type, label: f.label, required: !!f.required, visible: isVisible(f), value: visible[f.id] })),
+      submitLabel,
+      _action: 'submit'
+    });
+    onchange(visible);
+  }
+
+  function reset() {
+    if (disabled) return;
+    Object.assign(data, initialData);
+    errors = {};
+    resetCount++;
+  }
+
+  function cancel() {
+    if (disabled) return;
+    onchange({ ...initialData, _action: 'cancel' });
+  }
+
+  // ---------- render ----------
+  function renderField(f: Field) {
+    switch (f.type) {
+      case 'button-group':
+        return `<ButtonGroup {...f} choices={f.choices ?? []} onchange={(v) => set(f.id, v)} />`;
+      case 'select':
+        return `<Select {...f} choices={f.choices ?? []} onchange={(v) => set(f.id, v)} />`;
+      case 'select-multi':
+        return `<SelectMulti {...f} choices={f.choices ?? []} onchange={(v) => set(f.id, v)} />`;
+      case 'radio-group':
+        return `<RadioGroup {...f} choices={f.choices ?? []} onchange={(v) => set(f.id, v)} />`;
+      case 'slider':
+        return `<Slider {...f} min={f.min ?? 0} max={f.max ?? 100} onchange={(v) => set(f.id, v)} />`;
+      case 'switch':
+        return `<Switch {...f} onchange={(v) => set(f.id, v)} />`;
+      case 'text-input':
+        return `<TextInput {...f} onchange={(v) => set(f.id, v)} />`;
+      case 'text':
+        return `<Text {...f} />`;
+      default:
+        return '';
+    }
+  }
+</script>
+
+<!-- 全局 inline 模式（所有字段 flex-wrap 横排） -->
+{#if inline && !rows}
+<div class="widget-form widget-form-inline {layoutClass}" style={[columns ? `--form-columns: ${columns}` : '', layoutStyle].filter(Boolean).join('; ')}>
+  {#key resetCount}
+  {#each uniqueFields as f (f.id)}
+    {#if isVisible(f)}
+    <div class="widget-form-field" data-field-id={f.id} data-field-type={f.type} style={inlineSpanStyle(f)}>
+      {#if f.type === 'button'}
+        <Button {...f} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'button-group'}
+        <ButtonGroup {...f} choices={f.choices ?? []} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'select'}
+        <Select {...f} choices={f.choices ?? []} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'select-multi'}
+        <SelectMulti {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'radio-group'}
+        <RadioGroup {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'cascade'}
+        <Cascader {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'tree-select'}
+        <TreeSelect {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'slider'}
+        <Slider {...f} min={f.min ?? 0} max={f.max ?? 100} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'switch'}
+        <Switch {...f} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'date-picker'}
+        <DatePicker {...f} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'number-input'}
+        <NumberInput {...f} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'text-input'}
+        <TextInput {...f} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'chart-line' || f.type === 'chart-bar' || f.type === 'chart-pie' || f.type === 'chart-scatter'}
+        <Chart {...(f as any)} type={f.type as 'chart-line' | 'chart-bar' | 'chart-pie' | 'chart-scatter'} labels={f.labels ?? []} datasets={f.datasets ?? []} onchange={(v) => set(f.id, v)} />
+      {:else if f.type === 'text'}
+        <Text {...f} />
+      {/if}
+    </div>
+    {/if}
+  {/each}
+  {/key}
+  {#if cancelLabel || resetLabel || submitLabel}
+  <!-- 按钮组：data-align 控制对齐 -->
+  <div class="widget-form-actions" data-align={buttonsAlign || 'left'}>
+    {#if cancelLabel}<button type="button" class="widget-form-cancel" onclick={cancel} {disabled}>{cancelLabel}</button>{/if}
+    {#if resetLabel}<button type="button" class="widget-form-reset" onclick={reset} {disabled}>{resetLabel}</button>{/if}
+    {#if submitLabel}<button type="button" class="widget-form-submit" onclick={submit} {disabled}>{submitLabel}</button>{/if}
+  </div>
+  {/if}
+</div>
+
+<!-- row 分组模式（24 栅格，类似 antd Row/Col） -->
+{:else if rows && rows.length > 0}
+<div class="widget-form {layoutClass}" style={layoutStyle}>
+  <!-- 设置 columns 时：所有 row 的字段合并流动，每行自动 columns 列（覆盖 row 手动分组） -->
+  {#if columns && columns >= 1}
+    {@const allFields = normRows.flatMap(r => r.fields).filter(isVisible)}
+    {@const spans = computeSpans(allFields)}
+    {@const gutter = normRows.find(r => r.gutter !== undefined)?.gutter}
+    {#key resetCount}
+    <div class="widget-form-row" style={gutter !== undefined ? `--row-gutter: ${gutter}px` : ''}>
+      {#each allFields as f, fi (f.id)}
+        <div class="widget-form-field" data-field-id={f.id} data-field-type={f.type} style={`grid-column: span ${spans[fi]}`}>
+          {#if f.type === 'button'}
+            <Button {...f} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'button-group'}
+            <ButtonGroup {...f} choices={f.choices ?? []} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'select'}
+            <Select {...f} choices={f.choices ?? []} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'select-multi'}
+            <SelectMulti {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'radio-group'}
+            <RadioGroup {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'cascade'}
+            <Cascader {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'tree-select'}
+            <TreeSelect {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'slider'}
+            <Slider {...f} min={f.min ?? 0} max={f.max ?? 100} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'switch'}
+            <Switch {...f} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'date-picker'}
+            <DatePicker {...f} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'number-input'}
+            <NumberInput {...f} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'text-input'}
+            <TextInput {...f} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'chart-line' || f.type === 'chart-bar' || f.type === 'chart-pie' || f.type === 'chart-scatter'}
+            <Chart {...(f as any)} type={f.type as 'chart-line' | 'chart-bar' | 'chart-pie' | 'chart-scatter'} labels={f.labels ?? []} datasets={f.datasets ?? []} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'text'}
+            <Text {...f} />
+          {/if}
+        </div>
+      {/each}
+    </div>
+    {/key}
+  {:else}
+    {#key resetCount}
+    {#each normRows as row, ri (ri)}
+      {@const visibleFields = row.fields.filter(isVisible)}
+      {@const spans = computeSpans(visibleFields)}
+      <div class="widget-form-row" style={row.gutter !== undefined ? `--row-gutter: ${row.gutter}px` : ''}>
+        {#each visibleFields as f, fi (f.id)}
+          <div class="widget-form-field" data-field-id={f.id} data-field-type={f.type} style={`grid-column: span ${spans[fi]}`}>
+            {#if f.type === 'button'}
+              <Button {...f} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+            {:else if f.type === 'button-group'}
+              <ButtonGroup {...f} choices={f.choices ?? []} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+            {:else if f.type === 'select'}
+              <Select {...f} choices={f.choices ?? []} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+            {:else if f.type === 'select-multi'}
+              <SelectMulti {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+            {:else if f.type === 'radio-group'}
+              <RadioGroup {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+            {:else if f.type === 'cascade'}
+              <Cascader {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+            {:else if f.type === 'tree-select'}
+              <TreeSelect {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+            {:else if f.type === 'slider'}
+              <Slider {...f} min={f.min ?? 0} max={f.max ?? 100} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+            {:else if f.type === 'switch'}
+              <Switch {...f} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+            {:else if f.type === 'date-picker'}
+              <DatePicker {...f} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+            {:else if f.type === 'number-input'}
+              <NumberInput {...f} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'text-input'}
+            <TextInput {...f} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'chart-line' || f.type === 'chart-bar' || f.type === 'chart-pie' || f.type === 'chart-scatter'}
+            <Chart {...(f as any)} type={f.type as 'chart-line' | 'chart-bar' | 'chart-pie' | 'chart-scatter'} labels={f.labels ?? []} datasets={f.datasets ?? []} onchange={(v) => set(f.id, v)} />
+          {:else if f.type === 'text'}
+            <Text {...f} />
+          {/if}
+        </div>
+        {/each}
+      </div>
+    {/each}
+    {/key}
+  {/if}
+  {#if cancelLabel || resetLabel || submitLabel}
+  <!-- 按钮组：data-align 控制对齐 -->
+  <div class="widget-form-actions" data-align={buttonsAlign || 'left'}>
+    {#if cancelLabel}<button type="button" class="widget-form-cancel" onclick={cancel} {disabled}>{cancelLabel}</button>{/if}
+    {#if resetLabel}<button type="button" class="widget-form-reset" onclick={reset} {disabled}>{resetLabel}</button>{/if}
+    {#if submitLabel}<button type="button" class="widget-form-submit" onclick={submit} {disabled}>{submitLabel}</button>{/if}
+  </div>
+  {/if}
+</div>
+
+<!-- 传统纵向模式（向后兼容；字段带 span 时切换为 24 栅格） -->
+{:else}
+<div class="widget-form {layoutClass} {fieldsGridMode ? 'widget-form-fields-grid' : ''}" style={layoutStyle}>
+  {#key resetCount}
+  {#each uniqueFields as f (f.id)}
+    {#if isVisible(f)}
+    <div class="widget-form-field" data-field-id={f.id} data-field-type={f.type} style={fieldsSpanStyle(f)}>
+    {#if f.type === 'button'}
+      <Button {...f} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+    {:else if f.type === 'button-group'}
+      <ButtonGroup {...f} choices={f.choices ?? []} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+    {:else if f.type === 'select'}
+      <Select {...f} choices={f.choices ?? []} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+    {:else if f.type === 'select-multi'}
+      <SelectMulti {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+    {:else if f.type === 'radio-group'}
+      <RadioGroup {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+    {:else if f.type === 'cascade'}
+      <Cascader {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+    {:else if f.type === 'tree-select'}
+      <TreeSelect {...f} choices={f.choices ?? []} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+    {:else if f.type === 'slider'}
+      <Slider
+        {...f}
+        min={f.min ?? 0}
+        max={f.max ?? 100}
+        disabled={disabled || !!f.disabled}
+        onchange={(v) => set(f.id, v)}
+      />
+    {:else if f.type === 'switch'}
+      <Switch {...f} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+    {:else if f.type === 'date-picker'}
+      <DatePicker {...f} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+    {:else if f.type === 'number-input'}
+      <NumberInput {...f} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+    {:else if f.type === 'text-input'}
+      <TextInput {...f} error={errors[f.id] || ''} disabled={disabled || !!f.disabled} onchange={(v) => set(f.id, v)} />
+    {:else if f.type === 'chart-line' || f.type === 'chart-bar' || f.type === 'chart-pie' || f.type === 'chart-scatter'}
+      <Chart {...(f as any)} type={f.type as 'chart-line' | 'chart-bar' | 'chart-pie' | 'chart-scatter'} labels={f.labels ?? []} datasets={f.datasets ?? []} onchange={(v) => set(f.id, v)} />
+    {:else if f.type === 'text'}
+      <Text {...f} />
+    {/if}
+    </div>
+    {/if}
+  {/each}
+  {/key}
+
+  {#if cancelLabel || resetLabel || submitLabel}
+  <!-- 按钮组：data-align 控制对齐 -->
+  <div class="widget-form-actions" data-align={buttonsAlign || 'left'}>
+    {#if cancelLabel}<button type="button" class="widget-form-cancel" onclick={cancel} {disabled}>{cancelLabel}</button>{/if}
+    {#if resetLabel}<button type="button" class="widget-form-reset" onclick={reset} {disabled}>{resetLabel}</button>{/if}
+    {#if submitLabel}<button type="button" class="widget-form-submit" onclick={submit} {disabled}>{submitLabel}</button>{/if}
+  </div>
+  {/if}
+</div>
+{/if}

package/src/lib/widgets/Incomplete.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  // Component for when widget is still streaming/loading
+  // This is shown when we can't determine the widget type yet
+</script>
+
+<div class="incomplete-widget">
+  <div class="loading-skeleton">
+    <div class="skeleton-line"></div>
+    <div class="skeleton-line short"></div>
+  </div>
+  <span class="loading-text">Parsing widget</span>
+</div>
+
+<style>
+  .incomplete-widget {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px 16px;
+    background: linear-gradient(90deg, #fafafa 0%, #f5f5f5 50%, #fafafa 100%);
+    background-size: 200% 100%;
+    animation: shimmer 2s ease-in-out infinite;
+    border: 1px solid #f0f0f0;
+    border-radius: 8px;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.65);
+    min-height: 60px;
+  }
+
+  .loading-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .skeleton-line {
+    height: 12px;
+    background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 25%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.06) 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s ease-in-out infinite;
+    border-radius: 4px;
+    width: 100%;
+  }
+
+  .skeleton-line.short {
+    width: 60%;
+  }
+
+  .loading-text {
+    font-size: 12px;
+    opacity: 0.6;
+    text-align: center;
+  }
+
+  .loading-text::after {
+    content: '';
+    animation: dots 1.5s steps(4, end) infinite;
+  }
+
+  @keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  @keyframes dots {
+    0%, 20% { content: ''; }
+    40% { content: '.'; }
+    60% { content: '..'; }
+    80%, 100% { content: '...'; }
+  }
+</style>