Vue 适配器源码参考 · einfach excel

状态：仅仓库源码

@einfach/vue-excel 是版本为 0.0.0 的私有 workspace 包。它尚未发布 npm，没有默认 Worker 或 WASM 后端，也不是完整电子表格应用。请把它作为可评估的源码，而不是可安装的包。

1. 安装仓库 workspace

Vue 适配器当前从这个仓库中消费，因此先安装一次 workspace 依赖，再运行它的 fixture。

git clone https://github.com/allroad88888888/einfach-excel.git
cd einfach-excel
pnpm install

2. 运行已验证的 Vue fixture

NO_PROXY=localhost,127.0.0.1 pnpm --filter @einfach/vue-excel run e2e

此命令会启动仓库内 Vite fixture、打开 Chromium、在受控单元格间拖动，并验证投影后的选区。成功时会报告一个通过的 Vue adapter 测试。

3. 了解当前可用边界

受控网格把调用方持有的 cells 与有限 range 绑定到 Vue 网格视图。

Provider hooks桥接 UI-core 的选区、导航、编辑、剪贴板与历史命令。

唯一数据源Vue 响应式只管理订阅和清理；电子表格状态仍在 UI-core atoms 中。

4. 组合一个受控投影

这是一种仓库源码模式。Vue 宿主拥有 backend、cells 与 range，适配器只负责渲染这份投影。

<script setup lang="ts">
import type {
  CellRange,
  DisplayCell,
  SpreadsheetBackend,
} from '@einfach/spreadsheet-ui-core'
import {
  SpreadsheetGridView,
  SpreadsheetUiProvider,
} from '@einfach/vue-excel'

defineProps<{
  backend: SpreadsheetBackend
  cells: readonly DisplayCell[]
  range: CellRange
}>()
</script>

<template>
  <SpreadsheetUiProvider :backend="backend">
    <SpreadsheetGridView :cells="cells" :range="range" />
  </SpreadsheetUiProvider>
</template>

5. 这些职责仍由宿主承担

一个工作簿挂载期间保持 backend 稳定；替换它会有意创建新的 UI core。
由你负责数据查询，并把返回的有限 cells 与 range 传给视图。
交互使用适配器 hooks；不要把电子表格产品状态镜像到第二套 Vue refs 中。

6. 查看交互参考实现

运行 Vue 投影演示在固定 4×4 网格上拖动，并查看当前选择范围。→阅读精确的宿主源码它提供 provider、确定性 backend、store、投影与指针选择。→阅读包边界查看已有基础能力与刻意未包含的部分。→

还没有准备好的部分

目前没有已发布的 Vue 版本、默认 Worker 工厂、WASM 打包、浏览器端到端承诺或完整工作台外壳。若现在要正式接入，请使用受支持的 Solid 路线，或在 Vue 适配器成熟前实现backend port。