@skopon-cool/form-sdk 0.4.8 → 0.5.0

package/src/index.ts

@@ -27,9 +27,18 @@ export {
   isLayoutBlockType,
   isMediaBlockType,
   isOptionsBlockType,
+  isWebBlockType,
   supportsDefaultValue,
 } from './types/index'
 
+export {
+  FORM_WEB_DEFAULT_HEIGHT,
+  FORM_WEB_MAX_HEIGHT,
+  FORM_WEB_MIN_HEIGHT,
+  isSupportedWebUrl,
+  normalizeWebHeight,
+} from './adapter/formWeb'
+
 export {
   a2uiToBlocks,
   blocksToA2ui,

package/src/styles/index.css

@@ -105,6 +105,93 @@
   text-align: center;
 }
 
+/* 网页展示 */
+.skopon-web-preview {
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.skopon-web-frame-shell {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-subtle);
+}
+
+.skopon-web-frame-shell--empty {
+  border-style: dashed;
+  border-color: var(--color-border);
+}
+
+.skopon-web-frame {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  border: 0;
+  background: var(--color-surface);
+}
+
+.skopon-web-empty {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  color: var(--color-text-muted);
+  font-size: var(--font-size-sm);
+  text-align: center;
+}
+
+.skopon-web-expand-button.ant-btn {
+  position: absolute;
+  right: var(--space-3);
+  bottom: var(--space-3);
+  z-index: 1;
+  width: var(--button-height-md);
+  min-width: var(--button-height-md);
+  height: var(--button-height-md);
+  padding: 0;
+  color: var(--color-primary);
+  border-color: var(--color-border);
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  box-shadow: var(--shadow-md);
+}
+
+.skopon-web-expand-button.ant-btn:hover {
+  color: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
+  background: var(--color-surface);
+}
+
+.skopon-web-expand-button.ant-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus), var(--shadow-md);
+}
+
+.skopon-web-modal .ant-modal-content {
+  overflow: hidden;
+  border-radius: var(--radius-lg);
+}
+
+.skopon-web-modal .ant-modal-body {
+  padding: 0;
+  overflow: hidden;
+}
+
+.skopon-web-frame--modal {
+  height: min(80vh, 900px);
+  height: min(80dvh, 900px);
+}
+
 .form-file-upload-preview {
   margin-top: var(--space-1);
 }

package/src/submit/intersectPayloadBlocksWithForm.ts

@@ -1,6 +1,6 @@
 import { normalizeFormDefinition } from '../adapter/formSchema'
 import type { FormBlock, FormSchema } from '../types/index'
-import { isInputBlockType, isLayoutBlockType } from '../types/index'
+import { isDisplayBlockType, isInputBlockType } from '../types/index'
 
 export type PayloadBlocksDefinition = Pick<FormSchema, 'title' | 'description' | 'blocks'> & {
   /**
@@ -13,7 +13,7 @@ export type PayloadBlocksDefinition = Pick<FormSchema, 'title' | 'description' |
 export interface PayloadBlocksIntersection {
   matchedBlocks: FormBlock[]
   extraBlocks: FormBlock[]
-  /** 按 payload 顺序：layout + matched input（不含 extra input） */
+  /** 按 payload 顺序：layout/media + matched input（不含 extra input） */
   renderBlocks: FormBlock[]
   title: string
   description: string
@@ -46,7 +46,8 @@ function buildRenderBlocks(
 
   const renderBlocks: FormBlock[] = []
   for (const payloadBlock of payloadDef.blocks) {
-    if (isLayoutBlockType(payloadBlock.type)) {
+    // layout / media 按 payload 原样上屏（ask 动态 mediaUrls 必须保留）
+    if (isDisplayBlockType(payloadBlock.type)) {
       renderBlocks.push(normalizePayloadBlock(payloadBlock))
       continue
     }
@@ -205,10 +206,10 @@ export function payloadHasInputBlocks(payloadDef: PayloadBlocksDefinition): bool
   )
 }
 
-/** 交集为空时 fallback：payload 中可上屏的 blocks（layout + 非 hidden input） */
+/** 交集为空时 fallback：payload 中可上屏的 blocks（layout/media + 非 hidden input） */
 export function getPayloadRenderableBlocks(payloadDef: PayloadBlocksDefinition): FormBlock[] {
   return payloadDef.blocks.filter((block) => {
-    if (isLayoutBlockType(block.type)) return true
+    if (isDisplayBlockType(block.type)) return true
     if (!isInputBlockType(block.type) || !block.name?.trim()) return false
     // hidden text 不上屏；提交值由 getPayloadHiddenBlockValues / dataModel 补齐
     return !isHiddenTextBlock(block)

package/src/submit/submit.test.ts

@@ -734,6 +734,20 @@ describe('submitFormJson', () => {
 })
 
 describe('validateFormSubmitValues', () => {
+  it('ignores display blocks even if they contain input-like metadata', () => {
+    const blocks = [
+      {
+        id: 'web-1',
+        type: 'web' as const,
+        name: 'embedded_page',
+        label: '网页',
+        required: true,
+        webUrl: 'https://example.com',
+      },
+    ]
+    expect(validateFormSubmitValues(blocks, {})).toBeNull()
+  })
+
   it('rejects empty required text field', () => {
     const blocks = [
       { id: 'b1', type: 'text' as const, name: 'title', label: '标题', required: true },

package/src/submit/validateFormSubmit.ts

@@ -1,5 +1,5 @@
 import type { FormBlock } from '../types/index'
-import { isLayoutBlockType, isMediaBlockType } from '../types/index'
+import { isInputBlockType } from '../types/index'
 import { EMAIL_REGEXP } from '../adapter/a2uiAdapter'
 import { coerceToggleValue } from '../adapter/formSchema'
 import { asStringArray } from '../catalog/useSkoponBoundField'
@@ -52,9 +52,9 @@ export function validateFormSubmitValues(
   values: Record<string, unknown>,
 ): FormSubmitValidationError | null {
   for (const block of blocks) {
+    if (!isInputBlockType(block.type)) continue
     const name = block.name?.trim()
     if (!name) continue
-    if (isLayoutBlockType(block.type) || isMediaBlockType(block.type)) continue
 
     const raw = values[name]
     const label = block.label?.trim() || name

package/src/types/index.ts

@@ -16,6 +16,7 @@ export type A2uiComponentName =
   | 'DateTimeInput'
   | 'FileUpload'
   | 'SkoponMedia'
+  | 'SkoponWeb'
   | 'SkoponSelect'
   | 'SkoponResumeSelect'
   | 'SkoponCaseSelect'
@@ -62,6 +63,7 @@ export type FormBlockType =
   | 'image'
   | 'video'
   | 'audio'
+  | 'web'
 
 export type FormMediaSize = 'huge' | 'large' | 'medium' | 'small' | 'icon'
 
@@ -131,6 +133,10 @@ export interface FormBlock {
   mediaUrl?: string
   mediaUrls?: string[]
   mediaSize?: FormMediaSize
+  /** 网页展示块：iframe 地址，仅支持 HTTP(S) 或同源相对地址 */
+  webUrl?: string
+  /** 网页展示块：行内 iframe 高度（px） */
+  webHeight?: number
   fileAcceptTypes?: string[]
   fileAcceptExtensions?: string[]
   filePlaceholderIcon?: FormFilePlaceholderIcon
@@ -173,16 +179,20 @@ export function isMediaBlockType(type: FormBlockType): boolean {
   return type === 'image' || type === 'video' || type === 'audio'
 }
 
+export function isWebBlockType(type: FormBlockType): boolean {
+  return type === 'web'
+}
+
 export function isLayoutBlockType(type: FormBlockType): boolean {
   return type === 'heading' || type === 'paragraph'
 }
 
 export function isInputBlockType(type: FormBlockType): boolean {
-  return !isLayoutBlockType(type) && !isMediaBlockType(type)
+  return !isLayoutBlockType(type) && !isMediaBlockType(type) && !isWebBlockType(type)
 }
 
 export function isDisplayBlockType(type: FormBlockType): boolean {
-  return isLayoutBlockType(type) || isMediaBlockType(type)
+  return isLayoutBlockType(type) || isMediaBlockType(type) || isWebBlockType(type)
 }
 
 export function isOptionsBlockType(type: FormBlockType): boolean {