sheetnext 0.2.3 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +164 -164
  2. package/README_CN.md +163 -163
  3. package/dist/sheetnext.css +1 -1
  4. package/dist/sheetnext.es.js +3 -3
  5. package/dist/sheetnext.locale.zh-CN.es.js +3 -3
  6. package/dist/sheetnext.locale.zh-CN.umd.js +3 -3
  7. package/dist/sheetnext.umd.js +3 -3
  8. package/docs/ai-relay.md +284 -284
  9. package/docs/core-api.md +3008 -2980
  10. package/docs/enums.md +171 -171
  11. package/docs/events.md +331 -331
  12. package/docs/image_en.png +0 -0
  13. package/docs/json-format.md +426 -426
  14. package/package.json +1 -1
package/README.md CHANGED
@@ -1,164 +1,164 @@
1
- <p align="center">
2
- <img src="docs/logo.png" alt="SheetNext Logo" width="80" />
3
- </p>
4
-
5
- <p align="center">
6
- A pure front-end spreadsheet component with Excel-like capabilities, built-in native AI workflows, and flexible LLM integration for data operations.
7
- </p>
8
-
9
- <p align="center">
10
- English | <a href="./README_CN.md">简体中文</a>
11
- </p>
12
-
13
- <p align="center">
14
- <a href="https://www.npmjs.com/package/sheetnext"><img src="https://img.shields.io/npm/v/sheetnext.svg" alt="npm version" /></a>
15
- <a href="https://www.npmjs.com/package/sheetnext"><img src="https://img.shields.io/npm/dm/sheetnext.svg" alt="npm downloads" /></a>
16
- <a href="./LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" alt="license" /></a>
17
- <img src="https://img.shields.io/badge/rendering-Canvas-ff8c00.svg" alt="Canvas rendering" />
18
- <img src="https://img.shields.io/badge/workflow-AI%20Ready-00A67E.svg" alt="AI ready" />
19
- <img src="https://img.shields.io/badge/file%20support-XLSX%20%7C%20CSV%20%7C%20JSON-1f6feb.svg" alt="file support" />
20
- </p>
21
-
22
- <p align="center">
23
- <img src="docs/image_en.png" alt="SheetNext Screenshot" width="100%" />
24
- </p>
25
-
26
- - SheetNext is a pure front-end, high-performance spreadsheet engine that provides enterprises with a ready-to-use intelligent spreadsheet foundation.
27
- - With the AI-driven development approach, a single developer + AI can integrate and deliver complex enterprise spreadsheet solutions.
28
- - Common scenarios like ledgers, budgets, analytics, data entry, and approvals can produce a first version in minutes.
29
-
30
- ## ✨ Key Features
31
-
32
- - 📊 Full Spreadsheet Capabilities — Formula engine, charts, pivot tables, super tables, slicers, conditional formatting, data validation, sparklines, freeze panes, sorting & filtering, and more
33
- - 🤖 AI-Powered Workflow — Built-in AI automation for template generation, data analysis, formula writing, and cross-sheet logic
34
- - 📁 Native File Support — Import/export Excel (.xlsx), CSV, and JSON out of the box, no extra plugins needed
35
- - 🚀 Zero-Config Setup — All features built in, no additional dependencies required
36
- - ⚡ High-Performance Rendering — Canvas-based virtual scrolling handles large datasets with ease
37
-
38
- ## 🚀 Quick Start
39
-
40
- SheetNext can be integrated with just a few lines of code and works with any front-end framework (Vue, React, Angular, etc.).
41
-
42
- ### Option 1: Traditional Integration
43
-
44
- #### Install via npm
45
-
46
- ```bash
47
- npm install sheetnext
48
- ```
49
-
50
- ```html
51
- <!-- Container for the editor -->
52
- <div id="SNContainer" style="width:100vw;height:100vh;padding:0 7px 7px"></div>
53
- ```
54
-
55
- ```javascript
56
- import SheetNext from 'sheetnext';
57
- import 'sheetnext.css';
58
-
59
- const SN = new SheetNext(document.querySelector('#SNContainer'));
60
- ```
61
-
62
- #### Browser Direct Import (CDN)
63
-
64
- ```html
65
- <!DOCTYPE html>
66
- <html lang="en">
67
- <head>
68
- <meta charset="UTF-8">
69
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
70
- <title>SheetNext Demo</title>
71
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.css">
72
- </head>
73
- <body>
74
- <div id="SNContainer" style="width:100vw;height:100vh;padding:0 7px 7px"></div>
75
- <script src="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.umd.js"></script>
76
- <script>
77
- const SN = new SheetNext(document.querySelector('#SNContainer'));
78
- </script>
79
- </body>
80
- </html>
81
- ```
82
-
83
- #### Internationalization (i18n)
84
-
85
- The default language is English (en-US). A built-in Chinese (zh-CN) locale is available.
86
-
87
- Import locale via npm:
88
-
89
- ```javascript
90
- import SheetNext from 'sheetnext';
91
- import zhCN from 'sheetnext/locales/zh-CN.js';
92
-
93
- SheetNext.registerLocale('zh-CN', zhCN);
94
-
95
- const SN = new SheetNext(document.querySelector('#SNContainer'), {
96
- locale: 'zh-CN'
97
- });
98
- ```
99
-
100
- Import locale via CDN:
101
-
102
- ```html
103
- <script src="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.umd.js"></script>
104
- <script src="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.locale.zh-CN.umd.js"></script>
105
- <script>
106
- const SN = new SheetNext(document.querySelector('#SNContainer'), {
107
- locale: 'zh-CN'
108
- });
109
- </script>
110
- ```
111
-
112
- ### Option 2: AI-Driven Development (Recommended)
113
-
114
- #### Step 1: Download the AI Development Reference
115
-
116
- - Open `docs/detail/` in the repository.
117
- - The core references are `docs/detail/core-api.md`, `docs/detail/events.md`, and `docs/detail/enums.md`.
118
- - Protocol supplements are `docs/detail/ai-relay.md` and `docs/detail/json-format.md`.
119
-
120
- #### Step 2: Feed `docs/detail` to Your AI Tool
121
-
122
- Use Cursor / Claude / ChatGPT / Copilot or any AI coding assistant. Provide the `docs/detail/` reference set first, then describe your requirements.
123
-
124
- Recommended prompt template:
125
-
126
- ```text
127
- You are a senior SheetNext AI development expert. Please read and understand the documentation I provide, then give a directly implementable solution.
128
- Execution order:
129
- 1) Read: docs/detail/core-api.md
130
- 2) Read as needed: docs/detail/events.md, docs/detail/enums.md, docs/detail/ai-relay.md, and docs/detail/json-format.md
131
- 3) Identify user goals (business goals + technical goals)
132
- 4) Output a minimum viable implementation (get it running first, then optimize)
133
- 5) All APIs and code must strictly follow the documentation
134
- 6) Provide verification steps and risk points
135
- Constraints:
136
- - Do not fabricate APIs
137
- - Do not skip edge cases
138
- - Prioritize reusing existing capabilities, avoid over-engineering
139
- ```
140
-
141
- #### Step 3: Describe Your Business Goal
142
-
143
- For example:
144
-
145
- - "Build a sales pivot analysis template with charts and slicers"
146
- - "Build a multi-sheet budget entry system with permissions and printing"
147
- - "Migrate an existing Excel template to an online editable version"
148
-
149
- ## 🎯 Use Cases
150
-
151
- - Online reporting systems, BI analytics front-ends, business dashboards
152
- - Spreadsheet engine modules in ERP / CRM / Finance / Supply Chain systems
153
- - Complex business forms for budgets, settlements, reconciliation, planning, and scheduling
154
- - AI-powered scenarios: auto-generate tables, analysis, templates, and logic
155
-
156
- ## Browser Support
157
-
158
- | Chrome | Firefox | Safari | Edge |
159
- |--------|---------|--------|------|
160
- | 80+ | 75+ | 13+ | 80+ |
161
-
162
- ## License
163
-
164
- Apache-2.0. See [LICENSE](./LICENSE).
1
+ <p align="center">
2
+ <img src="docs/logo.png" alt="SheetNext Logo" width="80" />
3
+ </p>
4
+
5
+ <p align="center">
6
+ A pure front-end spreadsheet component with Excel-like capabilities, built-in native AI workflows, and flexible LLM integration for data operations.
7
+ </p>
8
+
9
+ <p align="center">
10
+ English | <a href="./README_CN.md">简体中文</a>
11
+ </p>
12
+
13
+ <p align="center">
14
+ <a href="https://www.npmjs.com/package/sheetnext"><img src="https://img.shields.io/npm/v/sheetnext.svg" alt="npm version" /></a>
15
+ <a href="https://www.npmjs.com/package/sheetnext"><img src="https://img.shields.io/npm/dm/sheetnext.svg" alt="npm downloads" /></a>
16
+ <a href="./LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" alt="license" /></a>
17
+ <img src="https://img.shields.io/badge/rendering-Canvas-ff8c00.svg" alt="Canvas rendering" />
18
+ <img src="https://img.shields.io/badge/workflow-AI%20Ready-00A67E.svg" alt="AI ready" />
19
+ <img src="https://img.shields.io/badge/file%20support-XLSX%20%7C%20CSV%20%7C%20JSON-1f6feb.svg" alt="file support" />
20
+ </p>
21
+
22
+ <p align="center">
23
+ <img src="docs/image_en.png" alt="SheetNext demo" width="100%" />
24
+ </p>
25
+
26
+ - SheetNext is a pure front-end, high-performance spreadsheet engine that provides enterprises with a ready-to-use intelligent spreadsheet foundation.
27
+ - With the AI-driven development approach, a single developer + AI can integrate and deliver complex enterprise spreadsheet solutions.
28
+ - Common scenarios like ledgers, budgets, analytics, data entry, and approvals can produce a first version in minutes.
29
+
30
+ ## ✨ Key Features
31
+
32
+ - 📊 Full Spreadsheet Capabilities — Formula engine, charts, pivot tables, super tables, slicers, conditional formatting, data validation, sparklines, freeze panes, sorting & filtering, and more
33
+ - 🤖 AI-Powered Workflow — Built-in AI automation for template generation, data analysis, formula writing, and cross-sheet logic
34
+ - 📁 Native File Support — Import/export Excel (.xlsx), CSV, and JSON out of the box, no extra plugins needed
35
+ - 🚀 Zero-Config Setup — All features built in, no additional dependencies required
36
+ - ⚡ High-Performance Rendering — Canvas-based virtual scrolling handles large datasets with ease
37
+
38
+ ## 🚀 Quick Start
39
+
40
+ SheetNext can be integrated with just a few lines of code and works with any front-end framework (Vue, React, Angular, etc.).
41
+
42
+ ### Option 1: Traditional Integration
43
+
44
+ #### Install via npm
45
+
46
+ ```bash
47
+ npm install sheetnext
48
+ ```
49
+
50
+ ```html
51
+ <!-- Container for the editor -->
52
+ <div id="SNContainer" style="width:100vw;height:100vh;padding:0 7px 7px"></div>
53
+ ```
54
+
55
+ ```javascript
56
+ import SheetNext from 'sheetnext';
57
+ import 'sheetnext.css';
58
+
59
+ const SN = new SheetNext(document.querySelector('#SNContainer'));
60
+ ```
61
+
62
+ #### Browser Direct Import (CDN)
63
+
64
+ ```html
65
+ <!DOCTYPE html>
66
+ <html lang="en">
67
+ <head>
68
+ <meta charset="UTF-8">
69
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
70
+ <title>SheetNext Demo</title>
71
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.css">
72
+ </head>
73
+ <body>
74
+ <div id="SNContainer" style="width:100vw;height:100vh;padding:0 7px 7px"></div>
75
+ <script src="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.umd.js"></script>
76
+ <script>
77
+ const SN = new SheetNext(document.querySelector('#SNContainer'));
78
+ </script>
79
+ </body>
80
+ </html>
81
+ ```
82
+
83
+ #### Internationalization (i18n)
84
+
85
+ The default language is English (en-US). A built-in Chinese (zh-CN) locale is available.
86
+
87
+ Import locale via npm:
88
+
89
+ ```javascript
90
+ import SheetNext from 'sheetnext';
91
+ import zhCN from 'sheetnext/locales/zh-CN.js';
92
+
93
+ SheetNext.registerLocale('zh-CN', zhCN);
94
+
95
+ const SN = new SheetNext(document.querySelector('#SNContainer'), {
96
+ locale: 'zh-CN'
97
+ });
98
+ ```
99
+
100
+ Import locale via CDN:
101
+
102
+ ```html
103
+ <script src="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.umd.js"></script>
104
+ <script src="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.locale.zh-CN.umd.js"></script>
105
+ <script>
106
+ const SN = new SheetNext(document.querySelector('#SNContainer'), {
107
+ locale: 'zh-CN'
108
+ });
109
+ </script>
110
+ ```
111
+
112
+ ### Option 2: AI-Driven Development (Recommended)
113
+
114
+ #### Step 1: Download the AI Development Reference
115
+
116
+ - Open `docs/detail/` in the repository.
117
+ - The core references are `docs/detail/core-api.md`, `docs/detail/events.md`, and `docs/detail/enums.md`.
118
+ - Protocol supplements are `docs/detail/ai-relay.md` and `docs/detail/json-format.md`.
119
+
120
+ #### Step 2: Feed `docs/detail` to Your AI Tool
121
+
122
+ Use Cursor / Claude / ChatGPT / Copilot or any AI coding assistant. Provide the `docs/detail/` reference set first, then describe your requirements.
123
+
124
+ Recommended prompt template:
125
+
126
+ ```text
127
+ You are a senior SheetNext AI development expert. Please read and understand the documentation I provide, then give a directly implementable solution.
128
+ Execution order:
129
+ 1) Read: docs/detail/core-api.md
130
+ 2) Read as needed: docs/detail/events.md, docs/detail/enums.md, docs/detail/ai-relay.md, and docs/detail/json-format.md
131
+ 3) Identify user goals (business goals + technical goals)
132
+ 4) Output a minimum viable implementation (get it running first, then optimize)
133
+ 5) All APIs and code must strictly follow the documentation
134
+ 6) Provide verification steps and risk points
135
+ Constraints:
136
+ - Do not fabricate APIs
137
+ - Do not skip edge cases
138
+ - Prioritize reusing existing capabilities, avoid over-engineering
139
+ ```
140
+
141
+ #### Step 3: Describe Your Business Goal
142
+
143
+ For example:
144
+
145
+ - "Build a sales pivot analysis template with charts and slicers"
146
+ - "Build a multi-sheet budget entry system with permissions and printing"
147
+ - "Migrate an existing Excel template to an online editable version"
148
+
149
+ ## 🎯 Use Cases
150
+
151
+ - Online reporting systems, BI analytics front-ends, business dashboards
152
+ - Spreadsheet engine modules in ERP / CRM / Finance / Supply Chain systems
153
+ - Complex business forms for budgets, settlements, reconciliation, planning, and scheduling
154
+ - AI-powered scenarios: auto-generate tables, analysis, templates, and logic
155
+
156
+ ## Browser Support
157
+
158
+ | Chrome | Firefox | Safari | Edge |
159
+ |--------|---------|--------|------|
160
+ | 80+ | 75+ | 13+ | 80+ |
161
+
162
+ ## License
163
+
164
+ Apache-2.0. See [LICENSE](./LICENSE).
package/README_CN.md CHANGED
@@ -1,163 +1,163 @@
1
- <p align="center">
2
- <img src="docs/logo.png" alt="SheetNext Logo" width="80" />
3
- </p>
4
-
5
- <p align="center">
6
- 一款纯前端、媲美 Excel 的电子表格控件，内置原生 AI 工作流，可灵活接入大模型进行数据操作。
7
- </p>
8
-
9
- <p align="center">
10
- <a href="./README.md">English</a> | 简体中文
11
- </p>
12
-
13
- <p align="center">
14
- <a href="https://www.npmjs.com/package/sheetnext"><img src="https://img.shields.io/npm/v/sheetnext.svg" alt="npm version" /></a>
15
- <a href="https://www.npmjs.com/package/sheetnext"><img src="https://img.shields.io/npm/dm/sheetnext.svg" alt="npm downloads" /></a>
16
- <a href="./LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" alt="license" /></a>
17
- <img src="https://img.shields.io/badge/rendering-Canvas-ff8c00.svg" alt="Canvas rendering" />
18
- <img src="https://img.shields.io/badge/workflow-AI%20Ready-00A67E.svg" alt="AI ready" />
19
- <img src="https://img.shields.io/badge/file%20support-XLSX%20%7C%20CSV%20%7C%20JSON-1f6feb.svg" alt="file support" />
20
- </p>
21
-
22
- <p align="center">
23
- <img src="docs/image_en.png" alt="SheetNext Screenshot" width="100%" />
24
- </p>
25
-
26
- - SheetNext 是一款纯前端、高性能的电子表格引擎，为企业提供开箱即用的智能表格能力底座。
27
- - 提供AI开发方案，一个人 + AI，即可完成企业级复杂表格业务的集成与交付。
28
- - 台账、预算、分析、填报、审批等常见场景，几分钟产出首版。
29
-
30
- ## ✨ 核心特点
31
-
32
- - 📊 完整的电子表格功能 — 公式引擎、图表、数据透视表、超级表、切片器、条件格式、数据验证、迷你图、冻结窗格、排序筛选等高级能力全覆盖
33
- - 🤖 AI 智能工作流 — 内置 AI 全自动操作流程，模板生成、数据分析、公式编写、跨表逻辑轻松实现
34
- - 📁 原生文件支持 — 原生支持 Excel (.xlsx)、CSV、JSON 导入导出，无需额外插件
35
- - 🚀 开箱即用 — 零配置启动，所有功能内置，无需单独安装依赖库
36
- - ⚡ 高性能渲染 — 基于 Canvas 虚拟滚动，轻松处理大数据量表格
37
-
38
- ## 🚀 快速开始
39
-
40
- SheetNext 只需数行代码即可引入完整功能，支持 Vue、React、Angular 等任意前端框架。
41
-
42
- ### 方案一：传统开发集成
43
-
44
- #### 使用 npm 安装
45
-
46
- ```bash
47
- npm install sheetnext
48
- ```
49
-
50
- ```html
51
- <!-- 放置编辑器的容器 -->
52
- <div id="SNContainer" style="width:100vw;height:100vh;padding:0 7px 7px"></div>
53
- ```
54
-
55
- ```javascript
56
- import SheetNext from 'sheetnext';
57
- import 'sheetnext.css';
58
-
59
- const SN = new SheetNext(document.querySelector('#SNContainer'));
60
- ```
61
-
62
- #### 浏览器直接引入（CDN）
63
-
64
- ```html
65
- <!DOCTYPE html>
66
- <html lang="zh-CN">
67
- <head>
68
- <meta charset="UTF-8">
69
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
70
- <title>SheetNext Demo</title>
71
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.css">
72
- </head>
73
- <body>
74
- <div id="SNContainer" style="width:100vw;height:100vh;padding:0 7px 7px"></div>
75
- <script src="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.umd.js"></script>
76
- <script>
77
- const SN = new SheetNext(document.querySelector('#SNContainer'));
78
- </script>
79
- </body>
80
- </html>
81
- ```
82
-
83
- #### 国际化配置
84
-
85
- 默认语言为英文（en-US），内置中文（zh-CN）语言包。
86
-
87
- npm 方式引入语言包：
88
-
89
- ```javascript
90
- import SheetNext from 'sheetnext';
91
- import zhCN from 'sheetnext/locales/zh-CN.js';
92
-
93
- SheetNext.registerLocale('zh-CN', zhCN);
94
-
95
- const SN = new SheetNext(document.querySelector('#SNContainer'), {
96
- locale: 'zh-CN'
97
- });
98
- ```
99
-
100
- CDN 方式引入语言包：
101
-
102
- ```html
103
- <script src="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.umd.js"></script>
104
- <script src="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.locale.zh-CN.umd.js"></script>
105
- <script>
106
- const SN = new SheetNext(document.querySelector('#SNContainer'), {
107
- locale: 'zh-CN'
108
- });
109
- </script>
110
- ```
111
-
112
- ### 方案二：AI 驱动开发（推荐）
113
-
114
- #### Step 1：下载 AI 开发资料
115
-
116
- - 打开仓库中的 `docs/detail/` 目录。
117
- - 核心参考文档为 `docs/detail/core-api.md`、`docs/detail/events.md`、`docs/detail/enums.md`。
118
-
119
- #### Step 2：把 `docs/detail` 交给 AI
120
-
121
- 可使用 Cursor / Claude / ChatGPT / Copilot 等工具，先喂 `docs/detail/` 这组资料再提需求。
122
-
123
- 推荐指令模板：
124
-
125
- ```text
126
- 你是资深 SheetNext AI 开发专家，请先阅读并理解我提供的文档，再给出可直接落地的方案。
127
- 执行顺序：
128
- 1) 先阅读：docs/detail/core-api.md
129
- 2) 再按需阅读：docs/detail/events.md、docs/detail/enums.md
130
- 3) 识别用户目标（业务目标 + 技术目标）
131
- 4) 输出最小可行实现（先能跑，再优化）
132
- 5) 所有 API 与代码写法必须严格对齐文档
133
- 6) 给出验证步骤和风险点
134
- 约束：
135
- - 不编造 API
136
- - 不跳过边界条件
137
- - 优先复用已有能力，避免过度设计
138
- ```
139
-
140
- #### Step 3：给出你的业务目标
141
-
142
- 例如：
143
-
144
- - "做一个销售数据透视分析模板，包含图表和切片器"
145
- - "做一个多 sheet 的预算填报系统，带权限和打印"
146
- - "把现有 Excel 模板迁移成在线可编辑版本"
147
-
148
- ## 🎯 适用场景
149
-
150
- - 在线报表系统、BI 分析前端、经营驾驶舱
151
- - ERP/CRM/财务/供应链系统中的表格引擎模块
152
- - 预算、结算、对账、计划、排产等复杂业务表单
153
- - AI 自动做表、自动分析、自动生成模板与逻辑的场景
154
-
155
- ## 浏览器支持
156
-
157
- | Chrome | Firefox | Safari | Edge |
158
- |--------|---------|--------|------|
159
- | 80+ | 75+ | 13+ | 80+ |
160
-
161
- ## 许可证
162
-
163
- Apache-2.0，详见 [LICENSE](./LICENSE)。
1
+ <p align="center">
2
+ <img src="docs/logo.png" alt="SheetNext Logo" width="80" />
3
+ </p>
4
+
5
+ <p align="center">
6
+ 一款纯前端、媲美 Excel 的电子表格控件，内置原生 AI 工作流，可灵活接入大模型进行数据操作。
7
+ </p>
8
+
9
+ <p align="center">
10
+ <a href="./README.md">English</a> | 简体中文
11
+ </p>
12
+
13
+ <p align="center">
14
+ <a href="https://www.npmjs.com/package/sheetnext"><img src="https://img.shields.io/npm/v/sheetnext.svg" alt="npm version" /></a>
15
+ <a href="https://www.npmjs.com/package/sheetnext"><img src="https://img.shields.io/npm/dm/sheetnext.svg" alt="npm downloads" /></a>
16
+ <a href="./LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" alt="license" /></a>
17
+ <img src="https://img.shields.io/badge/rendering-Canvas-ff8c00.svg" alt="Canvas rendering" />
18
+ <img src="https://img.shields.io/badge/workflow-AI%20Ready-00A67E.svg" alt="AI ready" />
19
+ <img src="https://img.shields.io/badge/file%20support-XLSX%20%7C%20CSV%20%7C%20JSON-1f6feb.svg" alt="file support" />
20
+ </p>
21
+
22
+ <p align="center">
23
+ <img src="docs/image_en.png" alt="SheetNext demo" width="100%" />
24
+ </p>
25
+
26
+ - SheetNext 是一款纯前端、高性能的电子表格引擎，为企业提供开箱即用的智能表格能力底座。
27
+ - 提供AI开发方案，一个人 + AI，即可完成企业级复杂表格业务的集成与交付。
28
+ - 台账、预算、分析、填报、审批等常见场景，几分钟产出首版。
29
+
30
+ ## ✨ 核心特点
31
+
32
+ - 📊 完整的电子表格功能 — 公式引擎、图表、数据透视表、超级表、切片器、条件格式、数据验证、迷你图、冻结窗格、排序筛选等高级能力全覆盖
33
+ - 🤖 AI 智能工作流 — 内置 AI 全自动操作流程，模板生成、数据分析、公式编写、跨表逻辑轻松实现
34
+ - 📁 原生文件支持 — 原生支持 Excel (.xlsx)、CSV、JSON 导入导出，无需额外插件
35
+ - 🚀 开箱即用 — 零配置启动，所有功能内置，无需单独安装依赖库
36
+ - ⚡ 高性能渲染 — 基于 Canvas 虚拟滚动，轻松处理大数据量表格
37
+
38
+ ## 🚀 快速开始
39
+
40
+ SheetNext 只需数行代码即可引入完整功能，支持 Vue、React、Angular 等任意前端框架。
41
+
42
+ ### 方案一：传统开发集成
43
+
44
+ #### 使用 npm 安装
45
+
46
+ ```bash
47
+ npm install sheetnext
48
+ ```
49
+
50
+ ```html
51
+ <!-- 放置编辑器的容器 -->
52
+ <div id="SNContainer" style="width:100vw;height:100vh;padding:0 7px 7px"></div>
53
+ ```
54
+
55
+ ```javascript
56
+ import SheetNext from 'sheetnext';
57
+ import 'sheetnext.css';
58
+
59
+ const SN = new SheetNext(document.querySelector('#SNContainer'));
60
+ ```
61
+
62
+ #### 浏览器直接引入（CDN）
63
+
64
+ ```html
65
+ <!DOCTYPE html>
66
+ <html lang="zh-CN">
67
+ <head>
68
+ <meta charset="UTF-8">
69
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
70
+ <title>SheetNext Demo</title>
71
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.css">
72
+ </head>
73
+ <body>
74
+ <div id="SNContainer" style="width:100vw;height:100vh;padding:0 7px 7px"></div>
75
+ <script src="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.umd.js"></script>
76
+ <script>
77
+ const SN = new SheetNext(document.querySelector('#SNContainer'));
78
+ </script>
79
+ </body>
80
+ </html>
81
+ ```
82
+
83
+ #### 国际化配置
84
+
85
+ 默认语言为英文（en-US），内置中文（zh-CN）语言包。
86
+
87
+ npm 方式引入语言包：
88
+
89
+ ```javascript
90
+ import SheetNext from 'sheetnext';
91
+ import zhCN from 'sheetnext/locales/zh-CN.js';
92
+
93
+ SheetNext.registerLocale('zh-CN', zhCN);
94
+
95
+ const SN = new SheetNext(document.querySelector('#SNContainer'), {
96
+ locale: 'zh-CN'
97
+ });
98
+ ```
99
+
100
+ CDN 方式引入语言包：
101
+
102
+ ```html
103
+ <script src="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.umd.js"></script>
104
+ <script src="https://cdn.jsdelivr.net/npm/sheetnext@0.2.0/dist/sheetnext.locale.zh-CN.umd.js"></script>
105
+ <script>
106
+ const SN = new SheetNext(document.querySelector('#SNContainer'), {
107
+ locale: 'zh-CN'
108
+ });
109
+ </script>
110
+ ```
111
+
112
+ ### 方案二：AI 驱动开发（推荐）
113
+
114
+ #### Step 1：下载 AI 开发资料
115
+
116
+ - 打开仓库中的 `docs/detail/` 目录。
117
+ - 核心参考文档为 `docs/detail/core-api.md`、`docs/detail/events.md`、`docs/detail/enums.md`。
118
+
119
+ #### Step 2：把 `docs/detail` 交给 AI
120
+
121
+ 可使用 Cursor / Claude / ChatGPT / Copilot 等工具，先喂 `docs/detail/` 这组资料再提需求。
122
+
123
+ 推荐指令模板：
124
+
125
+ ```text
126
+ 你是资深 SheetNext AI 开发专家，请先阅读并理解我提供的文档，再给出可直接落地的方案。
127
+ 执行顺序：
128
+ 1) 先阅读：docs/detail/core-api.md
129
+ 2) 再按需阅读：docs/detail/events.md、docs/detail/enums.md
130
+ 3) 识别用户目标（业务目标 + 技术目标）
131
+ 4) 输出最小可行实现（先能跑，再优化）
132
+ 5) 所有 API 与代码写法必须严格对齐文档
133
+ 6) 给出验证步骤和风险点
134
+ 约束：
135
+ - 不编造 API
136
+ - 不跳过边界条件
137
+ - 优先复用已有能力，避免过度设计
138
+ ```
139
+
140
+ #### Step 3：给出你的业务目标
141
+
142
+ 例如：
143
+
144
+ - "做一个销售数据透视分析模板，包含图表和切片器"
145
+ - "做一个多 sheet 的预算填报系统，带权限和打印"
146
+ - "把现有 Excel 模板迁移成在线可编辑版本"
147
+
148
+ ## 🎯 适用场景
149
+
150
+ - 在线报表系统、BI 分析前端、经营驾驶舱
151
+ - ERP/CRM/财务/供应链系统中的表格引擎模块
152
+ - 预算、结算、对账、计划、排产等复杂业务表单
153
+ - AI 自动做表、自动分析、自动生成模板与逻辑的场景
154
+
155
+ ## 浏览器支持
156
+
157
+ | Chrome | Firefox | Safari | Edge |
158
+ |--------|---------|--------|------|
159
+ | 80+ | 75+ | 13+ | 80+ |
160
+
161
+ ## 许可证
162
+
163
+ Apache-2.0，详见 [LICENSE](./LICENSE)。