// src/panels/views/ConfigView.ts import { BaseView } from './BaseView'; import { ContainerConfigData, ConfigViewData } from '../types/ViewTypes'; // Git 分支接口 interface GitBranch { name: string; isCurrent: boolean; isRemote: boolean; selected?: boolean; } // Git 文件树接口 interface GitFileTree { name: string; type: 'file' | 'folder'; path: string; children?: GitFileTree[]; } export class ConfigView extends BaseView { render(data?: ContainerConfigData & { gitRepos?: any[]; currentGitRepo?: any; gitFileTree?: GitFileTree[]; gitLoading?: boolean; gitBranches?: GitBranch[]; gitRepoUrl?: string; }): string { const container = data?.container; const configs = data?.configs || []; const gitRepos = data?.gitRepos || []; const currentGitRepo = data?.currentGitRepo; const gitFileTree = data?.gitFileTree || []; const gitLoading = data?.gitLoading || false; const gitBranches = data?.gitBranches || []; const gitRepoUrl = data?.gitRepoUrl || ''; // 生成配置列表的 HTML const configsHtml = configs.map((config: ConfigViewData) => ` 🔧 ${config.name} 📄 ${config.fileName} `).join(''); // 生成 Git 仓库列表的 HTML const gitReposHtml = gitRepos.map(repo => ` 📁 ${repo.name}
${repo.url}
分支: ${repo.branch} | 最后同步: ${repo.lastSync}
打开 同步 `).join(''); // 生成分支选择的 HTML const branchesHtml = gitBranches.length > 0 ? this.generateBranchesHtml(gitBranches) : ''; // 生成文件树的 HTML const fileTreeHtml = gitFileTree.length > 0 ? this.renderFileTree(gitFileTree) : '
选择仓库以浏览文件
'; return ` 配置管理 ${this.getStyles()}

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

📋 配置文件管理

${configsHtml}
配置 文件 操作

📚 Git 仓库管理

🔗 添加 Git 仓库

${branchesHtml}
${currentGitRepo ? `
当前仓库: ${currentGitRepo.name} (${currentGitRepo.url})
` : ''}
${gitReposHtml}
仓库 操作 管理

📂 文件浏览器

${gitLoading ? '
🔄 加载中...
' : fileTreeHtml}
`; } private generateBranchesHtml(branches: GitBranch[]): string { if (branches.length === 0) return ''; let html = '
'; html += '

🌿 选择要克隆的分支 (共 ' + branches.length + ' 个)

'; html += '
'; branches.forEach(branch => { const branchId = 'branch-' + branch.name.replace(/[^a-zA-Z0-9]/g, '-'); html += '
'; html += ''; html += '
'; }); html += '
'; html += '
'; html += ''; html += ''; html += '
'; return html; } private renderFileTree(nodes: GitFileTree[], level = 0): string { return nodes.map(node => { const paddingLeft = level * 20; if (node.type === 'folder') { return `
📁 ${node.name}
${this.renderFileTree(node.children || [], level + 1)}
`; } else { return `
📄 ${node.name}
`; } }).join(''); } }