sheetnext 0.1.4 → 0.1.6

package/AGENT.md

@@ -1,6 +1,6 @@
-# SheetNext AI 配置指南
+# SheetNext AI 中转配置指南
 
-> AI 中转服务搭建和配置说明
+> 一句话总结超级简单：写一个接口将前端传入的message消息分发给你想对接的大模型，然后在前端配置好接口地址即可开始工作！
 
 ## 文档导航
 
@@ -11,12 +11,20 @@
 
 ## 目录
 
-- [功能说明](#功能说明)
-- [核心架构](#核心架构)
-- [完整示例](#完整示例)
-- [消息格式](#消息格式)
-- [其他大模型对接](#其他大模型对接)
-- [部署建议](#部署建议)
+- [SheetNext AI 中转配置指南](#sheetnext-ai-中转配置指南)
+  - [文档导航](#文档导航)
+  - [目录](#目录)
+  - [功能说明](#功能说明)
+    - [核心功能](#核心功能)
+  - [核心架构](#核心架构)
+    - [工作流程](#工作流程)
+  - [完整示例](#完整示例)
+    - [安装依赖](#安装依赖)
+    - [完整代码](#完整代码)
+    - [配置说明](#配置说明)
+  - [消息格式](#消息格式)
+    - [请求格式](#请求格式)
+    - [响应格式](#响应格式)
 
 ---
 
@@ -30,14 +38,6 @@ AI 服务中转层是连接 SheetNext 前端与大模型 API 的桥梁，主要
 2. **流式数据处理** - 实现 AI 响应的流式接收与转发，提升用户交互体验
 3. **安全隔离** - 在服务端隐藏真实的 API Key，避免密钥泄露风险
 4. **使用统计** - 企业可在中转层统计 Token 消耗、请求次数等关键数据
-5. **多模态支持** - 处理文本和图片（Base64）输入，要求对接的大模型必须支持视觉能力
-
-### 关键要点
-
-- ✅ 中转接口编写完毕后，将请求地址在前端编辑器初始化时通过 `AI_URL` 填入
-- ✅ 编辑器在对话时会调用此 API，将整个对话历史以 `messages` 数组传入后端
-- ✅ 后端根据 `messages` 对大模型进行分发、格式转换和流式处理
-- ✅ 中转层可统计使用数据，保障 API Key 安全
 
 ---
 
@@ -63,107 +63,112 @@ AI 服务中转层是连接 SheetNext 前端与大模型 API 的桥梁，主要
 2. **格式转换** - 中转服务器将通用格式转换为目标大模型的专用格式
 3. **API 调用** - 使用服务端存储的 API Key 调用大模型 API
 4. **流式响应** - 接收大模型的流式响应，转换后通过 SSE (Server-Sent Events) 返回前端
-5. **数据统计** - 在中转层记录使用情况（可选）
 
 ---
 
 ## 完整示例
 
-以下是 **Node.js + Claude API** 的完整实现示例：
+通用中转完整实现示例：
 
 ### 安装依赖
 
 ```bash
-npm install @anthropic-ai/sdk
+npm install @anthropic-ai/sdk openai
 ```
 
 ### 完整代码
 
 ```javascript
 /**
- * SheetNext AI 中转服务器 - Claude 流式接收/发送示例
- * 功能: 消息格式转换、流式响应、安全中转
+ * SheetNext AI & claude/openai 中转服务器示例 Node.js 版本
+ * 2025.10.17 v1.0.0
  */
 
 const http = require('http');
 const Anthropic = require('@anthropic-ai/sdk');
+const OpenAI = require('openai');
 
 // ======= 配置 =======
 const CONFIG = {
-    apiKey: 'your-api-key-here',              // 您的 API Key
-    model: 'claude-sonnet-4-5-20250929',       // 模型名称
-    baseURL: 'https://api.anthropic.com'       // API 基础地址
+    model: 'claude-sonnet-4-5-20250929', // 设置模型名称，自动判断使用 claude 还是 openai
+    claude: {
+        apiKey: 'sk-xWp4TFA81arQCudIbLRmE0h1TtmM0lQWz4Lt7lKryUhk5HhN',
+        baseURL: 'https://m5.aitoo.fun/'
+    },
+    openai: {
+        apiKey: 'sk-UWq0SWmDIEFTI5hswtg5uONjQ95ECUneWtp46Pp9Kdujg9py',
+        baseURL: 'https://m5.aitoo.fun/v1'
+    }
 };
 
-const anthropic = new Anthropic({
-    apiKey: CONFIG.apiKey,
-    baseURL: CONFIG.baseURL
-});
+const anthropic = new Anthropic({ apiKey: CONFIG.claude.apiKey, baseURL: CONFIG.claude.baseURL });
+const openai = new OpenAI({ apiKey: CONFIG.openai.apiKey, baseURL: CONFIG.openai.baseURL });
 
-// ======= 消息转换器 =======
+// ======= message默认是openai格式，claude请求时转为它适配格式 =======
 const convertToClaudeMessages = (messages) => {
-    const system = [], userMessages = [];
+    const system = [];
+    const claudeMessages = [];
+    let isFirstSystem = true;
+
+    // 转换内容部分的辅助函数
+    const convertContent = (content) => {
+        const parts = Array.isArray(content) ? content : [{ type: 'text', text: content }];
+        return parts.map(part => {
+            if (part.type === 'text') {
+                return { type: 'text', text: part.text };
+            }
+            if (part.type === 'image_url') {
+                const [, mediaType, base64Data] = part.image_url.url.match(/data:(.*?);base64,(.*)/) || [];
+                if (base64Data) {
+                    return { type: 'image', source: { type: 'base64', media_type: mediaType || 'image/jpeg', data: base64Data } };
+                }
+            }
+            return null;
+        }).filter(Boolean);
+    };
 
     for (const msg of messages) {
         if (msg.role === 'system') {
-            // 处理系统消息
-            const parts = Array.isArray(msg.content)
-                ? msg.content
-                : [{ type: 'text', text: msg.content }];
-
-            parts.forEach(part => {
-                if (part.type === 'text') {
-                    system.push({
-                        type: 'text',
-                        text: part.text,
-                        ...(part.cacheable && { cache_control: { type: 'ephemeral' } })
-                    });
-                } else if (part.type === 'image_url') {
-                    // 转换 Base64 图片
-                    const [, mediaType, base64Data] =
-                        part.image_url.url.match(/data:(.*?);base64,(.*)/) || [];
-                    system.push({
-                        type: 'image',
-                        source: {
-                            type: 'base64',
-                            media_type: mediaType || 'image/jpeg',
-                            data: base64Data
-                        }
-                    });
-                }
-            });
+            if (isFirstSystem) {
+                // 第一个 system：提取文本作为 system 参数（约定无图片）
+                const text = typeof msg.content === 'string' ? msg.content : msg.content[0]?.text || '';
+                if (text) system.push({ type: 'text', text });
+                isFirstSystem = false;
+            } else {
+                // 其他 system：转为 user
+                claudeMessages.push({ role: 'user', content: convertContent(msg.content) });
+            }
         } else {
-            // 处理用户/助手消息
-            const content = typeof msg.content === 'string'
-                ? msg.content
-                : msg.content.map(part => {
-                    if (part.type === 'image_url') {
-                        const [, mediaType, base64Data] =
-                            part.image_url.url.match(/data:(.*?);base64,(.*)/) || [];
-                        return {
-                            type: 'image',
-                            source: {
-                                type: 'base64',
-                                media_type: mediaType || 'image/jpeg',
-                                data: base64Data
-                            }
-                        };
-                    }
-                    return part;
-                });
-            userMessages.push({ role: msg.role, content });
+            // user/assistant 消息
+            claudeMessages.push({ role: msg.role, content: convertContent(msg.content) });
         }
     }
 
-    return { system, messages: userMessages };
+    return { system, messages: claudeMessages };
 };
 
-// ======= Claude SDK 调用 =======
-async function callClaudeSDK(messages, onChunk) {
+// ======= Claude SDK =======
+async function callClaudeSDK(messages, model, onChunk) {
     const { system, messages: claudeMessages } = convertToClaudeMessages(messages);
 
+    // 打印请求结构（省略 base64 数据）
+    const printableRequest = {
+        system: system.map(s => s.type === 'image'
+            ? { type: 'image', source: { ...s.source, data: `[${s.source.data?.length || 0} chars]` } }
+            : s
+        ),
+        messages: claudeMessages.map(msg => ({
+            role: msg.role,
+            content: typeof msg.content === 'string' ? msg.content :
+                msg.content.map(c => c.type === 'image'
+                    ? { type: 'image', source: { ...c.source, data: `[${c.source.data?.length || 0} chars]` } }
+                    : c
+                )
+        }))
+    };
+
     const stream = await anthropic.messages.create({
-        model: CONFIG.model,
+        model: model,
         max_tokens: 8192,
         system,
         messages: claudeMessages,
@@ -174,21 +179,33 @@ async function callClaudeSDK(messages, onChunk) {
     for await (const event of stream) {
         if (event.type === 'content_block_delta') {
             const { delta } = event;
-            // 思考过程
             if (delta?.type === 'thinking_delta' && delta.thinking) {
                 onChunk({ type: 'think', delta: delta.thinking });
-            }
-            // 文本响应
-            else if (delta?.type === 'text_delta') {
+            } else if (delta?.type === 'text_delta') {
                 onChunk({ type: 'text', delta: delta.text });
             }
         }
     }
 }
 
+// ======= OpenAI SDK =======
+async function callOpenAISDK(messages, model, onChunk) {
+    const stream = await openai.chat.completions.create({
+        model: model,
+        messages: messages, // 直接使用 OpenAI 格式的 messages
+        stream: true
+    });
+
+    for await (const chunk of stream) {
+        const delta = chunk.choices[0]?.delta;
+        if (delta?.content) {
+            onChunk({ type: 'text', delta: delta.content });
+        }
+    }
+}
+
 // ======= HTTP 处理 =======
 async function handleChat(messages, res) {
-    // 设置 SSE 响应头
     res.writeHead(200, {
         'Content-Type': 'text/event-stream',
         'Cache-Control': 'no-cache',
@@ -198,14 +215,19 @@ async function handleChat(messages, res) {
 
     let ended = false;
     const write = (data) => !ended && !res.writableEnded && res.write(data);
-    const onChunk = (chunk) => write(`data: ${JSON.stringify(chunk)}\\n\\n`);
+    const onChunk = (chunk) => write(`data: ${JSON.stringify(chunk)}\n\n`);
 
     try {
-        await callClaudeSDK(messages, onChunk);
-        write(`data: [DONE]\\n\\n`);
+        // 根据模型名称自动判断使用哪个 provider
+        const provider = CONFIG.model.toLowerCase().includes('claude') ? 'claude' : 'openai';
+        if (provider === 'openai') {
+            await callOpenAISDK(messages, CONFIG.model, onChunk);
+        } else {
+            await callClaudeSDK(messages, CONFIG.model, onChunk);
+        }
+        write(`data: [DONE]\n\n`);
     } catch (error) {
-        console.error('AI 调用错误:', error);
-        write(`data: ${JSON.stringify({ error: error.message })}\\n\\n`);
+        write(`data: ${JSON.stringify({ error: error.message })}\n\n`);
     } finally {
         ended = true;
         res.end();
@@ -217,25 +239,21 @@ http.createServer(async (req, res) => {
     const corsHeaders = {
         'Access-Control-Allow-Origin': '*',
         'Access-Control-Allow-Methods': 'POST, OPTIONS',
-        'Access-Control-Allow-Headers': 'Content-Type, Authorization'
+        'Access-Control-Allow-Headers': 'Content-Type'
     };
 
-    // 处理 CORS 预检请求
     if (req.method === 'OPTIONS') {
         res.writeHead(200, corsHeaders);
         return res.end();
     }
 
-    // 处理 AI 请求
     if (req.url === '/sheetnextAI' && req.method === 'POST') {
         let body = '';
         req.on('data', chunk => body += chunk);
         req.on('end', async () => {
             try {
                 const { messages } = JSON.parse(body);
-                if (!Array.isArray(messages)) {
-                    throw new Error('Invalid messages format');
-                }
+                if (!Array.isArray(messages)) throw new Error('Invalid messages');
                 await handleChat(messages, res);
             } catch (error) {
                 res.writeHead(400, { 'Content-Type': 'application/json' });
@@ -246,20 +264,14 @@ http.createServer(async (req, res) => {
         res.writeHead(404);
         res.end('Not Found');
     }
-}).listen(3000, () => {
-    console.log('🚀 SheetNext AI 中转服务器运行在 http://localhost:3000');
-    console.log('📡 AI 端点: http://localhost:3000/sheetnextAI');
-});
+}).listen(3000, () => console.log('🚀 Server running on http://localhost:3000'));
 ```
 
-### 前端配置
+### 配置说明
 
-```javascript
-const SN = new SheetNext(document.querySelector('#container'), {
-  AI_URL: "http://localhost:3000/sheetnextAI",
-  AI_TOKEN: "your-optional-token"  // 可选，用于鉴权
-});
-```
+**判断规则:**
+- 如果模型名称包含 `claude`(不区分大小写) → 使用 Claude SDK
+- 其他情况 → 使用 OpenAI SDK
 
 ---
 
@@ -289,7 +301,7 @@ SheetNext 发送的请求体格式：
       "content": [
         {
           "type": "text",
-          "text": "这是表格截图"
+          "text": "某区域图片"
         },
         {
           "type": "image_url",
@@ -316,88 +328,3 @@ data: {"type":"text","delta":"帮"}
 
 data: [DONE]
 ```
-
-**响应对象格式：**
-
-```typescript
-{
-  type: "text" | "think" | "error",  // 消息类型
-  delta: string                       // 增量文本
-}
-```
-
----
-
-## 其他大模型对接
-
-### OpenAI GPT
-
-```javascript
-const OpenAI = require('openai');
-
-const openai = new OpenAI({
-  apiKey: 'your-openai-key'
-});
-
-async function callOpenAI(messages, onChunk) {
-  const stream = await openai.chat.completions.create({
-    model: 'gpt-4',
-    messages: messages,  // OpenAI 格式已兼容
-    stream: true
-  });
-
-  for await (const chunk of stream) {
-    const delta = chunk.choices[0]?.delta?.content;
-    if (delta) {
-      onChunk({ type: 'text', delta });
-    }
-  }
-}
-```
-
-### 其他模型
-
-只需要：
-1. 将 `messages` 转换为目标 API 的格式
-2. 调用 API 获取流式响应
-3. 将响应转换为 `{type, delta}` 格式
-4. 通过 `onChunk` 回调返回
-
----
-
-### 安全建议
-
-1. **使用环境变量存储 API Key**
-   ```javascript
-   const CONFIG = {
-       apiKey: process.env.ANTHROPIC_API_KEY,
-       // ...
-   };
-   ```
-
-2. **添加请求鉴权**
-   ```javascript
-   const authToken = req.headers.authorization;
-   if (authToken !== process.env.AUTH_TOKEN) {
-       res.writeHead(401);
-       return res.end('Unauthorized');
-   }
-   ```
-
-3. **限制请求频率**
-   ```javascript
-   const rateLimit = require('express-rate-limit');
-   // 使用限流中间件
-   ```
-
-4. **记录使用日志**
-   ```javascript
-   console.log(`[${new Date().toISOString()}] Token使用: ${usage.total_tokens}`);
-   ```
-
----
-
-## 相关文档
-
-- [← 返回 README](./README.md) - 快速开始和特点介绍
-- [← API 文档](./DOCS.md) - 详细的类、方法和属性说明

package/DOCS.md

@@ -2,11 +2,6 @@
 
 > 详细的类、方法和属性说明
 
-## 文档导航
-
-- [← 返回 README](./README.md) - 快速开始和特点介绍
-- [→ AI 配置指南](./AGENT.md) - AI 中转服务搭建
-
 ---
 
 ## 目录
@@ -699,10 +694,3 @@ SN.UndoRedo.redo();
 - 撤销/重做会自动记录大部分用户操作
 - 通过 API 修改的内容也会被记录
 - 历史记录栈有大小限制，过旧的操作会被清除
-
----
-
-## 相关文档
-
-- [← 返回 README](./README.md) - 快速开始和特点介绍
-- [→ AI 配置指南](./AGENT.md) - AI 中转服务搭建

package/README.md

@@ -1,37 +1,51 @@
-# SheetNext
+<div align="center">
+  <div><img src="docs/logo.png" alt="SheetNext Logo" width="100" style="vertical-align: middle;"/></div>
+  <div>✨ 数行代码可集成一个纯前端高性能 Excel 编辑器。</div>
+  <div>🤖 内置超级AI工作流程，目标用 AI 操纵 Excel 表格完成所有任务。</div>
+  <div>
+    <a href="https://www.sheetnext.com/">🏠 官网</a> |
+    <a href="https://www.sheetnext.com/editor">🎯 在线体验</a> |
+    <a href="./AGENT.md">🤖 AI中转文档</a> |
+    <a href="./DOCS.md">📖 编辑器操作文档</a>
+  </div>
+</div>
 
-> 一个纯前端高性能 Excel 编辑器，数行代码可集成表格全部基础功能。且作为新一代智能表格工具，内置AI工作流，简单配置即可全自动操作表格。
+---
 
-## 特点
+## ✨ 特点
 
-- **电子表格功能** - 支持电子表格核心功能如：单元格编辑、样式、公式引擎、图表、排序、筛选等。
-- **AI 工作流** - 内置 AI 全自动操作工作流，简单配置可以生成模板/数据/分析/公式等。
-- **导入导出** - 原生支持 Excel (.xlsx) 文件的导入和导出，无需插件前端秒操作。
+- 📊 **电子表格功能** - 支持电子表格核心功能如：单元格编辑、样式、公式引擎、图表、排序、筛选等
+- 🤖 **AI 工作流** - 内置 AI 全自动操作工作流，简单配置可以生成模板、数据分析、公式编写、跨表逻辑操纵等
+- 📁 **导入导出** - 原生支持 Excel (.xlsx) 文件的导入和导出，无需插件前端秒操作
+- 🚀 **开箱即用** - 不用单独配置任何库和插件，安装后简单配置即用所有功能
+- 🔄 **快速迭代** - 版本快速迭代更新，有问题可随时联系或提交 issue
 
-## 快速开始
+## 🚀 快速开始
 
-### 使用 npm 安装
+### 📦 使用 npm 安装
 
 ```bash
 npm install sheetnext
 ```
-
+```html
+<div id="SNContainer" style="width:100vw;height:100vh;padding:0 7px 7px"></div>
+```
 ```javascript
 import SheetNext from 'sheetnext';
-import 'sheetnext/dist/sheetnext.css';
+import 'sheetnext.css';
 
 // 注意设置容器#SNContainer宽高
 const SN = new SheetNext(document.querySelector('#SNContainer'));
 ```
 
-### 浏览器直接引入
+### 🌐 浏览器直接引入
 
 ```html
 <!-- 引入样式 -->
 <link rel="stylesheet" href="dist/sheetnext.css">
 
 <!-- 编辑器容器 -->
-<div id="SNContainer" style="width: 100vw; height: 100vh;"></div>
+<div id="SNContainer" style="width: 100vw; height: 100vh;padding:0 7px 7px"></div>
 
 <!-- 引入脚本 -->
 <script src="dist/sheetnext.umd.js"></script>
@@ -42,30 +56,16 @@ const SN = new SheetNext(document.querySelector('#SNContainer'));
 </script>
 ```
 
-## 初始化配置
+## ⚙️ 初始化配置
 
 ```javascript
 const SN = new SheetNext(document.querySelector('#container'), {
-  AI_URL: "http://localhost:3000/sheetnextAI",  // AI 中转地址
-  AI_TOKEN: "your-token",                       // 可选的认证 token
-  showMenuBar: true,                            // 显示菜单栏
-  showToolbar: true,                            // 显示工具栏
-  showAIChat: true,                             // 启用 AI 聊天
-  showFormulaBar: true,                         // 显示公式栏
-  showSheetTabBar: true,                        // 显示工作表标签栏
-  showAIChatWindow: false                       // 显示 AI 聊天窗口
+  AI_URL: "http://localhost:3000/sheetnextAI",  // AI 中转地址（可选）
+  AI_TOKEN: "your-token"                        // 中转 token（可选）
 });
 ```
 
-## 文档导航
-
-- **[完整 API 文档 (DOCS.md)](./DOCS.md)** - 详细的类、方法和属性说明
-- **[AI 配置指南 (AGENT.md)](./AGENT.md)** - AI 中转服务搭建和配置
-
-## License
-
-MIT
-
-## 相关链接
+## 🔗 相关链接
 
-- [npm 包地址](https://www.npmjs.com/package/sheetnext)
+- 🏠 [官网](https://www.sheetnext.com)
+- 📦 [npm 包地址](https://www.npmjs.com/package/sheetnext)