sloth-d2c-mcp 1.0.4-beta100

package/dist/build/config-manager/index.js

@@ -0,0 +1,240 @@
+import { promises as fs } from 'fs';
+import * as path from 'path';
+import envPaths from 'env-paths';
+import { Logger } from '../utils/logger.js';
+export const defaultConfigData = {
+    convertSetting: {
+        framework: 'react',
+        convertScale: 1,
+        colorValue: 'hex',
+    },
+    imageSetting: {
+        imageStorageType: 'local',
+        imageStorageScale: 1,
+        imageIconType: 'svg',
+        // 本地存储配置
+        imageStoragePath: './static',
+        imageStorageNamingRule: '[name]_[contenthash:6]',
+        // OSS 配置
+        ossRegion: '',
+        ossAccessKeyId: '',
+        ossAccessKeySecret: '',
+        ossBucket: '',
+        ossPath: '',
+        ossCdnDomain: '',
+        // 接口上传配置
+        imageStorageApiUrl: '',
+        imageStorageApiFileField: 'file',
+        imageStorageApiUrlField: 'url',
+        imageStorageApiCustomHeader: '',
+        imageStorageApiCustomBody: '',
+    },
+};
+// 配置管理器类
+export class ConfigManager {
+    paths; // 应用路径配置
+    configPath; // 配置文件路径
+    constructor(appName) {
+        this.paths = envPaths(appName);
+        this.configPath = path.join(this.paths.config, 'config.json');
+    }
+    /**
+     * 从文件加载配置
+     * @returns Promise<ConfigData> - 配置对象，如果文件不存在则返回空对象
+     */
+    async load() {
+        try {
+            const data = await fs.readFile(this.configPath, 'utf-8');
+            return JSON.parse(data);
+        }
+        catch (err) {
+            Logger.error(`配置文件加载出错。${err.toString()}`);
+            return {};
+        }
+    }
+    /**
+     * 保存配置到文件
+     * @param data - 要保存的配置对象
+     */
+    async save(data) {
+        try {
+            await fs.mkdir(path.dirname(this.configPath), { recursive: true }); // 确保目录存在
+            await fs.writeFile(this.configPath, JSON.stringify(data, null, 2)); // 格式化保存JSON
+        }
+        catch (error) {
+            Logger.error(error);
+        }
+    }
+    /**
+     * 获取配置文件路径
+     * @returns string - 配置文件的完整路径
+     */
+    getConfigPath() {
+        return this.configPath;
+    }
+    /**
+     * 检查配置文件是否存在
+     * @returns Promise<boolean> - 如果配置文件存在则返回true
+     */
+    async exists() {
+        try {
+            await fs.access(this.configPath);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * 删除配置文件
+     */
+    async delete() {
+        try {
+            await fs.unlink(this.configPath);
+        }
+        catch (err) {
+            if (err.code !== 'ENOENT') {
+                throw err; // 如果不是文件不存在错误，则抛出异常
+            }
+        }
+    }
+    /**
+     * 获取特定 fileKey 的配置，如果不存在则返回默认配置
+     * @param fileKey - 文件键
+     * @returns Promise<{ convertSetting: ConvertSetting, imageSetting: ImageSetting }> - 合并后的配置
+     */
+    async getFileConfig(fileKey) {
+        const config = await this.load();
+        // 获取默认配置
+        const defaultConvertSetting = config.convertSetting || {};
+        const defaultImageSetting = config.imageSetting || {};
+        // 获取 fileKey 特定的配置
+        const fileConfig = config.fileConfigs?.[fileKey] || {};
+        // 合并配置：fileKey 配置优先于默认配置
+        const convertSetting = { ...defaultConvertSetting, ...fileConfig.convertSetting };
+        const imageSetting = { ...defaultImageSetting, ...fileConfig.imageSetting };
+        return { convertSetting, imageSetting };
+    }
+    /**
+     * 保存特定 fileKey 的配置
+     * @param fileKey - 文件键
+     * @param convertSetting - 转换设置（可选）
+     * @param imageSetting - 图片设置（可选）
+     */
+    async saveFileConfig(fileKey, convertSetting, imageSetting) {
+        const config = await this.load();
+        // 初始化 fileConfigs 如果不存在
+        if (!config.fileConfigs) {
+            config.fileConfigs = {};
+        }
+        // 初始化特定 fileKey 的配置如果不存在
+        if (!config.fileConfigs[fileKey]) {
+            config.fileConfigs[fileKey] = {};
+        }
+        // 更新配置
+        if (convertSetting) {
+            config.fileConfigs[fileKey].convertSetting = convertSetting;
+        }
+        if (imageSetting) {
+            config.fileConfigs[fileKey].imageSetting = imageSetting;
+        }
+        // 保存配置
+        await this.save(config);
+    }
+    /**
+     * 更新默认配置
+     * @param convertSetting - 默认转换设置（可选）
+     * @param imageSetting - 默认图片设置（可选）
+     */
+    async updateDefaultConfig(convertSetting, imageSetting) {
+        const config = await this.load();
+        if (convertSetting) {
+            config.convertSetting = convertSetting;
+        }
+        if (imageSetting) {
+            config.imageSetting = imageSetting;
+        }
+        await this.save(config);
+    }
+    /**
+     * 添加框架到配置
+     * @param framework - 框架名称
+     */
+    async addFramework(framework) {
+        const config = await this.load();
+        if (!config.frameworks) {
+            config.frameworks = [];
+        }
+        const name = framework.trim();
+        if (!config.frameworks.find((f) => f.value === name)) {
+            config.frameworks.push({
+                label: name,
+                value: name.toLowerCase(),
+                isCustom: true,
+            });
+            await this.save(config);
+        }
+    }
+    /**
+     * 获取框架列表
+     * @returns Promise<Framework[]> - 框架列表
+     */
+    async getFrameworks() {
+        const config = await this.load();
+        return config.frameworks || [];
+    }
+    /**
+     * 获取框架配置文件路径
+     * @param framework - 框架名称
+     * @returns string - 框架配置文件路径
+     */
+    getFrameworkConfigPath(framework) {
+        return path.join(this.paths.config, `${framework}.json`);
+    }
+    /**
+     * 保存框架配置
+     * @param framework - 框架名称
+     * @param promptSetting - 提示词配置
+     */
+    async saveFrameworkConfig(framework, promptSetting) {
+        const frameworkPath = this.getFrameworkConfigPath(framework);
+        await fs.mkdir(path.dirname(frameworkPath), { recursive: true });
+        await fs.writeFile(frameworkPath, JSON.stringify(promptSetting, null, 2));
+    }
+    /**
+     * 加载框架配置
+     * @param framework - 框架名称
+     * @returns Promise<object> - 框架配置对象
+     */
+    async loadFrameworkConfig(framework) {
+        try {
+            const frameworkPath = this.getFrameworkConfigPath(framework);
+            const data = await fs.readFile(frameworkPath, 'utf-8');
+            return JSON.parse(data);
+        }
+        catch (err) {
+            if (err.code === 'ENOENT') {
+                // 文件不存在，返回空对象
+                return {};
+            }
+            Logger.error(`加载框架配置出错: ${err.toString()}`);
+            return {};
+        }
+    }
+    /**
+     * 检查框架配置文件是否存在
+     * @param framework - 框架名称
+     * @returns Promise<boolean> - 如果框架配置文件存在则返回true
+     */
+    async frameworkConfigExists(framework) {
+        try {
+            const frameworkPath = this.getFrameworkConfigPath(framework);
+            await fs.access(frameworkPath);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+}
+export default ConfigManager;

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

@@ -0,0 +1,366 @@
+/**
+ * 处理组件上下文：解析 @组件名 并构建组件说明
+ * @param group 分组数据
+ * @returns 处理后的用户提示词和组件上下文提示词
+ */
+export function buildComponentContext(group) {
+    let processedUserPrompt = group.userPrompt || '';
+    let componentContextPrompt = '';
+    if (group.componentContext && Array.isArray(group.componentContext) && group.componentContext.length > 0) {
+        // 解析 userPrompt 中的 @组件名（react-mentions 格式：@[组件名](组件名)）
+        const mentionRegex = /@\[([^\]]+)\]\(([^)]+)\)/g;
+        const componentMap = new Map();
+        // 构建组件映射表
+        group.componentContext.forEach((comp) => {
+            componentMap.set(comp.name, comp);
+        });
+        // 替换 @组件名 为组件详细信息（只替换组件，不替换 Markdown 文件）
+        processedUserPrompt = processedUserPrompt.replace(mentionRegex, (match, display, id) => {
+            // 如果 id 包含路径分隔符，说明是文件，保持原样
+            if (id.includes('/') || id.includes('\\')) {
+                return match;
+            }
+            const component = componentMap.get(id || display);
+            if (component) {
+                const libInfo = component.lib ? ` (${component.lib})` : '';
+                const descInfo = component.description ? ` - ${component.description}` : '';
+                return `[组件: ${component.name}${libInfo}${descInfo}]`;
+            }
+            return match; // 如果找不到组件，保持原样
+        });
+        // 构建组件上下文说明
+        componentContextPrompt = '\n\n## 可用组件说明\n\n以下组件已加入上下文，你可以在代码生成时使用这些组件：\n\n';
+        group.componentContext.forEach((comp) => {
+            const propsInfo = comp.props && comp.props.length > 0 ? comp.props.map((p) => `${p.name}${p.required ? '*' : ''}: ${p.type || 'any'}`).join(', ') : '无 Props';
+            const libInfo = comp.lib ? ` (来自 ${comp.lib})` : ' (项目组件)';
+            const descInfo = comp.description ? `\n- **描述**: ${comp.description}` : '';
+            componentContextPrompt += `### ${comp.name}${libInfo}\n`;
+            componentContextPrompt += `- **Props**: ${propsInfo}${descInfo}\n\n`;
+        });
+        componentContextPrompt += '注意：在生成代码时，请根据设计稿的需求，合理使用上述组件，并正确传递 props 参数。\n';
+    }
+    return { processedUserPrompt, componentContextPrompt };
+}
+/**
+ * 处理 Markdown 文件上下文：解析 @文件名 并构建文档上下文提示词
+ * @param group 分组数据
+ * @returns 处理后的用户提示词和 Markdown 上下文提示词
+ */
+export function buildMarkdownContext(group) {
+    let processedUserPrompt = group.userPrompt || '';
+    let markdownContextPrompt = '';
+    if (group.markdownContext && Array.isArray(group.markdownContext) && group.markdownContext.length > 0) {
+        // 解析 userPrompt 中的 @文件名（react-mentions 格式：@[文件名](文件路径)）
+        const mentionRegex = /@\[([^\]]+)\]\(([^)]+)\)/g;
+        const markdownMap = new Map();
+        // 构建 Markdown 文件映射表
+        group.markdownContext.forEach((file) => {
+            markdownMap.set(file.path, file);
+        });
+        // 替换 @文件名 为文件详细信息（只替换文件，不替换组件）
+        processedUserPrompt = processedUserPrompt.replace(mentionRegex, (match, _display, id) => {
+            // 如果 id 不包含路径分隔符，说明是组件名，保持原样
+            if (!id.includes('/') && !id.includes('\\')) {
+                return match;
+            }
+            const markdownFile = markdownMap.get(id);
+            if (markdownFile) {
+                return `[文档: ${markdownFile.name}]`;
+            }
+            return match; // 如果找不到文件，保持原样
+        });
+        // 构建 Markdown 上下文说明
+        markdownContextPrompt = '\n\n## 参考文档\n\n以下是用户提供的参考文档，请在代码生成时参考这些文档中的规范、示例和最佳实践：\n\n';
+        group.markdownContext.forEach((file) => {
+            markdownContextPrompt += `### 📄 ${file.name}\n\n`;
+            if (file.content) {
+                markdownContextPrompt += '```markdown\n';
+                markdownContextPrompt += file.content;
+                markdownContextPrompt += '\n```\n\n';
+            }
+            else {
+                markdownContextPrompt += `**文件路径**: ${file.path}\n\n`;
+            }
+        });
+        markdownContextPrompt += '**重要**：请仔细阅读上述参考文档，遵循文档中的编码规范、API 使用方式和最佳实践，确保生成的代码符合项目要求。\n';
+    }
+    return { processedUserPrompt, markdownContextPrompt };
+}
+/**
+ * 构建用户提示词文本
+ * @param userPrompt 用户提示词
+ * @returns 格式化的提示词文本
+ */
+export function buildUserPromptText(userPrompt) {
+    if (!userPrompt)
+        return '';
+    return '\n## 用户提示词\n以下是用户针对该代码的优化提出的补充说明和要求，请在优化代码时特别关注这些指导并尽可能实现：\n' + userPrompt;
+}
+/**
+ * 递归获取组件的继承链
+ * @param component 当前组件
+ * @param allComponents 所有组件映射表
+ * @param visited 已访问的组件名称（防止循环引用）
+ * @returns 继承链数组（从当前组件到最顶层父类）
+ */
+function getInheritanceChain(component, allComponents, visited = new Set()) {
+    const chain = [];
+    // 防止循环引用
+    if (visited.has(component.name)) {
+        return chain;
+    }
+    visited.add(component.name);
+    // 如果有父类，递归查找
+    if (component.super) {
+        const parentComponent = allComponents.get(component.super);
+        if (parentComponent) {
+            chain.push(parentComponent);
+            // 递归获取父类的继承链
+            const parentChain = getInheritanceChain(parentComponent, allComponents, visited);
+            chain.push(...parentChain);
+        }
+    }
+    return chain;
+}
+/**
+ * 格式化组件信息为提示词
+ * @param component 组件信息
+ * @param isParent 是否是父类组件
+ * @returns 格式化的组件提示词
+ */
+function formatComponentPrompt(component, isParent = false) {
+    let prompt = '';
+    const propsInfo = component.props && component.props.length > 0
+        ? component.props.map((p) => `${p.name}${p.required ? ' (必需)' : ' (可选)'}: ${p.type || 'any'} - ${p.description}`).join(', ')
+        : '无';
+    const libInfo = component.lib ? ` (来自 ${component.lib})` : ' (项目组件)';
+    const descInfo = component.description ? `\n- **描述**: ${component.description}` : '';
+    const parentPrefix = isParent ? '#### ' : '### ';
+    const parentLabel = isParent ? ' [父类]' : '';
+    prompt += `${parentPrefix}${component.name}${libInfo}${parentLabel}\n`;
+    prompt += `- **文件路径**: ${component.path}\n`;
+    prompt += `- **导入方式**: ${component.import}\n`;
+    prompt += `- **Props**: ${propsInfo}${descInfo}\n`;
+    // 如果有 functions，也输出方法信息
+    if (component.functions && component.functions.length > 0) {
+        const functionsInfo = component.functions
+            .map((f) => {
+            const paramsStr = f.params && f.params.length > 0 ? f.params.map((p) => `${p.name}: ${p.type}`).join(', ') : '';
+            const returnStr = f.returnType ? `: ${f.returnType}` : '';
+            const descStr = f.description ? ` - ${f.description}` : '';
+            return `${f.name}(${paramsStr})${returnStr}${descStr}`;
+        })
+            .join('; ');
+        prompt += `- **方法**: ${functionsInfo}\n`;
+    }
+    // 如果有 super，标注继承关系
+    if (component.super) {
+        prompt += `- **继承自**: ${component.super}\n`;
+    }
+    prompt += '\n';
+    return prompt;
+}
+/**
+ * 构建组件映射提示词（包含组件映射和组件上下文和组件标记）
+ * @param componentMappings 组件映射数组
+ * @param componentContexts 所有组的组件上下文数组
+ * @param markedComponents 标记的组件数组
+ * @param componentsDatabase 完整的组件数据库（用于查找继承链）
+ * @returns 组件映射提示词
+ */
+export function buildComponentMappingPrompt(componentMappings, componentContexts = [], markedComponents = [], componentsDatabase = []) {
+    let prompt = '';
+    // 构建完整的组件数据库映射表（用于查找继承链）
+    const databaseMap = new Map();
+    componentsDatabase.forEach((comp) => {
+        databaseMap.set(comp.name, comp);
+    });
+    // 收集所有组件：组件映射 + 组件上下文（按名称去重）
+    const allComponents = new Map();
+    // 添加组件映射的组件
+    componentMappings.forEach((mapping) => {
+        allComponents.set(mapping.component.name, mapping.component);
+    });
+    // 添加组件上下文的组件（去重，不覆盖已存在的）
+    componentContexts.forEach((context) => {
+        context.components.forEach((comp) => {
+            if (!allComponents.has(comp.name)) {
+                allComponents.set(comp.name, comp);
+            }
+        });
+    });
+    // 构建可用组件提示词
+    if (allComponents.size > 0) {
+        prompt += '\n\n## 可用组件\n\n以下是项目中可用的组件，请在最终代码中使用这些组件：\n\n';
+        // 记录已输出的组件，避免重复输出
+        const outputtedComponents = new Set();
+        allComponents.forEach((component) => {
+            // 输出当前组件
+            if (!outputtedComponents.has(component.path)) {
+                outputtedComponents.add(component.path);
+                prompt += formatComponentPrompt(component, false);
+            }
+            // 递归查找并输出继承链（从完整数据库中查找）
+            const inheritanceChain = getInheritanceChain(component, databaseMap);
+            if (inheritanceChain.length > 0) {
+                inheritanceChain.forEach((parentComp) => {
+                    // 避免重复输出
+                    if (!outputtedComponents.has(parentComp.path)) {
+                        outputtedComponents.add(parentComp.path);
+                        prompt += formatComponentPrompt(parentComp, true);
+                    }
+                });
+            }
+        });
+        prompt +=
+            '**重要**：在最终写入代码时，请根据设计稿需求合理传递组件参数。请按照项目路径规范合理引入组件。如果组件有继承关系，请注意父类的参数和方法也可以使用。\n';
+    }
+    // 构建组件映射的设计稿代码（用于 AI 提取组件参数）
+    const mappingsWithCode = componentMappings.filter((m) => m.code);
+    if (mappingsWithCode.length > 0) {
+        prompt += '\n\n## 组件映射设计稿代码\n\n';
+        prompt += '以下是已映射组件对应的设计稿绝对定位代码，请根据这些代码提取信息，在使用组件时传入相应参数：\n\n';
+        mappingsWithCode.forEach((mapping) => {
+            prompt += `### ${mapping.groupName}\n\n`;
+            prompt += '```html\n';
+            prompt += mapping.code;
+            prompt += '\n```\n\n';
+        });
+        prompt += '**重要**：请从上述 HTML 代码中提取信息，作为对应组件的初始化参数。\n';
+    }
+    // 构建标记组件提示词
+    if (markedComponents.length > 0) {
+        prompt += '\n\n## 组件标记任务\n\n';
+        prompt += '以下组件已被用户标记为可复用组件，**请在写入代码后调用 `mark_components` 工具保存这些组件信息**：\n\n';
+        prompt += '| 组件名 | signature |\n';
+        prompt += '|--------|-----------|';
+        markedComponents.forEach((comp) => {
+            prompt += `\n| ${comp.name} | ${comp.signature} |`;
+        });
+        prompt += '\n\n调用示例：\n';
+        prompt += '```json\n';
+        prompt += JSON.stringify({
+            components: markedComponents.map((comp) => ({
+                name: comp.name,
+                path: '按实际写入路径填写',
+                signature: comp.signature,
+                import: '按实际写入路径填写导入语句',
+                description: '组件的功能描述',
+            })),
+        }, null, 2);
+        prompt += '\n```\n\n';
+        prompt += '**重要**：组件标记后可在后续转码中自动匹配复用\n';
+    }
+    return prompt;
+}
+/**
+ * 构建子组占位符提示词
+ * @param placeholders 占位符信息数组
+ * @returns 占位符提示词
+ */
+export function buildPlaceholderPrompt(placeholders, isSupportSampling = true) {
+    if (placeholders.length === 0) {
+        return '';
+    }
+    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`;
+    });
+    prompt += '\n将 HTML 标签转换为真实组件调用，但不需要添加对应的 import 语句，保持其在布局中的位置。\n';
+    return prompt;
+}
+/**
+ * 构建完整的 AI 代码修改提示词
+ * 用于用户确认变更后，生成可直接发送给 AI 的完整提示词
+ * @param confirmedChanges 用户确认的变更点列表
+ * @param options 配置选项
+ * @returns 完整的 AI 提示词
+ */
+export function buildFullUpdatePromptForAI(confirmedChanges, options = {}) {
+    const { fileKey, nodeId, htmlDiff } = options;
+    if (!confirmedChanges || confirmedChanges.length === 0) {
+        return '没有需要修改的变更点。';
+    }
+    const typeLabels = {
+        layout: '布局变更',
+        style: '样式变更',
+        content: '内容变更',
+        structure: '结构变更',
+    };
+    let prompt = `# 设计稿变更 - 代码修改任务
+
+## 任务背景
+
+用户的 UI 设计稿发生了变更，需要根据以下变更点修改现有代码。这是一个**增量修改任务**，不是全新创建。
+
+## 前置要求
+
+**请先确认当前上下文中是否包含需要修改的代码。**
+
+如果当前上下文中没有相关代码，请让用户：
+1. 提供需要修改的代码文件路径，以便读取
+2. 或直接粘贴需要修改的代码内容
+
+---
+
+## 变更信息
+
+`;
+    // 添加设计稿信息（如果有）
+    if (fileKey) {
+        prompt += `- **设计稿标识**: ${fileKey}${nodeId ? ` / ${nodeId}` : ''}\n`;
+    }
+    prompt += `- **变更数量**: ${confirmedChanges.length} 个\n\n`;
+    // 变更点详情
+    prompt += `## 变更点详情\n\n`;
+    confirmedChanges.forEach((change, index) => {
+        prompt += `### ${index + 1}. ${change.title}\n\n`;
+        prompt += `- **类型**: ${typeLabels[change.type] || change.type}\n`;
+        prompt += `- **描述**: ${change.description}\n`;
+        prompt += `- **建议操作**: ${change.suggestedAction}\n`;
+        if (change.userPrompt) {
+            prompt += `- **用户补充**: ${change.userPrompt}\n`;
+        }
+        prompt += `\n`;
+    });
+    // 添加 HTML Diff（如果有）
+    if (htmlDiff && htmlDiff.trim()) {
+        prompt += `## 设计稿 HTML Diff
+
+以下是新旧设计稿的 HTML 差异，可帮助你精确定位需要修改的样式和布局：
+
+\`\`\`diff
+${htmlDiff}
+\`\`\`
+
+**说明**：
+- \`---\` 开头的行表示被删除的内容（旧设计稿）
+- \`+++\` 开头的行表示新增的内容（新设计稿）
+- HTML 使用 Tailwind CSS 类名
+
+`;
+    }
+    // 修改指南
+    prompt += `## 修改要求
+
+### 核心原则
+
+1. **基于现有实现**: 分析当前项目的技术栈和代码实现方式，在此基础上进行修改
+2. **最小化变更**: 只修改与变更点相关的代码，保持其他部分不变
+3. **保持一致性**: 遵循现有代码的命名规范、代码风格和架构模式
+4. **增量修改**: 优先通过修改现有代码实现，避免大规模重构
+
+### 修改流程
+
+1. **分析现有代码**: 理解当前代码的技术栈、组件结构、样式方案
+2. **定位修改位置**: 根据变更点找到需要修改的具体代码位置
+3. **实施修改**: 按照现有代码风格进行修改
+4. **验证完整性**: 确保修改后代码可正常运行
+
+---
+
+**请开始分析代码并执行修改。如果需要更多信息或代码上下文，请告诉我。**
+`;
+    return prompt;
+}