xb/dscp
0
0
Fork 0
Code Issues Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

202
src/panels/views/BaseView.ts Normal file → Executable file
View File

@@ -1,4 +1,3 @@
// src/panels/views/BaseView.ts
import * as vscode from 'vscode';
export abstract class BaseView {
@@ -120,59 +119,154 @@ export abstract class BaseView {
cursor: pointer;
margin-right: 10px;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-dialog {
background: var(--vscode-editor-background);
border: 1px solid var(--vscode-panel-border);
border-radius: 4px;
padding: 20px;
min-width: 300px;
max-width: 500px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.modal-title {
margin-bottom: 15px;
font-weight: bold;
color: var(--vscode-editor-foreground);
}
.modal-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.modal-btn {
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.modal-btn-primary {
background: var(--vscode-button-background);
color: var(--vscode-button-foreground);
}
.modal-btn-secondary {
background: var(--vscode-button-secondaryBackground);
color: var(--vscode-button-secondaryForeground);
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal-dialog {
background: var(--vscode-editor-background);
border: 1px solid var(--vscode-panel-border);
border-radius: 4px;
padding: 20px;
min-width: 300px;
max-width: 500px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.modal-title {
margin-bottom: 15px;
font-weight: bold;
color: var(--vscode-editor-foreground);
}
.modal-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.modal-btn {
padding: 6px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.modal-btn-primary {
background: var(--vscode-button-background);
color: var(--vscode-button-foreground);
}
.modal-btn-secondary {
background: var(--vscode-button-secondaryBackground);
color: var(--vscode-button-secondaryForeground);
}
</style>
<script>
(function () {
// 避免在同一个 Webview 中重复注册
if (window.__dcspRepoDialogInitialized) {
return;
}
window.__dcspRepoDialogInitialized = true;
function showRepoSelectDialog(repos) {
// 移除已有弹窗
var existing = document.getElementById('repoSelectModal');
if (existing) {
existing.remove();
}
var overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.id = 'repoSelectModal';
var hasRepos = Array.isArray(repos) && repos.length > 0;
var optionsHtml = '';
if (hasRepos) {
for (var i = 0; i < repos.length; i++) {
var r = repos[i];
if (!r || !r.name) continue;
optionsHtml += '<option value="' + r.name + '">' + r.name + '</option>';
}
}
var disabledAttr = hasRepos ? '' : 'disabled';
var noRepoTip = '';
if (!hasRepos) {
noRepoTip = '<div style="margin-top:8px; font-size:12px; color: var(--vscode-descriptionForeground);">当前配置中没有仓库，请先在“仓库配置”中添加。</div>';
}
overlay.innerHTML =
'<div class="modal-dialog">' +
'<div class="modal-title">获取仓库</div>' +
'<div style="margin-bottom: 10px;">' +
'<label style="display:block; margin-bottom:6px;">请选择仓库：</label>' +
'<select id="repoSelect" style="width:100%; padding:6px; background: var(--vscode-input-background); color: var(--vscode-input-foreground); border:1px solid var(--vscode-input-border); border-radius:4px;">' +
optionsHtml +
'</select>' +
noRepoTip +
'</div>' +
'<div class="modal-buttons">' +
'<button class="modal-btn modal-btn-secondary" id="repoSelectCancelBtn">取消</button>' +
'<button class="modal-btn modal-btn-primary" id="repoSelectOkBtn" ' + disabledAttr + '>确定</button>' +
'</div>' +
'</div>';
document.body.appendChild(overlay);
var cancelBtn = document.getElementById('repoSelectCancelBtn');
var okBtn = document.getElementById('repoSelectOkBtn');
var select = document.getElementById('repoSelect');
if (cancelBtn) {
cancelBtn.addEventListener('click', function () {
overlay.remove();
});
}
if (okBtn) {
okBtn.addEventListener('click', function () {
if (!select || !(select instanceof HTMLSelectElement)) {
overlay.remove();
return;
}
var repoName = select.value;
if (!repoName) {
alert('请选择一个仓库');
return;
}
if (typeof vscode !== 'undefined') {
vscode.postMessage({
type: 'repoSelectedForBranches',
repoName: repoName
});
}
overlay.remove();
});
}
}
window.addEventListener('message', function (event) {
var message = event.data;
if (!message || !message.type) return;
if (message.type === 'showRepoSelect') {
showRepoSelectDialog(message.repos || []);
}
});
})();
</script>
`;
}
}
}

135
src/panels/views/ConfigView.ts
View File

@@ -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;
}
}
}

14
src/panels/views/ProjectView.ts Normal file → Executable file
View File

@@ -1,4 +1,3 @@
// src/panels/views/ProjectView.ts
import { BaseView } from './BaseView';
import { ProjectViewData } from '../types/ViewTypes';
@@ -96,7 +95,10 @@ export class ProjectView extends BaseView {
</style>
</head>
<body>
<h2><span class="satellite-icon">🛰️</span>数字卫星构建平台</h2>
<div class="header">
<h2><span class="satellite-icon">🛰️</span>数字卫星构建平台</h2>
<button class="back-btn" onclick="openRepoConfig()">⚙️ 仓库配置</button>
</div>
<table class="table">
<thead>
@@ -126,6 +128,12 @@ export class ProjectView extends BaseView {
<script>
const vscode = acquireVsCodeApi();
function openRepoConfig() {
vscode.postMessage({
type: 'openRepoConfig'
});
}
function configureProject(projectId, projectName, isConfigured) {
if (isConfigured) {
// 已配置的项目直接打开
@@ -296,4 +304,4 @@ export class ProjectView extends BaseView {
</body>
</html>`;
}
}
}