@skopon-cool/form-sdk 0.1.1 → 0.1.4

package/src/blocks/case_singleselect/adapter.ts

@@ -0,0 +1,74 @@
+import type { A2uiComponentNode, FormBlock } from '../../types/index'
+import type { BlockAdapterContext, BlockToComponentResult } from '../types'
+
+function asLiteral(value: unknown): string | undefined {
+  return typeof value === 'string' ? value : undefined
+}
+
+export function caseSingleselectToComponent(
+  block: FormBlock,
+  ctx: BlockAdapterContext,
+): BlockToComponentResult {
+  const { id, label, path, withData } = ctx
+  return withData({
+    id,
+    component: 'SkoponCaseSelect',
+    label,
+    placeholder: block.placeholder ?? '',
+    help: block.help ?? '',
+    enableRefresh: block.caseEnableRefresh !== false,
+    caseFilter: {
+      agentKind: block.caseFilter?.agentKind,
+      agentUniqueId: block.caseFilter?.agentUniqueId,
+      flowId: block.caseFilter?.flowId,
+      pageSize: block.caseFilter?.pageSize ?? 20,
+    },
+    value: { path },
+  })
+}
+
+export function caseSingleselectFromComponent(
+  node: A2uiComponentNode,
+  base: (type: 'case_singleselect') => FormBlock,
+  helpers: {
+    asLiteral: (value: unknown) => string | undefined
+    nameFromValue: (value: unknown) => string
+  },
+): FormBlock {
+  const name = helpers.nameFromValue(node.value)
+  const block: FormBlock = {
+    ...base('case_singleselect'),
+    name,
+    caseEnableRefresh: node.enableRefresh !== false,
+  }
+  const placeholder = helpers.asLiteral(node.placeholder)
+  if (placeholder) block.placeholder = placeholder
+  const help = helpers.asLiteral(node.help)
+  if (help) block.help = help
+  if (node.caseFilter && typeof node.caseFilter === 'object') {
+    const cf = node.caseFilter as Record<string, unknown>
+    const flowIdRaw = typeof cf.flowId === 'number' ? cf.flowId : Number(cf.flowId)
+    const pageSizeRaw = typeof cf.pageSize === 'number' ? cf.pageSize : Number(cf.pageSize)
+    const agentKind =
+      typeof cf.agentKind === 'string' && cf.agentKind.trim()
+        ? cf.agentKind.trim()
+        : undefined
+    const agentUniqueId =
+      typeof cf.agentUniqueId === 'string' && cf.agentUniqueId.trim()
+        ? cf.agentUniqueId.trim()
+        : undefined
+    block.caseFilter = {
+      agentKind,
+      agentUniqueId,
+      flowId:
+        Number.isFinite(flowIdRaw) && flowIdRaw > 0 ? Math.floor(flowIdRaw) : undefined,
+      pageSize:
+        Number.isFinite(pageSizeRaw) && pageSizeRaw >= 1 && pageSizeRaw <= 100
+          ? Math.floor(pageSizeRaw)
+          : 20,
+    }
+  }
+  return block
+}
+
+export { asLiteral }

package/src/blocks/case_singleselect/catalog.ts

@@ -0,0 +1 @@
+export { SkoponCaseSelectImpl } from '../../catalog/skoponCaseSelect'

package/src/blocks/case_singleselect/index.ts

@@ -0,0 +1,14 @@
+import type { BlockAdapterPlugin } from '../types'
+import {
+  caseSingleselectFromComponent,
+  caseSingleselectToComponent,
+} from './adapter'
+import { SkoponCaseSelectImpl } from './catalog'
+
+export const caseSingleselectAdapter: BlockAdapterPlugin = {
+  type: 'case_singleselect',
+  componentName: 'SkoponCaseSelect',
+  toComponent: caseSingleselectToComponent,
+  fromComponent: caseSingleselectFromComponent,
+  catalogComponents: [SkoponCaseSelectImpl],
+}

package/src/blocks/registry.ts

@@ -0,0 +1,34 @@
+import type { FormBlockType } from '../types/index'
+import type { BlockAdapterPlugin } from './types'
+import { caseSingleselectAdapter } from './case_singleselect'
+import { resumeMultiselectAdapter } from './resume_multiselect'
+
+const adapters: BlockAdapterPlugin[] = [resumeMultiselectAdapter, caseSingleselectAdapter]
+
+const adapterByType = new Map<FormBlockType, BlockAdapterPlugin>(
+  adapters.map((adapter) => [adapter.type, adapter]),
+)
+
+const adapterByComponent = new Map<string, BlockAdapterPlugin>(
+  adapters.map((adapter) => [adapter.componentName, adapter]),
+)
+
+export function getBlockTypeAdapter(type: FormBlockType): BlockAdapterPlugin | undefined {
+  return adapterByType.get(type)
+}
+
+export function getComponentAdapter(componentName: string): BlockAdapterPlugin | undefined {
+  return adapterByComponent.get(componentName)
+}
+
+export function getAllBlockAdapters(): BlockAdapterPlugin[] {
+  return adapters
+}
+
+export function getRegisteredCatalogComponents() {
+  return adapters.flatMap((adapter) => adapter.catalogComponents)
+}
+
+export function getRegisteredCatalogComponentNames(): string[] {
+  return adapters.map((adapter) => adapter.componentName)
+}

package/src/blocks/resume_multiselect/adapter.ts

@@ -0,0 +1,57 @@
+import type { A2uiComponentNode, FormBlock } from '../../types/index'
+import type { BlockAdapterContext, BlockToComponentResult } from '../types'
+
+function asLiteral(value: unknown): string | undefined {
+  return typeof value === 'string' ? value : undefined
+}
+
+export function resumeMultiselectToComponent(
+  block: FormBlock,
+  ctx: BlockAdapterContext,
+): BlockToComponentResult {
+  const { id, label, path, withData } = ctx
+  return withData({
+    id,
+    component: 'SkoponResumeSelect',
+    label,
+    placeholder: block.placeholder ?? '',
+    help: block.help ?? '',
+    enableRefresh: block.resumeEnableRefresh !== false,
+    resumeFilter: {
+      names: block.resumeFilter?.names ?? [],
+      agentUniqueIds: block.resumeFilter?.agentUniqueIds ?? [],
+      resumeUniqueIds: block.resumeFilter?.resumeUniqueIds ?? [],
+      pageSize: block.resumeFilter?.pageSize ?? 20,
+    },
+    value: { path },
+  })
+}
+
+export function resumeMultiselectFromComponent(
+  node: A2uiComponentNode,
+  base: (type: 'resume_multiselect') => FormBlock,
+  helpers: { asLiteral: (value: unknown) => string | undefined; nameFromValue: (value: unknown) => string },
+): FormBlock {
+  const name = helpers.nameFromValue(node.value)
+  const block: FormBlock = {
+    ...base('resume_multiselect'),
+    name,
+    resumeEnableRefresh: node.enableRefresh !== false,
+  }
+  const placeholder = helpers.asLiteral(node.placeholder)
+  if (placeholder) block.placeholder = placeholder
+  const help = helpers.asLiteral(node.help)
+  if (help) block.help = help
+  if (node.resumeFilter && typeof node.resumeFilter === 'object') {
+    const rf = node.resumeFilter as Record<string, unknown>
+    block.resumeFilter = {
+      names: Array.isArray(rf.names) ? rf.names.map(String) : [],
+      agentUniqueIds: Array.isArray(rf.agentUniqueIds) ? rf.agentUniqueIds.map(String) : [],
+      resumeUniqueIds: Array.isArray(rf.resumeUniqueIds) ? rf.resumeUniqueIds.map(String) : [],
+      pageSize: typeof rf.pageSize === 'number' ? rf.pageSize : 20,
+    }
+  }
+  return block
+}
+
+export { asLiteral }

package/src/blocks/resume_multiselect/catalog.ts

@@ -0,0 +1 @@
+export { SkoponResumeSelectImpl } from '../../catalog/skoponResumeSelect'

package/src/blocks/resume_multiselect/index.ts

@@ -0,0 +1,14 @@
+import type { BlockAdapterPlugin } from '../types'
+import {
+  resumeMultiselectFromComponent,
+  resumeMultiselectToComponent,
+} from './adapter'
+import { SkoponResumeSelectImpl } from './catalog'
+
+export const resumeMultiselectAdapter: BlockAdapterPlugin = {
+  type: 'resume_multiselect',
+  componentName: 'SkoponResumeSelect',
+  toComponent: resumeMultiselectToComponent,
+  fromComponent: resumeMultiselectFromComponent,
+  catalogComponents: [SkoponResumeSelectImpl],
+}

package/src/blocks/types.ts

@@ -0,0 +1,34 @@
+import type {
+  A2uiComponentNode,
+  FormBlock,
+  FormBlockType,
+} from '../types/index'
+import type { ReactComponentImplementation } from '@a2ui/react/v0_9'
+
+export interface BlockAdapterContext {
+  id: string
+  label: string
+  name: string
+  path: string | undefined
+  withData: (node: A2uiComponentNode) => {
+    node: A2uiComponentNode
+    dataKey?: string
+    dataValue?: unknown
+  }
+}
+
+export type BlockToComponentResult =
+  | { node: A2uiComponentNode | null }
+  | ReturnType<BlockAdapterContext['withData']>
+
+export interface BlockAdapterPlugin {
+  type: FormBlockType
+  componentName: string
+  toComponent: (block: FormBlock, ctx: BlockAdapterContext) => BlockToComponentResult
+  fromComponent: (
+    node: A2uiComponentNode,
+    base: (type: FormBlockType) => FormBlock,
+    helpers: { asLiteral: (value: unknown) => string | undefined; nameFromValue: (value: unknown) => string },
+  ) => FormBlock | null
+  catalogComponents: ReactComponentImplementation[]
+}

package/src/catalog/a2uiCustomCatalog.tsx

@@ -20,16 +20,22 @@ import {
 } from 'antd'
 import dayjs, { type Dayjs } from 'dayjs'
 import type { FormFilePlaceholderIcon, FormMediaSize } from '../types/index'
+import { coerceToggleValue } from '../adapter/formSchema'
 import {
   buildFileAcceptAttribute,
   formatFileAcceptSummary,
 } from '../adapter/formFileAccept'
 import { buildMediaListClassName, normalizeMediaSize } from '../adapter/formMedia'
+import {
+  getRegisteredCatalogComponentNames,
+  getRegisteredCatalogComponents,
+} from '../blocks/registry'
 import FilePlaceholderIcon from '../icons/FilePlaceholderIcon'
 import { useA2uiPreviewMode } from './a2uiPreviewContext'
 import {
   asOptionalString,
   asStringArray,
+  readBoundFieldValue,
   useSkoponBoundField,
 } from './useSkoponBoundField'
 
@@ -51,6 +57,7 @@ const SKOPON_COMPONENT_NAMES = new Set([
   'FileUpload',
   'TextField',
   'Text',
+  ...getRegisteredCatalogComponentNames(),
 ])
 
 const NON_MARKDOWN_TEXT_VARIANTS = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'caption'])
@@ -359,7 +366,7 @@ function ToggleSwitchPreview({ context }: { context: ComponentContext }) {
       <Switch
         disabled={!interactive}
         className="form-block-preview-control"
-        checked={value === true}
+        checked={coerceToggleValue(value)}
         onChange={(checked) => setValue(checked)}
       />
     </div>
@@ -495,14 +502,18 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
     )
       ? (props.filePlaceholderIcon as FormFilePlaceholderIcon)
       : 'document'
+  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
 
   return (
     <div className="form-block-preview">
       {label ? <div className="form-block-preview-label">{label}</div> : null}
       <Upload.Dragger
-        disabled={!interactive}
+        disabled={!interactive || atMaxLimit}
         accept={buildFileAcceptAttribute(fileAcceptTypes, fileAcceptExtensions)}
         className="form-file-upload-preview"
         showUploadList={interactive && selectedNames.length > 0}
@@ -517,12 +528,24 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
         }
         beforeUpload={(file) => {
           if (!interactive) return Upload.LIST_IGNORE
-          const next = [...selectedNames, file.name].slice(0, Math.max(1, maxCount))
+          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
         }}
         onRemove={(file) => {
-          setValue(selectedNames.filter((name) => name !== file.name))
+          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)
         }}
       >
         <p className="form-file-upload-preview-icon">
@@ -532,6 +555,9 @@ function FileUploadPreview({ context }: { context: ComponentContext }) {
       </Upload.Dragger>
       <Typography.Text type="secondary" className="form-block-preview-help">
         允许：{acceptSummary ?? '全部类型'}
+        {minCount > 0 ? `；至少 ${minCount} 个文件` : ''}
+        {hasMaxLimit ? `；最多 ${maxCount} 个文件` : ''}
+        {belowMinCount && interactive ? `（当前 ${selectedNames.length} 个，未达下限）` : ''}
       </Typography.Text>
     </div>
   )
@@ -567,13 +593,15 @@ function TextFieldPreview({ context }: { context: ComponentContext }) {
       />
     )
   } else if (variant === 'number') {
+    const numericValue =
+      stringValue && Number.isFinite(Number(stringValue)) ? Number(stringValue) : undefined
     control = (
       <InputNumber
         disabled={disabled}
         className={controlClassName}
         style={{ width: '100%' }}
         placeholder={placeholder || '数字'}
-        value={stringValue ? Number(stringValue) : undefined}
+        value={numericValue}
         onChange={(next) => setValue(next == null ? '' : String(next))}
       />
     )
@@ -668,6 +696,7 @@ export function buildSkoponCatalog(): Catalog<ReactComponentImplementation> {
     FileUploadImpl,
     TextFieldImpl,
     TextImpl,
+    ...getRegisteredCatalogComponents(),
   ]
   const functions = [...basicCatalog.functions.values()]
   return new Catalog(SKOPON_CATALOG_ID, components, functions, basicCatalog.themeSchema)

package/src/catalog/caseSearchContext.tsx

@@ -0,0 +1,46 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import type { FormCaseFilter } from '../types/index'
+
+export interface CaseSearchItem {
+  caseUniqueId: string
+  caseId?: number
+  flowId?: number
+  name: string
+  link?: string
+  platform?: string | null
+  description?: string
+}
+
+export interface CaseSearchParams {
+  filter: FormCaseFilter
+  page: number
+}
+
+export interface CaseSearchResult {
+  list: CaseSearchItem[]
+  total: number
+  page: number
+  pageSize: number
+}
+
+export type CaseSearchFn = (params: CaseSearchParams) => Promise<CaseSearchResult>
+
+const CaseSearchContext = createContext<CaseSearchFn | null>(null)
+
+export function CaseSearchProvider({
+  caseSearch,
+  children,
+}: {
+  caseSearch: CaseSearchFn | null | undefined
+  children: ReactNode
+}) {
+  return (
+    <CaseSearchContext.Provider value={caseSearch ?? null}>
+      {children}
+    </CaseSearchContext.Provider>
+  )
+}
+
+export function useCaseSearch(): CaseSearchFn | null {
+  return useContext(CaseSearchContext)
+}

package/src/catalog/resumeSearchContext.tsx

@@ -0,0 +1,48 @@
+import { createContext, useContext, type ReactNode } from 'react'
+import type { FormResumeFilter } from '../types/index'
+
+export interface ResumeSearchItem {
+  resumeUniqueId: string
+  resumeId?: number
+  agentId?: number
+  name: string
+  avatarUrl?: string | null
+  description?: string
+  satisfaction?: number
+  published?: number
+  worksCount?: number
+}
+
+export interface ResumeSearchParams {
+  filter: FormResumeFilter
+  page: number
+}
+
+export interface ResumeSearchResult {
+  list: ResumeSearchItem[]
+  total: number
+  page: number
+  pageSize: number
+}
+
+export type ResumeSearchFn = (params: ResumeSearchParams) => Promise<ResumeSearchResult>
+
+const ResumeSearchContext = createContext<ResumeSearchFn | null>(null)
+
+export function ResumeSearchProvider({
+  resumeSearch,
+  children,
+}: {
+  resumeSearch: ResumeSearchFn | null | undefined
+  children: ReactNode
+}) {
+  return (
+    <ResumeSearchContext.Provider value={resumeSearch ?? null}>
+      {children}
+    </ResumeSearchContext.Provider>
+  )
+}
+
+export function useResumeSearch(): ResumeSearchFn | null {
+  return useContext(ResumeSearchContext)
+}

package/src/catalog/skoponCaseSelect.tsx

@@ -0,0 +1,215 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Button, Spin, Typography } from 'antd'
+import { FileTextOutlined, ReloadOutlined } 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 { FormCaseFilter } from '../types/index'
+import { useA2uiPreviewMode } from './a2uiPreviewContext'
+import { asOptionalString, useSkoponBoundField } from './useSkoponBoundField'
+import { type CaseSearchItem, useCaseSearch } from './caseSearchContext'
+
+function readString(value: unknown): string {
+  return typeof value === 'string' ? value : ''
+}
+
+function readCaseFilter(raw: unknown): FormCaseFilter {
+  if (!raw || typeof raw !== 'object') {
+    return { pageSize: 20 }
+  }
+  const rec = raw as Record<string, unknown>
+  const flowIdRaw = typeof rec.flowId === 'number' ? rec.flowId : Number(rec.flowId)
+  const flowId =
+    Number.isFinite(flowIdRaw) && flowIdRaw > 0 ? Math.floor(flowIdRaw) : undefined
+  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 { flowId, pageSize }
+}
+
+function filterKey(filter: FormCaseFilter): string {
+  return JSON.stringify(filter)
+}
+
+const SkoponCaseSelectApi = {
+  name: 'SkoponCaseSelect',
+  schema: z
+    .object({
+      label: z.any().optional(),
+      placeholder: z.any().optional(),
+      help: z.any().optional(),
+      enableRefresh: z.any().optional(),
+      caseFilter: z.any().optional(),
+      value: z.any().optional(),
+    })
+    .passthrough(),
+}
+
+function CaseCard({
+  item,
+  selected,
+  disabled,
+  onToggle,
+}: {
+  item: CaseSearchItem
+  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}
+    >
+      <div className="skopon-resume-select-card-avatar">
+        <FileTextOutlined style={{ fontSize: 24, color: 'var(--color-primary, #1677ff)' }} />
+      </div>
+      <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.caseUniqueId}
+          {item.platform ? ` · ${item.platform}` : ''}
+          {item.link ? ` · ${item.link}` : ''}
+        </div>
+      </div>
+    </button>
+  )
+}
+
+function SkoponCaseSelectPreview({ context }: { context: ComponentContext }) {
+  const { interactive } = useA2uiPreviewMode()
+  const caseSearch = useCaseSearch()
+  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 caseFilter = useMemo(() => readCaseFilter(props.caseFilter), [props.caseFilter])
+  const filterSig = filterKey(caseFilter)
+
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const [fetchError, setFetchError] = useState('')
+  const [items, setItems] = useState<CaseSearchItem[]>([])
+  const [total, setTotal] = useState(0)
+  const [pageSize, setPageSize] = useState(caseFilter.pageSize ?? 20)
+  const requestSeqRef = useRef(0)
+
+  const selectedId = asOptionalString(value) ?? ''
+
+  const emptyHint = useMemo(() => {
+    if (!caseSearch) return '未配置案例搜索服务'
+    if (!caseFilter.flowId) return '未配置 Flow 筛选条件'
+    if (fetchError) return fetchError
+    return placeholder || '暂无匹配的案例'
+  }, [caseSearch, caseFilter.flowId, fetchError, placeholder])
+
+  const fetchPage = useCallback(
+    async (targetPage: number) => {
+      const filter = readCaseFilter(JSON.parse(filterSig) as FormCaseFilter)
+      const seq = ++requestSeqRef.current
+      if (!caseSearch || !filter.flowId) {
+        setItems([])
+        setTotal(0)
+        setFetchError('')
+        return
+      }
+      setLoading(true)
+      setFetchError('')
+      try {
+        const result = await caseSearch({ 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)
+        setFetchError(err instanceof Error ? err.message : '加载案例列表失败')
+      } finally {
+        if (seq === requestSeqRef.current) setLoading(false)
+      }
+    },
+    [caseSearch, filterSig],
+  )
+
+  useEffect(() => {
+    setPage(1)
+    void fetchPage(1)
+  }, [filterSig, fetchPage])
+
+  const toggleSelect = (caseUniqueId: string) => {
+    if (!interactive) return
+    setValue(selectedId === caseUniqueId ? '' : caseUniqueId)
+  }
+
+  const handleRefresh = () => {
+    const filter = readCaseFilter(JSON.parse(filterSig) as FormCaseFilter)
+    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)
+  }
+
+  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 && items.length === 0 ? (
+        <div className="skopon-resume-select-empty">{emptyHint}</div>
+      ) : null}
+      {items.length > 0 ? (
+        <div className="skopon-resume-select-list">
+          {items.map((item) => (
+            <CaseCard
+              key={item.caseUniqueId}
+              item={item}
+              selected={selectedId === item.caseUniqueId}
+              disabled={!interactive}
+              onToggle={() => toggleSelect(item.caseUniqueId)}
+            />
+          ))}
+        </div>
+      ) : null}
+      {enableRefresh && caseSearch && caseFilter.flowId ? (
+        <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 SkoponCaseSelectImpl = createBinderlessComponentImplementation(
+  SkoponCaseSelectApi,
+  SkoponCaseSelectPreview,
+)