sloth-d2c-mcp 1.0.4-beta100

package/README.md

@@ -0,0 +1,83 @@
+# Sloth D2C MCP
+
+## 简介
+
+Sloth D2C 设计稿转代码工具，包括 Sloth D2C 设计稿转代码 Figma 插件及 Sloth D2C MCP 工具。
+
+Sloth D2C 设计稿转代码插件，面向前端开发与设计团队的智能化工具，支持设计稿快速转前端代码，并通过协同 MCP 工具，写入生产级前端代码；同时支持文本/图片+Prompt输入AI，生成目标风格页面并转译至Figma节点。
+
+Sloth D2C MCP 工具，获取插件推送的转码数据，通过拦截页面配置框架选择、转换倍率、颜色格式、图片存储、提示词编辑等基础设置，同时支持圈选分组、组件映射、模块标记等高级设置，以生成提示词指导 Agent 生成目标代码并写入。
+
+## 核心能力
+
+<!-- ### 节点清洗 -->
+<!-- 待补充 -->
+
+### 效果预览及源码调整
+
+插件支持生成代码页面预览，同时支持源码二次编辑。在插件转码后，提供代码编辑器编辑源码，实时预览效果。
+
+### AI 生成页面
+
+插件支持文本/图片+Prompt 输入 AI，生成目标风格页面代码并预览。同时支持转译至成 Figma 节点并插入 Figma 设计稿。
+
+### 自研 MCP 拦截器
+
+设计了创新的 MCP 拦截器。利用 await 挂起 MCP 的核心请求，为用户创造了一个交互窗口。通过配置拦截及数据推送突破 RESTful API 限制，最大化还原度。
+
+### 支持多种框架
+
+MCP 默认支持 React、Vue 代码生成，系统内置提示词默认配置。同时支持新增自定义框架，配置自定义框架生成提示词。
+
+### 多种图片存储方式
+
+支持图片本地存储、OSS 存储及自定义图片上传方式。
+
+### 圈选分组与采样
+
+支持圈选分组与智能采样，圈选分组功能允许你在设计稿预览页中手动划分代码结构区域，每个区域分别在不同的采用请求流程进行代码生成，提高转码效率和准确性。
+
+### 组件映射
+
+从项目中选择组件文件，将项目中的组件映射对应圈选元素，生成代码时直接引用对应组件。
+
+### 模块标记
+
+对圈选后的模块进行标记，方便其他设计稿类似模块的直接复用，无需重复生成。
+
+## 安装 MCP
+
+```bash
+# 使用 pnpm（推荐）
+pnpm install sloth-d2c-mcp -g
+
+# 或使用 npm
+npm install sloth-d2c-mcp -g
+
+# 验证安装
+sloth
+```
+
+## 配置 MCP
+
+**TME-Continue**
+
+```yaml
+- name: sloth-d2c-mcp
+  command: sloth
+  connectionTimeout: 3000000
+  args:
+    - --stdio
+```
+
+**Copilot**
+
+```json
+"d2c-cli": {
+  "type": "stdio",
+  "command": "sloth",
+  "args": ["--stdio"]
+}
+```
+
+> **提示**：推荐使用 Claude AI 模型。若需转码长设计稿，请开启 MCP 采样功能以优化转码策略（TME-Continue 和 Copilot 均支持）。

package/cli/run.js

@@ -0,0 +1,328 @@
+#!/usr/bin/env node
+
+// 获取命令行参数
+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(['--path']);
+} 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] === 'server' && args[1] === 'start') {
+  // run 命令：后台运行 sloth --stdio
+  const { spawn } = await import('node:child_process');
+  // const { fileURLToPath } = await import('node:url');
+  // const path = await import('node:path');
+  
+  // // 获取当前脚本路径（兼容 Node.js 18）
+  // const scriptPath = fileURLToPath(import.meta.url);
+  // // 指向scriptPath目录下的log
+  const logPath = path.resolve(path.dirname(scriptPath), 'sloth-server.log');
+  
+  // // 后台启动子进程
+  // const child = spawn(process.execPath, [scriptPath, '--server', '--log='+logPath], {
+  //   detached: true,
+  //   stdio: 'ignore',
+  //   env: { ...process.env, NODE_ENV: 'cli' }
+  // });
+  
+  // // 解除父进程对子进程的引用，允许父进程退出
+  // child.unref();
+
+    // 直接调用 sloth CLI 命令
+  const child = spawn('sloth', ['--server', '--log='+logPath], {
+    detached: true,
+    stdio: 'ignore',
+    shell: true,  // 需要 shell 来解析命令
+    env: { ...process.env }
+  });
+  
+  child.unref();
+  
+  console.log(`[sloth] 已在后台启动，PID: ${child.pid}`);
+  process.exit(0);
+} else if (args[0] === 'server' && args[1] === 'stop') {
+  // stop 命令：停止监听 3100/3101 端口的 sloth 进程
+  const { execSync } = await import('node:child_process');
+  const os = await import('node:os');
+  
+  const ports = [3100, 3101];
+  const pidsToKill = new Set();
+  
+  for (const port of ports) {
+    try {
+      let output = '';
+      if (os.platform() === 'win32') {
+        // Windows: netstat -ano | findstr :PORT
+        output = execSync(`netstat -ano | findstr :${port}`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+        const lines = output.trim().split('\n');
+        for (const line of lines) {
+          const match = line.match(/LISTENING\s+(\d+)/);
+          if (match) {
+            pidsToKill.add(match[1]);
+          }
+        }
+      } else {
+        // macOS/Linux: lsof -i :PORT
+        output = execSync(`lsof -i :${port} -t`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+        const pids = output.trim().split('\n').filter(Boolean);
+        pids.forEach(pid => pidsToKill.add(pid.trim()));
+      }
+    } catch {
+      // 端口未被占用，忽略错误
+    }
+  }
+  
+  if (pidsToKill.size === 0) {
+    console.log('[sloth] 未找到监听 3100/3101 端口的进程');
+    process.exit(0);
+  }
+  
+  // 验证进程是否是 sloth 相关进程
+  let killedCount = 0;
+  for (const pid of pidsToKill) {
+    try {
+      let cmdline = '';
+      if (os.platform() === 'win32') {
+        cmdline = execSync(`wmic process where processid=${pid} get commandline`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+      } else {
+        cmdline = execSync(`ps -p ${pid} -o command=`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+      }
+      
+      // 检查是否是 sloth 进程
+      const isSlothProcess = cmdline.includes('sloth') || cmdline.includes('d2c-mcp');
+      
+      if (isSlothProcess) {
+        process.kill(Number(pid), 'SIGTERM');
+        console.log(`[sloth] 已停止进程 PID: ${pid}`);
+        killedCount++;
+      } else {
+        console.log(`[sloth] 跳过非 sloth 进程 PID: ${pid} (${cmdline.trim().slice(0, 50)}...)`);
+      }
+    } catch (e) {
+      // 进程可能已经退出
+      console.warn(`[sloth] 无法停止进程 PID: ${pid}`, e.message);
+    }
+  }
+  
+  if (killedCount === 0) {
+    console.log('[sloth] 未找到正在运行的 sloth 进程');
+  } else {
+    console.log(`[sloth] 共停止 ${killedCount} 个进程`);
+  }
+  process.exit(0);
+} else if (args[0] === 'update') {
+  // update 命令：先停止进程，然后更新 sloth
+  const { execSync, spawnSync } = await import('node:child_process');
+  const os = await import('node:os');
+  const { fileURLToPath } = await import('node:url');
+  const path = await import('node:path');
+  
+  console.log('[sloth] 正在停止运行中的进程...');
+  
+  // 复用 stop 命令的逻辑
+  const ports = [3100, 3101];
+  const pidsToKill = new Set();
+  
+  for (const port of ports) {
+    try {
+      let output = '';
+      if (os.platform() === 'win32') {
+        output = execSync(`netstat -ano | findstr :${port}`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+        const lines = output.trim().split('\n');
+        for (const line of lines) {
+          const match = line.match(/LISTENING\s+(\d+)/);
+          if (match) {
+            pidsToKill.add(match[1]);
+          }
+        }
+      } else {
+        output = execSync(`lsof -i :${port} -t`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+        const pids = output.trim().split('\n').filter(Boolean);
+        pids.forEach(pid => pidsToKill.add(pid.trim()));
+      }
+    } catch {
+      // 端口未被占用，忽略错误
+    }
+  }
+  
+  let killedCount = 0;
+  for (const pid of pidsToKill) {
+    try {
+      let cmdline = '';
+      if (os.platform() === 'win32') {
+        cmdline = execSync(`wmic process where processid=${pid} get commandline`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+      } else {
+        cmdline = execSync(`ps -p ${pid} -o command=`, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+      }
+      
+      const isSlothProcess = cmdline.includes('sloth') || cmdline.includes('d2c-mcp');
+      
+      if (isSlothProcess) {
+        process.kill(Number(pid), 'SIGTERM');
+        console.log(`[sloth] 已停止进程 PID: ${pid}`);
+        killedCount++;
+      }
+    } catch (e) {
+      // 进程可能已经退出
+    }
+  }
+  
+  if (killedCount > 0) {
+    console.log(`[sloth] 共停止 ${killedCount} 个进程`);
+  }
+  
+  // 检测包管理器：通过检查 sloth 命令的安装路径来判断
+  let packageManager = 'npm'; // 默认使用 npm
+  
+  try {
+    // 获取当前脚本的实际路径
+    const scriptPath = fileURLToPath(import.meta.url);
+    const scriptDir = path.dirname(scriptPath);
+    
+    // 检查路径中是否包含 pnpm 相关目录
+    if (scriptDir.includes('pnpm') || scriptDir.includes('.pnpm')) {
+      packageManager = 'pnpm';
+    } else {
+      // 尝试通过 which/where 命令检查 sloth 的安装位置
+      try {
+        const whichCmd = os.platform() === 'win32' ? 'where sloth' : 'which sloth';
+        const slothPath = execSync(whichCmd, { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }).trim();
+        
+        if (slothPath.includes('pnpm') || slothPath.includes('.pnpm')) {
+          packageManager = 'pnpm';
+        }
+      } catch {
+        // 忽略错误，使用默认的 npm
+      }
+      
+      // 额外检查：尝试检测全局 pnpm 目录
+      if (packageManager === 'npm') {
+        try {
+          const pnpmRoot = execSync('pnpm root -g', { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] }).trim();
+          if (scriptDir.startsWith(pnpmRoot) || scriptDir.includes(path.dirname(pnpmRoot))) {
+            packageManager = 'pnpm';
+          }
+        } catch {
+          // pnpm 未安装或命令失败，使用 npm
+        }
+      }
+    }
+  } catch {
+    // 检测失败，使用默认的 npm
+  }
+  
+  console.log(`[sloth] 检测到包管理器: ${packageManager}`);
+  console.log('[sloth] 正在更新 sloth-d2c-mcp...');
+  
+  // 执行全局安装更新
+  const installCmd = packageManager === 'pnpm' 
+    ? 'pnpm install -g sloth-d2c-mcp' 
+    : 'npm install -g sloth-d2c-mcp';
+  
+  try {
+    const result = spawnSync(installCmd, {
+      shell: true,
+      stdio: 'inherit',
+      env: process.env
+    });
+    
+    if (result.status === 0) {
+      console.log('[sloth] 更新完成!');
+    } else {
+      console.error('[sloth] 更新失败，退出码:', result.status);
+      process.exit(result.status || 1);
+    }
+  } catch (e) {
+    console.error('[sloth] 更新失败:', e.message);
+    process.exit(1);
+  }
+  process.exit(0);
+} else if (args[0] === 'cache') {
+  // cache 命令：显示缓存目录路径
+  process.env.SLOTH_COMMAND = 'cache';
+} else if (args[0] === '--server') {
+  process.env.SLOTH_COMMAND = 'server';
+} else {
+  // 设置环境变量为CLI模式
+  process.env.NODE_ENV = "cli";
+  
+  // 确保--stdio参数被传递
+  if (!process.argv.includes("--stdio")) {
+    process.argv.push("--stdio");
+  }
+}
+
+// 导入并启动主程序
+import('../dist/build/index.js');