@skopon-cool/form-sdk 0.5.1 → 0.6.0

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Skopon form rendering SDK (A2UI + form_definition) with submit helpers",
   "type": "module",
   "sideEffects": [

package/src/adapter/a2uiAdapter.test.ts

@@ -59,6 +59,25 @@ describe('a2uiAdapter blocks <-> surface', () => {
     }
   })
 
+  it('stores file defaults as URL arrays in the A2UI data model', () => {
+    const doc = blocksToA2ui(
+      {
+        title: '',
+        description: '',
+        blocks: [
+          {
+            id: 'file',
+            type: 'file',
+            name: 'attachments',
+            defaultValue: 'https://cdn.example.com/a.pdf',
+          },
+        ],
+      },
+      { includeHeader: false },
+    )
+    expect(doc.dataModel?.attachments).toEqual(['https://cdn.example.com/a.pdf'])
+  })
+
   it('round-trips block types through a2uiToBlocks', () => {
     const doc = blocksToA2ui(makeDefinition())
     const back = a2uiToBlocks(doc)
@@ -137,6 +156,31 @@ describe('a2uiAdapter blocks <-> surface', () => {
     expect(back.blocks[0]?.options).toEqual([{ value: '0', label: '123' }])
   })
 
+  it('sanitizes untrusted FormBlock options while building an A2UI document', () => {
+    const doc = blocksToA2ui(
+      {
+        title: '',
+        description: '',
+        blocks: [
+          {
+            id: 'choice',
+            type: 'select',
+            name: 'choice',
+            options: [
+              { value: 0, label: 123 },
+              { value: {}, label: '异常' },
+            ] as never,
+          },
+        ],
+      },
+      { includeHeader: false },
+    )
+
+    expect(doc.components.find((component) => component.id === 'choice')?.options).toEqual([
+      { value: '0', label: '123' },
+    ])
+  })
+
   it('blocksToA2ui emits SkoponMedia for image blocks', () => {
     const doc = blocksToA2ui(makeDefinition(), { includeHeader: false })
     const imgNode = doc.components.find((c) => c.id === 'b-img')

package/src/adapter/a2uiAdapter.ts

@@ -100,6 +100,7 @@ function defaultValueForBlock(block: FormBlock): unknown {
       return coerceToggleValue(block.defaultValue)
     case 'multiselect':
     case 'checkbox':
+    case 'file':
     case 'resume_multiselect':
     case 'case_multiselect':
       if (Array.isArray(block.defaultValue)) return block.defaultValue
@@ -127,7 +128,7 @@ function blockToComponent(block: FormBlock): {
   const label = block.label ?? ''
   const name = block.name?.trim() || ''
   const path = name ? pathFor(name) : undefined
-  const options = (block.options ?? []).map((o) => ({ label: o.label, value: o.value }))
+  const options = normalizeFormOptions(block.options)
 
   const withData = (node: A2uiComponentNode): {
     node: A2uiComponentNode

package/src/adapter/formSchema.test.ts

@@ -76,6 +76,40 @@ describe('normalizeFormDefinition toggle default', () => {
   })
 })
 
+describe('file value schema', () => {
+  it('uses a URL array schema even when maxCount is one', () => {
+    const schema = blocksToJsonSchema([
+      {
+        id: 'file-1',
+        type: 'file',
+        name: 'attachment',
+        fileMinCount: 1,
+        fileMaxCount: 1,
+        defaultValue: 'https://cdn.example.com/legacy.pdf',
+      },
+    ])
+    expect(schema.properties).toMatchObject({
+      attachment: {
+        type: 'array',
+        items: { type: 'string' },
+        minItems: 1,
+        maxItems: 1,
+        default: ['https://cdn.example.com/legacy.pdf'],
+      },
+    })
+  })
+
+  it('omits maxItems when maxCount is unlimited', () => {
+    const schema = blocksToJsonSchema([
+      { id: 'file-1', type: 'file', name: 'attachments', fileMinCount: 0, fileMaxCount: 0 },
+    ])
+    expect(schema.properties).toMatchObject({
+      attachments: { type: 'array', items: { type: 'string' }, minItems: 0 },
+    })
+    expect((schema.properties as Record<string, Record<string, unknown>>).attachments).not.toHaveProperty('maxItems')
+  })
+})
+
 describe('normalizeFormDefinition static options', () => {
   it('keeps an empty static question for editing but omits it from jsonSchema', () => {
     const def = normalizeFormDefinition({

package/src/adapter/formSchema.ts

@@ -63,6 +63,7 @@ function normalizeDefaultValue(
   if (
     type === 'multiselect' ||
     type === 'checkbox' ||
+    type === 'file' ||
     type === 'resume_multiselect' ||
     type === 'case_multiselect'
   ) {
@@ -221,7 +222,7 @@ function normalizeBlock(raw: FormBlock): FormBlock {
 }
 
 function getOptionValueSet(block: FormBlock): Set<string> {
-  return new Set((block.options ?? []).map((opt) => opt.value))
+  return new Set(normalizeFormOptions(block.options).map((opt) => opt.value))
 }
 
 function buildMultiselectCountJsonSchema(
@@ -271,6 +272,12 @@ export function resolveSchemaDefaultValue(block: FormBlock): unknown | undefined
         : []
       return values.length > 0 ? values : undefined
     }
+    case 'file': {
+      const values = Array.isArray(normalized)
+        ? (normalized as string[]).map(String).map((item) => item.trim()).filter(Boolean)
+        : []
+      return values.length > 0 ? values : undefined
+    }
     default:
       return normalized
   }
@@ -292,13 +299,13 @@ function blockToJsonSchemaProperty(block: FormBlock): Record<string, unknown> |
     case 'select':
     case 'radio': {
       property = { type: 'string' }
-      const enumValues = (block.options ?? []).map((opt) => opt.value).filter(Boolean)
+      const enumValues = normalizeFormOptions(block.options).map((opt) => opt.value)
       if (enumValues.length > 0) property.enum = enumValues
       break
     }
     case 'multiselect':
     case 'checkbox': {
-      const enumValues = (block.options ?? []).map((opt) => opt.value).filter(Boolean)
+      const enumValues = normalizeFormOptions(block.options).map((opt) => opt.value)
       property = {
         type: 'array',
         items:
@@ -311,15 +318,11 @@ function blockToJsonSchemaProperty(block: FormBlock): Record<string, unknown> |
     case 'file': {
       const minCount = normalizeFileUploadCount(block.fileMinCount, 1)
       const maxCount = normalizeFileUploadCount(block.fileMaxCount, 1)
-      if (maxCount <= 1) {
-        property = { type: 'string' }
-      } else {
-        property = {
-          type: 'array',
-          items: { type: 'string' },
-          minItems: minCount,
-          maxItems: maxCount,
-        }
+      property = {
+        type: 'array',
+        items: { type: 'string' },
+        minItems: minCount,
+        ...(maxCount > 0 ? { maxItems: maxCount } : {}),
       }
       break
     }

package/src/catalog/a2uiCustomCatalog.tsx

@@ -1,5 +1,5 @@
 import { z } from 'zod'
-import { useEffect, useState, type ReactNode } from 'react'
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react'
 import { Catalog, type ComponentContext } from '@a2ui/web_core/v0_9'
 import {
   basicCatalog,
@@ -17,6 +17,7 @@ import {
   TimePicker,
   Typography,
   Upload,
+  type UploadFile,
 } from 'antd'
 import dayjs, { type Dayjs } from 'dayjs'
 import type { FormFilePlaceholderIcon, FormMediaSize } from '../types/index'
@@ -33,12 +34,16 @@ import {
   getRegisteredCatalogComponents,
 } from '../blocks/registry'
 import FilePlaceholderIcon from '../icons/FilePlaceholderIcon'
+import {
+  isUploadCancelledError,
+  uploadFileToCdn,
+} from '../client/uploadClient'
 import { useA2uiPreviewMode } from './a2uiPreviewContext'
+import { useFileUploadStatus } from './fileUploadStatusContext'
 import {
   asOptionalString,
   asStringArray,
   normalizeSelectStoredValue,
-  readBoundFieldValue,
   useSkoponBoundField,
 } from './useSkoponBoundField'
 
@@ -506,9 +511,36 @@ const FileUploadApi = {
     .passthrough(),
 }
 
+interface FileUploadListItem {
+  uid: string
+  name: string
+  status: 'uploading' | 'done' | 'error'
+  url?: string
+  error?: string
+}
+
+function normalizeFileUrls(value: unknown): string[] {
+  return asStringArray(value).map((url) => url.trim()).filter(Boolean)
+}
+
+function fileNameFromUrl(url: string): string {
+  const withoutQuery = url.split(/[?#]/, 1)[0]
+  const tail = withoutQuery.split('/').filter(Boolean).pop() || url
+  try {
+    return decodeURIComponent(tail)
+  } catch {
+    return tail
+  }
+}
+
+function fileItemFromUrl(url: string, uid: string): FileUploadListItem {
+  return { uid, name: fileNameFromUrl(url), status: 'done', url }
+}
+
 function FileUploadPreview({ context }: { context: ComponentContext }) {
   const { interactive } = useA2uiPreviewMode()
-  const { value, setValue, fieldName } = useSkoponBoundField(context, 'value', {
+  const { beginUpload } = useFileUploadStatus()
+  const { value, setValue, setValueSilent, fieldName } = useSkoponBoundField(context, 'value', {
     component: 'FileUpload',
     changeAction: 'change',
   })
@@ -532,47 +564,162 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
   const minCount = typeof props.minCount === 'number' ? Math.max(0, props.minCount) : 0
   const maxCount = typeof props.maxCount === 'number' ? props.maxCount : 1
   const hasMaxLimit = maxCount > 0
-  const selectedNames = asStringArray(value)
-  const atMaxLimit = hasMaxLimit && selectedNames.length >= maxCount
-  const belowMinCount = selectedNames.length < minCount
+  const initialUrls = normalizeFileUrls(value)
+  const externalUidRef = useRef(0)
+  const mountedRef = useRef(true)
+  const controllersRef = useRef(new Map<string, AbortController>())
+  const setValueRef = useRef(setValue)
+  setValueRef.current = setValue
+  const [items, setItems] = useState<FileUploadListItem[]>(() =>
+    initialUrls.map((url) => fileItemFromUrl(url, `external-${externalUidRef.current++}`)),
+  )
+  const itemsRef = useRef(items)
+  itemsRef.current = items
+
+  const commitItems = useCallback(
+    (
+      updater: (current: FileUploadListItem[]) => FileUploadListItem[],
+      writeUrls: boolean,
+    ) => {
+      const next = updater(itemsRef.current)
+      itemsRef.current = next
+      if (mountedRef.current) setItems(next)
+      if (writeUrls) {
+        setValueRef.current(
+          next
+            .filter((item) => item.status === 'done' && item.url)
+            .map((item) => item.url as string),
+        )
+      }
+      return next
+    },
+    [],
+  )
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+      for (const controller of controllersRef.current.values()) controller.abort()
+      controllersRef.current.clear()
+    }
+  }, [])
+
+  useEffect(() => {
+    const urls = normalizeFileUrls(value)
+    const rawIsNormalizedArray =
+      Array.isArray(value) &&
+      value.length === urls.length &&
+      value.every((entry, index) => typeof entry === 'string' && entry === urls[index])
+    if (!rawIsNormalizedArray) setValueSilent(urls)
+
+    const consumed = new Set<number>()
+    commitItems(
+      (current) => {
+        const next = current.filter((item) => {
+          if (item.status !== 'done' || !item.url) return true
+          const index = urls.findIndex((url, i) => !consumed.has(i) && url === item.url)
+          if (index < 0) return false
+          consumed.add(index)
+          return true
+        })
+        urls.forEach((url, index) => {
+          if (!consumed.has(index)) {
+            next.push(fileItemFromUrl(url, `external-${externalUidRef.current++}`))
+          }
+        })
+        return next
+      },
+      false,
+    )
+  }, [value, setValueSilent, commitItems])
+
+  const startUpload = useCallback(
+    (file: File & { uid?: string }) => {
+      if (!interactive) return
+      if (hasMaxLimit && itemsRef.current.length >= maxCount) return
+
+      const uid = `${file.uid ?? 'file'}-${externalUidRef.current++}`
+      const controller = new AbortController()
+      controllersRef.current.set(uid, controller)
+      commitItems(
+        (current) => [...current, { uid, name: file.name, status: 'uploading' }],
+        false,
+      )
+      const endUpload = beginUpload()
+
+      void uploadFileToCdn(file, { signal: controller.signal })
+        .then((result) => {
+          if (!mountedRef.current || controller.signal.aborted) return
+          commitItems(
+            (current) =>
+              current.map((item) =>
+                item.uid === uid
+                  ? { ...item, status: 'done', url: result.url, error: undefined }
+                  : item,
+              ),
+            true,
+          )
+        })
+        .catch((error: unknown) => {
+          if (!mountedRef.current || isUploadCancelledError(error)) return
+          const detail = error instanceof Error ? error.message : '上传失败'
+          commitItems(
+            (current) =>
+              current.map((item) =>
+                item.uid === uid ? { ...item, status: 'error', error: detail } : item,
+              ),
+            false,
+          )
+        })
+        .finally(() => {
+          controllersRef.current.delete(uid)
+          endUpload()
+        })
+    },
+    [beginUpload, commitItems, hasMaxLimit, interactive, maxCount],
+  )
+
+  const handleRemove = useCallback(
+    (uid: string) => {
+      controllersRef.current.get(uid)?.abort()
+      controllersRef.current.delete(uid)
+      commitItems((current) => current.filter((item) => item.uid !== uid), true)
+    },
+    [commitItems],
+  )
+
+  const uploadedCount = items.filter((item) => item.status === 'done').length
+  const atMaxLimit = hasMaxLimit && items.length >= maxCount
+  const belowMinCount = uploadedCount < minCount
+  const latestError = [...items].reverse().find((item) => item.error)?.error
+  const fileList: UploadFile[] = items.map((item) => ({
+    uid: item.uid,
+    name: item.name,
+    status: item.status,
+    url: item.url,
+    response: item.error,
+  }))
 
   return (
     <div className="form-block-preview" data-skopon-field={fieldName || undefined}>
       {label ? <div className="form-block-preview-label">{label}</div> : null}
       <Upload.Dragger
-        disabled={!interactive || atMaxLimit}
+        disabled={!interactive}
+        openFileDialogOnClick={!atMaxLimit}
         accept={buildFileAcceptAttribute(fileAcceptTypes, fileAcceptExtensions)}
         className="form-file-upload-preview"
-        showUploadList={interactive && selectedNames.length > 0}
-        fileList={
-          interactive
-            ? selectedNames.map((name, index) => ({
-                uid: `${index}-${name}`,
-                name,
-                status: 'done' as const,
-              }))
-            : []
-        }
+        multiple={!hasMaxLimit || maxCount > 1}
+        showUploadList={interactive && items.length > 0}
+        fileList={interactive ? fileList : []}
         beforeUpload={(file) => {
           if (!interactive) return Upload.LIST_IGNORE
-          const currentNames = asStringArray(readBoundFieldValue(context))
-          if (hasMaxLimit && currentNames.length >= maxCount) return Upload.LIST_IGNORE
-          const next = hasMaxLimit
-            ? [...currentNames, file.name].slice(0, maxCount)
-            : [...currentNames, file.name]
-          setValue(next)
-          return false
+          startUpload(file)
+          return Upload.LIST_IGNORE
         }}
         onRemove={(file) => {
-          const currentNames = asStringArray(readBoundFieldValue(context))
-          const indexMatch = /^(\d+)-/.exec(file.uid ?? '')
-          const index = indexMatch ? Number(indexMatch[1]) : -1
-          const next =
-            index >= 0 && index < currentNames.length
-              ? currentNames.filter((_, i) => i !== index)
-              : currentNames.filter((name) => name !== file.name)
-          if (next.length < minCount) return false
-          setValue(next)
+          handleRemove(file.uid)
+          return true
         }}
       >
         <p className="form-file-upload-preview-icon">
@@ -584,9 +731,14 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
         允许：{acceptSummary ?? '全部类型'}
         {minCount > 0 ? `；至少 ${minCount} 个文件` : ''}
         {hasMaxLimit ? `；最多 ${maxCount} 个文件` : ''}
-        ；当前仅收集文件名（不含文件内容，需宿主另行上传）
-        {belowMinCount && interactive ? `（当前 ${selectedNames.length} 个，未达下限）` : ''}
+        ；选择后自动上传至 CDN
+        {belowMinCount && interactive ? `（当前 ${uploadedCount} 个，未达下限）` : ''}
       </Typography.Text>
+      {latestError ? (
+        <Typography.Text type="danger" className="form-block-preview-help">
+          {latestError}
+        </Typography.Text>
+      ) : null}
     </div>
   )
 }

package/src/catalog/fileUploadPreview.test.tsx

@@ -0,0 +1,177 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const uploadMock = vi.hoisted(() => vi.fn())
+
+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(),
+}))
+
+vi.mock('../client/uploadClient', () => ({
+  uploadFileToCdn: uploadMock,
+  isUploadCancelledError: (error: unknown) =>
+    error instanceof Error && error.name === 'UploadCancelledError',
+}))
+
+import { createElement, createRef } from 'react'
+import { act, cleanup, fireEvent, render, waitFor } 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)
+})
+
+beforeEach(() => {
+  uploadMock.mockReset()
+})
+afterEach(cleanup)
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  let reject!: (reason?: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+function renderFileSurface(options: {
+  maxCount?: number
+  minCount?: number
+  defaultValue?: string | string[]
+  legacyRawValue?: string
+  onUploadingChange?: (uploading: boolean) => void
+} = {}) {
+  const doc = blocksToA2ui(
+    {
+      title: '',
+      description: '',
+      blocks: [
+        {
+          id: 'file',
+          type: 'file',
+          name: 'attachments',
+          label: '附件',
+          fileMinCount: options.minCount ?? 0,
+          fileMaxCount: options.maxCount ?? 1,
+          defaultValue: options.defaultValue,
+        },
+      ],
+    },
+    { includeHeader: false },
+  )
+  if (options.legacyRawValue !== undefined && doc.dataModel) {
+    doc.dataModel.attachments = options.legacyRawValue
+  }
+  const ref = createRef<SkoponFormRendererRef>()
+  const view = render(
+    createElement(SkoponFormRenderer, {
+      ref,
+      doc,
+      surfaceId: 'upload-test',
+      fieldNames: ['attachments'],
+      onUploadingChange: options.onUploadingChange,
+    }),
+  )
+  const input = view.container.querySelector('input[type="file"]') as HTMLInputElement
+  expect(input).toBeTruthy()
+  return { ref, input, ...view }
+}
+
+describe('FileUploadPreview', () => {
+  it('stores successful CDN URLs in user selection order', async () => {
+    const first = deferred<{ url: string }>()
+    const second = deferred<{ url: string }>()
+    uploadMock
+      .mockImplementationOnce(() => first.promise)
+      .mockImplementationOnce(() => second.promise)
+    const uploadingChanges: boolean[] = []
+    const { input, ref, container } = renderFileSurface({
+      maxCount: 2,
+      onUploadingChange: (uploading) => uploadingChanges.push(uploading),
+    })
+
+    fireEvent.change(input, { target: { files: [new File(['1'], 'first.pdf')] } })
+    await waitFor(() => expect(uploadMock).toHaveBeenCalledTimes(1))
+    const nextInput = container.querySelector('input[type="file"]') as HTMLInputElement
+    fireEvent.change(nextInput, { target: { files: [new File(['2'], 'second.pdf')] } })
+    await waitFor(() => expect(uploadMock).toHaveBeenCalledTimes(2))
+    expect(uploadingChanges).toContain(true)
+
+    await act(async () => second.resolve({ url: 'https://cdn.example.com/second.pdf' }))
+    expect(ref.current?.getValues()).toEqual({
+      attachments: ['https://cdn.example.com/second.pdf'],
+    })
+    await act(async () => first.resolve({ url: 'https://cdn.example.com/first.pdf' }))
+    await waitFor(() =>
+      expect(ref.current?.getValues()).toEqual({
+        attachments: [
+          'https://cdn.example.com/first.pdf',
+          'https://cdn.example.com/second.pdf',
+        ],
+      }),
+    )
+    await waitFor(() => expect(uploadingChanges.at(-1)).toBe(false))
+  })
+
+  it('keeps failed uploads out of the bound value and shows the error', async () => {
+    uploadMock.mockRejectedValueOnce(new Error('七牛上传失败'))
+    const { input, ref, getByText } = renderFileSurface()
+    fireEvent.change(input, { target: { files: [new File(['x'], 'bad.pdf')] } })
+    await waitFor(() => expect(getByText('七牛上传失败')).toBeTruthy())
+    expect(ref.current?.getValues()).toEqual({ attachments: [] })
+  })
+
+  it('allows removing below minCount and aborts an in-flight request', async () => {
+    let signal: AbortSignal | undefined
+    uploadMock.mockImplementation(
+      (_file: File, options?: { signal?: AbortSignal }) => {
+        signal = options?.signal
+        return new Promise<{ url: string }>((resolve) => {
+          signal?.addEventListener('abort', () => {
+            resolve({ url: 'https://cdn.example.com/ignored.pdf' })
+          })
+        })
+      },
+    )
+    const { input, container, ref } = renderFileSurface({ minCount: 1, maxCount: 1 })
+    fireEvent.change(input, { target: { files: [new File(['x'], 'pending.pdf')] } })
+    await waitFor(() => expect(uploadMock).toHaveBeenCalledTimes(1))
+    const remove = await waitFor(() => {
+      const button = container.querySelector('.ant-upload-list-item-actions button') as HTMLElement
+      expect(button).toBeTruthy()
+      return button
+    })
+    fireEvent.click(remove)
+    await waitFor(() => expect(signal?.aborted).toBe(true))
+    expect(ref.current?.getValues()).toEqual({ attachments: [] })
+    expect(container.textContent).toContain('当前 0 个，未达下限')
+  })
+
+  it('normalizes a legacy string value to a URL array', async () => {
+    const { ref, getByText } = renderFileSurface({
+      legacyRawValue: 'https://cdn.example.com/legacy%20file.pdf',
+    })
+    await waitFor(() =>
+      expect(ref.current?.getValues()).toEqual({
+        attachments: ['https://cdn.example.com/legacy%20file.pdf'],
+      }),
+    )
+    expect(getByText('legacy file.pdf')).toBeTruthy()
+  })
+})