小刀电子表格

# pnpm（推荐）
pnpm add xiaodao-spreader

# npm
npm install xiaodao-spreader

# yarn
yarn add xiaodao-spreader

# 克隆仓库
git clone https://github.com/xiaodaozhi/xiaodao-spreader.git
cd xiaodao-spreader

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

<template>
  <Spreader
    v-model:data="myData"
    :row-count="100"
    :col-count="12"
    theme="light"
    locale="zh-CN"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Spreader from 'xiaodao-spreader';
import type { SheetModelData } from 'xiaodao-spreader';

const myData = ref<SheetModelData[]>([
  {
    name: 'Sheet1',
    cells: {
      '0,0': { value: '姓名' },
      '0,1': { value: '年龄' },
      '1,0': { value: '张三', style: { fontSize: 14, fontWeight: 'bold' } },
      '1,1': { value: '28' },
    },
    colWidths: { 0: 120, 1: 80 },
  },
]);
</script>

interface SheetModelData {
  name: string;
  cells: Record<string, {
    value: string;
    style?: Record<string, unknown>;
  }>;
  merges?: Record<string, SelectionRange>;
  colWidths?: Record<number, number>;
  rowHeights?: Record<number, number>;
}

import type {
  CellCoord,       // { col: number; row: number }
  SelectionRange,  // { startCol; startRow; endCol; endRow }
  CellData,        // { value: string; style: Record<string, unknown> | null }
  Range,           // { start: number; end: number }
  SpreadsheetOptions,
  SpreadsheetData,
  SheetModelData,  // ← 主要数据接口
  SheetState,      // 内部运行时状态
  UndoSnapshot,
  ContextMenuItem,
  ThemeColors,
  Point,
} from 'xiaodao-spreader';

src/
├── index.ts                          # 库入口 — 从 spreader/ 统一 re-export
├── App.vue                           # 演示应用
└── components/
    └── spreader/
        ├── index.ts                  # 统一导出口 — 组件 + 类型（barrel）
        ├── components/
        │   ├── spreader.vue          # 入口组件 — 模板 + 样式 + 组合
        │   ├── toolbar.vue           # 工具栏（含溢出下拉）
        │   ├── tabbar.vue            # Sheet 标签栏
        │   ├── dropdown.vue          # 通用下拉组件
        │   └── pickers/
        │       ├── colorPicker.vue
        │       ├── borderPicker.vue
        │       ├── mergePicker.vue
        │       └── numberFormatDialog.vue
        ├── composables/
        │   ├── core-state.ts        # Props、cells/merges/selection、字体度量、导航
        │   ├── undo-styles.ts       # 撤销重做、格式刷、字体/对齐/颜色
        │   ├── borders-merge.ts     # 边框同步、合并操作、剪贴板、求和
        │   ├── sheets-ops.ts        # 行列增删、多 Sheet、v-model 发射、主题、refs
        │   └── interactions.ts      # 渲染器、编辑栏、标签栏、右键菜单、滚动条、事件
        └── core/
            ├── constants.ts         # 布局常量、国际化、主题调色板
            ├── types.ts             # 全部类型定义
            ├── formula.ts          # 公式引擎（解析、计算、依赖、缓存）
            ├── number-format.ts    # 数字格式引擎（Excel 风格显示格式化）
            ├── theme.ts             # 主题 CSS 变量构建
            └── utils.ts            # 纯工具函数（列标签、命中测试、尺寸解析）

import type { ThemeColors } from 'xiaodao-spreader';

const lightTheme: ThemeColors = { /* 50+ 颜色字段 */ };
const darkTheme: ThemeColors = { /* 50+ 颜色字段 */ };

--sp-bg, --sp-gridBg, --sp-gridLine, --sp-selectionBg,
--sp-headerBg, --sp-headerBorder, --sp-headerText,
--sp-formulaBarBg, --sp-formulaBarInputBorder,
--sp-wrapperBg, --sp-cellEditorBorder,
/* ... 以及更多 */

<template>
  <div style="--sp-bg: #1a1a2e; --sp-cellText: #e0e0e0;">
    <Spreader v-model:data="myData" theme="dark" />
  </div>
</template>

# 安装依赖
pnpm install

# 启动开发服务器（自动热更新）
pnpm dev

# 仅做类型检查
pnpm type-check

# 生产构建（类型检查 + vite build）
pnpm build

# 预览生产构建
pnpm preview

# 演示/测试构建
pnpm build:demo