sloth-d2c-mcp 1.0.4-beta93 → 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/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，非数据推送模式，无法预览，直接唤起配置页面
@@ -192,9 +212,14 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             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');
         }
@@ -231,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
                 // 保存旧配置用于比较
@@ -473,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 {
@@ -1128,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...`);
@@ -1179,7 +1212,6 @@ process.on('SIGTERM', async () => {
     catch (error) {
         // 忽略日志错误，确保清理过程继续
     }
-    await stopSocketServer();
     cleanupTauri();
     cleanupWeb();
     cleanupVSCode();
@@ -1290,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) {

package/dist/build/server.js

@@ -21,7 +21,8 @@ import { extractJson } from './utils/extract.js';
 import { componentAnalysisPrompt, componentAnalysisPromptVue, chunkOptimizeCodePromptKuikly, aggregationOptimizeCodePromptKuikly, finalOptimizeCodePromptKuikly, chunkOptimizeCodePrompt, aggregationOptimizeCodePrompt, finalOptimizeCodePrompt, chunkOptimizeCodePromptVue, aggregationOptimizeCodePromptVue, finalOptimizeCodePromptVue, frameworkPromptKuikly, noSamplingAggregationPrompt, noSamplingAggregationPromptVue, noSamplingAggregationPromptKuikly, chunkOptimizeCodePromptIosOc, aggregationOptimizeCodePromptIosOc, finalOptimizeCodePromptIosOc, noSamplingAggregationPromptIosOc, chunkOptimizeCodePromptIosSwift, aggregationOptimizeCodePromptIosSwift, finalOptimizeCodePromptIosSwift, noSamplingAggregationPromptIosSwift, } from 'sloth-d2c-node/convert';
 import { SocketServer } from './socket-server.js';
 import { getParam } from './utils/utils.js';
-import { listWorkspacePlugins } from './plugin/loader.js';
+import { loadPluginFromGlobalDirAsync } from './plugin/loader.js';
+import { pluginManager } from './plugin/manager.js';
 /**
  * 生成组件 ID（4位随机字符串）
  */
@@ -48,7 +49,7 @@ let configManager = null; // 配置管理器实例
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 // 获取端口号
-let PORT = 0;
+let PORT = 3100;
 // 导出获取端口号的函数
 export function getPort() {
     return PORT;
@@ -415,7 +416,8 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
             const fileKey = req.query.fileKey;
             const nodeId = req.query.nodeId;
             const framework = req.query.framework;
-            const plugins = await listWorkspacePlugins(req.workspaceRoot);
+            // const plugins = await listWorkspacePlugins(req.workspaceRoot)
+            const plugins = await socketServer?.getTokenExtraField(req.uuid, 'plugins');
             if (fileKey) {
                 // 如果提供了 fileKey，返回该 fileKey 的特定配置
                 const globalConfig = await configManager.load();
@@ -449,7 +451,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                         defaultFramework: globalConfig.defaultFramework || 'react',
                         fileKey: fileKey,
                         groupsData: groupsData,
-                        plugins,
+                        pluginSetting: plugins,
                     },
                 });
             }
@@ -494,7 +496,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                         imageSetting: configStorage.imageSetting || {},
                         promptSetting: promptSetting,
                         frameworks: frameworks,
-                        plugins,
+                        pluginSetting: plugins,
                     },
                 });
             }
@@ -931,6 +933,25 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
             message: '日志重连已启动',
         });
     });
+    // 插件渲染器端点 - 返回JS代码字符串
+    app.get('/pluginRenderer', async (req, res) => {
+        console.log('pluginRenderer');
+        const pluginName = req.query.pluginName;
+        let pluginRenderer = null;
+        try {
+            // @ts-ignore
+            pluginRenderer = await loadPluginFromGlobalDirAsync(pluginName);
+        }
+        catch (error) {
+            console.error('加载插件渲染器失败:', error);
+            res.type('application/javascript; charset=utf-8').send(`alert(${pluginName}加载失败)`);
+            return;
+        }
+        const renderer = pluginRenderer.default.renderConfigForm;
+        console.log('pluginRenderer.default', pluginRenderer.default);
+        console.log('renderer', renderer);
+        res.type('application/javascript; charset=utf-8').send(renderer);
+    });
     // ==================== 组件映射相关接口 ====================
     /**
      * 获取项目根目录
@@ -1853,9 +1874,9 @@ ${truncatedDiff}
     // 启动 HTTP 服务器，监听端口
     httpServer = app.listen(port, async (err) => {
         if (err) {
-            Logger.error('HTTP 服务器启动失败:', err);
             httpServer = null;
-            return;
+            Logger.error('HTTP 服务器启动失败:', err, '退出进程');
+            process.exit(0);
         }
         Logger.log(`HTTP server listening on port ${port}`);
         Logger.log(`SSE endpoint available at http://localhost:${port}/sse`);
@@ -1875,7 +1896,7 @@ ${truncatedDiff}
         }
         catch (error) {
             Logger.error('Socket 服务器启动失败:', error);
-            Logger.error('进入子进程模式');
+            process.exit(0);
         }
     });
     // 监听 SIGINT 信号，优雅关闭服务器和所有会话
@@ -1885,7 +1906,7 @@ ${truncatedDiff}
         // 清理等待中的认证请求
         pendingRequests.clear();
         // 关闭 Socket 服务器
-        await stopSocketServer();
+        await stopHttpServer();
         // 关闭所有活跃的 SSE 和 streamable 传输，释放资源
         await closeTransports(transports.sse);
         await closeTransports(transports.streamable);
@@ -1941,7 +1962,7 @@ export async function getUserInput(payload) {
                 Logger.log('Socket 客户端已连接');
                 const workspaceRoot = fileManager.getWorkspaceRoot();
                 // 注册 token 并等待响应，同时传递 extra 数据给主进程
-                const responsePromise = socketClient.registerToken(token, { workspaceRoot });
+                const responsePromise = socketClient.registerToken(token, { workspaceRoot, plugins: pluginManager.getPlugins() });
                 // 打开浏览器
                 await open(authUrl);
                 // 等待认证响应
@@ -1975,14 +1996,14 @@ export async function stopSocketServer() {
 }
 // 停止 HTTP 服务器，并关闭所有 SSE 传输
 export async function stopHttpServer() {
+    // 关闭 Socket 服务器
+    const closeSocket = stopSocketServer();
     if (!httpServer) {
         throw new Error('HTTP 服务器未运行');
     }
     return new Promise((resolve, reject) => {
         // 清理等待中的认证请求
         pendingRequests.clear();
-        // 关闭 Socket 服务器
-        const closeSocket = stopSocketServer();
         httpServer.close((err) => {
             if (err) {
                 reject(err);

package/dist/build/socket-client.js

@@ -124,7 +124,7 @@ export class SocketClient {
             const timeout = setTimeout(() => {
                 this.messageHandlers.delete(token);
                 reject(new Error('等待认证响应超时'));
-            }, 5 * 60 * 1000); // 5分钟超时
+            }, 30 * 60 * 1000); // 30分钟超时
             // 注册消息处理器
             this.messageHandlers.set(token, (data) => {
                 clearTimeout(timeout);

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

@@ -1,10 +1,10 @@
 {
-  "buildTime": "2026-01-19T02:41:15.253Z",
+  "buildTime": "2026-01-25T17:24:40.636Z",
   "mode": "build",
   "pages": {
     "main": {
       "file": "index.html",
-      "size": 1646449,
+      "size": 1649150,
       "sizeFormatted": "1.57 MB"
     },
     "detail": {
@@ -13,6 +13,6 @@
       "sizeFormatted": "275.16 KB"
     }
   },
-  "totalSize": 1928215,
+  "totalSize": 1930916,
   "totalSizeFormatted": "1.84 MB"
 }