@sl-material/sl-table-sheet 1.1.0-beta1 → 1.1.0-beta2

package/{dist/core → core}/styles/dialog.d.ts

@@ -1,5 +1,5 @@
 /**
  * Dialog 样式
  */
-export declare const DIALOG_STYLES = "\n  .sl-excel-find-replace-dialog {\n    position: fixed;\n    top: 80px;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 9999;\n    font-size: 14px;\n    color: var(--sl-text-color);\n    pointer-events: auto;\n  }\n\n  .sl-excel-find-replace-container {\n    background: white;\n    border-radius: 8px;\n    width: 500px;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n    animation: slideIn 0.2s ease-out;\n  }\n\n  @keyframes slideIn {\n    from { opacity: 0; transform: translateX(20px); }\n    to { opacity: 1; transform: translateX(0); }\n  }\n\n  .sl-excel-find-replace-title {\n    font-size: 16px;\n    font-weight: 500;\n    color: #303133;\n  }\n\n  .sl-excel-find-replace-body {\n    padding: 16px;\n  }\n\n  .sl-excel-find-replace-group {\n    margin-bottom: 16px;\n    display: flex;\n    align-items: center;\n  }\n\n  .sl-excel-find-replace-label {\n    display: block;\n    min-width: 56px;\n    margin-right: 8px;\n  }\n\n  .sl-excel-find-replace-checkbox {\n    display: none;\n    align-items: center;\n    font-weight: normal;\n    min-width: auto;\n    margin-right: 0;\n  }\n\n  .sl-excel-find-replace-checkbox input {\n    margin-right: 6px;\n  }\n\n  .sl-excel-find-replace-input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    flex: 1;\n    height: 32px;\n  }\n\n  .sl-excel-find-replace-input {\n    width: 100%;\n    padding: 0px 12px;\n    border: 1px solid var(--sl-border-color);\n    border-radius: 4px;\n    height: 32px;\n  }\n\n  .sl-excel-find-replace-input:focus {\n    outline: none;\n    border-color: var(--sl-color-primary);\n  }\n\n\n  .sl-excel-find-replace-footer {\n    padding: 0px 16px 16px 16px;\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n\n  .sl-excel-find-replace-btn {\n    padding: 6px 16px;\n    border-radius: 4px;\n    height: 32px;\n    cursor: pointer;\n    background: var(--sl-color-white);\n    border: 1px solid var(--sl-border-color);\n  }\n  .sl-excel-find-replace-btn:hover{\n    color:var(--sl-text-color-thridary)\n  }\n\n  .sl-excel-find-replace-btn-primary {\n    background-color: var(--sl-color-primary);\n    color: white;\n  }\n\n  .sl-excel-find-replace-btn-primary:hover {\n    border-color: var(--sl-color-primary-light-3);\n    background-color: var(--sl-color-primary-light-3);\n  }\n\n  .sl-excel-message-toast {\n    height: 40px;\n    position: fixed;\n    top: 20px;\n    left: 50%;\n    transform: translateX(-50%) translateY(-100px);\n    padding: 11px 15px;\n    color: white;\n    border-radius: 4px;\n    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);\n    z-index: 9999;\n    opacity: 0;\n    transition: all 0.3s ease-out;\n    display: flex;\n    align-items: center;\n  }\n\n  .sl-excel-message-toast--info {\n    background-color: var(--sl-color-info-light-9);\n    border: 1px solid var(--sl-color-info-light-8);\n    color: var(--sl-color-info);\n  }\n\n  .sl-excel-message-toast--success {\n    background-color: var(--sl-color-success-light-9);\n    border: 1px solid var(--sl-color-success-light-8);\n    color: var(--sl-color-success);\n  }\n\n  .sl-excel-message-toast--warning {\n    background-color: var(--sl-color-warning-light-9);\n    border: 1px solid var(--sl-color-warning-light-8);\n    color: var(--sl-color-warning);\n  }\n\n  .sl-excel-message-toast--error {\n    background-color: var(--sl-color-error-light-9);\n    border: 1px solid var(--sl-color-error-light-8);\n    color: var(--sl-color-error);\n  }\n\n  .sl-excel-message-toast.show {\n    transform: translateX(-50%) translateY(0);\n    opacity: 1;\n  }\n";
+export declare const DIALOG_STYLES = "\n  .sl-excel-find-replace-dialog {\n    position: fixed;\n    top: 80px;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 9999;\n    font-size: 14px;\n    color: var(--sl-text-color);\n    pointer-events: auto;\n  }\n\n  .sl-excel-find-replace-container {\n    background: white;\n    border-radius: 8px;\n    width: 500px;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n    animation: slideIn 0.2s ease-out;\n  }\n\n  @keyframes slideIn {\n    from { opacity: 0; transform: translateX(20px); }\n    to { opacity: 1; transform: translateX(0); }\n  }\n\n  .sl-excel-find-replace-title {\n    font-size: 16px;\n    font-weight: 500;\n    color: #303133;\n  }\n\n  .sl-excel-find-replace-body {\n    padding: 16px;\n  }\n\n  .sl-excel-find-replace-group {\n    margin-bottom: 16px;\n    display: flex;\n    align-items: center;\n  }\n\n  .sl-excel-find-replace-label {\n    display: block;\n    min-width: 56px;\n    margin-right: 8px;\n  }\n\n  .sl-excel-find-replace-checkbox {\n    display: none;\n    align-items: center;\n    font-weight: normal;\n    min-width: auto;\n    margin-right: 0;\n  }\n\n  .sl-excel-find-replace-checkbox input {\n    margin-right: 6px;\n  }\n\n  .sl-excel-find-replace-input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    flex: 1;\n    height: 32px;\n  }\n\n  .sl-excel-find-replace-input {\n    width: 100%;\n    padding: 0px 12px;\n    border: 1px solid var(--sl-border-color);\n    border-radius: 4px;\n    height: 32px;\n  }\n\n  .sl-excel-find-replace-input:focus {\n    outline: none;\n    border-color: var(--sl-color-primary);\n  }\n\n\n  .sl-excel-find-replace-footer {\n    padding: 0px 16px 16px 16px;\n    display: flex;\n    justify-content: flex-end;\n    gap: 8px;\n    flex-wrap: wrap;\n  }\n\n  .sl-excel-find-replace-btn {\n    padding: 6px 16px;\n    border-radius: 4px;\n    height: 32px;\n    cursor: pointer;\n    background: var(--sl-color-white);\n    border: 1px solid var(--sl-border-color);\n  }\n  .sl-excel-find-replace-btn:hover{\n    color:var(--sl-text-color-thridary)\n  }\n\n  .sl-excel-find-replace-btn-primary {\n    background-color: var(--sl-color-primary);\n    color: var(--sl-color-white);\n  }\n\n  .sl-excel-find-replace-btn-primary:hover {\n    border-color: var(--sl-color-primary-light-3);\n    background-color: var(--sl-color-primary-light-3);\n    color:var(--sl-color-white);\n  }\n\n  .sl-excel-message-toast {\n    height: 40px;\n    position: fixed;\n    top: 20px;\n    left: 50%;\n    transform: translateX(-50%) translateY(-100px);\n    padding: 11px 15px;\n    color: white;\n    border-radius: 4px;\n    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);\n    z-index: 9999;\n    opacity: 0;\n    transition: all 0.3s ease-out;\n    display: flex;\n    align-items: center;\n  }\n\n  .sl-excel-message-toast--info {\n    background-color: var(--sl-color-info-light-9);\n    border: 1px solid var(--sl-color-info-light-8);\n    color: var(--sl-color-info);\n  }\n\n  .sl-excel-message-toast--success {\n    background-color: var(--sl-color-success-light-9);\n    border: 1px solid var(--sl-color-success-light-8);\n    color: var(--sl-color-success);\n  }\n\n  .sl-excel-message-toast--warning {\n    background-color: var(--sl-color-warning-light-9);\n    border: 1px solid var(--sl-color-warning-light-8);\n    color: var(--sl-color-warning);\n  }\n\n  .sl-excel-message-toast--error {\n    background-color: var(--sl-color-error-light-9);\n    border: 1px solid var(--sl-color-error-light-8);\n    color: var(--sl-color-error);\n  }\n\n  .sl-excel-message-toast.show {\n    transform: translateX(-50%) translateY(0);\n    opacity: 1;\n  }\n";
 export declare const DIALOG_STYLE_ID = "sl-excel-find-replace-styles";

package/package.json

@@ -1,45 +1,29 @@
 {
   "name": "@sl-material/sl-table-sheet",
-  "version": "1.1.0-beta1",
+  "version": "1.1.0-beta2",
   "description": "VTable 组件库 - 支持 npm 和 UMD",
-  "main": "./dist/sl-table-sheet.cjs.js",
-  "module": "./dist/sl-table-sheet.es.js",
-  "types": "./dist/index.d.ts",
+  "main": "./sl-table-sheet.cjs.js",
+  "module": "./sl-table-sheet.es.js",
+  "types": "./index.d.ts",
   "exports": {
     ".": {
-      "import": "./src/index.ts",
-      "require": "./dist/sl-table-sheet.cjs.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./style.css": "./dist/sl-table-sheet.css",
-    "./dist/style.css": "./dist/sl-table-sheet.css"
+      "import": "./sl-table-sheet.es.js",
+      "require": "./sl-table-sheet.cjs.js",
+      "types": "./index.d.ts"
+    }
   },
-  "files": [
-    "dist"
+  "keywords": [
+    "spreadsheet",
+    "typescript",
+    "javascript"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "pnpm run build:lib && pnpm run build:umd",
-    "build:lib": "vite build --mode lib",
-    "build:umd": "vite build --mode umd",
-    "preview": "vite preview",
-    "type-check": "tsc --noEmit",
-    "publish": "npm run build && cd dist && npm publish"
-  },
-  "devDependencies": {
-    "typescript": "^5.3.0",
-    "vite": "^5.0.0",
-    "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-dts": "^3.7.0"
-  },
-  "dependencies": {
-    "@sl-ui-pc/theme-chalk": "0.1.0-beta1",
-    "xlsx": "^0.18.5"
-  },
+  "author": "",
+  "license": "MIT",
   "peerDependencies": {
     "@visactor/vtable": "^1.24.0",
     "@visactor/vtable-editors": "^1.24.0",
-    "@visactor/vtable-sheet": "^1.24.0"
+    "@visactor/vtable-sheet": "^1.24.0",
+    "@visactor/vtable-gantt": "^1.24.0"
   },
   "peerDependenciesMeta": {
     "@visactor/vtable": {
@@ -54,12 +38,5 @@
     "@visactor/vtable-gantt": {
       "optional": false
     }
-  },
-  "keywords": [
-    "spreadsheet",
-    "typescript",
-    "javascript"
-  ],
-  "author": "",
-  "license": "MIT"
-}
+  }
+}

package/{dist/sl-table-sheet.cjs.js → sl-table-sheet.cjs.js}

@@ -503,12 +503,13 @@
 
   .sl-excel-find-replace-btn-primary {
     background-color: var(--sl-color-primary);
-    color: white;
+    color: var(--sl-color-white);
   }
 
   .sl-excel-find-replace-btn-primary:hover {
     border-color: var(--sl-color-primary-light-3);
     background-color: var(--sl-color-primary-light-3);
+    color:var(--sl-color-white);
   }
 
   .sl-excel-message-toast {

package/{dist/sl-table-sheet.es.js → sl-table-sheet.es.js}

@@ -24964,12 +24964,13 @@ const s_ = `
 
   .sl-excel-find-replace-btn-primary {
     background-color: var(--sl-color-primary);
-    color: white;
+    color: var(--sl-color-white);
   }
 
   .sl-excel-find-replace-btn-primary:hover {
     border-color: var(--sl-color-primary-light-3);
     background-color: var(--sl-color-primary-light-3);
+    color:var(--sl-color-white);
   }
 
   .sl-excel-message-toast {

package/{dist/sl-table-sheet.umd.umd.js → sl-table-sheet.umd.umd.js}

@@ -322,12 +322,13 @@
 
   .sl-excel-find-replace-btn-primary {
     background-color: var(--sl-color-primary);
-    color: white;
+    color: var(--sl-color-white);
   }
 
   .sl-excel-find-replace-btn-primary:hover {
     border-color: var(--sl-color-primary-light-3);
     background-color: var(--sl-color-primary-light-3);
+    color:var(--sl-color-white);
   }
 
   .sl-excel-message-toast {

package/README.md

@@ -1,550 +0,0 @@
-# @sl-material/sl-table-sheet
-
-基于 VTable 的高性能表格组件，支持数据展示、编辑、Excel 导入导出、查找替换等功能。兼容 Vue 2/3、原生 JavaScript 和 Web Component。
-
-## 特性
-
-- **高性能表格渲染** - 基于 canvas，支持大数据量展示
-- **数据编辑** - 支持单元格编辑，内置日期、下拉列表等编辑器
-- **Excel 互操作** - 支持 Excel 文件导入、导出，保留单元格样式
-- **查找替换** - 内置查找/替换弹窗，支持批量替换
-- **工具栏** - 可配置的工具栏，支持冻结列、数据统计显示
-- **单元格标记** - 支持高亮标记特定单元格
-- **自动尺寸调整** - 支持自动监听容器尺寸变化，智能防抖优化
-- **多框架支持** - 支持 Vue 2/3、原生 JS、TypeScript
-
-## 安装
-
-```bash
-npm install @sl-material/sl-table-sheet
-# 或
-yarn add @sl-material/sl-table-sheet
-# 或
-pnpm add @sl-material/sl-table-sheet
-```
-
-## 快速开始
-
-### 原生 JavaScript/TypeScript
-
-```typescript
-import { SlTableSheet } from "@sl-material/sl-table-sheet";
-
-// 初始化表格
-const tableSheet = new SlTableSheet({
-  container: "#table-container", // 或 document.getElementById('table-container')
-  columns: [
-    { field: "name", title: "姓名", width: 120 },
-    { field: "age", title: "年龄", width: 80 },
-    { field: "department", title: "部门", width: 150 },
-  ],
-  records: [
-    { name: "张三", age: 28, department: "技术部" },
-    { name: "李四", age: 32, department: "产品部" },
-    { name: "王五", age: 25, department: "设计部" },
-  ],
-  showToolbar: true, // 显示工具栏
-});
-
-// 销毁实例
-tableSheet.destroy();
-```
-
-### Vue 3
-
-```vue
-<template>
-  <div ref="tableContainer" style="height: 600px;"></div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue";
-import { SlTableSheet } from "@sl-material/sl-table-sheet";
-
-const tableContainer = ref<HTMLElement>();
-let tableSheet: SlTableSheet | null = null;
-
-onMounted(() => {
-  tableSheet = new SlTableSheet({
-    container: tableContainer.value!,
-    columns: [
-      { field: "name", title: "姓名", width: 120 },
-      { field: "age", title: "年龄", width: 80 },
-    ],
-    records: [
-      { name: "张三", age: 28 },
-      { name: "李四", age: 32 },
-    ],
-  });
-});
-
-onUnmounted(() => {
-  tableSheet?.destroy();
-});
-</script>
-```
-
-## API 文档
-
-### SlTableSheet 配置
-
-#### 构造函数参数 `SlTableSheetConfig`
-
-| 参数             | 类型                                 | 默认值  | 说明                             |
-| ---------------- | ------------------------------------ | ------- | -------------------------------- |
-| `container`      | `HTMLElement \| string`              | 必填    | 容器元素或 CSS 选择器            |
-| `columns`        | `any[]`                              | `[]`    | 列配置数组                       |
-| `records`        | `any[]`                              | `[]`    | 数据记录数组                     |
-| `showToolbar`    | `boolean`                            | `true`  | 是否显示工具栏                   |
-| `showFormulaBar` | `boolean`                            | -       | 是否显示公式栏                   |
-| `showSheets`     | `boolean`                            | `false` | 是否显示工作表标签（VTable原生） |
-| `showTabs`       | `boolean`                            | `true`  | 是否显示自定义工作表标签页       |
-| `autoResize`     | `boolean`                            | `false` | 是否启用自动监听容器尺寸变化     |
-| `sheets`         | `SheetConfig[]`                      | -       | 多工作表配置                     |
-| `editors`        | `EditorConfig`                       | -       | 编辑器配置                       |
-| `toolbar`        | `Partial<ToolbarConfig>`             | -       | 工具栏配置                       |
-| `onCellChange`   | `(args: any) => void`                | -       | 单元格变更回调                   |
-| `onExcelImport`  | `(data: ExcelParseResult) => void`   | -       | Excel 导入完成回调               |
-| `onExport`       | `(format: 'csv' \| 'excel') => void` | -       | 导出按钮点击回调                 |
-| `onRefresh`      | `() => void`                         | -       | 刷新按钮点击回调                 |
-
-### 实例方法
-
-#### 数据操作
-
-| 方法                     | 参数               | 返回值 | 说明         |
-| ------------------------ | ------------------ | ------ | ------------ |
-| `updateData(records)`    | `any[]`            | `void` | 更新表格数据 |
-| `updateColumns(columns)` | `any[]`            | `void` | 更新列配置   |
-| `refresh()`              | -                  | `void` | 刷新表格     |
-| `exportData(format)`     | `'csv' \| 'excel'` | `any`  | 导出数据     |
-
-#### Excel 操作
-
-| 方法                                | 参数                               | 返回值                      | 说明                   |
-| ----------------------------------- | ---------------------------------- | --------------------------- | ---------------------- |
-| `loadExcelFromUrl(url, options)`    | `string, ExcelParseOptions`        | `Promise<ExcelParseResult>` | 从 URL 加载 Excel 文件 |
-| `parseExcelFile(file, options)`     | `File, ExcelParseOptions`          | `Promise<ExcelParseResult>` | 解析 File 对象         |
-| `parseExcelBuffer(buffer, options)` | `ArrayBuffer, ExcelParseOptions`   | `ExcelParseResult`          | 解析 ArrayBuffer       |
-| `exportToExcelStream(options)`      | `{ filterEmptyColumns?: boolean }` | `ArrayBuffer`               | 导出为 Excel 流        |
-| `downloadExcel(filename)`           | `string`                           | `void`                      | 下载 Excel 文件        |
-
-#### 查找替换
-
-| 方法                                              | 参数      | 返回值 | 说明                 |
-| ------------------------------------------------- | --------- | ------ | -------------------- |
-| `openFindReplace()`                               | -         | `void` | 打开查找/替换弹窗    |
-| `setFindReplaceSelectedColumnsOnly(selectedOnly)` | `boolean` | `void` | 设置是否只搜索选中列 |
-
-#### 工具栏
-
-| 方法                             | 参数             | 返回值            | 说明             |
-| -------------------------------- | ---------------- | ----------------- | ---------------- |
-| `updateTitleStats(count, total)` | `number, number` | `void`            | 更新标题统计数据 |
-| `getToolbar()`                   | -                | `Toolbar \| null` | 获取工具栏实例   |
-
-#### 尺寸调整
-
-| 方法       | 参数 | 返回值 | 说明                 |
-| ---------- | ---- | ------ | -------------------- |
-| `resize()` | -    | `void` | 手动触发表格尺寸调整 |
-
-#### 其他
-
-| 方法                     | 参数 | 返回值                      | 说明                     |
-| ------------------------ | ---- | --------------------------- | ------------------------ |
-| `getTableSheet()`        | -    | `TableSheet \| null`        | 获取底层 TableSheet 实例 |
-| `getTableInstance()`     | -    | `any`                       | 获取 VTable 实例         |
-| `getFindReplaceDialog()` | -    | `FindReplaceDialog \| null` | 获取查找替换弹窗实例     |
-| `destroy()`              | -    | `void`                      | 销毁实例                 |
-
-### 类型定义
-
-#### Column 列配置
-
-```typescript
-interface Column {
-  field: string; // 字段名
-  title: string; // 列标题
-  width: number; // 列宽
-  sort?: boolean; // 是否可排序
-  filter?: boolean; // 是否可筛选
-  style?: (args: any) => any; // 自定义单元格样式
-}
-```
-
-#### SheetConfig 工作表配置
-
-```typescript
-interface SheetConfig {
-  sheetKey: string; // 工作表唯一标识
-  sheetTitle: string; // 工作表标题
-  columns: any[]; // 列配置
-  data: any[]; // 数据
-  dragOrder?: {
-    dragHeaderMode?: "all" | "column" | "row";
-  };
-}
-```
-
-#### EditorConfig 编辑器配置
-
-```typescript
-interface EditorConfig {
-  dateEditor?: boolean | any; // 日期编辑器
-  listEditor?: {
-    // 下拉列表编辑器
-    values: string[];
-  };
-  customEditors?: Record<string, any>; // 自定义编辑器
-}
-```
-
-#### ToolbarConfig 工具栏配置
-
-```typescript
-interface ToolbarConfig {
-  title?: string; // 标题
-  count?: number; // 当前数量
-  total?: number; // 总数
-  hint?: string; // 提示文字
-  freezeCount?: number; // 冻结列数
-  showErrorList?: boolean; // 是否显示错误列表
-  buttons?: {
-    search?: boolean; // 查找/替换按钮
-    freeze?: boolean; // 冻结列按钮
-    export?: boolean; // 导出按钮
-    refresh?: boolean; // 刷新按钮
-    list?: boolean; // 列表按钮
-  };
-  onSearchClick?: () => void;
-  onFreezeChange?: (count: number) => void;
-  onListChange?: (checked: boolean) => void;
-}
-```
-
-#### ExcelParseOptions Excel 解析选项
-
-```typescript
-interface ExcelParseOptions {
-  sheetIndex?: number; // 工作表索引，默认 0
-  headerRow?: number; // 表头行索引，默认 0
-  headerRows?: number; // 多层表头行数
-  mergeHeaders?: boolean; // 是否合并多层表头，默认 true
-  extractStyles?: boolean; // 是否提取单元格样式，默认 true
-}
-```
-
-#### ExcelParseResult Excel 解析结果
-
-```typescript
-interface ExcelParseResult {
-  columns: Array<{
-    key: string;
-    field: string;
-    title: string;
-    width: number;
-    sort?: boolean;
-    filter?: boolean;
-  }>;
-  records: any[][];
-  cellStyles?: Map<string, CellStyle>; // 单元格样式映射
-}
-```
-
-#### CellStyle 单元格样式
-
-```typescript
-interface CellStyle {
-  fontColor?: string; // 字体颜色 (hex)
-  bgColor?: string; // 背景颜色 (hex)
-  bold?: boolean; // 是否加粗
-  italic?: boolean; // 是否斜体
-}
-```
-
-## 高级用法
-
-### 单元格标记（高亮显示）
-
-支持在数据中标记特定单元格，自动应用高亮样式：
-
-```typescript
-const records = [
-  {
-    name: "张三",
-    age: { value: 28, isMarked: true }, // 标记该单元格
-    department: "技术部",
-  },
-  {
-    name: "李四",
-    age: 32,
-    department: { value: "产品部", isMarked: true },
-  },
-];
-
-const tableSheet = new SlTableSheet({
-  container: "#container",
-  columns: [
-    { field: "name", title: "姓名", width: 120 },
-    { field: "age", title: "年龄", width: 80 },
-    { field: "department", title: "部门", width: 150 },
-  ],
-  records,
-});
-```
-
-### Excel 导入导出
-
-```typescript
-const tableSheet = new SlTableSheet({
-  container: "#container",
-  columns: [], // 初始为空，导入后自动填充
-  records: [],
-  onExcelImport: (result) => {
-    console.log("导入成功:", result.columns, result.records);
-    console.log("单元格样式:", result.cellStyles);
-  },
-});
-
-// 从 URL 加载 Excel
-await tableSheet.loadExcelFromUrl("https://example.com/data.xlsx", {
-  sheetIndex: 0,
-  headerRow: 0,
-  extractStyles: true, // 提取单元格样式
-});
-
-// 解析上传的文件
-const fileInput = document.getElementById("file-input");
-fileInput.addEventListener("change", async (e) => {
-  const file = e.target.files[0];
-  await tableSheet.parseExcelFile(file);
-});
-
-// 导出并下载 Excel
-tableSheet.downloadExcel("导出数据");
-```
-
-### 自定义工具栏
-
-```typescript
-const tableSheet = new SlTableSheet({
-  container: '#container',
-  columns: [...],
-  records: [...],
-  showToolbar: true,
-  toolbar: {
-    title: '数据错误',
-    count: 10,
-    total: 100,
-    hint: '请检查错误数据',
-    buttons: {
-      search: true,    // 显示查找/替换
-      freeze: true,    // 显示冻结列
-      export: false,   // 隐藏导出
-      refresh: true,   // 显示刷新
-      list: false,     // 隐藏列表
-    },
-    onFreezeChange: (count) => {
-      console.log('冻结列数:', count);
-    },
-  },
-  onRefresh: () => {
-    console.log('刷新 clicked');
-    tableSheet.refresh();
-  },
-});
-
-// 动态更新统计数据
-tableSheet.updateTitleStats(20, 200);
-```
-
-### 查找替换功能
-
-```typescript
-const tableSheet = new SlTableSheet({
-  container: '#container',
-  columns: [...],
-  records: [...],
-});
-
-// 打开查找替换弹窗
-tableSheet.openFindReplace();
-
-// 设置只搜索选中列
-tableSheet.setFindReplaceSelectedColumnsOnly(true);
-
-// 通过按钮点击打开查找替换
-toolbar: {
-  onSearchClick: () => {
-    tableSheet.openFindReplace();
-  },
-}
-```
-
-### 自动监听容器尺寸变化
-
-```typescript
-// 方式一：配置项启用（推荐）
-const tableSheet = new SlTableSheet({
-  container: '#container',
-  columns: [...],
-  records: [...],
-  autoResize: true, // 启用自动监听
-});
-
-// 方式二：手动启用
-const tableSheet = new SlTableSheet({
-  container: '#container',
-  columns: [...],
-  records: [...],
-});
-
-// 手动启用自动监听
-const success = tableSheet.enableAutoResize();
-if (success) {
-  console.log('自动监听已启用');
-} else {
-  console.log('浏览器不支持，请使用手动模式');
-}
-
-// 手动触发 resize（适用于 autoResize: false 的情况）
-tableSheet.resize();
-
-// 禁用自动监听
-tableSheet.disableAutoResize();
-```
-
-**兼容性说明**：
-
-- ✅ **现代浏览器**：Chrome 64+、Firefox 69+、Safari 13.1+、Edge 79+
-- ❌ **旧版浏览器**：IE 11、Chrome < 64、Firefox < 69
-- 🔄 **自动降级**：不支持时自动使用手动模式
-
-### 事件监听
-
-```typescript
-const tableSheet = new SlTableSheet({
-  container: '#container',
-  columns: [...],
-  records: [...],
-  onCellChange: (args) => {
-    console.log('单元格变更:', args);
-  },
-});
-
-// 监听 VTable 原生事件
-tableSheet.on('cellClick', (args) => {
-  console.log('单元格点击:', args);
-});
-
-tableSheet.on('scroll', (args) => {
-  console.log('滚动:', args);
-});
-
-// 取消监听
-const handleClick = (args) => console.log(args);
-tableSheet.on('cellClick', handleClick);
-tableSheet.off('cellClick', handleClick);
-```
-
-### 独立使用工具类
-
-```typescript
-import {
-  loadExcelFromUrl,
-  parseExcelFile,
-  parseExcelBuffer,
-  exportToExcelStream,
-  downloadExcel,
-} from "@sl-material/sl-table-sheet";
-
-// 独立解析 Excel
-const result = await loadExcelFromUrl("https://example.com/data.xlsx");
-
-// 独立导出 Excel
-const buffer = exportToExcelStream(columns, records);
-downloadExcel(buffer, "文件名");
-```
-
-## UMD 使用方式
-
-```html
-<script src="https://unpkg.com/@sl-material/sl-table-sheet/dist/sl-table-sheet.umd.js"></script>
-<script>
-  const { SlTableSheet } = window.SlTableSheet;
-
-  const tableSheet = new SlTableSheet({
-    container: "#container",
-    columns: [{ field: "name", title: "姓名", width: 120 }],
-    records: [{ name: "张三" }],
-  });
-</script>
-```
-
-## 项目架构
-
-```
-src/
-├── core/                          # 核心模块
-│   ├── SlTableSheet.ts           # 主入口类，UI 布局与协调
-│   ├── TableSheet.ts             # 表格核心逻辑
-│   ├── Dialog.ts                 # 查找/替换弹窗
-│   ├── Toolbar.ts                # 工具栏组件
-│   ├── types.ts                  # 核心类型定义
-│   ├── comnon.ts                 # 通用工具函数
-│   │
-│   ├── excel/                    # Excel 处理模块
-│   │   ├── ExcelParser.ts       # Excel 解析协调器
-│   │   ├── ExcelExporter.ts     # Excel 导出器
-│   │   ├── types.ts             # Excel 相关类型
-│   │   ├── index.ts             # 模块导出
-│   │   ├── utils/
-│   │   │   └── ColorConverter.ts # 颜色转换工具
-│   │   └── parsers/
-│   │       ├── HeaderDetector.ts   # 智能表头检测
-│   │       ├── StyleExtractor.ts   # 样式提取
-│   │       └── CommentExtractor.ts # 批注提取
-│   │
-│   ├── managers/                 # 管理器模块
-│   │   ├── CustomComponentManager.ts # 自定义组件管理
-│   │   ├── CellMarkManager.ts       # 标记单元格管理
-│   │   ├── EditorManager.ts         # 编辑器注册
-│   │   └── EventManager.ts          # 事件管理
-│   │
-│   └── processors/               # 数据处理器模块
-│       ├── DataProcessor.ts     # 数据预处理
-│       └── StyleProcessor.ts    # 样式处理
-│
-├── assets/                       # 静态资源
-│   └── var.css                  # CSS 变量
-│
-└── index.ts                     # 包入口
-```
-
-### 设计原则
-
-1. **单一职责**: 每个模块只负责一个功能领域
-2. **低耦合**: 模块间通过接口通信，便于独立测试和替换
-3. **向后兼容**: `ExcelUtils.ts` 保留为兼容层，确保旧代码正常工作
-4. **渐进式加载**: Excel 解析器按需使用，避免不必要的计算
-
-## 依赖
-
-- `@visactor/vtable-sheet`: 核心表格引擎
-- `@visactor/vtable-editors`: 单元格编辑器
-- `xlsx`: Excel 文件处理
-- `@sl-ui-pc/theme-chalk`: 主题样式
-
-## 更新日志
-
-### v1.0.0-beta6
-
-- **新增功能**: 自动监听容器尺寸变化
-  - 新增 `autoResize` 配置项，默认 `false`
-  - 新增 `enableAutoResize()` / `disableAutoResize()` 方法
-  - 新增 `resize()` 手动触发方法
-  - 支持 ResizeObserver API，兼容性检查和自动降级
-  - 性能优化：防抖机制、微小变化过滤、尺寸缓存
-- **使用方式**: 支持配置项和手动启用两种方式
-- **兼容性**: 现代浏览器支持，旧浏览器自动降级为手动模式

package/dist/package.json

@@ -1,42 +0,0 @@
-{
-  "name": "@sl-material/sl-table-sheet",
-  "version": "1.1.0-beta1",
-  "description": "VTable 组件库 - 支持 npm 和 UMD",
-  "main": "./sl-table-sheet.cjs.js",
-  "module": "./sl-table-sheet.es.js",
-  "types": "./index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./sl-table-sheet.es.js",
-      "require": "./sl-table-sheet.cjs.js",
-      "types": "./index.d.ts"
-    }
-  },
-  "keywords": [
-    "spreadsheet",
-    "typescript",
-    "javascript"
-  ],
-  "author": "",
-  "license": "MIT",
-  "peerDependencies": {
-    "@visactor/vtable": "^1.24.0",
-    "@visactor/vtable-editors": "^1.24.0",
-    "@visactor/vtable-sheet": "^1.24.0",
-    "@visactor/vtable-gantt": "^1.24.0"
-  },
-  "peerDependenciesMeta": {
-    "@visactor/vtable": {
-      "optional": false
-    },
-    "@visactor/vtable-editors": {
-      "optional": false
-    },
-    "@visactor/vtable-sheet": {
-      "optional": false
-    },
-    "@visactor/vtable-gantt": {
-      "optional": false
-    }
-  }
-}