@skopon-cool/form-sdk 0.1.1 → 0.1.4

package/src/catalog/skoponResumeSelect.tsx

@@ -0,0 +1,227 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Avatar, Button, Spin, Typography } from 'antd'
+import { ReloadOutlined, UserOutlined } from '@ant-design/icons'
+import type { ComponentContext } from '@a2ui/web_core/v0_9'
+import { createBinderlessComponentImplementation } from '@a2ui/react/v0_9'
+import { z } from 'zod'
+import type { FormResumeFilter } from '../types/index'
+import { useA2uiPreviewMode } from './a2uiPreviewContext'
+import { asStringArray, useSkoponBoundField } from './useSkoponBoundField'
+import {
+  type ResumeSearchItem,
+  useResumeSearch,
+} from './resumeSearchContext'
+
+function readString(value: unknown): string {
+  return typeof value === 'string' ? value : ''
+}
+
+function readResumeFilter(raw: unknown): FormResumeFilter {
+  if (!raw || typeof raw !== 'object') {
+    return { names: [], agentUniqueIds: [], resumeUniqueIds: [], pageSize: 20 }
+  }
+  const rec = raw as Record<string, unknown>
+  const names = Array.isArray(rec.names) ? rec.names.map(String).filter(Boolean) : []
+  const agentUniqueIds = Array.isArray(rec.agentUniqueIds)
+    ? rec.agentUniqueIds.map(String).filter(Boolean)
+    : []
+  const resumeUniqueIds = Array.isArray(rec.resumeUniqueIds)
+    ? rec.resumeUniqueIds.map(String).filter(Boolean)
+    : []
+  const pageSizeRaw = typeof rec.pageSize === 'number' ? rec.pageSize : Number(rec.pageSize)
+  const pageSize =
+    Number.isFinite(pageSizeRaw) && pageSizeRaw >= 1 && pageSizeRaw <= 100
+      ? Math.floor(pageSizeRaw)
+      : 20
+  return { names, agentUniqueIds, resumeUniqueIds, pageSize }
+}
+
+function filterKey(filter: FormResumeFilter): string {
+  return JSON.stringify(filter)
+}
+
+const SkoponResumeSelectApi = {
+  name: 'SkoponResumeSelect',
+  schema: z
+    .object({
+      label: z.any().optional(),
+      placeholder: z.any().optional(),
+      help: z.any().optional(),
+      enableRefresh: z.any().optional(),
+      resumeFilter: z.any().optional(),
+      value: z.any().optional(),
+    })
+    .passthrough(),
+}
+
+function ResumeCard({
+  item,
+  selected,
+  disabled,
+  onToggle,
+}: {
+  item: ResumeSearchItem
+  selected: boolean
+  disabled: boolean
+  onToggle: () => void
+}) {
+  return (
+    <button
+      type="button"
+      className={`skopon-resume-select-card${selected ? ' skopon-resume-select-card--selected' : ''}`}
+      disabled={disabled}
+      onClick={onToggle}
+    >
+      <Avatar
+        size={48}
+        src={item.avatarUrl || undefined}
+        icon={!item.avatarUrl ? <UserOutlined /> : undefined}
+        className="skopon-resume-select-card-avatar"
+      />
+      <div className="skopon-resume-select-card-body">
+        <div className="skopon-resume-select-card-name">{item.name}</div>
+        {item.description ? (
+          <div className="skopon-resume-select-card-desc">{item.description}</div>
+        ) : null}
+        <div className="skopon-resume-select-card-meta">
+          {item.resumeUniqueId}
+          {typeof item.satisfaction === 'number' ? ` · 满意度 ${item.satisfaction}%` : ''}
+        </div>
+      </div>
+    </button>
+  )
+}
+
+function SkoponResumeSelectPreview({ context }: { context: ComponentContext }) {
+  const { interactive } = useA2uiPreviewMode()
+  const resumeSearch = useResumeSearch()
+  const { value, setValue } = useSkoponBoundField(context)
+  const props = context.componentModel.properties as Record<string, unknown>
+
+  const label = readString(props.label)
+  const placeholder = readString(props.placeholder)
+  const help = readString(props.help)
+  const enableRefresh = props.enableRefresh !== false
+  const resumeFilter = useMemo(() => readResumeFilter(props.resumeFilter), [props.resumeFilter])
+  const filterSig = filterKey(resumeFilter)
+
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [items, setItems] = useState<ResumeSearchItem[]>([])
+  const [total, setTotal] = useState(0)
+  const [pageSize, setPageSize] = useState(resumeFilter.pageSize ?? 20)
+  const requestSeqRef = useRef(0)
+
+  const selectedIds = asStringArray(value)
+
+  const fetchPage = useCallback(
+    async (targetPage: number) => {
+      const filter = readResumeFilter(JSON.parse(filterSig) as FormResumeFilter)
+      const seq = ++requestSeqRef.current
+      if (!resumeSearch) {
+        setItems([])
+        setTotal(0)
+        setError('未配置简历搜索服务')
+        return
+      }
+      setLoading(true)
+      setError('')
+      try {
+        const result = await resumeSearch({ filter, page: targetPage })
+        if (seq !== requestSeqRef.current) return
+        setItems(result.list)
+        setTotal(result.total)
+        setPage(result.page)
+        setPageSize(result.pageSize)
+      } catch (err) {
+        if (seq !== requestSeqRef.current) return
+        setItems([])
+        setTotal(0)
+        setError(err instanceof Error ? err.message : '加载简历列表失败')
+      } finally {
+        if (seq === requestSeqRef.current) setLoading(false)
+      }
+    },
+    [resumeSearch, filterSig],
+  )
+
+  useEffect(() => {
+    setPage(1)
+    void fetchPage(1)
+  }, [filterSig, fetchPage])
+
+  const toggleSelect = (resumeUniqueId: string) => {
+    if (!interactive) return
+    const next = selectedIds.includes(resumeUniqueId)
+      ? selectedIds.filter((id) => id !== resumeUniqueId)
+      : [...selectedIds, resumeUniqueId]
+    setValue(next)
+  }
+
+  const handleRefresh = () => {
+    const filter = readResumeFilter(JSON.parse(filterSig) as FormResumeFilter)
+    const effectivePageSize = pageSize || filter.pageSize || 20
+    const totalPages = Math.max(1, Math.ceil(total / effectivePageSize))
+    const nextPage = page >= totalPages ? 1 : page + 1
+    void fetchPage(nextPage)
+  }
+
+  const emptyLabel = placeholder || '暂无匹配的简历'
+
+  return (
+    <div className="form-block-preview skopon-resume-select">
+      {label ? <div className="form-block-preview-label">{label}</div> : null}
+      {loading && items.length === 0 ? (
+        <div className="skopon-resume-select-status">
+          <Spin size="small" /> 加载简历…
+        </div>
+      ) : null}
+      {!loading && error ? (
+        <Typography.Text type="danger" className="skopon-resume-select-status">
+          {error}
+        </Typography.Text>
+      ) : null}
+      {!loading && !error && items.length === 0 ? (
+        <div className="skopon-resume-select-empty">{emptyLabel}</div>
+      ) : null}
+      {items.length > 0 ? (
+        <div className="skopon-resume-select-list">
+          {items.map((item) => (
+            <ResumeCard
+              key={item.resumeUniqueId}
+              item={item}
+              selected={selectedIds.includes(item.resumeUniqueId)}
+              disabled={!interactive}
+              onToggle={() => toggleSelect(item.resumeUniqueId)}
+            />
+          ))}
+        </div>
+      ) : null}
+      {enableRefresh && resumeSearch ? (
+        <div className="skopon-resume-select-actions">
+          <Button
+            type="default"
+            size="small"
+            icon={<ReloadOutlined />}
+            loading={loading}
+            disabled={!interactive}
+            onClick={handleRefresh}
+          >
+            换一批
+          </Button>
+        </div>
+      ) : null}
+      {help ? (
+        <Typography.Text type="secondary" className="form-block-preview-help">
+          {help}
+        </Typography.Text>
+      ) : null}
+    </div>
+  )
+}
+
+export const SkoponResumeSelectImpl = createBinderlessComponentImplementation(
+  SkoponResumeSelectApi,
+  SkoponResumeSelectPreview,
+)

package/src/catalog/textFieldPreview.test.tsx

@@ -1,4 +1,4 @@
-// @vitest-environment jsdom
+// @vitest-environment happy-dom
 import { describe, it, expect, vi, afterEach, beforeAll } from 'vitest'
 
 vi.mock('@a2ui/web_core/v0_9/basic_catalog', async (importOriginal) => {

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 {