@skopon-cool/form-sdk 0.2.0 → 0.2.1

package/package.json

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

package/src/adapter/a2uiAdapter.ts

@@ -8,9 +8,8 @@ import type {
   FormSchema,
 } from '../types/index'
 import { generateId } from './id'
-import { coerceToggleValue } from './formSchema'
+import { coerceToggleValue, syncFormDefinition } from './formSchema'
 import { getMediaUrls, normalizeMediaSize } from './formMedia'
-import { syncFormDefinition } from './formSchema'
 import { getBlockTypeAdapter, getComponentAdapter } from '../blocks/registry'
 
 /**
@@ -491,7 +490,7 @@ function applyDataModelDefaults(
     const raw = dataModel[name]
     if (raw === undefined) return block
     if (block.type === 'toggle') {
-      return { ...block, defaultValue: raw === true || raw === 'true' }
+      return { ...block, defaultValue: coerceToggleValue(raw) }
     }
     return { ...block, defaultValue: raw as FormBlock['defaultValue'] }
   })

package/src/adapter/formSchema.test.ts

@@ -5,11 +5,15 @@ import { describe, it, expect } from 'vitest'
 import { coerceToggleValue, normalizeFormDefinition } from './formSchema'
 
 describe('coerceToggleValue', () => {
-  it('accepts boolean and string true', () => {
+  it('accepts boolean, string, and numeric truthy/falsy values', () => {
     expect(coerceToggleValue(true)).toBe(true)
     expect(coerceToggleValue('true')).toBe(true)
+    expect(coerceToggleValue(1)).toBe(true)
+    expect(coerceToggleValue('1')).toBe(true)
     expect(coerceToggleValue(false)).toBe(false)
     expect(coerceToggleValue('false')).toBe(false)
+    expect(coerceToggleValue(0)).toBe(false)
+    expect(coerceToggleValue('0')).toBe(false)
     expect(coerceToggleValue(undefined)).toBe(false)
   })
 })

package/src/adapter/formSchema.ts

@@ -14,7 +14,9 @@ import {
 const DEFAULT_MEDIA_URL_MAX = 10
 
 export function coerceToggleValue(raw: unknown): boolean {
-  return raw === true || raw === 'true'
+  if (raw === true || raw === 'true' || raw === 1 || raw === '1') return true
+  if (raw === false || raw === 'false' || raw === 0 || raw === '0') return false
+  return false
 }
 
 function normalizeFileUploadCount(raw: unknown, fallback = 1): number {

package/src/catalog/a2uiCustomCatalog.tsx

@@ -1,5 +1,5 @@
 import { z } from 'zod'
-import type { ReactNode } from 'react'
+import { useEffect, type ReactNode } from 'react'
 import { Catalog, type ComponentContext } from '@a2ui/web_core/v0_9'
 import {
   basicCatalog,
@@ -35,6 +35,7 @@ import { useA2uiPreviewMode } from './a2uiPreviewContext'
 import {
   asOptionalString,
   asStringArray,
+  normalizeSelectStoredValue,
   readBoundFieldValue,
   useSkoponBoundField,
 } from './useSkoponBoundField'
@@ -247,6 +248,11 @@ function SkoponSelectPreview({ context }: { context: ComponentContext }) {
   const options = readOptions(props.options)
   const isMultiple = readString(props.mode) === 'multiple'
 
+  useEffect(() => {
+    const normalized = normalizeSelectStoredValue(value, isMultiple)
+    if (normalized !== null) setValue(normalized)
+  }, [isMultiple, value, setValue])
+
   return (
     <div className="form-block-preview">
       {label ? <div className="form-block-preview-label">{label}</div> : null}
@@ -289,6 +295,13 @@ function ChoicePickerPreview({ context }: { context: ComponentContext }) {
       : isMultiple
         ? 'checkbox'
         : 'radio'
+  const isMultiplePicker =
+    effectiveType === 'multiselect' || effectiveType === 'checkbox'
+
+  useEffect(() => {
+    const normalized = normalizeSelectStoredValue(value, isMultiplePicker)
+    if (normalized !== null) setValue(normalized)
+  }, [isMultiplePicker, value, setValue])
 
   return (
     <div className="form-block-preview">
@@ -557,6 +570,7 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
         允许：{acceptSummary ?? '全部类型'}
         {minCount > 0 ? `；至少 ${minCount} 个文件` : ''}
         {hasMaxLimit ? `；最多 ${maxCount} 个文件` : ''}
+        ；当前仅收集文件名（不含文件内容，需宿主另行上传）
         {belowMinCount && interactive ? `（当前 ${selectedNames.length} 个，未达下限）` : ''}
       </Typography.Text>
     </div>

package/src/catalog/skoponCaseSelect.tsx

@@ -90,7 +90,7 @@ function CaseCard({
       onClick={onToggle}
     >
       <div className="skopon-resume-select-card-avatar">
-        <FileTextOutlined style={{ fontSize: 24, color: 'var(--color-primary, #1677ff)' }} />
+        <FileTextOutlined style={{ fontSize: 24, color: 'var(--color-primary, #208368)' }} />
       </div>
       <div className="skopon-resume-select-card-body">
         <div className="skopon-resume-select-card-name">{item.name}</div>
@@ -152,6 +152,7 @@ function SkoponCaseSelectPreview({ context }: { context: ComponentContext }) {
         setItems([])
         setTotal(0)
         setFetchError('')
+        setLoading(false)
         return
       }
       setLoading(true)

package/src/catalog/skoponResumeSelect.tsx

@@ -198,6 +198,7 @@ function SkoponResumeSelectPreview({ context }: { context: ComponentContext }) {
         setItems([])
         setTotal(0)
         setError('未配置简历搜索服务')
+        setLoading(false)
         return
       }
       setLoading(true)

package/src/catalog/skoponSelectLoading.test.tsx

@@ -0,0 +1,182 @@
+// @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 } from 'react'
+import { render, cleanup, waitFor } from '@testing-library/react'
+import { blocksToA2ui } from '../adapter/a2uiAdapter'
+import SkoponFormRenderer from '../components/SkoponFormRenderer'
+import type { CaseSearchFn } from './caseSearchContext'
+import type { ResumeSearchFn } from './resumeSearchContext'
+
+beforeAll(() => {
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+})
+
+function buildCaseSurface(flowUniqueIds: string[]) {
+  return blocksToA2ui(
+    {
+      title: '',
+      description: '',
+      blocks: [
+        {
+          id: 'b-case',
+          type: 'case_multiselect',
+          name: 'cases',
+          label: '案例',
+          caseFilter: { flowUniqueIds, pageSize: 20 },
+        },
+      ],
+    },
+    { includeHeader: false },
+  )
+}
+
+function buildResumeSurface() {
+  return blocksToA2ui(
+    {
+      title: '',
+      description: '',
+      blocks: [
+        {
+          id: 'b-resume',
+          type: 'resume_multiselect',
+          name: 'resumes',
+          label: '简历',
+          resumeFilter: { names: [], agentUniqueIds: [], resumeUniqueIds: [], pageSize: 20 },
+        },
+      ],
+    },
+    { includeHeader: false },
+  )
+}
+
+describe('case/resume select loading state', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('clears case loading when caseSearch is removed while fetch is in flight', async () => {
+    let resolveSearch!: (value: Awaited<ReturnType<CaseSearchFn>>) => void
+    const caseSearch = vi.fn(
+      () =>
+        new Promise<Awaited<ReturnType<CaseSearchFn>>>((resolve) => {
+          resolveSearch = resolve
+        }),
+    )
+
+    const doc = buildCaseSurface(['flow-1'])
+    const { rerender, queryByText } = render(
+      createElement(SkoponFormRenderer, {
+        doc,
+        surfaceId: 'case-loading-test',
+        caseSearch,
+      }),
+    )
+
+    expect(queryByText('加载案例…')).toBeTruthy()
+
+    rerender(
+      createElement(SkoponFormRenderer, {
+        doc,
+        surfaceId: 'case-loading-test',
+        caseSearch: null,
+      }),
+    )
+
+    await waitFor(() => {
+      expect(queryByText('加载案例…')).toBeNull()
+    })
+    expect(queryByText('未配置案例搜索服务')).toBeTruthy()
+
+    resolveSearch({ list: [], total: 0, page: 1, pageSize: 20 })
+  })
+
+  it('clears case loading when filter becomes invalid while fetch is in flight', async () => {
+    let resolveSearch!: (value: Awaited<ReturnType<CaseSearchFn>>) => void
+    const caseSearch = vi.fn(
+      () =>
+        new Promise<Awaited<ReturnType<CaseSearchFn>>>((resolve) => {
+          resolveSearch = resolve
+        }),
+    )
+
+    const validDoc = buildCaseSurface(['flow-1'])
+    const invalidDoc = buildCaseSurface([])
+
+    const { rerender, queryByText } = render(
+      createElement(SkoponFormRenderer, {
+        doc: validDoc,
+        surfaceId: 'case-filter-test',
+        caseSearch,
+      }),
+    )
+
+    expect(queryByText('加载案例…')).toBeTruthy()
+
+    rerender(
+      createElement(SkoponFormRenderer, {
+        doc: invalidDoc,
+        surfaceId: 'case-filter-test',
+        caseSearch,
+      }),
+    )
+
+    await waitFor(() => {
+      expect(queryByText('加载案例…')).toBeNull()
+    })
+    expect(queryByText('未配置案例列表筛选条件')).toBeTruthy()
+
+    resolveSearch({ list: [], total: 0, page: 1, pageSize: 20 })
+  })
+
+  it('clears resume loading when resumeSearch is removed while fetch is in flight', async () => {
+    let resolveSearch!: (value: Awaited<ReturnType<ResumeSearchFn>>) => void
+    const resumeSearch = vi.fn(
+      () =>
+        new Promise<Awaited<ReturnType<ResumeSearchFn>>>((resolve) => {
+          resolveSearch = resolve
+        }),
+    )
+
+    const doc = buildResumeSurface()
+    const { rerender, queryByText } = render(
+      createElement(SkoponFormRenderer, {
+        doc,
+        surfaceId: 'resume-loading-test',
+        resumeSearch,
+      }),
+    )
+
+    expect(queryByText('加载简历…')).toBeTruthy()
+
+    rerender(
+      createElement(SkoponFormRenderer, {
+        doc,
+        surfaceId: 'resume-loading-test',
+        resumeSearch: null,
+      }),
+    )
+
+    await waitFor(() => {
+      expect(queryByText('加载简历…')).toBeNull()
+    })
+    expect(queryByText('未配置简历搜索服务')).toBeTruthy()
+
+    resolveSearch({ list: [], total: 0, page: 1, pageSize: 20 })
+  })
+})

package/src/catalog/useSkoponBoundField.test.ts

@@ -3,7 +3,7 @@
  */
 import { describe, it, expect } from 'vitest'
 import type { ComponentContext } from '@a2ui/web_core/v0_9'
-import { asStringArray, clampStringArraySelection, readBoundFieldValue, toggleStringArraySelection } from './useSkoponBoundField'
+import { asStringArray, clampStringArraySelection, normalizeSelectStoredValue, readBoundFieldValue, toggleStringArraySelection } from './useSkoponBoundField'
 
 function createMockContext(initial: unknown = []): {
   context: ComponentContext
@@ -29,6 +29,19 @@ function createMockContext(initial: unknown = []): {
   }
 }
 
+describe('normalizeSelectStoredValue', () => {
+  it('coerces string to array in multiple mode', () => {
+    expect(normalizeSelectStoredValue('a', true)).toEqual(['a'])
+    expect(normalizeSelectStoredValue(['a', 'b'], true)).toBeNull()
+  })
+
+  it('coerces array to string in single mode', () => {
+    expect(normalizeSelectStoredValue(['a', 'b'], false)).toBe('a')
+    expect(normalizeSelectStoredValue([], false)).toBe('')
+    expect(normalizeSelectStoredValue('a', false)).toBeNull()
+  })
+})
+
 describe('readBoundFieldValue', () => {
   it('reads current bound value from dataContext', () => {
     const { context } = createMockContext(['a.pdf'])

package/src/catalog/useSkoponBoundField.ts

@@ -65,6 +65,20 @@ export function asStringArray(value: unknown): string[] {
   return []
 }
 
+/** 单选/多选模式切换时规范化 stored value；无需变更时返回 null。 */
+export function normalizeSelectStoredValue(value: unknown, isMultiple: boolean): unknown | null {
+  if (isMultiple) {
+    if (Array.isArray(value)) return null
+    return asStringArray(value)
+  }
+  if (Array.isArray(value)) {
+    return value.length > 0 ? String(value[0]) : ''
+  }
+  if (value === undefined || value === null) return null
+  if (typeof value === 'string' || typeof value === 'number') return null
+  return ''
+}
+
 export function readOptionalSelectCount(value: unknown): number | undefined {
   if (value === undefined || value === null) return undefined
   const num = typeof value === 'number' ? value : Number(value)

package/src/components/AskUserFormCard.tsx

@@ -230,6 +230,7 @@ export default function AskUserFormCard({
         surfaceId={surfaceId}
         fieldNames={fieldNames}
         interactive
+        wrapProvider={false}
         resumeSearch={resumeSearch}
         caseSearch={caseSearch}
       />

package/src/components/SkoponFormRenderer.tsx

@@ -34,6 +34,8 @@ export interface SkoponFormRendererProps {
   resumeSearch?: ResumeSearchFn | null
   /** 案例单选组件：注入搜索函数 */
   caseSearch?: CaseSearchFn | null
+  /** 外层已包裹 SkoponFormProvider 时可设为 false，避免重复 ConfigProvider */
+  wrapProvider?: boolean
 }
 
 const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererProps>(
@@ -46,6 +48,7 @@ const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererP
       fieldNames = [],
       resumeSearch = null,
       caseSearch = null,
+      wrapProvider = true,
     },
     ref,
   ) {
@@ -105,11 +108,19 @@ const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererP
       [surfaceId],
     )
 
-    if (surfaces.length === 0) return <SkoponFormProvider>{emptyHint}</SkoponFormProvider>
-
-    return (
-      <SkoponFormProvider>
+    if (surfaces.length === 0) {
+      const empty = (
         <ResumeSearchProvider resumeSearch={resumeSearch}>
+          <CaseSearchProvider caseSearch={caseSearch}>
+            <A2uiPreviewModeProvider interactive={interactive}>{emptyHint}</A2uiPreviewModeProvider>
+          </CaseSearchProvider>
+        </ResumeSearchProvider>
+      )
+      return wrapProvider ? <SkoponFormProvider>{empty}</SkoponFormProvider> : empty
+    }
+
+    const content = (
+      <ResumeSearchProvider resumeSearch={resumeSearch}>
         <CaseSearchProvider caseSearch={caseSearch}>
           <A2uiPreviewModeProvider interactive={interactive}>
             <div className="a2ui-surface a2ui-container">
@@ -119,9 +130,10 @@ const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererP
             </div>
           </A2uiPreviewModeProvider>
         </CaseSearchProvider>
-        </ResumeSearchProvider>
-      </SkoponFormProvider>
+      </ResumeSearchProvider>
     )
+
+    return wrapProvider ? <SkoponFormProvider>{content}</SkoponFormProvider> : content
   },
 )
 

package/src/styles/index.css

@@ -251,11 +251,11 @@
   min-width: 220px;
 }
 .skopon-resume-select-card:hover:not(:disabled) {
-  border-color: var(--color-primary, #1677ff);
+  border-color: var(--color-primary, #208368);
 }
 .skopon-resume-select-card--selected {
-  border-color: var(--color-primary, #1677ff);
-  background: color-mix(in srgb, var(--color-primary, #1677ff) 8%, transparent);
+  border-color: var(--color-primary, #208368);
+  background: color-mix(in srgb, var(--color-primary, #208368) 8%, transparent);
 }
 .skopon-resume-select-card:disabled {
   cursor: not-allowed;