@skopon-cool/form-sdk 0.1.3 → 0.1.5

package/src/components/AskUserFormCard.tsx

@@ -12,6 +12,8 @@ import {
   payloadHasInputBlocks,
 } from '../submit/intersectPayloadBlocksWithForm'
 import { copyTextToClipboard, submitFormJson } from '../submit/submitFormJson'
+import type { CaseSearchFn } from '../catalog/caseSearchContext'
+import type { ResumeSearchFn } from '../catalog/resumeSearchContext'
 import SkoponFormRenderer, { type SkoponFormRendererRef } from './SkoponFormRenderer'
 import CurlSubmitBlock from './CurlSubmitBlock'
 
@@ -37,6 +39,10 @@ export interface AskUserFormCardProps {
   /** 需 useCallback 稳定引用，避免重复拉取 */
   fetchFormDetail: (ref: { formUniqueId: string }) => Promise<FormDetailResult>
   onNotify?: (type: 'success' | 'error', message: string) => void
+  /** 简历多选组件：注入搜索函数 */
+  resumeSearch?: ResumeSearchFn | null
+  /** 案例单选组件：注入搜索函数 */
+  caseSearch?: CaseSearchFn | null
 }
 
 export default function AskUserFormCard({
@@ -46,6 +52,8 @@ export default function AskUserFormCard({
   submitMode = 'curl',
   fetchFormDetail,
   onNotify,
+  resumeSearch = null,
+  caseSearch = null,
 }: AskUserFormCardProps) {
   const [formDef, setFormDef] = useState<FormSchema | null>(null)
   const [formDisabled, setFormDisabled] = useState(false)
@@ -112,10 +120,12 @@ export default function AskUserFormCard({
     Boolean(payloadDef && payloadHasInputBlocks(payloadDef) && matchedBlocks.length === 0)
 
   const renderBlocks = useMemo(() => {
+    if (usePayloadFallback && payloadDef) {
+      return getPayloadRenderableBlocks(payloadDef)
+    }
     if (intersection && intersection.renderBlocks.length > 0) {
       return intersection.renderBlocks
     }
-    if (usePayloadFallback && payloadDef) return getPayloadRenderableBlocks(payloadDef)
     return []
   }, [intersection, usePayloadFallback, payloadDef])
 
@@ -213,6 +223,8 @@ export default function AskUserFormCard({
         surfaceId={surfaceId}
         fieldNames={fieldNames}
         interactive
+        resumeSearch={resumeSearch}
+        caseSearch={caseSearch}
       />
 
       <div className="ask-user-form-actions">

package/src/components/SkoponA2uiStreamRenderer.test.ts

@@ -11,12 +11,12 @@ function createProcessor(): MessageProcessor<ReactComponentImplementation> {
   return new MessageProcessor([buildSkoponCatalog()])
 }
 
-function buildStreamMessages(surfaceId: string): A2uiMessage[] {
+function buildStreamMessages(surfaceId: string, label = '姓名'): A2uiMessage[] {
   const doc = blocksToA2ui(
     {
       title: '',
       description: '',
-      blocks: [{ id: 'b-name', type: 'text', name: 'name', label: '姓名' }],
+      blocks: [{ id: 'b-name', type: 'text', name: 'name', label }],
     },
     { includeHeader: false },
   )
@@ -59,4 +59,20 @@ describe('SkoponA2uiStreamRenderer stream lifecycle', () => {
     rebuilt.processMessages(messages.slice(0, 1))
     expect(rebuilt.model.surfacesMap.size).toBeLessThanOrEqual(countAfterFull)
   })
+
+  it('rebuilds processor when message count is unchanged but content replaced', () => {
+    const surfaceId = 'stream-same-len'
+    const messagesA = buildStreamMessages(surfaceId, '姓名')
+    const messagesB = buildStreamMessages(surfaceId, '昵称')
+    expect(messagesA.length).toBe(messagesB.length)
+
+    const processor = createProcessor()
+    processor.processMessages(messagesA)
+    expect(processor.model.surfacesMap.size).toBeGreaterThan(0)
+
+    const rebuilt = createProcessor()
+    rebuilt.processMessages(messagesB)
+    expect(rebuilt.model.surfacesMap.size).toBeGreaterThan(0)
+    expect(JSON.stringify(messagesA)).not.toBe(JSON.stringify(messagesB))
+  })
 })

package/src/components/SkoponA2uiStreamRenderer.test.tsx

@@ -18,12 +18,12 @@ import { blocksToA2ui, surfaceDocToMessages } from '../adapter/a2uiAdapter'
 import { SKOPON_CATALOG_ID } from '../catalog/a2uiCustomCatalog'
 import SkoponA2uiStreamRenderer from './SkoponA2uiStreamRenderer'
 
-function buildStreamMessages(surfaceId: string): A2uiMessage[] {
+function buildStreamMessages(surfaceId: string, label = '姓名'): A2uiMessage[] {
   const doc = blocksToA2ui(
     {
       title: '',
       description: '',
-      blocks: [{ id: 'b-name', type: 'text', name: 'name', label: '姓名' }],
+      blocks: [{ id: 'b-name', type: 'text', name: 'name', label }],
     },
     { includeHeader: false },
   )
@@ -76,4 +76,28 @@ describe('SkoponA2uiStreamRenderer component', () => {
     expect(getByText('姓名')).toBeTruthy()
     expect(queryByText('stream-empty')).toBeNull()
   })
+
+  it('reprocesses messages when stream content is replaced at same length', () => {
+    const surfaceId = 'stream-replace'
+    const messagesA = buildStreamMessages(surfaceId, '姓名')
+    const messagesB = buildStreamMessages(surfaceId, '昵称')
+    expect(messagesA.length).toBe(messagesB.length)
+
+    const { rerender, getByText, queryByText } = render(
+      createElement(SkoponA2uiStreamRenderer, {
+        messages: messagesA,
+        surfaceId,
+      }),
+    )
+    expect(getByText('姓名')).toBeTruthy()
+
+    rerender(
+      createElement(SkoponA2uiStreamRenderer, {
+        messages: messagesB,
+        surfaceId,
+      }),
+    )
+    expect(getByText('昵称')).toBeTruthy()
+    expect(queryByText('姓名')).toBeNull()
+  })
 })

package/src/components/SkoponA2uiStreamRenderer.tsx

@@ -5,6 +5,8 @@ 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 { CaseSearchProvider, type CaseSearchFn } from '../catalog/caseSearchContext'
+import { ResumeSearchProvider, type ResumeSearchFn } from '../catalog/resumeSearchContext'
 
 export interface SkoponA2uiStreamRendererProps {
   /** 增量追加的 A2UI v0.9 消息 */
@@ -12,6 +14,10 @@ export interface SkoponA2uiStreamRendererProps {
   surfaceId?: string
   emptyHint?: ReactNode
   interactive?: boolean
+  /** 简历多选组件：注入搜索函数 */
+  resumeSearch?: ResumeSearchFn | null
+  /** 案例单选组件：注入搜索函数 */
+  caseSearch?: CaseSearchFn | null
 }
 
 function createProcessor(): MessageProcessor<ReactComponentImplementation> {
@@ -23,20 +29,55 @@ export default function SkoponA2uiStreamRenderer({
   surfaceId = 'skopon-form-stream',
   emptyHint = null,
   interactive = true,
+  resumeSearch = null,
+  caseSearch = null,
 }: SkoponA2uiStreamRendererProps) {
   useEffect(() => {
     injectStyles()
     injectBasicCatalogStyles()
   }, [])
 
-  const processorRef = useRef<MessageProcessor<ReactComponentImplementation>>(createProcessor())
+  const processorRef = useRef<MessageProcessor<ReactComponentImplementation> | null>(null)
+  if (processorRef.current === null) {
+    processorRef.current = createProcessor()
+  }
   const processedCountRef = useRef(0)
+  const lastProcessedMessagesRef = useRef('')
   const mountedRef = useRef(true)
   const surfaceIdRef = useRef(surfaceId)
 
-  const [processor, setProcessor] = useState(() => processorRef.current)
+  function commitProcessor(
+    next: MessageProcessor<ReactComponentImplementation>,
+    processedMessages: A2uiMessage[],
+  ) {
+    processorRef.current = next
+    processedCountRef.current = processedMessages.length
+    lastProcessedMessagesRef.current = JSON.stringify(processedMessages)
+    if (!mountedRef.current) return
+    setProcessor(next)
+    setSurfaces(Array.from(next.model.surfacesMap.values()))
+  }
+
+  function processedPrefixChanged(messages: A2uiMessage[], prefixLen: number): boolean {
+    if (prefixLen <= 0) return false
+    const newPrefix = JSON.stringify(messages.slice(0, prefixLen))
+    const stored = lastProcessedMessagesRef.current
+    if (!stored) return true
+    try {
+      const parsed = JSON.parse(stored) as A2uiMessage[]
+      return JSON.stringify(parsed.slice(0, prefixLen)) !== newPrefix
+    } catch {
+      return true
+    }
+  }
+
+  const [processor, setProcessor] = useState(
+    () => processorRef.current as MessageProcessor<ReactComponentImplementation>,
+  )
   const [surfaces, setSurfaces] = useState(() =>
-    Array.from(processorRef.current.model.surfacesMap.values()),
+    Array.from(
+      (processorRef.current as MessageProcessor<ReactComponentImplementation>).model.surfacesMap.values(),
+    ),
   )
 
   useEffect(() => {
@@ -70,18 +111,17 @@ export default function SkoponA2uiStreamRenderer({
 
     if (surfaceIdChanged) {
       const next = createProcessor()
-      processorRef.current = next
-      processedCountRef.current = 0
       if (Array.isArray(messages) && messages.length > 0) {
         next.processMessages(messages)
-        processedCountRef.current = messages.length
+        if (!cancelled) commitProcessor(next, messages)
+      } else {
+        processorRef.current = next
+        processedCountRef.current = 0
+        lastProcessedMessagesRef.current = ''
         if (!cancelled) {
           setProcessor(next)
-          setSurfaces(Array.from(next.model.surfacesMap.values()))
+          setSurfaces([])
         }
-      } else if (!cancelled) {
-        setProcessor(next)
-        setSurfaces([])
       }
       return () => {
         cancelled = true
@@ -93,6 +133,7 @@ export default function SkoponA2uiStreamRenderer({
         const next = createProcessor()
         processorRef.current = next
         processedCountRef.current = 0
+        lastProcessedMessagesRef.current = ''
         if (!cancelled) {
           setProcessor(next)
           setSurfaces([])
@@ -103,24 +144,22 @@ export default function SkoponA2uiStreamRenderer({
       }
     }
 
-    const activeProcessor = processorRef.current
+    const activeProcessor = processorRef.current as MessageProcessor<ReactComponentImplementation>
+    const processedCount = processedCountRef.current
 
-    if (messages.length < processedCountRef.current) {
+    if (
+      messages.length < processedCount ||
+      processedPrefixChanged(messages, processedCount)
+    ) {
       const next = createProcessor()
-      processorRef.current = next
-      processedCountRef.current = 0
       next.processMessages(messages)
-      processedCountRef.current = messages.length
-      if (!cancelled) {
-        setProcessor(next)
-        setSurfaces(Array.from(next.model.surfacesMap.values()))
-      }
+      if (!cancelled) commitProcessor(next, messages)
       return () => {
         cancelled = true
       }
     }
 
-    const pending = messages.slice(processedCountRef.current)
+    const pending = messages.slice(processedCount)
     if (pending.length === 0) {
       return () => {
         cancelled = true
@@ -128,6 +167,7 @@ export default function SkoponA2uiStreamRenderer({
     }
     activeProcessor.processMessages(pending)
     processedCountRef.current = messages.length
+    lastProcessedMessagesRef.current = JSON.stringify(messages)
     if (!cancelled) {
       setSurfaces(Array.from(activeProcessor.model.surfacesMap.values()))
     }
@@ -140,12 +180,16 @@ export default function SkoponA2uiStreamRenderer({
   if (surfaces.length === 0) return <>{emptyHint}</>
 
   return (
-    <A2uiPreviewModeProvider interactive={interactive}>
-      <div className="a2ui-surface a2ui-container">
-        {surfaces.map((surface) => (
-          <A2uiSurface key={surface.id} surface={surface} />
-        ))}
-      </div>
-    </A2uiPreviewModeProvider>
+    <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>
   )
 }

package/src/components/SkoponFormRenderer.tsx

@@ -15,6 +15,8 @@ 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 { CaseSearchProvider, type CaseSearchFn } from '../catalog/caseSearchContext'
+import { ResumeSearchProvider, type ResumeSearchFn } from '../catalog/resumeSearchContext'
 
 export interface SkoponFormRendererRef {
   getValues: (fieldNames?: string[]) => Record<string, unknown>
@@ -27,6 +29,10 @@ export interface SkoponFormRendererProps {
   interactive?: boolean
   /** 默认用于 getValues() 的字段名列表 */
   fieldNames?: string[]
+  /** 简历多选组件：注入搜索函数 */
+  resumeSearch?: ResumeSearchFn | null
+  /** 案例单选组件：注入搜索函数 */
+  caseSearch?: CaseSearchFn | null
 }
 
 const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererProps>(
@@ -37,6 +43,8 @@ const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererP
       emptyHint = null,
       interactive = true,
       fieldNames = [],
+      resumeSearch = null,
+      caseSearch = null,
     },
     ref,
   ) {
@@ -49,13 +57,23 @@ const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererP
     const fieldNamesRef = useRef(fieldNames)
     fieldNamesRef.current = fieldNames
 
+    const docKey = useMemo(() => {
+      if (isA2uiSurfaceEmpty(doc)) return ''
+      try {
+        return JSON.stringify(doc)
+      } catch {
+        return String(doc)
+      }
+    }, [doc])
+
     const renderResult = useMemo(() => {
-      if (isA2uiSurfaceEmpty(doc)) {
+      if (!docKey) {
         return { surfaces: [], processor: null as MessageProcessor<ReactComponentImplementation> | null }
       }
       try {
+        const resolvedDoc = JSON.parse(docKey) as A2uiSurfaceDoc
         const processor = new MessageProcessor([buildSkoponCatalog()])
-        const messages = surfaceDocToMessages(doc!, {
+        const messages = surfaceDocToMessages(resolvedDoc, {
           surfaceId,
           catalogId: SKOPON_CATALOG_ID,
         }) as unknown as A2uiMessage[]
@@ -68,7 +86,7 @@ const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererP
         console.error('[SkoponFormRenderer] 渲染 A2UI surface 失败', error)
         return { surfaces: [], processor: null as MessageProcessor<ReactComponentImplementation> | null }
       }
-    }, [doc, surfaceId])
+    }, [docKey, surfaceId])
 
     const { surfaces, processor } = renderResult
     processorRef.current = processor
@@ -89,13 +107,17 @@ const SkoponFormRenderer = forwardRef<SkoponFormRendererRef, SkoponFormRendererP
     if (surfaces.length === 0) return <>{emptyHint}</>
 
     return (
-      <A2uiPreviewModeProvider interactive={interactive}>
-        <div className="a2ui-surface a2ui-container">
-          {surfaces.map((surface) => (
-            <A2uiSurface key={surface.id} surface={surface} />
-          ))}
-        </div>
-      </A2uiPreviewModeProvider>
+      <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>
     )
   },
 )

package/src/index.ts

@@ -63,6 +63,8 @@ export { createFormClient, type FormClient, type FormClientOptions } from './cli
 
 export { default as SkoponFormRenderer } from './components/SkoponFormRenderer'
 export type { SkoponFormRendererProps, SkoponFormRendererRef } from './components/SkoponFormRenderer'
+export type { ResumeSearchFn as SkoponResumeSearchFn } from './catalog/resumeSearchContext'
+export type { CaseSearchFn as SkoponCaseSearchFn } from './catalog/caseSearchContext'
 
 export { default as SkoponA2uiStreamRenderer } from './components/SkoponA2uiStreamRenderer'
 export type { SkoponA2uiStreamRendererProps } from './components/SkoponA2uiStreamRenderer'
@@ -73,4 +75,25 @@ export type { AskUserFormCardProps } from './components/AskUserFormCard'
 export { default as CurlSubmitBlock } from './components/CurlSubmitBlock'
 export type { CurlSubmitBlockProps } from './components/CurlSubmitBlock'
 
+
+export {
+  ResumeSearchProvider,
+  useResumeSearch,
+  type ResumeSearchFn,
+  type ResumeSearchItem,
+  type ResumeSearchParams,
+  type ResumeSearchResult,
+} from './catalog/resumeSearchContext'
+
+export {
+  CaseSearchProvider,
+  useCaseSearch,
+  type CaseSearchFn,
+  type CaseSearchItem,
+  type CaseSearchParams,
+  type CaseSearchResult,
+} from './catalog/caseSearchContext'
+
+export type { FormResumeFilter, FormCaseFilter } from './types/index'
+
 import './styles/index.css'

package/src/styles/a2ui-preview.css

@@ -254,8 +254,8 @@
   box-shadow: var(--shadow-focus);
 }
 
-/* 原生 A2UI 按钮/chip；勿作用于 Ant Design（Switch、Select、Picker 等） */
-.a2ui-surface.a2ui-container button:not([class*='ant-']) {
+/* 原生 A2UI 按钮/chip；勿作用于 Ant Design（Switch、Select、Picker 等）及 Skopon 简历/案例卡片 */
+.a2ui-surface.a2ui-container button:not([class*='ant-']):not(.skopon-resume-select-card) {
   min-height: var(--button-height-md);
   padding: 0 var(--button-padding-x-md);
   font-family: var(--font-sans);
@@ -273,12 +273,12 @@
     color var(--duration-fast) var(--ease-default);
 }
 
-.a2ui-surface.a2ui-container button:not([class*='ant-']):hover:not(:disabled) {
+.a2ui-surface.a2ui-container button:not([class*='ant-']):not(.skopon-resume-select-card):hover:not(:disabled) {
   border-color: var(--color-border-strong);
   background: var(--color-bg-subtle);
 }
 
-.a2ui-surface.a2ui-container button:not([class*='ant-']):disabled {
+.a2ui-surface.a2ui-container button:not([class*='ant-']):not(.skopon-resume-select-card):disabled {
   cursor: not-allowed;
   opacity: 0.45;
 }

package/src/styles/index.css

@@ -193,3 +193,194 @@
   white-space: pre-wrap;
   word-break: break-all;
 }
+
+.skopon-resume-select-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: var(--space-3, 12px);
+  margin-top: var(--space-2, 8px);
+  overflow-x: auto;
+  padding-bottom: var(--space-1, 4px);
+  -webkit-overflow-scrolling: touch;
+}
+.skopon-resume-select-card {
+  display: flex;
+  flex: 0 0 auto;
+  box-sizing: border-box;
+  padding: 12px;
+  border: 1px solid var(--color-border, #d9d9d9);
+  border-radius: 4px;
+  background: var(--color-surface, #fff);
+  text-align: left;
+  cursor: pointer;
+  min-height: unset;
+  font-weight: inherit;
+  line-height: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+}
+.a2ui-surface.a2ui-container button.skopon-resume-select-card {
+  border-radius: 4px;
+  min-height: unset;
+  padding: 12px;
+  font-weight: inherit;
+}
+.skopon-resume-select-card--profile {
+  flex-direction: column;
+  align-items: center;
+  width: 200px;
+  min-width: 200px;
+  max-width: 200px;
+  height: 320px;
+  min-height: 320px;
+  max-height: 320px;
+  padding: 10px;
+  overflow: hidden;
+}
+.a2ui-surface.a2ui-container button.skopon-resume-select-card--profile {
+  padding: 10px;
+  min-height: 320px;
+}
+.skopon-resume-select-card:not(.skopon-resume-select-card--profile) {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+  width: 220px;
+  min-width: 220px;
+}
+.skopon-resume-select-card:hover:not(:disabled) {
+  border-color: var(--color-primary, #1677ff);
+}
+.skopon-resume-select-card--selected {
+  border-color: var(--color-primary, #1677ff);
+  background: color-mix(in srgb, var(--color-primary, #1677ff) 8%, transparent);
+}
+.skopon-resume-select-card:disabled {
+  cursor: not-allowed;
+  opacity: 0.72;
+}
+.skopon-resume-select-card-avatar {
+  flex-shrink: 0;
+}
+.skopon-resume-select-card--profile .skopon-resume-select-card-avatar {
+  margin-bottom: 6px;
+}
+.skopon-resume-select-card-name {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 1.3;
+  margin-bottom: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text, rgba(0, 0, 0, 0.88));
+}
+.skopon-resume-select-card--profile > .skopon-resume-select-card-name {
+  flex-shrink: 0;
+  width: 100%;
+  text-align: center;
+}
+.skopon-resume-select-card-body {
+  width: 100%;
+  min-width: 0;
+  text-align: left;
+}
+.skopon-resume-select-card--profile .skopon-resume-select-card-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.skopon-resume-select-card-field {
+  margin-bottom: 4px;
+  flex-shrink: 0;
+}
+.skopon-resume-select-card-field-value {
+  font-size: 12px;
+  color: var(--color-text, rgba(0, 0, 0, 0.88));
+}
+.skopon-resume-select-card-tags-empty {
+  font-size: 12px;
+  color: var(--color-text-secondary, rgba(0, 0, 0, 0.45));
+}
+.skopon-resume-select-card-tags {
+  margin-bottom: 4px;
+  flex-shrink: 0;
+}
+.skopon-resume-select-card-tags-label,
+.skopon-resume-select-card-works-label {
+  display: block;
+  margin-bottom: 2px;
+  font-size: 11px;
+  color: var(--color-text-secondary, rgba(0, 0, 0, 0.45));
+}
+.skopon-resume-select-card-tags-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.skopon-resume-select-card-tag {
+  margin: 0;
+  font-size: 11px;
+  line-height: 18px;
+}
+.skopon-resume-select-card-works {
+  margin-top: 4px;
+  flex-shrink: 0;
+}
+.skopon-resume-select-card-works-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.skopon-resume-select-card-works-empty {
+  font-size: 12px;
+  color: var(--color-text-secondary, rgba(0, 0, 0, 0.45));
+}
+.skopon-resume-select-card-work {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.skopon-resume-select-card-work-cover {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 2px;
+  border: 1px solid var(--color-border, #d9d9d9);
+  background: var(--color-bg-subtle, rgba(0, 0, 0, 0.02));
+  overflow: hidden;
+}
+.skopon-resume-select-card-work-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.skopon-resume-select-card-work-placeholder {
+  font-size: 16px;
+  color: var(--color-text-secondary, rgba(0, 0, 0, 0.45));
+}
+.skopon-resume-select-card-work-title {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  color: var(--color-text, rgba(0, 0, 0, 0.88));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.skopon-resume-select-actions {
+  margin-top: var(--space-2, 8px);
+}
+.skopon-resume-select-empty,
+.skopon-resume-select-status {
+  padding: 12px 0;
+  color: var(--color-text-secondary, rgba(0, 0, 0, 0.45));
+}

package/src/submit/buildCurlStatement.ts

@@ -12,33 +12,12 @@ export function buildCurlStatement(payload: unknown, callbackUrl?: string | null
   ].join('\n')
 }
 
-function formatJsonBodyLine(key: string, value: unknown, trailingComma: boolean): string {
-  return `  ${JSON.stringify(key)}: ${JSON.stringify(value)}${trailingComma ? ',' : ''}`
-}
-
-/** 构建含行注释的 JSON body：extra 段标注「额外字段（未在卡片展示）」 */
+/** 构建合法 JSON body（card + extra 合并，便于 curl 直接执行） */
 export function buildAskUserCurlBodyJson(
   cardValues: Record<string, unknown>,
   extraValues: Record<string, unknown>,
 ): string {
-  const lines: string[] = ['{']
-  const cardEntries = Object.entries(cardValues)
-  const extraEntries = Object.entries(extraValues)
-
-  cardEntries.forEach(([key, value], index) => {
-    const hasMore = index < cardEntries.length - 1 || extraEntries.length > 0
-    lines.push(formatJsonBodyLine(key, value, hasMore))
-  })
-
-  if (extraEntries.length > 0) {
-    lines.push('  // 额外字段（未在卡片展示）')
-    extraEntries.forEach(([key, value], index) => {
-      lines.push(formatJsonBodyLine(key, value, index < extraEntries.length - 1))
-    })
-  }
-
-  lines.push('}')
-  return lines.join('\n')
+  return JSON.stringify({ ...cardValues, ...extraValues }, null, 2)
 }
 
 export interface BuildAskUserCurlStatementOptions {