sloth-d2c-mcp 1.0.4-beta69 → 1.0.4-beta71

package/dist/build/index.js

@@ -3,7 +3,7 @@ import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
 import { convertFigmaToD2CNode, generateAbsoluteHtml, getBoundingBox, getCode, chunkOptimizeCodePrompt, aggregationOptimizeCodePrompt, finalOptimizeCodePrompt, } from 'sloth-d2c-node/convert';
 import axios from 'axios';
 import { z } from 'zod';
-import { ConfigManager, defaultConfigData } from './config-manager/index.js';
+import { ConfigManager, defaultConfigData, } from './config-manager/index.js';
 import { cleanup as cleanupTauri } from './interceptor/client.js';
 import { cleanup as cleanupVSCode, getUserInputFromVSCode, isVSCodeAvailable } from './interceptor/vscode.js';
 import { cleanup as cleanupWeb, getUserInput } from './interceptor/web.js';
@@ -11,7 +11,9 @@ import { loadConfig, startHttpServer, stopHttpServer } from './server.js';
 import { FileManager } from './utils/file-manager.js';
 import { updateImageMapIfNeeded } from './utils/update.js';
 import { Logger } from './utils/logger.js';
-import { getAvailablePort, resetNodeListPosition, saveImageFile, replaceImageSrc } from './utils/utils.js';
+import { getAvailablePort, saveImageFile, replaceImageSrc } from './utils/utils.js';
+import { processSampling, buildNestingStructure } from './core/sampling.js';
+import { buildComponentMappingPrompt, buildPlaceholderPrompt } from './core/prompt-builder.js';
 // @ts-ignore
 import * as flatted from 'flatted';
 import { promises as fs } from 'fs';
@@ -42,7 +44,7 @@ const mcpServer = new D2CMcpServer({
     },
 });
 const configManager = new ConfigManager('d2c-mcp');
-const fileManager = new FileManager('d2c-mcp');
+export const fileManager = new FileManager('d2c-mcp');
 // 注册 Figma 转码拦截工具
 mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
     fileKey: z.string().describe('The key of the Figma file to fetch, often found in a provided URL like figma.com/(file|design)/<fileKey>/...'),
@@ -58,6 +60,17 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
         // 检测 VSCode 扩展是否可用
         const isVSCodePluginAvailable = await isVSCodeAvailable();
         Logger.log(`VSCode 扩展检测结果: ${isVSCodePluginAvailable ? '可用' : '不可用'}`);
+        let root = './';
+        try {
+            const rootRes = await mcpServer.server.listRoots();
+            Logger.log('获取根目录:', rootRes);
+            root = rootRes.roots[0]?.uri?.slice(7) || './';
+            // 设置 fileManager 的工作目录根路径
+            fileManager.setWorkspaceRoot(root);
+        }
+        catch (error) {
+            Logger.log('获取根目录时出错:', error);
+        }
         // 没有配置figmaApiKey，无法预览，直接唤起配置页面
         if (!config.mcp?.figmaApiKey) {
             hasLaunchWebview = true;
@@ -72,6 +85,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                 Logger.log('VSCode 扩展不可用，降级到网页浏览器');
                 configDataString = await getUserInput({ fileKey: fileKey, nodeId: nodeId });
             }
+            console.log('getting configDataString', configDataString);
             if (!configDataString || configDataString.trim() === '') {
                 throw new Error('未提供有效的转码配置');
             }
@@ -88,6 +102,11 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                 };
                 mcpServer.setConfig(config.mcp);
                 configManager.save(config);
+                if (rest) {
+                    const { promptSetting, ...restConfig } = rest;
+                    await fileManager.saveConfigSetting(fileKey, nodeId, restConfig);
+                    Logger.log(`已保存 configSetting 到 fileKey: ${fileKey}, nodeId: ${nodeId}`);
+                }
                 // 将 groupsData 保存到 fileManager 按 nodeId 存储
                 if (groupsData && groupsData.length > 0) {
                     await fileManager.saveGroupsData(fileKey, nodeId, groupsData);
@@ -153,6 +172,11 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                 };
                 mcpServer.setConfig(config.mcp);
                 configManager.save(config);
+                if (rest) {
+                    const { promptSetting, ...restConfig } = rest;
+                    await fileManager.saveConfigSetting(fileKey, nodeId, restConfig);
+                    Logger.log(`已保存 configSetting 到 fileKey: ${fileKey}, nodeId: ${nodeId}`);
+                }
                 // 将 groupsData 保存到 fileManager 按 nodeId 存储
                 if (groupsData && groupsData.length > 0) {
                     await fileManager.saveGroupsData(fileKey, nodeId, groupsData);
@@ -182,88 +206,70 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
         const chunkPrompt = savedPromptSetting?.chunkOptimizePrompt || chunkOptimizeCodePrompt;
         const aggregationPrompt = savedPromptSetting?.aggregationOptimizePrompt || aggregationOptimizeCodePrompt;
         const finalPrompt = savedPromptSetting?.finalOptimizePrompt || finalOptimizeCodePrompt;
-        let root = './';
-        try {
-            const rootRes = await mcpServer.server.listRoots();
-            Logger.log('获取根目录:', rootRes);
-            root = rootRes.roots[0]?.uri?.slice(7) || './';
-        }
-        catch (error) {
-            Logger.log('获取根目录时出错:', error);
-        }
         const codeSnippets = [];
         let isSupportSampling = true;
-        // 并发采样：针对每个分组生成 AI 相对布局树并转码
+        // 收集已映射的组件信息，用于在最终写入时添加提示词
+        const componentMappings = [];
+        // 收集所有组的组件上下文信息，用于在最终提示词中显示
+        const componentContexts = [];
+        // 构建采样配置
+        const samplingConfig = {
+            d2cNodeList,
+            imageMap,
+            convertConfig,
+            chunkPrompt,
+            mcpServer,
+            componentMappings,
+            codeSnippets,
+            componentContexts,
+        };
+        // 深度遍历采样：针对每个分组生成 AI 相对布局树并转码
         if (groupsData && groupsData?.length > 0) {
-            // 限制并发为 2，分批执行，多个采样并发可能存在超时问题
-            const concurrency = 1;
-            for (let i = 0; i < groupsData.length; i += concurrency) {
-                const batch = groupsData.slice(i, i + concurrency);
-                const samplingPromises = batch.map(async (group) => {
-                    const groupElements = group.elements;
-                    let nodeList = d2cNodeList.filter((node) => groupElements.includes(node.id));
-                    group.nodeList = nodeList;
-                    // 重置节点位置
-                    nodeList = resetNodeListPosition(nodeList);
-                    // 获取代码
-                    const code = await getCode({
-                        d2cNodeList: nodeList,
-                        config: convertConfig,
-                    });
-                    console.log('code', code);
-                    // 使用 imageMap 的 path 替换 code 中对应的 src
-                    let replacedCode = replaceImageSrc(code, imageMap);
-                    const componentName = `Group${group.groupIndex + 1}`;
-                    const codeWithCustomName = replacedCode.replace(/\bApp\b/g, componentName);
-                    try {
-                        const { content: { text }, } = await mcpServer.server.createMessage({
-                            messages: [
-                                {
-                                    role: 'user',
-                                    content: {
-                                        type: 'text',
-                                        text: chunkPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || ''),
-                                    },
-                                },
-                                {
-                                    role: 'user',
-                                    content: {
-                                        type: 'text',
-                                        text: codeWithCustomName + (group.userPrompt ? '\n以下是用户针对该代码的优化提出的补充说明和要求，请在优化代码时特别关注这些指导并尽可能实现：\n' + group.userPrompt : ''),
-                                    },
-                                },
-                            ],
-                            maxTokens: 48000,
-                        }, { timeout: 5 * 60 * 1000 });
-                        Logger.log('采样成功', text);
-                        const { code: chunkCode, componentName } = extractCodeAndComponents(text)[0];
-                        Logger.log('采样解析成功', chunkCode, componentName);
-                        group.name = componentName;
-                        codeSnippets.push(chunkCode);
-                    }
-                    catch (e) {
-                        Logger.log('调用采样出错', e);
-                        codeSnippets.push(codeWithCustomName + (group.userPrompt ? '\n以下是用户针对该代码的优化提出的补充说明和要求，请在优化代码时特别关注这些指导并尽可能实现：\n' + group.userPrompt : ''));
+            isSupportSampling = await processSampling(groupsData, samplingConfig);
+            // 采样完成后，更新组件名并保存到文件
+            try {
+                const groupsDataToSave = groupsData.map(group => {
+                    // 将提取的组件名更新到 componentName（仅标记的分组）
+                    if (group.marked && group.name) {
+                        group.componentName = group.name;
+                        Logger.log(`组 ${group.groupIndex} 已标记，更新组件名: ${group.componentName}`);
                     }
+                    // 去掉 nodeList 后返回
+                    const { nodeList, ...groupWithoutNodeList } = group;
+                    return groupWithoutNodeList;
                 });
-                await Promise.all(samplingPromises);
+                await fileManager.saveGroupsData(fileKey, nodeId, groupsDataToSave);
+                Logger.log(`已保存更新后的 groupsData，包含 ${groupsData.filter(g => g.marked).length} 个标记的组件`);
+            }
+            catch (error) {
+                Logger.error(`保存 groupsData 失败:`, error);
             }
         }
         // 分组外元素：注入分组占位并进行整合采样
+        // 构建嵌套结构，只收集根组（第一层）的元素
+        const nestingInfo = buildNestingStructure(groupsData || []);
         const groupedElementIds = new Set();
-        groupsData?.forEach((group) => {
-            group.elements.forEach((id) => {
-                groupedElementIds.add(id);
-            });
+        // 只收集根组的元素ID
+        nestingInfo.rootGroups.forEach((rootIndex) => {
+            const rootGroup = nestingInfo.groupMap.get(rootIndex);
+            if (rootGroup) {
+                rootGroup.elements.forEach((id) => {
+                    groupedElementIds.add(id);
+                });
+            }
         });
+        Logger.log(`收集到 ${groupedElementIds.size} 个根组元素ID，根组数量: ${nestingInfo.rootGroups.length}`);
         // 分组外元素
         const ungroupedNodeList = d2cNodeList.filter((node) => !groupedElementIds.has(node.id));
         if (ungroupedNodeList.length > 0) {
-            // 注入分组占位
-            groupsData?.forEach((group, index) => {
+            // 只注入根组占位符
+            nestingInfo.rootGroups.forEach((rootIndex) => {
+                const group = nestingInfo.groupMap.get(rootIndex);
+                if (!group)
+                    return;
                 const { x, y, width, height, absoluteRenderX, absoluteRenderY, absoluteRenderWidth, absoluteRenderHeight } = getBoundingBox(group.nodeList);
                 ungroupedNodeList.push({
-                    id: 'G_' + index,
+                    id: 'G_' + rootIndex,
                     name: group.name || `Group${group.groupIndex + 1}`,
                     x,
                     y,
@@ -290,12 +296,19 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                 });
             });
             console.log('ungroupedNodeList', ungroupedNodeList);
+            // 检测占位符元素（分组占位符）
+            const placeholders = ungroupedNodeList
+                .filter((node) => node.type === 'COMPONENT' && node.id?.startsWith('G_'))
+                .map((node) => ({
+                name: node.name || 'Unknown',
+            }));
+            const placeholderPrompt = buildPlaceholderPrompt(placeholders);
+            Logger.log(`整合采样检测到 ${placeholders.length} 个分组占位符`);
             // 获取代码
             const code = await getCode({
                 d2cNodeList: ungroupedNodeList,
                 config: convertConfig,
             });
-            console.log('code', code);
             // 使用 imageMap 的 path 替换 code 中对应的 src
             const replacedCode = replaceImageSrc(code, imageMap);
             // 整合采样
@@ -307,7 +320,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                             role: 'user',
                             content: {
                                 type: 'text',
-                                text: aggregationPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || ''),
+                                text: aggregationPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || '') + placeholderPrompt,
                             },
                         },
                         {
@@ -329,23 +342,27 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             catch (e) {
                 isSupportSampling = false;
                 Logger.log('调用分组外元素采样出错，降级到传统模式', e);
-                codeSnippets.unshift(replacedCode);
+                codeSnippets.unshift(placeholderPrompt + '\n' + replacedCode);
             }
         }
         // 保存图片文件
         saveImageFile({ imageMap, root });
         Logger.log('处理完成，生成的代码片段数量:', codeSnippets.length);
+        Logger.log('已映射的组件数量:', componentMappings.length);
+        Logger.log('组件上下文数量:', componentContexts.length);
+        // 构建组件映射提示词（包含组件映射和组件上下文）
+        const componentMappingPrompt = buildComponentMappingPrompt(componentMappings, componentContexts);
         // 使用提示词（已包含默认值）
         return {
             content: [
                 isSupportSampling
                     ? {
                         type: 'text',
-                        text: finalPrompt,
+                        text: finalPrompt + componentMappingPrompt,
                     }
                     : {
                         type: 'text',
-                        text: aggregationPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || ''),
+                        text: aggregationPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || '') + componentMappingPrompt,
                     },
                 ...codeSnippets.map((code) => {
                     return {
@@ -396,9 +413,11 @@ async function main() {
         console.log('使用方法: sloth <命令> [选项]');
         console.log('');
         console.log('可用命令:');
-        console.log('  config    显示配置文件信息');
-        console.log('  page      显示 interceptor-web 页面地址');
-        console.log('  version   显示版本信息');
+        console.log('  config      显示配置文件信息');
+        console.log('  page        显示 interceptor-web 页面地址');
+        console.log('  framework   添加或管理框架配置');
+        console.log('  clear       清理缓存文件');
+        console.log('  version     显示版本信息');
         console.log('');
         console.log('全局选项:');
         console.log('  --help, -h       显示帮助信息');
@@ -411,6 +430,9 @@ async function main() {
         console.log('  sloth config --path       # 仅显示配置路径');
         console.log('  sloth page                # 显示页面地址');
         console.log('  sloth page --list         # 列出所有页面文件');
+        console.log('  sloth framework react     # 添加 react 框架');
+        console.log('  sloth framework --list    # 列出所有框架');
+        console.log('  sloth clear               # 清理缓存文件');
         console.log('  sloth version             # 显示版本信息');
         console.log('  sloth --version           # 显示版本信息');
         process.exit(0);
@@ -454,7 +476,7 @@ async function main() {
                 config = await configManager.load();
             }
             catch (err) {
-                error = err.toString();
+                error = err instanceof Error ? err.message : String(err);
             }
         }
         if (isJsonOutput) {
@@ -581,7 +603,7 @@ async function main() {
                 catch (error) {
                     const errorInfo = {
                         error: '读取目录失败',
-                        message: error.toString(),
+                        message: error instanceof Error ? error.message : String(error),
                         directory: interceptorWebPath,
                     };
                     if (isJsonOutput) {
@@ -640,7 +662,7 @@ async function main() {
         catch (error) {
             const errorInfo = {
                 error: '获取页面信息失败',
-                message: error.toString(),
+                message: error instanceof Error ? error.message : String(error),
             };
             if (isJsonOutput) {
                 console.log(JSON.stringify(errorInfo, null, 2));
@@ -656,6 +678,114 @@ async function main() {
         fileManager.cleanup();
         process.exit(0);
     }
+    // 检查是否是 framework 命令
+    if (process.env.SLOTH_COMMAND === 'framework') {
+        const configManager = new ConfigManager('d2c-mcp');
+        // 获取子命令参数
+        const frameworkArgsStr = process.env.SLOTH_FRAMEWORK_ARGS || '[]';
+        const frameworkArgs = JSON.parse(frameworkArgsStr);
+        const isJsonOutput = frameworkArgs.includes('--json');
+        // 处理帮助参数
+        if (frameworkArgs.includes('--help') || frameworkArgs.includes('-h')) {
+            console.log('使用方法: sloth framework <框架名称> [选项]');
+            console.log('');
+            console.log('添加或管理框架配置');
+            console.log('');
+            console.log('选项:');
+            console.log('  --help, -h    显示帮助信息');
+            console.log('  --list        列出所有已添加的框架');
+            console.log('  --json        以 JSON 格式输出');
+            console.log('');
+            console.log('示例:');
+            console.log('  sloth framework react       # 添加 react 框架');
+            console.log('  sloth framework vue         # 添加 vue 框架');
+            console.log('  sloth framework --list      # 列出所有框架');
+            process.exit(0);
+        }
+        // 处理列出所有框架
+        if (frameworkArgs.includes('--list')) {
+            try {
+                const frameworks = await configManager.getFrameworks();
+                if (isJsonOutput) {
+                    console.log(JSON.stringify({ frameworks }, null, 2));
+                }
+                else {
+                    if (frameworks.length === 0) {
+                        console.log('暂无已添加的框架');
+                    }
+                    else {
+                        console.log('已添加的框架:');
+                        frameworks.forEach((framework, index) => {
+                            console.log(`  ${index + 1}. ${framework}`);
+                        });
+                    }
+                }
+            }
+            catch (error) {
+                if (isJsonOutput) {
+                    console.log(JSON.stringify({ error: error.toString() }, null, 2));
+                }
+                else {
+                    console.log(`获取框架列表失败: ${error}`);
+                }
+                process.exit(1);
+            }
+            process.exit(0);
+        }
+        // 添加框架
+        if (frameworkArgs.length === 0) {
+            console.log('错误: 请提供框架名称');
+            console.log('使用 "sloth framework --help" 查看帮助信息');
+            process.exit(1);
+        }
+        const frameworkName = frameworkArgs[0];
+        try {
+            // 添加框架到配置
+            await configManager.addFramework(frameworkName);
+            // 检查框架配置文件是否存在
+            const configExists = await configManager.frameworkConfigExists(frameworkName);
+            if (!configExists) {
+                // 创建默认的框架配置文件
+                await configManager.saveFrameworkConfig(frameworkName, {
+                    chunkOptimizePrompt: chunkOptimizeCodePrompt,
+                    aggregationOptimizePrompt: aggregationOptimizeCodePrompt,
+                    finalOptimizePrompt: finalOptimizeCodePrompt,
+                });
+            }
+            const frameworkPath = configManager.getFrameworkConfigPath(frameworkName);
+            if (isJsonOutput) {
+                console.log(JSON.stringify({
+                    success: true,
+                    framework: frameworkName,
+                    configPath: frameworkPath,
+                    created: !configExists
+                }, null, 2));
+            }
+            else {
+                console.log(`✓ 框架 "${frameworkName}" 添加成功`);
+                console.log(`配置文件路径: ${frameworkPath}`);
+                if (!configExists) {
+                    console.log('已创建默认配置文件');
+                }
+                else {
+                    console.log('使用现有配置文件');
+                }
+            }
+        }
+        catch (error) {
+            if (isJsonOutput) {
+                console.log(JSON.stringify({
+                    success: false,
+                    error: error.toString()
+                }, null, 2));
+            }
+            else {
+                console.log(`添加框架失败: ${error}`);
+            }
+            process.exit(1);
+        }
+        process.exit(0);
+    }
     try {
         // 先输出基本启动信息到控制台，确保即使 VSCode 日志失败也能看到启动过程
         console.log(`[${new Date().toISOString()}] Starting Figma transcoding interceptor MCP server...`);
@@ -728,3 +858,112 @@ process.on('SIGTERM', async () => {
     process.exit(0);
 });
 main();
+// 获取命令行参数
+const args = process.argv.slice(2);
+// 处理 --log 参数：开启文件日志（同时保留控制台输出）
+const logArgIndex = args.findIndex((a) => a === '--log' || a.startsWith('--log='));
+if (logArgIndex !== -1) {
+    let logFilePath = 'runtime.log';
+    const raw = args[logArgIndex];
+    // 移除 --log 参数，避免传递给后续程序
+    args.splice(logArgIndex, 1);
+    process.argv = [process.argv[0], process.argv[1], ...args];
+    try {
+        const { createWriteStream, mkdirSync, existsSync } = await import('node:fs');
+        const path = await import('node:path');
+        const util = await import('node:util');
+        if (raw.startsWith('--log=')) {
+            const provided = raw.slice('--log='.length).trim();
+            if (provided) {
+                logFilePath = path.isAbsolute(provided) ? provided : path.resolve(process.cwd(), provided);
+            }
+        }
+        else {
+            logFilePath = path.resolve(process.cwd(), logFilePath);
+        }
+        const logDir = path.dirname(logFilePath);
+        if (!existsSync(logDir)) {
+            mkdirSync(logDir, { recursive: true });
+        }
+        const logStream = createWriteStream(logFilePath, { flags: 'a' });
+        const originalConsole = {
+            log: console.log,
+            info: console.info,
+            warn: console.warn,
+            error: console.error,
+        };
+        const writeLine = (...args) => {
+            try {
+                const line = util.format(...args) + '\n';
+                logStream.write(line);
+            }
+            catch { }
+        };
+        console.log = (...a) => {
+            originalConsole.log(...a);
+            writeLine(...a);
+        };
+        console.info = (...a) => {
+            originalConsole.info(...a);
+            writeLine(...a);
+        };
+        console.warn = (...a) => {
+            originalConsole.warn(...a);
+            writeLine(...a);
+        };
+        console.error = (...a) => {
+            originalConsole.error(...a);
+            writeLine(...a);
+        };
+        process.env.SLOTH_LOG_FILE = logFilePath;
+        originalConsole.log(`[sloth] 日志已开启，写入: ${logFilePath}`);
+        const close = () => {
+            try {
+                logStream.end();
+            }
+            catch { }
+        };
+        process.on('exit', close);
+        process.on('SIGINT', close);
+        process.on('SIGTERM', close);
+        process.on('uncaughtException', close);
+        process.on('unhandledRejection', close);
+    }
+    catch (e) {
+        // 记录但不中断启动
+        console.warn('[sloth] 启用文件日志失败:', e);
+    }
+}
+// 检查是否是 config 命令
+if (args[0] === 'config') {
+    // 设置环境变量标识这是 config 命令
+    process.env.SLOTH_COMMAND = 'config';
+    // 传递子命令参数
+    process.env.SLOTH_CONFIG_ARGS = JSON.stringify(args.slice(1));
+}
+else if (args[0] === 'page') {
+    // 设置环境变量标识这是 page 命令
+    process.env.SLOTH_COMMAND = 'page';
+    // 传递子命令参数
+    process.env.SLOTH_PAGE_ARGS = JSON.stringify(args.slice(1));
+}
+else if (args[0] === 'version' || args[0] === '--version' || args[0] === '-v') {
+    // 设置环境变量标识这是 version 命令
+    process.env.SLOTH_COMMAND = 'version';
+}
+else if (args[0] === '--help' || args[0] === '-h' || args.length === 0) {
+    // 显示主帮助信息
+    process.env.SLOTH_COMMAND = 'help';
+}
+else if (args[0] === 'clear') {
+    // 设置环境变量标识这是 clear 命令
+    process.env.SLOTH_COMMAND = 'clear';
+}
+else {
+    // 设置环境变量为CLI模式
+    process.env.NODE_ENV = 'cli';
+    // 确保--stdio参数被传递
+    if (!process.argv.includes('--stdio')) {
+        process.argv.push('--stdio');
+    }
+}