@changfenhuang/dsh-genui 0.11.3 → 0.12.0

package/src/client/i18n/en.ts

@@ -288,6 +288,10 @@ export const EN = {
   // ------------------------------------------------- component chrome
   'block.copyMarkdown': 'Copy Markdown',
   'block.copyCsv': 'Copy CSV',
+  'block.table.expandDetails': 'Expand details for {label}',
+  'block.table.collapseDetails': 'Collapse details for {label}',
+  'block.table.expandGroup': 'Expand group {label}',
+  'block.table.collapseGroup': 'Collapse group {label}',
   'block.total': 'Total',
   'block.filteredRows': '{visible} / {total} rows after filtering',
   'block.filterMatch': '{shown} / {total} matched',
@@ -303,7 +307,7 @@ export const EN = {
   'block.svgPreview': 'Preview',
   'block.svgSource': 'Source',
   'block.svgError': 'SVG could not be displayed — showing the source instead',
-  'block.mermaidError': 'Invalid diagram syntax — showing the source instead',
+  'block.mermaidError': 'Diagram rendering failed — showing the source instead',
   'block.mermaidLoading': 'Rendering…',
   'block.scene3dLoading': 'Loading 3D scene…',
   'block.scene3dError': '3D rendering failed',

package/src/client/i18n/zh.ts

@@ -283,6 +283,10 @@ export const ZH: Record<keyof typeof EN, string> = {
   // ------------------------------------------------- component chrome
   'block.copyMarkdown': '复制 Markdown',
   'block.copyCsv': '复制 CSV',
+  'block.table.expandDetails': '展开 {label} 的明细',
+  'block.table.collapseDetails': '收起 {label} 的明细',
+  'block.table.expandGroup': '展开分组 {label}',
+  'block.table.collapseGroup': '收起分组 {label}',
   'block.total': '合计',
   'block.filteredRows': '筛选后 {visible} / {total} 行',
   'block.filterMatch': '匹配 {shown} / {total} 项',
@@ -298,7 +302,7 @@ export const ZH: Record<keyof typeof EN, string> = {
   'block.svgPreview': '预览',
   'block.svgSource': '源码',
   'block.svgError': 'SVG 无法显示，已降级显示源码',
-  'block.mermaidError': '图语法有误，已降级显示源码',
+  'block.mermaidError': '图表渲染失败，已显示源码',
   'block.mermaidLoading': '渲染中…',
   'block.scene3dLoading': '加载 3D 场景…',
   'block.scene3dError': '3D 渲染失败',

package/src/client/index.tsx

@@ -26,9 +26,11 @@ import type {} from '@deepseek-ai/dsh-api-session-controller/client'
 import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
 import type { SessionId } from '@deepseek-ai/dsh-session/types'
 import type { IConversation } from '@deepseek-ai/dsh-client-ui-conversation/client'
-import type { Key, ReactNode } from 'react'
+import { createElement, type Key, type ReactNode } from 'react'
+import type { ToolCallViewProps } from '@deepseek-ai/dsh-client-ui-tool/client'
 import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
 import { installDomFenceRenderer } from './dom-fence.tsx'
+import { createFileLinkAvailability, withFileLinkContext, type FileLinkCordisContext } from './file-link-context.tsx'
 import { renderGenuiFence, type GenuiFenceContext } from './fence-render.tsx'
 import { renderSvgFence } from './svg-fence.tsx'
 import { createPanelSlashSource } from './panel-command.ts'
@@ -151,11 +153,18 @@ export function apply(ctx: Context): () => void {
   const localeDispose = bridgeHostLocale(ctx)
   const registerFn = (primitives as unknown as HostFenceExt).registerFenceRenderer
   const useRegistry = typeof registerFn === 'function' && !forcedDomChannel()
+  const fileLinkAvailability = createFileLinkAvailability(ctx as unknown as FileLinkCordisContext)
   const channel = useRegistry ? 'registry' : 'dom'
   console.info(`[genui] client active; fence-channel=${channel}`)
   const disposers: Array<() => void> = useRegistry
-    ? [localeDispose, registerFn!('dsh-ui', renderGenuiFence), registerFn!('svg', renderSvgFence)]
-    : [localeDispose, installDomFenceRenderer(ctx, (sessionId, action, payload) => sendInlineGenuiAction(ctx, sessionId, action, payload))]
+    ? [localeDispose, registerFn!('dsh-ui', (raw, key, context) => withFileLinkContext(
+      ctx as unknown as FileLinkCordisContext,
+      fileLinkAvailability,
+      context?.sessionId,
+      context?.source === undefined,
+      renderGenuiFence(raw, key, context),
+    )), registerFn!('svg', renderSvgFence)]
+    : [localeDispose, installDomFenceRenderer(ctx, (sessionId, action, payload) => sendInlineGenuiAction(ctx, sessionId, action, payload), fileLinkAvailability)]
   // Idle prefetch of the lazy engine assets: the browser downloads them at
   // LOW priority whenever the page is idle, so the first mermaid/3D node in
   // a session usually hits a warm cache instead of paying the fetch on first
@@ -170,7 +179,13 @@ export function apply(ctx: Context): () => void {
   disposers.push(ctx.slots.inject('tool.call.toolview', () => ctx.slots.register({
     name: 'tool.call.toolview',
     key: 'render_ui',
-  }, GenuiToolView)))
+  }, (props: ToolCallViewProps) => withFileLinkContext(
+    ctx as unknown as FileLinkCordisContext,
+    fileLinkAvailability,
+    props.sessionId,
+    false,
+    createElement(GenuiToolView, props),
+  ))))
   // Session panel dock: a session-scoped, always-present seat above the
   // composer (TodoDock posture). Renders the session's latest render_ui
   // spec in place; absent spec = no panel.
@@ -178,7 +193,10 @@ export function apply(ctx: Context): () => void {
     name: 'conversation.input.dock',
     id: 'genui-panel',
     order: 50,
-    inject: (sessionId: SessionId): GenuiPanelInjected => panelActionSend(ctx, sessionId),
+    inject: (sessionId: SessionId): GenuiPanelInjected => ({
+      ...panelActionSend(ctx, sessionId),
+      fileLinkContext: { ctx: ctx as unknown as FileLinkCordisContext, availability: fileLinkAvailability },
+    }),
   }, GenuiPanel)))
   // /panel slash command: a deterministic, client-side entry point that
   // opens the panel dock (publishes the default spec + expand request),

package/src/client/inline.ts

@@ -2,7 +2,8 @@
 import { createElement, useLayoutEffect, useRef, type ReactNode } from 'react'
 import katex from 'katex'
 import css from './GenuiBlock.module.css'
-import { safeHref } from './genui-runtime/value-utils.ts'
+import { classifyLinkTarget } from './file-link.ts'
+import { FileLink } from './file-link-context.tsx'
 
 /** KaTeX owns this span's children; React owns the span and its lifecycle.
  * The host's ui-primitives already supplies KaTeX CSS/fonts, including embeds. */
@@ -20,9 +21,13 @@ function InlineMath({ source, display }: { source: string; display: boolean }) {
 
 // Code is literal. TeX tokens are opaque to emphasis/link parsing; the other
 // rich-text tokens recurse so **$x$** and ==\\(x\\)== work without nested DOM roots.
-// A real newline in the string is its own token rendered as <br>, so text
-// fields express a line break via JSON "\n" — no HTML parsing, and the
-// single-line (nowrap) chrome classes never contain one.
+// A real newline in the string stays a REAL newline in the DOM — not a `<br>`.
+// A `<br>` paints a visual break but contributes nothing to `textContent`, so
+// selecting and copying a multi-line cell yielded one run-on line: a pasted
+// `python - <<'PY' … PY` heredoc lost its line structure and could no longer
+// run. Real newlines survive both the paint and the copy path; containers that
+// can carry them declare `white-space: pre-line` (prose) or `pre-wrap` (code).
+// No HTML parsing happens here, only the model's `\n`.
 const INLINE = /(?<!`)`[^`\n]+`(?!`)|\\\\|\\\$|(?<![\\$])\$\$(?:\\.|[^\\])*?\$\$|\\\[(?:\\(?!\])[^]|[^\\])*?\\\]|\\\((?:\\(?!\))[^]|[^\\])*?\\\)|(?<![\\$])\$(?!\s|\$)(?:\\.|[^$\\\n])+(?<!\s)\$(?!\d|\$)|\*\*[\s\S]+?\*\*|==[\s\S]+?==|\[[^\]\n]+\]\([^)\s]+\)|\r?\n/g
 const FENCE_MARKER = /`{3,}|~{3,}/g
 
@@ -31,7 +36,7 @@ export function hasInlineMarkup(text: string): boolean {
 }
 
 /** Render safe phrasing content, usable in headings, buttons and labels too. */
-export function renderInline(text: string, allowLinks = true, depth = 0): ReactNode {
+export function renderInline(text: string, allowLinks: boolean | 'file' = true, depth = 0): ReactNode {
   if (typeof text !== 'string' || text === '' || !hasInlineMarkup(text) || depth >= 8) return text
   const segments: ReactNode[] = []
   let fenceEnd = 0
@@ -65,7 +70,10 @@ export function renderInline(text: string, allowLinks = true, depth = 0): ReactN
     const token = match[0]
     if (index > last) out.push(text.slice(last, index))
     if (token === '\n' || token === '\r\n') {
-      out.push(createElement('br', { key: key++ }))
+      // Keep the newline character itself: it is what `textContent`,
+      // `Selection.toString()` and the clipboard carry. `pre-line`/`pre-wrap`
+      // on the owning container turns it into a visible line break.
+      out.push('\n')
     } else if (token.startsWith('`')) {
       out.push(createElement('code', { key: key++, className: css.inlineCode }, token.slice(1, -1)))
     } else if (token === '\\$' || token === '\\\\') {
@@ -86,10 +94,20 @@ export function renderInline(text: string, allowLinks = true, depth = 0): ReactN
       if (parts === null) {
         out.push(token)
       } else {
-        const href = safeHref(parts[2])
-        out.push(href === undefined || !allowLinks ? renderInline(parts[1]!, false, depth + 1) : createElement('a', {
-          key: key++, className: css.inlineLink, href, target: '_blank', rel: 'noreferrer noopener',
-        }, renderInline(parts[1]!, false, depth + 1)))
+        const target = classifyLinkTarget(parts[2])
+        const label = renderInline(parts[1]!, false, depth + 1)
+        if (target.type === 'external' && allowLinks === true) {
+          out.push(createElement('a', {
+            key: key++, className: css.inlineLink, href: target.href, target: '_blank', rel: 'noreferrer noopener',
+          }, label))
+        } else if (target.type === 'file' && allowLinks !== false) {
+          out.push(createElement(FileLink, {
+            key: key++, path: target.file.path, label: parts[1]!,
+            ...(target.file.line === undefined ? {} : { line: target.file.line }),
+          }, label))
+        } else {
+          out.push(label)
+        }
       }
     }
     last = index + token.length

package/src/client/mermaid-colors.ts

@@ -0,0 +1,39 @@
+/** Resolve host CSS colors before passing them to Mermaid's limited parser. */
+export function readMermaidThemeColor(name: string, fallback: string): string {
+  if (typeof document === 'undefined' || document.body === null) return fallback
+  const value = getComputedStyle(document.body).getPropertyValue(name).trim()
+  if (value === '') return fallback
+
+  // Computed custom properties still contain calc(), unlike computed color.
+  // A real color property also resolves currentColor and inherited variables.
+  const probe = document.createElement('span')
+  probe.style.setProperty('color', value, 'important')
+  if (probe.style.color === '') return fallback
+  probe.style.setProperty('display', 'none', 'important')
+  document.body.appendChild(probe)
+  let color: string
+  try {
+    color = getComputedStyle(probe).color
+  } finally {
+    probe.remove()
+  }
+  if (/^rgba?\([\d.,\s]+\)$/i.test(color)) return color
+
+  // Modern colors such as oklch() and color-mix() may remain in those formats
+  // after style resolution. Canvas converts them to the sRGB Mermaid accepts.
+  const canvas = document.createElement('canvas')
+  canvas.width = canvas.height = 1
+  const context = canvas.getContext('2d')
+  if (context === null) return fallback
+  context.fillStyle = '#010203'
+  const initialFillStyle = context.fillStyle
+  context.fillStyle = color
+  if (context.fillStyle === initialFillStyle) return fallback
+  try {
+    context.fillRect(0, 0, 1, 1)
+    const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data
+    return `rgba(${r}, ${g}, ${b}, ${a! / 255})`
+  } catch {
+    return fallback
+  }
+}

package/src/client/mermaid-core.ts

@@ -16,6 +16,7 @@
  * @module @changfenhuang/dsh-genui/client/mermaid-core
  */
 import { assertSafeSvg, ensureFlowchartKind, repairMermaidSource } from './mermaid-safe.ts'
+import { readMermaidThemeColor } from './mermaid-colors.ts'
 
 let mermaidPromise: Promise<typeof import('mermaid')> | null = null
 
@@ -30,10 +31,13 @@ function loadMermaid(): Promise<typeof import('mermaid')> {
     // strokes and their own font, which sat next to our components as a
     // visibly foreign object. `base` + themeVariables is the supported way to
     // drive every colour (the dark/light branch is gone with it).
+    const colors = new Map<string, string>()
     const token = (name: string, fallback: string): string => {
-      if (typeof document === 'undefined') return fallback
-      const value = getComputedStyle(document.body).getPropertyValue(name).trim()
-      return value === '' ? fallback : value
+      const cached = colors.get(name)
+      if (cached !== undefined) return cached
+      const color = readMermaidThemeColor(name, fallback)
+      colors.set(name, color)
+      return color
     }
     api.initialize({
       startOnLoad: false,

package/src/client/panel.tsx

@@ -26,6 +26,7 @@
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react'
 import type {} from '@deepseek-ai/dsh-client-ui-session/client'
 import { GenuiActionContext, type GenuiActionHandler } from './action-context.ts'
+import { withFileLinkContext, type FileLinkAvailability, type FileLinkCordisContext } from './file-link-context.tsx'
 import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 import { ExportableGenuiBlock } from './artifact/ExportableGenuiBlock.tsx'
 import { ErrorBoundary } from './ErrorBoundary.tsx'
@@ -50,6 +51,7 @@ import { recordPanel, recordTemplateUse } from './achievement-store.ts'
 export interface GenuiPanelInjected {
   sessionId: string
   sendGenuiAction: GenuiActionHandler
+  fileLinkContext?: { ctx: FileLinkCordisContext; availability: FileLinkAvailability }
   /** Template center "try it": insert the template instruction into the
    *  current composer draft (standard conversation.input.for channel). */
   insertTemplate: (text: string) => void
@@ -63,7 +65,7 @@ export type GenuiPanelProps = PropsRuntime<'conversation.input.dock'> & GenuiPan
  * default so the dock never steals the message flow's scroll room; the
  * header always shows the current panel title.
  */
-export function GenuiPanel({ sessionId, sendGenuiAction, insertTemplate }: GenuiPanelProps) {
+export function GenuiPanel({ sessionId, sendGenuiAction, insertTemplate, fileLinkContext }: GenuiPanelProps) {
   const t = useT()
   const spec = useSyncExternalStore(subscribePanel, () => getPanelSpec(sessionId))
   const expandToken = useSyncExternalStore(subscribePanelExpand, () => getPanelExpandToken(sessionId))
@@ -271,10 +273,21 @@ export function GenuiPanel({ sessionId, sendGenuiAction, insertTemplate }: Genui
             />
           ) : spec !== null ? (
             <GenuiActionContext.Provider value={sendGenuiAction}>
-              <ErrorBoundary label={t('panel.boundary')}>
-                {/* content-fingerprinted: same panel spec re-published restores its state */}
-                <ExportableGenuiBlock spec={spec} stateKey={panelStateKey(sessionId, JSON.stringify(spec))} />
-              </ErrorBoundary>
+              {fileLinkContext === undefined
+                ? <ErrorBoundary label={t('panel.boundary')}>
+                  {/* content-fingerprinted: same panel spec re-published restores its state */}
+                  <ExportableGenuiBlock spec={spec} stateKey={panelStateKey(sessionId, JSON.stringify(spec))} />
+                </ErrorBoundary>
+                : withFileLinkContext(
+                  fileLinkContext.ctx,
+                  fileLinkContext.availability,
+                  sessionId,
+                  false,
+                  <ErrorBoundary label={t('panel.boundary')}>
+                    {/* content-fingerprinted: same panel spec re-published restores its state */}
+                    <ExportableGenuiBlock spec={spec} stateKey={panelStateKey(sessionId, JSON.stringify(spec))} />
+                  </ErrorBoundary>,
+                )}
             </GenuiActionContext.Provider>
           ) : null}
         </div>

package/src/client/spec.ts

@@ -471,17 +471,13 @@ export interface GenuiRadio {
   explanation?: string
 }
 
-/** Submit node: collects sibling `radio` and grouped `checkbox` answers in
- * this block. LOCAL-FIRST grading still applies to radio-only question scopes;
- * aggregation scopes can emit strings for radio groups and string arrays for
- * checkbox groups in the same `answers` object. */
+/** 提交节点收集当前 block 的答案和字段值；纯 radio 范围可在本地判卷。 */
 export interface GenuiSubmit {
   type: 'submit'
   label: string
   /**
-   * Optional action name. Local-first: when the in-scope questions can be
-   * graded entirely locally, no action is needed. Aggregation submits require
-   * an action and emit `{type:'submit', answers, total, answered}`.
+   * 可选 action 名称。纯 radio 范围满足本地判卷条件时无需 action；其他提交
+   * 通过 action 发送 `answers`、可选的 `fields`、`total` 和 `answered`。
    */
   action?: string
   /**
@@ -491,10 +487,11 @@ export interface GenuiSubmit {
    */
   resetAction?: string
   /**
-   * Optional explicit group list to wait for; when absent the submit enables
-   * once at least one grouped answer (or filled field) exists. When present
-   * it stays disabled until EVERY listed radio/checkbox group has a non-empty
-   * recorded answer (the hint shows the progress).
+   * `groups` 引用当前 block 中的 submission member key，来源为 radio.group、
+   * checkbox.group 以及 input/textarea/select/slider.id。radio 需已选择，
+   * checkbox 需至少选择一项，普通 field 需在 trim 后非空。`groups` 控制提交
+   * 所需成员与完成进度；payload 仍收集当前 block 中已填写的表单状态。
+   * 未设置时，只要存在至少一个已完成成员即可提交。
    */
   groups?: string[]
 }

package/src/client/submission-registry.ts

@@ -0,0 +1,150 @@
+import { GENUI_LIMITS } from './genui-runtime/index.ts'
+import type { GenuiSpec } from './spec.ts'
+import { walkGenuiNodes } from './walk-spec.ts'
+
+export type SubmissionMember = RadioSubmissionMember | CheckboxSubmissionMember | FieldSubmissionMember
+
+export interface RadioSubmissionMember {
+  kind: 'radio'
+  key: string
+  label: string
+  options: string[]
+  answer?: number | string
+  explanation?: string
+}
+
+export interface CheckboxSubmissionMember {
+  kind: 'checkbox'
+  key: string
+}
+
+export interface FieldSubmissionMember {
+  kind: 'field'
+  key: string
+  fieldType: 'input' | 'textarea' | 'select' | 'slider'
+  secret: boolean
+}
+
+export interface SubmissionRegistry {
+  members: ReadonlyMap<string, SubmissionMember>
+}
+
+export interface SubmitInteractionState {
+  answers: Record<string, string>
+  multiAnswers: Record<string, string[]>
+  fields: Record<string, string>
+  secretFields: ReadonlySet<string>
+}
+
+export interface ResolvedSubmitState {
+  scope: SubmissionMember[]
+  answered: number
+  total: number
+  localGradeEligible: boolean
+  hasOutOfScopePayload: boolean
+}
+
+/** 从 spec 建立成员表，并诊断 submission key 和 submit.groups。 */
+export function analyzeSubmissionRegistry(spec: GenuiSpec): { registry: SubmissionRegistry; diagnostics: string[] } {
+  const members = new Map<string, SubmissionMember>()
+  const paths = new Map<string, string>()
+  const diagnostics: string[] = []
+  const submits: Array<{ groups: string[]; path: string }> = []
+
+  walkGenuiNodes(spec, (node, path) => {
+    if (node.type === 'submit') {
+      if (node.groups !== undefined) submits.push({ groups: node.groups, path })
+      return
+    }
+    let member: SubmissionMember | undefined
+    let keyPath: string
+    switch (node.type) {
+      case 'radio':
+        if (node.group === undefined) return
+        member = { kind: 'radio', key: node.group, label: node.label ?? node.group, options: node.options.slice(0, GENUI_LIMITS.maxOptions), ...(node.answer === undefined ? {} : { answer: node.answer }), ...(node.explanation === undefined ? {} : { explanation: node.explanation }) }
+        keyPath = `${path}.group`
+        break
+      case 'checkbox':
+        if (node.group === undefined) return
+        member = { kind: 'checkbox', key: node.group }
+        keyPath = `${path}.group`
+        break
+      case 'input':
+      case 'textarea':
+      case 'select':
+      case 'slider':
+        if (node.id === undefined) return
+        member = { kind: 'field', key: node.id, fieldType: node.type, secret: node.type === 'input' && node.inputType === 'password' }
+        keyPath = `${path}.id`
+        break
+      default:
+        return
+    }
+    if (member === undefined) return
+    const existing = members.get(member.key)
+    if (existing !== undefined) {
+      if (existing.kind !== 'checkbox' || member.kind !== 'checkbox') {
+        diagnostics.push(`${keyPath} conflicts with ${paths.get(member.key)}: submission key '${member.key}' is already used`)
+      }
+      return
+    }
+    members.set(member.key, member)
+    paths.set(member.key, keyPath)
+  })
+
+  for (const { groups, path } of submits) {
+    const seen = new Set<string>()
+    groups.forEach((key, index) => {
+      const at = `${path}.groups[${index}]`
+      if (seen.has(key)) diagnostics.push(`${at}: duplicate submission member '${key}'`)
+      seen.add(key)
+      const member = members.get(key)
+      if (member === undefined) diagnostics.push(`${at}: submit.groups references unknown submission member '${key}'`)
+      else if (member.kind === 'field' && member.secret) diagnostics.push(`${at}: submit.groups cannot require secret field '${key}'`)
+    })
+  }
+  return { registry: { members }, diagnostics }
+}
+
+/** 编译供运行时读取的静态 submission 成员表。 */
+export function compileSubmissionRegistry(spec: GenuiSpec): SubmissionRegistry {
+  return analyzeSubmissionRegistry(spec).registry
+}
+
+/** 根据当前交互状态判断一个 submission member 是否完成。 */
+export function isSubmissionMemberAnswered(member: SubmissionMember, state: SubmitInteractionState): boolean {
+  switch (member.kind) {
+    case 'radio': return state.answers[member.key] !== undefined
+    case 'checkbox': return (state.multiAnswers[member.key]?.length ?? 0) > 0
+    case 'field': {
+      if (member.secret) return false
+      const value = state.fields[member.key]
+      return value !== undefined && value.trim() !== ''
+    }
+  }
+}
+
+/** 计算 submit 进度和纯本地判卷条件。 */
+export function resolveSubmitState({ registry, groups, state }: {
+  registry: SubmissionRegistry
+  groups?: string[]
+  state: SubmitInteractionState
+}): ResolvedSubmitState {
+  const hasUnknownMember = groups?.some(key => !registry.members.has(key)) ?? false
+  const scope = groups === undefined
+    ? [...registry.members.values()].filter(member => isSubmissionMemberAnswered(member, state))
+    : groups.flatMap(key => {
+      const member = registry.members.get(key)
+      return member === undefined ? [] : [member]
+    })
+  const answered = scope.filter(member => isSubmissionMemberAnswered(member, state)).length
+  const total = groups?.length ?? scope.length
+  const scopeKeys = new Set(scope.map(member => member.key))
+  const hasOutOfScopePayload = Object.keys(state.answers).some(key => !scopeKeys.has(key))
+    || Object.keys(state.multiAnswers).some(key => !scopeKeys.has(key))
+    || Object.entries(state.fields).some(([key, value]) => value.trim() !== '' && !state.secretFields.has(key) && !scopeKeys.has(key))
+  const localGradeEligible = !hasUnknownMember && scope.length > 0
+    && scope.every(member => member.kind === 'radio')
+    && scope.some(member => member.kind === 'radio' && member.answer !== undefined)
+  return { scope, answered, total, localGradeEligible, hasOutOfScopePayload }
+}

package/src/client/table-details.ts

@@ -0,0 +1,151 @@
+import { GENUI_LIMITS } from './genui-runtime/index.ts'
+
+/** 保存 repair 所需的原始 table 字段。 */
+export interface TableDetailSource {
+  columns?: unknown
+  rows?: unknown
+  data?: unknown
+  types?: unknown
+}
+
+/** 保存 repair 后的 table 列和行。 */
+export interface PreparedTableRows {
+  columns: string[]
+  rows: Array<Array<string | number>>
+}
+
+/** 使用 table repair 相同的转换规则处理列和行。 */
+export function prepareTableRows(table: TableDetailSource): PreparedTableRows | null {
+  const declaredColumns = table.columns
+  const columnsSpecified = Array.isArray(declaredColumns) && declaredColumns.length > 0
+  const rawColumns = columnsSpecified && Array.isArray(declaredColumns)
+    && typeof declaredColumns[0] === 'object' && declaredColumns[0] !== null
+    ? declaredColumns.map(columnHeaderText)
+    : declaredColumns
+  let columns = repairColumnValues(rawColumns)
+  let rawRows = table.rows !== undefined ? table.rows : table.data
+
+  if (Array.isArray(rawRows) && rawRows.length > 0
+    && typeof rawRows[0] === 'object' && rawRows[0] !== null && !Array.isArray(rawRows[0])) {
+    const keys = Array.isArray(table.columns) && table.columns.length > 0
+      && typeof table.columns[0] === 'object' && table.columns[0] !== null
+      ? table.columns.map(columnKeyOf).filter((key): key is string => key !== undefined)
+      : Object.keys(rawRows[0] as Record<string, unknown>)
+    rawRows = rawRows.map(row => keys.map(key => cellText((row as Record<string, unknown>)[key])))
+  }
+
+  let derived: PreparedTableRows | null = null
+  if (!columnsSpecified && Array.isArray(rawRows) && rawRows.length > 0 && Array.isArray(rawRows[0])) {
+    const grid = repairRows(rawRows)
+    const candidate = grid.length === 0 ? null : deriveTableColumns(grid)
+    if (candidate !== null && repairRows(candidate.rows).length === candidate.rows.length) {
+      derived = candidate
+      columns = candidate.columns.map(column => column.slice(0, 128))
+    }
+  }
+
+  if (columns.length === 0 && !Array.isArray(table.columns)) return null
+  const rows = repairRows(derived === null ? rawRows : derived.rows)
+  if (!Array.isArray(rawRows)) return null
+  return { columns: columns.slice(0, GENUI_LIMITS.maxTableCols), rows }
+}
+
+/** 返回 repair 后可显示详情的 table 行。 */
+export function tableRowsForDetails<Row = unknown>(table: TableDetailSource): Row[] {
+  return (prepareTableRows(table)?.rows ?? []) as Row[]
+}
+
+/** 按照 table renderer 的规则识别分组标题行。 */
+export function isTableGroupHeaderRow(row: unknown, types: unknown): boolean {
+  if (!Array.isArray(row) || !Array.isArray(types) || types[0] !== 'group') return false
+  return String(row[0] ?? '').trim() !== ''
+    && row.slice(1).every(cell => String(cell ?? '').trim() === '')
+}
+
+/** 判断详情索引对应的行是否可展开并显示。 */
+export function isTableDetailReachable(table: TableDetailSource, rowIndex: number): boolean {
+  const rows = tableRowsForDetails(table)
+  return rowIndex >= 0
+    && rowIndex < rows.length
+    && !isTableGroupHeaderRow(rows[rowIndex], table.types)
+}
+
+/** 按照 guard 接受的 object alias 规则修复 table 列。 */
+function repairColumnValues(value: unknown): string[] {
+  if (!Array.isArray(value)) return []
+  const columns: string[] = []
+  for (const item of value) {
+    if (columns.length >= GENUI_LIMITS.maxTableCols) break
+    if (typeof item === 'string') columns.push(item.slice(0, 128))
+    else if (item !== null && typeof item === 'object') {
+      const column = item as Record<string, unknown>
+      const label = typeof column.label === 'string' ? column.label
+        : typeof column.value === 'string' ? column.value
+          : typeof column.title === 'string' ? column.title
+            : JSON.stringify(item)
+      columns.push(label.slice(0, 128))
+    }
+  }
+  return columns
+}
+
+/** 按照 table repair 的单元格规则裁剪并清理行。 */
+function repairRows(value: unknown): Array<Array<string | number>> {
+  if (!Array.isArray(value)) return []
+  const rows: Array<Array<string | number>> = []
+  for (const row of value) {
+    if (rows.length >= GENUI_LIMITS.maxTableRows) break
+    if (!Array.isArray(row)) continue
+    const cells: Array<string | number> = []
+    for (const cell of row) {
+      if (cells.length >= GENUI_LIMITS.maxTableCols) break
+      if (typeof cell === 'string') cells.push(cell.slice(0, 256))
+      else if (typeof cell === 'number' && Number.isFinite(cell)) cells.push(cell)
+    }
+    if (cells.length > 0) rows.push(cells)
+  }
+  return rows
+}
+
+/** 从有效的首行表头生成 table 列。 */
+function deriveTableColumns(rows: Array<Array<string | number>>): PreparedTableRows | null {
+  const header = rows[0]
+  if (header === undefined || header.length === 0) return null
+  const body = rows.slice(1)
+  if (body.length === 0) {
+    const columns = header.map(cell => String(cell).trim())
+    return columns.every(column => column !== '') ? { columns, rows: [] } : null
+  }
+  if (body.every(row => row.length === header.length)) {
+    return { columns: header.map(cell => String(cell).trim()), rows: body }
+  }
+  return { columns: Array.from({ length: header.length }, (_unused, index) => `列${index + 1}`), rows }
+}
+
+/** 读取 object row 映射到列时使用的 key。 */
+function columnKeyOf(value: unknown): string | undefined {
+  if (value === null || typeof value !== 'object' || Array.isArray(value)) return undefined
+  const column = value as Record<string, unknown>
+  for (const key of ['key', 'dataIndex', 'title', 'label'] as const) {
+    if (typeof column[key] === 'string' && column[key] !== '') return column[key]
+  }
+  return undefined
+}
+
+/** 将 object row 中的值转换为 table 单元格，并保留列位置。 */
+function cellText(value: unknown): string | number {
+  if (typeof value === 'string') return value
+  if (typeof value === 'number' && Number.isFinite(value)) return value
+  if (value === null || value === undefined) return ''
+  return JSON.stringify(value)
+}
+
+/** 读取 object column 显示的标题。 */
+function columnHeaderText(value: unknown): string {
+  if (value === null || typeof value !== 'object' || Array.isArray(value)) return String(value)
+  const column = value as Record<string, unknown>
+  for (const key of ['title', 'label', 'key', 'dataIndex'] as const) {
+    if (typeof column[key] === 'string' && column[key] !== '') return column[key]
+  }
+  return JSON.stringify(value)
+}