增加了项目回读的功能

2025-11-18 21:14:10 +08:00
parent 7d249f4882
commit 6d3d020f8a
9 changed files with 848 additions and 173 deletions
--- a/src/panels/views/AircraftView.ts
+++ b/src/panels/views/AircraftView.ts
@@ -1,40 +1,99 @@
 // src/panels/views/AircraftView.ts
 import { BaseView } from './BaseView';

+interface AircraftViewData {
+    id: string;
+    name: string;
+    projectId: string;
+}
+
 export class AircraftView extends BaseView {
-    render(data?: { aircrafts: any[] }): string {
+    render(data?: { aircrafts: AircraftViewData[] }): string {
        const aircrafts = data?.aircrafts || [];
        
-        // 生成飞行器列表的 HTML
-        const aircraftsHtml = aircrafts.map((aircraft: any) => {
-            return `
+        console.log('AircraftView 渲染数据:', aircrafts);
+
+        const aircraftsHtml = aircrafts.map(aircraft => `
            <tr>
                <td>
-                    <span class="editable" onclick="editAircraftName('${aircraft.id}', '${aircraft.name}')">🛸 ${aircraft.name}</span>
+                    <span class="aircraft-name" data-aircraft-id="${aircraft.id}">✈️ ${aircraft.name}</span>
                </td>
                <td>
-                    <span class="clickable" onclick="openAircraftConfig('${aircraft.id}')">配置</span>
+                    <span class="clickable" onclick="openAircraftConfig('${aircraft.id}', '${aircraft.projectId}')">配置容器</span>
                </td>
                <td>
                    <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()}
+    <style>
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .back-btn {
+            background: var(--vscode-input-background);
+            color: var(--vscode-input-foreground);
+            border: 1px solid var(--vscode-input-border);
+            padding: 5px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .back-btn:hover {
+            background: var(--vscode-inputOption-hoverBackground);
+        }
+        .btn-new {
+            background: var(--vscode-button-background);
+            color: var(--vscode-button-foreground);
+            border: none;
+            padding: 8px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            margin: 0 auto; /* 确保按钮在容器内居中 */
+        }
+        .btn-new:hover {
+            background: var(--vscode-button-hoverBackground);
+        }
+        .aircraft-name {
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+            transition: background-color 0.2s;
+        }
+        .aircraft-name:hover {
+            background: var(--vscode-input-background);
+        }
+        /* 专门为新建按钮的容器添加样式 */
+        .new-button-container {
+            text-align: center;
+            padding: 20px;
+        }
+    </style>
 </head>
 <body>
    <div class="header">
-        <h2>🚀 飞行器管理</h2>
-        <button class="back-btn" onclick="goBackToProjects()">← 返回项目管理</button>
+        <h2>飞行器配置</h2>
+        <button class="back-btn" onclick="goBackToProjects()">← 返回项目</button>
    </div>
+    
    <table class="table">
        <thead>
            <tr>
@@ -45,8 +104,9 @@ export class AircraftView extends BaseView {
        </thead>
        <tbody>
            ${aircraftsHtml}
+            <!-- 修复：使用专门的容器类确保居中 -->
            <tr>
-                <td colspan="3" style="text-align: center; padding: 20px;">
+                <td colspan="3" class="new-button-container">
                    <button class="btn-new" onclick="createNewAircraft()">+ 新建飞行器</button>
                </td>
            </tr>
@@ -56,27 +116,17 @@ export class AircraftView extends BaseView {
    <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) {
+        function openAircraftConfig(aircraftId, projectId) {
            vscode.postMessage({
                type: 'openAircraftConfig',
-                aircraftId: aircraftId
+                aircraftId: aircraftId,
+                projectId: projectId
+            });
+        }
+
+        function goBackToProjects() {
+            vscode.postMessage({
+                type: 'goBackToProjects'
            });
        }

@@ -112,8 +162,36 @@ export class AircraftView extends BaseView {
            );
        }

-        function goBackToProjects() {
-            vscode.postMessage({ type: 'goBackToProjects' });
+        // 飞行器名称编辑功能
+        document.addEventListener('DOMContentLoaded', function() {
+            document.addEventListener('click', function(event) {
+                if (event.target.classList.contains('aircraft-name')) {
+                    const aircraftNameElement = event.target;
+                    const aircraftId = aircraftNameElement.getAttribute('data-aircraft-id');
+                    const currentName = aircraftNameElement.textContent.trim().split(' ').slice(1).join(' ');
+                    
+                    if (aircraftId) {
+                        editAircraftName(aircraftId, currentName);
+                    }
+                }
+            });
+        });
+
+        function editAircraftName(aircraftId, currentName) {
+            showPromptDialog(
+                '修改飞行器名称',
+                '请输入新的飞行器名称：',
+                currentName,
+                function(newName) {
+                    if (newName && newName !== currentName) {
+                        vscode.postMessage({
+                            type: 'updateAircraftName',
+                            aircraftId: aircraftId,
+                            name: newName
+                        });
+                    }
+                }
+            );
        }

        // 对话框函数
--- a/src/panels/views/ProjectView.ts
+++ b/src/panels/views/ProjectView.ts
@@ -63,10 +63,41 @@ export class ProjectView extends BaseView {
        .project-name:hover {
            background: var(--vscode-input-background);
        }
+        .table-actions {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-top: 20px;
+        }
+        .btn-action {
+            background: var(--vscode-button-background);
+            color: var(--vscode-button-foreground);
+            border: none;
+            padding: 8px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .btn-action:hover {
+            background: var(--vscode-button-hoverBackground);
+        }
+        .btn-new {
+            background: var(--vscode-button-background);
+            color: var(--vscode-button-foreground);
+        }
+        .btn-open {
+            background: var(--vscode-input-background);
+            color: var(--vscode-input-foreground);
+            border: 1px solid var(--vscode-input-border);
+        }
    </style>
 </head>
 <body>
    <h2><span class="satellite-icon">🛰️</span>数字卫星构建平台</h2>
+    
    <table class="table">
        <thead>
            <tr>
@@ -78,8 +109,15 @@ export class ProjectView extends BaseView {
        <tbody>
            ${projectsHtml}
            <tr>
-                <td colspan="3" style="text-align: center; padding: 20px;">
-                    <button class="btn-new" onclick="createNewProject()">+ 新建项目</button>
+                <td colspan="3" style="padding: 20px;">
+                    <div class="table-actions">
+                        <button class="btn-action btn-open" onclick="openExistingProject()">
+                            <span style="font-size: 14px;">📂</span> 打开项目
+                        </button>
+                        <button class="btn-action btn-new" onclick="createNewProject()">
+                            <span style="font-size: 14px;">+</span> 新建项目
+                        </button>
+                    </div>
                </td>
            </tr>
        </tbody>
@@ -105,6 +143,12 @@ export class ProjectView extends BaseView {
            }
        }

+        function openExistingProject() {
+            vscode.postMessage({
+                type: 'openExistingProject'
+            });
+        }
+
        function createNewProject() {
            showPromptDialog(
                '新建项目',