sloth-d2c-mcp 1.0.4-beta92 → 1.0.4-beta94

package/cli/run.js

@@ -102,7 +102,7 @@ if (args[0] === 'config') {
   const scriptPath = fileURLToPath(import.meta.url);
   
   // 后台启动子进程
-  const child = spawn(process.execPath, [scriptPath, '--stdio'], {
+  const child = spawn(process.execPath, [scriptPath, '--server'], {
     detached: true,
     stdio: 'ignore',
     env: { ...process.env, NODE_ENV: 'cli' }
@@ -198,6 +198,8 @@ if (args[0] === 'config') {
     console.log(`[sloth] 共停止 ${killedCount} 个进程`);
   }
   process.exit(0);
+} else if (args[0] === '--server') {
+  process.env.SLOTH_COMMAND = 'server';
 } else {
   // 设置环境变量为CLI模式
   process.env.NODE_ENV = "cli";

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

@@ -14,8 +14,12 @@ export function buildComponentContext(group) {
         group.componentContext.forEach((comp) => {
             componentMap.set(comp.name, comp);
         });
-        // 替换 @组件名 为组件详细信息
+        // 替换 @组件名 为组件详细信息（只替换组件，不替换 Markdown 文件）
         processedUserPrompt = processedUserPrompt.replace(mentionRegex, (match, display, id) => {
+            // 如果 id 包含路径分隔符，说明是文件，保持原样
+            if (id.includes('/') || id.includes('\\')) {
+                return match;
+            }
             const component = componentMap.get(id || display);
             if (component) {
                 const libInfo = component.lib ? ` (${component.lib})` : '';
@@ -37,6 +41,51 @@ export function buildComponentContext(group) {
     }
     return { processedUserPrompt, componentContextPrompt };
 }
+/**
+ * 处理 Markdown 文件上下文：解析 @文件名 并构建文档上下文提示词
+ * @param group 分组数据
+ * @returns 处理后的用户提示词和 Markdown 上下文提示词
+ */
+export function buildMarkdownContext(group) {
+    let processedUserPrompt = group.userPrompt || '';
+    let markdownContextPrompt = '';
+    if (group.markdownContext && Array.isArray(group.markdownContext) && group.markdownContext.length > 0) {
+        // 解析 userPrompt 中的 @文件名（react-mentions 格式：@[文件名](文件路径)）
+        const mentionRegex = /@\[([^\]]+)\]\(([^)]+)\)/g;
+        const markdownMap = new Map();
+        // 构建 Markdown 文件映射表
+        group.markdownContext.forEach((file) => {
+            markdownMap.set(file.path, file);
+        });
+        // 替换 @文件名 为文件详细信息（只替换文件，不替换组件）
+        processedUserPrompt = processedUserPrompt.replace(mentionRegex, (match, _display, id) => {
+            // 如果 id 不包含路径分隔符，说明是组件名，保持原样
+            if (!id.includes('/') && !id.includes('\\')) {
+                return match;
+            }
+            const markdownFile = markdownMap.get(id);
+            if (markdownFile) {
+                return `[文档: ${markdownFile.name}]`;
+            }
+            return match; // 如果找不到文件，保持原样
+        });
+        // 构建 Markdown 上下文说明
+        markdownContextPrompt = '\n\n## 参考文档\n\n以下是用户提供的参考文档，请在代码生成时参考这些文档中的规范、示例和最佳实践：\n\n';
+        group.markdownContext.forEach((file) => {
+            markdownContextPrompt += `### 📄 ${file.name}\n\n`;
+            if (file.content) {
+                markdownContextPrompt += '```markdown\n';
+                markdownContextPrompt += file.content;
+                markdownContextPrompt += '\n```\n\n';
+            }
+            else {
+                markdownContextPrompt += `**文件路径**: ${file.path}\n\n`;
+            }
+        });
+        markdownContextPrompt += '**重要**：请仔细阅读上述参考文档，遵循文档中的编码规范、API 使用方式和最佳实践，确保生成的代码符合项目要求。\n';
+    }
+    return { processedUserPrompt, markdownContextPrompt };
+}
 /**
  * 构建用户提示词文本
  * @param userPrompt 用户提示词

package/dist/build/core/sampling.js

@@ -2,7 +2,7 @@ import { getBoundingBox, getCode } from 'sloth-d2c-node/convert';
 import { Logger } from '../utils/logger.js';
 import { resetNodeListPosition, replaceImageSrc } from '../utils/utils.js';
 import { extractCodeAndComponents } from '../utils/extract.js';
-import { buildComponentContext, buildUserPromptText, buildPlaceholderPrompt } from './prompt-builder.js';
+import { buildComponentContext, buildMarkdownContext, buildUserPromptText, buildPlaceholderPrompt } from './prompt-builder.js';
 /**
  * 构建嵌套结构映射
  * @param groupsData 分组数据数组
@@ -46,9 +46,10 @@ export function buildNestingStructure(groupsData) {
  * @param componentMappings 组件映射数组
  * @param imageMap 图片映射
  * @param convertConfig 转换配置
+ * @param isLocalMode 是否为 local 模式
  * @returns 采样结果或 null
  */
-export async function handleComponentMapping(group, nodeList, componentMappings, imageMap, convertConfig) {
+export async function handleComponentMapping(group, nodeList, componentMappings, imageMap, convertConfig, isLocalMode) {
     if (group.componentMapping) {
         const componentName = group.componentMapping.name || `Group${group.groupIndex + 1}`;
         group.name = componentName;
@@ -57,6 +58,7 @@ export async function handleComponentMapping(group, nodeList, componentMappings,
         const code = await getCode({
             d2cNodeList: resetNodeList,
             config: convertConfig,
+            options: { isLocalMode },
         });
         const replacedCode = replaceImageSrc(code, imageMap);
         componentMappings.push({
@@ -147,10 +149,10 @@ export function injectChildPlaceholders(nodeList, childResults, nestingInfo, par
  * @returns 采样结果
  */
 export async function sampleSingleGroup(group, nodeList, config) {
-    const { d2cNodeList, imageMap, convertConfig, frameworkPrompt, chunkPrompt, mcpServer, componentMappings, codeSnippets, componentContexts, isSupportSampling } = config;
+    const { d2cNodeList, imageMap, convertConfig, frameworkPrompt, chunkPrompt, mcpServer, componentMappings, codeSnippets, componentContexts, isSupportSampling, isLocalMode } = config;
     Logger.log(`开始采样组 ${group.groupIndex}, 元素数量: ${group.elements.length}, nodeList 长度: ${nodeList.length}`);
     // 检查组件映射
-    const mappingResult = await handleComponentMapping(group, nodeList, componentMappings, imageMap, convertConfig);
+    const mappingResult = await handleComponentMapping(group, nodeList, componentMappings, imageMap, convertConfig, isLocalMode);
     if (mappingResult) {
         Logger.log(`组 ${group.groupIndex} 已映射组件，跳过采样: ${mappingResult.componentName}`);
         return mappingResult;
@@ -162,14 +164,16 @@ export async function sampleSingleGroup(group, nodeList, config) {
     const code = await getCode({
         d2cNodeList: resetNodeList,
         config: convertConfig,
+        options: { isLocalMode },
     });
     Logger.log(`组 ${group.groupIndex} 代码生成完成，代码长度: ${code.length}`);
     // 使用 imageMap 的 path 替换 code 中对应的 src
     const replacedCode = replaceImageSrc(code, imageMap);
     const componentName = `Group${group.groupIndex + 1}`;
     const codeWithCustomName = replacedCode.replace(/\bApp\b/g, componentName);
-    // 处理组件上下文
-    const { processedUserPrompt, componentContextPrompt } = buildComponentContext(group);
+    // 处理组件上下文和 Markdown 上下文
+    const { processedUserPrompt: promptAfterComponent, componentContextPrompt } = buildComponentContext(group);
+    const { processedUserPrompt, markdownContextPrompt } = buildMarkdownContext({ ...group, userPrompt: promptAfterComponent });
     const userPromptText = buildUserPromptText(processedUserPrompt);
     // 收集组件上下文信息
     if (group.componentContext && Array.isArray(group.componentContext) && group.componentContext.length > 0) {
@@ -186,8 +190,8 @@ export async function sampleSingleGroup(group, nodeList, config) {
         .map((node) => ({
         name: node.name || 'Unknown',
     }));
-    const placeholderPrompt = buildPlaceholderPrompt(placeholders);
-    Logger.log(`组 ${group.groupIndex} 开始调用 AI 采样，代码长度: ${codeWithCustomName.length}, 是否有用户提示: ${!!group.userPrompt}, 是否有组件上下文: ${!!(group.componentContext && group.componentContext.length > 0)}, 占位符数量: ${placeholders.length}`);
+    const placeholderPrompt = buildPlaceholderPrompt(placeholders, isSupportSampling);
+    Logger.log(`组 ${group.groupIndex} 开始调用 AI 采样，代码长度: ${codeWithCustomName.length}, 是否有用户提示: ${!!group.userPrompt}, 是否有组件上下文: ${!!(group.componentContext && group.componentContext.length > 0)}, 是否有 Markdown 上下文: ${!!(group.markdownContext && group.markdownContext.length > 0)}, 占位符数量: ${placeholders.length}`);
     // 执行采样
     try {
         if (!isSupportSampling)
@@ -202,6 +206,7 @@ export async function sampleSingleGroup(group, nodeList, config) {
                             chunkPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || '') +
                             userPromptText +
                             componentContextPrompt +
+                            markdownContextPrompt +
                             placeholderPrompt,
                     },
                 },

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, generateComponentId, stopSocketServer } from './server.js';
+import { loadConfig, startHttpServer, stopHttpServer, generateComponentId } from './server.js';
 import { FileManager } from './utils/file-manager.js';
 import { updateImageMapIfNeeded } from './utils/update.js';
 import { Logger } from './utils/logger.js';
@@ -24,6 +24,22 @@ import * as path from 'path';
 import { fileURLToPath } from 'url';
 import { extractCodeAndComponents } from './utils/extract.js';
 import { trackToolCall } from './utils/tj.js';
+const spawnServerProcess = async () => {
+    // run 命令：后台运行 sloth --stdio
+    const { spawn } = await import('node:child_process');
+    const { fileURLToPath } = await import('node:url');
+    // 获取当前脚本路径（兼容 Node.js 18）
+    const scriptPath = fileURLToPath(import.meta.url);
+    // 后台启动子进程
+    const child = spawn(process.execPath, [scriptPath, '--server'], {
+        detached: true,
+        stdio: 'ignore',
+        env: { ...process.env, NODE_ENV: 'cli' }
+    });
+    // 解除父进程对子进程的引用，允许父进程退出
+    child.unref();
+    console.log(`[sloth] 已在后台启动，PID: ${child.pid}`);
+};
 /**
  * 启动http & socket监听
  * @param init 是否是初始化，初始化时需要连接stdio transport
@@ -38,9 +54,13 @@ export async function startListening(init = false) {
         if (init) {
             const transport = new StdioServerTransport();
             await mcpServer.connect(transport);
+            // 单独启动httpServer进程，用于网页访问
+            await spawnServerProcess();
+        }
+        else {
+            // 启动 HTTP 服务器 - 仅启用web服务
+            await startHttpServer(port, mcpServer, configManager, false);
         }
-        // 启动 HTTP 服务器 - 仅启用web服务
-        await startHttpServer(port, mcpServer, configManager, false);
     }
     else {
         // 启动 HTTP 服务器 - 这是核心功能，不依赖 VSCode 日志
@@ -112,7 +132,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
         catch (error) {
             Logger.log('获取根目录时出错:', error);
         }
-        await startListening();
+        // await startListening()
         let userConfirmedChanges;
         let userHtmlDiff; // 存储 HTML diff 文本
         // 没有配置figmaApiKey，非数据推送模式，无法预览，直接唤起配置页面
@@ -189,11 +209,18 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             await fileManager.saveFile(fileKey, nodeId, 'imageMap.json', flatted.stringify(imageMap));
             // 保存figma绝对定位代码
             await fileManager.saveAbsoluteHtml(fileKey, nodeId, absoluteHtml);
+            await fileManager.saveAbsoluteHtml(fileKey, nodeId, absoluteHtml, true);
         }
         else {
-            d2cNodeList = flatted.parse(await fileManager.loadFile(fileKey, nodeId, 'nodeList.json'));
-            imageMap = flatted.parse(await fileManager.loadFile(fileKey, nodeId, 'imageMap.json'));
-            absoluteHtml = await fileManager.loadAbsoluteHtml(fileKey, nodeId);
+            try {
+                d2cNodeList = flatted.parse(await fileManager.loadFile(fileKey, nodeId, 'nodeList.json'));
+                imageMap = flatted.parse(await fileManager.loadFile(fileKey, nodeId, 'imageMap.json'));
+                absoluteHtml = await fileManager.loadAbsoluteHtml(fileKey, nodeId);
+            }
+            catch (err) {
+                throw new Error('加载本地数据失败, 请检查文件路径：' + fileManager.getFilePathPublic(fileKey, nodeId, 'nodeList.json'));
+            }
+            await fileManager.saveAbsoluteHtml(fileKey, nodeId, absoluteHtml, true);
             console.log('cache load data');
         }
         console.log('d2cNodeList', d2cNodeList);
@@ -229,6 +256,9 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             else {
                 const configData = JSON.parse(configDataString);
                 const { mcp, groupsData, confirmedChanges, htmlDiff, ...rest } = configData;
+                pluginManager.executeHook('afterSubmitConfigData', {
+                    configData,
+                });
                 userConfirmedChanges = confirmedChanges;
                 userHtmlDiff = htmlDiff; // 保存 HTML diff
                 // 保存旧配置用于比较
@@ -290,7 +320,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?.enableFrameworkGuide ? savedPromptSetting?.frameworkGuidePrompt : '';
+        const frameworkPrompt = savedPromptSetting?.frameworkGuidePrompt || '';
         const chunkPrompt = savedPromptSetting?.chunkOptimizePrompt || chunkOptimizeCodePrompt;
         const aggregationPrompt = savedPromptSetting?.aggregationOptimizePrompt || aggregationOptimizeCodePrompt;
         const finalPrompt = savedPromptSetting?.finalOptimizePrompt || finalOptimizeCodePrompt;
@@ -314,6 +344,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             codeSnippets,
             componentContexts,
             isSupportSampling,
+            isLocalMode: local,
         };
         // 深度遍历采样：针对每个分组生成 AI 相对布局树并转码
         if (groupsData && groupsData?.length > 0) {
@@ -400,6 +431,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             const code = await getCode({
                 d2cNodeList: ungroupedNodeList,
                 config: convertConfig,
+                options: { isLocalMode: local },
             });
             // 使用 imageMap 的 path 替换 code 中对应的 src
             const replacedCode = replaceImageSrc(code, imageMap);
@@ -429,18 +461,18 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                 }, {
                     timeout: 5 * 60 * 1000,
                 });
-                Logger.log('采样成功 (分组外元素)', text);
+                Logger.log('采样成功 (分组外元素)', text, '采样请求代码', replacedCode, '采样提示词', frameworkPrompt + aggregationPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || '') + placeholderPrompt);
                 const { code: pageCode } = extractCodeAndComponents(text)[0];
                 codeSnippets.unshift(pageCode);
             }
             catch (e) {
                 Logger.log('调用分组外元素采样出错，降级到传统模式', e);
-                codeSnippets.unshift(placeholderPrompt + '\n' + replacedCode);
+                codeSnippets.unshift(replacedCode);
             }
         }
         const onSamplingComplete = await pluginManager.executeHook('onSamplingComplete', {
             codeSnippets,
-            imageMap
+            imageMap,
         });
         codeSnippets = onSamplingComplete?.codeSnippets || codeSnippets;
         imageMap = onSamplingComplete?.imageMap || imageMap;
@@ -469,17 +501,19 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
         Logger.log(`加载组件数据库，共 ${componentsDatabase.length} 个组件`);
         // 构建组件映射提示词（包含组件映射、组件上下文、标记组件和完整组件数据库）
         const componentMappingPrompt = buildComponentMappingPrompt(componentMappings, componentContexts, markedComponents, componentsDatabase);
+        const { prompt: pluginFinalPrompt = '' } = await pluginManager.executeHook('beforeFinalPrompt', { configData: config.fileConfigs?.[fileKey] || '' });
+        console.log('pluginFinalPrompt', pluginFinalPrompt);
         // 使用提示词（已包含默认值）
         return {
             content: [
                 isSupportSampling
                     ? {
                         type: 'text',
-                        text: finalPrompt + componentMappingPrompt,
+                        text: finalPrompt + componentMappingPrompt + pluginFinalPrompt,
                     }
                     : {
                         type: 'text',
-                        text: noSamplingPrompt + componentMappingPrompt,
+                        text: noSamplingPrompt + componentMappingPrompt + pluginFinalPrompt,
                     },
                 ...codeSnippets.map((code) => {
                     return {
@@ -1124,6 +1158,9 @@ async function main() {
         }
         process.exit(0);
     }
+    if (process.env.SLOTH_COMMAND === 'server') {
+        await startListening();
+    }
     try {
         // 先输出基本启动信息到控制台，确保即使 VSCode 日志失败也能看到启动过程
         console.log(`[${new Date().toISOString()}] Starting Figma transcoding interceptor MCP server...`);
@@ -1175,7 +1212,6 @@ process.on('SIGTERM', async () => {
     catch (error) {
         // 忽略日志错误，确保清理过程继续
     }
-    await stopSocketServer();
     cleanupTauri();
     cleanupWeb();
     cleanupVSCode();
@@ -1286,6 +1322,10 @@ else if (args[0] === 'clear') {
     // 设置环境变量标识这是 clear 命令
     process.env.SLOTH_COMMAND = 'clear';
 }
+else if (args[0] === '--server') {
+    // 设置环境变量标识这是 clear 命令
+    process.env.SLOTH_COMMAND = 'server';
+}
 else {
     // 设置环境变量为CLI模式
     process.env.NODE_ENV = 'cli';

package/dist/build/plugin/loader.js

@@ -3,6 +3,7 @@ import { promises as fs } from 'fs';
 import * as path from 'path';
 import { fileURLToPath } from 'url';
 import envPaths from 'env-paths';
+import { createRequire } from 'module';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 // 检测是否存在 pnpm
@@ -17,7 +18,7 @@ function hasPnpm() {
 }
 // 获取包管理器命令
 function getPackageManager() {
-    return /* hasPnpm() ? 'pnpm' :  */ 'npm';
+    return 'npm';
 }
 // 使用 env-paths 获取配置目录（与 config-manager 保持一致）
 const paths = envPaths('d2c-mcp');
@@ -25,7 +26,14 @@ const paths = envPaths('d2c-mcp');
 function getGlobalPackageDir() {
     // 在构建后的目录中: dist/build/plugin/loader.js
     // 需要向上三级才能找到包根目录
-    return path.resolve(__dirname, '..', '..', '..');
+    // return path.resolve(__dirname, '..', '..', '..')
+    try {
+        const pm = getPackageManager();
+        return execSync(`${pm} root -g`, { encoding: 'utf-8' }).trim();
+    }
+    catch {
+        return '';
+    }
 }
 // 获取全局插件配置文件路径（与 config.json 在同一目录）
 function getGlobalPluginsConfigPath() {
@@ -68,6 +76,12 @@ async function loadWorkspacePluginsConfig(workspaceRoot) {
         return { plugins: [] };
     }
 }
+export async function loadPluginFromGlobalDirAsync(packageName) {
+    const globalDir = getGlobalPackageDir();
+    const require = createRequire(path.join(globalDir));
+    const resolvedPath = require.resolve(packageName);
+    return await import(resolvedPath);
+}
 /**
  * 解析插件配置项，统一返回 { name, config } 格式
  */
@@ -92,7 +106,7 @@ async function checkLocalPlugin(workspaceRoot, pluginName) {
 // 检查 npm 包是否已安装
 async function isNpmPackageInstalled(packageName) {
     try {
-        await import(packageName);
+        await loadPluginFromGlobalDirAsync(packageName);
         return true;
     }
     catch {
@@ -125,11 +139,11 @@ async function tryInstallNpmPackage(packageName) {
 export async function installPlugin(packageName) {
     const globalDir = getGlobalPackageDir();
     console.log(`[sloth] 正在安装插件: ${packageName}`);
-    console.log(`[sloth] 安装目录: ${globalDir}`);
+    // console.log(`[sloth] 安装目录: ${globalDir}`)
     try {
         const pm = getPackageManager();
         // 在全局包目录下执行安装
-        execSync(`${pm} install ${packageName}`, {
+        execSync(`${pm} install -g ${packageName}`, {
             cwd: globalDir,
             stdio: 'inherit',
         });
@@ -239,15 +253,15 @@ export async function loadWorkspacePlugins(workspaceRoot) {
             if (!isInstalled) {
                 // 尝试安装
                 console.log(`[sloth] 插件 ${pluginName} 未安装，尝试安装...`);
-                const installSuccess = await tryInstallNpmPackage(pluginName);
-                if (!installSuccess) {
-                    failedPlugins.push(pluginName);
-                    continue;
-                }
+                // const installSuccess = await tryInstallNpmPackage(pluginName)
+                // if (!installSuccess) {
+                //   failedPlugins.push(pluginName)
+                //   continue
+                // }
             }
             // 加载 npm 包
             try {
-                const pluginModule = await import(pluginName);
+                const pluginModule = await loadPluginFromGlobalDirAsync(pluginName);
                 console.log('pluginModule', pluginModule);
                 const plugin = {
                     name: pluginName,

package/dist/build/plugin/manager.js

@@ -100,6 +100,7 @@ class PluginManager {
                     ...params,
                     ...(lastReturnVal || {}),
                     _config: context.config,
+                    workspaceRoot: this.workspaceRoot,
                 }, context);
                 // 更新上一个插件信息
                 lastPlugin = plugin.name;
@@ -107,6 +108,7 @@ class PluginManager {
                     ...params,
                     ...(lastReturnVal || {}),
                     ...(result || {}),
+                    workspaceRoot: this.workspaceRoot,
                 };
             }
             catch (error) {