0
0

不再提供模板

This commit is contained in:
xubing
2025-11-18 18:45:30 +08:00
parent 53e9307157
commit 7d249f4882
18 changed files with 1245 additions and 230 deletions

View File

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
exports.ConfigPanel = void 0;
// src/panels/ConfigPanel.ts
const vscode = require("vscode");
const ProjectManagementView_1 = require("./views/ProjectManagementView");
const ProjectListView_1 = require("./views/ProjectListView");
const AircraftConfigView_1 = require("./views/AircraftConfigView");
const ContainerConfigView_1 = require("./views/ContainerConfigView");
const ProjectView_1 = require("./views/ProjectView");
const AircraftView_1 = require("./views/AircraftView");
const ContainerView_1 = require("./views/ContainerView");
const ConfigView_1 = require("./views/ConfigView");
class ConfigPanel {
static createOrShow(extensionUri) {
const column = vscode.window.activeTextEditor?.viewColumn || vscode.ViewColumn.One;
@@ -14,7 +14,7 @@ class ConfigPanel {
ConfigPanel.currentPanel.panel.reveal(column);
return;
}
const panel = vscode.window.createWebviewPanel('dockerConfigTest', 'Docker配置测试', column, {
const panel = vscode.window.createWebviewPanel('DCSP', '数字卫星构建平台', column, {
enableScripts: true,
localResourceRoots: [extensionUri],
retainContextWhenHidden: true
@@ -22,39 +22,24 @@ class ConfigPanel {
ConfigPanel.currentPanel = new ConfigPanel(panel, extensionUri);
}
constructor(panel, extensionUri) {
this.currentView = 'management';
this.currentView = 'projects';
this.currentProjectId = '';
this.currentAircraftId = '';
this.currentContainerId = '';
// 数据存储
this.projects = [
{ id: 'p1', name: '项目1' },
{ id: 'p2', name: '项目2' }
];
this.aircrafts = [
{ id: 'a1', name: '飞行器配置1', projectId: 'p1' },
{ id: 'a2', name: '飞行器配置2', projectId: 'p2' }
];
this.containers = [
{ id: 'c1', name: '容器1', aircraftId: 'a1' },
{ id: 'c2', name: '容器2', aircraftId: 'a1' },
{ id: 'c3', name: '容器1', aircraftId: 'a2' }
];
this.configs = [
{ id: 'cfg1', name: '配置1', fileName: 'config.yaml', content: '# 配置1内容', containerId: 'c1' },
{ id: 'cfg2', name: '配置2', fileName: 'settings.json', content: '# 配置2内容', containerId: 'c1' },
{ id: 'cfg3', name: '配置1', fileName: 'docker-compose.yml', content: '# 配置1内容', containerId: 'c2' },
{ id: 'cfg4', name: '配置1', fileName: 'config.yaml', content: '# 配置1内容', containerId: 'c3' }
];
this.projects = [];
this.aircrafts = [];
this.containers = [];
this.configs = [];
// 项目存储路径映射
this.projectPaths = new Map();
this.panel = panel;
this.extensionUri = extensionUri;
// 初始化各个视图
this.projectManagementView = new ProjectManagementView_1.ProjectManagementView(extensionUri);
this.projectListView = new ProjectListView_1.ProjectListView(extensionUri);
this.aircraftConfigView = new AircraftConfigView_1.AircraftConfigView(extensionUri);
this.containerConfigView = new ContainerConfigView_1.ContainerConfigView(extensionUri);
this.projectView = new ProjectView_1.ProjectView(extensionUri);
this.aircraftView = new AircraftView_1.AircraftView(extensionUri);
this.containerView = new ContainerView_1.ContainerView(extensionUri);
this.configView = new ConfigView_1.ConfigView(extensionUri);
this.updateWebview();
this.setupMessageListener();
this.panel.onDidDispose(() => {
@@ -67,50 +52,53 @@ class ConfigPanel {
case 'configureProject':
const selectedPath = await this.selectProjectPath(data.projectId, data.projectName);
if (selectedPath) {
this.currentView = 'projects';
this.currentView = 'aircrafts';
this.currentProjectId = data.projectId;
this.updateWebview();
}
break;
case 'openProject':
// 已配置的项目直接打开
this.currentView = 'projects';
this.currentView = 'aircrafts';
this.currentProjectId = data.projectId;
this.updateWebview();
break;
case 'openAircraftConfig':
this.currentView = 'aircrafts';
this.currentView = 'containers';
this.currentProjectId = data.projectId;
// 找到对应的飞行器ID
const aircraft = this.aircrafts.find(a => a.projectId === data.projectId);
if (aircraft) {
this.currentAircraftId = aircraft.id;
}
this.currentAircraftId = data.aircraftId;
this.updateWebview();
break;
case 'openContainerConfig':
this.currentView = 'container';
this.currentView = 'configs';
this.currentContainerId = data.containerId;
this.updateWebview();
break;
case 'goBackToManagement':
this.currentView = 'management';
this.updateWebview();
break;
// 修复返回按钮的消息处理
case 'goBackToProjects':
this.currentView = 'projects';
this.updateWebview();
break;
case 'goBackToAircraft':
case 'goBackToAircrafts':
this.currentView = 'aircrafts';
this.updateWebview();
break;
case 'goBackToContainers':
this.currentView = 'containers';
this.updateWebview();
break;
case 'updateProjectName':
this.updateProjectName(data.projectId, data.name);
break;
case 'createProject':
this.createProject(data.name);
break;
case 'updateAircraftName':
this.updateAircraftName(data.aircraftId, data.name);
break;
case 'createAircraft':
this.createAircraft(data.name);
break;
case 'updateContainerName':
this.updateContainerName(data.containerId, data.name);
break;
@@ -135,6 +123,9 @@ class ConfigPanel {
case 'deleteProject':
this.deleteProject(data.projectId);
break;
case 'deleteAircraft':
this.deleteAircraft(data.aircraftId);
break;
case 'deleteContainer':
this.deleteContainer(data.containerId);
break;
@@ -144,10 +135,11 @@ class ConfigPanel {
}
});
}
// ... 其余方法保持不变selectProjectPath, updateProjectName, createProject等
// === 项目路径选择 ===
async selectProjectPath(projectId, projectName) {
try {
// 提供两种方式:选择现有路径或输入新路径
// 选择现有路径或输入新路径
const choice = await vscode.window.showQuickPick([
{
label: '$(folder) 选择现有文件夹',
@@ -215,7 +207,7 @@ class ConfigPanel {
return null;
}
}
// === 项目相关方法 ===
// 更新项目名
updateProjectName(projectId, newName) {
const project = this.projects.find(p => p.id === projectId);
if (project) {
@@ -224,6 +216,7 @@ class ConfigPanel {
this.updateWebview();
}
}
// 创建新项目
createProject(name) {
const newId = 'p' + (this.projects.length + 1);
const newProject = {
@@ -231,18 +224,14 @@ class ConfigPanel {
name: name
};
this.projects.push(newProject);
// 同时创建一个默认的飞行器配置
const newAircraftId = 'a' + (this.aircrafts.length + 1);
this.aircrafts.push({
id: newAircraftId,
name: `${name}配置`,
projectId: newId
});
vscode.window.showInformationMessage(`新建项目: ${name}`);
this.updateWebview();
}
// 删除项目
deleteProject(projectId) {
// 删除项目
const project = this.projects.find(p => p.id === projectId);
if (!project)
return;
this.projects = this.projects.filter(p => p.id !== projectId);
// 删除相关的飞行器
const relatedAircrafts = this.aircrafts.filter(a => a.projectId === projectId);
@@ -255,10 +244,49 @@ class ConfigPanel {
this.configs = this.configs.filter(cfg => !containerIds.includes(cfg.containerId));
// 删除项目路径映射
this.projectPaths.delete(projectId);
vscode.window.showInformationMessage(`删除项目: ${projectId}`);
vscode.window.showInformationMessage(`删除项目: ${project.name}`);
this.updateWebview();
}
// === 容器相关方法 ===
// 更新飞行器名
updateAircraftName(aircraftId, newName) {
const aircraft = this.aircrafts.find(a => a.id === aircraftId);
if (aircraft) {
aircraft.name = newName;
vscode.window.showInformationMessage(`飞行器名称更新: ${newName}`);
this.updateWebview();
}
}
// 创建新飞行器
createAircraft(name) {
if (!this.currentProjectId) {
vscode.window.showErrorMessage('无法创建飞行器:未找到当前项目');
return;
}
const newId = 'a' + (this.aircrafts.length + 1);
const newAircraft = {
id: newId,
name: name,
projectId: this.currentProjectId
};
this.aircrafts.push(newAircraft);
vscode.window.showInformationMessage(`新建飞行器: ${name}`);
this.updateWebview();
}
// 删除飞行器
deleteAircraft(aircraftId) {
const aircraft = this.aircrafts.find(a => a.id === aircraftId);
if (!aircraft)
return;
this.aircrafts = this.aircrafts.filter(a => a.id !== aircraftId);
// 删除相关的容器
this.containers = this.containers.filter(c => c.aircraftId !== aircraftId);
// 删除相关的配置
const containerIds = this.containers.filter(c => c.aircraftId === aircraftId).map(c => c.id);
this.configs = this.configs.filter(cfg => !containerIds.includes(cfg.containerId));
vscode.window.showInformationMessage(`删除飞行器: ${aircraft.name}`);
this.updateWebview();
}
// 更新容器名
updateContainerName(containerId, newName) {
const container = this.containers.find(c => c.id === containerId);
if (container) {
@@ -267,6 +295,7 @@ class ConfigPanel {
this.updateWebview();
}
}
// 创建新容器
createContainer(name) {
console.log('创建容器当前飞行器ID:', this.currentAircraftId);
if (!this.currentAircraftId) {
@@ -282,34 +311,38 @@ class ConfigPanel {
this.containers.push(newContainer);
// 创建两个默认配置文件
const configCount = this.configs.length;
// 第一个配置文件Dockerfile
// 第一个配置文件
this.configs.push({
id: 'cfg' + (configCount + 1),
name: 'Docker配置',
fileName: 'Dockerfile',
name: '配置1',
fileName: 'config.sh',
content: `# ${name} 的 Dockerfile\nFROM ubuntu:20.04\n\n# 设置工作目录\nWORKDIR /app\n\n# 复制文件\nCOPY . .\n\n# 安装依赖\nRUN apt-get update && apt-get install -y \\\n python3 \\\n python3-pip\n\n# 暴露端口\nEXPOSE 8080\n\n# 启动命令\nCMD ["python3", "app.py"]`,
containerId: newId
});
// 第二个配置文件docker-compose.yml
// 第二个配置文件
this.configs.push({
id: 'cfg' + (configCount + 2),
name: '编排配置',
fileName: 'docker-compose.yml',
name: '配置2',
fileName: 'config.sh',
content: `# ${name} 的 Docker Compose 配置\nversion: '3.8'\n\nservices:\n ${name.toLowerCase().replace(/\\s+/g, '-')}:\n build: .\n container_name: ${name}\n ports:\n - "8080:8080"\n environment:\n - NODE_ENV=production\n volumes:\n - ./data:/app/data\n restart: unless-stopped`,
containerId: newId
});
vscode.window.showInformationMessage(`新建容器: ${name} (包含2个默认配置文件)`);
this.updateWebview();
}
// 删除容器
deleteContainer(containerId) {
const container = this.containers.find(c => c.id === containerId);
if (!container)
return;
// 删除容器
this.containers = this.containers.filter(c => c.id !== containerId);
// 删除相关的配置
this.configs = this.configs.filter(cfg => cfg.containerId !== containerId);
vscode.window.showInformationMessage(`删除容器: ${containerId}`);
vscode.window.showInformationMessage(`删除容器: ${container.name}`);
this.updateWebview();
}
// === 配置相关方法 ===
// 更新配置名
updateConfigName(configId, newName) {
const config = this.configs.find(c => c.id === configId);
if (config) {
@@ -318,6 +351,7 @@ class ConfigPanel {
this.updateWebview();
}
}
// 更新文件名
async updateConfigFileName(configId, fileName) {
const config = this.configs.find(c => c.id === configId);
if (config) {
@@ -326,7 +360,7 @@ class ConfigPanel {
this.updateWebview();
}
}
// 创建配置文件
// 创建配置文件
createConfig(name) {
const newId = 'cfg' + (this.configs.length + 1);
const newConfig = {
@@ -426,35 +460,32 @@ class ConfigPanel {
}
getWebviewContent() {
switch (this.currentView) {
case 'management':
return this.projectManagementView.render({
case 'projects':
return this.projectView.render({
projects: this.projects,
projectPaths: this.projectPaths
});
case 'projects':
return this.projectListView.render({
projects: this.projects
});
case 'aircrafts':
const projectAircrafts = this.aircrafts.filter(a => a.projectId === this.currentProjectId);
return this.aircraftView.render({
aircrafts: projectAircrafts
});
case 'containers':
const currentProject = this.projects.find(p => p.id === this.currentProjectId);
const projectAircraft = this.aircrafts.find(a => a.projectId === this.currentProjectId);
if (projectAircraft) {
this.currentAircraftId = projectAircraft.id;
}
const projectContainers = this.containers.filter(c => c.aircraftId === this.currentAircraftId);
return this.aircraftConfigView.render({
return this.containerView.render({
project: currentProject,
containers: projectContainers
});
case 'container':
case 'configs':
const currentContainer = this.containers.find(c => c.id === this.currentContainerId);
const containerConfigs = this.configs.filter(cfg => cfg.containerId === this.currentContainerId);
return this.containerConfigView.render({
return this.configView.render({
container: currentContainer,
configs: containerConfigs
});
default:
return this.projectManagementView.render({
return this.projectView.render({
projects: this.projects,
projectPaths: this.projectPaths
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,204 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AircraftView = void 0;
// src/panels/views/AircraftView.ts
const BaseView_1 = require("./BaseView");
class AircraftView extends BaseView_1.BaseView {
render(data) {
const aircrafts = data?.aircrafts || [];
// 生成飞行器列表的 HTML
const aircraftsHtml = aircrafts.map((aircraft) => {
return `
<tr>
<td>
<span class="editable" onclick="editAircraftName('${aircraft.id}', '${aircraft.name}')">🛸 ${aircraft.name}</span>
</td>
<td>
<span class="clickable" onclick="openAircraftConfig('${aircraft.id}')">配置</span>
</td>
<td>
<button class="btn-delete" onclick="deleteAircraft('${aircraft.id}')">删除</button>
</td>
</tr>
`;
}).join('');
return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飞行器管理</title>
${this.getStyles()}
</head>
<body>
<div class="header">
<h2>🚀 飞行器管理</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>
</tr>
</thead>
<tbody>
${aircraftsHtml}
<tr>
<td colspan="3" style="text-align: center; padding: 20px;">
<button class="btn-new" onclick="createNewAircraft()">+ 新建飞行器</button>
</td>
</tr>
</tbody>
</table>
<script>
const vscode = acquireVsCodeApi();
function editAircraftName(aircraftId, currentName) {
showPromptDialog(
'修改飞行器名称',
'请输入新的飞行器名称:',
currentName,
function(newName) {
if (newName && newName !== currentName) {
vscode.postMessage({
type: 'updateAircraftName',
aircraftId: aircraftId,
name: newName
});
}
}
);
}
function openAircraftConfig(aircraftId) {
vscode.postMessage({
type: 'openAircraftConfig',
aircraftId: aircraftId
});
}
function createNewAircraft() {
showPromptDialog(
'新建飞行器',
'请输入飞行器名称:',
'',
function(name) {
if (name) {
vscode.postMessage({
type: 'createAircraft',
name: name
});
}
}
);
}
function deleteAircraft(aircraftId) {
showConfirmDialog(
'确认删除',
'确定删除这个飞行器吗?',
function() {
vscode.postMessage({
type: 'deleteAircraft',
aircraftId: aircraftId
});
},
function() {
// 用户取消删除
}
);
}
function goBackToProjects() {
vscode.postMessage({ type: 'goBackToProjects' });
}
// 对话框函数
function showConfirmDialog(title, message, onConfirm, onCancel) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.id = 'confirmModal';
overlay.innerHTML = \`
<div class="modal-dialog">
<div class="modal-title">\${title}</div>
<div>\${message}</div>
<div class="modal-buttons">
<button class="modal-btn modal-btn-secondary" onclick="closeConfirmDialog(false)">取消</button>
<button class="modal-btn modal-btn-primary" onclick="closeConfirmDialog(true)">确定</button>
</div>
</div>
\`;
document.body.appendChild(overlay);
window.confirmCallback = function(result) {
if (result && onConfirm) {
onConfirm();
} else if (!result && onCancel) {
onCancel();
}
delete window.confirmCallback;
};
}
function closeConfirmDialog(result) {
const modal = document.getElementById('confirmModal');
if (modal) {
modal.remove();
}
if (window.confirmCallback) {
window.confirmCallback(result);
}
}
function showPromptDialog(title, message, defaultValue, onConfirm) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.id = 'promptModal';
overlay.innerHTML = \`
<div class="modal-dialog">
<div class="modal-title">\${title}</div>
<div>\${message}</div>
<input type="text" id="promptInput" value="\${defaultValue}" style="width: 100%; margin: 10px 0; padding: 6px; background: var(--vscode-input-background); color: var(--vscode-input-foreground); border: 1px solid var(--vscode-input-border);">
<div class="modal-buttons">
<button class="modal-btn modal-btn-secondary" onclick="closePromptDialog(null)">取消</button>
<button class="modal-btn modal-btn-primary" onclick="closePromptDialog(document.getElementById('promptInput').value)">确定</button>
</div>
</div>
\`;
document.body.appendChild(overlay);
setTimeout(() => {
const input = document.getElementById('promptInput');
if (input) {
input.focus();
input.select();
}
}, 100);
window.promptCallback = onConfirm;
}
function closePromptDialog(result) {
const modal = document.getElementById('promptModal');
if (modal) {
modal.remove();
}
if (window.promptCallback) {
window.promptCallback(result);
}
delete window.promptCallback;
}
</script>
</body>
</html>`;
}
}
exports.AircraftView = AircraftView;
//# sourceMappingURL=AircraftView.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"AircraftView.js","sourceRoot":"","sources":["../../../src/panels/views/AircraftView.ts"],"names":[],"mappings":";;;AAAA,mCAAmC;AACnC,yCAAsC;AAEtC,MAAa,YAAa,SAAQ,mBAAQ;IACtC,MAAM,CAAC,IAA2B;QAC9B,MAAM,SAAS,GAAG,IAAI,EAAE,SAAS,IAAI,EAAE,CAAC;QAExC,gBAAgB;QAChB,MAAM,aAAa,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,QAAa,EAAE,EAAE;YAClD,OAAO;;;wEAGqD,QAAQ,CAAC,EAAE,OAAO,QAAQ,CAAC,IAAI,UAAU,QAAQ,CAAC,IAAI;;;2EAGnD,QAAQ,CAAC,EAAE;;;0EAGZ,QAAQ,CAAC,EAAE;;;aAGxE,CAAC;QACN,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEZ,OAAO;;;;;;MAMT,IAAI,CAAC,SAAS,EAAE;;;;;;;;;;;;;;;;cAgBR,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyJnB,CAAC;IACL,CAAC;CACJ;AAtMD,oCAsMC"}

View File

@@ -0,0 +1,271 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConfigView = void 0;
// src/panels/views/ConfigView.ts
const BaseView_1 = require("./BaseView");
class ConfigView extends BaseView_1.BaseView {
render(data) {
const container = data?.container;
const configs = data?.configs || [];
// 生成配置列表的 HTML - 添加文件名编辑功能
const configsHtml = configs.map((config) => `
<tr>
<td>
<span class="editable" onclick="editConfigName('${config.id}', '${config.name}')">🔧 ${config.name}</span>
</td>
<td>
<span class="editable" onclick="editFileName('${config.id}', '${config.fileName}')">📄 ${config.fileName}</span>
</td>
<td>
<button class="btn-delete" onclick="deleteConfig('${config.id}')">删除</button>
</td>
</tr>
`).join('');
return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>配置管理</title>
${this.getStyles()}
</head>
<body>
<div class="header">
<h2>⚙️ 配置管理 - <span style="color: var(--vscode-textLink-foreground);">${container?.name || '未知容器'}</span></h2>
<button class="back-btn" onclick="goBackToContainers()">← 返回容器管理</button>
</div>
<table class="table">
<thead>
<tr>
<th width="30%">配置</th>
<th width="40%">文件</th>
<th width="30%">操作</th>
</tr>
</thead>
<tbody>
${configsHtml}
<tr>
<td colspan="3" style="text-align: center; padding: 20px;">
<button class="btn-new" onclick="createNewConfig()">+ 新建配置</button>
</td>
</tr>
</tbody>
</table>
<!-- 配置文件编辑器 -->
<div class="config-editor" id="configEditor" style="display: none;">
<h3>📝 编辑配置文件</h3>
<textarea id="configContent" placeholder="在此编辑配置文件内容..."></textarea>
<div style="margin-top: 15px;">
<button class="btn-primary" onclick="saveConfigFile()">💾 保存到文件系统</button>
<button class="back-btn" onclick="closeEditor()">取消</button>
</div>
</div>
<script>
const vscode = acquireVsCodeApi();
let currentConfigId = null;
function editConfigName(configId, currentName) {
showPromptDialog(
'修改配置名称',
'请输入新的配置名称:',
currentName,
function(newName) {
if (newName && newName !== currentName) {
vscode.postMessage({
type: 'updateConfigName',
configId: configId,
name: newName
});
}
}
);
}
function editFileName(configId, currentFileName) {
showPromptDialog(
'修改文件名',
'请输入新的文件名(包含扩展名):',
currentFileName,
function(newFileName) {
if (newFileName && newFileName !== currentFileName) {
vscode.postMessage({
type: 'updateConfigFileName',
configId: configId,
fileName: newFileName
});
}
}
);
}
function openConfigFile(configId) {
currentConfigId = configId;
document.getElementById('configEditor').style.display = 'block';
vscode.postMessage({
type: 'loadConfigFile',
configId: configId
});
}
function createNewConfig() {
showPromptDialog(
'新建配置',
'请输入配置名称:',
'',
function(name) {
if (name) {
vscode.postMessage({
type: 'createConfig',
name: name
});
}
}
);
}
function deleteConfig(configId) {
showConfirmDialog(
'确认删除',
'确定删除这个配置文件吗?',
function() {
vscode.postMessage({
type: 'deleteConfig',
configId: configId
});
},
function() {
// 用户取消删除
}
);
}
function saveConfigFile() {
const content = document.getElementById('configContent').value;
vscode.postMessage({
type: 'saveConfigFile',
configId: currentConfigId,
content: content
});
closeEditor();
}
function closeEditor() {
document.getElementById('configEditor').style.display = 'none';
currentConfigId = null;
}
function goBackToContainers() {
vscode.postMessage({ type: 'goBackToContainers' });
}
// 对话框函数
function showConfirmDialog(title, message, onConfirm, onCancel) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.id = 'confirmModal';
overlay.innerHTML = \`
<div class="modal-dialog">
<div class="modal-title">\${title}</div>
<div>\${message}</div>
<div class="modal-buttons">
<button class="modal-btn modal-btn-secondary" onclick="closeConfirmDialog(false)">取消</button>
<button class="modal-btn modal-btn-primary" onclick="closeConfirmDialog(true)">确定</button>
</div>
</div>
\`;
document.body.appendChild(overlay);
window.confirmCallback = function(result) {
if (result && onConfirm) {
onConfirm();
} else if (!result && onCancel) {
onCancel();
}
delete window.confirmCallback;
};
}
function closeConfirmDialog(result) {
const modal = document.getElementById('confirmModal');
if (modal) {
modal.remove();
}
if (window.confirmCallback) {
window.confirmCallback(result);
}
}
function showPromptDialog(title, message, defaultValue, onConfirm) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.id = 'promptModal';
overlay.innerHTML = \`
<div class="modal-dialog">
<div class="modal-title">\${title}</div>
<div>\${message}</div>
<input type="text" id="promptInput" value="\${defaultValue}" style="width: 100%; margin: 10px 0; padding: 6px; background: var(--vscode-input-background); color: var(--vscode-input-foreground); border: 1px solid var(--vscode-input-border);">
<div class="modal-buttons">
<button class="modal-btn modal-btn-secondary" onclick="closePromptDialog(null)">取消</button>
<button class="modal-btn modal-btn-primary" onclick="closePromptDialog(document.getElementById('promptInput').value)">确定</button>
</div>
</div>
\`;
document.body.appendChild(overlay);
setTimeout(() => {
const input = document.getElementById('promptInput');
if (input) {
input.focus();
input.select();
}
}, 100);
window.promptCallback = onConfirm;
}
function closePromptDialog(result) {
const modal = document.getElementById('promptModal');
if (modal) {
modal.remove();
}
if (window.promptCallback) {
window.promptCallback(result);
}
delete window.promptCallback;
}
window.addEventListener('message', event => {
const message = event.data;
if (message.type === 'configFileLoaded') {
document.getElementById('configContent').value = message.content;
}
});
// 修改:点击文件名时打开编辑器
document.addEventListener('click', function(event) {
if (event.target.classList.contains('editable') && event.target.textContent.includes('📄')) {
const row = event.target.closest('tr');
if (row) {
const configNameCell = row.querySelector('td:first-child .editable');
if (configNameCell) {
const configId = configNameCell.onclick.toString().match(/'([^']+)'/)[1];
openConfigFile(configId);
}
}
}
});
</script>
</body>
</html>`;
}
}
exports.ConfigView = ConfigView;
//# sourceMappingURL=ConfigView.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"ConfigView.js","sourceRoot":"","sources":["../../../src/panels/views/ConfigView.ts"],"names":[],"mappings":";;;AAAA,iCAAiC;AACjC,yCAAsC;AAGtC,MAAa,UAAW,SAAQ,mBAAQ;IACpC,MAAM,CAAC,IAA0B;QAC7B,MAAM,SAAS,GAAG,IAAI,EAAE,SAAS,CAAC;QAClC,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO,IAAI,EAAE,CAAC;QAEpC,2BAA2B;QAC3B,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAsB,EAAE,EAAE,CAAC;;;sEAGE,MAAM,CAAC,EAAE,OAAO,MAAM,CAAC,IAAI,UAAU,MAAM,CAAC,IAAI;;;oEAGlD,MAAM,CAAC,EAAE,OAAO,MAAM,CAAC,QAAQ,UAAU,MAAM,CAAC,QAAQ;;;wEAGpD,MAAM,CAAC,EAAE;;;SAGxE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEZ,OAAO;;;;;;MAMT,IAAI,CAAC,SAAS,EAAE;;;;gFAI0D,SAAS,EAAE,IAAI,IAAI,MAAM;;;;;;;;;;;;;cAa3F,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA4NjB,CAAC;IACL,CAAC;CACJ;AAzQD,gCAyQC"}

View File

@@ -0,0 +1,204 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContainerView = void 0;
// src/panels/views/ContainerView.ts
const BaseView_1 = require("./BaseView");
class ContainerView extends BaseView_1.BaseView {
render(data) {
const project = data?.project;
const containers = data?.containers || [];
// 生成容器列表的 HTML
const containersHtml = containers.map((container) => `
<tr>
<td>
<span class="editable" onclick="editContainerName('${container.id}', '${container.name}')">📦 ${container.name}</span>
</td>
<td>
<span class="clickable" onclick="openContainerConfig('${container.id}')">配置文件</span>
</td>
<td>
<button class="btn-delete" onclick="deleteContainer('${container.id}')">删除</button>
</td>
</tr>
`).join('');
return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>容器管理</title>
${this.getStyles()}
</head>
<body>
<div class="header">
<h2>📋 容器管理 - <span style="color: var(--vscode-textLink-foreground);">${project?.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>
</tr>
</thead>
<tbody>
${containersHtml}
<tr>
<td colspan="3" style="text-align: center; padding: 20px;">
<button class="btn-new" onclick="createNewContainer()">+ 新建容器</button>
</td>
</tr>
</tbody>
</table>
<script>
const vscode = acquireVsCodeApi();
function editContainerName(containerId, currentName) {
showPromptDialog(
'修改容器名称',
'请输入新的容器名称:',
currentName,
function(newName) {
if (newName && newName !== currentName) {
vscode.postMessage({
type: 'updateContainerName',
containerId: containerId,
name: newName
});
}
}
);
}
function openContainerConfig(containerId) {
vscode.postMessage({
type: 'openContainerConfig',
containerId: containerId
});
}
function createNewContainer() {
showPromptDialog(
'新建容器',
'请输入容器名称:',
'',
function(name) {
if (name) {
vscode.postMessage({
type: 'createContainer',
name: name
});
}
}
);
}
function goBackToAircrafts() {
vscode.postMessage({ type: 'goBackToAircrafts' });
}
function deleteContainer(containerId) {
showConfirmDialog(
'确认删除',
'确定删除这个容器吗?',
function() {
vscode.postMessage({
type: 'deleteContainer',
containerId: containerId
});
},
function() {
// 用户取消删除
}
);
}
// 对话框函数(与之前相同)
function showConfirmDialog(title, message, onConfirm, onCancel) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.id = 'confirmModal';
overlay.innerHTML = \`
<div class="modal-dialog">
<div class="modal-title">\${title}</div>
<div>\${message}</div>
<div class="modal-buttons">
<button class="modal-btn modal-btn-secondary" onclick="closeConfirmDialog(false)">取消</button>
<button class="modal-btn modal-btn-primary" onclick="closeConfirmDialog(true)">确定</button>
</div>
</div>
\`;
document.body.appendChild(overlay);
window.confirmCallback = function(result) {
if (result && onConfirm) {
onConfirm();
} else if (!result && onCancel) {
onCancel();
}
delete window.confirmCallback;
};
}
function closeConfirmDialog(result) {
const modal = document.getElementById('confirmModal');
if (modal) {
modal.remove();
}
if (window.confirmCallback) {
window.confirmCallback(result);
}
}
function showPromptDialog(title, message, defaultValue, onConfirm) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.id = 'promptModal';
overlay.innerHTML = \`
<div class="modal-dialog">
<div class="modal-title">\${title}</div>
<div>\${message}</div>
<input type="text" id="promptInput" value="\${defaultValue}" style="width: 100%; margin: 10px 0; padding: 6px; background: var(--vscode-input-background); color: var(--vscode-input-foreground); border: 1px solid var(--vscode-input-border);">
<div class="modal-buttons">
<button class="modal-btn modal-btn-secondary" onclick="closePromptDialog(null)">取消</button>
<button class="modal-btn modal-btn-primary" onclick="closePromptDialog(document.getElementById('promptInput').value)">确定</button>
</div>
</div>
\`;
document.body.appendChild(overlay);
setTimeout(() => {
const input = document.getElementById('promptInput');
if (input) {
input.focus();
input.select();
}
}, 100);
window.promptCallback = onConfirm;
}
function closePromptDialog(result) {
const modal = document.getElementById('promptModal');
if (modal) {
modal.remove();
}
if (window.promptCallback) {
window.promptCallback(result);
}
delete window.promptCallback;
}
</script>
</body>
</html>`;
}
}
exports.ContainerView = ContainerView;
//# sourceMappingURL=ContainerView.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"ContainerView.js","sourceRoot":"","sources":["../../../src/panels/views/ContainerView.ts"],"names":[],"mappings":";;;AAAA,oCAAoC;AACpC,yCAAsC;AAGtC,MAAa,aAAc,SAAQ,mBAAQ;IACvC,MAAM,CAAC,IAAyB;QAC5B,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO,CAAC;QAC9B,MAAM,UAAU,GAAG,IAAI,EAAE,UAAU,IAAI,EAAE,CAAC;QAE1C,eAAe;QACf,MAAM,cAAc,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,SAA4B,EAAE,EAAE,CAAC;;;yEAGP,SAAS,CAAC,EAAE,OAAO,SAAS,CAAC,IAAI,UAAU,SAAS,CAAC,IAAI;;;4EAGtD,SAAS,CAAC,EAAE;;;2EAGb,SAAS,CAAC,EAAE;;;SAG9E,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEZ,OAAO;;;;;;MAMT,IAAI,CAAC,SAAS,EAAE;;;;gFAI0D,OAAO,EAAE,IAAI,IAAI,MAAM;;;;;;;;;;;;;cAazF,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyJpB,CAAC;IACL,CAAC;CACJ;AAtMD,sCAsMC"}

View File

@@ -6,11 +6,16 @@ const BaseView_1 = require("./BaseView");
class ProjectListView extends BaseView_1.BaseView {
render(data) {
const projects = data?.projects || [];
// 生成项目列表的 HTML
const projectsHtml = projects.map((project) => `
const aircrafts = data?.aircrafts || [];
// 生成项目列表的 HTML - 显示飞行器名称
const projectsHtml = projects.map((project) => {
// 找到对应的飞行器 - 使用内联类型定义
const aircraft = aircrafts.find((a) => a.projectId === project.id);
const displayName = aircraft ? aircraft.name : project.name;
return `
<tr>
<td>
<span class="editable" onclick="editProjectName('${project.id}', '${project.name}')">🛸 ${project.name}</span>
<span class="editable" onclick="editProjectName('${project.id}', '${project.name}')">🛸 ${displayName}</span>
</td>
<td>
<span class="clickable" onclick="openAircraftConfig('${project.id}')">配置</span>
@@ -19,7 +24,8 @@ class ProjectListView extends BaseView_1.BaseView {
<button class="btn-delete" onclick="deleteProject('${project.id}')">删除</button>
</td>
</tr>
`).join('');
`;
}).join('');
return `<!DOCTYPE html>
<html lang="zh-CN">
<head>

View File

@@ -1 +1 @@
{"version":3,"file":"ProjectListView.js","sourceRoot":"","sources":["../../../src/panels/views/ProjectListView.ts"],"names":[],"mappings":";;;AAAA,sCAAsC;AACtC,yCAAsC;AAGtC,MAAa,eAAgB,SAAQ,mBAAQ;IACzC,MAAM,CAAC,IAAsB;QACzB,MAAM,QAAQ,GAAG,IAAI,EAAE,QAAQ,IAAI,EAAE,CAAC;QAEtC,eAAe;QACf,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAwB,EAAE,EAAE,CAAC;;;uEAGD,OAAO,CAAC,EAAE,OAAO,OAAO,CAAC,IAAI,UAAU,OAAO,CAAC,IAAI;;;2EAG/C,OAAO,CAAC,EAAE;;;yEAGZ,OAAO,CAAC,EAAE;;;SAG1E,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEZ,OAAO;;;;;;MAMT,IAAI,CAAC,SAAS,EAAE;;;;;;;;;;;;;;;;cAgBR,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyJlB,CAAC;IACL,CAAC;CACJ;AApMD,0CAoMC"}
{"version":3,"file":"ProjectListView.js","sourceRoot":"","sources":["../../../src/panels/views/ProjectListView.ts"],"names":[],"mappings":";;;AAAA,sCAAsC;AACtC,yCAAsC;AAGtC,MAAa,eAAgB,SAAQ,mBAAQ;IACzC,MAAM,CAAC,IAAsB;QACzB,MAAM,QAAQ,GAAG,IAAI,EAAE,QAAQ,IAAI,EAAE,CAAC;QACtC,MAAM,SAAS,GAAG,IAAI,EAAE,SAAS,IAAI,EAAE,CAAC;QAExC,yBAAyB;QACzB,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAwB,EAAE,EAAE;YAC3D,sBAAsB;YACtB,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,KAAK,OAAO,CAAC,EAAE,CAAC,CAAC;YACxE,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;YAE5D,OAAO;;;uEAGoD,OAAO,CAAC,EAAE,OAAO,OAAO,CAAC,IAAI,UAAU,WAAW;;;2EAG9C,OAAO,CAAC,EAAE;;;yEAGZ,OAAO,CAAC,EAAE;;;aAGtE,CAAC;QACN,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEZ,OAAO;;;;;;MAMT,IAAI,CAAC,SAAS,EAAE;;;;;;;;;;;;;;;;cAgBR,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyJlB,CAAC;IACL,CAAC;CACJ;AA3MD,0CA2MC"}

View File

@@ -0,0 +1,256 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProjectView = void 0;
// src/panels/views/ProjectView.ts
const BaseView_1 = require("./BaseView");
class ProjectView extends BaseView_1.BaseView {
render(data) {
const projects = data?.projects || [];
const projectPaths = data?.projectPaths || new Map();
const projectsHtml = projects.map((project) => {
const isConfigured = projectPaths.has(project.id);
const statusIcon = isConfigured ? '✅' : '⚙️';
const statusText = isConfigured ? '已配置' : '待配置';
return `
<tr>
<td>
<span class="project-name" data-project-id="${project.id}">${statusIcon} ${project.name}</span>
<div style="font-size: 12px; color: var(--vscode-descriptionForeground); margin-top: 4px;">
${statusText}${isConfigured ? ` - ${projectPaths.get(project.id)}` : ''}
</div>
</td>
<td>
<span class="clickable" onclick="configureProject('${project.id}', '${project.name}', ${isConfigured})">
${isConfigured ? '打开' : '配置'}
</span>
</td>
<td>
<button class="btn-delete" onclick="deleteProject('${project.id}')">删除</button>
</td>
</tr>
`;
}).join('');
return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字卫星构建平台</title>
${this.getStyles()}
<style>
.satellite-icon {
font-size: 2.5em;
vertical-align: middle;
margin-right: 10px;
line-height: 1;
display: inline-block;
position: relative;
top: -5px;
}
.header-title {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.project-name {
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: background-color 0.2s;
}
.project-name:hover {
background: var(--vscode-input-background);
}
</style>
</head>
<body>
<h2><span class="satellite-icon">🛰️</span>数字卫星构建平台</h2>
<table class="table">
<thead>
<tr>
<th width="40%">项目</th>
<th width="40%">配置</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody>
${projectsHtml}
<tr>
<td colspan="3" style="text-align: center; padding: 20px;">
<button class="btn-new" onclick="createNewProject()">+ 新建项目</button>
</td>
</tr>
</tbody>
</table>
<script>
const vscode = acquireVsCodeApi();
function configureProject(projectId, projectName, isConfigured) {
if (isConfigured) {
// 已配置的项目直接打开
vscode.postMessage({
type: 'openProject',
projectId: projectId
});
} else {
// 未配置的项目需要设置路径
vscode.postMessage({
type: 'configureProject',
projectId: projectId,
projectName: projectName
});
}
}
function createNewProject() {
showPromptDialog(
'新建项目',
'请输入项目名称:',
'',
function(name) {
if (name) {
vscode.postMessage({
type: 'createProject',
name: name
});
}
}
);
}
function deleteProject(projectId) {
showConfirmDialog(
'确认删除',
'确定删除这个项目吗?',
function() {
vscode.postMessage({
type: 'deleteProject',
projectId: projectId
});
},
function() {
// 用户取消删除
}
);
}
// 项目名称编辑功能 - 修复版本
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('click', function(event) {
if (event.target.classList.contains('project-name')) {
const projectNameElement = event.target;
const projectId = projectNameElement.getAttribute('data-project-id');
const currentName = projectNameElement.textContent.trim().split(' ').slice(1).join(' ');
if (projectId) {
editProjectName(projectId, currentName);
}
}
});
});
function editProjectName(projectId, currentName) {
showPromptDialog(
'修改项目名称',
'请输入新的项目名称:',
currentName,
function(newName) {
if (newName && newName !== currentName) {
vscode.postMessage({
type: 'updateProjectName',
projectId: projectId,
name: newName
});
}
}
);
}
// 对话框函数 - 只保留一份
function showConfirmDialog(title, message, onConfirm, onCancel) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.id = 'confirmModal';
overlay.innerHTML = \`
<div class="modal-dialog">
<div class="modal-title">\${title}</div>
<div>\${message}</div>
<div class="modal-buttons">
<button class="modal-btn modal-btn-secondary" onclick="closeConfirmDialog(false)">取消</button>
<button class="modal-btn modal-btn-primary" onclick="closeConfirmDialog(true)">确定</button>
</div>
</div>
\`;
document.body.appendChild(overlay);
window.confirmCallback = function(result) {
if (result && onConfirm) {
onConfirm();
} else if (!result && onCancel) {
onCancel();
}
delete window.confirmCallback;
};
}
function closeConfirmDialog(result) {
const modal = document.getElementById('confirmModal');
if (modal) {
modal.remove();
}
if (window.confirmCallback) {
window.confirmCallback(result);
}
}
function showPromptDialog(title, message, defaultValue, onConfirm) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';
overlay.id = 'promptModal';
overlay.innerHTML = \`
<div class="modal-dialog">
<div class="modal-title">\${title}</div>
<div>\${message}</div>
<input type="text" id="promptInput" value="\${defaultValue}" style="width: 100%; margin: 10px 0; padding: 6px; background: var(--vscode-input-background); color: var(--vscode-input-foreground); border: 1px solid var(--vscode-input-border);">
<div class="modal-buttons">
<button class="modal-btn modal-btn-secondary" onclick="closePromptDialog(null)">取消</button>
<button class="modal-btn modal-btn-primary" onclick="closePromptDialog(document.getElementById('promptInput').value)">确定</button>
</div>
</div>
\`;
document.body.appendChild(overlay);
setTimeout(() => {
const input = document.getElementById('promptInput');
if (input) {
input.focus();
input.select();
}
}, 100);
window.promptCallback = onConfirm;
}
function closePromptDialog(result) {
const modal = document.getElementById('promptModal');
if (modal) {
modal.remove();
}
if (window.promptCallback) {
window.promptCallback(result);
}
delete window.promptCallback;
}
</script>
</body>
</html>`;
}
}
exports.ProjectView = ProjectView;
//# sourceMappingURL=ProjectView.js.map

View File

@@ -0,0 +1 @@
{"version":3,"file":"ProjectView.js","sourceRoot":"","sources":["../../../src/panels/views/ProjectView.ts"],"names":[],"mappings":";;;AAAA,kCAAkC;AAClC,yCAAsC;AAGtC,MAAa,WAAY,SAAQ,mBAAQ;IACrC,MAAM,CAAC,IAA0E;QAC7E,MAAM,QAAQ,GAAG,IAAI,EAAE,QAAQ,IAAI,EAAE,CAAC;QACtC,MAAM,YAAY,GAAG,IAAI,EAAE,YAAY,IAAI,IAAI,GAAG,EAAE,CAAC;QAErD,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAwB,EAAE,EAAE;YAC3D,MAAM,YAAY,GAAG,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;YAClD,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7C,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;YAEhD,OAAO;;;kEAG+C,OAAO,CAAC,EAAE,KAAK,UAAU,IAAI,OAAO,CAAC,IAAI;;0BAEjF,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;;;yEAItB,OAAO,CAAC,EAAE,OAAO,OAAO,CAAC,IAAI,MAAM,YAAY;0BAC9F,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;;;;yEAIqB,OAAO,CAAC,EAAE;;;SAG1E,CAAA;QAAA,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAEb,OAAO;;;;;;MAMT,IAAI,CAAC,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAuCR,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA8KlB,CAAC;IACL,CAAC;CACJ;AA1PD,kCA0PC"}

View File

@@ -1,9 +1,9 @@
// src/panels/ConfigPanel.ts
import * as vscode from 'vscode';
import { ProjectManagementView } from './views/ProjectManagementView';
import { ProjectListView } from './views/ProjectListView';
import { AircraftConfigView } from './views/AircraftConfigView';
import { ContainerConfigView } from './views/ContainerConfigView';
import { ProjectView } from './views/ProjectView';
import { AircraftView } from './views/AircraftView';
import { ContainerView } from './views/ContainerView';
import { ConfigView } from './views/ConfigView';
// 数据模型接口
interface Project {
@@ -36,43 +36,25 @@ export class ConfigPanel {
private readonly panel: vscode.WebviewPanel;
private readonly extensionUri: vscode.Uri;
private currentView: 'management' | 'projects' | 'aircrafts' | 'container' = 'management';
private currentView: 'projects' | 'aircrafts' | 'containers' | 'configs' = 'projects';
private currentProjectId: string = '';
private currentAircraftId: string = '';
private currentContainerId: string = '';
// 数据存储
private projects: Project[] = [
{ id: 'p1', name: '项目1' },
{ id: 'p2', name: '项目2' }
];
private aircrafts: Aircraft[] = [
{ id: 'a1', name: '飞行器配置1', projectId: 'p1' },
{ id: 'a2', name: '飞行器配置2', projectId: 'p2' }
];
private containers: Container[] = [
{ id: 'c1', name: '容器1', aircraftId: 'a1' },
{ id: 'c2', name: '容器2', aircraftId: 'a1' },
{ id: 'c3', name: '容器1', aircraftId: 'a2' }
];
private configs: Config[] = [
{ id: 'cfg1', name: '配置1', fileName: 'config.yaml', content: '# 配置1内容', containerId: 'c1' },
{ id: 'cfg2', name: '配置2', fileName: 'settings.json', content: '# 配置2内容', containerId: 'c1' },
{ id: 'cfg3', name: '配置1', fileName: 'docker-compose.yml', content: '# 配置1内容', containerId: 'c2' },
{ id: 'cfg4', name: '配置1', fileName: 'config.yaml', content: '# 配置1内容', containerId: 'c3' }
];
private projects: Project[] = [];
private aircrafts: Aircraft[] = [];
private containers: Container[] = [];
private configs: Config[] = [];
// 项目存储路径映射
private projectPaths: Map<string, string> = new Map();
// 视图实例
private readonly projectManagementView: ProjectManagementView;
private readonly projectListView: ProjectListView;
private readonly aircraftConfigView: AircraftConfigView;
private readonly containerConfigView: ContainerConfigView;
private readonly projectView: ProjectView;
private readonly aircraftView: AircraftView;
private readonly containerView: ContainerView;
private readonly configView: ConfigView;
public static createOrShow(extensionUri: vscode.Uri) {
const column = vscode.window.activeTextEditor?.viewColumn || vscode.ViewColumn.One;
@@ -83,8 +65,8 @@ export class ConfigPanel {
}
const panel = vscode.window.createWebviewPanel(
'dockerConfigTest',
'Docker配置测试',
'DCSP',
'数字卫星构建平台',
column,
{
enableScripts: true,
@@ -101,10 +83,10 @@ export class ConfigPanel {
this.extensionUri = extensionUri;
// 初始化各个视图
this.projectManagementView = new ProjectManagementView(extensionUri);
this.projectListView = new ProjectListView(extensionUri);
this.aircraftConfigView = new AircraftConfigView(extensionUri);
this.containerConfigView = new ContainerConfigView(extensionUri);
this.projectView = new ProjectView(extensionUri);
this.aircraftView = new AircraftView(extensionUri);
this.containerView = new ContainerView(extensionUri);
this.configView = new ConfigView(extensionUri);
this.updateWebview();
this.setupMessageListener();
@@ -120,7 +102,7 @@ export class ConfigPanel {
case 'configureProject':
const selectedPath = await this.selectProjectPath(data.projectId, data.projectName);
if (selectedPath) {
this.currentView = 'projects';
this.currentView = 'aircrafts';
this.currentProjectId = data.projectId;
this.updateWebview();
}
@@ -128,43 +110,40 @@ export class ConfigPanel {
case 'openProject':
// 已配置的项目直接打开
this.currentView = 'projects';
this.currentView = 'aircrafts';
this.currentProjectId = data.projectId;
this.updateWebview();
break;
case 'openAircraftConfig':
this.currentView = 'aircrafts';
this.currentView = 'containers';
this.currentProjectId = data.projectId;
// 找到对应的飞行器ID
const aircraft = this.aircrafts.find(a => a.projectId === data.projectId);
if (aircraft) {
this.currentAircraftId = aircraft.id;
}
this.currentAircraftId = data.aircraftId;
this.updateWebview();
break;
case 'openContainerConfig':
this.currentView = 'container';
this.currentView = 'configs';
this.currentContainerId = data.containerId;
this.updateWebview();
break;
case 'goBackToManagement':
this.currentView = 'management';
this.updateWebview();
break;
// 修复返回按钮的消息处理
case 'goBackToProjects':
this.currentView = 'projects';
this.updateWebview();
break;
case 'goBackToAircraft':
case 'goBackToAircrafts':
this.currentView = 'aircrafts';
this.updateWebview();
break;
case 'goBackToContainers':
this.currentView = 'containers';
this.updateWebview();
break;
case 'updateProjectName':
this.updateProjectName(data.projectId, data.name);
break;
@@ -173,6 +152,14 @@ export class ConfigPanel {
this.createProject(data.name);
break;
case 'updateAircraftName':
this.updateAircraftName(data.aircraftId, data.name);
break;
case 'createAircraft':
this.createAircraft(data.name);
break;
case 'updateContainerName':
this.updateContainerName(data.containerId, data.name);
break;
@@ -205,6 +192,10 @@ export class ConfigPanel {
this.deleteProject(data.projectId);
break;
case 'deleteAircraft':
this.deleteAircraft(data.aircraftId);
break;
case 'deleteContainer':
this.deleteContainer(data.containerId);
break;
@@ -216,10 +207,11 @@ export class ConfigPanel {
});
}
// ... 其余方法保持不变selectProjectPath, updateProjectName, createProject等
// === 项目路径选择 ===
private async selectProjectPath(projectId: string, projectName: string): Promise<string | null> {
try {
// 提供两种方式:选择现有路径或输入新路径
// 选择现有路径或输入新路径
const choice = await vscode.window.showQuickPick(
[
{
@@ -294,7 +286,7 @@ export class ConfigPanel {
}
}
// === 项目相关方法 ===
// 更新项目名
private updateProjectName(projectId: string, newName: string) {
const project = this.projects.find(p => p.id === projectId);
if (project) {
@@ -304,6 +296,7 @@ export class ConfigPanel {
}
}
// 创建新项目
private createProject(name: string) {
const newId = 'p' + (this.projects.length + 1);
const newProject: Project = {
@@ -311,43 +304,79 @@ export class ConfigPanel {
name: name
};
this.projects.push(newProject);
// 同时创建一个默认的飞行器配置
const newAircraftId = 'a' + (this.aircrafts.length + 1);
this.aircrafts.push({
id: newAircraftId,
name: `${name}配置`,
projectId: newId
});
vscode.window.showInformationMessage(`新建项目: ${name}`);
this.updateWebview();
}
// 删除项目
private deleteProject(projectId: string) {
// 删除项目
const project = this.projects.find(p => p.id === projectId);
if (!project) return;
this.projects = this.projects.filter(p => p.id !== projectId);
// 删除相关的飞行器
const relatedAircrafts = this.aircrafts.filter(a => a.projectId === projectId);
const aircraftIds = relatedAircrafts.map(a => a.id);
this.aircrafts = this.aircrafts.filter(a => a.projectId !== projectId);
// 删除相关的容器
this.containers = this.containers.filter(c => !aircraftIds.includes(c.aircraftId));
// 删除相关的配置
const containerIds = this.containers.filter(c => aircraftIds.includes(c.aircraftId)).map(c => c.id);
this.configs = this.configs.filter(cfg => !containerIds.includes(cfg.containerId));
// 删除项目路径映射
this.projectPaths.delete(projectId);
vscode.window.showInformationMessage(`删除项目: ${projectId}`);
vscode.window.showInformationMessage(`删除项目: ${project.name}`);
this.updateWebview();
}
// === 容器相关方法 ===
// 更新飞行器名
private updateAircraftName(aircraftId: string, newName: string) {
const aircraft = this.aircrafts.find(a => a.id === aircraftId);
if (aircraft) {
aircraft.name = newName;
vscode.window.showInformationMessage(`飞行器名称更新: ${newName}`);
this.updateWebview();
}
}
// 创建新飞行器
private createAircraft(name: string) {
if (!this.currentProjectId) {
vscode.window.showErrorMessage('无法创建飞行器:未找到当前项目');
return;
}
const newId = 'a' + (this.aircrafts.length + 1);
const newAircraft: Aircraft = {
id: newId,
name: name,
projectId: this.currentProjectId
};
this.aircrafts.push(newAircraft);
vscode.window.showInformationMessage(`新建飞行器: ${name}`);
this.updateWebview();
}
// 删除飞行器
private deleteAircraft(aircraftId: string) {
const aircraft = this.aircrafts.find(a => a.id === aircraftId);
if (!aircraft) return;
this.aircrafts = this.aircrafts.filter(a => a.id !== aircraftId);
// 删除相关的容器
this.containers = this.containers.filter(c => c.aircraftId !== aircraftId);
// 删除相关的配置
const containerIds = this.containers.filter(c => c.aircraftId === aircraftId).map(c => c.id);
this.configs = this.configs.filter(cfg => !containerIds.includes(cfg.containerId));
vscode.window.showInformationMessage(`删除飞行器: ${aircraft.name}`);
this.updateWebview();
}
// 更新容器名
private updateContainerName(containerId: string, newName: string) {
const container = this.containers.find(c => c.id === containerId);
if (container) {
@@ -357,6 +386,7 @@ export class ConfigPanel {
}
}
// 创建新容器
private createContainer(name: string) {
console.log('创建容器当前飞行器ID:', this.currentAircraftId);
@@ -377,20 +407,20 @@ export class ConfigPanel {
// 创建两个默认配置文件
const configCount = this.configs.length;
// 第一个配置文件Dockerfile
// 第一个配置文件
this.configs.push({
id: 'cfg' + (configCount + 1),
name: 'Docker配置',
fileName: 'Dockerfile',
name: '配置1',
fileName: 'config.sh',
content: `# ${name} 的 Dockerfile\nFROM ubuntu:20.04\n\n# 设置工作目录\nWORKDIR /app\n\n# 复制文件\nCOPY . .\n\n# 安装依赖\nRUN apt-get update && apt-get install -y \\\n python3 \\\n python3-pip\n\n# 暴露端口\nEXPOSE 8080\n\n# 启动命令\nCMD ["python3", "app.py"]`,
containerId: newId
});
// 第二个配置文件docker-compose.yml
// 第二个配置文件
this.configs.push({
id: 'cfg' + (configCount + 2),
name: '编排配置',
fileName: 'docker-compose.yml',
name: '配置2',
fileName: 'config.sh',
content: `# ${name} 的 Docker Compose 配置\nversion: '3.8'\n\nservices:\n ${name.toLowerCase().replace(/\\s+/g, '-')}:\n build: .\n container_name: ${name}\n ports:\n - "8080:8080"\n environment:\n - NODE_ENV=production\n volumes:\n - ./data:/app/data\n restart: unless-stopped`,
containerId: newId
});
@@ -399,18 +429,22 @@ export class ConfigPanel {
this.updateWebview();
}
// 删除容器
private deleteContainer(containerId: string) {
const container = this.containers.find(c => c.id === containerId);
if (!container) return;
// 删除容器
this.containers = this.containers.filter(c => c.id !== containerId);
// 删除相关的配置
this.configs = this.configs.filter(cfg => cfg.containerId !== containerId);
vscode.window.showInformationMessage(`删除容器: ${containerId}`);
vscode.window.showInformationMessage(`删除容器: ${container.name}`);
this.updateWebview();
}
// === 配置相关方法 ===
// 更新配置名
private updateConfigName(configId: string, newName: string) {
const config = this.configs.find(c => c.id === configId);
if (config) {
@@ -420,6 +454,7 @@ export class ConfigPanel {
}
}
// 更新文件名
private async updateConfigFileName(configId: string, fileName: string): Promise<void> {
const config = this.configs.find(c => c.id === configId);
if (config) {
@@ -429,7 +464,7 @@ export class ConfigPanel {
}
}
// 创建配置文件
// 创建配置文件
private createConfig(name: string) {
const newId = 'cfg' + (this.configs.length + 1);
const newConfig: Config = {
@@ -540,39 +575,34 @@ export class ConfigPanel {
private getWebviewContent(): string {
switch (this.currentView) {
case 'management':
return this.projectManagementView.render({
case 'projects':
return this.projectView.render({
projects: this.projects,
projectPaths: this.projectPaths
});
case 'projects':
return this.projectListView.render({
projects: this.projects
});
case 'aircrafts':
const projectAircrafts = this.aircrafts.filter(a => a.projectId === this.currentProjectId);
return this.aircraftView.render({
aircrafts: projectAircrafts
});
case 'containers':
const currentProject = this.projects.find(p => p.id === this.currentProjectId);
const projectAircraft = this.aircrafts.find(a => a.projectId === this.currentProjectId);
if (projectAircraft) {
this.currentAircraftId = projectAircraft.id;
}
const projectContainers = this.containers.filter(c => c.aircraftId === this.currentAircraftId);
return this.aircraftConfigView.render({
return this.containerView.render({
project: currentProject,
containers: projectContainers
});
case 'container':
case 'configs':
const currentContainer = this.containers.find(c => c.id === this.currentContainerId);
const containerConfigs = this.configs.filter(cfg => cfg.containerId === this.currentContainerId);
return this.containerConfigView.render({
return this.configView.render({
container: currentContainer,
configs: containerConfigs
});
default:
return this.projectManagementView.render({
return this.projectView.render({
projects: this.projects,
projectPaths: this.projectPaths
});

View File

@@ -17,8 +17,16 @@ export interface ConfigViewData {
containerId: string;
}
export interface AircraftViewData {
id: string;
name: string;
projectId: string;
}
export interface ProjectListData {
aircrafts?: AircraftViewData[];
projects: ProjectViewData[];
}
export interface AircraftConfigData {

View File

@@ -1,52 +1,53 @@
// src/panels/views/ProjectListView.ts
// src/panels/views/AircraftView.ts
import { BaseView } from './BaseView';
import { ProjectListData, ProjectViewData } from '../types/ViewTypes';
export class ProjectListView extends BaseView {
render(data?: ProjectListData): string {
const projects = data?.projects || [];
export class AircraftView extends BaseView {
render(data?: { aircrafts: any[] }): string {
const aircrafts = data?.aircrafts || [];
// 生成项目列表的 HTML
const projectsHtml = projects.map((project: ProjectViewData) => `
// 生成飞行器列表的 HTML
const aircraftsHtml = aircrafts.map((aircraft: any) => {
return `
<tr>
<td>
<span class="editable" onclick="editProjectName('${project.id}', '${project.name}')">🛸 ${project.name}</span>
<span class="editable" onclick="editAircraftName('${aircraft.id}', '${aircraft.name}')">🛸 ${aircraft.name}</span>
</td>
<td>
<span class="clickable" onclick="openAircraftConfig('${project.id}')"></span>
<span class="clickable" onclick="openAircraftConfig('${aircraft.id}')"></span>
</td>
<td>
<button class="btn-delete" onclick="deleteProject('${project.id}')"></button>
<button class="btn-delete" onclick="deleteAircraft('${aircraft.id}')"></button>
</td>
</tr>
`).join('');
`;
}).join('');
return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<title></title>
${this.getStyles()}
</head>
<body>
<div class="header">
<h2>🚀 </h2>
<button class="back-btn" onclick="goBackToManagement()"> </button>
<h2>🚀 </h2>
<button class="back-btn" onclick="goBackToProjects()"> </button>
</div>
<table class="table">
<thead>
<tr>
<th width="40%"></th>
<th width="40%"></th>
<th width="40%"></th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
${projectsHtml}
${aircraftsHtml}
<tr>
<td colspan="3" style="text-align: center; padding: 20px;">
<button class="btn-new" onclick="createNewProject()">+ </button>
<button class="btn-new" onclick="createNewAircraft()">+ </button>
</td>
</tr>
</tbody>
@@ -55,16 +56,16 @@ export class ProjectListView extends BaseView {
<script>
const vscode = acquireVsCodeApi();
function editProjectName(projectId, currentName) {
function editAircraftName(aircraftId, currentName) {
showPromptDialog(
'修改项目名称',
'请输入新的项目名称:',
'修改飞行器名称',
'请输入新的飞行器名称:',
currentName,
function(newName) {
if (newName && newName !== currentName) {
vscode.postMessage({
type: 'updateProjectName',
projectId: projectId,
type: 'updateAircraftName',
aircraftId: aircraftId,
name: newName
});
}
@@ -72,22 +73,22 @@ export class ProjectListView extends BaseView {
);
}
function openAircraftConfig(projectId) {
function openAircraftConfig(aircraftId) {
vscode.postMessage({
type: 'openAircraftConfig',
projectId: projectId
aircraftId: aircraftId
});
}
function createNewProject() {
function createNewAircraft() {
showPromptDialog(
'新建项目',
'请输入项目名称:',
'新建飞行器',
'请输入飞行器名称:',
'',
function(name) {
if (name) {
vscode.postMessage({
type: 'createProject',
type: 'createAircraft',
name: name
});
}
@@ -95,14 +96,14 @@ export class ProjectListView extends BaseView {
);
}
function deleteProject(projectId) {
function deleteAircraft(aircraftId) {
showConfirmDialog(
'确认删除',
'确定删除这个项目吗?',
'确定删除这个飞行器吗?',
function() {
vscode.postMessage({
type: 'deleteProject',
projectId: projectId
type: 'deleteAircraft',
aircraftId: aircraftId
});
},
function() {
@@ -111,11 +112,11 @@ export class ProjectListView extends BaseView {
);
}
function goBackToManagement() {
vscode.postMessage({ type: 'goBackToManagement' });
function goBackToProjects() {
vscode.postMessage({ type: 'goBackToProjects' });
}
// 对话框函数(与之前相同)
// 对话框函数
function showConfirmDialog(title, message, onConfirm, onCancel) {
const overlay = document.createElement('div');
overlay.className = 'modal-overlay';

View File

@@ -1,8 +1,8 @@
// src/panels/views/ContainerConfigView.ts
// src/panels/views/ConfigView.ts
import { BaseView } from './BaseView';
import { ContainerConfigData, ConfigViewData } from '../types/ViewTypes';
export class ContainerConfigView extends BaseView {
export class ConfigView extends BaseView {
render(data?: ContainerConfigData): string {
const container = data?.container;
const configs = data?.configs || [];
@@ -27,13 +27,13 @@ export class ContainerConfigView extends BaseView {
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<title></title>
${this.getStyles()}
</head>
<body>
<div class="header">
<h2> - <span style="color: var(--vscode-textLink-foreground);">${container?.name || '未知容器'}</span></h2>
<button class="back-btn" onclick="goBackToAircraft()"> </button>
<h2> - <span style="color: var(--vscode-textLink-foreground);">${container?.name || '未知容器'}</span></h2>
<button class="back-btn" onclick="goBackToContainers()"> </button>
</div>
<table class="table">
@@ -159,8 +159,8 @@ export class ContainerConfigView extends BaseView {
currentConfigId = null;
}
function goBackToAircraft() {
vscode.postMessage({ type: 'goBackToAircraft' });
function goBackToContainers() {
vscode.postMessage({ type: 'goBackToContainers' });
}
// 对话框函数

View File

@@ -1,8 +1,8 @@
// src/panels/views/AircraftConfigView.ts
// src/panels/views/ContainerView.ts
import { BaseView } from './BaseView';
import { AircraftConfigData, ContainerViewData } from '../types/ViewTypes';
export class AircraftConfigView extends BaseView {
export class ContainerView extends BaseView {
render(data?: AircraftConfigData): string {
const project = data?.project;
const containers = data?.containers || [];
@@ -27,13 +27,13 @@ export class AircraftConfigView extends BaseView {
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<title></title>
${this.getStyles()}
</head>
<body>
<div class="header">
<h2>📋 - <span style="color: var(--vscode-textLink-foreground);">${project?.name || '未知项目'}</span></h2>
<button class="back-btn" onclick="goBackToProjects()"> </button>
<h2>📋 - <span style="color: var(--vscode-textLink-foreground);">${project?.name || '未知项目'}</span></h2>
<button class="back-btn" onclick="goBackToAircrafts()"> </button>
</div>
<table class="table">
@@ -97,8 +97,8 @@ export class AircraftConfigView extends BaseView {
);
}
function goBackToProjects() {
vscode.postMessage({ type: 'goBackToProjects' });
function goBackToAircrafts() {
vscode.postMessage({ type: 'goBackToAircrafts' });
}
function deleteContainer(containerId) {

View File

@@ -1,8 +1,8 @@
// src/panels/views/ProjectManagementView.ts
// src/panels/views/ProjectView.ts
import { BaseView } from './BaseView';
import { ProjectViewData } from '../types/ViewTypes';
export class ProjectManagementView extends BaseView {
export class ProjectView extends BaseView {
render(data?: { projects: ProjectViewData[], projectPaths?: Map<string, string> }): string {
const projects = data?.projects || [];
const projectPaths = data?.projectPaths || new Map();