@veltra/sheet 2.2.0 → 2.3.1

package/src/components/report/designer/float-panel.vue

@@ -21,6 +21,7 @@
           @update:model-value="onPreset"
         />
         <u-select
+          v-if="showAggregateSelect"
           size="small"
           :class="[cls.e('select'), cls.em('select', 'aggregate')]"
           :model-value="binding.aggregate"
@@ -28,6 +29,7 @@
           @update:model-value="onAggregate"
         />
         <u-select
+          v-if="showExpandSelect"
           size="small"
           :class="[cls.e('select'), cls.em('select', 'expand')]"
           :model-value="binding.expand"
@@ -35,6 +37,7 @@
           @update:model-value="onExpand"
         />
         <u-button size="small" plain @click="emit('open-rules')">条件样式</u-button>
+        <u-button size="small" text type="danger" @click="emit('remove')">删除绑定</u-button>
         <u-button
           size="small"
           text
@@ -138,11 +141,8 @@
         </div>
       </section>
 
-      <footer :class="cls.e('footer')">
-        <u-button v-if="parentPickMode" size="small" plain @click="emit('cancel-parent-pick')">
-          取消点选
-        </u-button>
-        <u-button size="small" type="danger" plain @click="emit('remove')">删除绑定</u-button>
+      <footer v-if="parentPickMode" :class="cls.e('footer')">
+        <u-button size="small" plain @click="emit('cancel-parent-pick')">取消点选</u-button>
       </footer>
     </div>
   </div>
@@ -157,7 +157,9 @@ import { computed, nextTick, ref, toRef, watch } from 'vue'
 import {
   formatBindingPlaceholder,
   formatCellAddress,
-  inferReportPreset
+  formatParentCandidateLabel,
+  inferReportPreset,
+  isReductionAggregate
 } from '../../../report/binding'
 import type {
   ReportAggregate,
@@ -188,6 +190,7 @@ const props = defineProps<{
   rowParentCandidates: CellAddress[]
   colParentCandidates: CellAddress[]
   resolveFieldLabel?: (datasetId: string, fieldName: string) => string
+  getBindingAt?: (addr: CellAddress) => ReportBinding | undefined
   hostEl: HTMLElement | null
   getGrid: () => SheetGrid | undefined
 }>()
@@ -216,7 +219,7 @@ const presetOptions = computed(() => {
   return options
 })
 
-const aggregateOptions = [
+const ALL_AGGREGATE_OPTIONS = [
   { value: 'list' as const, label: '明细' },
   { value: 'group' as const, label: '分组' },
   { value: 'sum' as const, label: '求和' },
@@ -226,6 +229,10 @@ const aggregateOptions = [
   { value: 'min' as const, label: '最小' }
 ]
 
+const REDUCTION_AGGREGATE_OPTIONS = ALL_AGGREGATE_OPTIONS.filter((item) =>
+  isReductionAggregate(item.value)
+)
+
 const expandOptions = [
   { value: 'down' as const, label: '向下' },
   { value: 'right' as const, label: '向右' },
@@ -247,24 +254,59 @@ const currentPresetValue = computed(() => {
   return inferReportPreset(props.binding) ?? CUSTOM_PRESET_VALUE
 })
 
+const showAggregateSelect = computed(() => {
+  const preset = currentPresetValue.value
+  return (
+    preset === CUSTOM_PRESET_VALUE ||
+    preset === 'subtotal' ||
+    preset === 'grandTotal' ||
+    preset === 'cross'
+  )
+})
+
+const showExpandSelect = computed(() => {
+  const preset = currentPresetValue.value
+  return preset === CUSTOM_PRESET_VALUE || preset === 'groupHeader' || preset === 'detail'
+})
+
+const aggregateOptions = computed(() =>
+  currentPresetValue.value === CUSTOM_PRESET_VALUE
+    ? ALL_AGGREGATE_OPTIONS
+    : REDUCTION_AGGREGATE_OPTIONS
+)
+
 const summaryText = computed(() => {
   if (!props.binding) return ''
-  return formatBindingPlaceholder(props.binding, props.resolveFieldLabel)
+  const parts = [formatBindingPlaceholder(props.binding, props.resolveFieldLabel)]
+  if (props.binding.rowParent && props.resolvedRowParentLabel !== '—') {
+    const parent = props.getBindingAt?.(props.binding.rowParent)
+    const name = parent
+      ? (props.resolveFieldLabel?.(parent.dataset, parent.field) ?? parent.field)
+      : props.resolvedRowParentLabel
+    parts.push(`行父格 ${name} ${props.resolvedRowParentLabel}`)
+  }
+  if (props.binding.colParent && props.resolvedColParentLabel !== '—') {
+    const parent = props.getBindingAt?.(props.binding.colParent)
+    const name = parent
+      ? (props.resolveFieldLabel?.(parent.dataset, parent.field) ?? parent.field)
+      : props.resolvedColParentLabel
+    parts.push(`列父格 ${name} ${props.resolvedColParentLabel}`)
+  }
+  return parts.join(' · ')
 })
 
-const rowParentOptions = computed(() =>
-  props.rowParentCandidates.map((addr) => ({
-    value: formatCellAddress(addr),
-    label: formatCellAddress(addr)
-  }))
-)
+function candidateOption(addr: CellAddress): { value: string; label: string } {
+  const value = formatCellAddress(addr)
+  const binding = props.getBindingAt?.(addr)
+  return {
+    value,
+    label: binding ? formatParentCandidateLabel(addr, binding, props.resolveFieldLabel) : value
+  }
+}
 
-const colParentOptions = computed(() =>
-  props.colParentCandidates.map((addr) => ({
-    value: formatCellAddress(addr),
-    label: formatCellAddress(addr)
-  }))
-)
+const rowParentOptions = computed(() => props.rowParentCandidates.map(candidateOption))
+
+const colParentOptions = computed(() => props.colParentCandidates.map(candidateOption))
 
 const rowParentSelectValue = computed(() =>
   props.binding?.rowParent ? formatCellAddress(props.binding.rowParent) : undefined
@@ -281,10 +323,18 @@ const panelStyle = computed(() => ({ left: `${panelLeft.value}px`, top: `${panel
 watch(
   () => [props.cell?.row, props.cell?.col] as const,
   () => {
+    if (props.parentPickMode) return
     expanded.value = false
   }
 )
 
+watch(
+  () => props.parentPickMode,
+  (mode) => {
+    if (mode) expanded.value = true
+  }
+)
+
 watch(expanded, () => {
   nextTick(() => updatePosition())
 })
@@ -300,13 +350,7 @@ function onPreset(preset: ReportPreset | typeof CUSTOM_PRESET_VALUE): void {
 }
 
 function aggregateDefaultExpand(aggregate: ReportAggregate): ReportExpand {
-  return aggregate === 'sum' ||
-    aggregate === 'avg' ||
-    aggregate === 'count' ||
-    aggregate === 'max' ||
-    aggregate === 'min'
-    ? 'none'
-    : 'down'
+  return isReductionAggregate(aggregate) ? 'none' : 'down'
 }
 
 function onAggregate(aggregate: ReportAggregate): void {

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

@@ -1,27 +1,17 @@
 <template>
   <div :class="cls.b">
-    <span :class="cls.e('handle')" title="拖拽排序">≡</span>
+    <span :class="cls.e('handle')" title="拖拽排序">⋮⋮</span>
 
     <div :class="cls.e('main')">
-      <div :class="cls.e('meta')">
+      <div :class="cls.e('when')">
+        <span :class="cls.e('lead')">当</span>
         <u-select
           size="small"
           :class="cls.e('field-select')"
-          :model-value="rule.field"
+          :model-value="rule.field ?? SELF_FIELD_VALUE"
           :options="fieldOptions"
-          placeholder="求值字段"
           @update:model-value="onEvalField"
         />
-        <u-select
-          size="small"
-          :class="cls.e('scope-select')"
-          :model-value="rule.scope ?? 'cell'"
-          :options="scopeOptions"
-          @update:model-value="onScope"
-        />
-      </div>
-
-      <div :class="cls.e('condition')">
         <u-select
           size="small"
           :class="cls.e('operator')"
@@ -29,7 +19,6 @@
           :options="operatorOptions"
           @update:model-value="onOperator"
         />
-
         <div :class="cls.e('value')">
           <template v-if="rule.operator === 'between'">
             <u-number-input
@@ -80,56 +69,76 @@
             @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" />
-      </div>
 
-      <div :class="cls.e('style')">
-        <span :class="cls.e('style-label')">背景</span>
-        <u-palette
-          size="small"
-          :model-value="rule.style.fill?.color ?? ''"
-          @update:model-value="patchFillColor"
-        />
-        <span :class="cls.e('style-label')">字体</span>
-        <u-palette
-          size="small"
-          :model-value="rule.style.font?.color ?? ''"
-          @update:model-value="patchFontColor"
-        />
-        <u-button
-          size="small"
-          :class="cls.e('toggle')"
-          :type="rule.style.font?.bold ? 'primary' : undefined"
-          plain
-          @click="toggleBold"
-        >
-          B
-        </u-button>
-        <u-button
-          size="small"
-          :class="cls.e('toggle')"
-          :type="rule.style.font?.italic ? 'primary' : undefined"
-          plain
-          @click="toggleItalic"
-        >
-          I
-        </u-button>
+        <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>
 
-    <div :class="cls.e('actions')">
-      <u-button size="small" text :disabled="index === 0" @click="emit('move-up')">↑</u-button>
-      <u-button size="small" text :disabled="index >= total - 1" @click="emit('move-down')">
-        ↓
-      </u-button>
-      <u-button size="small" text type="danger" @click="emit('remove')">删除</u-button>
-    </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, UInput, UNumberInput, UPalette, USelect } from '@veltra/desktop'
+import { UButton, UButtonGroup, UInput, UNumberInput, UPalette, USelect } from '@veltra/desktop'
 import { bem } from '@veltra/utils'
 import { computed } from 'vue'
 
@@ -142,6 +151,7 @@ import {
   resolveEvalFieldType,
   RULE_SCOPE_OPTIONS,
   ruleEvalFieldOptions,
+  SELF_FIELD_VALUE,
   writeBetweenValue
 } from './conditional-rules/helpers'
 import UReportRulePreview from './rule-preview.vue'
@@ -152,16 +162,9 @@ const props = defineProps<{
   rule: ConditionalRule
   bindingField: string
   datasetFields: readonly DatasetField[]
-  index: number
-  total: number
 }>()
 
-const emit = defineEmits<{
-  'update:rule': [rule: ConditionalRule]
-  remove: []
-  'move-up': []
-  'move-down': []
-}>()
+const emit = defineEmits<{ 'update:rule': [rule: ConditionalRule]; remove: [] }>()
 
 const cls = bem('report-rule-row')
 
@@ -171,9 +174,6 @@ const evalFieldType = computed(() =>
 const operatorOptions = computed(() => operatorsForFieldType(evalFieldType.value))
 const numericField = computed(() => isNumericFieldType(evalFieldType.value))
 const fieldOptions = computed(() => ruleEvalFieldOptions(props.bindingField, props.datasetFields))
-const scopeOptions = computed(() =>
-  RULE_SCOPE_OPTIONS.map((option) => ({ value: option.value, label: option.label }))
-)
 
 const betweenStart = computed(() => readBetweenValue(props.rule.value, 0, evalFieldType.value))
 const betweenEnd = computed(() => readBetweenValue(props.rule.value, 1, evalFieldType.value))
@@ -191,7 +191,7 @@ function patchRule(patch: Partial<ConditionalRule>): void {
 
 function onEvalField(field: string | undefined): void {
   const next: Partial<ConditionalRule> = {}
-  if (field === undefined) {
+  if (!field) {
     next.field = undefined
   } else {
     next.field = field

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

@@ -2,13 +2,11 @@
   <u-dialog
     v-model="visible"
     title="条件样式"
-    style="width: min(960px, 92vw); max-height: 85vh"
+    style="width: min(600px, 92vw); max-height: 85vh"
     @close="onClose"
   >
     <div :class="cls.b">
-      <p :class="cls.e('hint')">
-        按列表顺序依次求值并合并样式。可指定求值字段（默认同绑定格字段）；作用范围为「整行」时染满物理输出行（含横向展开列与静态格）。交叉表下整行高亮会覆盖同行所有列，明细行报表更合适。
-      </p>
+      <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')">
@@ -16,16 +14,12 @@
             :rule="item.rule"
             :binding-field="bindingField"
             :dataset-fields="datasetFields"
-            :index="index"
-            :total="draftItems.length"
             @update:rule="item.rule = $event"
             @remove="removeRule(index)"
-            @move-up="moveRule(index, -1)"
-            @move-down="moveRule(index, 1)"
           />
         </li>
       </ul>
-      <p v-else :class="cls.e('empty')">暂无规则，点击下方按钮添加。</p>
+      <p v-else :class="cls.e('empty')">还没有规则。</p>
 
       <u-button size="small" plain @click="addRule">添加规则</u-button>
     </div>
@@ -105,16 +99,6 @@ function removeRule(index: number): void {
   draftItems.value = draftItems.value.filter((_, i) => i !== index)
 }
 
-function moveRule(index: number, delta: -1 | 1): void {
-  const target = index + delta
-  if (target < 0 || target >= draftItems.value.length) return
-  const next = [...draftItems.value]
-  const [item] = next.splice(index, 1)
-  if (!item) return
-  next.splice(target, 0, item)
-  draftItems.value = next
-}
-
 function confirm(): void {
   emit('save', cloneRulesFromDraft(draftItems.value))
   visible.value = false

package/src/components/report/hub-dataset-editor.vue

@@ -219,11 +219,27 @@ watch(
   { immediate: true }
 )
 
+/** 立即把草稿 SQL 落入数据集（v-model 实时、change 失焦才发且提交有 debounce），供预览同步拿到最新 SQL */
+function flushSqlDraft(datasetId: string): void {
+  if (sqlTimer) {
+    clearTimeout(sqlTimer)
+    sqlTimer = undefined
+  }
+  const current = dataset.value
+  if (!current || current.sql === sqlDraft.value) return
+  props.hub.updateDataset(datasetId, { sql: sqlDraft.value })
+  void runDescribe()
+}
+
 function onSqlChange(value: string): void {
   sqlDraft.value = value
+  const datasetId = props.datasetId
   if (sqlTimer) clearTimeout(sqlTimer)
   sqlTimer = setTimeout(() => {
-    props.hub.updateDataset(props.datasetId, { sql: value })
+    sqlTimer = undefined
+    // 防抖窗口内切换了数据集则丢弃，避免把旧草稿写进新数据集
+    if (props.datasetId !== datasetId) return
+    props.hub.updateDataset(datasetId, { sql: value })
     void runDescribe()
   }, 280)
 }
@@ -271,6 +287,8 @@ const schemaRows = computed(() => {
 // ---- 记录预览（按参数默认值经连接器取数） ----
 
 async function runPreview(): Promise<void> {
+  // 编辑器 change 仅在失焦时触发且提交有 debounce，先同步落草稿 SQL，避免用旧 SQL 取数
+  flushSqlDraft(props.datasetId)
   previewing.value = true
   previewError.value = ''
   const result = await props.hub.previewDataset(props.datasetId)

package/src/components/report/preview-grid-size.ts

@@ -0,0 +1,33 @@
+import type { SheetSnapshot } from '@veltra/sheet-core'
+
+export type PreviewGridSizeMode = 'template' | 'filled'
+
+/**
+ * 报表预览网格尺寸：只铺到实际内容，不用设计态 canvas / 50×10 下限。
+ *
+ * - `template`：取数前的静态结构，按 cells/merges/meta 包围盒（忽略 snapshot.rows/cols，
+ *   那是设计网格声明尺寸，会带出空白格）
+ * - `filled`：行保留展开布局的 `snapshot.rows`（可能含无存值的空扩展行）；列按包围盒收敛
+ *   （Filled Report 的 `cols` 常被 `max(layout, template.cols)` 撑到设计态列数）
+ */
+export function previewGridSize(
+  snapshot: Pick<SheetSnapshot, 'cells' | 'merges' | 'meta' | 'rows'>,
+  mode: PreviewGridSizeMode
+): { rows: number; cols: number } {
+  let maxRow = -1
+  let maxCol = -1
+  const grow = (row: number, col: number): void => {
+    if (row > maxRow) maxRow = row
+    if (col > maxCol) maxCol = col
+  }
+  for (const cell of snapshot.cells) grow(cell.row, cell.col)
+  for (const merge of snapshot.merges) grow(merge.end.row, merge.end.col)
+  for (const item of snapshot.meta ?? []) grow(item.row, item.col)
+
+  const boundRows = maxRow + 1
+  const boundCols = maxCol + 1
+  if (mode === 'filled') {
+    return { rows: Math.max(boundRows, snapshot.rows, 1), cols: Math.max(boundCols, 1) }
+  }
+  return { rows: Math.max(boundRows, 1), cols: Math.max(boundCols, 1) }
+}