sloth-d2c-mcp 1.0.4-beta82 → 1.0.4-beta83

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

@@ -33,8 +33,7 @@ export function buildComponentContext(group) {
             componentContextPrompt += `### ${comp.name}${libInfo}\n`;
             componentContextPrompt += `- **Props**: ${propsInfo}${descInfo}\n\n`;
         });
-        componentContextPrompt +=
-            '注意：在生成代码时，请根据设计稿的需求，合理使用上述组件，并正确传递 props 参数。\n';
+        componentContextPrompt += '注意：在生成代码时，请根据设计稿的需求，合理使用上述组件，并正确传递 props 参数。\n';
     }
     return { processedUserPrompt, componentContextPrompt };
 }
@@ -197,11 +196,11 @@ export function buildComponentMappingPrompt(componentMappings, componentContexts
  * @param placeholders 占位符信息数组
  * @returns 占位符提示词
  */
-export function buildPlaceholderPrompt(placeholders) {
+export function buildPlaceholderPrompt(placeholders, isSupportSampling = true) {
     if (placeholders.length === 0) {
         return '';
     }
-    let prompt = '\n\n## 子组件占位符\n\n**重要**：以下占位符代表已实现的子组件，请转换格式但不要重新实现其内部逻辑。\n\n';
+    let prompt = `\n\n## 子组件占位符\n\n**重要**：以下占位符代表已实现的子组件${isSupportSampling ? '，请转换格式但不要重新实现其内部逻辑。' : ''}\n\n`;
     placeholders.forEach((placeholder) => {
         const kebabName = placeholder.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
         prompt += `- \`<${kebabName}>\`\n`;

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, frameworkPrompt, chunkPrompt, mcpServer, componentMappings, codeSnippets, componentContexts } = config;
+    const { d2cNodeList, imageMap, convertConfig, frameworkPrompt, chunkPrompt, mcpServer, componentMappings, codeSnippets, componentContexts, isSupportSampling } = config;
     Logger.log(`开始采样组 ${group.groupIndex}, 元素数量: ${group.elements.length}, nodeList 长度: ${nodeList.length}`);
     // 检查组件映射
     const mappingResult = handleComponentMapping(group, componentMappings);
@@ -178,6 +178,8 @@ export async function sampleSingleGroup(group, nodeList, config) {
     Logger.log(`组 ${group.groupIndex} 开始调用 AI 采样，代码长度: ${codeWithCustomName.length}, 是否有用户提示: ${!!group.userPrompt}, 是否有组件上下文: ${!!(group.componentContext && group.componentContext.length > 0)}, 占位符数量: ${placeholders.length}`);
     // 执行采样
     try {
+        if (!isSupportSampling)
+            throw new Error('不支持采样');
         const { content: { text }, } = await mcpServer.server.createMessage({
             messages: [
                 {
@@ -274,11 +276,7 @@ export async function sampleGroupRecursive(groupIndex, nestingInfo, config, samp
  * @returns 是否支持采样
  */
 export async function processSampling(groupsData, config) {
-    const { d2cNodeList, componentMappings, codeSnippets } = config;
-    let isSupportSampling = true;
-    if (!groupsData || groupsData.length === 0) {
-        return isSupportSampling;
-    }
+    const { d2cNodeList, componentMappings, codeSnippets, isSupportSampling } = config;
     Logger.log(`开始处理 groupsData，总数: ${groupsData.length}`);
     Logger.log(`groupsData 详情:`, groupsData.map((g) => ({ groupIndex: g.groupIndex, hasChildren: !!g.children, children: g.children })));
     // 构建嵌套结构
@@ -295,7 +293,6 @@ export async function processSampling(groupsData, config) {
                 await sampleGroupRecursive(rootIndex, nestingInfo, config, samplingResults, 0);
             }
             catch (e) {
-                isSupportSampling = false;
                 Logger.log(`根组 ${rootIndex} 处理出错:`, e);
             }
             Logger.log(`========== 根组 ${rootIndex} 处理完成 ==========\n`);
@@ -327,7 +324,6 @@ export async function processSampling(groupsData, config) {
                     await sampleSingleGroup(group, nodeList, config);
                 }
                 catch (e) {
-                    isSupportSampling = false;
                     Logger.log(`独立组 ${group.groupIndex} 处理出错:`, e);
                 }
             }
@@ -349,7 +345,6 @@ export async function processSampling(groupsData, config) {
                 await sampleSingleGroup(group, nodeList, config);
             }
             catch (e) {
-                isSupportSampling = false;
                 Logger.log(`组 ${group.groupIndex} 处理出错:`, e);
             }
             Logger.log(`--- 组 ${group.groupIndex} 处理完成 ---\n`);
@@ -360,5 +355,4 @@ export async function processSampling(groupsData, config) {
     Logger.log(`  - 已生成代码片段数: ${codeSnippets.length}`);
     Logger.log(`  - 已映射组件数: ${componentMappings.length}`);
     Logger.log(`  - 组件映射详情:`, componentMappings.map((m) => `组${m.groupIndex} -> ${m.groupName}`));
-    return isSupportSampling;
 }

package/dist/build/index.js

@@ -1,6 +1,6 @@
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
-import { convertFigmaToD2CNode, generateAbsoluteHtml, getBoundingBox, getCode, chunkOptimizeCodePrompt, aggregationOptimizeCodePrompt, finalOptimizeCodePrompt, } from 'sloth-d2c-node/convert';
+import { convertFigmaToD2CNode, generateAbsoluteHtml, getBoundingBox, getCode, chunkOptimizeCodePrompt, aggregationOptimizeCodePrompt, finalOptimizeCodePrompt, noSamplingAggregationPrompt, } from 'sloth-d2c-node/convert';
 import axios from 'axios';
 import { z } from 'zod';
 import { ConfigManager, defaultConfigData, } from './config-manager/index.js';
@@ -14,6 +14,7 @@ import { Logger } from './utils/logger.js';
 import { getAvailablePort, saveImageFile, replaceImageSrc } from './utils/utils.js';
 import { processSampling, buildNestingStructure } from './core/sampling.js';
 import { buildComponentMappingPrompt, buildFullUpdatePromptForAI, buildPlaceholderPrompt } from './core/prompt-builder.js';
+import { detectClientApiSupport, clearCapabilitiesCache } from './utils/client-capabilities.js';
 // @ts-ignore
 import * as flatted from 'flatted';
 import { promises as fs } from 'fs';
@@ -89,6 +90,8 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
         const { fileKey, nodeId, depth, local, update = false } = args;
         let config = await configManager.load();
         let hasLaunchWebview = false;
+        // 检测客户端 API 支持程度
+        const clientApiSupport = await detectClientApiSupport(mcpServer);
         // 检测 VSCode 扩展是否可用
         const isVSCodePluginAvailable = await isVSCodeAvailable();
         Logger.log(`VSCode 扩展检测结果: ${isVSCodePluginAvailable ? '可用' : '不可用'}`);
@@ -113,12 +116,22 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             if (isVSCodePluginAvailable) {
                 // 优先使用 VSCode 扩展
                 Logger.log('使用 VSCode 扩展获取用户输入');
-                configDataString = await getUserInputFromVSCode({ fileKey: fileKey, nodeId: nodeId, mode: update ? 'update' : 'create' });
+                configDataString = await getUserInputFromVSCode({
+                    fileKey: fileKey,
+                    nodeId: nodeId,
+                    mode: update ? 'update' : 'create',
+                    clientApiSupport,
+                });
             }
             else {
                 // 降级到网页浏览器
                 Logger.log('VSCode 扩展不可用，降级到网页浏览器');
-                configDataString = await getUserInput({ fileKey: fileKey, nodeId: nodeId, mode: update ? 'update' : 'create' });
+                configDataString = await getUserInput({
+                    fileKey: fileKey,
+                    nodeId: nodeId,
+                    mode: update ? 'update' : 'create',
+                    clientApiSupport,
+                });
             }
             console.log('getting configDataString', configDataString);
             if (!configDataString || configDataString.trim() === '') {
@@ -186,10 +199,20 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             Logger.log(`收到网页工具调用参数:`, JSON.stringify(args, null, 2));
             let configDataString;
             if (isVSCodePluginAvailable) {
-                configDataString = await getUserInputFromVSCode({ fileKey: fileKey, nodeId: nodeId, mode: update ? 'update' : 'create' });
+                configDataString = await getUserInputFromVSCode({
+                    fileKey: fileKey,
+                    nodeId: nodeId,
+                    mode: update ? 'update' : 'create',
+                    clientApiSupport,
+                });
             }
             else {
-                configDataString = await getUserInput({ fileKey: fileKey, nodeId: nodeId, mode: update ? 'update' : 'create' });
+                configDataString = await getUserInput({
+                    fileKey: fileKey,
+                    nodeId: nodeId,
+                    mode: update ? 'update' : 'create',
+                    clientApiSupport,
+                });
             }
             console.log('收到网页提交数据', configDataString);
             if (!configDataString || configDataString.trim() === '') {
@@ -225,7 +248,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                 // 检查是否需要更新imageMap
                 try {
                     const imageNodeList = d2cNodeList?.filter((node) => ['IMG', 'ICON'].includes(node.type)) || [];
-                    const { imageMap: updatedImageMap, updated } = await updateImageMapIfNeeded(imageMap, imageNodeList, oldFileConfig, rest);
+                    const { imageMap: updatedImageMap, updated } = await updateImageMapIfNeeded(imageMap, imageNodeList, oldFileConfig, rest, local);
                     if (updated) {
                         // 更新imageMap并重新保存
                         Object.assign(imageMap, updatedImageMap);
@@ -263,8 +286,10 @@ 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;
+        const noSamplingPrompt = savedPromptSetting?.noSamplingAggregationPrompt || noSamplingAggregationPrompt;
         const codeSnippets = [];
-        let isSupportSampling = true;
+        let isSupportSampling = clientApiSupport.sampling;
+        Logger.log(`客户端 API 支持检测: sampling=${isSupportSampling}, roots=${clientApiSupport.roots}`);
         // 收集已映射的组件信息，用于在最终写入时添加提示词
         const componentMappings = [];
         // 收集所有组的组件上下文信息，用于在最终提示词中显示
@@ -280,10 +305,11 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             componentMappings,
             codeSnippets,
             componentContexts,
+            isSupportSampling,
         };
         // 深度遍历采样：针对每个分组生成 AI 相对布局树并转码
         if (groupsData && groupsData?.length > 0) {
-            isSupportSampling = await processSampling(groupsData, samplingConfig);
+            await processSampling(groupsData, samplingConfig);
             // 采样完成后，更新组件名并保存到文件
             try {
                 const groupsDataToSave = groupsData.map((group) => {
@@ -360,7 +386,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                 .map((node) => ({
                 name: node.name || 'Unknown',
             }));
-            const placeholderPrompt = buildPlaceholderPrompt(placeholders);
+            const placeholderPrompt = buildPlaceholderPrompt(placeholders, isSupportSampling);
             Logger.log(`整合采样检测到 ${placeholders.length} 个分组占位符`);
             // 获取代码
             const code = await getCode({
@@ -371,6 +397,8 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
             const replacedCode = replaceImageSrc(code, imageMap);
             // 整合采样
             try {
+                if (!isSupportSampling)
+                    throw new Error('不支持采样');
                 // 使用提示词（已包含默认值）
                 const { content: { text }, } = await mcpServer.server.createMessage({
                     messages: [
@@ -398,7 +426,6 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                 codeSnippets.unshift(pageCode);
             }
             catch (e) {
-                isSupportSampling = false;
                 Logger.log('调用分组外元素采样出错，降级到传统模式', e);
                 codeSnippets.unshift(placeholderPrompt + '\n' + replacedCode);
             }
@@ -436,7 +463,7 @@ mcpServer.tool('d2c_figma', 'Convert Figma Design File to Code', {
                     }
                     : {
                         type: 'text',
-                        text: aggregationPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || '') + componentMappingPrompt,
+                        text: noSamplingPrompt + componentMappingPrompt,
                     },
                 ...codeSnippets.map((code) => {
                     return {
@@ -1026,6 +1053,7 @@ process.on('SIGINT', async () => {
     cleanupTauri();
     cleanupWeb();
     cleanupVSCode();
+    clearCapabilitiesCache(); // 清理能力检测缓存
     Logger.cleanup(); // 清理日志连接
     await stopHttpServer();
     process.exit(0);
@@ -1044,6 +1072,7 @@ process.on('SIGTERM', async () => {
     cleanupTauri();
     cleanupWeb();
     cleanupVSCode();
+    clearCapabilitiesCache(); // 清理能力检测缓存
     Logger.cleanup(); // 清理日志连接
     await stopHttpServer();
     process.exit(0);

package/dist/build/interceptor/vscode.js

@@ -12,14 +12,14 @@ export class VSCodeCommunicator {
     /**
      * 长连接模式 - 直接等待用户输入，无超时限制
      * @param sessionId 会话ID
-     * @param payload 传递给webview的数据
+     * @param payload 传递给webview的数据（包含 clientApiSupport）
      * @returns Promise<string> 返回用户输入的数据
      */
     waitForUserInputLongConnection(sessionId, payload) {
         return new Promise((resolve, reject) => {
             const client = net.connect({ port: this.port, host: this.host }, () => {
                 console.log(`[MCP] 建立长连接等待用户输入，会话ID: ${sessionId}`);
-                // 发送长连接等待命令，包含 payload 数据
+                // 发送长连接等待命令，包含 payload 数据（clientApiSupport 已在 payload 中）
                 const requestPayload = JSON.stringify({
                     cmd: 'waitForInput',
                     sessionId,
@@ -67,7 +67,7 @@ export class VSCodeCommunicator {
     /**
      * 从VSCode获取用户输入 - 主要方法
      * 使用长连接模式，无超时限制
-     * @param payload 传输参数
+     * @param payload 传输参数（包含 clientApiSupport）
      * @returns Promise<string> 返回用户输入的数据
      */
     async getUserInputFromVSCode(payload) {
@@ -116,7 +116,7 @@ export class VSCodeCommunicator {
 const vscodeComm = new VSCodeCommunicator();
 /**
  * 从VSCode获取用户输入的便捷函数
- * @param payload 传输参数
+ * @param payload 传输参数（包含 clientApiSupport）
  * @returns Promise<string> 返回用户输入的数据
  */
 export async function getUserInputFromVSCode(payload) {

package/dist/build/server.js

@@ -31,7 +31,7 @@ const upload = multer({
     limits: { fileSize: 10 * 1024 * 1024 }, // 10MB
 });
 // 导入默认提示词
-import { chunkOptimizeCodePrompt, aggregationOptimizeCodePrompt, finalOptimizeCodePrompt, chunkOptimizeCodePromptVue, aggregationOptimizeCodePromptVue, finalOptimizeCodePromptVue, } from 'sloth-d2c-node/convert';
+import { chunkOptimizeCodePrompt, aggregationOptimizeCodePrompt, finalOptimizeCodePrompt, chunkOptimizeCodePromptVue, aggregationOptimizeCodePromptVue, finalOptimizeCodePromptVue, noSamplingAggregationPrompt, noSamplingAggregationPromptVue, } from 'sloth-d2c-node/convert';
 // 保存 HTTP 服务器实例
 let httpServer = null;
 // 保存 Socket 服务器实例
@@ -104,6 +104,7 @@ export async function loadConfig(mcpServer, configManagerInstance) {
                     aggregationOptimizePrompt: aggregationOptimizeCodePrompt,
                     finalOptimizePrompt: finalOptimizeCodePrompt,
                     componentAnalysisPrompt: componentAnalysisPrompt,
+                    noSamplingAggregationPrompt: noSamplingAggregationPrompt,
                 });
                 const reactConfigPath = configManager.getFrameworkConfigPath('react');
                 Logger.log(`已创建默认 react 配置文件: ${reactConfigPath}`);
@@ -116,6 +117,7 @@ export async function loadConfig(mcpServer, configManagerInstance) {
                     aggregationOptimizePrompt: aggregationOptimizeCodePromptVue,
                     finalOptimizePrompt: finalOptimizeCodePromptVue,
                     componentAnalysisPrompt: componentAnalysisPromptVue,
+                    noSamplingAggregationPromptVue: noSamplingAggregationPromptVue,
                 });
                 const vueConfigPath = configManager.getFrameworkConfigPath('vue');
                 Logger.log(`已创建默认 vue 配置文件: ${vueConfigPath}`);
@@ -127,6 +129,7 @@ export async function loadConfig(mcpServer, configManagerInstance) {
                     aggregationOptimizePrompt: aggregationOptimizeCodePromptVue,
                     finalOptimizePrompt: finalOptimizeCodePromptVue,
                     componentAnalysisPrompt: componentAnalysisPromptVue,
+                    noSamplingAggregationPrompt: noSamplingAggregationPromptVue,
                     ...(vueConfig || {}),
                 });
             }
@@ -347,17 +350,23 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                             chunkOptimizePrompt: chunkOptimizeCodePrompt,
                             aggregationOptimizePrompt: aggregationOptimizeCodePrompt,
                             finalOptimizePrompt: finalOptimizeCodePrompt,
+                            componentAnalysisPrompt: componentAnalysisPrompt,
+                            noSamplingAggregationPrompt: noSamplingAggregationPrompt,
                         }
                         : {
                             chunkOptimizePrompt: chunkOptimizeCodePromptVue,
                             aggregationOptimizePrompt: aggregationOptimizeCodePromptVue,
                             finalOptimizePrompt: finalOptimizeCodePromptVue,
+                            componentAnalysisPrompt: componentAnalysisPromptVue,
+                            noSamplingAggregationPrompt: noSamplingAggregationPromptVue,
                         });
                 // 如果指定了框架，加载框架配置的提示词
                 let promptSetting = {
                     chunkOptimizePrompt: savedPromptSetting?.chunkOptimizePrompt || curFrameworkDefaultConfig.chunkOptimizePrompt,
                     aggregationOptimizePrompt: savedPromptSetting?.aggregationOptimizePrompt || curFrameworkDefaultConfig.aggregationOptimizePrompt,
                     finalOptimizePrompt: savedPromptSetting?.finalOptimizePrompt || curFrameworkDefaultConfig.finalOptimizePrompt,
+                    componentAnalysisPrompt: savedPromptSetting?.componentAnalysisPrompt || curFrameworkDefaultConfig.componentAnalysisPrompt,
+                    noSamplingAggregationPrompt: savedPromptSetting?.noSamplingAggregationPrompt || curFrameworkDefaultConfig.noSamplingAggregationPrompt,
                 };
                 if (framework) {
                     // 加载框架配置
@@ -368,6 +377,8 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                             chunkOptimizePrompt: frameworkConfig.chunkOptimizePrompt || promptSetting.chunkOptimizePrompt,
                             aggregationOptimizePrompt: frameworkConfig.aggregationOptimizePrompt || promptSetting.aggregationOptimizePrompt,
                             finalOptimizePrompt: frameworkConfig.finalOptimizePrompt || promptSetting.finalOptimizePrompt,
+                            componentAnalysisPrompt: frameworkConfig.componentAnalysisPrompt || promptSetting.componentAnalysisPrompt,
+                            noSamplingAggregationPrompt: frameworkConfig.noSamplingAggregationPrompt || promptSetting.noSamplingAggregationPrompt,
                         };
                     }
                 }
@@ -395,6 +406,8 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                     chunkOptimizePrompt: chunkOptimizeCodePrompt,
                     aggregationOptimizePrompt: aggregationOptimizeCodePrompt,
                     finalOptimizePrompt: finalOptimizeCodePrompt,
+                    componentAnalysisPrompt: componentAnalysisPrompt,
+                    noSamplingAggregationPrompt: noSamplingAggregationPrompt,
                 };
                 if (framework) {
                     // 加载框架配置
@@ -405,6 +418,8 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                             chunkOptimizePrompt: frameworkConfig.chunkOptimizePrompt || promptSetting.chunkOptimizePrompt,
                             aggregationOptimizePrompt: frameworkConfig.aggregationOptimizePrompt || promptSetting.aggregationOptimizePrompt,
                             finalOptimizePrompt: frameworkConfig.finalOptimizePrompt || promptSetting.finalOptimizePrompt,
+                            componentAnalysisPrompt: frameworkConfig.componentAnalysisPrompt || promptSetting.componentAnalysisPrompt,
+                            noSamplingAggregationPrompt: frameworkConfig.noSamplingAggregationPrompt || promptSetting.noSamplingAggregationPrompt,
                         };
                     }
                 }
@@ -461,6 +476,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                 aggregationOptimizePrompt: frameworkConfig.aggregationOptimizePrompt || aggregationOptimizeCodePrompt,
                 finalOptimizePrompt: frameworkConfig.finalOptimizePrompt || finalOptimizeCodePrompt,
                 componentAnalysisPrompt: frameworkConfig.componentAnalysisPrompt || componentAnalysisPrompt,
+                noSamplingAggregationPrompt: frameworkConfig.noSamplingAggregationPrompt || noSamplingAggregationPrompt,
             };
             res.json({
                 success: true,
@@ -528,6 +544,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                 aggregationOptimizePrompt: aggregationOptimizeCodePrompt,
                 finalOptimizePrompt: finalOptimizeCodePrompt,
                 componentAnalysisPrompt: componentAnalysisPrompt,
+                noSamplingAggregationPrompt: noSamplingAggregationPrompt,
             };
             const frameworkConfig = await configManager.loadFrameworkConfig(framework);
             if (frameworkConfig && Object.keys(frameworkConfig).length > 0) {
@@ -537,6 +554,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                     aggregationOptimizePrompt: frameworkConfig.aggregationOptimizePrompt || promptSetting.aggregationOptimizePrompt,
                     finalOptimizePrompt: frameworkConfig.finalOptimizePrompt || promptSetting.finalOptimizePrompt,
                     componentAnalysisPrompt: frameworkConfig.componentAnalysisPrompt || promptSetting.componentAnalysisPrompt,
+                    noSamplingAggregationPrompt: frameworkConfig.noSamplingAggregationPrompt || promptSetting.noSamplingAggregationPrompt,
                 };
             }
             res.json({
@@ -554,6 +572,41 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
             });
         }
     });
+    // 获取框架默认提示词接口（不读取用户配置，直接返回代码中的原始默认值）
+    app.get('/getDefaultFrameworkConfig', async (req, res) => {
+        try {
+            const framework = req.query.framework;
+            if (!framework) {
+                res.status(400).json({
+                    success: false,
+                    message: '缺少必要参数: framework',
+                });
+                return;
+            }
+            // 根据框架返回对应的原始默认提示词
+            const isVue = framework.toLowerCase() === 'vue';
+            const promptSetting = {
+                chunkOptimizePrompt: isVue ? chunkOptimizeCodePromptVue : chunkOptimizeCodePrompt,
+                aggregationOptimizePrompt: isVue ? aggregationOptimizeCodePromptVue : aggregationOptimizeCodePrompt,
+                finalOptimizePrompt: isVue ? finalOptimizeCodePromptVue : finalOptimizeCodePrompt,
+                componentAnalysisPrompt: isVue ? componentAnalysisPromptVue : componentAnalysisPrompt,
+                noSamplingAggregationPrompt: isVue ? noSamplingAggregationPromptVue : noSamplingAggregationPrompt,
+            };
+            res.json({
+                success: true,
+                data: promptSetting,
+                message: '获取默认框架配置成功',
+            });
+        }
+        catch (error) {
+            Logger.error('获取默认框架配置失败:', error);
+            res.status(500).json({
+                success: false,
+                message: '获取默认框架配置失败',
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    });
     // 认证页面
     app.get('/auth-page', (req, res) => {
         try {
@@ -1102,7 +1155,6 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
         try {
             const { includePaths, excludePaths } = req.query;
             const projectPath = getProjectRoot();
-            Logger.log('扫描项目组件:', { includePaths, excludePaths });
             // 读取项目组件（从 .sloth/components.json）
             let projectComponents = [];
             const slothPath = path.join(projectPath, '.sloth', 'components.json');
@@ -1467,7 +1519,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                     }
                 }
                 Logger.log(`[analyzeChange] ${label} 图片替换完成, 替换数: ${replaceCount}, HTML长度: ${html.length} -> ${processedHtml.length}`);
-                return processedHtml
+                return (processedHtml
                     // 去除 data-id、data-name、data-type 属性（不参与 diff）
                     .replace(/\s*data-id="[^"]*"/g, '')
                     .replace(/\s*data-name="[^"]*"/g, '')
@@ -1478,7 +1530,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                     .replace(/class="([^"]*)"/g, (_, classes) => {
                     const cleaned = classes.replace(/\s+/g, ' ').trim();
                     return `class="${cleaned}"`;
-                });
+                }));
             };
             oldHtml = processHtmlForDiff(oldHtml, oldImageMap, 'old');
             newHtml = processHtmlForDiff(newHtml, newImageMap, 'new');
@@ -1534,7 +1586,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                 addedLines,
                 removedLines,
                 unchangedLines,
-                changeRatio: ((addedLines + removedLines) / (addedLines + removedLines + unchangedLines) * 100).toFixed(1),
+                changeRatio: (((addedLines + removedLines) / (addedLines + removedLines + unchangedLines)) * 100).toFixed(1),
             };
             // 5. 尝试使用 AI 总结变更（如果 MCP 服务器可用）
             let aiSummary = [];
@@ -1542,9 +1594,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                 try {
                     // 限制 diff 文本长度，避免 token 过大
                     const maxDiffLength = 48000;
-                    const truncatedDiff = diffText.length > maxDiffLength
-                        ? diffText.substring(0, maxDiffLength) + '\n... (diff 内容已截断)'
-                        : diffText;
+                    const truncatedDiff = diffText.length > maxDiffLength ? diffText.substring(0, maxDiffLength) + '\n... (diff 内容已截断)' : diffText;
                     const prompt = `
 你是一个专业的前端开发专家。请分析以下设计稿 HTML 的 diff 变更，总结出具体的变更点。
 
@@ -1579,12 +1629,14 @@ ${truncatedDiff}
                     Logger.log('=== AI 分析变更提示词 ===');
                     Logger.log(prompt);
                     Logger.log('=== 提示词结束 ===');
-                    const { content: { text } } = await mcpServer.server.createMessage({
-                        messages: [{
+                    const { content: { text }, } = await mcpServer.server.createMessage({
+                        messages: [
+                            {
                                 role: 'user',
-                                content: { type: 'text', text: prompt }
-                            }],
-                        maxTokens: 48000
+                                content: { type: 'text', text: prompt },
+                            },
+                        ],
+                        maxTokens: 48000,
                     }, { timeout: 2 * 60 * 1000 });
                     // 解析 AI 返回的 JSON
                     const jsonMatch = text.match(/```json\s*([\s\S]*?)\s*```/);
@@ -1598,13 +1650,15 @@ ${truncatedDiff}
             }
             // 6. 如果 AI 分析失败，生成基础摘要
             if (aiSummary.length === 0 && changeSummary.totalChanges > 0) {
-                aiSummary = [{
+                aiSummary = [
+                    {
                         id: 'change_1',
                         type: 'structure',
                         title: '设计稿结构变更',
                         description: `检测到 ${addedLines} 行新增内容和 ${removedLines} 行删除内容，变更比例约 ${changeSummary.changeRatio}%`,
-                        suggestedAction: '请检查新设计稿的布局和样式变化，更新相应的代码'
-                    }];
+                        suggestedAction: '请检查新设计稿的布局和样式变化，更新相应的代码',
+                    },
+                ];
             }
             Logger.log(`变更分析完成: ${aiSummary.length} 个变更点`);
             res.json({
@@ -1687,7 +1741,11 @@ export async function getUserInput(payload) {
     return new Promise(async (resolve, reject) => {
         const token = uuidv4();
         const port = getPort();
-        const authUrl = `http://localhost:${port}/auth-page?token=${token}&fileKey=${payload.fileKey}&nodeId=${payload.nodeId}&mode=${payload.mode}`;
+        // 构建 URL，从 payload 中提取 clientApiSupport
+        const clientApiSupport = payload.clientApiSupport;
+        const supportSampling = clientApiSupport?.sampling ? '1' : '0';
+        const supportRoots = clientApiSupport?.roots ? '1' : '0';
+        const authUrl = `http://localhost:${port}/auth-page?token=${token}&fileKey=${payload.fileKey}&nodeId=${payload.nodeId}&mode=${payload.mode}&supportSampling=${supportSampling}&supportRoots=${supportRoots}`;
         Logger.log('authUrl', authUrl);
         // 判断是主进程还是子进程
         const isMainProcess = httpServer !== null;

package/dist/build/utils/client-capabilities.js

@@ -0,0 +1,143 @@
+import { Logger } from './logger.js';
+// 缓存检测结果，避免重复检测
+let cachedCapabilities = null;
+/**
+ * 检测 MCP Client 的 API 支持程度
+ * @param mcpServer MCP 服务器实例
+ * @param forceRecheck 是否强制重新检测（忽略缓存）
+ * @returns ClientApiSupport 对象
+ */
+export async function detectClientApiSupport(mcpServer, forceRecheck = false) {
+    // 使用缓存
+    if (cachedCapabilities && !forceRecheck) {
+        return cachedCapabilities;
+    }
+    const support = {
+        sampling: false,
+        roots: false,
+    };
+    try {
+        // 方法1: 通过 capabilities 协商机制检测
+        // MCP SDK 在连接时会进行能力协商
+        const serverInstance = mcpServer.server;
+        // 尝试获取客户端能力
+        if (typeof serverInstance.getClientCapabilities === 'function') {
+            const clientCapabilities = serverInstance.getClientCapabilities();
+            Logger.log('客户端能力:', JSON.stringify(clientCapabilities, null, 2));
+            if (clientCapabilities) {
+                // 检查 sampling 能力
+                support.sampling = clientCapabilities.sampling !== undefined;
+                // 检查 roots 能力
+                support.roots = clientCapabilities.roots !== undefined;
+            }
+        }
+        // 方法2: 如果 capabilities 检测不到，通过 try-catch 探测
+        // 检测 roots 支持
+        if (!support.roots) {
+            support.roots = await probeRootsSupport(mcpServer);
+        }
+        // 检测 sampling 支持（仅当 capabilities 未声明时才探测）
+        if (!support.sampling) {
+            support.sampling = await probeSamplingSupport(mcpServer);
+        }
+    }
+    catch (error) {
+        Logger.log('检测客户端能力时出错:', error);
+    }
+    // 缓存结果
+    cachedCapabilities = support;
+    Logger.log('MCP Client API 支持检测结果:', support);
+    return support;
+}
+/**
+ * 探测 listRoots API 支持
+ */
+async function probeRootsSupport(mcpServer) {
+    try {
+        const result = await mcpServer.server.listRoots();
+        // 如果调用成功，说明支持
+        return result !== undefined;
+    }
+    catch (error) {
+        // 检查错误类型
+        const errorMessage = error?.message || String(error);
+        const errorCode = error?.code;
+        // Method not found 或明确不支持的错误
+        if (errorCode === -32601 ||
+            errorMessage.includes('not supported') ||
+            errorMessage.includes('not implemented') ||
+            errorMessage.includes('Method not found')) {
+            return false;
+        }
+        // 其他错误（如超时、网络问题）可能是暂时性的，保守认为支持
+        Logger.log('探测 listRoots 时出现非致命错误:', errorMessage);
+        return false;
+    }
+}
+/**
+ * 探测 createMessage (sampling) API 支持
+ * 注意：这个探测可能会产生实际的 API 调用，应谨慎使用
+ */
+async function probeSamplingSupport(mcpServer) {
+    try {
+        // 使用最小化的测试请求
+        // 注意：某些客户端可能会实际执行这个请求，所以使用非常小的 maxTokens
+        await mcpServer.server.createMessage({
+            messages: [
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: 'ping', // 最小化测试消息
+                    },
+                },
+            ],
+            maxTokens: 1, // 最小化 token 消耗
+        }, {
+            timeout: 10000, // 10秒超时
+        });
+        // 如果调用成功，说明支持
+        return true;
+    }
+    catch (error) {
+        const errorMessage = error?.message || String(error);
+        const errorCode = error?.code;
+        // Method not found 或明确不支持的错误
+        if (errorCode === -32601 ||
+            errorMessage.includes('not supported') ||
+            errorMessage.includes('not implemented') ||
+            errorMessage.includes('Method not found') ||
+            errorMessage.includes('Sampling not supported')) {
+            Logger.log('客户端不支持 sampling API');
+            return false;
+        }
+        // 超时或其他错误，可能是支持但调用失败
+        // 保守处理：认为不支持，让业务逻辑走降级路径
+        Logger.log('探测 sampling 时出现错误:', errorMessage);
+        return false;
+    }
+}
+/**
+ * 清除缓存的能力检测结果
+ * 在重新连接时应调用此方法
+ */
+export function clearCapabilitiesCache() {
+    cachedCapabilities = null;
+    Logger.log('已清除客户端能力缓存');
+}
+/**
+ * 检查是否支持 sampling
+ * 便捷方法，直接返回 boolean
+ */
+export async function isSamplingSupported(mcpServer) {
+    const support = await detectClientApiSupport(mcpServer);
+    return support.sampling;
+}
+/**
+ * 检查是否支持 roots
+ * 便捷方法，直接返回 boolean
+ */
+export async function isRootsSupported(mcpServer) {
+    const support = await detectClientApiSupport(mcpServer);
+    return support.roots;
+}