添加了一个可视化仓库功能
This commit is contained in:
xubing
@@ -45,7 +45,6 @@ export class ConfigView extends BaseView {
|
||||
moduleFolderFileTree?: GitFileTree[];
|
||||
moduleFolderLoading?: boolean;
|
||||
gitBranches?: GitBranch[];
|
||||
gitRepoUrl?: string;
|
||||
}): string {
|
||||
const container = data?.container;
|
||||
const configs = data?.configs || [];
|
||||
@@ -54,7 +53,6 @@ export class ConfigView extends BaseView {
|
||||
const moduleFolderFileTree = data?.moduleFolderFileTree || [];
|
||||
const moduleFolderLoading = data?.moduleFolderLoading || false;
|
||||
const gitBranches = data?.gitBranches || [];
|
||||
const gitRepoUrl = data?.gitRepoUrl || '';
|
||||
|
||||
// 生成配置列表的 HTML - 包含配置文件和模块文件夹
|
||||
const configsHtml = configs.map((config: ConfigViewData) => `
|
||||
@@ -74,32 +72,32 @@ export class ConfigView extends BaseView {
|
||||
`).join('');
|
||||
|
||||
// 生成模块文件夹的 HTML - 按类别分类显示
|
||||
const moduleFoldersHtml = moduleFolders.map((folder: ModuleFolder) => {
|
||||
const icon = folder.type === 'git' ? '📁' : '📁';
|
||||
// 根据类型和上传状态确定类别显示
|
||||
let category = folder.type === 'git' ? 'git' : 'local';
|
||||
if (folder.uploaded) {
|
||||
category += '（已上传）';
|
||||
}
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td>
|
||||
<span class="editable">${icon} ${folder.name}</span>
|
||||
</td>
|
||||
<td class="category-${folder.type}">${category}</td>
|
||||
<td>
|
||||
<span class="clickable" onclick="openTheModuleFolder('${folder.id}', '${folder.type}')">${folder.localPath.split('/').pop()}</span>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-upload" onclick="uploadModuleFolder('${folder.id}', '${folder.type}')" style="margin-right: 5px;">上传</button>
|
||||
<button class="btn-delete" onclick="deleteModuleFolder('${folder.id}')">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
const moduleFoldersHtml = moduleFolders.map((folder: ModuleFolder) => {
|
||||
const icon = folder.type === 'git' ? '📁' : '📁';
|
||||
// 根据类型和上传状态确定类别显示
|
||||
let category = folder.type === 'git' ? 'git' : 'local';
|
||||
if (folder.uploaded) {
|
||||
category += '（已上传）';
|
||||
}
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td>
|
||||
<span class="editable">${icon} ${folder.name}</span>
|
||||
</td>
|
||||
<td class="category-${folder.type}">${category}</td>
|
||||
<td>
|
||||
<span class="clickable" onclick="openTheModuleFolder('${folder.id}', '${folder.type}')">${folder.localPath.split('/').pop()}</span>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-upload" onclick="uploadModuleFolder('${folder.id}', '${folder.type}')" style="margin-right: 5px;">上传</button>
|
||||
<button class="btn-delete" onclick="deleteModuleFolder('${folder.id}')">删除</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// 生成分支选择的 HTML - 使用树状结构
|
||||
// 生成分支选择的 HTML - 使用树状结构（首次渲染可以为空，后续通过 message 更新）
|
||||
const branchesHtml = gitBranches.length > 0 ? this.generateBranchesTreeHtml(gitBranches) : '';
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
@@ -285,25 +283,25 @@ const moduleFoldersHtml = moduleFolders.map((folder: ModuleFolder) => {
|
||||
}
|
||||
|
||||
/* 类别标签样式 */
|
||||
.category-git {
|
||||
color: var(--vscode-gitDecoration-untrackedResourceForeground);
|
||||
font-weight: bold;
|
||||
}
|
||||
.category-git {
|
||||
color: var(--vscode-gitDecoration-untrackedResourceForeground);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.category-local {
|
||||
color: var(--vscode-charts-orange);
|
||||
font-weight: bold;
|
||||
}
|
||||
.category-local {
|
||||
color: var(--vscode-charts-orange);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.category-git（已上传） {
|
||||
color: var(--vscode-gitDecoration-addedResourceForeground);
|
||||
font-weight: bold;
|
||||
}
|
||||
.category-git（已上传） {
|
||||
color: var(--vscode-gitDecoration-addedResourceForeground);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.category-local（已上传） {
|
||||
color: var(--vscode-gitDecoration-addedResourceForeground);
|
||||
font-weight: bold;
|
||||
}
|
||||
.category-local（已上传） {
|
||||
color: var(--vscode-gitDecoration-addedResourceForeground);
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -342,15 +340,14 @@ const moduleFoldersHtml = moduleFolders.map((folder: ModuleFolder) => {
|
||||
<div class="config-section">
|
||||
<h3 class="section-title">📚 模块云仓库</h3>
|
||||
|
||||
<!-- URL 输入区域 -->
|
||||
<!-- 仓库选择区域：不再手动输入 URL，通过弹窗获取仓库 -->
|
||||
<div class="url-input-section">
|
||||
<h4>🔗 添加 Git 仓库</h4>
|
||||
<div style="display: flex; gap: 10px; margin-top: 10px;">
|
||||
<input type="text" id="repoUrlInput"
|
||||
placeholder="请输入 Git 仓库 URL，例如: https://github.com/username/repo.git"
|
||||
value="${gitRepoUrl}"
|
||||
style="flex: 1; padding: 8px; background: var(--vscode-input-background); color: var(--vscode-input-foreground); border: 1px solid var(--vscode-input-border); border-radius: 4px;">
|
||||
<button class="btn-new" onclick="fetchBranches()">获取分支</button>
|
||||
<h4>🔗 获取仓库</h4>
|
||||
<div style="display: flex; gap: 10px; margin-top: 10px; align-items: center;">
|
||||
<button class="btn-new" onclick="openRepoSelect()">获取仓库</button>
|
||||
<span style="font-size: 12px; color: var(--vscode-descriptionForeground);">
|
||||
从仓库配置中选择 Git 仓库，随后可以选择分支并克隆到本地
|
||||
</span>
|
||||
</div>
|
||||
<div id="branchSelectionContainer">
|
||||
${branchesHtml}
|
||||
@@ -363,7 +360,6 @@ const moduleFoldersHtml = moduleFolders.map((folder: ModuleFolder) => {
|
||||
const vscode = acquireVsCodeApi();
|
||||
let currentConfigId = null;
|
||||
let selectedBranches = new Set();
|
||||
let currentRepoUrl = '';
|
||||
let branchTreeData = [];
|
||||
let selectedConfigs = new Set();
|
||||
|
||||
@@ -385,7 +381,7 @@ const moduleFoldersHtml = moduleFolders.map((folder: ModuleFolder) => {
|
||||
);
|
||||
}
|
||||
|
||||
// 新功能：在 VSCode 中打开配置文件
|
||||
// 在 VSCode 中打开配置文件
|
||||
function openConfigFileInVSCode(configId) {
|
||||
console.log('📄 在 VSCode 中打开配置文件:', configId);
|
||||
vscode.postMessage({
|
||||
@@ -484,7 +480,7 @@ const moduleFoldersHtml = moduleFolders.map((folder: ModuleFolder) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 添加上传对话框函数
|
||||
// 上传对话框函数（本地->Git）
|
||||
function showUploadDialog(folderId) {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'modal-overlay';
|
||||
@@ -570,30 +566,16 @@ const moduleFoldersHtml = moduleFolders.map((folder: ModuleFolder) => {
|
||||
vscode.postMessage({ type: 'goBackToContainers' });
|
||||
}
|
||||
|
||||
// Git 仓库管理功能
|
||||
function fetchBranches() {
|
||||
const urlInput = document.getElementById('repoUrlInput');
|
||||
const repoUrl = urlInput.value.trim();
|
||||
|
||||
if (!repoUrl) {
|
||||
alert('请输入 Git 仓库 URL');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!repoUrl.startsWith('http')) {
|
||||
alert('请输入有效的 Git 仓库 URL');
|
||||
return;
|
||||
}
|
||||
|
||||
currentRepoUrl = repoUrl;
|
||||
console.log('🌿 获取分支列表:', repoUrl);
|
||||
|
||||
// 🔁 新逻辑：通过弹窗获取仓库（不再手动输入 URL）
|
||||
function openRepoSelect() {
|
||||
console.log('📦 请求仓库列表以选择 Git 仓库');
|
||||
vscode.postMessage({
|
||||
type: 'fetchBranches',
|
||||
url: repoUrl
|
||||
type: 'openRepoSelect'
|
||||
});
|
||||
}
|
||||
|
||||
// 不再在前端手动输入/校验 URL，分支拉取由 repo 选择 + 后端完成
|
||||
|
||||
function toggleBranch(branchName) {
|
||||
const checkbox = document.getElementById('branch-' + branchName.replace(/[^a-zA-Z0-9-]/g, '-'));
|
||||
if (checkbox.checked) {
|
||||
@@ -614,7 +596,6 @@ const moduleFoldersHtml = moduleFolders.map((folder: ModuleFolder) => {
|
||||
|
||||
vscode.postMessage({
|
||||
type: 'cloneBranches',
|
||||
url: currentRepoUrl,
|
||||
branches: Array.from(selectedBranches)
|
||||
});
|
||||
|
||||
@@ -673,7 +654,7 @@ const moduleFoldersHtml = moduleFolders.map((folder: ModuleFolder) => {
|
||||
showMergeDialog();
|
||||
}
|
||||
|
||||
// 新的合并对话框函数
|
||||
// 合并对话框
|
||||
function showMergeDialog() {
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'modal-overlay';
|
||||
@@ -1107,4 +1088,4 @@ const moduleFoldersHtml = moduleFolders.map((folder: ModuleFolder) => {
|
||||
});
|
||||
return count;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user