sloth-d2c-mcp 1.0.4-beta69 → 1.0.4-beta71

package/dist/build/component-mapping/storage.js

@@ -0,0 +1,142 @@
+/**
+ * 映射数据存储
+ */
+import { promises as fs } from 'fs';
+import * as path from 'path';
+/**
+ * 基于JSON文件的本地存储实现
+ */
+export class LocalMappingStorage {
+    storageDir;
+    mappingsFile;
+    mappings = new Map();
+    initialized = false;
+    constructor(baseDir = '.') {
+        this.storageDir = path.join(baseDir, '.mcp', 'component-mappings');
+        this.mappingsFile = path.join(this.storageDir, 'mappings.json');
+    }
+    /**
+     * 初始化存储
+     */
+    async initialize() {
+        if (this.initialized)
+            return;
+        try {
+            // 确保目录存在
+            await fs.mkdir(this.storageDir, { recursive: true });
+            // 加载现有映射
+            try {
+                const data = await fs.readFile(this.mappingsFile, 'utf-8');
+                const mappingsArray = JSON.parse(data);
+                for (const mapping of mappingsArray) {
+                    // 转换日期字符串为Date对象
+                    mapping.createdAt = new Date(mapping.createdAt);
+                    mapping.updatedAt = new Date(mapping.updatedAt);
+                    this.mappings.set(mapping.id, mapping);
+                }
+            }
+            catch (error) {
+                if (error.code !== 'ENOENT') {
+                    console.warn('加载映射文件失败:', error);
+                }
+                // 文件不存在是正常的,创建新的
+            }
+            this.initialized = true;
+        }
+        catch (error) {
+            console.error('初始化存储失败:', error);
+            throw error;
+        }
+    }
+    /**
+     * 持久化映射到文件
+     */
+    async persist() {
+        const mappingsArray = Array.from(this.mappings.values());
+        await fs.writeFile(this.mappingsFile, JSON.stringify(mappingsArray, null, 2), 'utf-8');
+    }
+    async saveMapping(mapping) {
+        await this.initialize();
+        this.mappings.set(mapping.id, mapping);
+        await this.persist();
+    }
+    async getMapping(id) {
+        await this.initialize();
+        return this.mappings.get(id) || null;
+    }
+    async findMappingByFigmaNode(figmaNodeId) {
+        await this.initialize();
+        for (const mapping of this.mappings.values()) {
+            if (mapping.figmaNodeId === figmaNodeId) {
+                return mapping;
+            }
+        }
+        return null;
+    }
+    async listMappings(filter) {
+        await this.initialize();
+        let mappings = Array.from(this.mappings.values());
+        if (filter) {
+            if (filter.platform) {
+                mappings = mappings.filter((m) => m.platform === filter.platform);
+            }
+            if (filter.figmaFileId) {
+                mappings = mappings.filter((m) => m.figmaNodeId.startsWith(filter.figmaFileId));
+            }
+            if (filter.componentId) {
+                mappings = mappings.filter((m) => m.componentId === filter.componentId);
+            }
+            if (filter.minConfidence !== undefined) {
+                mappings = mappings.filter((m) => m.confidence >= filter.minConfidence);
+            }
+        }
+        return mappings;
+    }
+    async deleteMapping(id) {
+        await this.initialize();
+        this.mappings.delete(id);
+        await this.persist();
+    }
+    async updateMapping(id, updates) {
+        await this.initialize();
+        const existing = this.mappings.get(id);
+        if (!existing) {
+            throw new Error(`映射不存在: ${id}`);
+        }
+        const updated = {
+            ...existing,
+            ...updates,
+            updatedAt: new Date(),
+        };
+        this.mappings.set(id, updated);
+        await this.persist();
+    }
+    /**
+     * 清空所有映射
+     */
+    async clear() {
+        await this.initialize();
+        this.mappings.clear();
+        await this.persist();
+    }
+    /**
+     * 导出映射数据
+     */
+    async export() {
+        await this.initialize();
+        return Array.from(this.mappings.values());
+    }
+    /**
+     * 导入映射数据
+     */
+    async import(mappings) {
+        await this.initialize();
+        for (const mapping of mappings) {
+            // 确保日期对象正确
+            mapping.createdAt = new Date(mapping.createdAt);
+            mapping.updatedAt = new Date(mapping.updatedAt);
+            this.mappings.set(mapping.id, mapping);
+        }
+        await this.persist();
+    }
+}

package/dist/build/component-mapping/types.js

@@ -0,0 +1,4 @@
+/**
+ * 组件映射系统 - 类型定义
+ */
+export {};

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

@@ -156,5 +156,85 @@ export class ConfigManager {
         }
         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,110 @@
+/**
+ * 处理组件上下文：解析 @组件名 并构建组件说明
+ * @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);
+        });
+        // 替换 @组件名 为组件详细信息
+        processedUserPrompt = processedUserPrompt.replace(mentionRegex, (match, display, id) => {
+            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 };
+}
+/**
+ * 构建用户提示词文本
+ * @param userPrompt 用户提示词
+ * @returns 格式化的提示词文本
+ */
+export function buildUserPromptText(userPrompt) {
+    if (!userPrompt)
+        return '';
+    return '\n## 用户提示词\n以下是用户针对该代码的优化提出的补充说明和要求，请在优化代码时特别关注这些指导并尽可能实现：\n' + userPrompt;
+}
+/**
+ * 构建组件映射提示词（包含组件映射和组件上下文）
+ * @param componentMappings 组件映射数组
+ * @param componentContexts 所有组的组件上下文数组
+ * @returns 组件映射提示词
+ */
+export function buildComponentMappingPrompt(componentMappings, componentContexts = []) {
+    // 收集所有组件：组件映射 + 组件上下文（按名称去重）
+    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) {
+        return '';
+    }
+    let prompt = '\n\n## 可用组件\n\n以下是项目中可用的组件，请在最终代码中使用这些组件：\n\n';
+    allComponents.forEach((component) => {
+        const propsInfo = component.props && component.props.length > 0
+            ? component.props.map((p) => `${p.name}${p.required ? ' (必需)' : ' (可选)'}: ${p.type || 'any'}`).join(', ')
+            : '无';
+        const libInfo = component.lib ? ` (来自 ${component.lib})` : ' (项目组件)';
+        const descInfo = component.description ? `\n- **描述**: ${component.description}` : '';
+        // 构建导入方式文案
+        const importType = component.importType || 'default'; // 默认为 default 导入
+        const importTypeText = importType === 'named' ? '具名导入' : '默认导入';
+        prompt += `### ${component.name}${libInfo}\n`;
+        prompt += `- **文件路径**: ${component.path}\n`;
+        prompt += `- **导入方式**: ${importTypeText}\n`;
+        prompt += `- **Props**: ${propsInfo}${descInfo}\n\n`;
+    });
+    prompt +=
+        '**重要**：在最终写入代码时，请严格按照上述"导入方式"来编写 import 语句。"具名导入"表示 import { 组件名 } from \'路径\'，"默认导入"表示 import 组件名 from \'路径\'。请根据设计稿需求合理传递 props 参数。请按照项目路径规范合理使用相对路径和路径别名引入组件。\n';
+    return prompt;
+}
+/**
+ * 构建子组占位符提示词
+ * @param placeholders 占位符信息数组
+ * @returns 占位符提示词
+ */
+export function buildPlaceholderPrompt(placeholders) {
+    if (placeholders.length === 0) {
+        return '';
+    }
+    let prompt = '\n\n## 子组件占位符\n\n**重要**：以下占位符代表已实现的子组件，请转换格式但不要重新实现其内部逻辑。\n\n';
+    placeholders.forEach((placeholder) => {
+        const kebabName = placeholder.name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+        prompt += `- \`<${kebabName}>\` → \`<${placeholder.name} />\`\n`;
+    });
+    prompt += '\n将 HTML 标签转换为 React 组件引用，不需要添加对应的 import 语句，保持其在布局中的位置。\n';
+    return prompt;
+}