@veltra/sheet 2.4.0 → 2.5.1

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

@@ -1,114 +0,0 @@
-import type { CellAddress } from '@veltra/sheet-core'
-import type { SheetGrid } from '@veltra/sheet-core/grid'
-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

@@ -1,198 +0,0 @@
-<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

@@ -1,44 +0,0 @@
-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

@@ -1,136 +0,0 @@
-<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

@@ -1,77 +0,0 @@
-<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

@@ -1,124 +0,0 @@
-<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>