401 lines
14 KiB
TypeScript
401 lines
14 KiB
TypeScript
|
// src/panels/ConfigPanel.ts
|
|||
|
|
import * as vscode from 'vscode';
|
|||
|
|
import { ProjectListView } from './views/ProjectListView';
|
|||
|
|
import { AircraftConfigView } from './views/AircraftConfigView';
|
|||
|
|
import { ContainerConfigView } from './views/ContainerConfigView';
|
|||
|
|
|
|||
|
|
// 数据模型接口
|
|||
|
|
interface Project {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Aircraft {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
projectId: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Container {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
aircraftId: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface Config {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
fileName: string;
|
|||
|
|
content: string;
|
|||
|
|
containerId: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export class ConfigPanel {
|
|||
|
|
private static currentPanel: ConfigPanel | undefined;
|
|||
|
|
private readonly panel: vscode.WebviewPanel;
|
|||
|
|
private readonly extensionUri: vscode.Uri;
|
|||
|
|
|
|||
|
|
private currentView: 'projects' | 'aircrafts' | 'container' = '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 readonly projectListView: ProjectListView;
|
|||
|
|
private readonly aircraftConfigView: AircraftConfigView;
|
|||
|
|
private readonly containerConfigView: ContainerConfigView;
|
|||
|
|
|
|||
|
|
public static createOrShow(extensionUri: vscode.Uri) {
|
|||
|
|
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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private constructor(panel: vscode.WebviewPanel, extensionUri: vscode.Uri) {
|
|||
|
|
this.panel = panel;
|
|||
|
|
this.extensionUri = extensionUri;
|
|||
|
|
|
|||
|
|
// 初始化各个视图
|
|||
|
|
this.projectListView = new ProjectListView(extensionUri);
|
|||
|
|
this.aircraftConfigView = new AircraftConfigView(extensionUri);
|
|||
|
|
this.containerConfigView = new ContainerConfigView(extensionUri);
|
|||
|
|
|
|||
|
|
this.updateWebview();
|
|||
|
|
this.setupMessageListener();
|
|||
|
|
|
|||
|
|
this.panel.onDidDispose(() => {
|
|||
|
|
ConfigPanel.currentPanel = undefined;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private setupMessageListener() {
|
|||
|
|
this.panel.webview.onDidReceiveMessage(async (data) => {
|
|||
|
|
switch (data.type) {
|
|||
|
|
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 '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 'createConfig':
|
|||
|
|
this.createConfig(data.name);
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
case 'saveConfigFile':
|
|||
|
|
this.saveConfigFile(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;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// === 项目相关方法 ===
|
|||
|
|
private updateProjectName(projectId: string, newName: string) {
|
|||
|
|
const project = this.projects.find(p => p.id === projectId);
|
|||
|
|
if (project) {
|
|||
|
|
project.name = newName;
|
|||
|
|
vscode.window.showInformationMessage(`项目名称更新: ${newName}`);
|
|||
|
|
this.updateWebview();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private createProject(name: string) {
|
|||
|
|
const newId = 'p' + (this.projects.length + 1);
|
|||
|
|
const newProject: Project = {
|
|||
|
|
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();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private deleteProject(projectId: string) {
|
|||
|
|
// 删除项目
|
|||
|
|
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));
|
|||
|
|
|
|||
|
|
vscode.window.showInformationMessage(`删除项目: ${projectId}`);
|
|||
|
|
this.updateWebview();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// === 容器相关方法 ===
|
|||
|
|
private updateContainerName(containerId: string, newName: string) {
|
|||
|
|
const container = this.containers.find(c => c.id === containerId);
|
|||
|
|
if (container) {
|
|||
|
|
container.name = newName;
|
|||
|
|
vscode.window.showInformationMessage(`容器名称更新: ${newName}`);
|
|||
|
|
this.updateWebview();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private createContainer(name: string) {
|
|||
|
|
console.log('创建容器，当前飞行器ID:', this.currentAircraftId);
|
|||
|
|
|
|||
|
|
if (!this.currentAircraftId) {
|
|||
|
|
vscode.window.showErrorMessage('无法创建容器：未找到当前飞行器');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const newId = 'c' + (this.containers.length + 1);
|
|||
|
|
|
|||
|
|
const newContainer: Container = {
|
|||
|
|
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();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private deleteContainer(containerId: string) {
|
|||
|
|
// 删除容器
|
|||
|
|
this.containers = this.containers.filter(c => c.id !== containerId);
|
|||
|
|
|
|||
|
|
// 删除相关的配置
|
|||
|
|
this.configs = this.configs.filter(cfg => cfg.containerId !== containerId);
|
|||
|
|
|
|||
|
|
vscode.window.showInformationMessage(`删除容器: ${containerId}`);
|
|||
|
|
this.updateWebview();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// === 配置相关方法 ===
|
|||
|
|
private updateConfigName(configId: string, newName: string) {
|
|||
|
|
const config = this.configs.find(c => c.id === configId);
|
|||
|
|
if (config) {
|
|||
|
|
config.name = newName;
|
|||
|
|
vscode.window.showInformationMessage(`配置名称更新: ${newName}`);
|
|||
|
|
this.updateWebview();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 创建配置文件
|
|||
|
|
private createConfig(name: string) {
|
|||
|
|
const newId = 'cfg' + (this.configs.length + 1);
|
|||
|
|
const newConfig: Config = {
|
|||
|
|
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();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除配置文件
|
|||
|
|
private deleteConfig(configId: string) {
|
|||
|
|
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();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存配置文件
|
|||
|
|
private saveConfigFile(configId: string, content: string) {
|
|||
|
|
const config = this.configs.find(c => c.id === configId);
|
|||
|
|
if (config) {
|
|||
|
|
config.content = content;
|
|||
|
|
vscode.window.showInformationMessage(`配置文件已保存: ${config.name}`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载配置文件
|
|||
|
|
private loadConfigFile(configId: string) {
|
|||
|
|
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`
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新视图
|
|||
|
|
private updateWebview() {
|
|||
|
|
this.panel.webview.html = this.getWebviewContent();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
private getWebviewContent(): string {
|
|||
|
|
switch (this.currentView) {
|
|||
|
|
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.projectListView.render({
|
|||
|
|
projects: this.projects
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|