@skopon-cool/form-sdk 0.4.9 → 0.5.1

package/src/blocks/web/catalog.test.tsx

@@ -0,0 +1,95 @@
+// @vitest-environment jsdom
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render } from '@testing-library/react'
+import { buildSkoponCatalog } from '../../catalog/a2uiCustomCatalog'
+import { SkoponWebPreview } from './catalog'
+
+beforeAll(() => {
+  const getComputedStyle = window.getComputedStyle.bind(window)
+  vi.spyOn(window, 'getComputedStyle').mockImplementation((element) =>
+    getComputedStyle(element),
+  )
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation((query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  )
+})
+
+afterEach(() => {
+  cleanup()
+})
+
+function activeFrames(url: string): HTMLIFrameElement[] {
+  return Array.from(document.querySelectorAll<HTMLIFrameElement>('iframe')).filter(
+    (frame) => frame.getAttribute('src') === url,
+  )
+}
+
+describe('SkoponWebPreview', () => {
+  it('is registered in the merged Skopon A2UI catalog', () => {
+    const catalog = buildSkoponCatalog()
+    expect(
+      [...catalog.components.values()].some((component) => component.name === 'SkoponWeb'),
+    ).toBe(true)
+  })
+
+  it('renders one inline iframe and moves the active URL into the modal', () => {
+    const url = 'https://example.com/page'
+    const view = render(
+      <SkoponWebPreview
+        url={url}
+        height={480}
+        label="官网"
+        help="可扩展查看"
+      />,
+    )
+
+    const inlineFrame = view.getByTitle('官网') as HTMLIFrameElement
+    expect(inlineFrame.style.height).toBe('480px')
+    expect(inlineFrame.getAttribute('loading')).toBe('lazy')
+    expect(activeFrames(url)).toHaveLength(1)
+    expect(view.getByText('可扩展查看')).toBeTruthy()
+
+    fireEvent.click(view.getByRole('button', { name: '扩展显示' }))
+
+    expect(document.querySelector('.skopon-web-modal')).toBeTruthy()
+    expect(view.queryByTitle('官网')).toBeNull()
+    expect(document.querySelector('iframe[title="官网（扩展显示）"]')).toBeTruthy()
+    expect(activeFrames(url)).toHaveLength(1)
+
+    const closeButton = document.querySelector<HTMLButtonElement>('.ant-modal-close')
+    expect(closeButton).toBeTruthy()
+    if (closeButton) fireEvent.click(closeButton)
+
+    expect(activeFrames(url)).toHaveLength(1)
+    expect(view.getByTitle('官网')).toBeTruthy()
+  })
+
+  it('shows distinct placeholders and never passes unsupported URLs to iframe', () => {
+    const emptyView = render(<SkoponWebPreview url="" />)
+    expect(emptyView.getByText('未设置网页 URL')).toBeTruthy()
+    expect(document.querySelector('iframe')).toBeNull()
+    expect(emptyView.queryByRole('button', { name: '扩展显示' })).toBeNull()
+    emptyView.unmount()
+
+    const invalidView = render(<SkoponWebPreview url="javascript:alert(1)" />)
+    expect(invalidView.getByText('网页 URL 无效')).toBeTruthy()
+    expect(document.querySelector('iframe')).toBeNull()
+    expect(invalidView.queryByRole('button', { name: '扩展显示' })).toBeNull()
+  })
+})

package/src/blocks/web/catalog.tsx

@@ -0,0 +1,158 @@
+import { FullscreenOutlined } from '@ant-design/icons'
+import { Button, Modal, Tooltip, Typography } from 'antd'
+import { useRef, useState, type Ref } from 'react'
+import { createBinderlessComponentImplementation } from '@a2ui/react/v0_9'
+import { z } from 'zod'
+import { isSupportedWebUrl, normalizeWebHeight } from '../../adapter/formWeb'
+
+export interface SkoponWebPreviewProps {
+  url?: string
+  height?: number
+  label?: string
+  help?: string
+}
+
+function WebFrame({
+  url,
+  title,
+  className,
+  height,
+  frameRef,
+}: {
+  url: string
+  title: string
+  className: string
+  height?: number
+  frameRef?: Ref<HTMLIFrameElement>
+}) {
+  return (
+    <iframe
+      ref={frameRef}
+      src={url}
+      title={title}
+      className={className}
+      style={height === undefined ? undefined : { height }}
+      loading="lazy"
+      referrerPolicy="strict-origin-when-cross-origin"
+      allowFullScreen
+    />
+  )
+}
+
+export function SkoponWebPreview({
+  url = '',
+  height,
+  label,
+  help,
+}: SkoponWebPreviewProps) {
+  const [expanded, setExpanded] = useState(false)
+  const [inlineActive, setInlineActive] = useState(true)
+  const modalFrameRef = useRef<HTMLIFrameElement>(null)
+  const trimmedUrl = url.trim()
+  const supportedUrl = isSupportedWebUrl(trimmedUrl) ? trimmedUrl : null
+  const resolvedHeight = normalizeWebHeight(height)
+  const title = label?.trim() || '网页展示'
+  const helpText = help?.trim()
+  const emptyText = trimmedUrl ? '网页 URL 无效' : '未设置网页 URL'
+
+  return (
+    <div className="form-block-preview skopon-web-preview">
+      {label?.trim() ? <div className="form-block-preview-label">{label.trim()}</div> : null}
+
+      <div
+        className={`skopon-web-frame-shell${supportedUrl ? '' : ' skopon-web-frame-shell--empty'}`}
+        style={{ height: resolvedHeight }}
+      >
+        {supportedUrl && inlineActive ? (
+          <WebFrame
+            url={supportedUrl}
+            title={title}
+            className="skopon-web-frame skopon-web-frame--inline"
+            height={resolvedHeight}
+          />
+        ) : null}
+
+        {!supportedUrl ? (
+          <div className="skopon-web-empty" role="status">
+            {emptyText}
+          </div>
+        ) : null}
+
+        {supportedUrl ? (
+          <Tooltip title="扩展显示">
+            <Button
+              type="default"
+              shape="circle"
+              className="skopon-web-expand-button"
+              icon={<FullscreenOutlined />}
+              aria-label="扩展显示"
+              onClick={() => {
+                setInlineActive(false)
+                setExpanded(true)
+              }}
+            />
+          </Tooltip>
+        ) : null}
+      </div>
+
+      {helpText ? (
+        <Typography.Text type="secondary" className="form-block-preview-help">
+          {helpText}
+        </Typography.Text>
+      ) : null}
+
+      <Modal
+        open={expanded}
+        title={title}
+        footer={null}
+        width="min(1200px, calc(100vw - 32px))"
+        className="skopon-web-modal"
+        destroyOnHidden
+        mask={{ closable: true }}
+        onCancel={() => {
+          // rc-dialog 在关闭动画期间会缓存子树；先清掉 src，避免行内 iframe
+          // 恢复后与缓存中的弹窗 iframe 同时继续运行。
+          modalFrameRef.current?.removeAttribute('src')
+          setExpanded(false)
+          setInlineActive(true)
+        }}
+      >
+        {supportedUrl && !inlineActive ? (
+          <WebFrame
+            url={supportedUrl}
+            title={`${title}（扩展显示）`}
+            className="skopon-web-frame skopon-web-frame--modal"
+            frameRef={modalFrameRef}
+          />
+        ) : null}
+      </Modal>
+    </div>
+  )
+}
+
+const SkoponWebApi = {
+  name: 'SkoponWeb',
+  schema: z
+    .object({
+      url: z.any().optional(),
+      height: z.any().optional(),
+      label: z.any().optional(),
+      help: z.any().optional(),
+    })
+    .passthrough(),
+}
+
+export const SkoponWebImpl = createBinderlessComponentImplementation(
+  SkoponWebApi,
+  ({ context }) => {
+    const props = context.componentModel.properties as Record<string, unknown>
+    return (
+      <SkoponWebPreview
+        url={typeof props.url === 'string' ? props.url : ''}
+        height={normalizeWebHeight(props.height)}
+        label={typeof props.label === 'string' ? props.label : ''}
+        help={typeof props.help === 'string' ? props.help : ''}
+      />
+    )
+  },
+)

package/src/blocks/web/index.ts

@@ -0,0 +1,11 @@
+import type { BlockAdapterPlugin } from '../types'
+import { webFromComponent, webToComponent } from './adapter'
+import { SkoponWebImpl } from './catalog'
+
+export const webAdapter: BlockAdapterPlugin = {
+  type: 'web',
+  componentName: 'SkoponWeb',
+  toComponent: webToComponent,
+  fromComponent: webFromComponent,
+  catalogComponents: [SkoponWebImpl],
+}

package/src/catalog/a2uiCustomCatalog.tsx

@@ -27,6 +27,7 @@ import {
   formatFileAcceptSummary,
 } from '../adapter/formFileAccept'
 import { buildMediaListClassName, normalizeMediaSize } from '../adapter/formMedia'
+import { normalizeFormOptions } from '../adapter/formOptions'
 import {
   getRegisteredCatalogComponentNames,
   getRegisteredCatalogComponents,
@@ -77,16 +78,7 @@ function readString(value: unknown): string {
 function readOptions(
   raw: unknown,
 ): { label: string; value: string }[] {
-  if (!Array.isArray(raw)) return []
-  return raw
-    .map((item) => {
-      if (!item || typeof item !== 'object') return null
-      const rec = item as Record<string, unknown>
-      const value = String(rec.value ?? rec.label ?? '')
-      const label = String(rec.label ?? rec.value ?? '')
-      return { value, label }
-    })
-    .filter((item): item is { label: string; value: string } => !!item)
+  return normalizeFormOptions(raw)
 }
 
 interface SkoponMediaPreviewProps {
@@ -257,6 +249,8 @@ function SkoponSelectPreview({ context }: { context: ComponentContext }) {
     if (normalized !== null) setValueSilent(normalized)
   }, [isMultiple, value, setValueSilent])
 
+  if (options.length === 0) return null
+
   return (
     <div className="form-block-preview" data-skopon-field={fieldName || undefined}>
       {label ? <div className="form-block-preview-label">{label}</div> : null}
@@ -310,6 +304,8 @@ function ChoicePickerPreview({ context }: { context: ComponentContext }) {
     if (normalized !== null) setValueSilent(normalized)
   }, [isMultiplePicker, value, setValueSilent])
 
+  if (options.length === 0) return null
+
   return (
     <div className="form-block-preview" data-skopon-field={fieldName || undefined}>
       {label ? <div className="form-block-preview-label">{label}</div> : null}

package/src/catalog/invalidStaticOptions.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@a2ui/web_core/v0_9/basic_catalog', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@a2ui/web_core/v0_9/basic_catalog')>()
+  return { ...actual, injectBasicCatalogStyles: vi.fn() }
+})
+
+vi.mock('@a2ui/react/styles', () => ({
+  injectStyles: vi.fn(),
+  removeStyles: vi.fn(),
+}))
+
+import { createElement } from 'react'
+import { cleanup, render } from '@testing-library/react'
+import SkoponFormRenderer from '../components/SkoponFormRenderer'
+
+beforeAll(() => {
+  class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+})
+
+afterEach(() => cleanup())
+
+describe('direct A2UI static options', () => {
+  it('does not render an invalid empty question and keeps a numeric option question', () => {
+    const doc = {
+      root: 'root',
+      components: [
+        { id: 'root', component: 'Column', children: ['invalid', 'valid'] },
+        {
+          id: 'invalid',
+          component: 'SkoponSelect',
+          label: '不应显示的问题',
+          options: [{ value: null, label: '空' }, { value: {}, label: '对象' }],
+          value: { path: '/invalid' },
+        },
+        {
+          id: 'valid',
+          component: 'ChoicePicker',
+          label: '应显示的问题',
+          options: [{ value: 0, label: 123 }],
+          value: { path: '/valid' },
+        },
+      ],
+    }
+
+    const view = render(
+      createElement(SkoponFormRenderer, {
+        doc,
+        surfaceId: 'invalid-options-test',
+      }),
+    )
+
+    expect(view.queryByText('不应显示的问题')).toBeNull()
+    expect(view.queryByText('应显示的问题')).toBeTruthy()
+  })
+})

package/src/client/authStorage.ts

@@ -1,5 +1,5 @@
 export interface SkoponAuthStorageOptions {
-  /** 默认 sessionStorage（与 skopon-admin / HiAUTH 约定一致） */
+  /** 默认 sessionStorage（与 skopon-admin 会话约定一致） */
   storage?: 'sessionStorage' | 'localStorage'
   /** 默认 auth_user */
   storageKey?: string

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,4 +1,5 @@
 import { normalizeFormDefinition } from '../adapter/formSchema'
+import { hasRenderableFormOptions } from '../adapter/formOptions'
 import type { FormBlock, FormSchema } from '../types/index'
 import { isDisplayBlockType, isInputBlockType } from '../types/index'
 
@@ -58,7 +59,7 @@ function buildRenderBlocks(
     if (!matched) continue
     // hidden text 不上屏；提交值由 AskUser 从 matchedBlocks 提取
     if (isHiddenTextBlock(matched)) continue
-    renderBlocks.push(matched)
+    if (hasRenderableFormOptions(matched)) renderBlocks.push(matched)
   }
   return renderBlocks
 }
@@ -191,7 +192,7 @@ function blockValueFromDefault(block: FormBlock): unknown {
 export function extractExtraBlockValues(extraBlocks: FormBlock[]): Record<string, unknown> {
   const values: Record<string, unknown> = {}
   for (const block of extraBlocks) {
-    if (!isInputBlockType(block.type)) continue
+    if (!isInputBlockType(block.type) || !hasRenderableFormOptions(block)) continue
     const name = block.name?.trim()
     if (!name) continue
     values[name] = blockValueFromDefault(block)
@@ -202,7 +203,10 @@ export function extractExtraBlockValues(extraBlocks: FormBlock[]): Record<string
 /** payload 是否含至少一个具 name 的 input 块（可用于卡片 fallback） */
 export function payloadHasInputBlocks(payloadDef: PayloadBlocksDefinition): boolean {
   return payloadDef.blocks.some(
-    (block) => isInputBlockType(block.type) && Boolean(block.name?.trim()),
+    (block) =>
+      isInputBlockType(block.type) &&
+      Boolean(block.name?.trim()) &&
+      hasRenderableFormOptions(block),
   )
 }
 
@@ -211,6 +215,7 @@ export function getPayloadRenderableBlocks(payloadDef: PayloadBlocksDefinition):
   return payloadDef.blocks.filter((block) => {
     if (isDisplayBlockType(block.type)) return true
     if (!isInputBlockType(block.type) || !block.name?.trim()) return false
+    if (!hasRenderableFormOptions(block)) return false
     // hidden text 不上屏；提交值由 getPayloadHiddenBlockValues / dataModel 补齐
     return !isHiddenTextBlock(block)
   })
@@ -219,7 +224,12 @@ export function getPayloadRenderableBlocks(payloadDef: PayloadBlocksDefinition):
 /** payload 中所有 input 块 field name（fallback 提交用，含 hidden） */
 export function getPayloadInputFieldNames(payloadDef: PayloadBlocksDefinition): string[] {
   return payloadDef.blocks
-    .filter((block) => isInputBlockType(block.type) && block.name?.trim())
+    .filter(
+      (block) =>
+        isInputBlockType(block.type) &&
+        block.name?.trim() &&
+        hasRenderableFormOptions(block),
+    )
     .map((block) => block.name!.trim())
 }
 

package/src/submit/submit.test.ts

@@ -165,6 +165,32 @@ describe('intersectPayloadBlocksWithForm', () => {
     expect(extractExtraBlockValues(result.extraBlocks)).toEqual({ agent_hint: 'hint' })
   })
 
+  it('excludes empty static questions from rendering, field names, and extra values', () => {
+    const invalidOptions = [
+      { value: null, label: '空' },
+      { value: {}, label: '对象' },
+    ]
+    const payload = parsePayloadBlocksJson({
+      title: 'Ask',
+      blocks: [
+        {
+          id: 'invalid',
+          type: 'select',
+          name: 'invalid_choice',
+          label: '无效选择',
+          options: invalidOptions,
+        },
+        { id: 'valid', type: 'text', name: 'title', label: '标题' },
+      ],
+    })!
+
+    expect(payload.blocks[0]?.options).toEqual([])
+    expect(payloadHasInputBlocks(payload)).toBe(true)
+    expect(getPayloadRenderableBlocks(payload).map((block) => block.name)).toEqual(['title'])
+    expect(getPayloadInputFieldNames(payload)).toEqual(['title'])
+    expect(extractExtraBlockValues(payload.blocks)).toEqual({ title: '' })
+  })
+
   it('defaults resume_multiselect extra blocks to empty array', () => {
     const extraBlocks = [
       {
@@ -415,7 +441,13 @@ describe('payload fallback helpers', () => {
     title: '',
     blocks: [
       { id: 'title', type: 'heading', label: '问卷调查' },
-      { id: 'q1', type: 'radio', name: 'occupation', label: '职业', options: [] },
+      {
+        id: 'q1',
+        type: 'radio',
+        name: 'occupation',
+        label: '职业',
+        options: [{ value: 'operations', label: '运营' }],
+      },
     ],
   })!
 
@@ -433,7 +465,13 @@ describe('payload fallback helpers', () => {
       title: '',
       blocks: [
         { id: 'title', type: 'heading', label: '问卷调查' },
-        { id: 'q1', type: 'radio', name: 'occupation', label: '职业', options: [] },
+        {
+          id: 'q1',
+          type: 'radio',
+          name: 'occupation',
+          label: '职业',
+          options: [{ value: 'operations', label: '运营' }],
+        },
         {
           id: 'hint',
           type: 'text',
@@ -734,6 +772,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