465 lines
20 KiB
JavaScript
465 lines
20 KiB
JavaScript
"use strict";
|
||
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");
|
||
class ConfigPanel {
|
||
static createOrShow(extensionUri) {
|
||
const column = vscode.window.activeTextEditor?.viewColumn || vscode.ViewColumn.One;
|
||
if (ConfigPanel.currentPanel) {
|
||
ConfigPanel.currentPanel.panel.reveal(column);
|
||
return;
|
||
}
|
||
const panel = vscode.window.createWebviewPanel('dockerConfigTest', 'Docker配置测试', column, {
|
||
enableScripts: true,
|
||
localResourceRoots: [extensionUri],
|
||
retainContextWhenHidden: true
|
||
});
|
||
ConfigPanel.currentPanel = new ConfigPanel(panel, extensionUri);
|
||
}
|
||
constructor(panel, extensionUri) {
|
||
this.currentView = 'management';
|
||
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.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.updateWebview();
|
||
this.setupMessageListener();
|
||
this.panel.onDidDispose(() => {
|
||
ConfigPanel.currentPanel = undefined;
|
||
});
|
||
}
|
||
setupMessageListener() {
|
||
this.panel.webview.onDidReceiveMessage(async (data) => {
|
||
switch (data.type) {
|
||
case 'configureProject':
|
||
const selectedPath = await this.selectProjectPath(data.projectId, data.projectName);
|
||
if (selectedPath) {
|
||
this.currentView = 'projects';
|
||
this.currentProjectId = data.projectId;
|
||
this.updateWebview();
|
||
}
|
||
break;
|
||
case 'openProject':
|
||
// 已配置的项目直接打开
|
||
this.currentView = 'projects';
|
||
this.currentProjectId = data.projectId;
|
||
this.updateWebview();
|
||
break;
|
||
case 'openAircraftConfig':
|
||
this.currentView = 'aircrafts';
|
||
this.currentProjectId = data.projectId;
|
||
// 找到对应的飞行器ID
|
||
const aircraft = this.aircrafts.find(a => a.projectId === data.projectId);
|
||
if (aircraft) {
|
||
this.currentAircraftId = aircraft.id;
|
||
}
|
||
this.updateWebview();
|
||
break;
|
||
case 'openContainerConfig':
|
||
this.currentView = 'container';
|
||
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':
|
||
this.currentView = 'aircrafts';
|
||
this.updateWebview();
|
||
break;
|
||
case 'updateProjectName':
|
||
this.updateProjectName(data.projectId, data.name);
|
||
break;
|
||
case 'createProject':
|
||
this.createProject(data.name);
|
||
break;
|
||
case 'updateContainerName':
|
||
this.updateContainerName(data.containerId, data.name);
|
||
break;
|
||
case 'createContainer':
|
||
this.createContainer(data.name);
|
||
break;
|
||
case 'updateConfigName':
|
||
this.updateConfigName(data.configId, data.name);
|
||
break;
|
||
case 'updateConfigFileName':
|
||
await this.updateConfigFileName(data.configId, data.fileName);
|
||
break;
|
||
case 'createConfig':
|
||
this.createConfig(data.name);
|
||
break;
|
||
case 'saveConfigFile':
|
||
await this.saveConfigFileToDisk(data.configId, data.content);
|
||
break;
|
||
case 'loadConfigFile':
|
||
this.loadConfigFile(data.configId);
|
||
break;
|
||
case 'deleteProject':
|
||
this.deleteProject(data.projectId);
|
||
break;
|
||
case 'deleteContainer':
|
||
this.deleteContainer(data.containerId);
|
||
break;
|
||
case 'deleteConfig':
|
||
this.deleteConfig(data.configId);
|
||
break;
|
||
}
|
||
});
|
||
}
|
||
// === 项目路径选择 ===
|
||
async selectProjectPath(projectId, projectName) {
|
||
try {
|
||
// 提供两种方式：选择现有路径或输入新路径
|
||
const choice = await vscode.window.showQuickPick([
|
||
{
|
||
label: '$(folder) 选择现有文件夹',
|
||
description: '从文件系统中选择已存在的文件夹',
|
||
value: 'select'
|
||
},
|
||
{
|
||
label: '$(new-folder) 创建新文件夹',
|
||
description: '输入新文件夹路径（将自动创建）',
|
||
value: 'create'
|
||
}
|
||
], {
|
||
placeHolder: '选择项目存储方式'
|
||
});
|
||
if (!choice) {
|
||
return null;
|
||
}
|
||
if (choice.value === 'select') {
|
||
// 选择现有路径
|
||
const result = await vscode.window.showOpenDialog({
|
||
canSelectFiles: false,
|
||
canSelectFolders: true,
|
||
canSelectMany: false,
|
||
openLabel: `选择 ${projectName} 的存储位置`,
|
||
title: `为项目 "${projectName}" 选择存储文件夹`
|
||
});
|
||
if (result && result.length > 0) {
|
||
const selectedPath = result[0].fsPath;
|
||
this.projectPaths.set(projectId, selectedPath);
|
||
vscode.window.showInformationMessage(`项目存储位置已设置: ${selectedPath}`);
|
||
return selectedPath;
|
||
}
|
||
}
|
||
else {
|
||
// 创建新路径
|
||
const pathInput = await vscode.window.showInputBox({
|
||
prompt: '请输入项目存储路径（绝对路径）',
|
||
placeHolder: `/path/to/your/project/${projectName}`,
|
||
validateInput: (value) => {
|
||
if (!value) {
|
||
return '路径不能为空';
|
||
}
|
||
return null;
|
||
}
|
||
});
|
||
if (pathInput) {
|
||
try {
|
||
// 尝试创建目录
|
||
const dirUri = vscode.Uri.file(pathInput);
|
||
await vscode.workspace.fs.createDirectory(dirUri);
|
||
this.projectPaths.set(projectId, pathInput);
|
||
vscode.window.showInformationMessage(`项目存储位置已创建: ${pathInput}`);
|
||
return pathInput;
|
||
}
|
||
catch (error) {
|
||
vscode.window.showErrorMessage(`创建目录失败: ${error}`);
|
||
return null;
|
||
}
|
||
}
|
||
}
|
||
return null;
|
||
}
|
||
catch (error) {
|
||
vscode.window.showErrorMessage(`选择存储路径时出错: ${error}`);
|
||
return null;
|
||
}
|
||
}
|
||
// === 项目相关方法 ===
|
||
updateProjectName(projectId, newName) {
|
||
const project = this.projects.find(p => p.id === projectId);
|
||
if (project) {
|
||
project.name = newName;
|
||
vscode.window.showInformationMessage(`项目名称更新: ${newName}`);
|
||
this.updateWebview();
|
||
}
|
||
}
|
||
createProject(name) {
|
||
const newId = 'p' + (this.projects.length + 1);
|
||
const newProject = {
|
||
id: newId,
|
||
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) {
|
||
// 删除项目
|
||
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}`);
|
||
this.updateWebview();
|
||
}
|
||
// === 容器相关方法 ===
|
||
updateContainerName(containerId, newName) {
|
||
const container = this.containers.find(c => c.id === containerId);
|
||
if (container) {
|
||
container.name = newName;
|
||
vscode.window.showInformationMessage(`容器名称更新: ${newName}`);
|
||
this.updateWebview();
|
||
}
|
||
}
|
||
createContainer(name) {
|
||
console.log('创建容器，当前飞行器ID:', this.currentAircraftId);
|
||
if (!this.currentAircraftId) {
|
||
vscode.window.showErrorMessage('无法创建容器：未找到当前飞行器');
|
||
return;
|
||
}
|
||
const newId = 'c' + (this.containers.length + 1);
|
||
const newContainer = {
|
||
id: newId,
|
||
name: name,
|
||
aircraftId: this.currentAircraftId
|
||
};
|
||
this.containers.push(newContainer);
|
||
// 创建两个默认配置文件
|
||
const configCount = this.configs.length;
|
||
// 第一个配置文件：Dockerfile
|
||
this.configs.push({
|
||
id: 'cfg' + (configCount + 1),
|
||
name: 'Docker配置',
|
||
fileName: 'Dockerfile',
|
||
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',
|
||
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) {
|
||
// 删除容器
|
||
this.containers = this.containers.filter(c => c.id !== containerId);
|
||
// 删除相关的配置
|
||
this.configs = this.configs.filter(cfg => cfg.containerId !== containerId);
|
||
vscode.window.showInformationMessage(`删除容器: ${containerId}`);
|
||
this.updateWebview();
|
||
}
|
||
// === 配置相关方法 ===
|
||
updateConfigName(configId, newName) {
|
||
const config = this.configs.find(c => c.id === configId);
|
||
if (config) {
|
||
config.name = newName;
|
||
vscode.window.showInformationMessage(`配置名称更新: ${newName}`);
|
||
this.updateWebview();
|
||
}
|
||
}
|
||
async updateConfigFileName(configId, fileName) {
|
||
const config = this.configs.find(c => c.id === configId);
|
||
if (config) {
|
||
config.fileName = fileName;
|
||
vscode.window.showInformationMessage(`文件名更新: ${fileName}`);
|
||
this.updateWebview();
|
||
}
|
||
}
|
||
// 创建配置文件
|
||
createConfig(name) {
|
||
const newId = 'cfg' + (this.configs.length + 1);
|
||
const newConfig = {
|
||
id: newId,
|
||
name: name,
|
||
fileName: name.toLowerCase().replace(/\s+/g, '_') + '.yaml',
|
||
content: `# ${name} 配置文件\n# 创建时间: ${new Date().toLocaleString()}\n# 您可以在此编辑配置内容\n\n`,
|
||
containerId: this.currentContainerId
|
||
};
|
||
this.configs.push(newConfig);
|
||
vscode.window.showInformationMessage(`新建配置: ${name}`);
|
||
this.updateWebview();
|
||
}
|
||
// 删除配置文件
|
||
deleteConfig(configId) {
|
||
const config = this.configs.find(c => c.id === configId);
|
||
if (config) {
|
||
this.configs = this.configs.filter(c => c.id !== configId);
|
||
vscode.window.showInformationMessage(`删除配置: ${config.name}`);
|
||
this.updateWebview();
|
||
}
|
||
}
|
||
// 保存配置文件到磁盘
|
||
async saveConfigFileToDisk(configId, content) {
|
||
try {
|
||
const config = this.configs.find(c => c.id === configId);
|
||
if (!config) {
|
||
vscode.window.showErrorMessage('未找到配置文件');
|
||
return;
|
||
}
|
||
const container = this.containers.find(c => c.id === config.containerId);
|
||
if (!container) {
|
||
vscode.window.showErrorMessage('未找到容器');
|
||
return;
|
||
}
|
||
const aircraft = this.aircrafts.find(a => a.id === container.aircraftId);
|
||
if (!aircraft) {
|
||
vscode.window.showErrorMessage('未找到飞行器');
|
||
return;
|
||
}
|
||
const project = this.projects.find(p => p.id === aircraft.projectId);
|
||
if (!project) {
|
||
vscode.window.showErrorMessage('未找到项目');
|
||
return;
|
||
}
|
||
const projectPath = this.projectPaths.get(aircraft.projectId);
|
||
if (!projectPath) {
|
||
vscode.window.showErrorMessage('未设置项目存储路径，请先配置项目');
|
||
return;
|
||
}
|
||
// 构建文件路径：项目路径/飞行器名/容器名/文件名
|
||
const aircraftDir = vscode.Uri.joinPath(vscode.Uri.file(projectPath), aircraft.name);
|
||
const containerDir = vscode.Uri.joinPath(aircraftDir, container.name);
|
||
const fileUri = vscode.Uri.joinPath(containerDir, config.fileName);
|
||
// 确保飞行器目录存在
|
||
try {
|
||
await vscode.workspace.fs.createDirectory(aircraftDir);
|
||
}
|
||
catch (error) {
|
||
// 目录可能已存在，忽略错误
|
||
}
|
||
// 确保容器目录存在
|
||
try {
|
||
await vscode.workspace.fs.createDirectory(containerDir);
|
||
}
|
||
catch (error) {
|
||
// 目录可能已存在，忽略错误
|
||
}
|
||
// 写入文件
|
||
const uint8Array = new TextEncoder().encode(content);
|
||
await vscode.workspace.fs.writeFile(fileUri, uint8Array);
|
||
vscode.window.showInformationMessage(`配置文件已保存: ${fileUri.fsPath}`);
|
||
}
|
||
catch (error) {
|
||
vscode.window.showErrorMessage(`保存文件时出错: ${error}`);
|
||
}
|
||
}
|
||
// 加载配置文件
|
||
loadConfigFile(configId) {
|
||
const config = this.configs.find(c => c.id === configId);
|
||
if (config) {
|
||
this.panel.webview.postMessage({
|
||
type: 'configFileLoaded',
|
||
content: config.content || `# ${config.name} 的配置文件\n# 您可以在此编辑配置内容\n\n`
|
||
});
|
||
}
|
||
else {
|
||
this.panel.webview.postMessage({
|
||
type: 'configFileLoaded',
|
||
content: `# 这是 ${configId} 的配置文件\n# 您可以在此编辑配置内容\n\napp.name = "示例应用"\napp.port = 8080\napp.debug = true`
|
||
});
|
||
}
|
||
}
|
||
// 更新视图
|
||
updateWebview() {
|
||
this.panel.webview.html = this.getWebviewContent();
|
||
}
|
||
getWebviewContent() {
|
||
switch (this.currentView) {
|
||
case 'management':
|
||
return this.projectManagementView.render({
|
||
projects: this.projects,
|
||
projectPaths: this.projectPaths
|
||
});
|
||
case 'projects':
|
||
return this.projectListView.render({
|
||
projects: this.projects
|
||
});
|
||
case 'aircrafts':
|
||
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({
|
||
project: currentProject,
|
||
containers: projectContainers
|
||
});
|
||
case 'container':
|
||
const currentContainer = this.containers.find(c => c.id === this.currentContainerId);
|
||
const containerConfigs = this.configs.filter(cfg => cfg.containerId === this.currentContainerId);
|
||
return this.containerConfigView.render({
|
||
container: currentContainer,
|
||
configs: containerConfigs
|
||
});
|
||
default:
|
||
return this.projectManagementView.render({
|
||
projects: this.projects,
|
||
projectPaths: this.projectPaths
|
||
});
|
||
}
|
||
}
|
||
}
|
||
exports.ConfigPanel = ConfigPanel;
|
||
//# sourceMappingURL=ConfigPanel.js.map
|