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

package/dist/build/core/sampling.js

@@ -0,0 +1,382 @@
+import { getBoundingBox, getCode } from 'sloth-d2c-node/convert';
+import { Logger } from '../utils/logger.js';
+import { resetNodeListPosition, replaceImageSrc } from '../utils/utils.js';
+import { extractCodeAndComponents } from '../utils/extract.js';
+import { buildComponentContext, buildUserPromptText, buildPlaceholderPrompt } from './prompt-builder.js';
+/**
+ * 构建嵌套结构映射
+ * @param groupsData 分组数据数组
+ * @returns 嵌套结构信息
+ */
+export function buildNestingStructure(groupsData) {
+    const childrenMap = new Map();
+    const groupMap = new Map();
+    const allChildIndices = new Set();
+    Logger.log(`开始构建嵌套结构，groupsData 数量: ${groupsData.length}`);
+    // 构建映射
+    groupsData.forEach((group) => {
+        groupMap.set(group.groupIndex, group);
+        // 如果 group 有 children 字段，使用它
+        if (group.children && Array.isArray(group.children) && group.children.length > 0) {
+            Logger.log(`组 ${group.groupIndex} 有子组:`, group.children);
+            childrenMap.set(group.groupIndex, group.children);
+            group.children.forEach((childIndex) => {
+                allChildIndices.add(childIndex);
+            });
+        }
+        else {
+            Logger.log(`组 ${group.groupIndex} 没有子组字段或子组为空`);
+        }
+    });
+    // 找出根组（没有作为其他组的子组）
+    const rootGroups = groupsData.filter((group) => !allChildIndices.has(group.groupIndex)).map((group) => group.groupIndex);
+    Logger.log(`嵌套结构构建完成:`);
+    Logger.log(`  - 总组数: ${groupsData.length}`);
+    Logger.log(`  - 有子组的组数: ${childrenMap.size}`);
+    Logger.log(`  - 根组数量: ${rootGroups.length}`);
+    Logger.log(`  - 根组索引:`, rootGroups);
+    Logger.log(`  - 子组索引集合:`, Array.from(allChildIndices));
+    Logger.log(`  - 子组映射详情:`, Array.from(childrenMap.entries()).map(([k, v]) => `组${k} -> [${v.join(', ')}]`));
+    return { childrenMap, rootGroups, groupMap, allChildIndices };
+}
+/**
+ * 处理组件映射（如果已映射则跳过采样）
+ * @param group 分组数据
+ * @param componentMappings 组件映射数组
+ * @returns 采样结果或 null
+ */
+export function handleComponentMapping(group, componentMappings) {
+    if (group.componentMapping) {
+        const componentName = group.componentMapping.name || `Group${group.groupIndex + 1}`;
+        group.name = componentName;
+        componentMappings.push({
+            groupIndex: group.groupIndex,
+            groupName: componentName,
+            component: group.componentMapping,
+        });
+        return { skipped: true, groupIndex: group.groupIndex, componentName };
+    }
+    return null;
+}
+/**
+ * 注入子组占位符到父组的 nodeList
+ * @param nodeList 节点列表
+ * @param childResults 子组采样结果
+ * @param nestingInfo 嵌套结构信息
+ * @param parentGroupIndex 父组索引
+ */
+export function injectChildPlaceholders(nodeList, childResults, nestingInfo, parentGroupIndex) {
+    const sampledChildren = childResults.filter((r) => !r.skipped && r.code);
+    if (sampledChildren.length === 0) {
+        Logger.log(`组 ${parentGroupIndex} 没有已采样的子组，跳过占位符注入`);
+        return;
+    }
+    Logger.log(`组 ${parentGroupIndex} 开始注入 ${sampledChildren.length} 个子组占位符`);
+    // 收集所有需要移除的子组节点 ID
+    const childNodeIdsToRemove = new Set();
+    sampledChildren.forEach((childResult) => {
+        const childGroup = nestingInfo.groupMap.get(childResult.groupIndex);
+        if (childGroup && childGroup.nodeList) {
+            childGroup.nodeList.forEach((node) => {
+                childNodeIdsToRemove.add(node.id);
+            });
+        }
+    });
+    // 从 nodeList 中移除子组的旧元素
+    const originalLength = nodeList.length;
+    for (let i = nodeList.length - 1; i >= 0; i--) {
+        if (childNodeIdsToRemove.has(nodeList[i].id)) {
+            nodeList.splice(i, 1);
+        }
+    }
+    Logger.log(`  已移除 ${originalLength - nodeList.length} 个子组元素`);
+    // 注入占位符
+    sampledChildren.forEach((childResult) => {
+        const childGroup = nestingInfo.groupMap.get(childResult.groupIndex);
+        if (childGroup && childGroup.nodeList) {
+            const { x, y, width, height, absoluteRenderX, absoluteRenderY, absoluteRenderWidth, absoluteRenderHeight } = getBoundingBox(childGroup.nodeList);
+            const placeholderName = childResult.componentName || childGroup.name || `Group${childResult.groupIndex + 1}`;
+            Logger.log(`  注入子组 ${childResult.groupIndex} 占位符: ${placeholderName}, 位置: (${x}, ${y}), 尺寸: ${width}×${height}`);
+            nodeList.push({
+                id: `G_${childResult.groupIndex}`,
+                name: placeholderName,
+                x,
+                y,
+                width,
+                height,
+                debuggerInfo: {
+                    originNode: {
+                        absoluteBoundingBox: {
+                            x: absoluteRenderX,
+                            y: absoluteRenderY,
+                            width: absoluteRenderWidth,
+                            height: absoluteRenderHeight,
+                        },
+                        absoluteRenderBounds: {
+                            x: absoluteRenderX,
+                            y: absoluteRenderY,
+                            width: absoluteRenderWidth,
+                            height: absoluteRenderHeight,
+                        },
+                    },
+                },
+                parentId: nodeList.find((node) => childGroup.nodeList?.find((groupNode) => groupNode.parentId === node.id))?.id,
+                type: 'COMPONENT',
+            });
+        }
+    });
+    Logger.log(`组 ${parentGroupIndex} 占位符注入完成，当前 nodeList 长度: ${nodeList.length}`);
+}
+/**
+ * 单个组的采样逻辑
+ * @param group 分组数据
+ * @param nodeList 节点列表
+ * @param config 采样配置
+ * @returns 采样结果
+ */
+export async function sampleSingleGroup(group, nodeList, config) {
+    const { d2cNodeList, imageMap, convertConfig, chunkPrompt, mcpServer, componentMappings, codeSnippets, componentContexts } = config;
+    Logger.log(`开始采样组 ${group.groupIndex}, 元素数量: ${group.elements.length}, nodeList 长度: ${nodeList.length}`);
+    // 检查组件映射
+    const mappingResult = handleComponentMapping(group, componentMappings);
+    if (mappingResult) {
+        Logger.log(`组 ${group.groupIndex} 已映射组件，跳过采样: ${mappingResult.componentName}`);
+        return mappingResult;
+    }
+    // 重置节点位置
+    const resetNodeList = resetNodeListPosition(nodeList);
+    Logger.log(`组 ${group.groupIndex} 节点位置已重置，准备生成代码`);
+    // 获取代码
+    const code = await getCode({
+        d2cNodeList: resetNodeList,
+        config: convertConfig,
+    });
+    Logger.log(`组 ${group.groupIndex} 代码生成完成，代码长度: ${code.length}`);
+    // 使用 imageMap 的 path 替换 code 中对应的 src
+    const replacedCode = replaceImageSrc(code, imageMap);
+    const componentName = `Group${group.groupIndex + 1}`;
+    const codeWithCustomName = replacedCode.replace(/\bApp\b/g, componentName);
+    // 处理组件上下文
+    const { processedUserPrompt, componentContextPrompt } = buildComponentContext(group);
+    const userPromptText = buildUserPromptText(processedUserPrompt);
+    // 收集组件上下文信息
+    if (group.componentContext && Array.isArray(group.componentContext) && group.componentContext.length > 0) {
+        componentContexts.push({
+            groupIndex: group.groupIndex,
+            groupName: group.name || componentName,
+            components: group.componentContext,
+        });
+        Logger.log(`组 ${group.groupIndex} 已收集 ${group.componentContext.length} 个组件上下文`);
+    }
+    // 检测占位符元素（子组件）
+    const placeholders = nodeList
+        .filter((node) => node.type === 'COMPONENT' && node.id?.startsWith('G_'))
+        .map((node) => ({
+        name: node.name || 'Unknown',
+    }));
+    const placeholderPrompt = buildPlaceholderPrompt(placeholders);
+    Logger.log(`组 ${group.groupIndex} 开始调用 AI 采样，代码长度: ${codeWithCustomName.length}, 是否有用户提示: ${!!group.userPrompt}, 是否有组件上下文: ${!!(group.componentContext && group.componentContext.length > 0)}, 占位符数量: ${placeholders.length}`);
+    // 执行采样
+    try {
+        const { content: { text }, } = await mcpServer.server.createMessage({
+            messages: [
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: chunkPrompt.replace(/{FRAMEWORK}/g, convertConfig.convertSetting?.framework || '') +
+                            userPromptText +
+                            componentContextPrompt +
+                            placeholderPrompt,
+                    },
+                },
+                {
+                    role: 'user',
+                    content: {
+                        type: 'text',
+                        text: codeWithCustomName,
+                    },
+                },
+            ],
+            maxTokens: 48000,
+        }, { timeout: 5 * 60 * 1000 });
+        const { code: chunkCode, componentName: sampledName } = extractCodeAndComponents(text)[0];
+        Logger.log(`组 ${group.groupIndex} 采样成功，组件名称: ${sampledName}, 代码长度: ${chunkCode.length}`);
+        group.name = sampledName;
+        // 如果分组被标记且有截图，注入 signature 注释
+        let finalCode = chunkCode;
+        if (group.marked && group.screenshot?.hash) {
+            const document = `/**
+ * ${sampledName} 组件
+ * signature: ${group.screenshot.hash}
+ */
+`;
+            finalCode = document + chunkCode;
+            Logger.log(`组 ${group.groupIndex} 已标记，注入 signature: ${group.screenshot.hash}, 组件名: ${sampledName}`);
+        }
+        codeSnippets.push(finalCode);
+        return {
+            code: chunkCode,
+            componentName: sampledName,
+            skipped: false,
+            groupIndex: group.groupIndex,
+        };
+    }
+    catch (e) {
+        Logger.log(`组 ${group.groupIndex} 调用采样出错:`, e);
+        let fallbackCode = userPromptText + componentContextPrompt + placeholderPrompt + `\n // Group${group.groupIndex + 1} \n` + codeWithCustomName;
+        // 如果分组被标记且有截图，注入 signature 注释
+        if (group.marked && group.screenshot?.hash) {
+            const document = `/**
+ * signature: ${group.screenshot.hash}
+ */
+`;
+            fallbackCode = document + fallbackCode;
+        }
+        codeSnippets.push(fallbackCode);
+        Logger.log(`组 ${group.groupIndex} 使用降级代码，长度: ${fallbackCode.length}`);
+        return {
+            code: fallbackCode,
+            componentName,
+            skipped: false,
+            groupIndex: group.groupIndex,
+        };
+    }
+}
+/**
+ * 深度遍历采样函数（后序遍历：先子后父）
+ * @param groupIndex 组索引
+ * @param nestingInfo 嵌套结构信息
+ * @param config 采样配置
+ * @param samplingResults 采样结果映射
+ * @param depth 递归深度
+ * @returns 采样结果
+ */
+export async function sampleGroupRecursive(groupIndex, nestingInfo, config, samplingResults, depth = 0) {
+    const { d2cNodeList } = config;
+    const indent = '  '.repeat(depth);
+    Logger.log(`${indent}[深度 ${depth}] 开始处理组 ${groupIndex}`);
+    const group = nestingInfo.groupMap.get(groupIndex);
+    if (!group) {
+        Logger.log(`${indent}[深度 ${depth}] 组 ${groupIndex} 不存在，跳过`);
+        return { skipped: true, groupIndex };
+    }
+    // 先递归处理所有子组（后序遍历）
+    const childIndices = nestingInfo.childrenMap.get(groupIndex) || [];
+    Logger.log(`${indent}[深度 ${depth}] 组 ${groupIndex} 有 ${childIndices.length} 个子组:`, childIndices);
+    const childResults = [];
+    for (const childIndex of childIndices) {
+        Logger.log(`${indent}[深度 ${depth}] 开始处理子组 ${childIndex}`);
+        const childResult = await sampleGroupRecursive(childIndex, nestingInfo, config, samplingResults, depth + 1);
+        childResults.push(childResult);
+        samplingResults.set(childIndex, childResult);
+        Logger.log(`${indent}[深度 ${depth}] 子组 ${childIndex} 处理完成，${childResult.skipped ? '已跳过' : '已采样'}, 组件名: ${childResult.componentName || 'N/A'}`);
+    }
+    // 处理当前组
+    const groupElements = group.elements;
+    let nodeList = d2cNodeList.filter((node) => groupElements.includes(node.id));
+    group.nodeList = nodeList;
+    Logger.log(`${indent}[深度 ${depth}] 组 ${groupIndex} 初始 nodeList 长度: ${nodeList.length}, 元素数量: ${groupElements.length}`);
+    // 如果有子组已采样，注入子组占位符
+    injectChildPlaceholders(nodeList, childResults, nestingInfo, groupIndex);
+    // 使用通用采样函数
+    Logger.log(`${indent}[深度 ${depth}] 组 ${groupIndex} 开始采样（注入占位符后 nodeList 长度: ${nodeList.length}）`);
+    const result = await sampleSingleGroup(group, nodeList, config);
+    Logger.log(`${indent}[深度 ${depth}] 组 ${groupIndex} 采样完成，${result.skipped ? '已跳过' : '已采样'}, 组件名: ${result.componentName || 'N/A'}`);
+    return result;
+}
+/**
+ * 处理分组采样的主流程
+ * @param groupsData 分组数据
+ * @param config 采样配置
+ * @returns 是否支持采样
+ */
+export async function processSampling(groupsData, config) {
+    const { d2cNodeList, componentMappings, codeSnippets } = config;
+    let isSupportSampling = true;
+    if (!groupsData || groupsData.length === 0) {
+        return isSupportSampling;
+    }
+    Logger.log(`开始处理 groupsData，总数: ${groupsData.length}`);
+    Logger.log(`groupsData 详情:`, groupsData.map((g) => ({ groupIndex: g.groupIndex, hasChildren: !!g.children, children: g.children })));
+    // 构建嵌套结构
+    const nestingInfo = buildNestingStructure(groupsData);
+    const samplingResults = new Map();
+    // 如果有嵌套结构，使用深度遍历
+    if (nestingInfo.rootGroups.length > 0 && nestingInfo.childrenMap.size > 0) {
+        Logger.log(`检测到嵌套结构，根组数量: ${nestingInfo.rootGroups.length}`);
+        Logger.log(`开始深度遍历采样，根组索引:`, nestingInfo.rootGroups);
+        // 串行处理所有根组（深度优先，后序遍历）
+        for (const rootIndex of nestingInfo.rootGroups) {
+            Logger.log(`\n========== 开始处理根组 ${rootIndex} ==========`);
+            try {
+                await sampleGroupRecursive(rootIndex, nestingInfo, config, samplingResults, 0);
+            }
+            catch (e) {
+                isSupportSampling = false;
+                Logger.log(`根组 ${rootIndex} 处理出错:`, e);
+            }
+            Logger.log(`========== 根组 ${rootIndex} 处理完成 ==========\n`);
+        }
+        // 处理没有嵌套关系的独立组
+        const processedGroupIndices = new Set();
+        nestingInfo.rootGroups.forEach((rootIndex) => {
+            processedGroupIndices.add(rootIndex);
+            const collectChildren = (parentIndex) => {
+                const children = nestingInfo.childrenMap.get(parentIndex) || [];
+                children.forEach((childIndex) => {
+                    processedGroupIndices.add(childIndex);
+                    collectChildren(childIndex);
+                });
+            };
+            collectChildren(rootIndex);
+        });
+        const independentGroups = groupsData.filter((group) => !processedGroupIndices.has(group.groupIndex) && !nestingInfo.childrenMap.has(group.groupIndex) && !nestingInfo.rootGroups.includes(group.groupIndex));
+        if (independentGroups.length > 0) {
+            Logger.log(`发现 ${independentGroups.length} 个独立组（不在嵌套结构中）`);
+            Logger.log(`已处理的组索引:`, Array.from(processedGroupIndices));
+            Logger.log(`独立组索引:`, independentGroups.map((g) => g.groupIndex));
+            for (const group of independentGroups) {
+                Logger.log(`处理独立组 ${group.groupIndex}`);
+                const groupElements = group.elements;
+                const nodeList = d2cNodeList.filter((node) => groupElements.includes(node.id));
+                group.nodeList = nodeList;
+                try {
+                    await sampleSingleGroup(group, nodeList, config);
+                }
+                catch (e) {
+                    isSupportSampling = false;
+                    Logger.log(`独立组 ${group.groupIndex} 处理出错:`, e);
+                }
+            }
+        }
+        else {
+            Logger.log(`没有独立组需要处理，所有组都已在嵌套结构中处理`);
+        }
+    }
+    else {
+        // 没有嵌套结构，使用原来的平铺方式
+        Logger.log('未检测到嵌套结构，使用平铺方式采样');
+        Logger.log(`将按顺序处理 ${groupsData.length} 个组`);
+        for (const group of groupsData) {
+            Logger.log(`\n--- 处理组 ${group.groupIndex} (平铺模式) ---`);
+            const groupElements = group.elements;
+            const nodeList = d2cNodeList.filter((node) => groupElements.includes(node.id));
+            group.nodeList = nodeList;
+            try {
+                await sampleSingleGroup(group, nodeList, config);
+            }
+            catch (e) {
+                isSupportSampling = false;
+                Logger.log(`组 ${group.groupIndex} 处理出错:`, e);
+            }
+            Logger.log(`--- 组 ${group.groupIndex} 处理完成 ---\n`);
+        }
+    }
+    Logger.log(`\n采样完成统计:`);
+    Logger.log(`  - 总组数: ${groupsData.length}`);
+    Logger.log(`  - 已生成代码片段数: ${codeSnippets.length}`);
+    Logger.log(`  - 已映射组件数: ${componentMappings.length}`);
+    Logger.log(`  - 组件映射详情:`, componentMappings.map((m) => `组${m.groupIndex} -> ${m.groupName}`));
+    return isSupportSampling;
+}

package/dist/build/core/types.js

@@ -0,0 +1 @@
+export {};