sloth-d2c-mcp 1.0.4-beta77 → 1.0.4-beta79

package/dist/build/server.js

@@ -434,7 +434,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
     app.get('/getHtml', async (req, res) => {
         // 加载现有配置
         // const fileManager = new FileManager('d2c-mcp')
-        const html = await fileManager.loadFile(req.query.fileKey, req.query.nodeId, 'absolute.html');
+        const html = await fileManager.loadAbsoluteHtml(req.query.fileKey, req.query.nodeId);
         res.json({
             success: true,
             data: html,
@@ -682,7 +682,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
             }
             // 保存绝对布局HTML
             if (absoluteHtml) {
-                await fileManager.saveFile(fileKey, nodeId, 'absolute.html', absoluteHtml);
+                await fileManager.saveAbsoluteHtml(fileKey, nodeId, absoluteHtml);
             }
             Logger.log(`成功保存节点数据: fileKey=${fileKey}, nodeId=${nodeId}`);
             res.json({
@@ -979,7 +979,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                             },
                         },
                     ].filter(Boolean),
-                    maxTokens: 8000,
+                    maxTokens: 48000,
                 }, { timeout: 2 * 60 * 1000 });
                 // 解析 AI 返回的 JSON
                 const extractResult = extractJson(text);
@@ -1299,6 +1299,334 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
             });
         }
     });
+    // 列出设计稿快照接口（用于 update 模式选择旧设计稿）
+    app.get('/listDesignSnapshots', async (req, res) => {
+        try {
+            Logger.log('获取设计稿快照列表');
+            const workspaceRoot = getProjectRoot();
+            Logger.log('workspaceRoot:', workspaceRoot);
+            if (!workspaceRoot) {
+                res.json({
+                    success: true,
+                    snapshots: [],
+                });
+                return;
+            }
+            const slothDir = path.join(workspaceRoot, '.sloth');
+            const snapshots = [];
+            try {
+                const fileKeys = await fs.promises.readdir(slothDir);
+                for (const fileKey of fileKeys) {
+                    // 跳过特殊文件
+                    if (fileKey === '.' || fileKey === 'components.json' || fileKey.startsWith('.'))
+                        continue;
+                    const fileKeyDir = path.join(slothDir, fileKey);
+                    const stat = await fs.promises.stat(fileKeyDir);
+                    if (!stat.isDirectory())
+                        continue;
+                    const nodeIds = await fs.promises.readdir(fileKeyDir);
+                    for (const nodeId of nodeIds) {
+                        const nodeDir = path.join(fileKeyDir, nodeId);
+                        const nodeStat = await fs.promises.stat(nodeDir);
+                        if (!nodeStat.isDirectory())
+                            continue;
+                        // 查找截图并转换为 base64
+                        let screenshotBase64 = '';
+                        const screenshotsDir = path.join(nodeDir, 'screenshots');
+                        try {
+                            const indexScreenshotPath = path.join(screenshotsDir, 'index.png');
+                            await fs.promises.access(indexScreenshotPath);
+                            // 读取截图文件并转换为 base64
+                            const imageBuffer = await fs.promises.readFile(indexScreenshotPath);
+                            screenshotBase64 = `data:image/png;base64,${imageBuffer.toString('base64')}`;
+                        }
+                        catch {
+                            // 没有 index.png，尝试找其他截图
+                            try {
+                                const screenshots = await fs.promises.readdir(screenshotsDir);
+                                if (screenshots.length > 0) {
+                                    const firstScreenshot = screenshots[0];
+                                    const screenshotPath = path.join(screenshotsDir, firstScreenshot);
+                                    const imageBuffer = await fs.promises.readFile(screenshotPath);
+                                    screenshotBase64 = `data:image/png;base64,${imageBuffer.toString('base64')}`;
+                                }
+                            }
+                            catch {
+                                // 没有截图目录
+                            }
+                        }
+                        // 加载 groupsData 获取名称和分组数量
+                        let name = `${fileKey}/${nodeId}`;
+                        snapshots.push({
+                            fileKey,
+                            nodeId,
+                            screenshotBase64,
+                            timestamp: nodeStat.mtime.toISOString(),
+                            name,
+                        });
+                    }
+                }
+                // 按时间倒序排列
+                snapshots.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+                Logger.log(`找到 ${snapshots.length} 个设计稿快照`);
+                res.json({
+                    success: true,
+                    snapshots,
+                });
+            }
+            catch (error) {
+                Logger.error('扫描设计稿快照失败:', error);
+                res.json({
+                    success: true,
+                    snapshots: [],
+                });
+            }
+        }
+        catch (error) {
+            Logger.error('获取设计稿快照列表失败:', error);
+            res.status(500).json({
+                success: false,
+                message: '获取设计稿快照列表失败',
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    });
+    // 分析设计稿变更接口（用于 update 模式）
+    app.use('/analyzeChange', express.json());
+    app.post('/analyzeChange', async (req, res) => {
+        try {
+            const { oldFileKey, oldNodeId, newFileKey, newNodeId } = req.body;
+            if (!oldFileKey || !oldNodeId || !newFileKey || !newNodeId) {
+                res.status(400).json({
+                    success: false,
+                    message: '缺少必要参数: oldFileKey, oldNodeId, newFileKey, newNodeId',
+                });
+                return;
+            }
+            Logger.log(`分析设计稿变更: old=${oldFileKey}/${oldNodeId}, new=${newFileKey}/${newNodeId}`);
+            // 1. 加载新旧 HTML 和 imageMap
+            let oldHtml = await fileManager.loadAbsoluteHtml(oldFileKey, oldNodeId);
+            let newHtml = await fileManager.loadAbsoluteHtml(newFileKey, newNodeId);
+            Logger.log(`[analyzeChange] 加载 HTML 完成: oldHtml=${oldHtml?.length || 0}字符, newHtml=${newHtml?.length || 0}字符`);
+            // 加载 imageMap 用于替换图片路径（flatted 格式）
+            let oldImageMap = {};
+            let newImageMap = {};
+            try {
+                const oldImageMapStr = await fileManager.loadFile(oldFileKey, oldNodeId, 'imageMap.json');
+                if (oldImageMapStr) {
+                    oldImageMap = flatted.parse(oldImageMapStr);
+                    Logger.log(`[analyzeChange] 加载旧 imageMap 成功, 条目数: ${Object.keys(oldImageMap).length}`);
+                }
+                else {
+                    Logger.log(`[analyzeChange] 旧 imageMap 为空`);
+                }
+            }
+            catch (e) {
+                Logger.log(`[analyzeChange] 加载旧 imageMap 失败: ${e}`);
+            }
+            try {
+                const newImageMapStr = await fileManager.loadFile(newFileKey, newNodeId, 'imageMap.json');
+                if (newImageMapStr) {
+                    newImageMap = flatted.parse(newImageMapStr);
+                    Logger.log(`[analyzeChange] 加载新 imageMap 成功, 条目数: ${Object.keys(newImageMap).length}`);
+                }
+                else {
+                    Logger.log(`[analyzeChange] 新 imageMap 为空`);
+                }
+            }
+            catch (e) {
+                Logger.log(`[analyzeChange] 加载新 imageMap 失败: ${e}`);
+            }
+            // 构建 base64 到 path 的映射表
+            const buildBase64ToPathMap = (imageMap, label) => {
+                const map = new Map();
+                for (const [key, value] of Object.entries(imageMap)) {
+                    if (value?.base64 && value?.path) {
+                        map.set(value.base64, value.path);
+                        Logger.log(`[analyzeChange] ${label} 映射: key=${key}, path=${value.path}, base64长度=${value.base64?.length || 0}`);
+                    }
+                }
+                Logger.log(`[analyzeChange] ${label} 构建映射表完成, 有效映射数: ${map.size}`);
+                return map;
+            };
+            // 处理 HTML 用于 diff 比较
+            const processHtmlForDiff = (html, imageMap, label) => {
+                // 构建 base64 到 path 的映射
+                const base64ToPath = buildBase64ToPathMap(imageMap, label);
+                // 替换图片 base64 为 path
+                let processedHtml = html;
+                let replaceCount = 0;
+                for (const [base64, imgPath] of base64ToPath) {
+                    // 转义特殊字符用于正则匹配
+                    const escapedBase64 = base64.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                    const beforeLength = processedHtml.length;
+                    processedHtml = processedHtml.replace(new RegExp(escapedBase64, 'g'), imgPath);
+                    if (processedHtml.length !== beforeLength) {
+                        replaceCount++;
+                        Logger.log(`[analyzeChange] ${label} 替换成功: ${imgPath}, 长度变化: ${beforeLength} -> ${processedHtml.length}`);
+                    }
+                }
+                Logger.log(`[analyzeChange] ${label} 图片替换完成, 替换数: ${replaceCount}, HTML长度: ${html.length} -> ${processedHtml.length}`);
+                return processedHtml
+                    // 去除 data-id、data-name、data-type 属性（不参与 diff）
+                    .replace(/\s*data-id="[^"]*"/g, '')
+                    .replace(/\s*data-name="[^"]*"/g, '')
+                    .replace(/\s*data-type="[^"]*"/g, '')
+                    // 去除 z-index 相关的 Tailwind 类名
+                    .replace(/\bz-\[\d+\]/g, '')
+                    // 清理 class 中可能产生的多余空格
+                    .replace(/class="([^"]*)"/g, (_, classes) => {
+                    const cleaned = classes.replace(/\s+/g, ' ').trim();
+                    return `class="${cleaned}"`;
+                });
+            };
+            oldHtml = processHtmlForDiff(oldHtml, oldImageMap, 'old');
+            newHtml = processHtmlForDiff(newHtml, newImageMap, 'new');
+            Logger.log(`[analyzeChange] HTML 处理完成: oldHtml=${oldHtml?.length || 0}字符, newHtml=${newHtml?.length || 0}字符`);
+            if (!oldHtml) {
+                res.status(404).json({
+                    success: false,
+                    message: '旧设计稿 HTML 不存在',
+                });
+                return;
+            }
+            if (!newHtml) {
+                res.status(404).json({
+                    success: false,
+                    message: '新设计稿 HTML 不存在',
+                });
+                return;
+            }
+            // 2. 加载新旧 groupsData
+            const oldGroupsData = (await fileManager.loadGroupsData(oldFileKey, oldNodeId)) || [];
+            const newGroupsData = (await fileManager.loadGroupsData(newFileKey, newNodeId)) || [];
+            // 3. 执行 HTML 差异分析
+            // @ts-ignore
+            const { diffLines } = await import('diff');
+            const diffResult = diffLines(oldHtml, newHtml);
+            // 统计变更并生成 diff 文本
+            let addedLines = 0;
+            let removedLines = 0;
+            let unchangedLines = 0;
+            const diffParts = [];
+            for (const part of diffResult) {
+                const lines = part.value.split('\n').filter((l) => l.trim()).length;
+                if (part.added) {
+                    addedLines += lines;
+                    // 标记新增内容
+                    diffParts.push(`+++ ${part.value.trim()}`);
+                }
+                else if (part.removed) {
+                    removedLines += lines;
+                    // 标记删除内容
+                    diffParts.push(`--- ${part.value.trim()}`);
+                }
+                else {
+                    unchangedLines += lines;
+                    // 不输出未变更的内容，减少 token
+                }
+            }
+            // 生成精简的 diff 文本（只包含变更部分）
+            const diffText = diffParts.join('\n');
+            // 4. 生成变更摘要
+            const changeSummary = {
+                totalChanges: addedLines + removedLines,
+                addedLines,
+                removedLines,
+                unchangedLines,
+                changeRatio: ((addedLines + removedLines) / (addedLines + removedLines + unchangedLines) * 100).toFixed(1),
+            };
+            // 5. 尝试使用 AI 总结变更（如果 MCP 服务器可用）
+            let aiSummary = [];
+            if (mcpServer && changeSummary.totalChanges > 0) {
+                try {
+                    // 限制 diff 文本长度，避免 token 过大
+                    const maxDiffLength = 48000;
+                    const truncatedDiff = diffText.length > maxDiffLength
+                        ? diffText.substring(0, maxDiffLength) + '\n... (diff 内容已截断)'
+                        : diffText;
+                    const prompt = `
+你是一个专业的前端开发专家。请分析以下设计稿 HTML 的 diff 变更，总结出具体的变更点。
+
+## Diff 变更内容
+\`\`\`diff
+${truncatedDiff}
+\`\`\`
+
+说明：
+- \`---\` 开头的行表示被删除的内容
+- \`+++\` 开头的行表示新增的内容
+- HTML 使用 Tailwind CSS 类名
+
+请按以下 JSON 格式输出变更点列表：
+\`\`\`json
+[
+  {
+    "id": "change_1",
+    "type": "layout|style|content|structure",
+    "title": "变更标题（简短）",
+    "description": "详细描述变更内容",
+    "suggestedAction": "建议的代码修改方向"
+  }
+]
+\`\`\`
+
+请确保：
+1. 每个变更点都是独立的、可操作的
+2. 描述要具体，包含位置、样式、尺寸等信息
+3. 建议的操作要明确
+`;
+                    Logger.log('=== AI 分析变更提示词 ===');
+                    Logger.log(prompt);
+                    Logger.log('=== 提示词结束 ===');
+                    const { content: { text } } = await mcpServer.server.createMessage({
+                        messages: [{
+                                role: 'user',
+                                content: { type: 'text', text: prompt }
+                            }],
+                        maxTokens: 48000
+                    }, { timeout: 2 * 60 * 1000 });
+                    // 解析 AI 返回的 JSON
+                    const jsonMatch = text.match(/```json\s*([\s\S]*?)\s*```/);
+                    if (jsonMatch) {
+                        aiSummary = JSON.parse(jsonMatch[1]);
+                    }
+                }
+                catch (aiError) {
+                    Logger.warn('AI 分析变更失败，使用基础分析:', aiError);
+                }
+            }
+            // 6. 如果 AI 分析失败，生成基础摘要
+            if (aiSummary.length === 0 && changeSummary.totalChanges > 0) {
+                aiSummary = [{
+                        id: 'change_1',
+                        type: 'structure',
+                        title: '设计稿结构变更',
+                        description: `检测到 ${addedLines} 行新增内容和 ${removedLines} 行删除内容，变更比例约 ${changeSummary.changeRatio}%`,
+                        suggestedAction: '请检查新设计稿的布局和样式变化，更新相应的代码'
+                    }];
+            }
+            Logger.log(`变更分析完成: ${aiSummary.length} 个变更点`);
+            res.json({
+                success: true,
+                data: {
+                    changeSummary,
+                    aiSummary,
+                    oldGroupsData,
+                    newGroupsData,
+                    diffText, // 返回 HTML diff 文本，用于 AI 代码修改
+                },
+            });
+        }
+        catch (error) {
+            Logger.error('分析设计稿变更失败:', error);
+            res.status(500).json({
+                success: false,
+                message: '分析设计稿变更失败',
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    });
     // 启动 HTTP 服务器，监听端口
     httpServer = app.listen(port, async (err) => {
         if (err) {
@@ -1359,7 +1687,7 @@ export async function getUserInput(payload) {
     return new Promise(async (resolve, reject) => {
         const token = uuidv4();
         const port = getPort();
-        const authUrl = `http://localhost:${port}/auth-page?token=${token}&fileKey=${payload.fileKey}&nodeId=${payload.nodeId}`;
+        const authUrl = `http://localhost:${port}/auth-page?token=${token}&fileKey=${payload.fileKey}&nodeId=${payload.nodeId}&mode=${payload.mode}`;
         Logger.log('authUrl', authUrl);
         // 判断是主进程还是子进程
         const isMainProcess = httpServer !== null;

package/dist/build/utils/file-manager.js

@@ -34,9 +34,9 @@ export class FileManager {
      */
     getFilePath(fileKey, nodeId, filename) {
         // 清理文件名中的特殊字符
-        const cleanFileKey = fileKey.replace(/[^a-zA-Z0-9-_]/g, '_');
-        const cleanNodeId = nodeId ? nodeId.replace(/[^a-zA-Z0-9-_:]/g, '_') : 'root';
-        const cleanFilename = filename.replace(/[^a-zA-Z0-9-_.]/g, '_');
+        const cleanFileKey = fileKey.replace(/[^a-zA-Z0-9\u4e00-\u9fff\u3400-\u4dbf-_]/g, '_');
+        const cleanNodeId = nodeId ? nodeId.replace(/[^a-zA-Z0-9\u4e00-\u9fff\u3400-\u4dbf-_:]/g, '_') : 'root';
+        const cleanFilename = filename.replace(/[^a-zA-Z0-9\u4e00-\u9fff\u3400-\u4dbf-_.]/g, '_');
         return path.join(this.baseDir, cleanFileKey, cleanNodeId, cleanFilename);
     }
     /**
@@ -53,9 +53,9 @@ export class FileManager {
             return this.getFilePath(fileKey, nodeId, filename);
         }
         // 清理文件名中的特殊字符
-        const cleanFileKey = fileKey.replace(/[^a-zA-Z0-9-_]/g, '_');
-        const cleanNodeId = nodeId ? nodeId.replace(/[^a-zA-Z0-9-_:]/g, '_') : 'root';
-        const cleanFilename = filename.replace(/[^a-zA-Z0-9-_.]/g, '_');
+        const cleanFileKey = fileKey.replace(/[^a-zA-Z0-9\u4e00-\u9fff\u3400-\u4dbf-_]/g, '_');
+        const cleanNodeId = nodeId ? nodeId.replace(/[^a-zA-Z0-9\u4e00-\u9fff\u3400-\u4dbf-_:]/g, '_') : 'root';
+        const cleanFilename = filename.replace(/[^a-zA-Z0-9\u4e00-\u9fff\u3400-\u4dbf-_.]/g, '_');
         if (skipParsePath) {
             return path.join(this.workspaceRoot, '.sloth', fileKey, nodeId || 'root', cleanFilename);
         }
@@ -667,5 +667,127 @@ export class FileManager {
         };
         return searchDir(slothDir);
     }
+    /**
+     * 保存 absolute.html 到 .sloth 目录，支持版本管理
+     * 如果内容不一致，将当前版本移动到带时间戳的文件夹中
+     * @param fileKey - Figma文件的key
+     * @param nodeId - 节点ID（可选）
+     * @param content - 文件内容
+     */
+    async saveAbsoluteHtml(fileKey, nodeId, content) {
+        const filename = 'absolute.html';
+        // 先尝试加载现有文件
+        const existingContent = await this.loadFile(fileKey, nodeId, filename, { useWorkspaceDir: false });
+        // 如果存在且内容不一致，先归档旧版本
+        if (existingContent && existingContent.trim() !== content.trim()) {
+            await this.archiveAbsoluteHtml(fileKey, nodeId, existingContent);
+            Logger.log(`检测到 absolute.html 内容变化，已归档旧版本`);
+        }
+        // 保存新内容
+        await this.saveFile(fileKey, nodeId, filename, content, { useWorkspaceDir: false });
+    }
+    /**
+     * 归档 absolute.html 到带时间戳的文件夹
+     * @param fileKey - Figma文件的key
+     * @param nodeId - 节点ID（可选）
+     * @param content - 要归档的内容
+     */
+    async archiveAbsoluteHtml(fileKey, nodeId, content) {
+        if (!this.workspaceRoot) {
+            Logger.warn('工作目录根路径未设置，无法归档');
+            return;
+        }
+        // 生成时间戳文件夹名：YYYYMMDD_HHmmss
+        const now = new Date();
+        const timestamp = now.getFullYear().toString() +
+            (now.getMonth() + 1).toString().padStart(2, '0') +
+            now.getDate().toString().padStart(2, '0') + '_' +
+            now.getHours().toString().padStart(2, '0') +
+            now.getMinutes().toString().padStart(2, '0') +
+            now.getSeconds().toString().padStart(2, '0');
+        const cleanFileKey = fileKey.replace(/[^a-zA-Z0-9-_]/g, '_');
+        const cleanNodeId = nodeId ? nodeId.replace(/[^a-zA-Z0-9-_:]/g, '_') : 'root';
+        // 归档路径：.sloth/{fileKey}/{nodeId}/history/{timestamp}/absolute.html
+        const archiveDir = path.join(this.workspaceRoot, '.sloth', cleanFileKey, cleanNodeId, 'history', timestamp);
+        try {
+            await fs.mkdir(archiveDir, { recursive: true });
+            const archivePath = path.join(archiveDir, 'absolute.html');
+            await fs.writeFile(archivePath, content, 'utf-8');
+            // 同时复制 index.png 截图（如果存在）
+            const screenshotsDir = this.getScreenshotsDir(fileKey, nodeId);
+            const indexScreenshotPath = path.join(screenshotsDir, 'index.png');
+            try {
+                await fs.access(indexScreenshotPath);
+                const archiveScreenshotPath = path.join(archiveDir, 'index.png');
+                await fs.copyFile(indexScreenshotPath, archiveScreenshotPath);
+                Logger.log(`截图已归档: ${archiveScreenshotPath}`);
+            }
+            catch {
+                // 截图不存在，跳过
+            }
+            Logger.log(`absolute.html 已归档到: ${archivePath}`);
+        }
+        catch (error) {
+            Logger.error(`归档 absolute.html 失败: ${error}`);
+        }
+    }
+    /**
+     * 加载 absolute.html
+     * @param fileKey - Figma文件的key
+     * @param nodeId - 节点ID（可选）
+     * @returns Promise<string> - 文件内容
+     */
+    async loadAbsoluteHtml(fileKey, nodeId) {
+        return this.loadFile(fileKey, nodeId, 'absolute.html', { useWorkspaceDir: false });
+    }
+    /**
+     * 列出 absolute.html 的所有历史版本
+     * @param fileKey - Figma文件的key
+     * @param nodeId - 节点ID（可选）
+     * @returns Promise<Array<{ timestamp: string; path: string }>> - 历史版本列表
+     */
+    async listAbsoluteHtmlHistory(fileKey, nodeId) {
+        if (!this.workspaceRoot) {
+            return [];
+        }
+        const cleanFileKey = fileKey.replace(/[^a-zA-Z0-9-_]/g, '_');
+        const cleanNodeId = nodeId ? nodeId.replace(/[^a-zA-Z0-9-_:]/g, '_') : 'root';
+        const historyDir = path.join(this.workspaceRoot, '.sloth', cleanFileKey, cleanNodeId, 'history');
+        try {
+            const entries = await fs.readdir(historyDir, { withFileTypes: true });
+            const versions = [];
+            for (const entry of entries) {
+                if (entry.isDirectory()) {
+                    const htmlPath = path.join(historyDir, entry.name, 'absolute.html');
+                    const screenshotPath = path.join(historyDir, entry.name, 'index.png');
+                    try {
+                        await fs.access(htmlPath);
+                        let screenshot;
+                        try {
+                            await fs.access(screenshotPath);
+                            screenshot = screenshotPath;
+                        }
+                        catch {
+                            // 截图不存在
+                        }
+                        versions.push({
+                            timestamp: entry.name,
+                            path: htmlPath,
+                            screenshotPath: screenshot,
+                        });
+                    }
+                    catch {
+                        // html 文件不存在，跳过
+                    }
+                }
+            }
+            // 按时间戳倒序排列（最新的在前）
+            versions.sort((a, b) => b.timestamp.localeCompare(a.timestamp));
+            return versions;
+        }
+        catch {
+            return [];
+        }
+    }
 }
 export default FileManager;

package/dist/interceptor-web/dist/build-report.json

@@ -1,18 +1,18 @@
 {
-  "buildTime": "2025-12-10T09:06:44.786Z",
+  "buildTime": "2025-12-21T09:28:39.194Z",
   "mode": "build",
   "pages": {
     "main": {
       "file": "index.html",
-      "size": 1604168,
-      "sizeFormatted": "1.53 MB"
+      "size": 1628632,
+      "sizeFormatted": "1.55 MB"
     },
     "detail": {
       "file": "detail.html",
-      "size": 280964,
-      "sizeFormatted": "274.38 KB"
+      "size": 281671,
+      "sizeFormatted": "275.07 KB"
     }
   },
-  "totalSize": 1885132,
-  "totalSizeFormatted": "1.8 MB"
+  "totalSize": 1910303,
+  "totalSizeFormatted": "1.82 MB"
 }