sloth-d2c-mcp 1.0.4-beta74 → 1.0.4-beta76

package/dist/build/core/prompt-builder.js

@@ -49,12 +49,14 @@ export function buildUserPromptText(userPrompt) {
     return '\n## 用户提示词\n以下是用户针对该代码的优化提出的补充说明和要求，请在优化代码时特别关注这些指导并尽可能实现：\n' + userPrompt;
 }
 /**
- * 构建组件映射提示词（包含组件映射和组件上下文）
+ * 构建组件映射提示词（包含组件映射和组件上下文和组件标记）
  * @param componentMappings 组件映射数组
  * @param componentContexts 所有组的组件上下文数组
+ * @param markedComponents 标记的组件数组
  * @returns 组件映射提示词
  */
-export function buildComponentMappingPrompt(componentMappings, componentContexts = []) {
+export function buildComponentMappingPrompt(componentMappings, componentContexts = [], markedComponents = []) {
+    let prompt = '';
     // 收集所有组件：组件映射 + 组件上下文（按名称去重）
     const allComponents = new Map();
     // 添加组件映射的组件
@@ -69,26 +71,46 @@ export function buildComponentMappingPrompt(componentMappings, componentContexts
             }
         });
     });
-    if (allComponents.size === 0) {
-        return '';
+    // 构建可用组件提示词
+    if (allComponents.size > 0) {
+        prompt += '\n\n## 可用组件\n\n以下是项目中可用的组件，请在最终代码中使用这些组件：\n\n';
+        allComponents.forEach((component) => {
+            const propsInfo = component.props && component.props.length > 0
+                ? component.props.map((p) => `${p.name}${p.required ? ' (必需)' : ' (可选)'}: ${p.type || 'any'}`).join(', ')
+                : '无';
+            const libInfo = component.lib ? ` (来自 ${component.lib})` : ' (项目组件)';
+            const descInfo = component.description ? `\n- **描述**: ${component.description}` : '';
+            prompt += `### ${component.name}${libInfo}\n`;
+            prompt += `- **文件路径**: ${component.path}\n`;
+            prompt += `- **导入方式**: ${component.import}\n`;
+            prompt += `- **Props**: ${propsInfo}${descInfo}\n\n`;
+        });
+        prompt +=
+            '**重要**：在最终写入代码时，请根据设计稿需求合理传递 props 参数。请按照项目路径规范合理引入组件。\n';
+    }
+    // 构建标记组件提示词
+    if (markedComponents.length > 0) {
+        prompt += '\n\n## 组件标记任务\n\n';
+        prompt += '以下组件已被用户标记为可复用组件，**请在写入代码后调用 `mark_components` 工具保存这些组件信息**：\n\n';
+        prompt += '| 组件名 | signature |\n';
+        prompt += '|--------|-----------|';
+        markedComponents.forEach((comp) => {
+            prompt += `\n| ${comp.name} | ${comp.signature} |`;
+        });
+        prompt += '\n\n调用示例：\n';
+        prompt += '```json\n';
+        prompt += JSON.stringify({
+            components: markedComponents.map((comp) => ({
+                name: comp.name,
+                path: '按实际写入路径填写',
+                signature: comp.signature,
+                import: '按实际写入路径填写导入语句',
+                description: '组件的功能描述',
+            })),
+        }, null, 2);
+        prompt += '\n```\n\n';
+        prompt += '**重要**：组件标记后可在后续转码中自动匹配复用\n';
     }
-    let prompt = '\n\n## 可用组件\n\n以下是项目中可用的组件，请在最终代码中使用这些组件：\n\n';
-    allComponents.forEach((component) => {
-        const propsInfo = component.props && component.props.length > 0
-            ? component.props.map((p) => `${p.name}${p.required ? ' (必需)' : ' (可选)'}: ${p.type || 'any'}`).join(', ')
-            : '无';
-        const libInfo = component.lib ? ` (来自 ${component.lib})` : ' (项目组件)';
-        const descInfo = component.description ? `\n- **描述**: ${component.description}` : '';
-        // 构建导入方式文案
-        const importType = component.importType || 'default'; // 默认为 default 导入
-        const importTypeText = importType === 'named' ? '具名导入' : '默认导入';
-        prompt += `### ${component.name}${libInfo}\n`;
-        prompt += `- **文件路径**: ${component.path}\n`;
-        prompt += `- **导入方式**: ${importTypeText}\n`;
-        prompt += `- **Props**: ${propsInfo}${descInfo}\n\n`;
-    });
-    prompt +=
-        '**重要**：在最终写入代码时，请严格按照上述"导入方式"来编写 import 语句。"具名导入"表示 import { 组件名 } from \'路径\'，"默认导入"表示 import 组件名 from \'路径\'。请根据设计稿需求合理传递 props 参数。请按照项目路径规范合理使用相对路径和路径别名引入组件。\n';
     return prompt;
 }
 /**
@@ -103,8 +125,8 @@ export function buildPlaceholderPrompt(placeholders) {
     let prompt = '\n\n## 子组件占位符\n\n**重要**：以下占位符代表已实现的子组件，请转换格式但不要重新实现其内部逻辑。\n\n';
     placeholders.forEach((placeholder) => {
         const kebabName = placeholder.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-        prompt += `- \`<${kebabName}>\` → \`<${placeholder.name} />\`\n`;
+        prompt += `- \`<${kebabName}>\`\n`;
     });
-    prompt += '\n将 HTML 标签转换为 React 组件引用，不需要添加对应的 import 语句，保持其在布局中的位置。\n';
+    prompt += '\n将 HTML 标签转换为真实组件调用，但不需要添加对应的 import 语句，保持其在布局中的位置。\n';
     return prompt;
 }

package/dist/build/core/sampling.js

@@ -135,7 +135,7 @@ export function injectChildPlaceholders(nodeList, childResults, nestingInfo, par
  * @returns 采样结果
  */
 export async function sampleSingleGroup(group, nodeList, config) {
-    const { d2cNodeList, imageMap, convertConfig, chunkPrompt, mcpServer, componentMappings, codeSnippets, componentContexts } = config;
+    const { d2cNodeList, imageMap, convertConfig, frameworkPrompt, chunkPrompt, mcpServer, componentMappings, codeSnippets, componentContexts } = config;
     Logger.log(`开始采样组 ${group.groupIndex}, 元素数量: ${group.elements.length}, nodeList 长度: ${nodeList.length}`);
     // 检查组件映射
     const mappingResult = handleComponentMapping(group, componentMappings);
@@ -184,7 +184,8 @@ export async function sampleSingleGroup(group, nodeList, config) {
                     role: 'user',
                     content: {
                         type: 'text',
-                        text: chunkPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || '') +
+                        text: frameworkPrompt +
+                            chunkPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || '') +
                             userPromptText +
                             componentContextPrompt +
                             placeholderPrompt,
@@ -203,18 +204,7 @@ export async function sampleSingleGroup(group, nodeList, config) {
         const { code: chunkCode, componentName: sampledName } = extractCodeAndComponents(text)[0];
         Logger.log(`组 ${group.groupIndex} 采样成功，组件名称: ${sampledName}, 代码长度: ${chunkCode.length}`);
         group.name = sampledName;
-        // 如果分组被标记且有截图，注入 signature 注释
-        let finalCode = chunkCode;
-        if (group.marked && group.screenshot?.hash) {
-            const document = `/**
- * ${sampledName} 组件
- * signature: ${group.screenshot.hash}
- */
-`;
-            finalCode = document + chunkCode;
-            Logger.log(`组 ${group.groupIndex} 已标记，注入 signature: ${group.screenshot.hash}, 组件名: ${sampledName}`);
-        }
-        codeSnippets.push(finalCode);
+        codeSnippets.push(chunkCode);
         return {
             code: chunkCode,
             componentName: sampledName,
@@ -224,15 +214,7 @@ export async function sampleSingleGroup(group, nodeList, config) {
     }
     catch (e) {
         Logger.log(`组 ${group.groupIndex} 调用采样出错:`, e);
-        let fallbackCode = userPromptText + componentContextPrompt + placeholderPrompt + `\n // Group${group.groupIndex + 1} \n` + codeWithCustomName;
-        // 如果分组被标记且有截图，注入 signature 注释
-        if (group.marked && group.screenshot?.hash) {
-            const document = `/**
- * signature: ${group.screenshot.hash}
- */
-`;
-            fallbackCode = document + fallbackCode;
-        }
+        const fallbackCode = userPromptText + componentContextPrompt + placeholderPrompt + `\n // Group${group.groupIndex + 1} \n` + codeWithCustomName;
         codeSnippets.push(fallbackCode);
         Logger.log(`组 ${group.groupIndex} 使用降级代码，长度: ${fallbackCode.length}`);
         return {

package/dist/build/index.js

@@ -7,7 +7,7 @@ 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';
-import { loadConfig, startHttpServer, stopHttpServer } from './server.js';
+import { loadConfig, startHttpServer, stopHttpServer, generateComponentId, stopSocketServer } from './server.js';
 import { FileManager } from './utils/file-manager.js';
 import { updateImageMapIfNeeded } from './utils/update.js';
 import { Logger } from './utils/logger.js';
@@ -20,6 +20,32 @@ import { promises as fs } from 'fs';
 import * as path from 'path';
 import { fileURLToPath } from 'url';
 import { extractCodeAndComponents } from './utils/extract.js';
+import { trackToolCall } from './utils/tj.js';
+/**
+ * 启动http & socket监听
+ * @param init 是否是初始化，初始化时需要连接stdio transport
+ */
+export async function startListening(init = false) {
+    const isStdioMode = process.env.NODE_ENV === 'cli' || process.argv.includes('--stdio');
+    const configManager = new ConfigManager('d2c-mcp');
+    const port = await getAvailablePort();
+    if (isStdioMode) {
+        Logger.log(`Stdio模式启动`);
+        await loadConfig(mcpServer, configManager);
+        if (init) {
+            const transport = new StdioServerTransport();
+            await mcpServer.connect(transport);
+        }
+        // 启动 HTTP 服务器 - 仅启用web服务
+        await startHttpServer(port, mcpServer, configManager, false);
+    }
+    else {
+        // 启动 HTTP 服务器 - 这是核心功能，不依赖 VSCode 日志
+        await startHttpServer(port, mcpServer, configManager, true);
+    }
+    // 服务器启动成功后再尝试使用 Logger（包含 VSCode 日志）
+    Logger.log(`Server started successfully on port ${port}!`);
+}
 export class D2CMcpServer extends McpServer {
     figmaApiKey = '';
     baseURL = '';
@@ -53,6 +79,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
     local: z.boolean().optional().describe('Whether to use local data cache, default is false'),
 }, async (args) => {
     try {
+        trackToolCall('d2c_figma');
         Logger.log(`收到工具调用参数:`, JSON.stringify(args, null, 2));
         const { fileKey, nodeId, depth, local } = args;
         let config = await configManager.load();
@@ -71,6 +98,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
         catch (error) {
             Logger.log('获取根目录时出错:', error);
         }
+        await startListening();
         // 没有配置figmaApiKey，无法预览，直接唤起配置页面
         if (!config.mcp?.figmaApiKey) {
             hasLaunchWebview = true;
@@ -154,6 +182,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             else {
                 configDataString = await getUserInput({ fileKey: fileKey, nodeId: nodeId });
             }
+            console.log('收到网页提交数据', configDataString);
             if (!configDataString || configDataString.trim() === '') {
                 throw new Error('未提供有效的转码配置');
             }
@@ -203,7 +232,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
         const savedPromptSetting = await fileManager.loadPromptSetting(fileKey, nodeId);
         const convertConfig = config.fileConfigs?.[fileKey] || defaultConfigData;
         // 获取提示词，优先使用用户保存的提示词，否则使用默认提示词
-        const frameworkPrompt = savedPromptSetting?.frameworkGuidePrompt;
+        const frameworkPrompt = savedPromptSetting?.enableFrameworkGuide ? savedPromptSetting?.frameworkGuidePrompt : '';
         const chunkPrompt = savedPromptSetting?.chunkOptimizePrompt || chunkOptimizeCodePrompt;
         const aggregationPrompt = savedPromptSetting?.aggregationOptimizePrompt || aggregationOptimizeCodePrompt;
         const finalPrompt = savedPromptSetting?.finalOptimizePrompt || finalOptimizeCodePrompt;
@@ -230,7 +259,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             isSupportSampling = await processSampling(groupsData, samplingConfig);
             // 采样完成后，更新组件名并保存到文件
             try {
-                const groupsDataToSave = groupsData.map(group => {
+                const groupsDataToSave = groupsData.map((group) => {
                     // 将提取的组件名更新到 componentName（仅标记的分组）
                     if (group.marked && group.name) {
                         group.componentName = group.name;
@@ -241,7 +270,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                     return groupWithoutNodeList;
                 });
                 await fileManager.saveGroupsData(fileKey, nodeId, groupsDataToSave);
-                Logger.log(`已保存更新后的 groupsData，包含 ${groupsData.filter(g => g.marked).length} 个标记的组件`);
+                Logger.log(`已保存更新后的 groupsData，包含 ${groupsData.filter((g) => g.marked).length} 个标记的组件`);
             }
             catch (error) {
                 Logger.error(`保存 groupsData 失败:`, error);
@@ -322,7 +351,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                             role: 'user',
                             content: {
                                 type: 'text',
-                                text: aggregationPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || '') + placeholderPrompt,
+                                text: frameworkPrompt + aggregationPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || '') + placeholderPrompt,
                             },
                         },
                         {
@@ -352,8 +381,21 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
         Logger.log('处理完成，生成的代码片段数量:', codeSnippets.length);
         Logger.log('已映射的组件数量:', componentMappings.length);
         Logger.log('组件上下文数量:', componentContexts.length);
-        // 构建组件映射提示词（包含组件映射和组件上下文）
-        const componentMappingPrompt = buildComponentMappingPrompt(componentMappings, componentContexts);
+        // 收集标记的组件（用于提示 LLM 调用 mark_components）
+        const markedComponents = [];
+        if (groupsData && groupsData.length > 0) {
+            groupsData.forEach((group) => {
+                if (group.marked && group.screenshot?.hash && group.name) {
+                    markedComponents.push({
+                        name: group.name,
+                        signature: group.screenshot.hash,
+                    });
+                }
+            });
+            Logger.log(`收集到 ${markedComponents.length} 个标记的组件`);
+        }
+        // 构建组件映射提示词（包含组件映射、组件上下文和标记组件）
+        const componentMappingPrompt = buildComponentMappingPrompt(componentMappings, componentContexts, markedComponents);
         // 使用提示词（已包含默认值）
         return {
             content: [
@@ -387,6 +429,112 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
         };
     }
 });
+// 标记并保存组件到 components.json
+mcpServer.tool('mark_components', 'Mark and save components to project components.json for future reuse and matching', {
+    components: z
+        .array(z.object({
+        name: z.string().describe('Component name in PascalCase'),
+        path: z.string().describe('Component file path relative to project root'),
+        signature: z.string().describe('Component signature (SHA256 hash) for matching'),
+        type: z.enum(['button', 'input', 'card', 'text', 'image', 'container', 'list', 'custom']).optional(),
+        description: z.string().optional(),
+        import: z.string().optional().describe('Import statement for the component'),
+        props: z
+            .array(z.object({
+            name: z.string(),
+            type: z.string().optional(),
+            required: z.boolean().optional(),
+            description: z.string().optional(),
+        }))
+            .optional(),
+    }))
+        .describe('Array of components to mark and save'),
+}, async (args) => {
+    try {
+        const { components } = args;
+        // 1. 设置 workspaceRoot
+        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);
+        }
+        // 2. 加载现有组件
+        const existingComponents = await fileManager.loadComponentsDatabase();
+        // 3. 构建 signature 索引（用于去重）
+        const signatureIndex = new Map();
+        existingComponents.forEach((comp, index) => {
+            if (comp.signature) {
+                signatureIndex.set(comp.signature, index);
+            }
+        });
+        // 4. 处理新组件（合并逻辑）
+        const now = new Date().toISOString();
+        let addedCount = 0;
+        let updatedCount = 0;
+        for (const comp of components) {
+            const existingIndex = signatureIndex.get(comp.signature);
+            const storedComponent = {
+                id: generateComponentId(),
+                name: comp.name,
+                type: comp.type || 'custom',
+                path: comp.path,
+                import: comp.import || `import { ${comp.name} } from '${comp.path}'`,
+                props: (comp.props || []).map((p) => ({
+                    name: p.name,
+                    type: p.type || 'any',
+                    required: p.required || false,
+                    description: p.description,
+                })),
+                description: comp.description,
+                signature: comp.signature,
+            };
+            if (existingIndex !== undefined) {
+                // 更新已存在的组件（保留原始导入时间）
+                const originalImportedAt = existingComponents[existingIndex].importedAt;
+                existingComponents[existingIndex] = {
+                    ...storedComponent,
+                    importedAt: originalImportedAt,
+                };
+                updatedCount++;
+            }
+            else {
+                // 添加新组件
+                existingComponents.push(storedComponent);
+                signatureIndex.set(comp.signature, existingComponents.length - 1);
+                addedCount++;
+            }
+        }
+        // 5. 保存到文件
+        await fileManager.saveComponentsDatabase(existingComponents);
+        // 6. 返回结果
+        Logger.log(`mark_components: 新增 ${addedCount} 个，更新 ${updatedCount} 个，共 ${existingComponents.length} 个组件`);
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `✅ 组件标记完成：新增 ${addedCount} 个，更新 ${updatedCount} 个，共 ${existingComponents.length} 个组件`,
+                },
+            ],
+        };
+    }
+    catch (error) {
+        Logger.error('mark_components 处理失败:', error);
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `❌ 标记组件失败: ${error instanceof Error ? error.message : String(error)}`,
+                },
+            ],
+        };
+    }
+});
 // 启动 HTTP 服务器
 async function main() {
     // 检查是否是版本命令
@@ -760,7 +908,7 @@ async function main() {
                     success: true,
                     framework: frameworkName,
                     configPath: frameworkPath,
-                    created: !configExists
+                    created: !configExists,
                 }, null, 2));
             }
             else {
@@ -778,7 +926,7 @@ async function main() {
             if (isJsonOutput) {
                 console.log(JSON.stringify({
                     success: false,
-                    error: error.toString()
+                    error: error.toString(),
                 }, null, 2));
             }
             else {
@@ -791,24 +939,8 @@ async function main() {
     try {
         // 先输出基本启动信息到控制台，确保即使 VSCode 日志失败也能看到启动过程
         console.log(`[${new Date().toISOString()}] Starting Figma transcoding interceptor MCP server...`);
-        const port = await getAvailablePort();
         // Create config manager instance to pass to server
-        const configManager = new ConfigManager('d2c-mcp');
-        const isStdioMode = process.env.NODE_ENV === 'cli' || process.argv.includes('--stdio');
-        if (isStdioMode) {
-            Logger.log(`Stdio模式启动`);
-            await loadConfig(mcpServer, configManager);
-            const transport = new StdioServerTransport();
-            await mcpServer.connect(transport);
-            // 启动 HTTP 服务器 - 仅启用web服务
-            await startHttpServer(port, mcpServer, configManager, false);
-        }
-        else {
-            // 启动 HTTP 服务器 - 这是核心功能，不依赖 VSCode 日志
-            await startHttpServer(port, mcpServer, configManager, true);
-        }
-        // 服务器启动成功后再尝试使用 Logger（包含 VSCode 日志）
-        Logger.log(`Server started successfully on port ${port}!`);
+        await startListening(true);
     }
     catch (error) {
         // 确保错误信息能够输出，即使 VSCode 日志服务不可用
@@ -852,6 +984,7 @@ process.on('SIGTERM', async () => {
     catch (error) {
         // 忽略日志错误，确保清理过程继续
     }
+    await stopSocketServer();
     cleanupTauri();
     cleanupWeb();
     cleanupVSCode();