import { BaseView } from './BaseView'; import { ContainerConfigData, ConfigViewData } from '../types/ViewTypes'; import { ModuleFolder } from '../types/CommonTypes'; // Git 分支接口 interface GitBranch { name: string; isCurrent: boolean; selected?: boolean; } // Git 文件树接口 interface GitFileTree { name: string; type: 'file' | 'folder'; path: string; children?: GitFileTree[]; } // 树状分支节点接口 interface BranchTreeNode { name: string; fullName: string; isLeaf: boolean; children: BranchTreeNode[]; level: number; expanded?: boolean; branch?: GitBranch; } export class ConfigView extends BaseView { render(data?: ContainerConfigData & { moduleFolders?: ModuleFolder[]; currentModuleFolder?: ModuleFolder; moduleFolderFileTree?: GitFileTree[]; moduleFolderLoading?: boolean; gitBranches?: GitBranch[]; }): string { const container = data?.container; const configs = data?.configs || []; const moduleFolders = data?.moduleFolders || []; const currentModuleFolder = data?.currentModuleFolder; const moduleFolderFileTree = data?.moduleFolderFileTree || []; const moduleFolderLoading = data?.moduleFolderLoading || false; const gitBranches = data?.gitBranches || []; // 生成配置列表的 HTML - 包含配置文件和模块文件夹 const configsHtml = configs.map((config: ConfigViewData) => ` 🔧 ${config.name} local 📄 ${config.fileName} `).join(''); // 生成模块文件夹的 HTML - 按类别分类显示 const moduleFoldersHtml = moduleFolders.map((folder: ModuleFolder) => { const icon = '📁'; // 根据类型和上传状态确定类别显示 let category = folder.type === 'git' ? 'git' : 'local'; if (folder.uploaded) { category += '（已上传）'; } const fileName = folder.localPath.split('/').pop() || ''; return ` ${icon} ${folder.name} ${category} 📄 ${fileName} `; }).join(''); // 生成分支选择的 HTML - 使用树状结构（首次渲染可以为空，后续通过 message 更新） const branchesHtml = gitBranches.length > 0 ? this.generateBranchesTreeHtml(gitBranches) : ''; return ` 配置管理 ${this.getStyles()}

⚙️ 配置管理 - ${container?.name || '未知容器'}

📋 配置文件管理

${configsHtml} ${moduleFoldersHtml}
配置 类别 文件/文件夹 操作

📚 模块云仓库

🔗 获取仓库

从仓库配置中选择 Git 仓库，随后可以选择分支并克隆到本地
${branchesHtml}
`; } private generateBranchesTreeHtml(branches: GitBranch[]): string { if (branches.length === 0) return ''; const branchTree = this.buildBranchTree(branches); let html = '
'; html += '

🌳 分支树

'; html += '
'; html += ''; html += ''; html += '
'; html += '
'; html += this.renderBranchTreeNodes(branchTree, 0); html += '
'; html += '
'; html += ''; html += ''; html += '
'; return html; } private buildBranchTree(branches: GitBranch[]): BranchTreeNode[] { const root: BranchTreeNode[] = []; branches.forEach(branch => { const parts = branch.name.split('/'); let currentLevel = root; for (let i = 0; i < parts.length; i++) { const part = parts[i]; const isLeaf = i === parts.length - 1; const fullName = parts.slice(0, i + 1).join('/'); let node = currentLevel.find(n => n.name === part); if (!node) { node = { name: part, fullName: fullName, isLeaf: isLeaf, children: [], level: i, expanded: true }; currentLevel.push(node); } if (isLeaf) { node.branch = branch; } currentLevel = node.children; } }); return root; } private renderBranchTreeNodes(nodes: BranchTreeNode[], level: number): string { let html = ''; nodes.forEach(node => { const indent = level * 20; const nodeId = node.fullName.replace(/[^a-zA-Z0-9-]/g, '-'); if (node.isLeaf) { html += '
'; html += ''; html += '🌿'; html += ''; html += node.name; html += (node.branch && node.branch.isCurrent ? ' ⭐' : ''); html += ''; html += '
'; } else { html += '
'; html += ''; html += (node.expanded ? '🪵' : '🪵'); html += ''; html += '🪵'; html += '' + node.name + ''; html += '
'; if (node.expanded && node.children && node.children.length > 0) { html += '
'; html += this.renderBranchTreeNodes(node.children, level + 1); html += '
'; } } }); return html; } private countLeafNodes(nodes: BranchTreeNode[]): number { let count = 0; nodes.forEach(node => { if (node.isLeaf) { count++; } else { count += this.countLeafNodes(node.children); } }); return count; } }