0
0

添加了一个可视化仓库功能

This commit is contained in:
xubing
2025-12-02 12:52:41 +08:00
parent b94305476f
commit fb8e31babb
13 changed files with 740 additions and 396 deletions

View File

@@ -11,7 +11,6 @@ class ConfigView extends BaseView_1.BaseView {
const moduleFolderFileTree = data?.moduleFolderFileTree || [];
const moduleFolderLoading = data?.moduleFolderLoading || false;
const gitBranches = data?.gitBranches || [];
const gitRepoUrl = data?.gitRepoUrl || '';
// 生成配置列表的 HTML - 包含配置文件和模块文件夹
const configsHtml = configs.map((config) => `
<tr>
@@ -37,22 +36,22 @@ class ConfigView extends BaseView_1.BaseView {
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>
`;
<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>
<html lang="zh-CN">
@@ -237,25 +236,25 @@ class ConfigView extends BaseView_1.BaseView {
}
/* 类别标签样式 */
.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>
@@ -294,15 +293,14 @@ class ConfigView extends BaseView_1.BaseView {
<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}
@@ -315,7 +313,6 @@ class ConfigView extends BaseView_1.BaseView {
const vscode = acquireVsCodeApi();
let currentConfigId = null;
let selectedBranches = new Set();
let currentRepoUrl = '';
let branchTreeData = [];
let selectedConfigs = new Set();
@@ -337,7 +334,7 @@ class ConfigView extends BaseView_1.BaseView {
);
}
// 新功能:在 VSCode 中打开配置文件
// 在 VSCode 中打开配置文件
function openConfigFileInVSCode(configId) {
console.log('📄 在 VSCode 中打开配置文件:', configId);
vscode.postMessage({
@@ -436,7 +433,7 @@ class ConfigView extends BaseView_1.BaseView {
}
}
// 添加上传对话框函数
// 上传对话框函数(本地->Git
function showUploadDialog(folderId) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
@@ -522,30 +519,16 @@ class ConfigView extends BaseView_1.BaseView {
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) {
@@ -566,7 +549,6 @@ class ConfigView extends BaseView_1.BaseView {
vscode.postMessage({
type: 'cloneBranches',
url: currentRepoUrl,
branches: Array.from(selectedBranches)
});
@@ -625,7 +607,7 @@ class ConfigView extends BaseView_1.BaseView {
showMergeDialog();
}
// 新的合并对话框函数
// 合并对话框
function showMergeDialog() {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';