@veltra/sheet 2.0.1 → 2.1.1

package/src/vue/sheet.vue

@@ -1,51 +1,99 @@
 <template>
-  <div :class="cls.b">
-    <div v-if="showToolbar" :class="cls.e('toolbar')">
-      <template v-for="(group, groupIndex) in toolGroups" :key="group.name">
-        <span v-if="groupIndex > 0" :class="cls.e('toolbar-divider')" />
-        <button
-          v-for="item in group.tools"
-          :key="item.tool.id"
-          type="button"
-          :class="cls.e('tool')"
-          :disabled="item.disabled"
-          :title="item.tool.tooltip ?? item.tool.title"
-          @click="handleToolClick(item.tool)"
-        >
-          <component :is="item.tool.icon" v-if="item.tool.icon" :class="cls.e('tool-icon')" />
-          <span>{{ item.tool.title }}</span>
-        </button>
-      </template>
+  <div ref="rootRef" :class="cls.b">
+    <div :class="cls.e('toolbar-wrap')">
+      <u-sheet-toolbar v-if="showToolbar" :groups="toolGroups" @tool-click="handleToolClick" />
+
+      <!-- 弹层型工具面板（填充/边框/字体色/字号/查找/插入图片/导出）：UDropdown（Teleport 到
+           #pop-container + floating-ui 定位：锚点跟随触发按钮、自动翻转/边界位移；
+           触发元素滚动/窗口缩放时自动关闭）。面板交互走 SheetContext 命令入口。
+           导入无弹层：点击直接系统文件选择（见 handleToolClick → pickAndImportFile） -->
+      <u-dropdown
+        ref="popupDropdownRef"
+        trigger="custom"
+        :visible="popupTool !== null"
+        width="auto"
+        @update:visible="handlePopupVisible"
+      >
+        <template #content>
+          <div v-if="popupTool" :class="cls.e('popup')" @click.stop>
+            <u-sheet-fill-color-popup v-if="popupTool.popup === 'fill-color'" :context="context" />
+            <u-sheet-border-popup v-else-if="popupTool.popup === 'border'" :context="context" />
+            <u-sheet-font-color-popup
+              v-else-if="popupTool.popup === 'font-color'"
+              :context="context"
+            />
+            <u-sheet-font-size-popup
+              v-else-if="popupTool.popup === 'font-size'"
+              :context="context"
+            />
+            <u-sheet-find-popup
+              v-else-if="popupTool.popup === 'find'"
+              :sheet="activeSheet"
+              :context="context"
+              @close="closePopup"
+            />
+            <u-sheet-insert-image-popup
+              v-else-if="popupTool.popup === 'insert-image'"
+              :context="context"
+              @close="closePopup"
+            />
+            <u-sheet-export-popup
+              v-else-if="popupTool.popup === 'export'"
+              :context="context"
+              @close="closePopup"
+            />
+          </div>
+        </template>
+      </u-dropdown>
     </div>
 
-    <div ref="gridRef" :class="cls.e('grid')" />
-
-    <div v-if="showTabs" :class="cls.e('tabs')">
-      <button
-        v-for="(sheet, index) in sheetList"
-        :key="sheet.name"
-        type="button"
-        :class="[cls.e('tab'), bem.is('active', index === activeIndex)]"
-        @click="handleTabClick(index)"
-      >
-        {{ sheet.name }}
-      </button>
+    <u-formula-bar
+      v-if="showFormulaBar"
+      ref="formulaBarRef"
+      :sheet="activeSheet"
+      :context="context"
+    />
+
+    <div ref="gridRef" :class="cls.e('grid')">
+      <!-- 导入解析覆盖层（自绘，不动 desktop Loading 组件）：遮罩 + 动画 + 文字
+           同一层，动画在上、文字在下，不存在被遮罩掩盖的问题 -->
+      <div v-if="parsing" :class="cls.e('loading-mask')">
+        <div :class="cls.e('loading-spinner')"></div>
+        <div :class="cls.e('loading-text')">{{ parseText }}</div>
+      </div>
     </div>
+
+    <u-sheet-tabs
+      v-if="showTabs"
+      :workbook="workbook"
+      :sheet-list="sheetList"
+      :active-index="activeIndex"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { contextmenu } from '@veltra/desktop'
+import { UDropdown } from '@veltra/desktop'
 import { bem } from '@veltra/utils'
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch } from 'vue'
-
-import { rangeContainsAddress } from '../core/address'
-import type { Sheet } from '../core/sheet'
-import { Workbook } from '../core/workbook'
-import { SheetGrid, type SheetGridContextMenuInfo } from '../grid/sheet-grid'
-import { createSheetContext } from '../tools/context'
-import { defaultToolRegistry, type SheetTool } from '../tools/registry'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+
+import type { SheetTool } from '../tools/registry'
 import type { SheetEmits, SheetProps, _SheetExposed } from '../types'
+import UFormulaBar from './formula-bar.vue'
+import { pickAndImportFile } from './import-file'
+import USheetBorderPopup from './popups/border-popup.vue'
+import USheetExportPopup from './popups/export-popup.vue'
+import USheetFillColorPopup from './popups/fill-color-popup.vue'
+import USheetFindPopup from './popups/find-popup.vue'
+import USheetFontColorPopup from './popups/font-color-popup.vue'
+import USheetFontSizePopup from './popups/font-size-popup.vue'
+import USheetInsertImagePopup from './popups/insert-image-popup.vue'
+import USheetTabs from './sheet-tabs.vue'
+import USheetToolbar from './sheet-toolbar.vue'
+import { useSheetGrid } from './use-sheet-grid'
+import { useSheetState } from './use-sheet-state'
+import { useToolGroups } from './use-tool-groups'
+import { useToolPopup } from './use-tool-popup'
 
 defineOptions({ name: 'USheet' })
 
@@ -53,6 +101,7 @@ const props = withDefaults(defineProps<SheetProps>(), {
   rows: 100,
   cols: 26,
   showToolbar: true,
+  showFormulaBar: true,
   showTabs: true
 })
 
@@ -60,175 +109,101 @@ const emit = defineEmits<SheetEmits>()
 
 const cls = bem('sheet')
 
-/** 工作簿：外部传入或内部自建（单 sheet） */
-const internalWorkbook = new Workbook()
-const workbook = computed(() => props.workbook ?? internalWorkbook)
-
-/** 激活 sheet 索引（镜像 workbook.activeSheetIndex，经事件同步） */
-const activeIndex = ref(workbook.value.activeSheetIndex)
-/** sheet 列表（tabs 渲染；由 sheets-change 同步） */
-const sheetList = shallowRef<Sheet[]>(workbook.value.getSheets())
-const activeSheet = computed(() => sheetList.value[activeIndex.value] ?? workbook.value.activeSheet)
+/** 根容器 ref：Ctrl/Cmd+F 判定焦点是否在本实例内（#6，避免劫持浏览器查找） */
+const rootRef = useTemplateRef<HTMLElement>('rootRef')
 
-/** 工具上下文：动态解析活动 sheet，tab 切换后自动指向当前 sheet */
-const context = createSheetContext(() => activeSheet.value)
-
-const gridRef = useTemplateRef<HTMLElement>('gridRef')
-let grid: SheetGrid | undefined
+// ─── 状态源（workbook / sheet 列表 / 活动 sheet / 工具上下文）────────
+// hooks 引用的 closePopup / rebuildGrid 由下方组合提供：箭头函数在事件触发时才
+// 求值（彼时已完成全部 setup），组合声明顺序不构成循环依赖。
 
-// ─── 工具栏状态刷新 ─────────────────────────────────────────
-// 工具 visible/disabled 是 (ctx) => boolean 纯函数，状态源变化时 bump 触发重算
-
-const stateTick = ref(0)
-const bump = (): void => {
-  stateTick.value++
-}
+const { workbook, activeIndex, sheetList, activeSheet, context, stateTick, syncFromWorkbook } =
+  useSheetState(props, emit, {
+    onBeforeSheetChange: () => closePopup(),
+    rebuildGrid: () => rebuildGrid(),
+    activateGrid: () => activateGrid(),
+    pruneCache: (sheets) => pruneCache(sheets)
+  })
 
-let disposeSheetEvents: (() => void)[] = []
-/** 订阅活动 sheet 的状态源（tab 切换 / 工作簿变更时重绑） */
-function bindSheetEvents(sheet: Sheet): void {
-  for (const dispose of disposeSheetEvents) dispose()
-  disposeSheetEvents = [
-    sheet.on('selection-change', bump),
-    sheet.on('history-change', bump),
-    sheet.on('cell-change', bump),
-    sheet.on('merge-change', bump)
-  ]
-}
+// ─── 弹层型工具编排（打开 / 关闭 / 面板事务）─────────────────────
+
+const {
+  popupTool,
+  popupAnchor,
+  closePopup,
+  handleToolClick: openOrRunTool
+} = useToolPopup(context, rootRef)
+// xlsx 解析中（worker）：grid 容器显示自绘覆盖层（import-file 写入 parsing /
+// parseProgress；遮罩 + 动画 + 文字同层——动画在上、文字在下）
+const parsing = ref(false)
+const parseProgress = ref({ done: 0, total: 0 })
+const parseText = computed(() =>
+  parseProgress.value.total > 0
+    ? `正在解析… ${parseProgress.value.done}/${parseProgress.value.total}`
+    : '正在读取文件结构…'
+)
 
-let disposeWorkbookEvents: (() => void)[] = []
-function bindWorkbookEvents(wb: Workbook): void {
-  for (const dispose of disposeWorkbookEvents) dispose()
-  disposeWorkbookEvents = [
-    wb.on('sheets-change', ({ sheets }) => {
-      sheetList.value = sheets
-      bump()
-    }),
-    wb.on('active-sheet-change', ({ sheet, index }) => {
-      activeIndex.value = index
-      bindSheetEvents(sheet)
-      rebuildGrid()
-      bump()
-      emit('active-sheet-change', { sheet, index })
+/** 导入无弹层：直接系统文件选择；其余工具走 useToolPopup */
+function handleToolClick(tool: SheetTool, event?: MouseEvent): void {
+  if (tool.id === 'import') {
+    if (tool.disabled?.(context)) return
+    pickAndImportFile({
+      workbook: workbook.value,
+      activeSheet: activeSheet.value,
+      parsing,
+      parseProgress,
+      onCsvImported: () => rebuildGrid(),
+      onWorkbookReplaced: () => syncFromWorkbook()
     })
-  ]
+    return
+  }
+  openOrRunTool(tool, event)
 }
 
-const offRegistryChange = defaultToolRegistry.onChange(bump)
-
-// ─── 工具栏 ────────────────────────────────────────────────
-
-const toolGroups = computed(() => {
-  void stateTick.value // 依赖状态源：选区 / 历史 / 单元格 / 合并 / 注册表
-  return defaultToolRegistry
-    .getGroups()
-    .map((group) => ({
-      name: group.name,
-      tools: group.tools
-        .map((tool) => ({
-          tool,
-          visible: tool.visible?.(context) ?? true,
-          disabled: tool.disabled?.(context) ?? false
-        }))
-        .filter((item) => item.visible)
-    }))
-    .filter((group) => group.tools.length > 0)
+// ─── UDropdown 面板：锚点跟随触发按钮（floating-ui 定位）──────────
+
+const popupDropdownRef = useTemplateRef<InstanceType<typeof UDropdown>>('popupDropdownRef')
+
+// popupTool 变化 → 打开（传触发按钮作锚点）/ 关闭。
+// 必须同步调用 open()：usePop 在 content 挂载时执行定位与滚动监听，
+// 若等 nextTick 后再设 customTriggerRef，usePop 首次 update 时锚点缺失 → 面板不定位。
+watch(popupTool, () => {
+  const dropdown = popupDropdownRef.value
+  if (!dropdown) return
+  if (popupTool.value) {
+    // 触发元素移动（工具栏滚动 / 窗口缩放）由 usePop 监听 → UDropdown 自动关闭
+    dropdown.open({ trigger: popupAnchor.value ?? undefined })
+  } else {
+    dropdown.close()
+  }
 })
 
-function handleToolClick(tool: SheetTool): void {
-  if (tool.disabled?.(context)) return
-  tool.onClick(context)
+/** UDropdown 内部关闭（滚动 / resize / transition 结束）→ 同步状态并提交面板事务 */
+function handlePopupVisible(visible: boolean): void {
+  if (!visible) closePopup()
 }
 
-// ─── sheet tabs ─────────────────────────────────────────────
+// ─── 工具栏分组视图模型 ────────────────────────────────────────
 
-function handleTabClick(index: number): void {
-  if (index === activeIndex.value) return
-  const sheet = sheetList.value[index]
-  if (sheet) workbook.value.activateSheet(sheet.name)
-}
-
-// ─── 右键菜单（合并 / 取消合并，语义对齐内置工具）────────────
-
-function handleContextMenu(info: SheetGridContextMenuInfo): void {
-  // body 格：若点击落在当前选区外则先选中该格；行号/列头保留当前选区
-  if (info.addr) {
-    const inSelection = context
-      .getSelection()
-      .ranges.some((range) => rangeContainsAddress(range, info.addr!))
-    if (!inSelection) context.selectCell(info.addr)
-  }
+const toolGroups = useToolGroups(context, stateTick)
 
-  const mergeTool = defaultToolRegistry.get('merge')
-  const unmergeTool = defaultToolRegistry.get('unmerge')
-
-  contextmenu.pop({
-    mousePosition: { x: info.x, y: info.y },
-    width: 180,
-    menus: [
-      {
-        label: '合并单元格',
-        disabled: mergeTool?.disabled?.(context) ?? true,
-        callback: () => mergeTool?.onClick(context)
-      },
-      {
-        label: '取消合并单元格',
-        disabled: unmergeTool?.disabled?.(context) ?? true,
-        callback: () => unmergeTool?.onClick(context)
-      }
-    ]
-  })
-}
+// ─── grid 生命周期（重建 / 右键菜单 / 公式栏编辑镜像）────────────────
 
-// ─── grid 生命周期 ──────────────────────────────────────────
-
-function rebuildGrid(): void {
-  const container = gridRef.value
-  if (!container) return
-  grid?.release()
-  grid = new SheetGrid({
-    container,
-    sheet: activeSheet.value,
-    rows: props.rows,
-    cols: props.cols,
-    onContextMenu: handleContextMenu
-  })
-}
-
-onMounted(() => {
-  bindWorkbookEvents(workbook.value)
-  bindSheetEvents(activeSheet.value)
-  rebuildGrid()
-})
-
-watch(() => [props.rows, props.cols], rebuildGrid)
-
-watch(
-  () => props.workbook,
-  (wb, prev) => {
-    if (wb === prev) return
-    activeIndex.value = workbook.value.activeSheetIndex
-    sheetList.value = workbook.value.getSheets()
-    bindWorkbookEvents(workbook.value)
-    bindSheetEvents(activeSheet.value)
-    rebuildGrid()
-    bump()
-  }
-)
+const gridRef = useTemplateRef<HTMLElement>('gridRef')
+const formulaBarRef = useTemplateRef<InstanceType<typeof UFormulaBar>>('formulaBarRef')
 
-onBeforeUnmount(() => {
-  offRegistryChange()
-  for (const dispose of disposeWorkbookEvents) dispose()
-  for (const dispose of disposeSheetEvents) dispose()
-  grid?.release()
-  grid = undefined
+const { rebuildGrid, activateGrid, pruneCache, getGrid } = useSheetGrid({
+  props,
+  gridRef,
+  getActiveSheet: () => activeSheet.value,
+  context,
+  formulaBarRef
 })
 
 const exposed: _SheetExposed = {
   workbook,
   getActiveSheet: () => activeSheet.value,
   getContext: () => context,
-  getGrid: () => grid
+  getGrid
 }
 
 defineExpose(exposed)