sloth-d2c-mcp 1.0.4-beta70 → 1.0.4-beta72

package/dist/build/server.js

@@ -11,10 +11,22 @@ 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';
+import { extractJson } from './utils/extract.js';
+import { componentAnalysisPrompt, componentAnalysisPromptVue } from 'sloth-d2c-node/convert';
+// 配置 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 +38,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 +53,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 +65,62 @@ 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,
+                    componentAnalysisPrompt: componentAnalysisPrompt,
+                });
+                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,
+                    componentAnalysisPrompt: componentAnalysisPromptVue,
+                });
+                const vueConfigPath = configManager.getFrameworkConfigPath('vue');
+                Logger.log(`已创建默认 vue 配置文件: ${vueConfigPath}`);
+            }
+            else {
+                const vueConfig = await configManager.loadFrameworkConfig('vue');
+                if (!vueConfig || Object.keys(vueConfig).length < 3) {
+                    await configManager.saveFrameworkConfig('vue', {
+                        chunkOptimizePrompt: chunkOptimizeCodePromptVue,
+                        aggregationOptimizePrompt: aggregationOptimizeCodePromptVue,
+                        finalOptimizePrompt: finalOptimizeCodePromptVue,
+                        ...(vueConfig || {}),
+                    });
+                }
+            }
         }
         catch (error) {
             Logger.error(`获取配置信息时出错: ${error}`);
@@ -61,6 +131,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 +169,13 @@ 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('/analyzeComponents', express.json());
+    app.use('/saveComponents', express.json());
     // 设置跨域
     app.use((req, res, next) => {
         res.header('Access-Control-Allow-Origin', '*');
@@ -234,20 +316,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 +353,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 +365,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 +392,7 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
                         convertSetting: configStorage.convertSetting || {},
                         imageSetting: configStorage.imageSetting || {},
                         promptSetting: promptSetting,
+                        frameworks: frameworks,
                     },
                 });
             }
@@ -293,13 +408,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 +591,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 +633,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 +669,577 @@ export async function startHttpServer(port = PORT, mcpServer, configManagerInsta
             message: '日志重连已启动',
         });
     });
+    // ==================== 组件映射相关接口 ====================
+    /**
+     * 获取项目根目录
+     */
+    function getProjectRoot() {
+        try {
+            const projectPath = fileManager.getWorkspaceRoot();
+            return projectPath || './';
+        }
+        catch (error) {
+            Logger.warn('获取根目录时出错，使用默认路径:', error);
+            return './';
+        }
+    }
+    /**
+     * 获取项目文件树
+     */
+    app.get('/getProjectFiles', async (req, res) => {
+        try {
+            const { directory = '' } = req.query;
+            const projectPath = getProjectRoot();
+            const targetPath = path.join(projectPath, directory);
+            Logger.log(`获取项目文件树: ${targetPath}`);
+            // 排除的文件扩展名（静态资源和配置文件）
+            const excludeExtensions = [
+                // 图片
+                '.png',
+                '.jpg',
+                '.jpeg',
+                '.gif',
+                '.svg',
+                '.ico',
+                '.webp',
+                '.bmp',
+                // 视频/音频
+                '.mp4',
+                '.avi',
+                '.mov',
+                '.mp3',
+                '.wav',
+                // 字体
+                '.ttf',
+                '.woff',
+                '.woff2',
+                '.eot',
+                // 配置文件
+                '.json',
+                '.lock',
+                '.yaml',
+                '.yml',
+                '.toml',
+                // 文档
+                '.md',
+                '.txt',
+                '.pdf',
+                '.doc',
+                '.docx',
+                // 其他
+                '.zip',
+                '.tar',
+                '.gz',
+                '.rar',
+                '.map',
+                '.d.ts.map',
+            ];
+            // 递归读取文件树
+            const buildFileTree = async (dirPath, relativePath = '') => {
+                const entries = await fs.promises.readdir(dirPath, { withFileTypes: true });
+                const files = [];
+                for (const entry of entries) {
+                    // 排除特殊目录
+                    const excludeDirs = ['node_modules', 'dist', 'build', '.git', '.next', 'coverage', '.sloth', 'public', 'static', 'assets'];
+                    if (excludeDirs.includes(entry.name) || entry.name.startsWith('.')) {
+                        continue;
+                    }
+                    const entryRelativePath = path.join(relativePath, entry.name);
+                    const entryFullPath = path.join(dirPath, entry.name);
+                    if (entry.isDirectory()) {
+                        const children = await buildFileTree(entryFullPath, entryRelativePath);
+                        if (children.length > 0) {
+                            files.push({
+                                title: entry.name,
+                                key: entryRelativePath,
+                                path: entryRelativePath,
+                                isLeaf: false,
+                                selectable: false,
+                                children,
+                            });
+                        }
+                    }
+                    else {
+                        // 排除静态资源文件
+                        const ext = path.extname(entry.name).toLowerCase();
+                        if (!excludeExtensions.includes(ext)) {
+                            files.push({
+                                title: entry.name,
+                                key: entryRelativePath,
+                                path: entryRelativePath,
+                                isLeaf: true,
+                                selectable: true,
+                            });
+                        }
+                    }
+                }
+                return files;
+            };
+            const fileTree = await buildFileTree(targetPath);
+            res.json({
+                success: true,
+                data: {
+                    projectPath,
+                    files: fileTree,
+                },
+            });
+        }
+        catch (error) {
+            Logger.error('获取项目文件树失败:', error);
+            res.status(500).json({
+                success: false,
+                message: '获取项目文件树失败',
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    });
+    /**
+     * 分析项目中的组件
+     */
+    app.post('/analyzeComponents', async (req, res) => {
+        try {
+            const { filePaths, fileKey, nodeId } = req.body;
+            if (!filePaths || !Array.isArray(filePaths)) {
+                res.status(400).json({
+                    success: false,
+                    message: '缺少必要参数: filePaths',
+                });
+                return;
+            }
+            Logger.log(`分析 ${filePaths.length} 个项目文件`);
+            const projectPath = getProjectRoot();
+            const results = [];
+            // 尝试加载保存的提示词设置（如果提供了 fileKey 和 nodeId）
+            let savedPromptSetting = null;
+            if (fileKey && nodeId) {
+                try {
+                    savedPromptSetting = await fileManager.loadPromptSetting(fileKey, nodeId);
+                    Logger.log(`已加载提示词设置: fileKey=${fileKey}, nodeId=${nodeId}`);
+                }
+                catch (error) {
+                    Logger.warn(`加载提示词设置失败: ${error}`);
+                }
+            }
+            const frameworkGuidePrompt = savedPromptSetting?.frameworkGuidePrompt;
+            const _componentAnalysisPrompt = savedPromptSetting?.componentAnalysisPrompt || componentAnalysisPrompt;
+            // 读取并分析每个文件
+            for (const filePath of filePaths) {
+                try {
+                    const fullPath = path.join(projectPath, filePath);
+                    // 安全检查：确保文件在项目目录内
+                    if (!fullPath.startsWith(projectPath)) {
+                        results.push({
+                            success: false,
+                            filename: filePath,
+                            error: '无权访问该文件',
+                        });
+                        continue;
+                    }
+                    // 读取文件内容
+                    const content = await fs.promises.readFile(fullPath, 'utf-8');
+                    const filename = path.basename(filePath);
+                    // 使用 MCP Sampling 进行实际分析
+                    if (mcpServer) {
+                        try {
+                            // 构建提示词，替换占位符
+                            const prompt = _componentAnalysisPrompt.replace(/{filename}/g, filename).replace(/{fileContent}/g, content);
+                            // 调用 MCP Sampling API
+                            const { content: { text }, } = await mcpServer.server.createMessage({
+                                messages: [
+                                    frameworkGuidePrompt && {
+                                        role: 'user',
+                                        content: {
+                                            type: 'text',
+                                            text: frameworkGuidePrompt,
+                                        },
+                                    },
+                                    {
+                                        role: 'user',
+                                        content: {
+                                            type: 'text',
+                                            text: prompt,
+                                        },
+                                    },
+                                ].filter(Boolean),
+                                maxTokens: 8000,
+                            }, { timeout: 2 * 60 * 1000 });
+                            // 解析 AI 返回的 JSON
+                            const extractResult = extractJson(text);
+                            if (extractResult.state === 'successful-parse' && extractResult.value) {
+                                const analysisResult = extractResult.value;
+                                // 构建组件信息
+                                const component = {
+                                    id: `comp-${Date.now()}-${Math.random()}`,
+                                    name: analysisResult.componentName || path.basename(filePath, path.extname(filePath)),
+                                    type: 'custom',
+                                    path: filePath,
+                                    import: analysisResult.import,
+                                    props: analysisResult.props || [],
+                                    description: analysisResult.description || '组件描述',
+                                };
+                                results.push({
+                                    success: true,
+                                    component,
+                                    filename: filePath,
+                                });
+                                Logger.log(`成功分析组件: ${filePath}, 组件名: ${component.name}`);
+                            }
+                            else {
+                                // JSON 解析失败，使用默认值
+                                Logger.warn(`解析组件分析结果失败: ${extractResult.error}, 文件: ${filePath}`);
+                                results.push({
+                                    success: true,
+                                    component: {
+                                        id: `comp-${Date.now()}-${Math.random()}`,
+                                        name: path.basename(filePath, path.extname(filePath)),
+                                        type: 'custom',
+                                        path: filePath,
+                                        import: `import { ${path.basename(filePath, path.extname(filePath))} } from './${filePath}'`,
+                                        props: [],
+                                        description: '组件描述',
+                                    },
+                                    filename: filePath,
+                                });
+                            }
+                        }
+                        catch (samplingError) {
+                            Logger.error(`调用采样 API 失败: ${filePath}`, samplingError);
+                            // 采样失败时使用默认值
+                            results.push({
+                                success: true,
+                                component: {
+                                    id: `comp-${Date.now()}-${Math.random()}`,
+                                    name: path.basename(filePath, path.extname(filePath)),
+                                    type: 'custom',
+                                    path: filePath,
+                                    import: `import { ${path.basename(filePath, path.extname(filePath))} } from './${filePath}'`,
+                                    props: [],
+                                    description: '组件描述',
+                                },
+                                filename: filePath,
+                            });
+                        }
+                    }
+                    else {
+                        // MCP 服务器未初始化，使用默认值
+                        Logger.warn('MCP 服务器未初始化，使用默认组件信息');
+                        results.push({
+                            success: true,
+                            component: {
+                                id: `comp-${Date.now()}-${Math.random()}`,
+                                name: path.basename(filePath, path.extname(filePath)),
+                                type: 'custom',
+                                path: filePath,
+                                import: `import { ${path.basename(filePath, path.extname(filePath))} } from './${filePath}'`,
+                                props: [],
+                                description: '组件描述',
+                            },
+                            filename: filePath,
+                        });
+                    }
+                }
+                catch (error) {
+                    Logger.error(`读取文件失败: ${filePath}`, error);
+                    results.push({
+                        success: false,
+                        filename: filePath,
+                        error: error instanceof Error ? error.message : String(error),
+                    });
+                }
+            }
+            const succeeded = results.filter((r) => r.success).length;
+            const failed = results.filter((r) => !r.success).length;
+            res.json({
+                success: true,
+                data: {
+                    total: filePaths.length,
+                    succeeded,
+                    failed,
+                    components: results.filter((r) => r.success).map((r) => r.component),
+                    errors: results
+                        .filter((r) => !r.success)
+                        .map((r) => ({
+                        filename: r.filename,
+                        error: r.error,
+                    })),
+                },
+            });
+        }
+        catch (error) {
+            Logger.error('分析项目组件失败:', error);
+            res.status(500).json({
+                success: false,
+                message: '分析项目组件失败',
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    });
+    /**
+     * 保存项目中的组件到components.json
+     */
+    app.post('/saveComponents', async (req, res) => {
+        try {
+            const { components } = req.body;
+            if (!components || !Array.isArray(components)) {
+                res.status(400).json({
+                    success: false,
+                    message: '无效的组件数据',
+                });
+                return;
+            }
+            Logger.log(`准备保存 ${components.length} 个组件`);
+            // 读取现有组件
+            const existingComponents = await fileManager.loadComponentsDatabase();
+            // 直接追加（暂不处理冲突）
+            const allComponents = [...components, ...existingComponents];
+            // 保存到文件（带备份）
+            await fileManager.saveComponentsDatabase(allComponents);
+            Logger.log(`✅ 成功保存，当前共 ${allComponents.length} 个组件`);
+            res.json({
+                success: true,
+                data: {
+                    added: components.length,
+                    total: allComponents.length,
+                    components: allComponents,
+                },
+                message: '组件导入成功',
+            });
+        }
+        catch (error) {
+            Logger.error('保存组件失败:', error);
+            res.status(500).json({
+                success: false,
+                message: '保存组件失败',
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    });
+    /**
+     * 获取或创建映射系统实例
+     */
+    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;
+            }
+            const projectPath = getProjectRoot();
+            Logger.log('扫描项目组件:', { platform, includePaths, excludePaths });
+            // 读取外部依赖组件（从 .sloth/components.json）
+            let projectComponents = [];
+            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)) {
+                    // 验证每个组件的基本字段
+                    projectComponents = 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,
+                        })),
+                        description: c.description || c.metadata?.description,
+                        import: c.import,
+                    }));
+                    Logger.log(`从 .sloth/components.json 加载了 ${projectComponents.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,
+                    platform,
+                    projectComponents, // 项目组件
+                },
+            });
+        }
+        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 +1248,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`);
     });