第一次提交vscode插件代码

src/panels/ConfigPanel.ts

@@ -0,0 +1,401 @@
+// 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
+                });
+        }
+    }
+}

src/panels/types/DataModel.ts

@@ -0,0 +1,27 @@
+export interface Project {
+    id: string;
+    name: string;
+    aircrafts: Aircraft[];
+}
+
+export interface Aircraft {
+    id: string;
+    name: string;
+    projectId: string;
+    containers: Container[];
+}
+
+export interface Container {
+    id: string;
+    name: string;
+    aircraftId: string;
+    configs: Config[];
+}
+
+export interface Config {
+    id: string;
+    name: string;
+    fileName: string;
+    content: string;
+    containerId: string;
+}

src/panels/types/ViewTypes.ts

@@ -0,0 +1,32 @@
+// src/panels/types/ViewTypes.ts
+export interface ProjectViewData {
+    id: string;
+    name: string;
+}
+
+export interface ContainerViewData {
+    id: string;
+    name: string;
+}
+
+export interface ConfigViewData {
+    id: string;
+    name: string;
+    fileName: string;
+    content: string;
+    containerId: string;
+}
+
+export interface ProjectListData {
+    projects: ProjectViewData[];
+}
+
+export interface AircraftConfigData {
+    project?: ProjectViewData;
+    containers: ContainerViewData[];
+}
+
+export interface ContainerConfigData {
+    container?: ContainerViewData;
+    configs: ConfigViewData[];
+}

src/panels/types/WebviewMessage.ts

@@ -0,0 +1,21 @@
+// src/panels/types/WebviewMessage.ts
+export interface WebviewMessage {
+    type: string;
+    [key: string]: any;
+}
+
+export interface ProjectMessage extends WebviewMessage {
+    projectId: string;
+    name?: string;
+}
+
+export interface ContainerMessage extends WebviewMessage {
+    containerId: string;
+    name?: string;
+}
+
+export interface ConfigMessage extends WebviewMessage {
+    configId: string;
+    name?: string;
+    content?: string;
+}

src/panels/views/AircraftConfigView.ts

@@ -0,0 +1,203 @@
+// src/panels/views/AircraftConfigView.ts
+import { BaseView } from './BaseView';
+import { AircraftConfigData, ContainerViewData } from '../types/ViewTypes';
+
+export class AircraftConfigView extends BaseView {
+    render(data?: AircraftConfigData): string {
+        const project = data?.project;
+        const containers = data?.containers || [];
+        
+        // 生成容器列表的 HTML
+        const containersHtml = containers.map((container: ContainerViewData) => `
+            <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="goBackToProjects()">← 返回项目列表</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 goBackToProjects() {
+            vscode.postMessage({ type: 'goBackToProjects' });
+        }
+
+        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>`;
+    }
+}

src/panels/views/BaseView.ts

@@ -0,0 +1,178 @@
+// src/panels/views/BaseView.ts
+import * as vscode from 'vscode';
+
+export abstract class BaseView {
+    protected extensionUri: vscode.Uri;
+
+    constructor(extensionUri: vscode.Uri) {
+        this.extensionUri = extensionUri;
+    }
+
+    abstract render(data?: any): string;
+    
+    protected getStyles(): string {
+        return `
+        <style>
+            body {
+                font-family: var(--vscode-font-family);
+                padding: 20px;
+                background: var(--vscode-editor-background);
+                color: var(--vscode-editor-foreground);
+                margin: 0;
+            }
+            .table { 
+                width: 100%; 
+                border-collapse: collapse;
+                margin-top: 20px;
+            }
+            .table th, .table td { 
+                padding: 12px; 
+                text-align: left; 
+                border-bottom: 1px solid var(--vscode-panel-border); 
+            }
+            .table th { 
+                background: var(--vscode-panel-background); 
+                font-weight: bold;
+            }
+            .clickable { 
+                cursor: pointer; 
+                color: var(--vscode-textLink-foreground); 
+            }
+            .clickable:hover { 
+                text-decoration: underline; 
+            }
+            .editable { 
+                border: 1px dashed transparent; 
+                padding: 2px 4px; 
+                border-radius: 2px;
+                cursor: pointer;
+            }
+            .editable:hover { 
+                border-color: var(--vscode-input-border);
+                background: var(--vscode-input-background);
+            }
+            .btn-new { 
+                background: var(--vscode-button-background); 
+                color: var(--vscode-button-foreground); 
+                padding: 8px 16px; 
+                border: none; 
+                border-radius: 4px;
+                cursor: pointer;
+            }
+            .btn-new:hover {
+                background: var(--vscode-button-hoverBackground);
+            }
+            .btn-delete {
+                background: var(--vscode-inputValidation-errorBackground);
+                color: white;
+                padding: 4px 8px;
+                border: none;
+                border-radius: 2px;
+                cursor: pointer;
+            }
+            .back-btn { 
+                background: var(--vscode-button-secondaryBackground); 
+                color: var(--vscode-button-secondaryForeground); 
+                padding: 6px 12px;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+            }
+            .back-btn:hover {
+                background: var(--vscode-button-secondaryHoverBackground);
+            }
+            .header { 
+                display: flex; 
+                justify-content: space-between; 
+                align-items: center; 
+                margin-bottom: 20px;
+                border-bottom: 1px solid var(--vscode-panel-border);
+                padding-bottom: 15px;
+            }
+            h2 {
+                color: var(--vscode-titleBar-activeForeground);
+                margin-bottom: 10px;
+            }
+            .config-editor { 
+                margin-top: 30px; 
+                border: 1px solid var(--vscode-panel-border);
+                border-radius: 4px;
+                padding: 20px;
+                background: var(--vscode-panel-background);
+            }
+            textarea { 
+                width: 100%; 
+                height: 300px; 
+                font-family: 'Courier New', monospace;
+                background: var(--vscode-input-background);
+                color: var(--vscode-input-foreground);
+                border: 1px solid var(--vscode-input-border);
+                padding: 10px;
+                border-radius: 4px;
+                resize: vertical;
+            }
+            .btn-primary {
+                background: var(--vscode-button-background);
+                color: var(--vscode-button-foreground);
+                padding: 8px 16px;
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                margin-right: 10px;
+            }
+                    .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 1000;
+        }
+        
+        .modal-dialog {
+            background: var(--vscode-editor-background);
+            border: 1px solid var(--vscode-panel-border);
+            border-radius: 4px;
+            padding: 20px;
+            min-width: 300px;
+            max-width: 500px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+        }
+        
+        .modal-title {
+            margin-bottom: 15px;
+            font-weight: bold;
+            color: var(--vscode-editor-foreground);
+        }
+        
+        .modal-buttons {
+            display: flex;
+            justify-content: flex-end;
+            gap: 10px;
+            margin-top: 20px;
+        }
+        
+        .modal-btn {
+            padding: 6px 12px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+        
+        .modal-btn-primary {
+            background: var(--vscode-button-background);
+            color: var(--vscode-button-foreground);
+        }
+        
+        .modal-btn-secondary {
+            background: var(--vscode-button-secondaryBackground);
+            color: var(--vscode-button-secondaryForeground);
+        }
+        </style>
+        `;
+    }
+}

src/panels/views/ContainerConfigView.ts

@@ -0,0 +1,240 @@
+// src/panels/views/ContainerConfigView.ts
+import { BaseView } from './BaseView';
+import { ContainerConfigData, ConfigViewData } from '../types/ViewTypes';
+
+export class ContainerConfigView extends BaseView {
+    render(data?: ContainerConfigData): string {
+        const container = data?.container;
+        const configs = data?.configs || [];
+        
+        // 生成配置列表的 HTML - 添加删除按钮
+        const configsHtml = configs.map((config: ConfigViewData) => `
+            <tr>
+                <td>
+                    <span class="editable" onclick="editConfigName('${config.id}', '${config.name}')">🔧 ${config.name}</span>
+                </td>
+                <td>
+                    <span class="clickable" onclick="openConfigFile('${config.id}')">${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="goBackToAircraft()">← 返回飞行器</button>
+    </div>
+
+    <table class="table">
+        <thead>
+            <tr>
+                <th width="40%">配置</th>
+                <th width="40%">文件</th>
+                <th width="20%">操作</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 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 goBackToAircraft() {
+            vscode.postMessage({ type: 'goBackToAircraft' });
+        }
+
+        // 对话框函数
+        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;
+            }
+        });
+    </script>
+</body>
+</html>`;
+    }
+}

src/panels/views/ProjectListView.ts

@@ -0,0 +1,194 @@
+// src/panels/views/ProjectListView.ts
+import { BaseView } from './BaseView';
+import { ProjectListData, ProjectViewData } from '../types/ViewTypes';
+
+export class ProjectListView extends BaseView {
+    render(data?: ProjectListData): string {
+        const projects = data?.projects || [];
+        
+        // 生成项目列表的 HTML
+        const projectsHtml = projects.map((project: ProjectViewData) => `
+            <tr>
+                <td>
+                    <span class="editable" onclick="editProjectName('${project.id}', '${project.name}')">🛸 ${project.name}</span>
+                </td>
+                <td>
+                    <span class="clickable" onclick="openAircraftConfig('${project.id}')">配置</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()}
+</head>
+<body>
+    <h2>🚀 飞行器项目管理</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 editProjectName(projectId, currentName) {
+            showPromptDialog(
+                '修改项目名称',
+                '请输入新的项目名称：',
+                currentName,
+                function(newName) {
+                    if (newName && newName !== currentName) {
+                        vscode.postMessage({
+                            type: 'updateProjectName',
+                            projectId: projectId,
+                            name: newName
+                        });
+                    }
+                }
+            );
+        }
+
+        function openAircraftConfig(projectId) {
+            vscode.postMessage({
+                type: 'openAircraftConfig',
+                projectId: projectId
+            });
+        }
+
+        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() {
+                    // 用户取消删除
+                }
+            );
+        }
+
+        // 对话框函数（与之前相同）
+        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>`;
+    }
+}