sloth-d2c-mcp 1.0.4-beta70 → 1.0.4-beta71

package/dist/build/server.js

@@ -11,10 +11,20 @@ import * as path from 'path';
 import { fileURLToPath } from 'url';
 import { v4 as uuidv4 } from 'uuid';
 import open from 'open';
-import FileManager from './utils/file-manager.js';
+import { fileManager } from './index.js';
 import * as flatted from 'flatted';
+import { ComponentMappingSystem } from './component-mapping/index.js';
+import multer from 'multer';
+import { ImageMatcher } from './utils/image-matcher.js';
+import { initOpenCV } from './utils/opencv-loader.js';
+// 配置 multer 用于文件上传
+const storage = multer.memoryStorage();
+const upload = multer({
+    storage,
+    limits: { fileSize: 10 * 1024 * 1024 }, // 10MB
+});
 // 导入默认提示词
-import { chunkOptimizeCodePrompt, aggregationOptimizeCodePrompt, finalOptimizeCodePrompt } from 'sloth-d2c-node/convert';
+import { chunkOptimizeCodePrompt, aggregationOptimizeCodePrompt, finalOptimizeCodePrompt, chunkOptimizeCodePromptVue, aggregationOptimizeCodePromptVue, finalOptimizeCodePromptVue, } from 'sloth-d2c-node/convert';
 // 保存 HTTP 服务器实例
 let httpServer = null;
 // 管理所有活跃的传输对象，按 sessionId 分类
@@ -26,6 +36,7 @@ const transports = {
 const pendingRequests = new Map(); // 等待中的认证请求
 let configStorage = {}; // 配置缓存
 let configManager = null; // 配置管理器实例
+let mappingSystem = null; // 组件映射系统实例
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 // 获取端口号
@@ -40,10 +51,11 @@ export async function loadConfig(mcpServer, configManagerInstance) {
             // 检查配置文件是否存在
             const configExists = await configManager.exists();
             Logger.log(`配置文件存在: ${configExists ? '是' : '否'}`);
+            let config = {};
             if (configExists) {
                 // 如果配置文件存在，加载并显示配置信息
                 try {
-                    const config = await configManager.load();
+                    config = await configManager.load();
                     mcpServer.setConfig(config.mcp);
                     Logger.log(`当前配置内容: ${JSON.stringify(config, null, 2)}`);
                 }
@@ -51,6 +63,49 @@ export async function loadConfig(mcpServer, configManagerInstance) {
                     Logger.warn(`读取配置文件失败: ${error}`);
                 }
             }
+            // 初始化默认框架配置
+            if (!config.frameworks || config.frameworks.length === 0) {
+                Logger.log('初始化默认框架配置...');
+                if (!config.frameworks) {
+                    config.frameworks = [];
+                }
+                if (typeof config.frameworks[0] === 'string') {
+                    config.frameworks = config.frameworks.map((f) => {
+                        return {
+                            label: f.charAt(0).toUpperCase() + f.slice(1),
+                            value: f,
+                            isCustom: f !== 'react' && f !== 'vue', // todo: 暂时兼容，仅 react 是默认框架，若新增框架需调整
+                        };
+                    });
+                }
+                if (!config.frameworks.find((fw) => fw.value === 'react') || !config.frameworks.find((fw) => fw.value === 'vue')) {
+                    const newFrameworks = config.frameworks.filter((fw) => fw.value !== 'react' || fw.value !== 'vue');
+                    config.frameworks = [{ value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }, ...newFrameworks];
+                    await configManager.save(config);
+                }
+            }
+            // 检查 react.json 是否存在，如果不存在则创建
+            const reactConfigExists = await configManager.frameworkConfigExists('react');
+            if (!reactConfigExists) {
+                await configManager.saveFrameworkConfig('react', {
+                    chunkOptimizePrompt: chunkOptimizeCodePrompt,
+                    aggregationOptimizePrompt: aggregationOptimizeCodePrompt,
+                    finalOptimizePrompt: finalOptimizeCodePrompt,
+                });
+                const reactConfigPath = configManager.getFrameworkConfigPath('react');
+                Logger.log(`已创建默认 react 配置文件: ${reactConfigPath}`);
+            }
+            // 检查 vue.json 是否存在，如果不存在则创建
+            const vueConfigExists = await configManager.frameworkConfigExists('vue');
+            if (!vueConfigExists) {
+                await configManager.saveFrameworkConfig('vue', {
+                    chunkOptimizePrompt: chunkOptimizeCodePromptVue,
+                    aggregationOptimizePrompt: aggregationOptimizeCodePromptVue,
+                    finalOptimizePrompt: finalOptimizeCodePromptVue,
+                });
+                const vueConfigPath = configManager.getFrameworkConfigPath('vue');
+                Logger.log(`已创建默认 vue 配置文件: ${vueConfigPath}`);
+            }
         }
         catch (error) {
             Logger.error(`获取配置信息时出错: ${error}`);
@@ -61,6 +116,15 @@ export async function loadConfig(mcpServer, configManagerInstance) {
 export async function startHttpServer(port = PORT, mcpServer, configManagerInstance, isWeb) {
     const app = express();
     PORT = port;
+    // 初始化 OpenCV
+    try {
+        await initOpenCV();
+        Logger.log('✅ OpenCV.js 初始化成功');
+    }
+    catch (error) {
+        Logger.error('❌ OpenCV.js 初始化失败:', error);
+        Logger.warn('图像匹配功能将不可用，但不影响其他功能');
+    }
     // 存储配置管理器实例（如果提供）
     loadConfig(mcpServer, configManagerInstance);
     // if (configManagerInstance) {
@@ -90,10 +154,11 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
     app.use('/mcp', express.json());
     app.use('/submit', express.json());
     app.use('/saveNodes', express.json({
-        limit: '100mb'
+        limit: '100mb',
     }));
     // 为认证端点添加中间件 - 需要同时支持 JSON 和表单数据
     app.use(express.urlencoded({ extended: true }));
+    app.use('/saveGlobalConfig', express.json());
     // 设置跨域
     app.use((req, res, next) => {
         res.header('Access-Control-Allow-Origin', '*');
@@ -234,20 +299,36 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
         try {
             const fileKey = req.query.fileKey;
             const nodeId = req.query.nodeId;
+            const framework = req.query.framework;
             if (fileKey) {
                 // 如果提供了 fileKey，返回该 fileKey 的特定配置
                 const globalConfig = await configManager.load();
-                const fileConfig = globalConfig.fileConfigs?.[fileKey] || {};
+                // const fileConfig = globalConfig.fileConfigs?.[fileKey] || {}
+                const fileConfig = (await fileManager.loadConfigSetting(fileKey, nodeId)) || {};
                 // 从 fileManager 按 nodeId 加载 groupsData 和 promptSetting
-                const fileManager = new FileManager('d2c-mcp');
+                // const fileManager = new FileManager('d2c-mcp')
                 const groupsData = await fileManager.loadGroupsData(fileKey, nodeId);
                 const savedPromptSetting = await fileManager.loadPromptSetting(fileKey, nodeId);
-                // 合并用户自定义提示词和默认提示词
-                const promptSetting = {
+                // 如果指定了框架，加载框架配置的提示词
+                let promptSetting = {
                     chunkOptimizePrompt: savedPromptSetting?.chunkOptimizePrompt || chunkOptimizeCodePrompt,
                     aggregationOptimizePrompt: savedPromptSetting?.aggregationOptimizePrompt || aggregationOptimizeCodePrompt,
                     finalOptimizePrompt: savedPromptSetting?.finalOptimizePrompt || finalOptimizeCodePrompt,
                 };
+                if (framework) {
+                    // 加载框架配置
+                    const frameworkConfig = await configManager.loadFrameworkConfig(framework);
+                    if (frameworkConfig && Object.keys(frameworkConfig).length > 0) {
+                        // 框架配置优先级更高，但如果框架配置为空，则使用已保存的或默认的
+                        promptSetting = {
+                            chunkOptimizePrompt: frameworkConfig.chunkOptimizePrompt || promptSetting.chunkOptimizePrompt,
+                            aggregationOptimizePrompt: frameworkConfig.aggregationOptimizePrompt || promptSetting.aggregationOptimizePrompt,
+                            finalOptimizePrompt: frameworkConfig.finalOptimizePrompt || promptSetting.finalOptimizePrompt,
+                        };
+                    }
+                }
+                // 获取框架列表
+                const frameworks = await configManager.getFrameworks();
                 res.json({
                     success: true,
                     data: {
@@ -255,6 +336,8 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                         convertSetting: fileConfig.convertSetting,
                         imageSetting: fileConfig.imageSetting,
                         promptSetting: promptSetting,
+                        frameworks: frameworks,
+                        defaultFramework: globalConfig.defaultFramework || 'react',
                         fileKey: fileKey,
                         groupsData: groupsData,
                     },
@@ -265,12 +348,26 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                 if (await configManager.exists()) {
                     configStorage = await configManager.load();
                 }
-                // 返回默认提示词
-                const promptSetting = {
+                // 如果指定了框架，加载框架配置的提示词
+                let promptSetting = {
                     chunkOptimizePrompt: chunkOptimizeCodePrompt,
                     aggregationOptimizePrompt: aggregationOptimizeCodePrompt,
                     finalOptimizePrompt: finalOptimizeCodePrompt,
                 };
+                if (framework) {
+                    // 加载框架配置
+                    const frameworkConfig = await configManager.loadFrameworkConfig(framework);
+                    if (frameworkConfig && Object.keys(frameworkConfig).length > 0) {
+                        // 框架配置优先级更高
+                        promptSetting = {
+                            chunkOptimizePrompt: frameworkConfig.chunkOptimizePrompt || promptSetting.chunkOptimizePrompt,
+                            aggregationOptimizePrompt: frameworkConfig.aggregationOptimizePrompt || promptSetting.aggregationOptimizePrompt,
+                            finalOptimizePrompt: frameworkConfig.finalOptimizePrompt || promptSetting.finalOptimizePrompt,
+                        };
+                    }
+                }
+                // 获取框架列表
+                const frameworks = await configManager.getFrameworks();
                 res.json({
                     success: true,
                     data: {
@@ -278,6 +375,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                         convertSetting: configStorage.convertSetting || {},
                         imageSetting: configStorage.imageSetting || {},
                         promptSetting: promptSetting,
+                        frameworks: frameworks,
                     },
                 });
             }
@@ -293,13 +391,117 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
     });
     app.get('/getHtml', async (req, res) => {
         // 加载现有配置
-        const fileManager = new FileManager('d2c-mcp');
+        // const fileManager = new FileManager('d2c-mcp')
         const html = await fileManager.loadFile(req.query.fileKey, req.query.nodeId, 'absolute.html');
         res.json({
             success: true,
             data: html,
         });
     });
+    // 获取全局配置接口
+    app.get('/getGlobalConfig', async (req, res) => {
+        try {
+            const framework = req.query.framework;
+            const globalConfig = await configManager.load();
+            let frameworks = (await configManager.getFrameworks()) || [
+                { value: 'react', label: 'React' },
+                { value: 'vue', label: 'Vue' },
+            ];
+            const defaultFramework = globalConfig?.defaultFramework || 'react';
+            let promptSetting = {};
+            const fw = frameworks.find((f) => f.value === framework) ? framework : defaultFramework;
+            const frameworkConfig = await configManager.loadFrameworkConfig(fw);
+            promptSetting[fw] = frameworkConfig;
+            res.json({
+                success: true,
+                data: {
+                    frameworks,
+                    defaultFramework,
+                    promptSetting,
+                },
+                message: '获取成功',
+            });
+        }
+        catch (error) {
+            Logger.error('获取全局配置失败:', error);
+            res.status(500).json({
+                success: false,
+                message: '获取全局配置失败',
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    });
+    // 保存全局配置接口
+    app.post('/saveGlobalConfig', async (req, res) => {
+        try {
+            const { token, value } = req.body;
+            if (!token || !value) {
+                res.status(400).json({
+                    success: false,
+                    message: '请求体中缺少 token 或 value',
+                });
+                return;
+            }
+            const { frameworks, defaultFramework, promptSetting: promptSettingMap } = value;
+            const globalConfig = await configManager.load();
+            globalConfig.frameworks = frameworks;
+            globalConfig.defaultFramework = defaultFramework;
+            await Promise.all(Object.entries(promptSettingMap).map(([key, value]) => configManager.saveFrameworkConfig(key, value)));
+            await configManager.save(globalConfig);
+            res.json({
+                success: true,
+                message: '保存全局配置成功',
+            });
+        }
+        catch (error) {
+            Logger.error('保存全局配置失败:', error);
+            res.status(500).json({
+                success: false,
+                message: '保存全局配置失败',
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    });
+    // 获取框架配置接口
+    app.get('/getFrameworkConfig', async (req, res) => {
+        try {
+            const framework = req.query.framework;
+            if (!framework) {
+                res.status(400).json({
+                    success: false,
+                    message: '缺少必要参数: framework',
+                });
+                return;
+            }
+            let promptSetting = {
+                chunkOptimizePrompt: chunkOptimizeCodePrompt,
+                aggregationOptimizePrompt: aggregationOptimizeCodePrompt,
+                finalOptimizePrompt: finalOptimizeCodePrompt,
+            };
+            const frameworkConfig = await configManager.loadFrameworkConfig(framework);
+            if (frameworkConfig && Object.keys(frameworkConfig).length > 0) {
+                // 框架配置优先级更高
+                promptSetting = {
+                    chunkOptimizePrompt: frameworkConfig.chunkOptimizePrompt,
+                    aggregationOptimizePrompt: frameworkConfig.aggregationOptimizePrompt,
+                    finalOptimizePrompt: frameworkConfig.finalOptimizePrompt,
+                };
+            }
+            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 {
@@ -372,7 +574,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                 Logger.log(`已保存 fileKey "${fileKey}" 的配置:`, value);
             }
             // 使用 fileManager 按 nodeId 保存 groupsData 和 promptSetting
-            const fileManager = new FileManager('d2c-mcp');
+            // const fileManager = new FileManager('d2c-mcp')
             if (fileKey && value.groupsData && Array.isArray(value.groupsData)) {
                 await fileManager.saveGroupsData(fileKey, nodeId, value.groupsData);
                 Logger.log(`已保存 groupsData 到 fileKey "${fileKey}", nodeId "${nodeId}":`, value.groupsData.length, '个分组');
@@ -414,9 +616,9 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                 });
                 return;
             }
-            const fileManager = new FileManager('d2c-mcp');
+            // const fileManager = new FileManager('d2c-mcp')
             // 保存节点列表
-            await fileManager.saveFile(fileKey, nodeId, 'nodeList.json', (nodeList));
+            await fileManager.saveFile(fileKey, nodeId, 'nodeList.json', nodeList);
             // 保存图片映射
             if (imageMap) {
                 await fileManager.saveFile(fileKey, nodeId, 'imageMap.json', flatted.stringify(imageMap));
@@ -450,6 +652,297 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
             message: '日志重连已启动',
         });
     });
+    // ==================== 组件映射相关接口 ====================
+    /**
+     * 获取项目根目录
+     */
+    function getProjectRoot() {
+        try {
+            const projectPath = fileManager.getWorkspaceRoot();
+            return projectPath || './';
+        }
+        catch (error) {
+            Logger.warn('获取根目录时出错，使用默认路径:', error);
+            return './';
+        }
+    }
+    /**
+     * 获取或创建映射系统实例
+     */
+    async function getMappingSystem() {
+        if (!mappingSystem) {
+            const projectPath = getProjectRoot();
+            mappingSystem = new ComponentMappingSystem(projectPath);
+            await mappingSystem.initialize();
+            Logger.log('组件映射系统已初始化，项目路径:', projectPath);
+        }
+        return mappingSystem;
+    }
+    // 扫描项目组件接口（同时返回项目组件和外部依赖组件）
+    app.get('/scanComponents', async (req, res) => {
+        try {
+            const { platform, includePaths, excludePaths } = req.query;
+            if (!platform) {
+                res.status(400).json({
+                    success: false,
+                    message: '缺少必要参数: platform',
+                });
+                return;
+            }
+            Logger.log('扫描项目组件:', { platform, includePaths, excludePaths });
+            const system = await getMappingSystem();
+            const adapter = system.adapterManager.getAdapter(platform);
+            if (!adapter) {
+                res.status(400).json({
+                    success: false,
+                    message: `不支持的平台: ${platform}`,
+                });
+                return;
+            }
+            const projectPath = getProjectRoot();
+            Logger.log('开始扫描，项目路径:', projectPath);
+            // 扫描项目组件
+            const components = await adapter.scanComponents(projectPath, {
+                includePaths,
+                excludePaths,
+            });
+            Logger.log(`扫描完成，发现 ${components.length} 个项目组件`);
+            // 将绝对路径转换为相对路径
+            const normalizePath = (filePath) => {
+                if (!filePath || !projectPath)
+                    return filePath;
+                try {
+                    const path = require('path');
+                    const relativePath = path.relative(projectPath, filePath);
+                    // 统一使用正斜杠
+                    return relativePath.replace(/\\/g, '/');
+                }
+                catch {
+                    return filePath;
+                }
+            };
+            const projectComponents = components.map((c) => ({
+                id: c.id,
+                name: c.name,
+                type: c.type,
+                path: normalizePath(c.path),
+                props: c.props.map((p) => ({
+                    name: p.name,
+                    type: p.type,
+                    required: p.required,
+                })),
+                framework: c.metadata.framework,
+                description: c.metadata.description,
+                source: 'project', // 标记为项目组件
+                importType: c.metadata.importType || 'default', // 导入类型
+                signature: c.metadata.signature,
+            }));
+            // 读取外部依赖组件（从 .sloth/components.json）
+            let externalComponents = [];
+            const slothPath = path.join(projectPath, '.sloth', 'components.json');
+            const fs = await import('fs/promises');
+            try {
+                await fs.access(slothPath);
+                // 文件存在，读取内容
+                const fileContent = await fs.readFile(slothPath, 'utf-8');
+                const componentsData = JSON.parse(fileContent);
+                // 验证数据结构
+                if (Array.isArray(componentsData)) {
+                    // 验证每个组件的基本字段
+                    externalComponents = componentsData
+                        .filter((comp) => comp && comp.id && comp.name && comp.path)
+                        .map((c) => ({
+                        id: c.id,
+                        name: c.name,
+                        type: c.type || 'custom',
+                        path: c.path,
+                        props: (c.props || []).map((p) => ({
+                            name: p.name,
+                            type: p.type || 'any',
+                            required: p.required || false,
+                        })),
+                        framework: c.framework || c.metadata?.framework || 'React',
+                        description: c.description || c.metadata?.description,
+                        source: 'external', // 标记为外部依赖组件
+                        lib: c.lib, // 业务库名称
+                        importType: c.importType || c.metadata?.importType || 'named', // 导入类型，外部组件默认为具名导入
+                    }));
+                    Logger.log(`从 .sloth/components.json 加载了 ${externalComponents.length} 个外部组件`);
+                }
+                else {
+                    Logger.warn('.sloth/components.json 格式错误：应为组件数组');
+                }
+            }
+            catch (error) {
+                // 文件不存在或读取失败，忽略错误，继续返回项目组件
+                if (error.code !== 'ENOENT') {
+                    Logger.warn('读取外部依赖组件失败:', error.message);
+                }
+            }
+            res.json({
+                success: true,
+                data: {
+                    total: projectComponents.length + externalComponents.length,
+                    platform,
+                    projectPath,
+                    projectComponents, // 项目组件
+                    externalComponents, // 外部依赖组件
+                },
+            });
+        }
+        catch (error) {
+            Logger.error('扫描项目组件失败:', error);
+            res.status(500).json({
+                success: false,
+                message: '扫描项目组件失败',
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    });
+    // 建议组件映射接口（基于历史组件截图匹配）
+    app.post('/suggestMappings', upload.single('currentScreenshot'), async (req, res) => {
+        try {
+            const { fileKey, nodeId, threshold = '0.8' } = req.body;
+            const currentScreenshotFile = req.file;
+            if (!currentScreenshotFile || !fileKey) {
+                res.status(400).json({
+                    success: false,
+                    message: '缺少必要参数: currentScreenshot, fileKey',
+                });
+                return;
+            }
+            Logger.log(`开始生成建议组件映射: fileKey=${fileKey}, nodeId=${nodeId}, threshold=${threshold}`);
+            // 检查当前 fileKey + nodeId 是否已经有 groupsData
+            const currentGroupsData = await fileManager.loadGroupsData(fileKey, nodeId);
+            if (currentGroupsData && currentGroupsData.length > 0) {
+                Logger.log(`当前设计稿已有 ${currentGroupsData.length} 个分组，跳过自动建议`);
+                res.json({
+                    success: true,
+                    data: {
+                        suggestions: [],
+                        reason: 'current_has_groups',
+                        message: '当前设计稿已有分组数据，不执行自动建议',
+                    },
+                });
+                return;
+            }
+            Logger.log('当前设计稿无分组数据，继续执行自动建议');
+            // 保存当前设计稿截图到临时文件
+            const tempDir = path.join(fileManager.getBaseDir(), 'temp');
+            await fs.promises.mkdir(tempDir, { recursive: true });
+            const currentScreenshotPath = path.join(tempDir, `suggest_${Date.now()}.png`);
+            await fs.promises.writeFile(currentScreenshotPath, currentScreenshotFile.buffer);
+            // 加载整个项目所有 fileKey 的所有 groupsData（跨文件匹配）
+            const allProjectGroupsData = await fileManager.loadAllProjectGroupsData();
+            if (!allProjectGroupsData || allProjectGroupsData.length === 0) {
+                Logger.log('未找到历史分组数据，无法生成建议');
+                await fs.promises.unlink(currentScreenshotPath).catch(() => { });
+                res.json({
+                    success: true,
+                    data: { suggestions: [] },
+                });
+                return;
+            }
+            Logger.log(`从整个项目加载了 ${allProjectGroupsData.length} 个节点的历史数据`);
+            const matchTasks = [];
+            for (const { fileKey: storedFileKey, nodeId: storedNodeId, groups } of allProjectGroupsData) {
+                const normalizedNodeId = storedNodeId === 'root' ? undefined : storedNodeId;
+                for (const group of groups) {
+                    // 只处理标记的分组
+                    if (!group.marked || !group.screenshot)
+                        continue;
+                    const screenshotPath = fileManager.getScreenshotPath(storedFileKey, normalizedNodeId, group.screenshot.hash);
+                    const exists = await fileManager.screenshotExists(storedFileKey, normalizedNodeId, group.screenshot.hash);
+                    if (!exists)
+                        continue;
+                    matchTasks.push({
+                        path: screenshotPath,
+                        groupData: {
+                            fileKey: storedFileKey,
+                            nodeId: normalizedNodeId ?? 'root',
+                            componentMapping: group.componentMapping,
+                            userPrompt: group.userPrompt,
+                            originalRect: group.rect,
+                            componentName: group.componentName, // 传递组件名称
+                            screenshot: group.screenshot, // 传递截图信息（包含 hash）
+                        },
+                    });
+                }
+            }
+            if (matchTasks.length === 0) {
+                Logger.log('没有可用的历史截图，返回空建议');
+                await fs.promises.unlink(currentScreenshotPath).catch(() => { });
+                res.json({
+                    success: true,
+                    data: { suggestions: [] },
+                });
+                return;
+            }
+            Logger.log(`开始匹配，共 ${matchTasks.length} 个历史组件截图`);
+            const matcher = new ImageMatcher();
+            const matches = await matcher.batchMatch(currentScreenshotPath, matchTasks, parseFloat(threshold));
+            Logger.log(`匹配完成，找到 ${matches.length} 个相似组件`);
+            matches.forEach((match, index) => {
+                Logger.log(`  匹配 ${index + 1}: 来源 fileKey=${match.groupData?.fileKey}, nodeId=${match.groupData?.nodeId}, 组件=${match.groupData?.componentName || 'N/A'}, 相似度=${Math.round(match.confidence * 100)}%`);
+            });
+            await fs.promises.unlink(currentScreenshotPath).catch(() => { });
+            res.json({
+                success: true,
+                data: {
+                    suggestions: matches.map((match) => ({
+                        confidence: Math.round(match.confidence * 100) / 100,
+                        position: match.position,
+                        componentMapping: match.groupData?.componentMapping,
+                        userPrompt: match.groupData?.userPrompt,
+                        originalRect: match.groupData?.originalRect,
+                        fileKey: match.groupData?.fileKey,
+                        nodeId: match.groupData?.nodeId,
+                        componentName: match.groupData?.componentName,
+                        screenshotHash: match.groupData?.screenshot?.hash, // 返回截图 hash，用于匹配组件 signature
+                    })),
+                },
+            });
+        }
+        catch (error) {
+            Logger.error('建议组件映射失败:', error);
+            res.status(500).json({
+                success: false,
+                message: '建议组件映射失败',
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    });
+    // 上传截图接口
+    app.post('/uploadScreenshot', upload.single('file'), async (req, res) => {
+        try {
+            const { fileKey, nodeId, hash } = req.body;
+            const file = req.file;
+            if (!file || !fileKey || !nodeId || !hash) {
+                res.status(400).json({
+                    success: false,
+                    message: '缺少必要参数: file, fileKey, nodeId, hash',
+                });
+                return;
+            }
+            Logger.log(`接收到截图上传请求: fileKey=${fileKey}, nodeId=${nodeId}, hash=${hash}`);
+            // 保存截图到 .sloth/{fileKey}/{nodeId}/screenshots/{hash}.png
+            await fileManager.saveScreenshot(fileKey, nodeId, hash, file.buffer);
+            Logger.log(`截图上传成功: ${hash}.png`);
+            res.json({
+                success: true,
+                message: '截图上传成功',
+                hash,
+            });
+        }
+        catch (error) {
+            Logger.error('上传截图失败:', error);
+            res.status(500).json({
+                success: false,
+                message: '上传截图失败',
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    });
     // 启动 HTTP 服务器，监听端口
     httpServer = app.listen(port, () => {
         Logger.log(`HTTP server listening on port ${port}`);
@@ -458,6 +951,9 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
         Logger.log(`StreamableHTTP endpoint available at http://localhost:${port}/mcp`);
         Logger.log(`Auth endpoints available at http://localhost:${port}/auth-page`);
         Logger.log(`MCP Config at http://localhost:${port}/getConfig`);
+        Logger.log(`Global Config at http://localhost:${port}/getGlobalConfig`);
+        Logger.log(`Save Global Config endpoint at http://localhost:${port}/saveGlobalConfig`);
+        Logger.log(`Framework Config at http://localhost:${port}/getFrameworkConfig`);
         Logger.log(`Save Nodes endpoint available at http://localhost:${port}/saveNodes`);
         Logger.log(`Logging reconnect endpoint available at http://localhost:${port}/reconnect-logging`);
     });