@veltra/sheet 2.1.1 → 2.3.0

package/src/components/report/binding-badge.ts

@@ -0,0 +1,92 @@
+import type { CellAddress } from '@veltra/sheet-core'
+import {
+  CustomLayout,
+  type ResolveCellRenderer,
+  type ResolveCellStyleHook
+} from '@veltra/sheet-core'
+
+import { formatBindingPlaceholderParts, inferReportPreset } from '../../report/binding'
+import type { ReportBinding, ReportPreset } from '../../report/types'
+
+/**
+ * 绑定徽章预设配色（设计态富渲染徽章；canvas 绘制需具体色值，无法消费 CSS 变量）。
+ * `cell` 为整格极浅底色，`fg` 为强调色（聚合标签徽章底色）。
+ */
+export interface ReportBadgeColors {
+  cell: string
+  fg: string
+}
+
+export const REPORT_PRESET_BADGE_COLORS: Record<ReportPreset, ReportBadgeColors> = {
+  groupHeader: { cell: '#eef4ff', fg: '#2f54eb' },
+  detail: { cell: '#effaf3', fg: '#1f9254' },
+  subtotal: { cell: '#fff7e6', fg: '#d46b08' },
+  grandTotal: { cell: '#fff1f0', fg: '#cf1322' },
+  cross: { cell: '#f8f5ff', fg: '#5f3dc4' }
+}
+
+const CUSTOM_PRESET_BADGE_COLOR: ReportBadgeColors = { cell: '#f7f8fa', fg: '#495057' }
+
+/** 徽章字段标签文字色（中性深灰，与强调色形成层次） */
+const BADGE_LABEL_COLOR = '#343a40'
+
+/** @deprecated 05 将更名 */
+export const REPORT_ROLE_BADGE_COLORS = REPORT_PRESET_BADGE_COLORS
+
+function resolveBadgeColor(binding: ReportBinding): ReportBadgeColors {
+  const preset = inferReportPreset(binding)
+  return preset ? REPORT_PRESET_BADGE_COLORS[preset] : CUSTOM_PRESET_BADGE_COLOR
+}
+
+/** 绑定格角色底色（走 resolveCellStyle，保留 VTable 默认边框绘制） */
+export function createBindingBadgeStyleResolver(
+  getBindingAt: (addr: CellAddress) => ReportBinding | undefined
+): ResolveCellStyleHook {
+  return (addr, base) => {
+    const binding = getBindingAt(addr)
+    if (!binding) return base
+
+    const { cell } = resolveBadgeColor(binding)
+    return { ...base, fill: { color: cell } }
+  }
+}
+
+/**
+ * 绑定格富渲染徽章（ADR-0004 `resolveCellRenderer` 首个消费者）：
+ * 绑定单元格渲染为左对齐徽章（强调色聚合标签 + 中性色字段标签），
+ * 未绑定格返回 `undefined` 回落默认渲染。
+ */
+export function createBindingBadgeRenderer(
+  getBindingAt: (addr: CellAddress) => ReportBinding | undefined,
+  resolveLabel?: (datasetId: string, fieldName: string) => string
+): ResolveCellRenderer {
+  return (addr) => {
+    const binding = getBindingAt(addr)
+    if (!binding) return undefined
+
+    const { fg } = resolveBadgeColor(binding)
+    const { tag, label } = formatBindingPlaceholderParts(binding, resolveLabel)
+
+    const rootContainer = new CustomLayout.Container({
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'flex-start',
+      alignItems: 'center'
+    })
+    // VTable 布局层 Tag 组件（vrender-components）与其 INode 声明存在结构性类型偏差，
+    // 运行时完全兼容（VTable 官方 customLayout 徽章用法即如此），此处仅收敛类型
+    const tagEl = new CustomLayout.Tag({
+      text: tag,
+      textStyle: { fontSize: 10, fontWeight: 600, fill: '#ffffff' },
+      panel: { visible: true, fill: fg, cornerRadius: 3 },
+      padding: [1, 4, 1, 4],
+      marginLeft: 6,
+      marginRight: 5
+    })
+    rootContainer.add(tagEl as unknown as Parameters<typeof rootContainer.add>[0])
+    rootContainer.add(
+      new CustomLayout.Text({ text: label, fontSize: 11, fontWeight: 500, fill: BADGE_LABEL_COLOR })
+    )
+    return { rootContainer, renderDefault: false }
+  }
+}

package/src/components/report/designer/cell-coords.ts

@@ -0,0 +1,94 @@
+import type { CellAddress, SheetGrid } from '@veltra/sheet-core'
+
+export interface CellOverlayRect {
+  left: number
+  top: number
+  right: number
+  bottom: number
+  width: number
+  height: number
+  centerX: number
+  centerY: number
+}
+
+export interface GridOverlayLayout {
+  offsetX: number
+  offsetY: number
+  viewW: number
+  viewH: number
+}
+
+/** VTable 坐标 = 模型地址 + 行号列/列头偏移（通常 +1） */
+export const TABLE_ADDR_OFFSET = 1
+
+export function resolveGridOverlayLayout(
+  host: HTMLElement
+): { gridEl: HTMLElement; layout: GridOverlayLayout } | null {
+  const gridEl = host.querySelector('.u-sheet__grid-instance') as HTMLElement | null
+  if (!gridEl) return null
+
+  const hostBox = host.getBoundingClientRect()
+  const gridBox = gridEl.getBoundingClientRect()
+
+  return {
+    gridEl,
+    layout: {
+      offsetX: gridBox.left - hostBox.left,
+      offsetY: gridBox.top - hostBox.top,
+      viewW: gridEl.clientWidth,
+      viewH: gridEl.clientHeight
+    }
+  }
+}
+
+/** 将屏幕坐标换算为网格落点地址（用于字段拖拽 bind） */
+export function resolveGridDropAddress(
+  grid: SheetGrid,
+  gridEl: HTMLElement,
+  clientX: number,
+  clientY: number
+): CellAddress | null {
+  const rect = gridEl.getBoundingClientRect()
+  return grid.hitTestSheetAddr(clientX - rect.left, clientY - rect.top) ?? null
+}
+
+export function getCellOverlayRect(
+  grid: SheetGrid,
+  cell: CellAddress,
+  layout: GridOverlayLayout
+): CellOverlayRect | null {
+  const table = grid.getTable()
+  let cellRect: { left: number; top: number; right: number; bottom: number }
+  try {
+    cellRect = table.getCellRelativeRect(
+      cell.col + TABLE_ADDR_OFFSET,
+      cell.row + TABLE_ADDR_OFFSET
+    ) as { left: number; top: number; right: number; bottom: number }
+  } catch {
+    return null
+  }
+
+  const left = layout.offsetX + cellRect.left
+  const top = layout.offsetY + cellRect.top
+  const right = layout.offsetX + cellRect.right
+  const bottom = layout.offsetY + cellRect.bottom
+
+  const outOfView =
+    cellRect.bottom < 0 ||
+    cellRect.right < 0 ||
+    cellRect.top > layout.viewH ||
+    cellRect.left > layout.viewW
+
+  if (outOfView) return null
+
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    width: right - left,
+    height: bottom - top,
+    centerX: (left + right) / 2,
+    centerY: (top + bottom) / 2
+  }
+}

package/src/components/report/designer/col-widths.ts

@@ -0,0 +1,56 @@
+import type { Sheet } from '@veltra/sheet-core'
+
+import type { ReportColWidthEntry } from '../../../report/export-xlsx'
+
+/** VTable 列宽读写所需的最小表接口（含行号列探测，隐藏行头时偏移为 0） */
+type VTableColWidthApi = {
+  setColWidth: (col: number, width: number) => void
+  getColWidth: (col: number) => number
+  readonly colCount: number
+  readonly columnHeaderLevelCount: number
+  isSeriesNumber: (col: number, row: number) => boolean
+}
+
+/** 列宽读写目标：Sheet 模型或 SheetGrid.getTable() 的最小接口（headless 测试可桩） */
+export type ColWidthTarget = { getTable: () => VTableColWidthApi }
+
+/** 行号列数（隐藏行头时为 0；与 GridCoords 探测一致） */
+function seriesNumberColCount(table: VTableColWidthApi): number {
+  const rowOffset = table.columnHeaderLevelCount
+  let col = 0
+  while (col < table.colCount && table.isSeriesNumber(col, rowOffset)) col++
+  return col
+}
+
+/** 将模型列宽写入 VTable（模型 → grid 同步辅助） */
+export function applyGridColWidths(
+  grid: ColWidthTarget | undefined | null,
+  widths: ReadonlyArray<ReportColWidthEntry>
+): void {
+  if (!grid) return
+  const table = grid.getTable()
+  const colOffset = seriesNumberColCount(table)
+  for (const [sheetCol, width] of widths) {
+    table.setColWidth(sheetCol + colOffset, width)
+  }
+}
+
+/** 把列宽条目写入 Sheet 模型（不进 undo，对称 setColWidth） */
+export function applySheetColWidths(
+  sheet: Sheet | undefined | null,
+  widths: ReadonlyArray<ReportColWidthEntry>
+): void {
+  if (!sheet) return
+  for (const [col, width] of widths) sheet.setColWidth(col, width)
+}
+
+/** 从当前网格读取指定模型列宽度；网格未就绪时返回 null */
+export function readGridColWidths(
+  grid: ColWidthTarget | undefined | null,
+  cols: ReadonlyArray<number>
+): Array<[number, number]> | null {
+  if (!grid) return null
+  const table = grid.getTable()
+  const colOffset = seriesNumberColCount(table)
+  return cols.map((sheetCol) => [sheetCol, table.getColWidth(sheetCol + colOffset)])
+}

package/src/components/report/designer/conditional-rules/helpers.ts

@@ -0,0 +1,189 @@
+import type { ConditionalOperator, ConditionalRule, DatasetField } from '../../../../report/types'
+
+export interface DraftRuleItem {
+  id: string
+  rule: ConditionalRule
+}
+
+export const OPERATOR_LABELS: Record<ConditionalOperator, string> = {
+  gt: '大于',
+  gte: '大于等于',
+  lt: '小于',
+  lte: '小于等于',
+  eq: '等于',
+  between: '介于',
+  contains: '包含'
+}
+
+export const RULE_SCOPE_OPTIONS = [
+  { value: 'cell' as const, label: '本格' },
+  { value: 'row' as const, label: '整行' }
+]
+
+/** 求值字段下拉的「本格字段」哨兵值（USelect 无法匹配 undefined） */
+export const SELF_FIELD_VALUE = ''
+
+/** 求值字段下拉：缺省项表示本格绑定字段 */
+export function ruleEvalFieldOptions(
+  bindingField: string,
+  datasetFields: readonly DatasetField[]
+): Array<{ value: string; label: string }> {
+  return [
+    { value: SELF_FIELD_VALUE, label: '本格字段' },
+    ...datasetFields
+      .filter((field) => field.name !== bindingField)
+      .map((field) => ({ value: field.name, label: field.label || field.name }))
+  ]
+}
+
+/** 按规则所选求值字段解析字段类型（运算符映射用） */
+export function resolveEvalFieldType(
+  rule: ConditionalRule,
+  bindingField: string,
+  datasetFields: readonly DatasetField[]
+): DatasetField['type'] {
+  const fieldName = rule.field ?? bindingField
+  return datasetFields.find((field) => field.name === fieldName)?.type ?? 'number'
+}
+
+const NUMERIC_OPERATORS: ConditionalOperator[] = ['gt', 'gte', 'lt', 'lte', 'eq', 'between']
+const STRING_OPERATORS: ConditionalOperator[] = ['eq', 'contains']
+
+let draftIdSeq = 0
+
+function nextDraftId(): string {
+  draftIdSeq += 1
+  return `rule-${draftIdSeq}`
+}
+
+/** 按字段类型返回可用运算符 */
+export function operatorsForFieldType(
+  fieldType: DatasetField['type']
+): Array<{ value: ConditionalOperator; label: string }> {
+  const ops = fieldType === 'string' ? STRING_OPERATORS : NUMERIC_OPERATORS
+  return ops.map((value) => ({ value, label: OPERATOR_LABELS[value] }))
+}
+
+export function isNumericFieldType(fieldType: DatasetField['type']): boolean {
+  return fieldType === 'number' || fieldType === 'date'
+}
+
+export function defaultRuleValue(
+  operator: ConditionalOperator,
+  fieldType: DatasetField['type']
+): unknown {
+  if (operator === 'between') {
+    return isNumericFieldType(fieldType) ? [0, 100] : ['', '']
+  }
+  if (operator === 'contains' || (operator === 'eq' && fieldType === 'string')) {
+    return ''
+  }
+  return 0
+}
+
+export function defaultRuleStyle(): ConditionalRule['style'] {
+  return { fill: { color: '#FEF3C7' }, font: { color: '#B45309' } }
+}
+
+export function createDraftItem(
+  rule?: ConditionalRule,
+  fieldType: DatasetField['type'] = 'number',
+  _bindingField?: string
+): DraftRuleItem {
+  if (rule) {
+    return { id: nextDraftId(), rule: cloneRule(rule) }
+  }
+  const operator = operatorsForFieldType(fieldType)[0]?.value ?? 'eq'
+  return {
+    id: nextDraftId(),
+    rule: { operator, value: defaultRuleValue(operator, fieldType), style: defaultRuleStyle() }
+  }
+}
+
+export function initDraftFromRules(
+  rules: readonly ConditionalRule[],
+  fieldType: DatasetField['type'],
+  bindingField?: string
+): DraftRuleItem[] {
+  if (rules.length === 0) return []
+  return rules.map((rule) => createDraftItem(rule, fieldType, bindingField))
+}
+
+export function cloneRule(rule: ConditionalRule): ConditionalRule {
+  return {
+    operator: rule.operator,
+    value: cloneRuleValue(rule.value),
+    field: rule.field,
+    scope: rule.scope,
+    style: {
+      ...rule.style,
+      fill: rule.style.fill ? { ...rule.style.fill } : undefined,
+      font: rule.style.font ? { ...rule.style.font } : undefined
+    }
+  }
+}
+
+function cloneRuleValue(value: unknown): unknown {
+  if (Array.isArray(value)) return [...value]
+  return value
+}
+
+export function cloneRulesFromDraft(items: readonly DraftRuleItem[]): ConditionalRule[] {
+  return items.map((item) => cloneRule(item.rule))
+}
+
+/** 运算符切换时重置比较值为合理缺省 */
+export function coerceValueForOperator(
+  operator: ConditionalOperator,
+  fieldType: DatasetField['type'],
+  current: unknown
+): unknown {
+  if (operator === 'between') {
+    if (Array.isArray(current) && current.length === 2) return [...current]
+    return defaultRuleValue('between', fieldType)
+  }
+  if (operator === 'contains') {
+    return typeof current === 'string' ? current : ''
+  }
+  if (isNumericFieldType(fieldType)) {
+    const n = typeof current === 'number' && Number.isFinite(current) ? current : Number(current)
+    return Number.isFinite(n) ? n : 0
+  }
+  return typeof current === 'string' ? current : ''
+}
+
+function toDisplayString(value: unknown): string {
+  if (typeof value === 'string') return value
+  if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
+    return String(value)
+  }
+  return ''
+}
+
+export function readBetweenValue(
+  value: unknown,
+  index: 0 | 1,
+  fieldType: DatasetField['type']
+): number | string {
+  const pair =
+    Array.isArray(value) && value.length === 2 ? value : defaultRuleValue('between', fieldType)
+  const raw = (pair as [unknown, unknown])[index]
+  if (isNumericFieldType(fieldType)) {
+    const n = typeof raw === 'number' ? raw : Number(raw)
+    return Number.isFinite(n) ? n : 0
+  }
+  return typeof raw === 'string' ? raw : toDisplayString(raw)
+}
+
+export function writeBetweenValue(
+  value: unknown,
+  index: 0 | 1,
+  next: number | string,
+  fieldType: DatasetField['type']
+): [unknown, unknown] {
+  const current = readBetweenValue(value, 0, fieldType)
+  const currentEnd = readBetweenValue(value, 1, fieldType)
+  const pair: [unknown, unknown] = [current, currentEnd]
+  pair[index] = next
+  return pair
+}

package/src/components/report/designer/drop-highlight-overlay.vue

@@ -0,0 +1,74 @@
+<template>
+  <div v-if="cell && visible" :class="cls.b" :style="highlightStyle" aria-hidden="true" />
+  <div v-else-if="showFallback" :class="cls.e('fallback')" role="status">
+    松开将绑定到当前选区 {{ fallbackLabel }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { CellAddress, SheetGrid } from '@veltra/sheet-core'
+import { bem } from '@veltra/utils'
+import { computed, ref, toRef } from 'vue'
+
+import { readCellOverlayRect, useGridOverlaySync } from './use-grid-overlay'
+
+defineOptions({ name: 'UReportDropHighlightOverlay' })
+
+const props = defineProps<{
+  cell: CellAddress | null
+  hostEl: HTMLElement | null
+  getGrid: () => SheetGrid | undefined
+  /** 字段拖拽进行中（dragover 时为 true） */
+  dragging: boolean
+  /** hit-test 落空时提示回退的选区标签（如 A1） */
+  fallbackLabel: string
+}>()
+
+const cls = bem('report-drop-highlight')
+
+const hostEl = toRef(props, 'hostEl')
+
+const rectLeft = ref(0)
+const rectTop = ref(0)
+const rectWidth = ref(0)
+const rectHeight = ref(0)
+const inView = ref(false)
+
+const visible = computed(() => !!props.cell && inView.value)
+const showFallback = computed(() => props.dragging && !props.cell)
+
+const highlightStyle = computed(() => ({
+  left: `${rectLeft.value}px`,
+  top: `${rectTop.value}px`,
+  width: `${rectWidth.value}px`,
+  height: `${rectHeight.value}px`
+}))
+
+function updateHighlight(): void {
+  const cell = props.cell
+  const host = props.hostEl
+  if (!cell || !host) {
+    inView.value = false
+    return
+  }
+
+  const rect = readCellOverlayRect(cell, host, props.getGrid)
+  if (!rect) {
+    inView.value = false
+    return
+  }
+
+  inView.value = true
+  rectLeft.value = Math.round(rect.left)
+  rectTop.value = Math.round(rect.top)
+  rectWidth.value = Math.round(rect.width)
+  rectHeight.value = Math.round(rect.height)
+}
+
+useGridOverlaySync({
+  hostEl,
+  getGrid: () => props.getGrid(),
+  watchSources: () => [props.cell?.row, props.cell?.col, props.hostEl, props.dragging] as const,
+  update: updateHighlight
+})
+</script>