@veltra/sheet 2.4.0 → 2.5.0

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

@@ -1,387 +0,0 @@
-<template>
-  <section v-if="dataset" :class="cls.b">
-    <div :class="cls.e('head')">
-      <div :class="cls.e('rename')">
-        <span :class="cls.e('label')">数据集名称</span>
-        <u-input
-          :model-value="dataset.label"
-          size="small"
-          @update:model-value="(v) => patchDataset({ label: String(v ?? '') })"
-        />
-      </div>
-      <u-pop-confirm title="确定删除该数据集？" @confirm="emit('remove')">
-        <template #reference>
-          <u-button size="small" type="danger" plain>删除数据集</u-button>
-        </template>
-      </u-pop-confirm>
-    </div>
-
-    <div :class="cls.e('sql')">
-      <p :class="cls.e('section-title')">SQL 查询</p>
-      <u-code-editor
-        v-model="sqlDraft"
-        lang="sql"
-        :langs="['sql']"
-        :default-lines="6"
-        @change="onSqlChange"
-      />
-      <p v-if="describeError" :class="cls.e('sql-error')" role="alert">{{ describeError }}</p>
-    </div>
-
-    <div v-if="paramRows.length" :class="cls.e('params')">
-      <p :class="cls.e('section-title')">查询参数（从 SQL 自动提取）</p>
-      <u-table
-        :class="cls.e('param-table')"
-        :data="paramRows"
-        :columns="paramColumns"
-        border
-        text-ellipsis
-      >
-        <template #column:label="{ rowData }">
-          <u-input
-            :model-value="rowData.label"
-            size="small"
-            @update:model-value="(v) => patchParam(rowData.id, { label: String(v ?? '') })"
-          />
-        </template>
-        <template #column:type="{ rowData }">
-          <u-select
-            :model-value="rowData.type"
-            size="small"
-            :options="paramTypeOptions"
-            @update:model-value="(v) => patchParam(rowData.id, { type: v as QueryParamType })"
-          />
-        </template>
-        <template #column:defaultValue="{ rowData }">
-          <u-input
-            v-if="rowData.type === 'number'"
-            :model-value="String(rowData.defaultValue ?? '')"
-            size="small"
-            type="number"
-            @update:model-value="(v) => patchParam(rowData.id, { defaultValue: Number(v) })"
-          />
-          <u-input
-            v-else-if="rowData.type === 'date'"
-            :model-value="String(rowData.defaultValue ?? '')"
-            size="small"
-            type="date"
-            @update:model-value="(v) => patchParam(rowData.id, { defaultValue: v })"
-          />
-          <u-select
-            v-else-if="rowData.type === 'select'"
-            :model-value="String(rowData.defaultValue ?? '')"
-            size="small"
-            :options="rowData.options ?? []"
-            @update:model-value="(v) => patchParam(rowData.id, { defaultValue: v })"
-          />
-          <u-input
-            v-else
-            :model-value="formatDefaultValue(rowData.defaultValue)"
-            size="small"
-            @update:model-value="(v) => patchParam(rowData.id, { defaultValue: v })"
-          />
-        </template>
-        <template #column:options="{ rowData }">
-          <u-input
-            v-if="rowData.type === 'select'"
-            :model-value="formatOptions(rowData.options)"
-            size="small"
-            placeholder="华东|华东,华南|华南"
-            @update:model-value="
-              (v) => patchParam(rowData.id, { options: parseOptions(String(v ?? '')) })
-            "
-          />
-          <span v-else :class="cls.e('muted')">—</span>
-        </template>
-      </u-table>
-    </div>
-
-    <u-tabs v-model="detailTab" :items="detailTabItems" :class="cls.e('tabs')">
-      <template #schema>
-        <p v-if="describing" :class="cls.e('muted')">正在解析字段…</p>
-        <u-table
-          v-else
-          :class="cls.e('schema-table')"
-          :data="schemaRows"
-          :columns="schemaColumns"
-          border
-          text-ellipsis
-        >
-          <template #column:label="{ rowData }">
-            <u-input
-              :model-value="rowData.label"
-              size="small"
-              placeholder="中文显示名"
-              @update:model-value="(v) => patchFieldLabel(rowData.name, String(v ?? ''))"
-            />
-          </template>
-          <template #column:type="{ rowData }">
-            <u-tag size="small" :type="fieldTypeColor(rowData.type)">{{ rowData.type }}</u-tag>
-          </template>
-        </u-table>
-      </template>
-      <template #preview>
-        <div :class="cls.e('preview-actions')">
-          <u-button size="small" plain :loading="previewing" @click="runPreview">
-            刷新预览（按参数默认值取数）
-          </u-button>
-        </div>
-        <u-table
-          :class="cls.e('preview-table')"
-          :data="previewRows"
-          :columns="previewColumns"
-          show-index
-          border
-          text-ellipsis
-        />
-        <p v-if="previewError" :class="cls.e('preview-error')" role="alert">{{ previewError }}</p>
-      </template>
-    </u-tabs>
-  </section>
-</template>
-
-<script lang="ts" setup>
-import {
-  UButton,
-  UCodeEditor,
-  UInput,
-  UPopConfirm,
-  USelect,
-  UTable,
-  UTabs,
-  UTag,
-  defineTableColumns
-} from '@veltra/desktop'
-import type { ColorType } from '@veltra/utils'
-import { bem } from '@veltra/utils'
-import { computed, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
-
-import { buildParamDefs } from '../../report/params'
-import type { DatasetField, QueryParamDef, QueryParamType } from '../../report/types'
-import type { DatasetHubController, DesignerDataset } from './use-report-designer'
-
-defineOptions({ name: 'UReportHubDatasetEditor' })
-
-const props = defineProps<{ hub: DatasetHubController; datasetId: string }>()
-
-const emit = defineEmits<{ remove: [] }>()
-
-const cls = bem('report-hub-dataset-editor')
-
-const detailTab = ref('schema')
-const detailTabItems = [
-  { key: 'schema', name: '字段 Schema' },
-  { key: 'preview', name: '数据预览' }
-]
-
-const paramTypeOptions = [
-  { label: '文本', value: 'text' },
-  { label: '数字', value: 'number' },
-  { label: '日期', value: 'date' },
-  { label: '日期范围', value: 'date-range' },
-  { label: '下拉', value: 'select' }
-]
-
-const dataset = computed((): DesignerDataset | undefined =>
-  props.hub.datasets.value.find((item) => item.id === props.datasetId)
-)
-
-// ---- describe / 预览状态（声明先于下方 immediate watcher 使用） ----
-
-const describing = ref(false)
-const describeError = shallowRef('')
-let describeSeq = 0
-
-const previewing = ref(false)
-const previewError = shallowRef('')
-const previewRows = shallowRef<Record<string, unknown>[]>([])
-const previewFields = shallowRef<DatasetField[]>([])
-
-function resetPreview(): void {
-  previewing.value = false
-  previewError.value = ''
-  previewRows.value = []
-  previewFields.value = []
-}
-
-// ---- SQL 编辑：debounce 写回数据集并触发 describe ----
-
-const sqlDraft = ref('')
-let sqlTimer: ReturnType<typeof setTimeout> | undefined
-
-watch(
-  () => props.datasetId,
-  () => {
-    sqlDraft.value = dataset.value?.sql ?? ''
-    resetPreview()
-    void runDescribe()
-  },
-  { 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(() => {
-    sqlTimer = undefined
-    // 防抖窗口内切换了数据集则丢弃，避免把旧草稿写进新数据集
-    if (props.datasetId !== datasetId) return
-    props.hub.updateDataset(datasetId, { sql: value })
-    void runDescribe()
-  }, 280)
-}
-
-onBeforeUnmount(() => {
-  if (sqlTimer) clearTimeout(sqlTimer)
-})
-
-// ---- describe 字段解析（经连接器；结果写入数据集字段缓存） ----
-
-async function runDescribe(): Promise<void> {
-  const seq = ++describeSeq
-  if (!sqlDraft.value.trim()) {
-    describeError.value = ''
-    // SQL 清空 = 无查询：清掉字段缓存，字段面板不再残留旧字段
-    props.hub.updateDataset(props.datasetId, { fields: undefined })
-    return
-  }
-  describing.value = true
-  const result = await props.hub.describeDataset(props.datasetId)
-  if (seq !== describeSeq) return
-  describing.value = false
-  describeError.value = result.ok ? '' : result.error.message
-}
-
-// ---- 查询参数（`${param}` 提取 + 元数据覆盖） ----
-
-const paramRows = computed(() => {
-  const current = dataset.value
-  if (!current || !current.sql.trim()) return []
-  return buildParamDefs(current.sql, current.paramOverrides)
-})
-
-// ---- 字段 schema（describe 缓存 + fieldOverrides） ----
-
-const schemaRows = computed(() => {
-  const current = dataset.value
-  if (!current) return []
-  return (current.fields ?? []).map((field) => ({
-    ...field,
-    label: current.fieldOverrides?.[field.name]?.label ?? field.label
-  }))
-})
-
-// ---- 记录预览（按参数默认值经连接器取数） ----
-
-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)
-  previewing.value = false
-  if (result.ok) {
-    previewRows.value = result.data.rows
-    previewFields.value = result.data.fields
-  } else {
-    previewRows.value = []
-    previewError.value = result.error.message
-  }
-}
-
-watch(detailTab, (tab) => {
-  if (tab === 'preview') void runPreview()
-})
-
-// ---- 表格列与编辑 ----
-
-const paramColumns = defineTableColumns([
-  { key: 'id', name: '参数名', minWidth: 100 },
-  { key: 'label', name: '显示名', minWidth: 120 },
-  { key: 'type', name: '类型', width: 120 },
-  { key: 'defaultValue', name: '默认值', minWidth: 140 },
-  { key: 'options', name: '选项（select）', minWidth: 160 }
-])
-
-const schemaColumns = defineTableColumns([
-  { key: 'name', name: '字段名（name）', minWidth: 140 },
-  { key: 'label', name: '中文描述（label）', minWidth: 160 },
-  { key: 'type', name: '类型', width: 88 }
-])
-
-const previewColumns = computed(() =>
-  defineTableColumns(
-    previewFields.value.map((field) => ({
-      key: field.name,
-      name: field.label,
-      minWidth: field.type === 'number' ? 88 : 112
-    }))
-  )
-)
-
-function fieldTypeColor(type: DatasetField['type']): ColorType {
-  if (type === 'number') return 'success'
-  if (type === 'date') return 'warning'
-  return 'info'
-}
-
-function formatDefaultValue(value: unknown): string {
-  if (Array.isArray(value)) return value.join(', ')
-  return String(value ?? '')
-}
-
-function formatOptions(options?: { label: string; value: string }[]): string {
-  if (!options?.length) return ''
-  return options.map((item) => `${item.label}|${item.value}`).join(',')
-}
-
-function parseOptions(raw: string): { label: string; value: string }[] {
-  return raw
-    .split(',')
-    .map((part) => part.trim())
-    .filter(Boolean)
-    .map((part) => {
-      const [label, value] = part.split('|')
-      const text = (label ?? '').trim()
-      const val = (value ?? text).trim()
-      return { label: text, value: val }
-    })
-}
-
-function patchDataset(patch: Partial<Omit<DesignerDataset, 'id'>>): void {
-  props.hub.updateDataset(props.datasetId, patch)
-}
-
-function patchParam(paramId: string, patch: Partial<Omit<QueryParamDef, 'id'>>): void {
-  const current = dataset.value
-  if (!current) return
-  const nextOverrides = {
-    ...current.paramOverrides,
-    [paramId]: { ...current.paramOverrides?.[paramId], ...patch }
-  }
-  patchDataset({ paramOverrides: nextOverrides })
-}
-
-function patchFieldLabel(fieldName: string, label: string): void {
-  const current = dataset.value
-  if (!current) return
-  const nextOverrides = {
-    ...current.fieldOverrides,
-    [fieldName]: { ...current.fieldOverrides?.[fieldName], label }
-  }
-  patchDataset({ fieldOverrides: nextOverrides })
-}
-</script>

package/src/components/report/index.ts

@@ -1,2 +0,0 @@
-export { default as UReportViewer } from './report-viewer.vue'
-export { default as UReportDesigner } from './report-designer.vue'

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

@@ -1,33 +0,0 @@
-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) }
-}

package/src/components/report/print.ts

@@ -1,44 +0,0 @@
-/**
- * 打印 HTML 文档：隐藏 iframe 装载后调起浏览器打印，结束（或兜底超时）销毁。
- *
- * 路线取舍：相对 `window.open` 不被弹窗拦截；相对 `@media print` 直打宿主页，
- * 不侵入应用布局，也不受网格 canvas 虚拟滚动（只绘制视口）限制。
- * iframe 用 0×0 定位隐藏而非 `display:none`（部分浏览器不打印 none 的 iframe）。
- */
-export function printHtmlDocument(html: string): void {
-  const iframe = document.createElement('iframe')
-  iframe.setAttribute('aria-hidden', 'true')
-  iframe.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;'
-  document.body.appendChild(iframe)
-
-  const win = iframe.contentWindow
-  const doc = iframe.contentDocument
-  if (!win || !doc || typeof win.print !== 'function') {
-    iframe.remove()
-    throw new Error('当前环境不支持打印')
-  }
-
-  let cleaned = false
-  const cleanup = (): void => {
-    if (cleaned) return
-    cleaned = true
-    iframe.remove()
-  }
-  win.addEventListener('afterprint', cleanup)
-
-  doc.open()
-  doc.write(html)
-  doc.close()
-
-  // 等内嵌图片（data URL）解码完再打印，避免打印快照取到未解码图片
-  const decoding = Array.from(doc.images).map((img) =>
-    typeof img.decode === 'function' ? img.decode().catch(() => undefined) : Promise.resolve()
-  )
-  void Promise.all(decoding).then(() => {
-    if (cleaned) return
-    win.focus()
-    win.print()
-    // 兜底回收：afterprint 在部分环境不触发，或用户长期挂着打印对话框
-    setTimeout(cleanup, 60_000)
-  })
-}