@skopon-cool/form-sdk 0.5.1 → 0.6.0

package/src/catalog/fileUploadStatusContext.tsx

@@ -0,0 +1,64 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react'
+
+interface FileUploadStatusContextValue {
+  beginUpload: () => () => void
+}
+
+const FileUploadStatusContext = createContext<FileUploadStatusContextValue>({
+  beginUpload: () => () => {},
+})
+
+export interface FileUploadStatusProviderProps {
+  children: ReactNode
+  onUploadingChange?: (uploading: boolean) => void
+}
+
+export function FileUploadStatusProvider({
+  children,
+  onUploadingChange,
+}: FileUploadStatusProviderProps) {
+  const [pendingCount, setPendingCount] = useState(0)
+  const mountedRef = useRef(true)
+  const onUploadingChangeRef = useRef(onUploadingChange)
+  onUploadingChangeRef.current = onUploadingChange
+
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+      onUploadingChangeRef.current?.(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    onUploadingChange?.(pendingCount > 0)
+  }, [pendingCount, onUploadingChange])
+
+  const beginUpload = useCallback(() => {
+    if (mountedRef.current) setPendingCount((count) => count + 1)
+    let ended = false
+    return () => {
+      if (ended) return
+      ended = true
+      if (mountedRef.current) setPendingCount((count) => Math.max(0, count - 1))
+    }
+  }, [])
+
+  return (
+    <FileUploadStatusContext.Provider value={{ beginUpload }}>
+      {children}
+    </FileUploadStatusContext.Provider>
+  )
+}
+
+export function useFileUploadStatus() {
+  return useContext(FileUploadStatusContext)
+}

package/src/client/uploadClient.test.ts

@@ -0,0 +1,104 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import {
+  CDN_UPLOAD_PATH,
+  CDN_UPLOAD_TIMEOUT_MS,
+  UploadCancelledError,
+  uploadFileToCdn,
+} from './uploadClient'
+
+function response(body: unknown, init: Partial<Response> = {}): Response {
+  return {
+    ok: init.ok ?? true,
+    status: init.status ?? 200,
+    json: async () => body,
+  } as Response
+}
+
+describe('uploadFileToCdn', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
+    sessionStorage.clear()
+  })
+
+  it('uploads multipart data to the fixed endpoint with session Bearer auth', async () => {
+    sessionStorage.setItem('auth_user', JSON.stringify({ token: 'token-1' }))
+    const fetchMock = vi.fn(async () =>
+      response({
+        success: true,
+        data: { url: ' https://cdn.example.com/a.pdf ', file_name: 'a.pdf' },
+      }),
+    )
+    vi.stubGlobal('fetch', fetchMock)
+    const file = new File(['pdf'], 'a.pdf', { type: 'application/pdf' })
+
+    await expect(uploadFileToCdn(file)).resolves.toMatchObject({
+      url: 'https://cdn.example.com/a.pdf',
+      file_name: 'a.pdf',
+    })
+    expect(fetchMock).toHaveBeenCalledTimes(1)
+    const [url, init] = fetchMock.mock.calls[0] as unknown as [string, RequestInit]
+    expect(url).toBe(CDN_UPLOAD_PATH)
+    expect(init.method).toBe('POST')
+    expect(init.headers).toEqual({ Authorization: 'Bearer token-1' })
+    expect((init.headers as Record<string, string>)['Content-Type']).toBeUndefined()
+    expect(init.body).toBeInstanceOf(FormData)
+    expect((init.body as FormData).get('file')).toBe(file)
+    expect((init.body as FormData).get('purpose')).toBeNull()
+  })
+
+  it.each([
+    [{ success: false, message: '七牛上传失败', data: {} }, '七牛上传失败'],
+    [{ success: true, data: { url: '   ' } }, '响应缺少文件地址'],
+  ])('rejects invalid API responses', async (body, message) => {
+    vi.stubGlobal('fetch', vi.fn(async () => response(body)))
+    await expect(uploadFileToCdn(new File(['x'], 'x.txt'))).rejects.toThrow(message)
+  })
+
+  it('rejects non-JSON and non-success HTTP responses', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn(async () => ({
+        ok: false,
+        status: 502,
+        json: async () => {
+          throw new SyntaxError('bad json')
+        },
+      } as Response)),
+    )
+    await expect(uploadFileToCdn(new File(['x'], 'x.txt'))).rejects.toThrow('响应非 JSON (502)')
+  })
+
+  it('turns a caller abort into UploadCancelledError', async () => {
+    vi.stubGlobal(
+      'fetch',
+      vi.fn((_url: string, init?: RequestInit) =>
+        new Promise<Response>((_resolve, reject) => {
+          init?.signal?.addEventListener('abort', () => reject(new DOMException('aborted', 'AbortError')))
+        }),
+      ),
+    )
+    const controller = new AbortController()
+    const pending = uploadFileToCdn(new File(['x'], 'x.txt'), { signal: controller.signal })
+    const assertion = expect(pending).rejects.toBeInstanceOf(UploadCancelledError)
+    controller.abort()
+    await assertion
+  })
+
+  it('aborts and reports a timeout after 120 seconds', async () => {
+    vi.useFakeTimers()
+    vi.stubGlobal(
+      'fetch',
+      vi.fn((_url: string, init?: RequestInit) =>
+        new Promise<Response>((_resolve, reject) => {
+          init?.signal?.addEventListener('abort', () => reject(new DOMException('aborted', 'AbortError')))
+        }),
+      ),
+    )
+    const pending = uploadFileToCdn(new File(['x'], 'x.txt'))
+    const assertion = expect(pending).rejects.toThrow('上传超时，请稍后重试')
+    await vi.advanceTimersByTimeAsync(CDN_UPLOAD_TIMEOUT_MS)
+    await assertion
+  })
+})

package/src/client/uploadClient.ts

@@ -0,0 +1,68 @@
+import { parseEnvelope } from './apiEnvelope'
+import { resolveSkoponAuthHeaders } from './authStorage'
+
+export const CDN_UPLOAD_PATH = '/api/v1/dev/upload/cdn'
+export const CDN_UPLOAD_TIMEOUT_MS = 120_000
+
+export interface CdnUploadResult {
+  url: string
+  file_name?: string
+  mime_type?: string | null
+  size?: number
+}
+
+export class UploadCancelledError extends Error {
+  constructor(message = '上传已取消') {
+    super(message)
+    this.name = 'UploadCancelledError'
+  }
+}
+
+export function isUploadCancelledError(error: unknown): error is UploadCancelledError {
+  return error instanceof UploadCancelledError
+}
+
+/** SDK 固定 CDN 上传通道：使用宿主默认 session token 调用后端七牛代理。 */
+export async function uploadFileToCdn(
+  file: File,
+  options: { signal?: AbortSignal } = {},
+): Promise<CdnUploadResult> {
+  const controller = new AbortController()
+  let timedOut = false
+
+  const abortFromCaller = () => controller.abort()
+  if (options.signal?.aborted) {
+    controller.abort()
+  } else {
+    options.signal?.addEventListener('abort', abortFromCaller, { once: true })
+  }
+
+  const timer = setTimeout(() => {
+    timedOut = true
+    controller.abort()
+  }, CDN_UPLOAD_TIMEOUT_MS)
+
+  try {
+    const formData = new FormData()
+    formData.append('file', file)
+    const response = await fetch(CDN_UPLOAD_PATH, {
+      method: 'POST',
+      headers: resolveSkoponAuthHeaders(),
+      body: formData,
+      signal: controller.signal,
+    })
+    const result = await parseEnvelope<CdnUploadResult>(response)
+    const url = typeof result.url === 'string' ? result.url.trim() : ''
+    if (!url) throw new Error('上传成功但响应缺少文件地址')
+    return { ...result, url }
+  } catch (error) {
+    if (controller.signal.aborted) {
+      if (timedOut) throw new Error('上传超时，请稍后重试')
+      throw new UploadCancelledError()
+    }
+    throw error
+  } finally {
+    clearTimeout(timer)
+    options.signal?.removeEventListener('abort', abortFromCaller)
+  }
+}

package/src/components/AskUserFormCard.tsx

@@ -103,6 +103,7 @@ function AskUserFormCardBody({
   const [formDisabled, setFormDisabled] = useState(false)
   const [loading, setLoading] = useState(true)
   const [submitting, setSubmitting] = useState(false)
+  const [uploading, setUploading] = useState(false)
   const rendererRef = useRef<SkoponFormRendererRef>(null)
   const cardRootRef = useRef<HTMLDivElement>(null)
   const mountedRef = useRef(true)
@@ -322,6 +323,10 @@ function AskUserFormCardBody({
 
   const handleSubmit = useCallback(async () => {
     if (submitting) return
+    if (uploading) {
+      onNotifyRef.current?.('error', '文件正在上传，请稍候')
+      return
+    }
     setSubmitting(true)
     try {
       const cardValues = rendererRef.current?.getValues(fieldNames) ?? {}
@@ -397,6 +402,7 @@ function AskUserFormCardBody({
     }
   }, [
     submitting,
+    uploading,
     fieldNames,
     renderBlocks,
     surfaceTitle,
@@ -486,6 +492,7 @@ function AskUserFormCardBody({
         wrapProvider={false}
         resumeSearch={resumeSearch}
         caseSearch={caseSearch}
+        onUploadingChange={setUploading}
       />
 
       <div className="ask-user-form-actions">
@@ -500,7 +507,7 @@ function AskUserFormCardBody({
             type="primary"
             size="small"
             loading={submitting}
-            disabled={submitting}
+            disabled={submitting || uploading}
             onClick={() => void handleSubmit()}
           >
             提交

package/src/components/AskUserFormCard.upload.test.tsx

@@ -0,0 +1,91 @@
+// @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: () => false,
+}))
+
+import { createElement } from 'react'
+import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react'
+import AskUserFormCard from './AskUserFormCard'
+import { normalizeFormDefinition } from '../adapter/formSchema'
+
+beforeAll(() => {
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+})
+
+beforeEach(() => {
+  uploadMock.mockReset()
+  sessionStorage.clear()
+})
+afterEach(cleanup)
+
+describe('AskUserFormCard file upload guard', () => {
+  it('disables submit until every file upload settles', async () => {
+    let resolveUpload!: (value: { url: string }) => void
+    uploadMock.mockReturnValue(
+      new Promise<{ url: string }>((resolve) => {
+        resolveUpload = resolve
+      }),
+    )
+    const fileBlock = {
+      id: 'file',
+      type: 'file' as const,
+      name: 'attachments',
+      label: '附件',
+      fileMinCount: 0,
+      fileMaxCount: 1,
+    }
+    const formDefinition = normalizeFormDefinition({
+      title: '',
+      description: '',
+      blocks: [fileBlock],
+      jsonSchema: {},
+    })
+    const view = render(
+      createElement(AskUserFormCard, {
+        payload: { title: '', description: '', blocks: [fileBlock] },
+        formUniqueId: 'form-upload',
+        callbackUrl: '/callback',
+        submitMode: 'post',
+        fetchFormDetail: async () => ({
+          formUniqueId: 'form-upload',
+          disabled: false,
+          formDefinition,
+        }),
+      }),
+    )
+
+    const input = await waitFor(() => {
+      const node = view.container.querySelector('input[type="file"]') as HTMLInputElement
+      expect(node).toBeTruthy()
+      return node
+    })
+    const submit = view.getByRole('button', { name: /提\s*交/ }) as HTMLButtonElement
+    expect(submit.disabled).toBe(false)
+
+    fireEvent.change(input, { target: { files: [new File(['x'], 'a.pdf')] } })
+    await waitFor(() => expect(submit.disabled).toBe(true))
+
+    await act(async () => resolveUpload({ url: 'https://cdn.example.com/a.pdf' }))
+    await waitFor(() => expect(submit.disabled).toBe(false))
+  })
+})

package/src/components/SkoponA2uiStreamRenderer.tsx

@@ -5,6 +5,7 @@ import { A2uiSurface, type ReactComponentImplementation } from '@a2ui/react/v0_9
 import { injectStyles } from '@a2ui/react/styles'
 import { buildSkoponCatalog } from '../catalog/a2uiCustomCatalog'
 import { A2uiPreviewModeProvider } from '../catalog/a2uiPreviewContext'
+import { FileUploadStatusProvider } from '../catalog/fileUploadStatusContext'
 import { CaseSearchProvider, type CaseSearchFn } from '../catalog/caseSearchContext'
 import { ResumeSearchProvider, type ResumeSearchFn } from '../catalog/resumeSearchContext'
 import SkoponFormProvider from './SkoponFormProvider'
@@ -182,17 +183,19 @@ export default function SkoponA2uiStreamRenderer({
 
   return (
     <SkoponFormProvider>
-      <ResumeSearchProvider resumeSearch={resumeSearch}>
-      <CaseSearchProvider caseSearch={caseSearch}>
-        <A2uiPreviewModeProvider interactive={interactive}>
-          <div className="a2ui-surface a2ui-container">
-            {surfaces.map((surface) => (
-              <A2uiSurface key={surface.id} surface={surface} />
-            ))}
-          </div>
-        </A2uiPreviewModeProvider>
-      </CaseSearchProvider>
-    </ResumeSearchProvider>
+      <FileUploadStatusProvider>
+        <ResumeSearchProvider resumeSearch={resumeSearch}>
+          <CaseSearchProvider caseSearch={caseSearch}>
+            <A2uiPreviewModeProvider interactive={interactive}>
+              <div className="a2ui-surface a2ui-container">
+                {surfaces.map((surface) => (
+                  <A2uiSurface key={surface.id} surface={surface} />
+                ))}
+              </div>
+            </A2uiPreviewModeProvider>
+          </CaseSearchProvider>
+        </ResumeSearchProvider>
+      </FileUploadStatusProvider>
     </SkoponFormProvider>
   )
 }

package/src/components/SkoponFormRenderer.tsx

@@ -15,6 +15,7 @@ import { extractSurfaceValues } from '../adapter/extractSurfaceValues'
 import { isA2uiSurfaceEmpty, surfaceDocToMessages } from '../adapter/a2uiAdapter'
 import { SKOPON_CATALOG_ID, buildSkoponCatalog } from '../catalog/a2uiCustomCatalog'
 import { A2uiPreviewModeProvider } from '../catalog/a2uiPreviewContext'
+import { FileUploadStatusProvider } from '../catalog/fileUploadStatusContext'
 import { CaseSearchProvider, type CaseSearchFn } from '../catalog/caseSearchContext'
 import { ResumeSearchProvider, type ResumeSearchFn } from '../catalog/resumeSearchContext'
 import SkoponFormProvider from './SkoponFormProvider'
@@ -35,6 +36,8 @@ export interface SkoponFormRendererProps {
   resumeSearch?: ResumeSearchFn | null
   /** 案例单选组件：注入搜索函数 */
   caseSearch?: CaseSearchFn | null
+  /** 任意文件上传任务的聚合状态 */
+  onUploadingChange?: (uploading: boolean) => void
   /** 外层已包裹 SkoponFormProvider 时可设为 false，避免重复 ConfigProvider */
   wrapProvider?: boolean
 }
@@ -49,6 +52,7 @@ const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererP
       fieldNames = [],
       resumeSearch = null,
       caseSearch = null,
+      onUploadingChange,
       wrapProvider = true,
     },
     ref,
@@ -122,27 +126,31 @@ const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererP
 
     if (surfaces.length === 0) {
       const empty = (
-        <ResumeSearchProvider resumeSearch={resumeSearch}>
-          <CaseSearchProvider caseSearch={caseSearch}>
-            <A2uiPreviewModeProvider interactive={interactive}>{emptyHint}</A2uiPreviewModeProvider>
-          </CaseSearchProvider>
-        </ResumeSearchProvider>
+        <FileUploadStatusProvider onUploadingChange={onUploadingChange}>
+          <ResumeSearchProvider resumeSearch={resumeSearch}>
+            <CaseSearchProvider caseSearch={caseSearch}>
+              <A2uiPreviewModeProvider interactive={interactive}>{emptyHint}</A2uiPreviewModeProvider>
+            </CaseSearchProvider>
+          </ResumeSearchProvider>
+        </FileUploadStatusProvider>
       )
       return wrapProvider ? <SkoponFormProvider>{empty}</SkoponFormProvider> : empty
     }
 
     const content = (
-      <ResumeSearchProvider resumeSearch={resumeSearch}>
-        <CaseSearchProvider caseSearch={caseSearch}>
-          <A2uiPreviewModeProvider interactive={interactive}>
-            <div className="a2ui-surface a2ui-container">
-              {surfaces.map((surface) => (
-                <A2uiSurface key={surface.id} surface={surface} />
-              ))}
-            </div>
-          </A2uiPreviewModeProvider>
-        </CaseSearchProvider>
-      </ResumeSearchProvider>
+      <FileUploadStatusProvider onUploadingChange={onUploadingChange}>
+        <ResumeSearchProvider resumeSearch={resumeSearch}>
+          <CaseSearchProvider caseSearch={caseSearch}>
+            <A2uiPreviewModeProvider interactive={interactive}>
+              <div className="a2ui-surface a2ui-container">
+                {surfaces.map((surface) => (
+                  <A2uiSurface key={surface.id} surface={surface} />
+                ))}
+              </div>
+            </A2uiPreviewModeProvider>
+          </CaseSearchProvider>
+        </ResumeSearchProvider>
+      </FileUploadStatusProvider>
     )
 
     return wrapProvider ? <SkoponFormProvider>{content}</SkoponFormProvider> : content

package/src/submit/submit.test.ts

@@ -822,4 +822,29 @@ describe('validateFormSubmitValues', () => {
       '请填写「简历」',
     )
   })
+
+  it('enforces file minCount at submit time', () => {
+    const blocks = [
+      {
+        id: 'file-1',
+        type: 'file' as const,
+        name: 'attachments',
+        label: '附件',
+        fileMinCount: 2,
+      },
+    ]
+    expect(validateFormSubmitValues(blocks, { attachments: [] })).toBeNull()
+    expect(
+      validateFormSubmitValues(blocks, { attachments: ['https://cdn.example.com/a.pdf'] })
+        ?.message,
+    ).toBe('「附件」至少需要 2 个文件')
+    expect(
+      validateFormSubmitValues(blocks, {
+        attachments: [
+          'https://cdn.example.com/a.pdf',
+          'https://cdn.example.com/b.pdf',
+        ],
+      }),
+    ).toBeNull()
+  })
 })