@skopon-cool/form-sdk 0.6.3 → 0.6.5

package/src/styles/index.css

@@ -230,6 +230,210 @@
   justify-content: flex-end;
 }
 
+.skopon-module-panel {
+  min-width: 0;
+  padding: var(--space-3) var(--space-2) var(--space-2);
+}
+
+.skopon-module-panel__description {
+  margin: 0 0 var(--space-3) !important;
+}
+
+.skopon-module-panel__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
+  align-items: start;
+}
+
+.skopon-module-panel__field {
+  min-width: 0;
+}
+
+.skopon-module-panel__field .form-block-preview {
+  padding: 0;
+}
+
+.skopon-compact-upload {
+  display: grid;
+  grid-template-columns: 86px minmax(0, 1fr);
+  gap: 13px;
+  align-items: center;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: 12px;
+  background: var(--color-surface);
+}
+
+.skopon-compact-upload--failed {
+  border-color: color-mix(in srgb, var(--color-error, #cf3030) 45%, var(--color-border-subtle));
+  background: color-mix(in srgb, var(--color-error, #cf3030) 7%, var(--color-surface));
+}
+
+.skopon-compact-upload__thumb {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 86px;
+  height: 92px;
+  overflow: hidden;
+  border-radius: 9px;
+  color: var(--color-text-secondary);
+  background: linear-gradient(145deg, var(--color-bg-subtle), var(--color-border-subtle));
+}
+
+.skopon-compact-upload__thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.skopon-compact-upload__state-mark {
+  position: absolute;
+  right: 6px;
+  bottom: 6px;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  color: var(--color-text-secondary);
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.skopon-compact-upload--passed .skopon-compact-upload__state-mark,
+.skopon-compact-upload--passed .skopon-compact-upload__status {
+  color: var(--color-success, #087a48);
+}
+
+.skopon-compact-upload--failed .skopon-compact-upload__state-mark,
+.skopon-compact-upload--failed .skopon-compact-upload__status,
+.skopon-compact-upload__error {
+  color: var(--color-error, #cf3030);
+}
+
+.skopon-compact-upload__meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  min-width: 0;
+}
+
+.skopon-compact-upload__meta > strong {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.4;
+}
+
+.skopon-compact-upload__status,
+.skopon-compact-upload__error {
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-xs);
+  line-height: 1.4;
+  text-overflow: ellipsis;
+}
+
+.skopon-compact-upload__source {
+  display: inline-flex;
+  align-items: center;
+  min-height: 20px;
+  padding: 1px 7px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: 999px;
+  color: var(--color-text-secondary);
+  background: var(--color-bg-subtle);
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.skopon-compact-upload__source--asset_only {
+  color: var(--color-primary);
+  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--color-border-subtle));
+}
+
+.skopon-compact-upload__source--upload_or_asset {
+  color: var(--color-text);
+}
+
+.skopon-compact-upload__meta .ant-btn {
+  min-height: 30px;
+  padding-inline: 11px;
+  border-radius: 8px;
+}
+
+.skopon-module-panel__guide {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  margin-top: 14px;
+  padding: 13px 0 0;
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+.skopon-module-panel__requirements .ant-typography {
+  margin-bottom: 0;
+  white-space: pre-line;
+}
+
+.skopon-module-panel__example-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.skopon-module-panel__example-list .ant-image,
+.skopon-module-panel__example-list .ant-image-img {
+  width: 42px !important;
+  height: 42px !important;
+  border-radius: 7px;
+}
+
+.a2ui-surface.a2ui-container .a2ui-tabs-header.a2ui-tab-button {
+  min-height: 44px;
+  padding: 0 14px !important;
+  border-radius: 0 !important;
+  border-bottom: 2px solid transparent !important;
+  background: transparent !important;
+  color: var(--color-text-muted) !important;
+  font-size: var(--font-size-sm);
+  font-weight: 400;
+}
+
+.a2ui-surface.a2ui-container .a2ui-tabs-header.a2ui-tab-button.active {
+  border-bottom-color: var(--color-text) !important;
+  color: var(--color-text) !important;
+  font-weight: var(--font-weight-medium);
+}
+
+@media (max-width: 640px) {
+  .skopon-module-panel__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .skopon-module-panel__guide {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .skopon-compact-upload {
+    grid-template-columns: 72px minmax(0, 1fr);
+  }
+
+  .skopon-compact-upload__thumb {
+    width: 72px;
+    height: 82px;
+  }
+}
+
 .ask-user-curl-card {
   display: flex;
   flex-direction: column;
@@ -617,3 +821,94 @@
   padding: 12px 0;
   color: var(--color-text-secondary, rgba(0, 0, 0, 0.45));
 }
+
+.skopon-file-source-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 8px 0;
+}
+
+.skopon-asset-picker {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+  max-height: min(68vh, 620px);
+  overflow: auto;
+  padding: 2px;
+}
+
+.skopon-asset-picker__card {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  min-width: 0;
+  padding: 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  background: #fff;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+
+.skopon-asset-picker__card:hover {
+  border-color: #91caff;
+  box-shadow: 0 2px 10px rgba(22, 119, 255, 0.1);
+}
+
+.skopon-asset-picker__media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 150px;
+  overflow: hidden;
+  border-radius: 6px;
+  background: #f5f7fa;
+}
+
+.skopon-asset-picker__media .ant-image,
+.skopon-asset-picker__media .ant-image-img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.skopon-asset-picker__media .ant-image-img {
+  object-fit: contain;
+}
+
+.skopon-asset-picker__placeholder {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  color: #8c8c8c;
+}
+
+.skopon-asset-picker__name {
+  overflow-wrap: anywhere;
+  min-height: 22px;
+}
+
+@media (max-width: 600px) {
+  .skopon-asset-picker {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .skopon-asset-picker__card {
+    padding: 8px;
+  }
+
+  .skopon-asset-picker__media {
+    height: 120px;
+  }
+}
+
+.skopon-selected-assets__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}

package/src/submit/buildAnswerAgentBody.ts

@@ -24,8 +24,10 @@ function toBlocksJsonShape(
     return source
   }
   return {
+    ...(obj.schema === 'skopon.material-form/v2' ? { schema: obj.schema } : {}),
     title: typeof obj.title === 'string' ? obj.title : '',
     description: typeof obj.description === 'string' ? obj.description : '',
+    modules: Array.isArray(obj.modules) ? obj.modules : undefined,
     blocks: obj.blocks,
   }
 }

package/src/submit/intersectPayloadBlocksWithForm.ts

@@ -3,7 +3,8 @@ import { hasRenderableFormOptions } from '../adapter/formOptions'
 import type { FormBlock, FormSchema } from '../types/index'
 import { isDisplayBlockType, isInputBlockType } from '../types/index'
 
-export type PayloadBlocksDefinition = Pick<FormSchema, 'title' | 'description' | 'blocks'> & {
+export type PayloadBlocksDefinition = Pick<FormSchema, 'title' | 'description' | 'modules' | 'blocks'> & {
+  schema?: 'skopon.material-form/v2'
   /**
    * ask 原始 blocks（normalize 前）。交集合并按此键集覆盖 form，
    * 避免 normalize 填入的空默认值误盖表单样式。
@@ -18,9 +19,24 @@ export interface PayloadBlocksIntersection {
   renderBlocks: FormBlock[]
   title: string
   description: string
+  modules?: FormSchema['modules']
 }
 
 const FORM_ANCHORED_KEYS = new Set(['type', 'name', 'id'])
+const RUNTIME_SNAPSHOT_KEYS = new Set([
+  'defaultValue',
+  'fileReviewStatus',
+  'fileReviewMessage',
+  'fileRejectedUrls',
+])
+
+export interface IntersectPayloadBlocksOptions {
+  /**
+   * snapshot：消息快照中的显式配置优先（兼容旧行为）；
+   * latest：最新表单负责布局/文案/校验，只保留快照里的填写与审核运行态。
+   */
+  definitionPolicy?: 'snapshot' | 'latest'
+}
 
 function isHiddenTextBlock(block: FormBlock): boolean {
   return block.type === 'text' && block.hidden === true
@@ -94,7 +110,27 @@ function mergeBlock(formBlock: FormBlock, rawPayloadBlock: FormBlock): FormBlock
   merged.type = formBlock.type
   merged.name = formBlock.name?.trim() || rawPayloadBlock.name
   merged.id = formBlock.id
-  return normalizePayloadBlock(merged)
+  const normalized = normalizePayloadBlock(merged)
+  // 单 block normalize 没有 modules 上下文，会把合法 moduleId 当成悬空引用清掉。
+  normalized.moduleId = merged.moduleId
+  return normalized
+}
+
+function mergeBlockWithLatestDefinition(
+  formBlock: FormBlock,
+  rawPayloadBlock: FormBlock,
+): FormBlock {
+  const merged: FormBlock = { ...formBlock }
+  for (const key of Object.keys(rawPayloadBlock) as (keyof FormBlock)[]) {
+    if (!RUNTIME_SNAPSHOT_KEYS.has(key)) continue
+    if (!Object.prototype.hasOwnProperty.call(rawPayloadBlock, key)) continue
+    const value = rawPayloadBlock[key]
+    if (value === undefined) continue
+    Object.assign(merged, { [key]: value })
+  }
+  const normalized = normalizePayloadBlock(merged)
+  normalized.moduleId = merged.moduleId
+  return normalized
 }
 
 /** 解析 ask_user payload 为 blocksJson 形（title / description / blocks） */
@@ -108,12 +144,15 @@ export function parsePayloadBlocksJson(payload: unknown): PayloadBlocksDefinitio
   const normalized = normalizeFormDefinition({
     title: typeof obj.title === 'string' ? obj.title : '',
     description: typeof obj.description === 'string' ? obj.description : '',
+    modules: Array.isArray(obj.modules) ? obj.modules as FormSchema['modules'] : undefined,
     blocks: rawBlocks,
     jsonSchema: {},
   })
   return {
+    schema: obj.schema === 'skopon.material-form/v2' ? obj.schema : undefined,
     title: normalized.title,
     description: normalized.description,
+    modules: normalized.modules,
     blocks: normalized.blocks,
     rawBlocks,
   }
@@ -126,7 +165,9 @@ export function parsePayloadBlocksJson(payload: unknown): PayloadBlocksDefinitio
 export function intersectPayloadBlocksWithForm(
   payloadDef: PayloadBlocksDefinition,
   formDefinition: FormSchema | undefined,
+  options?: IntersectPayloadBlocksOptions,
 ): PayloadBlocksIntersection {
+  const definitionPolicy = options?.definitionPolicy ?? 'snapshot'
   const formByName = new Map<string, FormBlock>()
   for (const block of formDefinition?.blocks ?? []) {
     if (isInputBlockType(block.type) && block.name?.trim()) {
@@ -144,7 +185,11 @@ export function intersectPayloadBlocksWithForm(
     const formBlock = formByName.get(name)
     if (formBlock) {
       const rawPayloadBlock = resolveRawInputBlock(payloadDef, name, payloadBlock)
-      matchedBlocks.push(mergeBlock(formBlock, rawPayloadBlock))
+      matchedBlocks.push(
+        definitionPolicy === 'latest'
+          ? mergeBlockWithLatestDefinition(formBlock, rawPayloadBlock)
+          : mergeBlock(formBlock, rawPayloadBlock),
+      )
     } else {
       extraBlocks.push(normalizePayloadBlock(payloadBlock))
     }
@@ -156,6 +201,10 @@ export function intersectPayloadBlocksWithForm(
     renderBlocks: buildRenderBlocks(payloadDef, matchedBlocks),
     title: payloadDef.title?.trim() || formDefinition?.title?.trim() || '',
     description: payloadDef.description?.trim() || formDefinition?.description?.trim() || '',
+    modules:
+      definitionPolicy === 'latest'
+        ? (formDefinition?.modules?.length ? formDefinition.modules : payloadDef.modules)
+        : (payloadDef.modules?.length ? payloadDef.modules : formDefinition?.modules),
   }
 }
 

package/src/submit/submit.test.ts

@@ -262,6 +262,60 @@ describe('intersectPayloadBlocksWithForm', () => {
     expect(result.matchedBlocks[0]?.defaultValue).toBe('hello')
   })
 
+  it('uses latest form presentation while preserving snapshot runtime state', () => {
+    const form: FormSchema = {
+      title: 'Latest Form',
+      description: '',
+      modules: [{ id: 'latest-person', label: '人物（新版）' }],
+      blocks: [{
+        id: 'latest-file',
+        type: 'file',
+        name: 'image01',
+        label: '新版人物图',
+        moduleId: 'latest-person',
+        help: '新版说明',
+        fileReviewCriteria: '新版审核标准',
+        fileExampleUrls: ['https://example.com/latest.png'],
+      }],
+      jsonSchema: {},
+    }
+    const snapshot = parsePayloadBlocksJson({
+      title: '当前任务素材',
+      modules: [{ id: 'old-person', label: '人物（旧版）' }],
+      blocks: [{
+        id: 'old-file',
+        type: 'file',
+        name: 'image01',
+        label: '旧版人物图',
+        moduleId: 'old-person',
+        help: '旧版说明',
+        fileReviewCriteria: '旧版审核标准',
+        defaultValue: ['https://example.com/uploaded.png'],
+        fileReviewStatus: 'failed',
+        fileReviewMessage: '人物模糊',
+        fileRejectedUrls: ['https://example.com/rejected.png'],
+      }],
+    })!
+
+    const result = intersectPayloadBlocksWithForm(snapshot, form, {
+      definitionPolicy: 'latest',
+    })
+
+    expect(result.modules).toEqual(form.modules)
+    expect(result.matchedBlocks[0]).toMatchObject({
+      id: 'latest-file',
+      label: '新版人物图',
+      moduleId: 'latest-person',
+      help: '新版说明',
+      fileReviewCriteria: '新版审核标准',
+      fileExampleUrls: ['https://example.com/latest.png'],
+      defaultValue: ['https://example.com/uploaded.png'],
+      fileReviewStatus: 'failed',
+      fileReviewMessage: '人物模糊',
+      fileRejectedUrls: ['https://example.com/rejected.png'],
+    })
+  })
+
   it('keeps form caseFilter when ask omits caseFilter key', () => {
     const form: FormSchema = {
       title: 'Form',

package/src/types/index.ts

@@ -20,6 +20,16 @@ export type A2uiComponentName =
   | 'SkoponSelect'
   | 'SkoponResumeSelect'
   | 'SkoponCaseSelect'
+  | 'SkoponModulePanel'
+
+/** 表单分组模块。运行时以 Tab 展示，要求与示例统一放在模块底部。 */
+export interface FormModule {
+  id: string
+  label: string
+  description?: string
+  reviewCriteria?: string
+  exampleUrls?: string[]
+}
 
 export interface A2uiComponentNode {
   id: string
@@ -88,6 +98,14 @@ export interface FormBlockOption {
   label: string
 }
 
+export interface FormAssetOption {
+  assetId: string
+  url: string
+  previewUrl?: string
+  label: string
+  assetType?: string
+}
+
 export type FormConditionOperator = 'eq' | 'ne' | 'empty' | 'notEmpty'
 
 export interface FormBlockCondition {
@@ -165,6 +183,21 @@ export interface FormBlock {
   fileExampleUrls?: string[]
   /** 制作模板的逐字段审核标准；由工作流读取，不能使用提交值覆盖。 */
   fileReviewCriteria?: string
+  /** 是否需要由工作流审核上传内容；素材库已审核素材可以关闭。 */
+  fileReviewRequired?: boolean
+  /** 物料采集来源模式，由 skopon-admin 环节配置。 */
+  fileSourceMode?: 'upload_required' | 'upload_or_asset' | 'asset_only'
+  /** 通用收集流从 Footage 为当前素材位查询的候选；提交选中的素材 ID。 */
+  fileAssetOptions?: FormAssetOption[]
+  /** 对应 Footage 同步素材位的限定 key。 */
+  assetSlotKey?: string
+  assetType?: 'image' | 'video' | 'audio' | 'text'
+  /** 运行时素材审核状态；用于返工表单回显，不作为用户提交值。 */
+  fileReviewStatus?: 'passed' | 'failed'
+  /** 运行时素材审核说明；failed 时通常为不合格原因。 */
+  fileReviewMessage?: string
+  /** 审核未通过的历史文件，仅作错误态回显，不计入有效提交。 */
+  fileRejectedUrls?: string[]
   defaultValue?: string | string[] | boolean
   /** 派生 JSON Schema 时写入 property.$comment */
   jsonSchemaDescription?: string
@@ -195,11 +228,14 @@ export interface FormBlock {
   /** 案例单选：列表筛选条件（持久化进 block json） */
   caseFilter?: FormCaseFilter
   condition?: FormBlockCondition
+  /** 所属模块；命中 FormSchema.modules.id 时在对应 Tab 中展示。 */
+  moduleId?: string
 }
 
 export interface FormSchema {
   title?: string
   description?: string
+  modules?: FormModule[]
   blocks: FormBlock[]
   jsonSchema: FormJsonSchema
 }
@@ -240,6 +276,7 @@ export function supportsDefaultValue(type: FormBlockType): boolean {
 export interface FormDefinitionPayload {
   title?: string
   description?: string
+  modules?: FormModule[]
   blocks?: FormBlock[]
   a2ui?: A2uiSurfaceDoc
   json_schema?: FormJsonSchema