@sl-material/sl-table-sheet 1.0.0-beta1 → 1.0.0-beta11

package/config/config.d.ts

@@ -0,0 +1,11 @@
+export declare const defaultHeaderStyle: {
+    color: string;
+    fontSize: number;
+    fontWeight: string;
+    bgColor: string;
+};
+export declare const defaultCellStyle: {
+    color: string;
+    fontSize: number;
+    bgColor: string;
+};

package/core/SheetTabs.d.ts

@@ -0,0 +1,44 @@
+import { SheetData } from './excel/types';
+
+export interface SheetTabsConfig {
+    container: HTMLElement;
+    sheets: SheetData[];
+    activeIndex?: number;
+    onTabChange?: (sheetData: SheetData, index: number) => void;
+}
+export declare class SheetTabs {
+    private container;
+    private tabsElement;
+    private sheets;
+    private activeIndex;
+    private onTabChange?;
+    constructor(config: SheetTabsConfig);
+    private init;
+    private injectStyles;
+    private render;
+    private createTab;
+    /**
+     * 设置当前激活的标签
+     */
+    setActiveTab(index: number): void;
+    /**
+     * 更新 Sheet 数据
+     */
+    updateSheets(sheets: SheetData[]): void;
+    /**
+     * 更新单个 Sheet 的错误数量
+     */
+    updateSheetError(index: number, errorCount: number): void;
+    /**
+     * 获取当前激活的 Sheet 数据
+     */
+    getActiveSheet(): SheetData | null;
+    /**
+     * 获取当前激活的索引
+     */
+    getActiveIndex(): number;
+    /**
+     * 销毁组件
+     */
+    destroy(): void;
+}

package/core/SlTableSheet.d.ts

@@ -1,26 +1,47 @@
 import { TableSheet, TableSheetConfig } from './TableSheet';
 import { FindReplaceDialog } from './Dialog';
 import { Toolbar, ToolbarConfig } from './Toolbar';
-import { ExcelParseOptions, ExcelParseResult } from './excel';
+import { SheetTabs } from './SheetTabs';
+import { ExcelParseOptions, ExcelParseResult, MultiSheetParseResult, SheetData } from './excel';
 
+/** Loading 配置 */
+export interface LoadingConfig {
+    /** 是否显示 loading，默认 true */
+    show?: boolean;
+    /** loading 文本，默认 "加载中..." */
+    text?: string;
+}
 export interface SlTableSheetConfig extends Omit<TableSheetConfig, "container"> {
     container: HTMLElement | string;
     showToolbar?: boolean;
+    /** 是否显示自定义 Sheet 标签页（用于多 Sheet Excel），默认 true */
+    showTabs?: boolean;
+    /** 是否启用自动监听容器尺寸变化，默认 false */
+    autoResize?: boolean;
+    /** Loading 配置 */
+    loading?: LoadingConfig;
     toolbar?: Partial<ToolbarConfig>;
     onExport?: (format: "csv" | "excel") => void;
     onRefresh?: () => void;
     onExcelImport?: (data: ExcelParseResult) => void;
+    /** 多 Sheet 导入回调 */
+    onMultiSheetImport?: (data: MultiSheetParseResult) => void;
+    /** Sheet 切换回调 */
+    onSheetChange?: (sheetData: SheetData, index: number) => void;
 }
 export declare class SlTableSheet {
     private tableSheet;
     private findReplaceDialog;
     private toolbar;
+    private sheetTabs;
     private container;
     private tableContainer;
     private toolbarContainer;
+    private sheetTabsContainer;
+    private loadingOverlay;
     private config;
-    /** Excel 单元格样式映射 */
-    private excelCellStyles;
+    /** 多 Sheet 数据 */
+    private multiSheetData;
     constructor(config: SlTableSheetConfig);
     /**
      * 初始化
@@ -54,14 +75,42 @@ export declare class SlTableSheet {
      * 冻结列
      */
     private freezeColumns;
+    /**
+     * 公开的冻结列方法
+     * @param colCount 要冻结的列数
+     */
+    setFrozenColCount(colCount: number): void;
+    /**
+     * 重新计算表格尺寸（容器大小变化时调用）
+     */
+    resize(): void;
+    /**
+     * 监听容器尺寸变化，自动调整表格大小
+     */
+    private resizeObserver;
+    private lastObservedWidth;
+    private lastObservedHeight;
+    /**
+     * 检查 ResizeObserver 兼容性
+     */
+    private isResizeObserverSupported;
+    /**
+     * 启用自动 resize（监听容器尺寸变化）
+     */
+    enableAutoResize(): boolean;
+    /**
+     * 禁用自动 resize
+     */
+    disableAutoResize(): void;
     /**
      * 注入样式
      */
     private injectStyles;
     /**
      * 更新标题统计
+     * @deprecated 此方法已废弃，请使用 leftSlot 自定义标题内容
      */
-    updateTitleStats(count: number, total: number): void;
+    updateTitleStats(_count: number, _total: number): void;
     /**
      * 获取 TableSheet 实例
      */
@@ -103,14 +152,31 @@ export declare class SlTableSheet {
      * @param filename 文件名（不含扩展名）
      */
     downloadExcel(filename?: string): void;
+    /**
+     * 显示 loading 状态
+     * @param text loading 文本，不传则使用配置中的默认文本
+     */
+    showLoading(text?: string): void;
+    /**
+     * 隐藏 loading 状态
+     */
+    hideLoading(): void;
+    /**
+     * 设置 loading 状态
+     * @param visible 是否显示
+     * @param text loading 文本
+     */
+    setLoading(visible: boolean, text?: string): void;
     /**
      * 解析在线 Excel 文件并显示到表格
      * @param url Excel 文件的 URL 地址
-     * @param options 解析选项
+     * @param options 解析选项，支持 showLoading 和 loadingText 覆盖全局配置
      * @returns 解析后的列配置和数据
      */
     loadExcelFromUrl(url: string, options?: ExcelParseOptions & {
         autoDisplay?: boolean;
+        showLoading?: boolean;
+        loadingText?: string;
     }): Promise<ExcelParseResult>;
     /**
      * 解析 Excel ArrayBuffer 并显示到表格
@@ -130,6 +196,14 @@ export declare class SlTableSheet {
     parseExcelFile(file: File, options?: ExcelParseOptions & {
         autoDisplay?: boolean;
     }): Promise<ExcelParseResult>;
+    /**
+     * 将批注数据合并到记录中，生成带 isMarked 标记的数据格式
+     */
+    private mergeCommentsToRecords;
+    /**
+     * 处理数据并生成样式化的列配置
+     */
+    private processDataWithStyles;
     /**
      * 处理 Excel 导入结果
      */
@@ -162,5 +236,54 @@ export declare class SlTableSheet {
      * 销毁实例
      */
     destroy(): void;
+    /**
+     * 从 URL 加载 Excel 所有 Sheet
+     * @param url Excel 文件的 URL 地址
+     * @param options 解析选项，支持 showLoading 和 loadingText 覆盖全局配置
+     */
+    loadAllSheetsFromUrl(url: string, options?: Omit<ExcelParseOptions, "sheetIndex"> & {
+        showLoading?: boolean;
+        loadingText?: string;
+    }): Promise<MultiSheetParseResult>;
+    /**
+     * 解析 Excel ArrayBuffer 的所有 Sheet
+     */
+    parseAllSheets(buffer: ArrayBuffer, options?: Omit<ExcelParseOptions, "sheetIndex">): MultiSheetParseResult;
+    /**
+     * 处理多 Sheet 导入结果
+     */
+    private handleMultiSheetImportResult;
+    /**
+     * 创建 Sheet 标签页
+     */
+    private createSheetTabs;
+    /**
+     * 显示指定 Sheet 的数据
+     */
+    private displaySheetData;
+    /**
+     * 更新 Sheet 的错误数量
+     */
+    updateSheetError(sheetIndex: number, errorCount: number): void;
+    /**
+     * 获取当前激活的 Sheet 索引
+     */
+    getActiveSheetIndex(): number;
+    /**
+     * 获取当前激活的 Sheet 数据
+     */
+    getActiveSheetData(): SheetData | null;
+    /**
+     * 获取所有 Sheet 数据
+     */
+    getAllSheetsData(): MultiSheetParseResult | null;
+    /**
+     * 切换到指定 Sheet
+     */
+    switchToSheet(index: number): void;
+    /**
+     * 获取 SheetTabs 实例
+     */
+    getSheetTabs(): SheetTabs | null;
 }
 export default SlTableSheet;

package/core/TableSheet.d.ts

@@ -1,3 +1,5 @@
+import { MarkedMap } from './processors/StyleProcessor';
+
 /**
  * 自定义组件配置接口
  */
@@ -51,8 +53,8 @@ export interface TableSheetConfig {
     records?: any[];
     /** 是否显示公式栏 */
     showFormulaBar?: boolean;
-    /** 是否显示工作表标签 */
-    showSheetTab?: boolean;
+    /** 是否显示工作表标签（VTable原生），默认 false */
+    showSheets?: boolean;
     /** 工作表配置 */
     sheets?: any[];
     /** 编辑器配置 */
@@ -90,10 +92,10 @@ export declare class TableSheet {
     private customComponentManager;
     private cellMarkManager;
     private eventManager;
-    constructor(config: TableSheetConfig, markedMap?: Map<string, {
-        isMarked: boolean;
-        comment?: string;
-    }>);
+    private lastWidth;
+    private lastHeight;
+    private resizeTimeout;
+    constructor(config: TableSheetConfig, markedMap?: MarkedMap);
     /**
      * 初始化表格
      */
@@ -106,6 +108,10 @@ export declare class TableSheet {
      * 创建表格实例
      */
     private createSheet;
+    /**
+     * 初始化 Manager
+     */
+    private initManagers;
     /**
      * 修改单元格值
      */
@@ -154,6 +160,19 @@ export declare class TableSheet {
      * 刷新表格
      */
     refresh(): void;
+    /**
+     * 冻结列
+     * @param colCount 要冻结的列数
+     */
+    setFrozenColCount(colCount: number): void;
+    /**
+     * 重新计算表格尺寸（容器大小变化时调用）
+     */
+    resize(): void;
+    /**
+     * 防抖的 resize 方法（用于频繁触发的场景）
+     */
+    resizeDebounced(): void;
     /**
      * 获取原始实例
      */
@@ -168,10 +187,15 @@ export declare class TableSheet {
     /**
      * 获取标记映射
      */
-    getMarkedMap(): Map<string, {
-        isMarked: boolean;
-        comment?: string;
-    }> | null;
+    getMarkedMap(): MarkedMap | null;
+    /**
+     * 获取当前表格的所有数据（包括编辑后的最新值）
+     */
+    getAllRecords(): any[][];
+    /**
+     * 获取列配置
+     */
+    getColumns(): any[];
     /**
      * 监听事件
      */

package/core/Toolbar.d.ts

@@ -1,11 +1,9 @@
 
 export interface ToolbarConfig {
     container?: HTMLElement | string;
-    title?: string;
-    count?: number;
-    total?: number;
-    hint?: string;
+    /** 冻结列数 */
     freezeCount?: number;
+    /** 是否显示错误列表 */
     showErrorList?: boolean;
     /** 左侧自定义内容，可以是 HTMLElement 或返回 HTMLElement 的函数 */
     leftSlot?: HTMLElement | (() => HTMLElement) | null;
@@ -26,10 +24,6 @@ export declare class Toolbar {
     private config;
     private elements;
     constructor(config: ToolbarConfig);
-    /**
-     * 初始化
-     */
-    private init;
     /**
      * 获取容器
      */
@@ -54,26 +48,10 @@ export declare class Toolbar {
      * 创建冻结列选择器（标题 + 数字输入框 + 上下箭头）
      */
     private createFreezeButton;
-    /**
-     * 格式化数字（添加千分位）
-     */
-    private formatNumber;
     /**
      * 注入样式
      */
     private injectStyles;
-    /**
-     * 更新标题
-     */
-    updateTitle(title: string): void;
-    /**
-     * 更新统计数据
-     */
-    updateStats(count: number, total: number): void;
-    /**
-     * 更新提示信息
-     */
-    updateHint(hint: string): void;
     /**
      * 更新冻结列数
      */

package/core/excel/ExcelParser.d.ts

@@ -1,4 +1,4 @@
-import { ExcelParseOptions, ExcelParseResult } from './types';
+import { ExcelParseOptions, ExcelParseResult, MultiSheetParseResult } from './types';
 
 export declare class ExcelParser {
     /**
@@ -9,4 +9,12 @@ export declare class ExcelParser {
      * 构建列配置
      */
     private static buildColumns;
+    /**
+     * 解析 Excel 所有 Sheet
+     */
+    static parseAllSheets(buffer: ArrayBuffer, options?: Omit<ExcelParseOptions, "sheetIndex">): MultiSheetParseResult;
+    /**
+     * 获取 Excel 文件的 Sheet 名称列表
+     */
+    static getSheetNames(buffer: ArrayBuffer): string[];
 }

package/core/excel/index.d.ts

@@ -1,4 +1,4 @@
-import { ExcelParseOptions, ExcelParseResult } from './types';
+import { ExcelParseOptions, ExcelParseResult, MultiSheetParseResult } from './types';
 /**
  * Excel 模块统一导出
  */
@@ -13,3 +13,15 @@ export declare function exportToExcelStream(columns: any[], records: any[], opti
     filterEmptyColumns?: boolean;
 }): ArrayBuffer;
 export declare function downloadExcel(buffer: ArrayBuffer, filename?: string): void;
+/**
+ * 解析 Excel 所有 Sheet
+ */
+export declare function parseAllSheets(buffer: ArrayBuffer, options?: Omit<ExcelParseOptions, "sheetIndex">): MultiSheetParseResult;
+/**
+ * 从 URL 加载并解析 Excel 所有 Sheet
+ */
+export declare function loadAllSheetsFromUrl(url: string, options?: Omit<ExcelParseOptions, "sheetIndex">): Promise<MultiSheetParseResult>;
+/**
+ * 获取 Excel 文件的 Sheet 名称列表
+ */
+export declare function getSheetNames(buffer: ArrayBuffer): string[];

package/core/excel/types.d.ts

@@ -27,7 +27,7 @@ export interface CellComment {
 export interface ExcelParseResult {
     columns: Array<{
         key: string;
-        field: string;
+        field: string | number;
         title: string;
         width: number;
         sort?: boolean;
@@ -37,3 +37,26 @@ export interface ExcelParseResult {
     cellStyles?: Map<string, CellStyle>;
     cellComments?: Map<string, CellComment>;
 }
+/**
+ * 单个 Sheet 的解析结果
+ */
+export interface SheetData {
+    sheetName: string;
+    sheetIndex: number;
+    columns: ExcelParseResult["columns"];
+    records: any[][];
+    cellStyles?: Map<string, CellStyle>;
+    cellComments?: Map<string, CellComment>;
+    /** 是否有错误数据 */
+    hasError?: boolean;
+    /** 错误数量 */
+    errorCount?: number;
+}
+/**
+ * 多 Sheet 解析结果
+ */
+export interface MultiSheetParseResult {
+    sheets: SheetData[];
+    sheetNames: string[];
+    activeSheetIndex: number;
+}

package/core/managers/CellMarkManager.d.ts

@@ -1,15 +1,13 @@
-/**
- * 标记单元格管理器
- */
+import { MarkedMap } from '../processors/StyleProcessor';
+
 export declare class CellMarkManager {
     private markedMap;
     private tableInstance;
-    constructor(tableInstance: any, markedMap?: Map<string, {
-        isMarked: boolean;
-        comment?: string;
-    }>);
+    private markedCellsSet;
+    private tooltipThrottle;
+    constructor(tableInstance: any, markedMap?: MarkedMap);
     /**
-     * 处理单元格鼠标进入事件
+     * 处理单元格鼠标进入事件（性能优化版）
      */
     handleCellMouseEnter(args: any): void;
     /**
@@ -19,15 +17,13 @@ export declare class CellMarkManager {
     /**
      * 获取标记映射
      */
-    getMarkedMap(): Map<string, {
-        isMarked: boolean;
-        comment?: string;
-    }> | null;
+    getMarkedMap(): MarkedMap | null;
     /**
      * 设置标记映射
      */
-    setMarkedMap(markedMap: Map<string, {
-        isMarked: boolean;
-        comment?: string;
-    }>): void;
+    setMarkedMap(markedMap: MarkedMap): void;
+    /**
+     * 销毁实例，清理引用
+     */
+    destroy(): void;
 }

package/core/managers/EventManager.d.ts

@@ -31,4 +31,8 @@ export declare class EventManager {
      * 取消监听事件
      */
     off(eventName: string, callback?: Function): void;
+    /**
+     * 销毁实例，解绑所有事件
+     */
+    destroy(): void;
 }

package/core/processors/DataProcessor.d.ts

@@ -1,16 +1,12 @@
-/**
- * 数据处理器 - 处理数据预处理逻辑
- */
+import { MarkedMap } from './StyleProcessor';
+
 export declare class DataProcessor {
     /**
      * 预处理数据：将 {value, isMarked} 格式转换为二维数组格式，并构建标记索引
      */
     static processRecords(records: any[], columns: any[]): {
         displayRecords: any[][];
-        markedMap: Map<string, {
-            isMarked: boolean;
-            comment?: string;
-        }>;
+        markedMap: MarkedMap;
     };
     /**
      * 处理数组格式的行

package/core/processors/StyleProcessor.d.ts

@@ -1,15 +1,14 @@
-import { CellStyle } from '../excel';
-
+/**
+ * 样式处理器 - 处理列样式配置
+ */
+export interface MarkedInfo {
+    isMarked: boolean;
+    comment?: string;
+}
+export type MarkedMap = Map<string, MarkedInfo>;
 export declare class StyleProcessor {
     /**
-     * 初始化列配置，根据 markedMap 添加高亮样式，并应用 Excel 单元格样式
-     */
-    static initColumns(columns: any[], markedMap: Map<string, {
-        isMarked: boolean;
-        comment?: string;
-    }>, cellStyles?: Map<string, CellStyle> | null): any[];
-    /**
-     * 应用 Excel 单元格样式
+     * 初始化列配置，根据 markedMap 添加高亮样式
      */
-    private static applyExcelStyle;
+    static initColumns(columns: any[], markedMap: MarkedMap, headerRowCount?: number): any[];
 }

package/core/styles/dialog.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Dialog 样式
+ */
+export declare const DIALOG_STYLES = "\n  .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: #1D2129;\n    pointer-events: auto;\n  }\n\n  .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  .find-replace-title {\n    font-size: 16px;\n    font-weight: 500;\n    color: #303133;\n  }\n\n  .find-replace-body {\n    padding: 16px;\n  }\n\n  .find-replace-group {\n    margin-bottom: 16px;\n    display: flex;\n    align-items: center;\n  }\n\n  .find-replace-label {\n    display: block;\n    min-width: 56px;\n    margin-right: 8px;\n  }\n\n  .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  .find-replace-checkbox input {\n    margin-right: 6px;\n  }\n\n  .find-replace-input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    flex: 1;\n    height: 32px;\n  }\n\n  .find-replace-input {\n    width: 100%;\n    padding: 0px 12px;\n    border: 1px solid #dcdfe6;\n    border-radius: 4px;\n    height: 32px;\n  }\n\n  .find-replace-input:focus {\n    outline: none;\n    border-color: #409eff;\n  }\n\n  .current-position {\n    margin-left: 10px;\n    color: #409eff;\n    font-weight: 500;\n  }\n\n  .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  .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\n  .find-replace-btn-primary {\n    background-color: var(--sl-color-primary);\n    color: white;\n  }\n\n  .find-replace-btn-primary:hover {\n    border-color: var(--sl-button-hover-border-color);\n    background-color: var(--sl-button-hover-bg-color);\n  }\n\n  .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  .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  .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  .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  .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  .message-toast.show {\n    transform: translateX(-50%) translateY(0);\n    opacity: 1;\n  }\n";
+export declare const DIALOG_STYLE_ID = "find-replace-styles";

package/core/styles/index.d.ts

@@ -0,0 +1,2 @@
+export { TOOLBAR_STYLES, TOOLBAR_STYLE_ID } from './toolbar';
+export { DIALOG_STYLES, DIALOG_STYLE_ID } from './dialog';

package/core/styles/toolbar.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Toolbar 样式
+ */
+export declare const TOOLBAR_STYLES = "\n  .sl-toolbar {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 8px 16px;\n    background: var(--sl-vtable-card-bg-color);\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n    flex-shrink: 0;\n    border-radius: 4px;\n  }\n  \n  .sl-toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n  }\n\n  .sl-toolbar-btn {\n    padding: 6px 16px;\n    height: 32px;\n    border: 1px solid var(--sl-vtable-bg-color1);\n    border-radius: 4px;\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n    cursor: pointer;\n    white-space: nowrap;\n  }\n\n  .sl-toolbar-btn:hover {\n    background: #E8E9EB;\n  }\n\n  .sl-toolbar-btn-icon {\n    padding: 6px 10px;\n    font-size: 16px;\n    min-width: 32px;\n  }\n\n  .sl-toolbar-btn-complex {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .sl-btn-icon {\n    font-size: 14px;\n  }\n\n  .sl-btn-text {\n    font-size: 14px;\n  }\n\n  .sl-btn-count {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--sl-vtable-primary-color);\n  }\n\n  .sl-btn-suffix {\n    font-size: 14px;\n  }\n\n  .sl-freeze-selector {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n\n  .sl-freeze-label {\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n    white-space: nowrap;\n  }\n\n  .sl-freeze-input-wrapper {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    background: var(--sl-vtable-bg-color1);\n    border: 1px solid var(--sl-vtable-bg-color1);\n    border-radius: 4px;\n    transition: all 0.2s;\n    height: 32px;\n    box-sizing: border-box;\n  }\n\n  .sl-freeze-input-wrapper:focus-within {\n    border-color: var(--sl-vtable-primary-color);\n    box-shadow: 0 0 0 2px rgba(40, 120, 255, 0.1);\n  }\n\n  .sl-freeze-input {\n    width: 30px;\n    height: 30px;\n    padding: 0px 2px;\n    border-radius: 4px 0px 0px 4px;\n    background: #fff;\n    border: none;\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n    text-align: center;\n    outline: none;\n    -moz-appearance: textfield;\n  }\n\n  .sl-freeze-input::-webkit-outer-spin-button,\n  .sl-freeze-input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  .sl-freeze-arrows {\n    display: flex;\n    flex-direction: column;\n    border-left: 1px solid #E5E6EB;\n  }\n\n  .sl-freeze-arrow {\n    width: 20px;\n    height: 10px;\n    padding: 0;\n    background: transparent;\n    border: none;\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n\n  .sl-freeze-arrow-up {\n    border-radius: 0 8px 0 0;\n  }\n\n  .sl-freeze-arrow-down {\n    border-radius: 0 0 8px 0;\n    transform: rotate(180deg);\n  }\n\n  .sl-freeze-suffix {\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n  }\n\n  .sl-error-list-checkbox {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .sl-checkbox-input {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  .sl-checkbox-custom {\n    position: relative;\n    width: 16px;\n    height: 16px;\n    border: 2px solid #C9CDD4;\n    border-radius: 4px;\n    background: #fff;\n    transition: all 0.2s;\n    flex-shrink: 0;\n  }\n\n  .sl-checkbox-input:checked + .sl-checkbox-custom {\n    background: var(--sl-vtable-primary-color);\n    border-color: var(--sl-vtable-primary-color);\n  }\n\n  .sl-checkbox-input:checked + .sl-checkbox-custom::after {\n    content: \"\";\n    position: absolute;\n    left: 4px;\n    top: 1px;\n    width: 4px;\n    height: 8px;\n    border: solid white;\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n  }\n\n  .sl-error-list-checkbox:hover .sl-checkbox-custom {\n    border-color: var(--sl-vtable-primary-color);\n  }\n\n  .sl-checkbox-label {\n    font-size: 14px;\n    color: var(--sl-vtable-content-color);\n  }\n\n  /* \u54CD\u5E94\u5F0F\u8BBE\u8BA1 */\n  @media (max-width: 768px) {\n    .sl-toolbar {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 12px;\n    }\n\n    .sl-toolbar-left {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 8px;\n    }\n\n    .sl-toolbar-right {\n      width: 100%;\n      justify-content: flex-start;\n      flex-wrap: wrap;\n    }\n  }\n";
+export declare const TOOLBAR_STYLE_ID = "sl-toolbar-styles";

package/core/types.d.ts

@@ -10,8 +10,8 @@ export interface TableSheetConfig {
     records?: any[];
     /** 是否显示公式栏 */
     showFormulaBar?: boolean;
-    /** 是否显示工作表标签 */
-    showSheetTab?: boolean;
+    /** 是否显示工作表标签（VTable原生），默认 false */
+    showSheets?: boolean;
     /** 工作表配置 */
     sheets?: SheetConfig[];
     /** 编辑器配置 */
@@ -32,7 +32,7 @@ export interface SheetConfig {
     columns: any[];
     data: any[];
     dragOrder?: {
-        dragHeaderMode?: 'all' | 'column' | 'row';
+        dragHeaderMode?: "all" | "column" | "row";
     };
     [key: string]: any;
 }

package/core/utils/DomUtils.d.ts

@@ -0,0 +1,23 @@
+/**
+ * DOM 工具类 - 提取公共的 DOM 操作方法
+ */
+export declare class DomUtils {
+    /**
+     * 获取容器元素
+     * @param container 容器元素或选择器
+     */
+    static getContainer(container: HTMLElement | string): HTMLElement | null;
+    /**
+     * 注入样式到页面
+     * @param id 样式标签的 ID
+     * @param css CSS 内容
+     */
+    static injectStyles(id: string, css: string): void;
+    /**
+     * 创建元素并设置属性
+     * @param tag 标签名
+     * @param className 类名
+     * @param innerHTML 内部 HTML
+     */
+    static createElement<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, innerHTML?: string): HTMLElementTagNameMap[K];
+}

package/core/utils/index.d.ts

@@ -0,0 +1 @@
+export { DomUtils } from './DomUtils';

package/index.d.ts

@@ -3,6 +3,8 @@
  * 支持多种技术栈：Vue 2/3、原生 JS、Web Component
  */
 export type { TableSheetConfig, SheetConfig, EditorConfig, CellInfo, } from './core/types';
-export { loadExcelFromUrl, parseExcelFile, parseExcelBuffer, fetchExcelFromUrl, } from './core/ExcelUtils';
-export type { ExcelParseOptions, ExcelParseResult, CellStyle, } from './core/ExcelUtils';
+export { loadExcelFromUrl, parseExcelFile, parseExcelBuffer, fetchExcelFromUrl, parseAllSheets, loadAllSheetsFromUrl, getSheetNames, } from './core/excel';
+export type { ExcelParseOptions, ExcelParseResult, CellStyle, SheetData, MultiSheetParseResult, } from './core/excel';
+export { SheetTabs } from './core/SheetTabs';
+export type { SheetTabsConfig } from './core/SheetTabs';
 export { SlTableSheet as default } from './core/SlTableSheet';