@veltra/sheet 2.0.0 → 2.1.1

package/src/vue/insert-count-menu-item.vue

@@ -0,0 +1,69 @@
+<template>
+  <div
+    :class="cls.e('insert-count-menu')"
+    @click="confirm"
+    @keydown.enter.capture.prevent="confirm"
+    @keydown.escape.capture.prevent="close"
+  >
+    <span :class="cls.e('insert-count-prefix')">{{ prefix }}</span>
+    <u-number-input
+      v-model="count"
+      size="small"
+      :min="min"
+      :max="max"
+      :step="1"
+      :clearable="false"
+      :class="cls.e('insert-count-input')"
+      @click.stop
+    />
+    <span :class="cls.e('insert-count-suffix')">{{ suffix }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ContextmenuRootDIKey, UNumberInput } from '@veltra/desktop'
+import { bem } from '@veltra/utils'
+import { inject, ref } from 'vue'
+
+defineOptions({ name: 'USheetInsertCountMenuItem' })
+
+/**
+ * 右键菜单内嵌数量输入项：文案 + UNumberInput。
+ * 点击菜单项本体按当前值执行；输入框区域点击不冒泡。
+ * Enter 提交、Esc 关闭；提交/取消均经 ContextmenuRootDIKey 关闭菜单。
+ * Enter/Esc 使用 capture：UNumberInput 内部 `@keydown.stop`，冒泡阶段收不到。
+ */
+const props = withDefaults(
+  defineProps<{
+    /** 输入框前缀文案，如「在上方插入」 */
+    prefix: string
+    /** 输入框后缀文案，如「行」 */
+    suffix: string
+    /** 默认数量 */
+    defaultValue?: number
+    min?: number
+    max?: number
+  }>(),
+  { defaultValue: 1, min: 1, max: 1000 }
+)
+
+const emit = defineEmits<{ confirm: [n: number] }>()
+
+const cls = bem('sheet')
+const root = inject(ContextmenuRootDIKey, null)
+
+const count = ref(props.defaultValue)
+
+function clamp(n: number): number {
+  return Math.min(props.max, Math.max(props.min, Math.floor(n) || props.min))
+}
+
+function close(): void {
+  root?.onItemClickEnd()
+}
+
+function confirm(): void {
+  emit('confirm', clamp(count.value ?? props.defaultValue))
+  close()
+}
+</script>

package/src/vue/insert-image.ts

@@ -0,0 +1,90 @@
+import { message } from '@veltra/desktop'
+import type { SheetImageType } from '@veltra/sheet-core/core/image'
+
+import type { SheetContext } from '../tools/context'
+
+/** 文件选择 accept（工具栏弹层与右键菜单共用；不用裸 image/*） */
+export const INSERT_IMAGE_ACCEPT = '.png,.jpg,.jpeg,.gif,.svg,.webp'
+
+const MIME_TO_TYPE: Record<string, SheetImageType> = {
+  'image/png': 'png',
+  'image/jpeg': 'jpeg',
+  'image/jpg': 'jpeg',
+  'image/gif': 'gif',
+  'image/svg+xml': 'svg',
+  'image/webp': 'webp'
+}
+
+const EXT_TO_TYPE: Record<string, SheetImageType> = {
+  png: 'png',
+  jpg: 'jpeg',
+  jpeg: 'jpeg',
+  gif: 'gif',
+  svg: 'svg',
+  webp: 'webp'
+}
+
+/** MIME → hucre 图片类型；MIME 为空时回落扩展名 */
+export function resolveImageType(file: File): SheetImageType | undefined {
+  const mime = file.type.trim().toLowerCase()
+  if (mime && MIME_TO_TYPE[mime]) return MIME_TO_TYPE[mime]
+  const ext = file.name.includes('.') ? file.name.slice(file.name.lastIndexOf('.') + 1) : ''
+  return EXT_TO_TYPE[ext.toLowerCase()]
+}
+
+/**
+ * 从本地 File 插入浮动图片：读字节 → 映射类型 → 锚定活动格 → ctx.insertImage。
+ * 不支持的格式 / 无活动格时 message.error 提示并返回 undefined。
+ */
+export async function insertImageFromFile(
+  ctx: SheetContext,
+  file: File
+): Promise<string | undefined> {
+  const type = resolveImageType(file)
+  if (!type) {
+    message.error('不支持的图片格式，请选择 png / jpeg / gif / svg / webp')
+    return undefined
+  }
+  const active = ctx.getSelection().activeCell
+  if (!active) {
+    message.error('请先选择单元格')
+    return undefined
+  }
+  const buffer = await file.arrayBuffer()
+  return ctx.insertImage({
+    data: new Uint8Array(buffer),
+    type,
+    anchor: { from: { row: active.row, col: active.col } }
+  })
+}
+
+/**
+ * 拉起系统文件选择框（右键菜单用；不用 UFilePicker——无编程式打开 API）。
+ * 选中文件后走 insertImageFromFile。
+ */
+export function pickAndInsertImage(ctx: SheetContext): void {
+  const input = document.createElement('input')
+  input.type = 'file'
+  input.accept = INSERT_IMAGE_ACCEPT
+  input.hidden = true
+  const cleanup = (): void => {
+    input.remove()
+  }
+  input.addEventListener('change', () => {
+    const file = input.files?.[0]
+    cleanup()
+    if (file) void insertImageFromFile(ctx, file)
+  })
+  // 取消选择时也清理节点（focus 回窗口后延迟判定）
+  window.addEventListener(
+    'focus',
+    () => {
+      setTimeout(() => {
+        if (document.body.contains(input) && !input.files?.length) cleanup()
+      }, 300)
+    },
+    { once: true }
+  )
+  document.body.appendChild(input)
+  input.click()
+}

package/src/vue/parsing.ts

@@ -0,0 +1,11 @@
+import type { InjectionKey, Ref } from 'vue'
+
+/**
+ * xlsx 解析中状态（历史 inject key，现由 import-file 直接写 sheet.vue 持有的 ref）。
+ * 保留导出以便测试或扩展仍可 provide/inject。
+ */
+export const SHEET_PARSING_KEY: InjectionKey<Ref<boolean>> = Symbol('sheet-parsing')
+
+/** 解析进度（worker 分片构建期间 done/total；readXlsx 同步解析段无进度） */
+export const SHEET_PARSE_PROGRESS_KEY: InjectionKey<Ref<{ done: number; total: number }>> =
+  Symbol('sheet-parse-progress')

package/src/vue/popup-helpers.ts

@@ -0,0 +1,50 @@
+import type { CellRange } from '@veltra/sheet-core/core/address'
+import type { BorderPreset } from '@veltra/sheet-core/core/style/border-presets'
+import { BORDER_STYLE_WIDTH, type BorderLineStyle } from '@veltra/sheet-core/core/style/types'
+
+import type { SheetContext } from '../tools/context'
+
+/** 当前选区（ranges[0] 优先；无区域选区时用活动格单格） */
+export function currentRange(context: SheetContext): CellRange | null {
+  const { activeCell, ranges } = context.getSelection()
+  return ranges[0] ?? (activeCell ? { start: activeCell, end: activeCell } : null)
+}
+
+// ─── 边框面板常量 ────────────────────────────────────────────
+
+export const BORDER_LINE_STYLES: BorderLineStyle[] = ['thin', 'medium', 'thick', 'dashed', 'dotted']
+
+export const BORDER_LINE_TITLES: Record<BorderLineStyle, string> = {
+  thin: '细线',
+  medium: '中粗线',
+  thick: '粗线',
+  dashed: '虚线',
+  dotted: '点线'
+}
+
+/** 田字格 glyph 标识（与预设 id 对齐，供 SVG 高亮对应边） */
+export type BorderPresetGlyph = BorderPreset
+
+export const BORDER_PRESETS: ReadonlyArray<{
+  id: BorderPreset
+  title: string
+  glyph: BorderPresetGlyph
+}> = [
+  { id: 'outer', title: '外边框', glyph: 'outer' },
+  { id: 'inner', title: '内边框', glyph: 'inner' },
+  { id: 'all', title: '所有边框', glyph: 'all' },
+  { id: 'top', title: '上边框', glyph: 'top' },
+  { id: 'bottom', title: '下边框', glyph: 'bottom' },
+  { id: 'left', title: '左边框', glyph: 'left' },
+  { id: 'right', title: '右边框', glyph: 'right' },
+  { id: 'none', title: '无边框', glyph: 'none' }
+]
+
+/** 边框预设 id（= core BorderPreset；预设补丁生成见 core/style/border-presets） */
+export type BorderPresetId = BorderPreset
+
+/** 线型示例条样式（边框面板的线型按钮 swatch） */
+export function lineSwatchStyle(line: BorderLineStyle): Record<string, string> {
+  const dash = line === 'dashed' ? 'dashed' : line === 'dotted' ? 'dotted' : 'solid'
+  return { borderBottom: `${BORDER_STYLE_WIDTH[line]}px ${dash} #000` }
+}

package/src/vue/popups/border-popup.vue

@@ -0,0 +1,93 @@
+<template>
+  <div :class="cls.e('popup-row')">
+    <span :class="cls.e('popup-label')">线型</span>
+    <button
+      v-for="line in BORDER_LINE_STYLES"
+      :key="line"
+      type="button"
+      :class="[cls.e('popup-line'), bem.is('active', borderLineStyle === line)]"
+      :title="BORDER_LINE_TITLES[line]"
+      @click="borderLineStyle = line"
+    >
+      <span :class="cls.e('popup-line-swatch')" :style="lineSwatchStyle(line)" />
+    </button>
+  </div>
+  <div :class="cls.e('popup-row')">
+    <span :class="cls.e('popup-label')">颜色</span>
+    <u-palette
+      :model-value="borderColor"
+      @update:model-value="(value) => (borderColor = value || borderColor)"
+    />
+  </div>
+  <div :class="cls.e('popup-row')">
+    <button
+      v-for="preset in BORDER_PRESETS"
+      :key="preset.id"
+      type="button"
+      :class="cls.e('popup-preset')"
+      :title="preset.title"
+      @click="applyBorderPreset(preset.id)"
+    >
+      <u-sheet-border-preset-glyph :glyph="preset.glyph" />
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UPalette } from '@veltra/desktop'
+import type { SetCellStyleItem } from '@veltra/sheet-core/core/command/set-cell-style'
+import { buildBorderPresetItems } from '@veltra/sheet-core/core/style/border-presets'
+import {
+  BORDER_STYLE_WIDTH,
+  type BorderEdge,
+  type BorderLineStyle
+} from '@veltra/sheet-core/core/style/types'
+import { bem } from '@veltra/utils'
+import { ref } from 'vue'
+
+import type { SheetContext } from '../../tools/context'
+import {
+  BORDER_LINE_STYLES,
+  BORDER_LINE_TITLES,
+  BORDER_PRESETS,
+  currentRange,
+  lineSwatchStyle,
+  type BorderPresetId
+} from '../popup-helpers'
+import USheetBorderPresetGlyph from './border-preset-glyph.vue'
+
+defineOptions({ name: 'USheetBorderPopup' })
+
+/**
+ * 边框面板（外边框 / 内边框 / 所有边框 / 单侧边框 / 无边框预设 + 线型 / 颜色）。
+ * 预设补丁由 core/style/border-presets 生成（含邻居格共享边同步，对齐
+ * Excel「写入时同步、最近设置生效」）；面板打开期间的写入由
+ * use-tool-popup 事务包裹为一个 undo 单元。
+ */
+const props = defineProps<{
+  /** 工具上下文（写入走命令系统，天然可撤销） */
+  context: SheetContext
+}>()
+
+const cls = bem('sheet')
+
+/** 当前线型 / 颜色 */
+const borderLineStyle = ref<BorderLineStyle>('thin')
+const borderColor = ref('#000000')
+
+/** 应用边框预设：一次 executeCommand（items 批量，含邻居同步补丁）= 一个 undo 单元 */
+function applyBorderPreset(preset: BorderPresetId): void {
+  const range = currentRange(props.context)
+  if (!range) return
+  const edge: BorderEdge = {
+    style: borderLineStyle.value,
+    width: BORDER_STYLE_WIDTH[borderLineStyle.value],
+    color: borderColor.value
+  }
+  const items: SetCellStyleItem[] = buildBorderPresetItems(range, preset, edge, (addr) =>
+    props.context.getCellStyle(addr)
+  ).map(({ addr, patch }) => ({ addr, partial: patch }))
+  if (items.length === 0) return
+  props.context.executeCommand('sheet.command.set-cell-style', { items })
+}
+</script>

package/src/vue/popups/border-preset-glyph.vue

@@ -0,0 +1,111 @@
+<template>
+  <svg
+    :class="cls.e('popup-preset-glyph')"
+    viewBox="0 0 16 16"
+    width="16"
+    height="16"
+    aria-hidden="true"
+  >
+    <!-- 田字格：外框 + 十字；高亮边用 currentColor，其余用 muted -->
+    <line
+      x1="2"
+      y1="2"
+      x2="14"
+      y2="2"
+      :stroke="stroke(edges.top)"
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+    <line
+      x1="2"
+      y1="14"
+      x2="14"
+      y2="14"
+      :stroke="stroke(edges.bottom)"
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+    <line
+      x1="2"
+      y1="2"
+      x2="2"
+      y2="14"
+      :stroke="stroke(edges.left)"
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+    <line
+      x1="14"
+      y1="2"
+      x2="14"
+      y2="14"
+      :stroke="stroke(edges.right)"
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+    <line
+      x1="2"
+      y1="8"
+      x2="14"
+      y2="8"
+      :stroke="stroke(edges.innerH)"
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+    <line
+      x1="8"
+      y1="2"
+      x2="8"
+      y2="14"
+      :stroke="stroke(edges.innerV)"
+      stroke-width="1.5"
+      stroke-linecap="square"
+    />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { BorderPresetGlyph } from '../popup-helpers'
+
+defineOptions({ name: 'USheetBorderPresetGlyph' })
+
+/**
+ * 边框预设田字格 glyph（包内联 SVG，不进 @veltra/icons）。
+ * 3×3 网格（外框 + 十字），按 glyph 高亮对应边。
+ */
+const props = defineProps<{ glyph: BorderPresetGlyph }>()
+
+const cls = bem('sheet')
+
+/** 田字格各线段是否高亮 */
+interface GlyphEdges {
+  top: boolean
+  bottom: boolean
+  left: boolean
+  right: boolean
+  innerH: boolean
+  innerV: boolean
+}
+
+const MUTED = 'var(--u-border-muted-color, #c0c4cc)'
+const ACTIVE = 'currentColor'
+
+function stroke(active: boolean): string {
+  return active ? ACTIVE : MUTED
+}
+
+const edges = computed<GlyphEdges>(() => {
+  const g = props.glyph
+  return {
+    top: g === 'outer' || g === 'all' || g === 'top',
+    bottom: g === 'outer' || g === 'all' || g === 'bottom',
+    left: g === 'outer' || g === 'all' || g === 'left',
+    right: g === 'outer' || g === 'all' || g === 'right',
+    innerH: g === 'inner' || g === 'all',
+    innerV: g === 'inner' || g === 'all'
+  }
+})
+</script>

package/src/vue/popups/export-popup.vue

@@ -0,0 +1,52 @@
+<template>
+  <div :class="cls.e('export-menu')">
+    <button type="button" :class="cls.e('export-option')" @click="exportXlsx">
+      导出 Excel (.xlsx)
+    </button>
+    <button type="button" :class="cls.e('export-option')" @click="exportCsv">
+      导出 CSV (.csv)
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { message } from '@veltra/desktop'
+import { bem } from '@veltra/utils'
+
+import type { SheetContext } from '../../tools/context'
+import { exportSheetCsvFile, exportWorkbookFile } from '../../tools/download'
+
+defineOptions({ name: 'USheetExportPopup' })
+
+/**
+ * 导出选择面板（xlsx / csv）。不参与面板事务：点击即下载并关闭。
+ */
+const props = defineProps<{ context: SheetContext }>()
+
+const emit = defineEmits<{ close: [] }>()
+
+const cls = bem('sheet')
+
+function exportXlsx(): void {
+  emit('close')
+  // 大工作簿序列化在 worker 中进行（数秒）：给常驻反馈，失败（如 sheet 名含
+  // Excel 非法字符，hucre 1.0 写入校验抛 InvalidArgumentError）明确报错，
+  // 绝不静默失败
+  const loading = message({ message: '正在导出…', duration: 0 })
+  exportWorkbookFile(props.context)
+    .then(() => loading.close())
+    .catch((err: unknown) => {
+      loading.close()
+      message.error(`导出失败：${err instanceof Error ? err.message : String(err)}`)
+    })
+}
+
+function exportCsv(): void {
+  emit('close')
+  try {
+    exportSheetCsvFile(props.context)
+  } catch (err) {
+    message.error(`导出失败：${err instanceof Error ? err.message : String(err)}`)
+  }
+}
+</script>

package/src/vue/popups/fill-color-popup.vue

@@ -0,0 +1,39 @@
+<template>
+  <u-palette :model-value="fillColor" @update:model-value="applyFillColor" />
+</template>
+
+<script lang="ts" setup>
+import { UPalette } from '@veltra/desktop'
+import { onMounted, ref } from 'vue'
+
+import type { SheetContext } from '../../tools/context'
+import { currentRange } from '../popup-helpers'
+
+defineOptions({ name: 'USheetFillColorPopup' })
+
+/**
+ * 填充颜色面板（UPalette 调色板 + 无填充 = 清除 fill 保留边框）。
+ * 面板打开期间的写入由 use-tool-popup 事务包裹为一个 undo 单元。
+ */
+const props = defineProps<{
+  /** 工具上下文（写入走命令系统，天然可撤销） */
+  context: SheetContext
+}>()
+
+/** 填充颜色（'' = 无填充） */
+const fillColor = ref('')
+
+// 打开时初始化为活动格当前填充色
+onMounted(() => {
+  const active = props.context.getSelection().activeCell
+  const style = active ? props.context.getCellStyle(active) : undefined
+  fillColor.value = style?.fill?.color ?? ''
+})
+
+/** 填充颜色变化（'' = 无填充：清除 fill 保留边框） */
+function applyFillColor(color: string): void {
+  const range = currentRange(props.context)
+  if (!range) return
+  props.context.setCellStyle(range, color ? { fill: { color } } : { fill: {} })
+}
+</script>

package/src/vue/popups/find-popup.vue

@@ -0,0 +1,111 @@
+<template>
+  <div :class="cls.e('find-row')">
+    <u-input
+      v-model="findQuery"
+      :placeholder="'查找内容'"
+      size="small"
+      :class="cls.e('find-input')"
+      @keydown="handleFindKeydown"
+    />
+    <span :class="cls.e('find-count')">{{ findCountText }}</span>
+    <button
+      type="button"
+      :class="cls.e('find-nav')"
+      :disabled="!canFind"
+      title="上一个（Shift+Enter）"
+      @click="findPrevious"
+    >
+      ↑
+    </button>
+    <button
+      type="button"
+      :class="cls.e('find-nav')"
+      :disabled="!canFind"
+      title="下一个（Enter）"
+      @click="findForward"
+    >
+      ↓
+    </button>
+    <button type="button" :class="cls.e('find-close')" title="关闭" @click="emit('close')">
+      ✕
+    </button>
+  </div>
+  <div :class="cls.e('find-row')">
+    <u-input
+      v-model="findReplace"
+      placeholder="替换为"
+      size="small"
+      :class="cls.e('find-input')"
+      @keydown="handleFindKeydown"
+    />
+    <button
+      type="button"
+      :class="cls.e('find-btn')"
+      :disabled="!canReplace"
+      @click="replaceCurrent"
+    >
+      替换
+    </button>
+    <button type="button" :class="cls.e('find-btn')" :disabled="!canReplace" @click="replaceAll">
+      全部替换
+    </button>
+  </div>
+  <div :class="cls.e('find-row')">
+    <label :class="cls.e('find-option')">
+      <input v-model="caseSensitive" type="checkbox" />区分大小写
+    </label>
+    <label :class="cls.e('find-option')">
+      <input v-model="wholeCell" type="checkbox" />整格匹配
+    </label>
+    <label :class="cls.e('find-option')">
+      查找
+      <select v-model="searchIn" :class="cls.e('find-select')">
+        <option value="value">按显示值</option>
+        <option value="formula">按公式</option>
+      </select>
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { UInput } from '@veltra/desktop'
+import type { Sheet } from '@veltra/sheet-core/core/sheet'
+import { bem } from '@veltra/utils'
+
+import type { SheetContext } from '../../tools/context'
+import { useFindReplace } from '../use-find-replace'
+
+defineOptions({ name: 'USheetFindPopup' })
+
+/**
+ * 查找条（关键词 / 上一个 / 下一个 / 命中计数 / 关闭 + 替换 / 全部替换）。
+ * 不参与面板事务：每次替换独立为一个 undo 单元；全部替换 = 一次批量 = 单 undo 单元。
+ * 弹层随 v-if 挂载 / 销毁，每次打开都是全新状态（关键词清空）。
+ */
+const props = defineProps<{
+  /** 目标 sheet（弹层存活期间固定；tab 切换会关闭弹层） */
+  sheet: Sheet
+  /** 工具上下文（命中定位与替换写入入口） */
+  context: SheetContext
+}>()
+
+const emit = defineEmits<{ close: [] }>()
+
+const cls = bem('sheet')
+
+const {
+  findQuery,
+  findReplace,
+  caseSensitive,
+  wholeCell,
+  searchIn,
+  canFind,
+  canReplace,
+  findCountText,
+  findForward,
+  findPrevious,
+  handleFindKeydown,
+  replaceCurrent,
+  replaceAll
+} = useFindReplace({ getSheet: () => props.sheet, context: props.context })
+</script>

package/src/vue/popups/font-color-popup.vue

@@ -0,0 +1,39 @@
+<template>
+  <u-palette :model-value="fontColor" @update:model-value="applyFontColor" />
+</template>
+
+<script lang="ts" setup>
+import { UPalette } from '@veltra/desktop'
+import { onMounted, ref } from 'vue'
+
+import type { SheetContext } from '../../tools/context'
+import { currentRange } from '../popup-helpers'
+
+defineOptions({ name: 'USheetFontColorPopup' })
+
+/**
+ * 字体颜色面板（UPalette；空值 = 清除 color 保留其它字体字段）。
+ * 面板打开期间的写入由 use-tool-popup 事务包裹为一个 undo 单元。
+ */
+const props = defineProps<{
+  /** 工具上下文（写入走命令系统，天然可撤销） */
+  context: SheetContext
+}>()
+
+/** 字体颜色（'' = 自动/默认） */
+const fontColor = ref('')
+
+// 打开时初始化为活动格当前字体色
+onMounted(() => {
+  const active = props.context.getSelection().activeCell
+  const style = active ? props.context.getCellStyle(active) : undefined
+  fontColor.value = style?.font?.color ?? ''
+})
+
+/** 字体颜色变化（'' = 清除 color） */
+function applyFontColor(color: string): void {
+  const range = currentRange(props.context)
+  if (!range) return
+  props.context.setCellStyle(range, color ? { font: { color } } : { font: { color: null } })
+}
+</script>