@veltra/sheet 2.4.0 → 2.5.1

package/src/components/report/designer/rule-row.vue

@@ -1,252 +0,0 @@
-<template>
-  <div :class="cls.b">
-    <span :class="cls.e('handle')" title="拖拽排序">⋮⋮</span>
-
-    <div :class="cls.e('main')">
-      <div :class="cls.e('when')">
-        <span :class="cls.e('lead')">当</span>
-        <u-select
-          size="small"
-          :class="cls.e('field-select')"
-          :model-value="rule.field ?? SELF_FIELD_VALUE"
-          :options="fieldOptions"
-          @update:model-value="onEvalField"
-        />
-        <u-select
-          size="small"
-          :class="cls.e('operator')"
-          :model-value="rule.operator"
-          :options="operatorOptions"
-          @update:model-value="onOperator"
-        />
-        <div :class="cls.e('value')">
-          <template v-if="rule.operator === 'between'">
-            <u-number-input
-              v-if="numericField"
-              size="small"
-              :class="cls.e('between-input')"
-              :model-value="betweenStart as number"
-              @update:model-value="(v) => patchBetween(0, v ?? 0)"
-            />
-            <u-input
-              v-else
-              size="small"
-              :class="cls.e('between-input')"
-              :model-value="String(betweenStart)"
-              @update:model-value="(v) => patchBetween(0, String(v ?? ''))"
-            />
-            <span :class="cls.e('between-sep')">至</span>
-            <u-number-input
-              v-if="numericField"
-              size="small"
-              :class="cls.e('between-input')"
-              :model-value="betweenEnd as number"
-              @update:model-value="(v) => patchBetween(1, v ?? 0)"
-            />
-            <u-input
-              v-else
-              size="small"
-              :class="cls.e('between-input')"
-              :model-value="String(betweenEnd)"
-              @update:model-value="(v) => patchBetween(1, String(v ?? ''))"
-            />
-          </template>
-
-          <u-input
-            v-else-if="rule.operator === 'contains' || (!numericField && rule.operator === 'eq')"
-            size="small"
-            :class="cls.e('scalar-input')"
-            :model-value="String(rule.value ?? '')"
-            placeholder="比较值"
-            @update:model-value="(v) => patchValue(String(v ?? ''))"
-          />
-
-          <u-number-input
-            v-else
-            size="small"
-            :class="cls.e('scalar-input')"
-            :model-value="scalarNumber"
-            @update:model-value="(v) => patchValue(v ?? 0)"
-          />
-        </div>
-        <span :class="cls.e('lead')">时</span>
-      </div>
-
-      <div :class="cls.e('then')">
-        <span :class="cls.e('lead')">样式</span>
-        <span title="背景">
-          <u-palette
-            size="small"
-            :model-value="rule.style.fill?.color ?? ''"
-            @update:model-value="patchFillColor"
-          />
-        </span>
-        <span title="文字">
-          <u-palette
-            size="small"
-            :model-value="rule.style.font?.color ?? ''"
-            @update:model-value="patchFontColor"
-          />
-        </span>
-        <u-button-group>
-          <u-button
-            size="small"
-            :class="cls.e('toggle')"
-            :type="rule.style.font?.bold ? 'primary' : undefined"
-            plain
-            title="加粗"
-            @click="toggleBold"
-          >
-            B
-          </u-button>
-          <u-button
-            size="small"
-            :class="cls.e('toggle')"
-            :type="rule.style.font?.italic ? 'primary' : undefined"
-            plain
-            title="斜体"
-            @click="toggleItalic"
-          >
-            I
-          </u-button>
-        </u-button-group>
-        <u-report-rule-preview :class="cls.e('preview')" :rule="rule" />
-
-        <span :class="cls.e('lead')">应用到</span>
-        <u-button-group>
-          <u-button
-            v-for="option in RULE_SCOPE_OPTIONS"
-            :key="option.value"
-            size="small"
-            plain
-            :type="(rule.scope ?? 'cell') === option.value ? 'primary' : undefined"
-            :title="
-              option.value === 'row' ? '染满物理输出行（交叉表会盖住同行所有列）' : '只改本格'
-            "
-            @click="onScope(option.value)"
-          >
-            {{ option.label }}
-          </u-button>
-        </u-button-group>
-      </div>
-    </div>
-
-    <u-button size="small" text type="danger" :class="cls.e('remove')" @click="emit('remove')">
-      删除
-    </u-button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { UButton, UButtonGroup, UInput, UNumberInput, UPalette, USelect } from '@veltra/desktop'
-import { bem } from '@veltra/utils'
-import { computed } from 'vue'
-
-import type { ConditionalOperator, ConditionalRule, DatasetField } from '../../../report/types'
-import {
-  coerceValueForOperator,
-  isNumericFieldType,
-  operatorsForFieldType,
-  readBetweenValue,
-  resolveEvalFieldType,
-  RULE_SCOPE_OPTIONS,
-  ruleEvalFieldOptions,
-  SELF_FIELD_VALUE,
-  writeBetweenValue
-} from './conditional-rules/helpers'
-import UReportRulePreview from './rule-preview.vue'
-
-defineOptions({ name: 'UReportRuleRow' })
-
-const props = defineProps<{
-  rule: ConditionalRule
-  bindingField: string
-  datasetFields: readonly DatasetField[]
-}>()
-
-const emit = defineEmits<{ 'update:rule': [rule: ConditionalRule]; remove: [] }>()
-
-const cls = bem('report-rule-row')
-
-const evalFieldType = computed(() =>
-  resolveEvalFieldType(props.rule, props.bindingField, props.datasetFields)
-)
-const operatorOptions = computed(() => operatorsForFieldType(evalFieldType.value))
-const numericField = computed(() => isNumericFieldType(evalFieldType.value))
-const fieldOptions = computed(() => ruleEvalFieldOptions(props.bindingField, props.datasetFields))
-
-const betweenStart = computed(() => readBetweenValue(props.rule.value, 0, evalFieldType.value))
-const betweenEnd = computed(() => readBetweenValue(props.rule.value, 1, evalFieldType.value))
-
-const scalarNumber = computed((): number => {
-  const raw = props.rule.value
-  if (typeof raw === 'number' && Number.isFinite(raw)) return raw
-  const parsed = Number(raw)
-  return Number.isFinite(parsed) ? parsed : 0
-})
-
-function patchRule(patch: Partial<ConditionalRule>): void {
-  emit('update:rule', { ...props.rule, ...patch })
-}
-
-function onEvalField(field: string | undefined): void {
-  const next: Partial<ConditionalRule> = {}
-  if (!field) {
-    next.field = undefined
-  } else {
-    next.field = field
-  }
-  const nextType = resolveEvalFieldType(
-    { ...props.rule, ...next },
-    props.bindingField,
-    props.datasetFields
-  )
-  const operator = operatorsForFieldType(nextType)[0]?.value ?? props.rule.operator
-  next.operator = operator
-  next.value = coerceValueForOperator(operator, nextType, props.rule.value)
-  patchRule(next)
-}
-
-function onScope(scope: 'cell' | 'row'): void {
-  patchRule({ scope: scope === 'cell' ? undefined : scope })
-}
-
-function onOperator(operator: ConditionalOperator): void {
-  patchRule({
-    operator,
-    value: coerceValueForOperator(operator, evalFieldType.value, props.rule.value)
-  })
-}
-
-function patchValue(value: unknown): void {
-  patchRule({ value })
-}
-
-function patchBetween(index: 0 | 1, next: number | string): void {
-  patchRule({ value: writeBetweenValue(props.rule.value, index, next, evalFieldType.value) })
-}
-
-function patchFillColor(color: string): void {
-  patchRule({ style: { ...props.rule.style, fill: color ? { color } : undefined } })
-}
-
-function patchFontColor(color: string): void {
-  patchRule({
-    style: { ...props.rule.style, font: { ...props.rule.style.font, color: color || undefined } }
-  })
-}
-
-function toggleBold(): void {
-  const bold = !props.rule.style.font?.bold
-  patchRule({
-    style: { ...props.rule.style, font: { ...props.rule.style.font, bold: bold || undefined } }
-  })
-}
-
-function toggleItalic(): void {
-  const italic = !props.rule.style.font?.italic
-  patchRule({
-    style: { ...props.rule.style, font: { ...props.rule.style.font, italic: italic || undefined } }
-  })
-}
-</script>

package/src/components/report/designer/rules-dialog.vue

@@ -1,110 +0,0 @@
-<template>
-  <u-dialog
-    v-model="visible"
-    title="条件样式"
-    style="width: min(600px, 92vw); max-height: 85vh"
-    @close="onClose"
-  >
-    <div :class="cls.b">
-      <p :class="cls.e('hint')">规则按顺序叠加。整行高亮适合明细表，交叉表会染满整行。</p>
-
-      <ul v-if="draftItems.length" ref="parentRef" :class="cls.e('list')">
-        <li v-for="(item, index) in draftItems" :key="item.id" :class="cls.e('item')">
-          <u-report-rule-row
-            :rule="item.rule"
-            :binding-field="bindingField"
-            :dataset-fields="datasetFields"
-            @update:rule="item.rule = $event"
-            @remove="removeRule(index)"
-          />
-        </li>
-      </ul>
-      <p v-else :class="cls.e('empty')">还没有规则。</p>
-
-      <u-button size="small" plain @click="addRule">添加规则</u-button>
-    </div>
-
-    <template #footer>
-      <u-button size="small" @click="visible = false">取消</u-button>
-      <u-button size="small" type="primary" @click="confirm">确定</u-button>
-    </template>
-  </u-dialog>
-</template>
-
-<script lang="ts" setup>
-import { animations, useDnD } from '@veltra/compositions'
-import { UButton, UDialog } from '@veltra/desktop'
-import { bem } from '@veltra/utils'
-import { computed, ref, watch } from 'vue'
-
-import type { ConditionalRule, DatasetField } from '../../../report/types'
-import {
-  cloneRulesFromDraft,
-  createDraftItem,
-  initDraftFromRules,
-  type DraftRuleItem
-} from './conditional-rules/helpers'
-import UReportRuleRow from './rule-row.vue'
-
-defineOptions({ name: 'UReportRulesDialog' })
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean
-    rules: ConditionalRule[]
-    bindingField: string
-    datasetFields?: readonly DatasetField[]
-    /** @deprecated 使用 datasetFields + resolveEvalFieldType */
-    fieldType?: DatasetField['type']
-  }>(),
-  { datasetFields: () => [], fieldType: 'number' }
-)
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  save: [rules: ConditionalRule[]]
-}>()
-
-const cls = bem('report-rules-dialog')
-
-const draftItems = ref<DraftRuleItem[]>([])
-
-const { parentRef } = useDnD<DraftRuleItem>({
-  values: draftItems,
-  dragHandle: '.u-report-rule-row__handle',
-  plugins: [animations()]
-})
-
-const visible = computed({
-  get: () => props.modelValue,
-  set: (value: boolean) => emit('update:modelValue', value)
-})
-
-watch(
-  () => props.modelValue,
-  (open) => {
-    if (!open) return
-    draftItems.value = initDraftFromRules(props.rules, props.fieldType, props.bindingField)
-  }
-)
-
-function addRule(): void {
-  draftItems.value = [
-    ...draftItems.value,
-    createDraftItem(undefined, props.fieldType, props.bindingField)
-  ]
-}
-
-function removeRule(index: number): void {
-  draftItems.value = draftItems.value.filter((_, i) => i !== index)
-}
-
-function confirm(): void {
-  emit('save', cloneRulesFromDraft(draftItems.value))
-  visible.value = false
-}
-
-function onClose(): void {
-  visible.value = false
-}
-</script>

package/src/components/report/designer/topology-overlay.vue

@@ -1,128 +0,0 @@
-<template>
-  <svg v-if="visible" :class="cls.b" :width="svgWidth" :height="svgHeight" aria-hidden="true">
-    <defs>
-      <marker
-        :id="rowArrowMarkerId"
-        markerWidth="8"
-        markerHeight="8"
-        refX="6"
-        refY="4"
-        orient="auto"
-        markerUnits="strokeWidth"
-      >
-        <path d="M0,0 L8,4 L0,8 Z" fill="var(--u-color-primary, #2563eb)" />
-      </marker>
-      <marker
-        :id="colArrowMarkerId"
-        markerWidth="8"
-        markerHeight="8"
-        refX="6"
-        refY="4"
-        orient="auto"
-        markerUnits="strokeWidth"
-      >
-        <path d="M0,0 L8,4 L0,8 Z" fill="var(--u-color-warning, #d97706)" />
-      </marker>
-    </defs>
-    <path
-      v-for="(item, index) in arcPaths"
-      :key="index"
-      :class="[cls.e('arc'), cls.em('arc', item.direction)]"
-      :d="item.path"
-      :marker-end="`url(#${item.direction === 'row' ? rowArrowMarkerId : colArrowMarkerId})`"
-    />
-  </svg>
-</template>
-
-<script lang="ts" setup>
-import type { CellAddress } from '@veltra/sheet-core'
-import type { SheetGrid } from '@veltra/sheet-core/grid'
-import { bem } from '@veltra/utils'
-import { computed, ref, toRef } from 'vue'
-
-import type { ReportBinding } from '../../../report/types'
-import {
-  buildTopologyArcPath,
-  collectTopologyLinks,
-  type TopologyBindingEntry,
-  type TopologyLinkDirection
-} from './topology'
-import { readCellOverlayRect, readGridOverlaySize, useGridOverlaySync } from './use-grid-overlay'
-
-defineOptions({ name: 'UReportTopologyOverlay' })
-
-const props = defineProps<{
-  cell: CellAddress | null
-  binding: ReportBinding | null
-  entries: TopologyBindingEntry[]
-  metaTick: number
-  hostEl: HTMLElement | null
-  getGrid: () => SheetGrid | undefined
-  getBindingAt: (addr: CellAddress) => ReportBinding | undefined
-}>()
-
-const cls = bem('report-topology')
-
-const instanceId = Math.random().toString(36).slice(2, 8)
-const rowArrowMarkerId = `u-report-topology-row-arrow-${instanceId}`
-const colArrowMarkerId = `u-report-topology-col-arrow-${instanceId}`
-
-const hostEl = toRef(props, 'hostEl')
-
-const svgWidth = ref(0)
-const svgHeight = ref(0)
-const arcPaths = ref<Array<{ path: string; direction: TopologyLinkDirection }>>([])
-const inView = ref(false)
-
-const visible = computed(
-  () => !!props.binding && !!props.cell && inView.value && arcPaths.value.length > 0
-)
-
-function updateOverlay(): void {
-  const cell = props.cell
-  const binding = props.binding
-  const host = props.hostEl
-  if (!cell || !binding || !host) {
-    inView.value = false
-    arcPaths.value = []
-    return
-  }
-
-  const size = readGridOverlaySize(host)
-  if (!size) {
-    inView.value = false
-    arcPaths.value = []
-    return
-  }
-
-  svgWidth.value = size.width
-  svgHeight.value = size.height
-
-  const links = collectTopologyLinks(cell, binding, props.entries, props.getBindingAt)
-  const paths: Array<{ path: string; direction: TopologyLinkDirection }> = []
-
-  for (const link of links) {
-    const fromRect = readCellOverlayRect(link.from, host, props.getGrid)
-    const toRect = readCellOverlayRect(link.to, host, props.getGrid)
-    if (!fromRect || !toRect) continue
-    paths.push({
-      direction: link.direction,
-      path: buildTopologyArcPath(
-        { x: fromRect.centerX, y: fromRect.centerY },
-        { x: toRect.centerX, y: toRect.centerY }
-      )
-    })
-  }
-
-  arcPaths.value = paths
-  inView.value = paths.length > 0
-}
-
-useGridOverlaySync({
-  hostEl,
-  getGrid: () => props.getGrid(),
-  watchSources: () =>
-    [props.cell?.row, props.cell?.col, props.binding, props.metaTick, props.hostEl] as const,
-  update: updateOverlay
-})
-</script>

package/src/components/report/designer/topology.ts

@@ -1,124 +0,0 @@
-import type { CellAddress } from '@veltra/sheet-core'
-
-import type { ReportBinding } from '../../../report/types'
-
-export type TopologyLinkDirection = 'row' | 'col'
-
-export interface TopologyLink {
-  /** 子格（依赖方） */
-  from: CellAddress
-  /** 父绑定格 */
-  to: CellAddress
-  /** 连线方向：行方向父格 / 列方向父格 */
-  direction: TopologyLinkDirection
-}
-
-export interface TopologyBindingEntry {
-  addr: CellAddress
-  binding: ReportBinding
-}
-
-function linkKey(from: CellAddress, to: CellAddress, direction: TopologyLinkDirection): string {
-  return `${direction}:${from.row},${from.col}->${to.row},${to.col}`
-}
-
-function sameAddress(a: CellAddress, b: CellAddress): boolean {
-  return a.row === b.row && a.col === b.col
-}
-
-function pushLink(
-  links: TopologyLink[],
-  seen: Set<string>,
-  from: CellAddress,
-  to: CellAddress,
-  direction: TopologyLinkDirection
-): void {
-  const key = linkKey(from, to, direction)
-  if (seen.has(key)) return
-  links.push({ from, to, direction })
-  seen.add(key)
-}
-
-/** 查找将指定格作为行方向父格的绑定格 */
-export function findCellsWithRowParent(
-  parent: CellAddress,
-  entries: readonly TopologyBindingEntry[]
-): CellAddress[] {
-  const children: CellAddress[] = []
-  for (const { addr, binding } of entries) {
-    if (binding.rowParent && sameAddress(binding.rowParent, parent)) {
-      children.push(addr)
-    }
-  }
-  return children
-}
-
-/** 查找将指定格作为列方向父格的绑定格 */
-export function findCellsWithColParent(
-  parent: CellAddress,
-  entries: readonly TopologyBindingEntry[]
-): CellAddress[] {
-  const children: CellAddress[] = []
-  for (const { addr, binding } of entries) {
-    if (binding.colParent && sameAddress(binding.colParent, parent)) {
-      children.push(addr)
-    }
-  }
-  return children
-}
-
-/** 收集选中格相关的拓扑连线：沿 rowParent / colParent 链上行、下行到直接子绑定 */
-export function collectTopologyLinks(
-  cell: CellAddress,
-  binding: ReportBinding,
-  entries: readonly TopologyBindingEntry[],
-  getBindingAt: (addr: CellAddress) => ReportBinding | undefined
-): TopologyLink[] {
-  const links: TopologyLink[] = []
-  const seen = new Set<string>()
-
-  let rowCursor = cell
-  let rowBinding: ReportBinding | undefined = binding
-  while (rowBinding?.rowParent) {
-    const parent = rowBinding.rowParent
-    pushLink(links, seen, rowCursor, parent, 'row')
-    rowCursor = parent
-    rowBinding = getBindingAt(parent)
-  }
-
-  let colCursor = cell
-  let colBinding: ReportBinding | undefined = binding
-  while (colBinding?.colParent) {
-    const parent = colBinding.colParent
-    pushLink(links, seen, colCursor, parent, 'col')
-    colCursor = parent
-    colBinding = getBindingAt(parent)
-  }
-
-  for (const child of findCellsWithRowParent(cell, entries)) {
-    pushLink(links, seen, child, cell, 'row')
-  }
-
-  for (const child of findCellsWithColParent(cell, entries)) {
-    pushLink(links, seen, child, cell, 'col')
-  }
-
-  return links
-}
-
-/** @deprecated 05 将删除；暂保留别名 */
-export const findCellsWithLeftParent = findCellsWithRowParent
-
-/** 子格 → 父格的二次贝塞尔弧线路径 */
-export function buildTopologyArcPath(
-  from: { x: number; y: number },
-  to: { x: number; y: number }
-): string {
-  const dx = to.x - from.x
-  const dy = to.y - from.y
-  const distance = Math.hypot(dx, dy) || 1
-  const lift = Math.min(48, Math.max(16, distance * 0.35))
-  const cx = (from.x + to.x) / 2
-  const cy = (from.y + to.y) / 2 - lift * Math.sign(dy || -1)
-  return `M ${from.x} ${from.y} Q ${cx} ${cy} ${to.x} ${to.y}`
-}