@skopon-cool/form-sdk 0.1.0 → 0.1.3

package/src/catalog/textFieldPreview.test.tsx

@@ -0,0 +1,88 @@
+// @vitest-environment happy-dom
+import { describe, it, expect, vi, afterEach, beforeAll } from 'vitest'
+
+vi.mock('@a2ui/web_core/v0_9/basic_catalog', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@a2ui/web_core/v0_9/basic_catalog')>()
+  return { ...actual, injectBasicCatalogStyles: vi.fn() }
+})
+
+vi.mock('@a2ui/react/styles', () => ({
+  injectStyles: vi.fn(),
+  removeStyles: vi.fn(),
+}))
+
+import { createElement, createRef } from 'react'
+import { render, cleanup, fireEvent } from '@testing-library/react'
+import { blocksToA2ui } from '../adapter/a2uiAdapter'
+import SkoponFormRenderer, { type SkoponFormRendererRef } from '../components/SkoponFormRenderer'
+
+beforeAll(() => {
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+})
+
+function renderTextareaSurface() {
+  const doc = blocksToA2ui(
+    {
+      title: '',
+      description: '',
+      blocks: [
+        {
+          id: 'b-bio',
+          type: 'textarea',
+          name: 'bio',
+          label: '简介',
+          placeholder: '请填写简介',
+        },
+        {
+          id: 'b-desc',
+          type: 'paragraph',
+          label: '这是一段说明文字',
+        },
+      ],
+    },
+    { includeHeader: false },
+  )
+
+  const ref = createRef<SkoponFormRendererRef>()
+  const view = render(
+    createElement(SkoponFormRenderer, {
+      ref,
+      doc,
+      surfaceId: 'test-form',
+      fieldNames: ['bio'],
+    }),
+  )
+  return { ref, ...view }
+}
+
+describe('SkoponFormRenderer TextField longText', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('renders Ant Design TextArea for textarea blocks', () => {
+    const { container, getByText } = renderTextareaSurface()
+    expect(getByText('简介')).toBeTruthy()
+    const textarea = container.querySelector('textarea.ant-input')
+    expect(textarea).toBeTruthy()
+    expect(textarea?.getAttribute('placeholder')).toBe('请填写简介')
+  })
+
+  it('reads textarea values via getValues()', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
+    const { container, ref } = renderTextareaSurface()
+    const textarea = container.querySelector('textarea.ant-input')
+    expect(textarea).toBeTruthy()
+    if (textarea) {
+      fireEvent.change(textarea, { target: { value: 'hello world' } })
+    }
+    expect(ref.current?.getValues(['bio'])).toEqual({ bio: 'hello world' })
+    expect(warnSpy.mock.calls.some((call) => String(call[0]).includes('[useMarkdown]'))).toBe(false)
+    warnSpy.mockRestore()
+  })
+})

package/src/catalog/useSkoponBoundField.test.ts

@@ -0,0 +1,62 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, it, expect } from 'vitest'
+import type { ComponentContext } from '@a2ui/web_core/v0_9'
+import { asStringArray, readBoundFieldValue } from './useSkoponBoundField'
+
+function createMockContext(initial: unknown = []): {
+  context: ComponentContext
+  getStore: () => unknown
+} {
+  const store = new Map<string, unknown>([['/files', initial]])
+  const binding = { path: '/files' }
+  const context = {
+    componentModel: {
+      properties: { value: binding },
+    },
+    dataContext: {
+      resolveDynamicValue: (b: typeof binding) => store.get(b.path),
+      set: (path: string, value: unknown) => {
+        store.set(path, value)
+      },
+      subscribeDynamicValue: () => ({ unsubscribe: () => {} }),
+    },
+  } as unknown as ComponentContext
+  return {
+    context,
+    getStore: () => store.get('/files'),
+  }
+}
+
+describe('readBoundFieldValue', () => {
+  it('reads current bound value from dataContext', () => {
+    const { context } = createMockContext(['a.pdf'])
+    expect(asStringArray(readBoundFieldValue(context))).toEqual(['a.pdf'])
+  })
+
+  it('supports sequential appends without stale reads', () => {
+    const { context, getStore } = createMockContext([])
+    const append = (fileName: string) => {
+      const current = asStringArray(readBoundFieldValue(context))
+      context.dataContext.set('/files', [...current, fileName])
+    }
+    append('first.pdf')
+    append('second.pdf')
+    expect(getStore()).toEqual(['first.pdf', 'second.pdf'])
+  })
+})
+
+describe('file upload remove by uid index', () => {
+  it('removes only the file at the uid index when names duplicate', () => {
+    const currentNames = ['dup.txt', 'dup.txt', 'other.txt']
+    const uid = '1-dup.txt'
+    const indexMatch = /^(\d+)-/.exec(uid)
+    const index = indexMatch ? Number(indexMatch[1]) : -1
+    const next =
+      index >= 0 && index < currentNames.length
+        ? currentNames.filter((_, i) => i !== index)
+        : currentNames.filter((name) => name !== 'dup.txt')
+    expect(next).toEqual(['dup.txt', 'other.txt'])
+  })
+})

package/src/catalog/useSkoponBoundField.ts

@@ -11,6 +11,15 @@ function bindingPath(value: unknown): string | null {
   return null
 }
 
+/** 从 A2UI 组件 context 读取当前绑定字段值（不订阅更新，适合事件回调内读最新值）。 */
+export function readBoundFieldValue(context: ComponentContext, field = 'value'): unknown {
+  const props = context.componentModel.properties as Record<string, unknown>
+  const binding = props[field] as DynamicBinding | undefined
+  const path = bindingPath(binding)
+  if (!path || binding === undefined) return undefined
+  return context.dataContext.resolveDynamicValue(binding)
+}
+
 /** 将 skopon 预览控件绑定到 A2UI surface dataModel（与 basicCatalog binder 行为一致）。 */
 export function useSkoponBoundField(context: ComponentContext, field = 'value') {
   const props = context.componentModel.properties as Record<string, unknown>
@@ -31,7 +40,7 @@ export function useSkoponBoundField(context: ComponentContext, field = 'value')
     return context.dataContext.resolveDynamicValue(binding)
   }, [context, binding, path])
 
-  const value = path ? useSyncExternalStore(subscribe, getSnapshot, getSnapshot) : undefined
+  const value = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
 
   const setValue = useCallback(
     (next: unknown) => {

package/src/client/formClient.test.ts

@@ -0,0 +1,83 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, it, expect, vi } from 'vitest'
+import { createFormClient } from './formClient'
+
+function mockResponse(
+  init: Partial<Response> & { json?: () => Promise<unknown>; text?: () => Promise<string> },
+): Response {
+  return {
+    ok: init.ok ?? true,
+    status: init.status ?? 200,
+    headers: { get: () => 'application/json' },
+    json: init.json ?? (async () => ({})),
+    text: init.text ?? (async () => ''),
+  } as Response
+}
+
+describe('createFormClient', () => {
+  it('fetchDetail returns mapped form definition on success', async () => {
+    const fetchMock = vi.fn(async () =>
+      mockResponse({
+        json: async () => ({
+          success: true,
+          data: {
+            form_id: 1,
+            form_unique_id: 'form-abc',
+            name: 'Test',
+            disabled: 0,
+            form_definition: {
+              title: 'T',
+              blocks: [{ id: 'b1', type: 'text', name: 'x', label: 'X' }],
+            },
+          },
+        }),
+      }),
+    ) as unknown as typeof fetch
+
+    const client = createFormClient({ fetch: fetchMock, baseUrl: '/api/v1', detailPath: '/dev/form/detail' })
+    const result = await client.fetchDetail({ formUniqueId: 'form-abc' })
+    expect(result.formUniqueId).toBe('form-abc')
+    expect(result.formId).toBe(1)
+    expect(result.disabled).toBe(false)
+    expect(result.formDefinition?.blocks).toHaveLength(1)
+  })
+
+  it('throws on non-JSON response', async () => {
+    const fetchMock = vi.fn(async () =>
+      mockResponse({
+        json: async () => {
+          throw new SyntaxError('Unexpected token')
+        },
+      }),
+    ) as unknown as typeof fetch
+
+    const client = createFormClient({ fetch: fetchMock })
+    await expect(client.fetchDetail({ formUniqueId: 'x' })).rejects.toThrow('响应非 JSON')
+  })
+
+  it('throws when envelope data is missing', async () => {
+    const fetchMock = vi.fn(async () =>
+      mockResponse({
+        json: async () => ({ success: true, data: null }),
+      }),
+    ) as unknown as typeof fetch
+
+    const client = createFormClient({ fetch: fetchMock })
+    await expect(client.fetchDetail({ formUniqueId: 'x' })).rejects.toThrow('响应缺少 data')
+  })
+
+  it('throws when API returns success false', async () => {
+    const fetchMock = vi.fn(async () =>
+      mockResponse({
+        ok: false,
+        status: 404,
+        json: async () => ({ success: false, message: '表单不存在' }),
+      }),
+    ) as unknown as typeof fetch
+
+    const client = createFormClient({ fetch: fetchMock })
+    await expect(client.fetchDetail({ formUniqueId: 'missing' })).rejects.toThrow('表单不存在')
+  })
+})

package/src/client/formClient.ts

@@ -27,11 +27,19 @@ interface ApiEnvelope<T> {
 }
 
 async function parseEnvelope<T>(response: Response): Promise<T> {
-  const json = (await response.json()) as ApiEnvelope<T>
+  let json: ApiEnvelope<T>
+  try {
+    json = (await response.json()) as ApiEnvelope<T>
+  } catch {
+    throw new Error(`响应非 JSON (${response.status})`)
+  }
   if (!response.ok || json.success === false) {
     throw new Error(json.message || `请求失败 (${response.status})`)
   }
-  return json.data as T
+  if (json.data === undefined || json.data === null) {
+    throw new Error(json.message || `响应缺少 data (${response.status})`)
+  }
+  return json.data
 }
 
 export function createFormClient(options: FormClientOptions = {}): FormClient {

package/src/components/AskUserFormCard.tsx

@@ -1,18 +1,40 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Button, Spin, Tooltip } from 'antd'
+import { Button, Spin, Tag, Tooltip } from 'antd'
 import type { FormDetailResult, FormSchema, SubmitMode } from '../types/index'
 import { buildAskUserSurface } from '../adapter/resolveSurface'
-import { buildCurlStatement } from '../submit/buildCurlStatement'
-import { intersectPayloadWithForm } from '../submit/intersectPayloadWithForm'
+import { buildAskUserCurlStatement } from '../submit/buildCurlStatement'
+import {
+  extractExtraBlockValues,
+  getPayloadInputFieldNames,
+  getPayloadRenderableBlocks,
+  intersectPayloadBlocksWithForm,
+  parsePayloadBlocksJson,
+  payloadHasInputBlocks,
+} from '../submit/intersectPayloadBlocksWithForm'
 import { copyTextToClipboard, submitFormJson } from '../submit/submitFormJson'
 import SkoponFormRenderer, { type SkoponFormRendererRef } from './SkoponFormRenderer'
 import CurlSubmitBlock from './CurlSubmitBlock'
 
+function formatSubmitErrorMessage(status: number, body: unknown): string {
+  if (body && typeof body === 'object' && body !== null && 'message' in body) {
+    const msg = (body as { message: unknown }).message
+    if (typeof msg === 'string' && msg.trim()) {
+      return `提交失败 (${status}): ${msg.trim()}`
+    }
+  }
+  if (typeof body === 'string' && body.trim()) {
+    return `提交失败 (${status}): ${body.trim()}`
+  }
+  return `提交失败 (${status})`
+}
+
 export interface AskUserFormCardProps {
   payload: unknown
-  formUniqueId: string
+  /** 可选；无则跳过拉取 vt_forms，仅用 payload blocks fallback */
+  formUniqueId?: string | null
   callbackUrl?: string | null
   submitMode?: SubmitMode
+  /** 需 useCallback 稳定引用，避免重复拉取 */
   fetchFormDetail: (ref: { formUniqueId: string }) => Promise<FormDetailResult>
   onNotify?: (type: 'success' | 'error', message: string) => void
 }
@@ -28,22 +50,46 @@ export default function AskUserFormCard({
   const [formDef, setFormDef] = useState<FormSchema | null>(null)
   const [formDisabled, setFormDisabled] = useState(false)
   const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
   const rendererRef = useRef<SkoponFormRendererRef>(null)
+  const mountedRef = useRef(true)
+  const onNotifyRef = useRef(onNotify)
+  onNotifyRef.current = onNotify
+
+  const resolvedFormUniqueId = formUniqueId?.trim() ?? ''
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
 
   useEffect(() => {
     let cancelled = false
+    if (!resolvedFormUniqueId) {
+      setLoading(false)
+      setFormDisabled(false)
+      setFormDef(null)
+      return () => {
+        cancelled = true
+      }
+    }
+
     setLoading(true)
     setFormDisabled(false)
-    fetchFormDetail({ formUniqueId })
+    fetchFormDetail({ formUniqueId: resolvedFormUniqueId })
       .then((detail) => {
         if (cancelled) return
         setFormDisabled(Boolean(detail.disabled))
-        setFormDef(detail.disabled ? null : detail.formDefinition ?? null)
+        setFormDef(detail.formDefinition ?? null)
       })
-      .catch(() => {
+      .catch((error) => {
         if (!cancelled) {
           setFormDisabled(false)
           setFormDef(null)
+          const detail = error instanceof Error ? error.message : '获取表单定义失败'
+          onNotifyRef.current?.('error', detail)
         }
       })
       .finally(() => {
@@ -52,25 +98,49 @@ export default function AskUserFormCard({
     return () => {
       cancelled = true
     }
-  }, [formUniqueId, fetchFormDetail])
+  }, [resolvedFormUniqueId, fetchFormDetail])
 
-  const { matchedBlocks, remainderPayload } = useMemo(
-    () => intersectPayloadWithForm(payload, formDef ?? undefined),
-    [payload, formDef],
-  )
+  const payloadDef = useMemo(() => parsePayloadBlocksJson(payload), [payload])
+
+  const intersection = useMemo(() => {
+    if (!payloadDef) return null
+    return intersectPayloadBlocksWithForm(payloadDef, formDef ?? undefined)
+  }, [payloadDef, formDef])
+
+  const matchedBlocks = intersection?.matchedBlocks ?? []
+  const usePayloadFallback =
+    Boolean(payloadDef && payloadHasInputBlocks(payloadDef) && matchedBlocks.length === 0)
 
-  const fieldNames = useMemo(
-    () =>
-      matchedBlocks
-        .map((block) => block.name?.trim())
-        .filter((name): name is string => Boolean(name)),
-    [matchedBlocks],
+  const renderBlocks = useMemo(() => {
+    if (intersection && intersection.renderBlocks.length > 0) {
+      return intersection.renderBlocks
+    }
+    if (usePayloadFallback && payloadDef) return getPayloadRenderableBlocks(payloadDef)
+    return []
+  }, [intersection, usePayloadFallback, payloadDef])
+
+  const extraValues = useMemo(
+    () => (usePayloadFallback ? {} : extractExtraBlockValues(intersection?.extraBlocks ?? [])),
+    [usePayloadFallback, intersection],
   )
 
+  const fieldNames = useMemo(() => {
+    if (usePayloadFallback && payloadDef) return getPayloadInputFieldNames(payloadDef)
+    return renderBlocks
+      .filter((block) => block.name?.trim())
+      .map((block) => block.name!.trim())
+  }, [usePayloadFallback, payloadDef, renderBlocks])
+
   const surfaceDoc = useMemo(() => {
-    if (!formDef || matchedBlocks.length === 0) return null
-    return buildAskUserSurface(formDef, matchedBlocks)
-  }, [formDef, matchedBlocks])
+    if (renderBlocks.length === 0) return null
+    const title = intersection?.title ?? payloadDef?.title ?? ''
+    const description = intersection?.description ?? payloadDef?.description ?? ''
+    return buildAskUserSurface({ title, description }, renderBlocks)
+  }, [intersection, payloadDef, renderBlocks])
+
+  const surfaceId = resolvedFormUniqueId
+    ? `ask-user-${resolvedFormUniqueId}`
+    : 'ask-user-payload'
 
   if (loading) {
     return (
@@ -80,76 +150,84 @@ export default function AskUserFormCard({
     )
   }
 
-  if (matchedBlocks.length === 0) {
+  if (!payloadDef || renderBlocks.length === 0) {
     return (
       <CurlSubmitBlock
         payload={payload}
         callbackUrl={callbackUrl}
-        unpublishedFormId={formDisabled ? formUniqueId : undefined}
+        unpublishedFormId={formDisabled && resolvedFormUniqueId ? resolvedFormUniqueId : undefined}
         onNotify={onNotify}
       />
     )
   }
 
-  const hasRemainder = Object.keys(remainderPayload).length > 0
-
   async function handleSubmit() {
-    const values = rendererRef.current?.getValues(fieldNames) ?? {}
-    if (submitMode === 'post') {
-      const url = (callbackUrl ?? '').trim()
-      if (!url) {
-        onNotify?.('error', 'callback_url 为空，无法提交')
-        return
-      }
-      try {
-        const result = await submitFormJson(url, values)
+    if (submitting) return
+    setSubmitting(true)
+    try {
+      const cardValues = rendererRef.current?.getValues(fieldNames) ?? {}
+      const submitBody = { ...cardValues, ...extraValues }
+
+      if (submitMode === 'post') {
+        const url = (callbackUrl ?? '').trim()
+        if (!url) {
+          onNotifyRef.current?.('error', 'callback_url 为空，无法提交')
+          return
+        }
+        const result = await submitFormJson(url, submitBody)
+        if (!mountedRef.current) return
         if (result.ok) {
-          onNotify?.('success', '提交成功')
+          onNotifyRef.current?.('success', '提交成功')
         } else {
-          onNotify?.('error', `提交失败 (${result.status})`)
+          onNotifyRef.current?.('error', formatSubmitErrorMessage(result.status, result.body))
         }
-      } catch (error) {
-        const detail = error instanceof Error ? error.message : '提交失败'
-        onNotify?.('error', detail)
+        return
       }
-      return
-    }
 
-    try {
-      await copyTextToClipboard(buildCurlStatement(values, callbackUrl))
-      onNotify?.('success', '已复制 curl 到剪贴板')
-    } catch {
-      onNotify?.('error', '复制失败')
+      await copyTextToClipboard(
+        buildAskUserCurlStatement({ cardValues, extraValues, callbackUrl }),
+      )
+      if (!mountedRef.current) return
+      onNotifyRef.current?.('success', '已复制 curl 到剪贴板')
+    } catch (error) {
+      if (!mountedRef.current) return
+      const detail = error instanceof Error ? error.message : '复制失败'
+      onNotifyRef.current?.('error', detail)
+    } finally {
+      if (mountedRef.current) setSubmitting(false)
     }
   }
 
   return (
     <div className="ask-user-form-card">
+      {formDisabled && resolvedFormUniqueId ? (
+        <div className="ask-user-form-card-status">
+          <Tooltip title={resolvedFormUniqueId}>
+            <Tag className="ask-user-curl-unpublished-tag">卡片 ID 未发布</Tag>
+          </Tooltip>
+        </div>
+      ) : null}
       <SkoponFormRenderer
         ref={rendererRef}
         doc={surfaceDoc}
-        surfaceId={`ask-user-${formUniqueId}`}
+        surfaceId={surfaceId}
         fieldNames={fieldNames}
         interactive
       />
 
       <div className="ask-user-form-actions">
         <Tooltip title={submitMode === 'curl' ? '点击复制 curl' : '提交 JSON 到 callback_url'}>
-          <Button type="primary" size="small" onClick={() => void handleSubmit()}>
+          <Button
+            type="primary"
+            size="small"
+            loading={submitting}
+            disabled={submitting}
+            onClick={() => void handleSubmit()}
+          >
             提交
           </Button>
         </Tooltip>
       </div>
-
-      {hasRemainder ? (
-        <CurlSubmitBlock
-          payload={remainderPayload}
-          callbackUrl={callbackUrl}
-          title="以下字段不在表单中，请使用 curl 提交"
-          incompleteFormId={formUniqueId}
-          onNotify={onNotify}
-        />
-      ) : null}
     </div>
   )
 }

package/src/components/SkoponA2uiStreamRenderer.test.ts

@@ -0,0 +1,62 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, it, expect } from 'vitest'
+import { MessageProcessor, type A2uiMessage } from '@a2ui/web_core/v0_9'
+import type { ReactComponentImplementation } from '@a2ui/react/v0_9'
+import { blocksToA2ui, surfaceDocToMessages } from '../adapter/a2uiAdapter'
+import { buildSkoponCatalog, SKOPON_CATALOG_ID } from '../catalog/a2uiCustomCatalog'
+
+function createProcessor(): MessageProcessor<ReactComponentImplementation> {
+  return new MessageProcessor([buildSkoponCatalog()])
+}
+
+function buildStreamMessages(surfaceId: string): A2uiMessage[] {
+  const doc = blocksToA2ui(
+    {
+      title: '',
+      description: '',
+      blocks: [{ id: 'b-name', type: 'text', name: 'name', label: '姓名' }],
+    },
+    { includeHeader: false },
+  )
+  return surfaceDocToMessages(doc, { surfaceId, catalogId: SKOPON_CATALOG_ID }) as unknown as A2uiMessage[]
+}
+
+/** 与 SkoponA2uiStreamRenderer 在 messages 清空时的 reset 行为一致。 */
+function resetStreamProcessor(): MessageProcessor<ReactComponentImplementation> {
+  return createProcessor()
+}
+
+describe('SkoponA2uiStreamRenderer stream lifecycle', () => {
+  it('processes incremental messages into surfaces', () => {
+    const surfaceId = 'stream-test'
+    const messages = buildStreamMessages(surfaceId)
+    const processor = createProcessor()
+    processor.processMessages(messages)
+    expect(processor.model.surfacesMap.size).toBeGreaterThan(0)
+  })
+
+  it('clears surfaces when stream messages are reset to empty', () => {
+    const surfaceId = 'stream-clear'
+    const messages = buildStreamMessages(surfaceId)
+    let processor = createProcessor()
+    processor.processMessages(messages)
+    expect(processor.model.surfacesMap.size).toBeGreaterThan(0)
+
+    processor = resetStreamProcessor()
+    expect(processor.model.surfacesMap.size).toBe(0)
+  })
+
+  it('rebuilds processor when message count shrinks', () => {
+    const surfaceId = 'stream-shrink'
+    const messages = buildStreamMessages(surfaceId)
+    const processor = createProcessor()
+    processor.processMessages(messages)
+    const countAfterFull = processor.model.surfacesMap.size
+
+    const rebuilt = createProcessor()
+    rebuilt.processMessages(messages.slice(0, 1))
+    expect(rebuilt.model.surfacesMap.size).toBeLessThanOrEqual(countAfterFull)
+  })
+})