@veltra/sheet 2.0.1 → 2.2.0

package/src/components/report/designer/use-grid-overlay.ts

@@ -0,0 +1,113 @@
+import type { CellAddress, SheetGrid } from '@veltra/sheet-core'
+import { onBeforeUnmount, watch, type Ref } from 'vue'
+
+import {
+  getCellOverlayRect,
+  resolveGridOverlayLayout,
+  type CellOverlayRect,
+  type GridOverlayLayout
+} from './cell-coords'
+
+type GridGetter = () => SheetGrid | undefined
+
+/** 网格滚动时重算 overlay 坐标；避免在 props 不稳定时重复绑定监听 */
+export function useGridOverlaySync(options: {
+  hostEl: Ref<HTMLElement | null>
+  getGrid: GridGetter
+  watchSources: () => readonly unknown[]
+  update: () => void
+}): void {
+  let offScroll: (() => void) | undefined
+  let rafId = 0
+
+  function scheduleUpdate(): void {
+    cancelAnimationFrame(rafId)
+    rafId = requestAnimationFrame(options.update)
+  }
+
+  function bindScroll(): void {
+    offScroll?.()
+    offScroll = undefined
+    const grid = options.getGrid()
+    if (!grid) return
+
+    const table = grid.getTable()
+    const onScroll = (): void => scheduleUpdate()
+    const scrollEvent = 'scroll'
+    table.on(scrollEvent, onScroll)
+    offScroll = () => table.off(scrollEvent, onScroll)
+  }
+
+  watch(
+    options.watchSources,
+    () => {
+      bindScroll()
+      scheduleUpdate()
+    },
+    { immediate: true, flush: 'post' }
+  )
+
+  onBeforeUnmount(() => {
+    cancelAnimationFrame(rafId)
+    offScroll?.()
+  })
+}
+
+export function readCellOverlayRect(
+  cell: CellAddress,
+  host: HTMLElement,
+  getGrid: GridGetter
+): ReturnType<typeof getCellOverlayRect> {
+  const grid = getGrid()
+  if (!grid) return null
+  const resolved = resolveGridOverlayLayout(host)
+  if (!resolved) return null
+  return getCellOverlayRect(grid, cell, resolved.layout)
+}
+
+export function readGridOverlaySize(host: HTMLElement): { width: number; height: number } | null {
+  const resolved = resolveGridOverlayLayout(host)
+  if (!resolved) return null
+  const { layout } = resolved
+  return { width: layout.viewW + layout.offsetX, height: layout.viewH + layout.offsetY }
+}
+
+export interface BindingFloatPanelPosition {
+  placement: 'above' | 'below'
+  left: number
+  top: number
+}
+
+/** 悬浮编辑卡锚点：空间按网格画布（非宿主顶）计算，避免顶行格误判为上方可放 */
+export function resolveBindingFloatPanelPosition(
+  rect: CellOverlayRect,
+  layout: GridOverlayLayout,
+  panelWidth: number,
+  panelHeight: number,
+  hostWidth: number,
+  options?: { gap?: number; edgePad?: number }
+): BindingFloatPanelPosition {
+  const gap = options?.gap ?? 8
+  const edgePad = options?.edgePad ?? 10
+  const gridTop = layout.offsetY
+  const gridBottom = layout.offsetY + layout.viewH
+
+  let left = rect.centerX
+  const halfW = panelWidth / 2
+  left = Math.max(edgePad + halfW, Math.min(hostWidth - edgePad - halfW, left))
+
+  const spaceAbove = rect.top - gridTop
+  const spaceBelow = gridBottom - rect.bottom
+  const need = panelHeight + gap
+
+  let placement: 'above' | 'below' =
+    spaceAbove >= need || spaceAbove >= spaceBelow ? 'above' : 'below'
+
+  if (placement === 'above' && rect.top - gap - panelHeight < gridTop + edgePad) {
+    if (spaceBelow >= need || spaceBelow > spaceAbove) placement = 'below'
+  }
+
+  const top = placement === 'above' ? rect.top - gap : rect.bottom + gap
+
+  return { placement, left: Math.round(left), top: Math.round(top) }
+}

package/src/components/report/designer-hub.vue

@@ -0,0 +1,198 @@
+<template>
+  <div :class="cls.b">
+    <header :class="cls.e('head')">
+      <h3 :class="cls.e('title')">数据中枢</h3>
+      <u-button size="small" type="primary" @click="emit('close')">完成</u-button>
+    </header>
+
+    <div :class="cls.e('body')">
+      <aside :class="cls.e('sidebar')">
+        <div :class="cls.e('sidebar-head')">
+          <span :class="cls.e('sidebar-title')">连接与数据集</span>
+          <u-button size="small" plain @click="startNewConnection">新建连接</u-button>
+        </div>
+
+        <div :class="cls.e('tree')">
+          <section v-for="conn in connections" :key="conn.id" :class="cls.e('conn-group')">
+            <div
+              :class="[
+                cls.e('conn'),
+                bem.is('active', activeConnectionId === conn.id && !activeDatasetId)
+              ]"
+              @click="selectConnection(conn.id)"
+            >
+              <span :class="cls.e('conn-label')">{{ conn.label }}</span>
+              <u-tag size="small" type="info">{{ conn.type }}</u-tag>
+            </div>
+
+            <ul :class="cls.e('dataset-list')">
+              <li
+                v-for="item in datasetsByConnection(conn.id)"
+                :key="item.id"
+                :class="[cls.e('dataset-item'), bem.is('active', activeDatasetId === item.id)]"
+                @click="selectDataset(item.id)"
+              >
+                <span>{{ item.label }}</span>
+                <span :class="cls.e('dataset-id')">{{ item.id }}</span>
+              </li>
+            </ul>
+
+            <u-button size="small" text :class="cls.e('add-dataset')" @click="addDataset(conn.id)">
+              + 新建数据集
+            </u-button>
+          </section>
+
+          <p v-if="connections.length === 0" :class="cls.e('sidebar-empty')">
+            尚无连接。点「新建连接」配置 MySQL / PostgreSQL 数据连接。
+          </p>
+        </div>
+      </aside>
+
+      <div :class="cls.e('main')">
+        <u-report-hub-dataset-editor
+          v-if="activeDatasetId"
+          :hub="hub"
+          :dataset-id="activeDatasetId"
+          @remove="removeActiveDataset"
+        />
+        <u-report-hub-connection-form
+          v-else-if="connectionDraft"
+          :connection="connectionDraft"
+          :is-new="creatingConnection"
+          :test="hub.testConnection"
+          @save="saveConnection"
+          @remove="removeActiveConnection"
+        />
+        <div v-else :class="cls.e('empty')">
+          <p>选择左侧连接或数据集开始配置；数据集字段解析后即可在字段面板拖拽绑定。</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UButton, UTag } from '@veltra/desktop'
+import { bem } from '@veltra/utils'
+import { computed, ref, watch } from 'vue'
+
+import type { DataConnection } from '../../report/connector'
+import { DEFAULT_CONNECTION_PORTS } from '../../report/connector'
+import UReportHubConnectionForm from './hub-connection-form.vue'
+import UReportHubDatasetEditor from './hub-dataset-editor.vue'
+import type { DatasetHubController } from './use-report-designer'
+
+defineOptions({ name: 'UReportDatasetHub' })
+
+const props = defineProps<{ hub: DatasetHubController }>()
+
+const emit = defineEmits<{ close: [] }>()
+
+const cls = bem('report-hub')
+
+const connections = computed(() => props.hub.connections.value)
+const datasets = computed(() => props.hub.datasets.value)
+
+function datasetsByConnection(connectionId: string) {
+  return datasets.value.filter((item) => item.connectionId === connectionId)
+}
+
+const activeConnectionId = ref<string>()
+const activeDatasetId = ref<string>()
+const creatingConnection = ref(false)
+const connectionDraft = ref<DataConnection>()
+
+// 打开时默认选中首个连接 / 数据集
+watch(
+  connections,
+  () => {
+    if (!activeConnectionId.value && connections.value[0]) {
+      activeConnectionId.value = connections.value[0]!.id
+      syncConnectionDraft()
+    }
+  },
+  { immediate: true }
+)
+
+function syncConnectionDraft(): void {
+  if (activeDatasetId.value) {
+    connectionDraft.value = undefined
+    return
+  }
+  if (creatingConnection.value) return
+  const id = activeConnectionId.value
+  const conn = id ? connections.value.find((item) => item.id === id) : undefined
+  connectionDraft.value = conn ? { ...conn } : undefined
+}
+
+function selectConnection(connectionId: string): void {
+  activeConnectionId.value = connectionId
+  activeDatasetId.value = undefined
+  creatingConnection.value = false
+  syncConnectionDraft()
+}
+
+function selectDataset(datasetId: string): void {
+  activeDatasetId.value = datasetId
+  const dataset = datasets.value.find((item) => item.id === datasetId)
+  if (dataset) activeConnectionId.value = dataset.connectionId
+  connectionDraft.value = undefined
+  creatingConnection.value = false
+}
+
+let connectionSeq = 0
+function startNewConnection(): void {
+  creatingConnection.value = true
+  activeDatasetId.value = undefined
+  connectionDraft.value = {
+    id: `conn-${Date.now()}-${connectionSeq++}`,
+    label: '新连接',
+    type: 'mysql',
+    host: '127.0.0.1',
+    port: DEFAULT_CONNECTION_PORTS.mysql,
+    database: '',
+    username: '',
+    password: ''
+  }
+}
+
+function saveConnection(conn: DataConnection): void {
+  if (creatingConnection.value) {
+    props.hub.addConnection(conn)
+    creatingConnection.value = false
+  } else {
+    props.hub.updateConnection(conn)
+  }
+  activeConnectionId.value = conn.id
+  syncConnectionDraft()
+}
+
+function removeActiveConnection(): void {
+  const id = activeConnectionId.value
+  if (!id) return
+  // removeConnection 级联删除其数据集
+  props.hub.removeConnection(id)
+  activeDatasetId.value = undefined
+  activeConnectionId.value = connections.value[0]?.id
+  creatingConnection.value = false
+  syncConnectionDraft()
+}
+
+function addDataset(connectionId: string): void {
+  const dataset = props.hub.addDataset(connectionId)
+  activeConnectionId.value = connectionId
+  activeDatasetId.value = dataset.id
+  creatingConnection.value = false
+  connectionDraft.value = undefined
+}
+
+function removeActiveDataset(): void {
+  const id = activeDatasetId.value
+  if (!id) return
+  props.hub.removeDataset(id)
+  activeDatasetId.value = datasets.value.find(
+    (item) => item.connectionId === activeConnectionId.value
+  )?.id
+  syncConnectionDraft()
+}
+</script>

package/src/components/report/field-panel-helpers.ts

@@ -0,0 +1,44 @@
+import type { DatasetCatalogItem, DatasetField } from '../../report/types'
+
+/** 字段拖拽的 dataTransfer MIME（字段面板 dragstart / 网格 drop 共用） */
+export const FIELD_DRAG_MIME = 'application/x-sheet-report-field'
+
+/** 字段拖拽负载：`${datasetId}:${fieldName}` */
+export function formatFieldDragPayload(datasetId: string, fieldName: string): string {
+  return `${datasetId}:${fieldName}`
+}
+
+/** 解析字段拖拽负载；非法输入返回 null */
+export function parseFieldDragPayload(
+  raw: string
+): { datasetId: string; fieldName: string } | null {
+  const sep = raw.indexOf(':')
+  if (sep <= 0) return null
+  const fieldName = raw.slice(sep + 1)
+  if (!fieldName) return null
+  return { datasetId: raw.slice(0, sep), fieldName }
+}
+
+export function fieldTypeGlyph(type: DatasetField['type']): string {
+  if (type === 'number') return '#'
+  if (type === 'date') return '日'
+  return '文'
+}
+
+export function filterDatasetsByQuery(
+  datasets: DatasetCatalogItem[],
+  query: string
+): DatasetCatalogItem[] {
+  const keyword = query.trim().toLowerCase()
+  if (!keyword) return datasets
+
+  return datasets
+    .map((dataset) => ({
+      ...dataset,
+      fields: dataset.fields.filter(
+        (field) =>
+          field.label.toLowerCase().includes(keyword) || field.name.toLowerCase().includes(keyword)
+      )
+    }))
+    .filter((dataset) => dataset.fields.length > 0)
+}

package/src/components/report/field-panel.vue

@@ -0,0 +1,136 @@
+<template>
+  <aside :class="cls.b">
+    <h3 :class="cls.e('title')">数据集字段</h3>
+    <p :class="cls.e('meta')">
+      当前选区：
+      <u-tag size="small" type="primary">{{ selectionLabel }}</u-tag>
+    </p>
+
+    <u-input
+      v-model="searchQuery"
+      :class="cls.e('search')"
+      size="small"
+      clearable
+      placeholder="搜索字段…"
+    />
+
+    <p :class="cls.e('hint')">点击或拖拽字段到网格；中文名为主，英文键为绑定标识。</p>
+
+    <section v-for="dataset in visibleDatasets" :key="dataset.id" :class="cls.e('dataset')">
+      <u-button
+        text
+        size="small"
+        :class="cls.e('dataset-toggle')"
+        :aria-expanded="isDatasetExpanded(dataset.id)"
+        @click="toggleDataset(dataset.id)"
+      >
+        <span
+          :class="[cls.e('dataset-chevron'), bem.is('expanded', isDatasetExpanded(dataset.id))]"
+          aria-hidden="true"
+        >
+          ▸
+        </span>
+        <span :class="cls.e('dataset-name')">{{ dataset.label }}</span>
+        <span :class="cls.e('dataset-count')">{{ dataset.fields.length }}</span>
+      </u-button>
+
+      <div v-show="isDatasetExpanded(dataset.id)" :class="cls.e('fields')">
+        <div
+          v-for="field in dataset.fields"
+          :key="field.name"
+          role="button"
+          tabindex="0"
+          :class="[cls.e('pill'), bem.is('bound', isBound(dataset.id, field.name))]"
+          draggable="true"
+          :title="`${field.label}（${field.name}）`"
+          @click="emit('bind', dataset.id, field.name)"
+          @keydown.enter.prevent="emit('bind', dataset.id, field.name)"
+          @keydown.space.prevent="emit('bind', dataset.id, field.name)"
+          @dragstart="onDragStart($event, dataset.id, field.name)"
+        >
+          <span :class="cls.e('pill-icon')" :data-type="field.type">{{
+            fieldTypeGlyph(field.type)
+          }}</span>
+          <span :class="cls.e('pill-label')">{{ field.label }}</span>
+          <span v-if="isBound(dataset.id, field.name)" :class="cls.e('pill-bound')" title="已绑定"
+            >✓</span
+          >
+        </div>
+      </div>
+    </section>
+
+    <p v-if="datasets.length === 0" :class="cls.e('empty')">
+      尚无可用数据集，请点「数据中枢」创建连接与 SQL 数据集。
+    </p>
+    <p v-else-if="visibleDatasets.length === 0" :class="cls.e('empty')">没有匹配的字段。</p>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+import { UButton, UInput, UTag } from '@veltra/desktop'
+import { bem } from '@veltra/utils'
+import { computed, ref } from 'vue'
+
+import type { DatasetCatalogItem } from '../../report/types'
+import {
+  FIELD_DRAG_MIME,
+  fieldTypeGlyph,
+  filterDatasetsByQuery,
+  formatFieldDragPayload
+} from './field-panel-helpers'
+
+defineOptions({ name: 'UReportFieldPanel' })
+
+const props = defineProps<{
+  /** 本报表已选用的数据集（含可编辑中文 label） */
+  datasets: DatasetCatalogItem[]
+  selectionLabel: string
+  /** 已绑定字段键：`${datasetId}:${fieldName}` */
+  boundKeys: Set<string>
+}>()
+
+const emit = defineEmits<{ bind: [datasetId: string, fieldName: string] }>()
+
+const cls = bem('report-field-panel')
+
+const searchQuery = ref('')
+const collapsedDatasetIds = ref<Set<string>>(new Set())
+
+const visibleDatasets = computed(() => filterDatasetsByQuery(props.datasets, searchQuery.value))
+
+/** 折叠集合；搜索时视为全部展开（返回空集） */
+const effectiveCollapsed = computed(() => {
+  const keyword = searchQuery.value.trim()
+  if (!keyword) return collapsedDatasetIds.value
+  return new Set<string>()
+})
+
+function isDatasetExpanded(datasetId: string): boolean {
+  return !effectiveCollapsed.value.has(datasetId)
+}
+
+function isBound(datasetId: string, fieldName: string): boolean {
+  return props.boundKeys.has(`${datasetId}:${fieldName}`)
+}
+
+function toggleDataset(datasetId: string): void {
+  const next = new Set(collapsedDatasetIds.value)
+  if (next.has(datasetId)) next.delete(datasetId)
+  else next.add(datasetId)
+  collapsedDatasetIds.value = next
+}
+
+function onDragStart(event: DragEvent, datasetId: string, fieldName: string): void {
+  event.dataTransfer?.setData(FIELD_DRAG_MIME, formatFieldDragPayload(datasetId, fieldName))
+  if (event.dataTransfer) event.dataTransfer.effectAllowed = 'copy'
+
+  const target = event.currentTarget
+  if (event.dataTransfer && target instanceof HTMLElement) {
+    event.dataTransfer.setDragImage(
+      target,
+      Math.round(target.offsetWidth / 2),
+      Math.round(target.offsetHeight / 2)
+    )
+  }
+}
+</script>

package/src/components/report/filter-bar.vue

@@ -0,0 +1,77 @@
+<template>
+  <section v-if="queryParams.length" :class="cls.b">
+    <span :class="cls.e('label')">筛选参数</span>
+    <div :class="cls.e('fields')">
+      <div v-for="param in queryParams" :key="param.id" :class="cls.e('field')">
+        <span :class="cls.e('field-label')">{{ param.label }}</span>
+        <u-date-picker
+          v-if="param.type === 'date'"
+          :model-value="String(values[param.id] ?? '')"
+          size="small"
+          @update:model-value="(v) => emitChange(param.id, v)"
+        />
+        <u-date-range-picker
+          v-else-if="param.type === 'date-range'"
+          :model-value="dateRangeModel(param.id)"
+          size="small"
+          @update:model-value="(v) => emitDateRangeChange(param.id, v)"
+        />
+        <u-select
+          v-else-if="param.type === 'select'"
+          :model-value="String(values[param.id] ?? '')"
+          size="small"
+          :options="param.options ?? []"
+          @update:model-value="(v) => emitChange(param.id, v)"
+        />
+        <u-number-input
+          v-else-if="param.type === 'number'"
+          :model-value="numberModel(param.id)"
+          size="small"
+          @update:model-value="(v) => emitChange(param.id, v)"
+        />
+        <u-input
+          v-else
+          :model-value="String(values[param.id] ?? '')"
+          size="small"
+          @update:model-value="(v) => emitChange(param.id, v)"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { UDatePicker, UDateRangePicker, UInput, UNumberInput, USelect } from '@veltra/desktop'
+import { bem } from '@veltra/utils'
+
+import {
+  parseDateRangeValue,
+  patchParamValues,
+  resolveNumberParamValue
+} from '../../report/filter-bar'
+import type { ParamValues, QueryParamDef } from '../../report/types'
+
+defineOptions({ name: 'UReportFilterBar' })
+
+const props = defineProps<{ queryParams: QueryParamDef[]; values: ParamValues }>()
+
+const emit = defineEmits<{ 'update:values': [values: ParamValues] }>()
+
+const cls = bem('report-filter-bar')
+
+function dateRangeModel(paramId: string): [string, string] {
+  return parseDateRangeValue(props.values[paramId])
+}
+
+function numberModel(paramId: string): number | undefined {
+  return resolveNumberParamValue(props.values[paramId])
+}
+
+function emitChange(id: string, value: unknown): void {
+  emit('update:values', patchParamValues(props.values, id, value))
+}
+
+function emitDateRangeChange(id: string, value?: [string, string]): void {
+  emit('update:values', patchParamValues(props.values, id, value ?? ['', '']))
+}
+</script>

package/src/components/report/hub-connection-form.vue

@@ -0,0 +1,124 @@
+<template>
+  <section :class="cls.b">
+    <h4 :class="cls.e('title')">{{ isNew ? '新建连接' : '编辑连接' }}</h4>
+    <div :class="cls.e('grid')">
+      <div :class="cls.e('field')">
+        <span :class="cls.e('label')">显示名</span>
+        <u-input v-model="draft.label" size="small" placeholder="连接名称" />
+      </div>
+      <div :class="cls.e('field')">
+        <span :class="cls.e('label')">类型</span>
+        <u-select v-model="draft.type" size="small" :options="typeOptions" />
+      </div>
+      <div :class="cls.e('field')">
+        <span :class="cls.e('label')">主机</span>
+        <u-input v-model="draft.host" size="small" placeholder="127.0.0.1" />
+      </div>
+      <div :class="cls.e('field')">
+        <span :class="cls.e('label')">端口</span>
+        <u-input v-model="portText" size="small" type="number" :placeholder="String(defaultPort)" />
+      </div>
+      <div :class="cls.e('field')">
+        <span :class="cls.e('label')">数据库</span>
+        <u-input v-model="draft.database" size="small" placeholder="数据库名" />
+      </div>
+      <div :class="cls.e('field')">
+        <span :class="cls.e('label')">用户名</span>
+        <u-input v-model="draft.username" size="small" />
+      </div>
+      <div :class="cls.e('field')">
+        <span :class="cls.e('label')">密码</span>
+        <u-input v-model="draft.password" size="small" type="password" show-password />
+      </div>
+    </div>
+
+    <div v-if="testMessage" :class="[cls.e('test'), bem.is('ok', testOk)]" role="status">
+      {{ testMessage }}
+    </div>
+
+    <div :class="cls.e('actions')">
+      <u-button size="small" :loading="testing" @click="onTest">测试连接</u-button>
+      <u-button v-if="!isNew" size="small" type="danger" plain @click="emit('remove')">
+        删除连接
+      </u-button>
+      <u-button size="small" type="primary" @click="onSave">保存</u-button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import { UButton, UInput, USelect } from '@veltra/desktop'
+import { bem } from '@veltra/utils'
+import { computed, reactive, ref, watch } from 'vue'
+
+import type { ConnectionType, DataConnection, Result } from '../../report/connector'
+import { DEFAULT_CONNECTION_PORTS, resolvePortOnTypeChange } from '../../report/connector'
+
+defineOptions({ name: 'UReportHubConnectionForm' })
+
+const props = defineProps<{
+  connection: DataConnection
+  isNew?: boolean
+  /** 真实测试连接（经 DataConnector；契约无状态，新建草稿同样可测） */
+  test: (connection: DataConnection) => Promise<Result<void>>
+}>()
+
+const emit = defineEmits<{ save: [connection: DataConnection]; remove: [] }>()
+
+const cls = bem('report-hub-connection-form')
+
+/** 连接类型收敛为 MySQL / PostgreSQL（ADR-0003 决策 3） */
+const typeOptions: { label: string; value: ConnectionType }[] = [
+  { label: 'MySQL', value: 'mysql' },
+  { label: 'PostgreSQL', value: 'postgresql' }
+]
+
+const draft = reactive<DataConnection>({ ...props.connection })
+
+const defaultPort = computed(() => DEFAULT_CONNECTION_PORTS[draft.type])
+
+const portText = computed({
+  get: () => String(draft.port),
+  set: (value: string) => {
+    const n = Number(value)
+    draft.port = Number.isFinite(n) ? n : 0
+  }
+})
+
+const testing = ref(false)
+const testMessage = ref('')
+const testOk = ref(false)
+
+watch(
+  () => props.connection,
+  (conn) => {
+    testMessage.value = ''
+    testOk.value = false
+    Object.assign(draft, conn)
+  },
+  { immediate: true }
+)
+
+watch(
+  () => draft.type,
+  (type, prevType) => {
+    if (!prevType) return
+    draft.port = resolvePortOnTypeChange(prevType, type, draft.port)
+  }
+)
+
+async function onTest(): Promise<void> {
+  testing.value = true
+  testMessage.value = ''
+  const result = await props.test({ ...draft })
+  testing.value = false
+  testOk.value = result.ok
+  testMessage.value = result.ok
+    ? `连接成功：${draft.label}（${draft.host}:${draft.port}/${draft.database}）`
+    : result.error.message
+}
+
+function onSave(): void {
+  emit('save', { ...draft })
+}
+</script>