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

package/dist/build/component-mapping/adapters/web-adapter.js

@@ -0,0 +1,536 @@
+/**
+ * Web平台适配器 - 支持React/Vue/Web Components
+ */
+import { BasePlatformAdapter } from './base-adapter.js';
+import * as path from 'path';
+export class WebPlatformAdapter extends BasePlatformAdapter {
+    platform = 'web';
+    async scanComponents(projectPath, options) {
+        const components = [];
+        // 扫描React组件
+        const reactComponents = await this.scanReactComponents(projectPath, options);
+        components.push(...reactComponents);
+        // 扫描Vue组件
+        // const vueComponents = await this.scanVueComponents(projectPath, options)
+        // components.push(...vueComponents)
+        // TODO: 扫描Storybook (如果存在)
+        // const storybookComponents = await this.scanStorybook(projectPath)
+        // components.push(...storybookComponents)
+        return this.deduplicateComponents(components);
+    }
+    /**
+     * 扫描React组件
+     */
+    async scanReactComponents(projectPath, options) {
+        const components = [];
+        const files = await this.findFiles(projectPath, ['.tsx', '.jsx'], options);
+        console.log(`[scanReactComponents] 找到 ${files.length} 个 React 文件`);
+        // 只扫描路径中包含 "component" 的文件（不区分大小写）
+        const componentFiles = files.filter((file) => {
+            const normalizedPath = file.toLowerCase();
+            return normalizedPath.includes('component');
+        });
+        console.log(`[scanReactComponents] 过滤后，${componentFiles.length} 个文件在 component 目录中`);
+        for (const file of componentFiles) {
+            try {
+                const content = await this.readFile(file);
+                const extractedComponents = this.extractReactComponents(file, content, projectPath);
+                console.log(`[scanReactComponents] 文件 ${file} 提取到 ${extractedComponents.length} 个组件`);
+                components.push(...extractedComponents);
+            }
+            catch (error) {
+                console.warn(`解析React组件失败 ${file}:`, error);
+            }
+        }
+        return components;
+    }
+    /**
+     * 从文件内容中提取React组件
+     */
+    extractReactComponents(filePath, content, projectPath) {
+        // 将绝对路径转换为相对路径
+        const relativePath = path.relative(projectPath, filePath).replace(/\\/g, '/');
+        const components = [];
+        // 匹配函数组件:
+        // 1. export function ComponentName({...}: Type) {
+        // 2. export function ComponentName(...) {
+        // 3. export const ComponentName = ({...}: Type) => {
+        // 4. export const ComponentName = (...) => {
+        const functionComponentRegex = /export\s+(?:const|function)\s+([A-Z][a-zA-Z0-9]*)\s*(?:=\s*)?(?:\([^)]*\)|{[\s\S]*?})\s*(?::\s*[A-Z][a-zA-Z0-9]*)?\s*(?:=>|{)/g;
+        // 匹配类组件: export class ComponentName extends
+        const classComponentRegex = /export\s+class\s+([A-Z][a-zA-Z0-9]*)\s+extends/g;
+        // 匹配 default export: export default function ComponentName 或 export default ComponentName
+        const defaultExportRegex = /export\s+default\s+(?:function\s+)?([A-Z][a-zA-Z0-9]*)/g;
+        let match;
+        // 提取函数组件（具名导出）
+        while ((match = functionComponentRegex.exec(content)) !== null) {
+            const componentName = match[1];
+            const props = this.extractReactProps(content, componentName);
+            const metadata = this.extractReactMetadata(content, componentName);
+            components.push({
+                id: this.generateComponentId(filePath, componentName),
+                name: componentName,
+                path: relativePath,
+                platform: 'web',
+                type: this.inferComponentType(componentName),
+                props,
+                metadata: {
+                    ...metadata,
+                    framework: 'React',
+                    importType: 'named', // 具名导出
+                },
+            });
+        }
+        // 提取类组件（具名导出）
+        while ((match = classComponentRegex.exec(content)) !== null) {
+            const componentName = match[1];
+            const props = this.extractReactProps(content, componentName);
+            const metadata = this.extractReactMetadata(content, componentName);
+            components.push({
+                id: this.generateComponentId(filePath, componentName),
+                name: componentName,
+                path: relativePath,
+                platform: 'web',
+                type: this.inferComponentType(componentName),
+                props,
+                metadata: {
+                    ...metadata,
+                    framework: 'React',
+                    importType: 'named', // 具名导出
+                },
+            });
+        }
+        // 提取 default export 组件（默认导出）
+        while ((match = defaultExportRegex.exec(content)) !== null) {
+            const componentName = match[1];
+            // 检查是否已经添加过（避免重复）
+            const existingComponent = components.find((c) => c.name === componentName);
+            if (existingComponent) {
+                // 如果已经存在，更新为默认导出
+                existingComponent.metadata.importType = 'default';
+            }
+            else {
+                const props = this.extractReactProps(content, componentName);
+                const metadata = this.extractReactMetadata(content, componentName);
+                components.push({
+                    id: this.generateComponentId(filePath, componentName),
+                    name: componentName,
+                    path: relativePath,
+                    platform: 'web',
+                    type: this.inferComponentType(componentName),
+                    props,
+                    metadata: {
+                        ...metadata,
+                        framework: 'React',
+                        importType: 'default', // 默认导出
+                    },
+                });
+            }
+        }
+        console.log(`[extractReactComponents] 从 ${filePath} 提取到 ${components.length} 个组件:`, components.map(c => `${c.name} (${c.metadata.importType || 'named'})`));
+        return components;
+    }
+    /**
+     * 提取React组件的Props
+     */
+    extractReactProps(content, componentName) {
+        const props = [];
+        // 尝试匹配TypeScript接口定义
+        const interfaceRegex = new RegExp(`interface\\s+${componentName}Props\\s*{([^}]+)}`, 's');
+        const interfaceMatch = content.match(interfaceRegex);
+        if (interfaceMatch) {
+            const propsContent = interfaceMatch[1];
+            const propLines = propsContent.split('\n').filter((line) => line.trim());
+            for (const line of propLines) {
+                const propMatch = line.match(/(\w+)(\?)?:\s*([^;]+)/);
+                if (propMatch) {
+                    props.push({
+                        name: propMatch[1],
+                        type: propMatch[3].trim(),
+                        required: !propMatch[2], // 没有?表示必需
+                    });
+                }
+            }
+        }
+        // 尝试匹配解构参数
+        // 匹配: ComponentName = ({ prop1, prop2 }) => 或 ComponentName: ({ prop1, prop2 }) =>
+        // 支持类型注解: ComponentName = ({ prop1 }: { prop1?: string }) =>
+        const destructureRegex = new RegExp(`${componentName}\\s*[=:]\\s*\\(\\s*\\{([^}]+)\\}\\s*.*?\\s*\\)\\s*=>`);
+        const destructureMatch = content.match(destructureRegex);
+        if (destructureMatch && props.length === 0) {
+            const propsStr = destructureMatch[1];
+            if (propsStr) {
+                // 处理解构参数，可能包含类型注解，如: { className }: { className?: string }
+                // 只取第一个花括号内的内容（参数名部分），去掉类型注解
+                const paramPart = propsStr.split('}:')[0].trim();
+                const propNames = paramPart.split(',').map((p) => p.trim().split(':')[0].trim());
+                propNames.forEach((name) => {
+                    if (name && !name.startsWith('...')) {
+                        props.push({
+                            name,
+                            type: 'any',
+                            required: false,
+                        });
+                    }
+                });
+            }
+        }
+        return props;
+    }
+    /**
+     * 提取React组件元数据
+     */
+    extractReactMetadata(content, componentName) {
+        console.log(`\n[extractReactMetadata] ========== 开始提取组件 ${componentName} 的元数据 ==========`);
+        const metadata = {
+            tags: [],
+            dependencies: [],
+            styleProps: {},
+        };
+        // 提取JSDoc注释 - 只提取 /** */ 部分，不包含后面的代码
+        // 使用更精确的正则：匹配 /** 到 */ 的内容，且后面跟着组件定义
+        const jsDocPatterns = [
+            // 匹配: /** ... */ \n export function ComponentName
+            new RegExp(`(/\\*\\*[\\s\\S]*?\\*/)\\s*(?:export\\s+)?(?:const|function)\\s+${componentName}\\b`),
+            // 匹配: /** ... */ \n export default function ComponentName
+            new RegExp(`(/\\*\\*[\\s\\S]*?\\*/)\\s*export\\s+default\\s+(?:function\\s+)?${componentName}\\b`),
+        ];
+        let jsDocContent = null;
+        for (let i = 0; i < jsDocPatterns.length; i++) {
+            const pattern = jsDocPatterns[i];
+            const match = content.match(pattern);
+            if (match && match[1]) {
+                jsDocContent = match[1];
+                console.log(`[extractReactMetadata] 使用模式 ${i + 1} 匹配到 JSDoc (前100字符):`, jsDocContent.substring(0, 100));
+                break;
+            }
+        }
+        if (jsDocContent) {
+            console.log(`[extractReactMetadata] 完整 JSDoc 内容:\n${jsDocContent}`);
+            // 提取完整的描述（支持多行）
+            const descriptionLines = [];
+            const lines = jsDocContent.split('\n');
+            console.log(`[extractReactMetadata] JSDoc 共 ${lines.length} 行`);
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                const trimmedLine = line.trim();
+                console.log(`[extractReactMetadata] 处理第 ${i + 1} 行: "${line}"`);
+                // 跳过 /** 和 */ 行
+                if (trimmedLine === '/**' || trimmedLine === '*/') {
+                    console.log(`[extractReactMetadata]   -> 跳过开始/结束标记`);
+                    continue;
+                }
+                // 跳过 @ 标签行
+                if (trimmedLine.startsWith('* @') || trimmedLine.startsWith('@')) {
+                    console.log(`[extractReactMetadata]   -> 遇到 @ 标签，停止提取描述`);
+                    break;
+                }
+                // 提取 signature（格式: * signature: hash）
+                const signatureMatch = line.match(/^\s*\*\s*signature:\s*(.+)$/i);
+                if (signatureMatch) {
+                    metadata.signature = signatureMatch[1].trim();
+                    console.log(`[extractReactMetadata]   -> ✅ 提取到 signature: ${metadata.signature}`);
+                    continue;
+                }
+                // 提取描述行（以 * 开头，后面跟内容）
+                if (trimmedLine.startsWith('*')) {
+                    const descLine = line.replace(/^\s*\*\s*/, '').trim();
+                    if (descLine && !descLine.startsWith('@') && !descLine.toLowerCase().startsWith('signature:')) {
+                        console.log(`[extractReactMetadata]   -> 提取描述内容: "${descLine}"`);
+                        descriptionLines.push(descLine);
+                    }
+                }
+            }
+            if (descriptionLines.length > 0) {
+                metadata.description = descriptionLines.join(' ').trim();
+                console.log(`[extractReactMetadata] ✅ 最终 description: "${metadata.description}"`);
+            }
+            else {
+                console.log(`[extractReactMetadata] ⚠️ 未提取到 description`);
+            }
+            // 提取@tags
+            const tagMatches = jsDocContent.matchAll(/@(\w+)(?:\s+([^\n]*))?/g);
+            for (const match of tagMatches) {
+                metadata.tags.push(match[1]);
+                console.log(`[extractReactMetadata] 提取到 tag: @${match[1]}`);
+            }
+        }
+        else {
+            console.log(`[extractReactMetadata] ⚠️ 未找到 JSDoc 注释`);
+        }
+        // 如果没有找到 JSDoc，尝试提取单行注释
+        if (!metadata.description) {
+            console.log(`[extractReactMetadata] 尝试提取单行注释...`);
+            const singleLineCommentRegex = new RegExp(`//\\s*([^\\n]+)\\s*\\n\\s*(?:export\\s+)?(?:const|function)\\s+${componentName}`, 's');
+            const singleLineMatch = content.match(singleLineCommentRegex);
+            if (singleLineMatch) {
+                metadata.description = singleLineMatch[1].trim();
+                console.log(`[extractReactMetadata] ✅ 从单行注释提取到 description: "${metadata.description}"`);
+            }
+        }
+        // 提取import依赖
+        const importRegex = /import\s+.*\s+from\s+['"]([^'"]+)['"]/g;
+        let importMatch;
+        while ((importMatch = importRegex.exec(content)) !== null) {
+            metadata.dependencies.push(importMatch[1]);
+        }
+        // 提取样式相关的props
+        metadata.styleProps = this.extractStyleProps(content);
+        // 最终总结
+        console.log(`[extractReactMetadata] ========== 提取完成 ${componentName} ==========`);
+        console.log(`[extractReactMetadata] 结果摘要:`);
+        console.log(`  - description: ${metadata.description || '(无)'}`);
+        console.log(`  - signature: ${metadata.signature ? metadata.signature.substring(0, 16) + '...' : '(无)'}`);
+        console.log(`  - tags: [${metadata.tags.join(', ')}]`);
+        console.log(`  - dependencies: ${metadata.dependencies.length} 个`);
+        console.log(`[extractReactMetadata] =============================================\n`);
+        return metadata;
+    }
+    /**
+     * 提取样式属性
+     */
+    extractStyleProps(content) {
+        const styleProps = {};
+        // 查找常见的样式属性
+        const stylePatterns = [
+            { key: 'width', pattern: /width[:\s]*['"]?(\d+(?:px|%|rem|em)?)/i },
+            { key: 'height', pattern: /height[:\s]*['"]?(\d+(?:px|%|rem|em)?)/i },
+            { key: 'padding', pattern: /padding[:\s]*['"]?([^'";\n]+)/i },
+            { key: 'margin', pattern: /margin[:\s]*['"]?([^'";\n]+)/i },
+            { key: 'backgroundColor', pattern: /background-?color[:\s]*['"]?([^'";\n]+)/i },
+            { key: 'borderRadius', pattern: /border-?radius[:\s]*['"]?([^'";\n]+)/i },
+        ];
+        for (const { key, pattern } of stylePatterns) {
+            const match = content.match(pattern);
+            if (match) {
+                styleProps[key] = match[1].trim();
+            }
+        }
+        return styleProps;
+    }
+    /**
+     * 扫描Vue组件
+     */
+    async scanVueComponents(projectPath, options) {
+        const components = [];
+        const files = await this.findFiles(projectPath, ['.vue'], options);
+        // 只扫描路径中包含 "component" 的文件（不区分大小写）
+        const componentFiles = files.filter((file) => {
+            const normalizedPath = file.toLowerCase();
+            return normalizedPath.includes('component');
+        });
+        console.log(`[scanVueComponents] 过滤后，${componentFiles.length} 个文件在 component 目录中`);
+        for (const file of componentFiles) {
+            try {
+                const content = await this.readFile(file);
+                const component = this.extractVueComponent(file, content, projectPath);
+                if (component) {
+                    components.push(component);
+                }
+            }
+            catch (error) {
+                console.warn(`解析Vue组件失败 ${file}:`, error);
+            }
+        }
+        return components;
+    }
+    /**
+     * 从.vue文件提取组件信息
+     */
+    extractVueComponent(filePath, content, projectPath) {
+        const componentName = path.basename(filePath, '.vue');
+        // 将绝对路径转换为相对路径
+        const relativePath = path.relative(projectPath, filePath).replace(/\\/g, '/');
+        // 提取props定义
+        const props = this.extractVueProps(content);
+        // 提取元数据
+        const metadata = {
+            tags: [],
+            dependencies: [],
+            styleProps: this.extractStyleProps(content),
+            framework: 'Vue',
+        };
+        // 提取import和注释
+        const scriptMatch = content.match(/<script[^>]*>([\s\S]*?)<\/script>/);
+        if (scriptMatch) {
+            const scriptContent = scriptMatch[1];
+            // 提取 JSDoc 注释
+            const jsDocRegex = /\/\*\*([^*]|\*(?!\/))*\*\//s;
+            const jsDocMatch = scriptContent.match(jsDocRegex);
+            if (jsDocMatch) {
+                const jsDoc = jsDocMatch[0];
+                const descriptionLines = [];
+                const lines = jsDoc.split('\n');
+                for (const line of lines) {
+                    if (line.trim() === '/**' || line.trim() === '*/')
+                        continue;
+                    if (line.trim().startsWith('* @'))
+                        break;
+                    const descLine = line.replace(/^\s*\*\s*/, '').trim();
+                    if (descLine && !descLine.startsWith('@')) {
+                        descriptionLines.push(descLine);
+                    }
+                }
+                if (descriptionLines.length > 0) {
+                    metadata.description = descriptionLines.join(' ').trim();
+                }
+                // 提取@tags
+                const tagMatches = jsDoc.matchAll(/@(\w+)(?:\s+([^\n]*))?/g);
+                for (const match of tagMatches) {
+                    metadata.tags.push(match[1]);
+                }
+            }
+            // 如果没有找到 JSDoc，尝试提取单行注释
+            if (!metadata.description) {
+                const singleLineCommentRegex = /\/\/\s*([^\n]+)/;
+                const singleLineMatch = scriptContent.match(singleLineCommentRegex);
+                if (singleLineMatch) {
+                    metadata.description = singleLineMatch[1].trim();
+                }
+            }
+            // 提取import
+            const importRegex = /import\s+.*\s+from\s+['"]([^'"]+)['"]/g;
+            let importMatch;
+            while ((importMatch = importRegex.exec(scriptContent)) !== null) {
+                metadata.dependencies.push(importMatch[1]);
+            }
+        }
+        return {
+            id: this.generateComponentId(filePath),
+            name: componentName,
+            path: relativePath,
+            platform: 'web',
+            type: this.inferComponentType(componentName),
+            props,
+            metadata,
+        };
+    }
+    /**
+     * 提取Vue组件的Props
+     */
+    extractVueProps(content) {
+        const props = [];
+        // 匹配defineProps (Vue 3 Composition API)
+        const definePropsRegex = /defineProps<\{([^}]+)\}>/s;
+        const definePropsMatch = content.match(definePropsRegex);
+        if (definePropsMatch) {
+            const propsContent = definePropsMatch[1];
+            const propLines = propsContent.split('\n').filter((line) => line.trim());
+            for (const line of propLines) {
+                const propMatch = line.match(/(\w+)(\?)?:\s*([^;,\n]+)/);
+                if (propMatch) {
+                    props.push({
+                        name: propMatch[1],
+                        type: propMatch[3].trim(),
+                        required: !propMatch[2],
+                    });
+                }
+            }
+        }
+        // 匹配props对象 (Vue 2 Options API)
+        const propsObjectRegex = /props:\s*\{([^}]+)\}/s;
+        const propsObjectMatch = content.match(propsObjectRegex);
+        if (propsObjectMatch && props.length === 0) {
+            const propsContent = propsObjectMatch[1];
+            const propMatches = propsContent.matchAll(/(\w+):\s*\{([^}]+)\}/g);
+            for (const match of propMatches) {
+                const propName = match[1];
+                const propConfig = match[2];
+                const typeMatch = propConfig.match(/type:\s*(\w+)/);
+                const requiredMatch = propConfig.match(/required:\s*(true|false)/);
+                props.push({
+                    name: propName,
+                    type: typeMatch ? typeMatch[1] : 'any',
+                    required: requiredMatch ? requiredMatch[1] === 'true' : false,
+                });
+            }
+        }
+        return props;
+    }
+    async parseComponentMetadata(filePath) {
+        const content = await this.readFile(filePath);
+        if (filePath.endsWith('.vue')) {
+            const metadata = {
+                tags: [],
+                dependencies: [],
+                styleProps: this.extractStyleProps(content),
+                framework: 'Vue',
+            };
+            // 提取import和注释
+            const scriptMatch = content.match(/<script[^>]*>([\s\S]*?)<\/script>/);
+            if (scriptMatch) {
+                const scriptContent = scriptMatch[1];
+                // 提取 JSDoc 注释
+                const jsDocRegex = /\/\*\*([^*]|\*(?!\/))*\*\//s;
+                const jsDocMatch = scriptContent.match(jsDocRegex);
+                if (jsDocMatch) {
+                    const jsDoc = jsDocMatch[0];
+                    const descriptionLines = [];
+                    const lines = jsDoc.split('\n');
+                    for (const line of lines) {
+                        if (line.trim() === '/**' || line.trim() === '*/')
+                            continue;
+                        if (line.trim().startsWith('* @'))
+                            break;
+                        const descLine = line.replace(/^\s*\*\s*/, '').trim();
+                        if (descLine && !descLine.startsWith('@')) {
+                            descriptionLines.push(descLine);
+                        }
+                    }
+                    if (descriptionLines.length > 0) {
+                        metadata.description = descriptionLines.join(' ').trim();
+                    }
+                    // 提取@tags
+                    const tagMatches = jsDoc.matchAll(/@(\w+)(?:\s+([^\n]*))?/g);
+                    for (const match of tagMatches) {
+                        metadata.tags.push(match[1]);
+                    }
+                }
+                // 如果没有找到 JSDoc，尝试提取单行注释
+                if (!metadata.description) {
+                    const singleLineCommentRegex = /\/\/\s*([^\n]+)/;
+                    const singleLineMatch = scriptContent.match(singleLineCommentRegex);
+                    if (singleLineMatch) {
+                        metadata.description = singleLineMatch[1].trim();
+                    }
+                }
+                // 提取import
+                const importRegex = /import\s+.*\s+from\s+['"]([^'"]+)['"]/g;
+                let importMatch;
+                while ((importMatch = importRegex.exec(scriptContent)) !== null) {
+                    metadata.dependencies.push(importMatch[1]);
+                }
+            }
+            return metadata;
+        }
+        else {
+            // React/JSX
+            const componentName = filePath.match(/([A-Z][a-zA-Z0-9]*)\.(tsx?|jsx?)$/)?.[1] || '';
+            return this.extractReactMetadata(content, componentName);
+        }
+    }
+    generateImportCode(component, targetPath) {
+        if (!targetPath) {
+            return `import { ${component.name} } from '${component.path}'`;
+        }
+        const relativePath = this.getRelativePath(targetPath, component.path);
+        return `import { ${component.name} } from '${relativePath}'`;
+    }
+    generateUsageCode(component, props, styles) {
+        const propsStr = Object.entries(props)
+            .map(([key, value]) => {
+            if (typeof value === 'string') {
+                return `${key}="${value}"`;
+            }
+            else if (typeof value === 'boolean') {
+                return value ? key : `${key}={false}`;
+            }
+            else {
+                return `${key}={${JSON.stringify(value)}}`;
+            }
+        })
+            .join(' ');
+        const styleStr = Object.keys(styles).length > 0 ? ` style={${JSON.stringify(styles)}}` : '';
+        return `<${component.name}${propsStr ? ' ' + propsStr : ''}${styleStr} />`;
+    }
+}

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

@@ -0,0 +1,32 @@
+/**
+ * 组件映射系统 - 主入口
+ */
+export * from './types.js';
+export * from './adapters/base-adapter.js';
+export * from './adapters/web-adapter.js';
+export * from './adapters/ios-adapter.js';
+export * from './storage.js';
+export * from './adapter-manager.js';
+import { LocalMappingStorage } from './storage.js';
+import { AdapterManager } from './adapter-manager.js';
+/**
+ * 组件映射系统管理器
+ */
+export class ComponentMappingSystem {
+    adapterManager;
+    storage;
+    constructor(projectPath = '.') {
+        this.storage = new LocalMappingStorage(projectPath);
+        this.adapterManager = new AdapterManager();
+    }
+    /**
+     * 初始化系统
+     */
+    async initialize() { }
+    /**
+     * 获取存储实例
+     */
+    getStorage() {
+        return this.storage;
+    }
+}