xb/dscp
0
0
Fork 0
Code Issues Activity

1、将每个代码仓库进行了隔离。2、优化了每个页面的ui对齐。3、增加了飞行器页面的所属项目显示。4、切换页面时对项目进行扫描，实时更新项目的结构，避免复制导致ui不显示的bug

Browse Source
This commit is contained in:
xubing
2026-03-04 10:19:04 +08:00
parent 942dab0f96
commit 79f7a3a860
38 changed files with 255 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/panels/views/AircraftView.ts Executable file → Normal file
View File

@@ -2,7 +2,7 @@ import { BaseView } from './BaseView';
import { AircraftViewData } from '../types/ViewTypes';
export class AircraftView extends BaseView {
render(data?: { aircrafts: AircraftViewData[] }): string {
render(data?: { project?: any; aircrafts: AircraftViewData[] }): string {
const aircrafts = data?.aircrafts || [];
const aircraftsHtml = aircrafts.map(aircraft => `
@@ -25,7 +25,7 @@ export class AircraftView extends BaseView {
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞行器配置</title>
<title>飞行器管理</title>
${this.getStyles()}
${this.getRepoSelectScript()}
<style>
@@ -154,16 +154,20 @@ export class AircraftView extends BaseView {
</head>
<body>
<div class="header">
<h2>🚀飞行器配置</h2>
<h2>🚀 飞行器管理 -
<span style="color: var(--vscode-textLink-foreground);">
${data?.project?.name || '未知项目'}
</span>
</h2>
<button class="back-btn" onclick="goBackToProjects()">← 返回项目</button>
</div>
<table class="table">
<thead>
<tr>
<th width="40%">飞行器</th>
<th width="40%">配置</th>
<th width="20%">操作</th>
<th width="43%" style="padding-left: 40px;">飞行器</th>
<th width="43%">配置</th>
<th width="14%" style="padding-left: 45px;">操作</th>
</tr>
</thead>
<tbody>
@@ -177,13 +181,13 @@ export class AircraftView extends BaseView {
</table>
<div class="config-section">
<h3 class="section-title">🛫 飞行器云仓库</h3>
<h3 class="section-title">📚 飞行器云仓库</h3>
<div class="url-input-section">
<h4>🔗 获取飞行器仓库</h4>
<div style="display: flex; gap: 10px; margin-top: 10px; align-items: center;">
<button class="btn-new" onclick="openRepoSelectForAircraft()">获取仓库</button>
<span style="font-size: 12px; color: var(--vscode-descriptionForeground);">
从仓库配置中选择 Git 仓库，选择分支后可将飞行器代码克隆到当前项目下（以分支名作为飞行器名称）
从仓库配置中选择 Git 仓库，随后可以选择分支并克隆到本地
</span>
</div>
<div id="branchSelectionContainer"></div>
@@ -239,18 +243,12 @@ export class AircraftView extends BaseView {
);
}
// 新增上传功能
// 上传功能
function uploadAircraft(aircraftId, aircraftName) {
showConfirmDialog(
'上传飞行器仓库',
'确定将此飞行器目录（包括所有子文件夹和文件）上传到一个新的 Git 仓库分支吗？',
function() {
vscode.postMessage({
type: 'openRepoSelectForAircraftUpload',
aircraftId: aircraftId
});
}
);
vscode.postMessage({
type: 'openRepoSelectForAircraftUpload',
aircraftId: aircraftId
});
}
// 飞行器名称编辑功能

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

@@ -283,7 +283,7 @@ export abstract class BaseView {
}
window.__dcspRepoDialogInitialized = true;
// ① 仅用于“获取仓库 -> 拉取分支”的弹窗
// 仅用于“获取仓库 -> 拉取分支”的弹窗
function showRepoSelectDialog(repos) {
// 移除已有弹窗
var existing = document.getElementById('repoSelectModal');
@@ -367,7 +367,7 @@ export abstract class BaseView {
}
}
// ② 专门用于“上传代码”的仓库+分支弹窗
// 专门用于“上传代码”的仓库+分支弹窗
function showUploadRepoSelectDialog(repos, folderId, folderType) {
var existing = document.getElementById('uploadRepoSelectModal');
if (existing) {
@@ -476,11 +476,10 @@ export abstract class BaseView {
var message = event.data;
if (!message || !message.type) return;
if (message.type === 'showRepoSelect') {
// 旧逻辑：仅用于获取分支
// 仅用于获取分支
showRepoSelectDialog(message.repos || []);
} else if (message.type === 'showUploadRepoSelect') {
// 新逻辑：上传代码用（仓库 + 分支）
// 这里的 folderId/folderType 现在可能是 Project/Aircraft/Container 的 ID/Type
// 上传代码用（仓库 + 分支）
showUploadRepoSelectDialog(message.repos || [], message.folderId, message.folderType);
}
});

52
src/panels/views/ConfigView.ts Executable file → Normal file
View File

@@ -1,22 +1,6 @@
import { BaseView } from './BaseView';
import { ContainerConfigData, ConfigViewData } from '../types/ViewTypes';
import { ModuleFolder } from '../types/CommonTypes';
interface GitBranch {
name: string;
isCurrent: boolean;
selected?: boolean;
}
interface BranchTreeNode {
name: string;
fullName: string;
isLeaf: boolean;
children: BranchTreeNode[];
level: number;
expanded?: boolean;
branch?: GitBranch;
}
import { ModuleFolder, GitBranch, BranchTreeNode} from '../types/CommonTypes';
export class ConfigView extends BaseView {
render(data?: ContainerConfigData & {
@@ -289,25 +273,23 @@ export class ConfigView extends BaseView {
</head>
<body>
<div class="header">
<h2>⚙️ 模块管理 - <span style="color: var(--vscode-textLink-foreground);">${container?.name || '未知容器'}</span></h2>
<h2>📁 模块管理 - <span style="color: var(--vscode-textLink-foreground);">${container?.name || '未知容器'}</span></h2>
<button class="back-btn" onclick="goBackToContainers()">← 返回容器管理</button>
</div>
<div class="config-section">
<h3 class="section-title">📋 配置文件管理</h3>
<div class="config-section">
<div class="action-buttons">
<button class="btn-new" onclick="createNewConfig()">+ 新建配置</button>
<button class="btn-merge" id="mergeButton" onclick="mergeSelectedConfigs()" disabled>合并选中配置</button>
<button class="btn-new" onclick="createNewConfig()">+ 新建文件</button>
<button class="btn-merge" id="mergeButton" onclick="mergeSelectedConfigs()" disabled>合并选中文件</button>
</div>
<table class="table">
<thead>
<tr>
<th width="25%">模块</th>
<th width="15%">类别</th>
<th width="35%" style="padding-left: 50px;">模型</th>
<th width="16%">类别</th>
<th width="35%">文件/文件夹</th>
<th width="25%">操作</th>
<th width="14%" style="padding-left: 45px;">操作</th>
</tr>
</thead>
<tbody>
@@ -341,7 +323,7 @@ export class ConfigView extends BaseView {
let branchTreeData = [];
let selectedConfigs = new Set();
// [新增] 配置文件重命名弹窗
// 配置文件重命名弹窗
function showConfigRenameDialog(configId, currentName, currentFileName) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
@@ -441,13 +423,12 @@ export class ConfigView extends BaseView {
}
}
// [修改] editConfigName：使用新的双输入弹窗
function editConfigName(configId, currentName, currentFileName) {
// currentFileName 现在已从模板传入
showConfigRenameDialog(configId, currentName, currentFileName);
}
// [新增] 模块文件夹重命名双输入弹窗
// 模块文件夹重命名双输入弹窗
function showModuleFolderRenameDialog(folderId, currentName, currentFolderName) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
@@ -458,16 +439,15 @@ export class ConfigView extends BaseView {
<div class="modal-title">重命名模块文件夹</div>
<div class="merge-dialog-content">
<div class="merge-input-section">
<label class="merge-input-label">显示名称</label>
<label class="merge-input-label">模型名称</label>
<input type="text" id="moduleDisplayNameInput" class="merge-input-field"
placeholder="在配置栏显示的名称" value="\${currentName}">
<div class="merge-input-help">在左侧配置栏显示的名称</div>
</div>
<div class="merge-input-section">
<label class="merge-input-label">磁盘文件夹名称 (将同步修改磁盘目录)</label>
<label class="merge-input-label">文件/文件夹夹名称</label>
<input type="text" id="moduleFolderNameInput" class="merge-input-field"
placeholder="磁盘上的实际文件夹名" value="\${currentFolderName}">
<div class="merge-input-help">请使用英文、数字、中文、-、_，不要使用空格和/</div>
<div class="merge-input-help">禁止使用空格和"/"</div>
</div>
<div id="moduleFolderNameValidationMessage" style="color: var(--vscode-inputValidation-errorForeground); font-size: 12px; margin-top: 5px;"></div>
</div>
@@ -547,10 +527,9 @@ export class ConfigView extends BaseView {
}
}
// [修改] renameModuleFolder：获取磁盘文件夹名并使用双输入弹窗
// 获取磁盘文件夹名并使用双输入弹窗
function renameModuleFolder(folderId, currentName) {
// 通过 data-folder-id 找到模块文件夹的行
// 修复：避免在 JS 字符串中使用内嵌模板字符串，改用拼接以解决编译问题
const editableSpan = document.querySelector('.module-folder-name[data-folder-id="' + folderId + '"]');
if (!editableSpan) return;
@@ -562,9 +541,6 @@ export class ConfigView extends BaseView {
showModuleFolderRenameDialog(folderId, currentName, currentFolderName);
}
// 模块管理功能
// 原始的 editConfigName 已被修改为接受三个参数
// 在 VSCode 中打开配置文件
function openConfigFileInVSCode(configId) {
vscode.postMessage({

27
src/panels/views/ContainerView.ts Executable file → Normal file
View File

@@ -142,16 +142,16 @@ export class ContainerView extends BaseView {
</head>
<body>
<div class="header">
<h2>📋 容器管理 - <span style="color: var(--vscode-textLink-foreground);">${aircraft?.name || '未知飞行器'}</span></h2>
<h2>📦 容器管理 - <span style="color: var(--vscode-textLink-foreground);">${aircraft?.name || '未知飞行器'}</span></h2>
<button class="back-btn" onclick="goBackToAircrafts()">← 返回飞行器管理</button>
</div>
<table class="table">
<thead>
<tr>
<th width="40%">容器</th>
<th width="40%">打开</th>
<th width="20%">操作</th>
<th width="43%" style="padding-left: 50px;">容器</th>
<th width="43%">打开</th>
<th width="14%" style="padding-left: 45px;">操作</th>
</tr>
</thead>
<tbody>
@@ -165,13 +165,13 @@ export class ContainerView extends BaseView {
</table>
<div class="config-section">
<h3 class="section-title">📦 容器云仓库</h3>
<h3 class="section-title">📚 容器云仓库</h3>
<div class="url-input-section">
<h4>🔗 获取容器仓库</h4>
<div style="display: flex; gap: 10px; margin-top: 10px; align-items: center;">
<button class="btn-new" onclick="openRepoSelectForContainer()">获取仓库</button>
<span style="font-size: 12px; color: var(--vscode-descriptionForeground);">
从仓库配置中选择 Git 仓库，选择分支后可将容器代码克隆到当前飞行器下（以分支名作为容器名称）
从仓库配置中选择 Git 仓库，选择分支后可将完整容器克隆到本地
</span>
</div>
<div id="branchSelectionContainer"></div>
@@ -241,18 +241,11 @@ export class ContainerView extends BaseView {
);
}
// 新增上传功能
function uploadContainer(containerId, containerName) {
showConfirmDialog(
'上传容器仓库',
'确定将此容器目录（包括所有子文件夹和文件）上传到一个新的 Git 仓库分支吗？',
function() {
vscode.postMessage({
type: 'openRepoSelectForContainerUpload',
containerId: containerId
});
}
);
vscode.postMessage({
type: 'openRepoSelectForContainerUpload',
containerId: containerId
});
}
// ======== Git 仓库 & 分支树 - ContainerView 作用域 ========

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

@@ -192,9 +192,9 @@ export class ProjectView extends BaseView {
<table class="table">
<thead>
<tr>
<th width="40%">项目</th>
<th width="40%">配置</th>
<th width="20%">操作</th>
<th width="43%" style="padding-left: 50px;">项目</th>
<th width="43%">配置</th>
<th width="14%" style="padding-left: 45px;">操作</th>
</tr>
</thead>
<tbody>
@@ -221,7 +221,7 @@ export class ProjectView extends BaseView {
<div style="display: flex; gap: 10px; margin-top: 10px; align-items: center;">
<button class="btn-new" onclick="openRepoSelectForProject()">获取仓库</button>
<span style="font-size: 12px; color: var(--vscode-descriptionForeground);">
从仓库配置中选择 Git 仓库，选择分支后可将完整项目克隆到本地
从仓库配置中选择 Git 仓库，随后可以选择分支并克隆到本地
</span>
</div>
<div id="branchSelectionContainer"></div>
@@ -241,7 +241,8 @@ export class ProjectView extends BaseView {
if (isConfigured) {
vscode.postMessage({
type: 'openProject',
projectId: projectId
projectId: projectId,
projectName: projectName
});
} else {
vscode.postMessage({
@@ -290,18 +291,12 @@ export class ProjectView extends BaseView {
);
}
// 新增上传功能
// 上传功能
function uploadProject(projectId, projectName) {
showConfirmDialog(
'上传项目仓库',
'确定将此项目目录（包括所有子文件夹和文件）上传到一个新的 Git 仓库分支吗？',
function() {
vscode.postMessage({
type: 'openRepoSelectForProjectUpload',
projectId: projectId
});
}
);
vscode.postMessage({
type: 'openRepoSelectForProjectUpload',
projectId: projectId
});
}
// 项目名称编辑功能