新增加了项目管理页面

2025-11-18 14:03:22 +08:00
parent 64a411e463
commit 53e9307157
12 changed files with 974 additions and 45 deletions
--- a/src/panels/views/ContainerConfigView.ts
+++ b/src/panels/views/ContainerConfigView.ts
@@ -7,14 +7,14 @@ export class ContainerConfigView extends BaseView {
        const container = data?.container;
        const configs = data?.configs || [];
        
-        // 生成配置列表的 HTML - 添加删除按钮
+        // 生成配置列表的 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>
+                    <span class="editable" onclick="editFileName('${config.id}', '${config.fileName}')">📄 ${config.fileName}</span>
                </td>
                <td>
                    <button class="btn-delete" onclick="deleteConfig('${config.id}')">删除</button>
@@ -39,9 +39,9 @@ export class ContainerConfigView extends BaseView {
    <table class="table">
        <thead>
            <tr>
-                <th width="40%">配置</th>
+                <th width="30%">配置</th>
                <th width="40%">文件</th>
-                <th width="20%">操作</th>
+                <th width="30%">操作</th>
            </tr>
        </thead>
        <tbody>
@@ -59,7 +59,7 @@ export class ContainerConfigView extends BaseView {
        <h3>📝 编辑配置文件</h3>
        <textarea id="configContent" placeholder="在此编辑配置文件内容..."></textarea>
        <div style="margin-top: 15px;">
-            <button class="btn-primary" onclick="saveConfigFile()">💾 保存</button>
+            <button class="btn-primary" onclick="saveConfigFile()">💾 保存到文件系统</button>
            <button class="back-btn" onclick="closeEditor()">取消</button>
        </div>
    </div>
@@ -85,6 +85,23 @@ export class ContainerConfigView extends BaseView {
            );
        }

+        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';
@@ -111,7 +128,6 @@ export class ContainerConfigView extends BaseView {
            );
        }

-        // 新增：删除配置函数
        function deleteConfig(configId) {
            showConfirmDialog(
                '确认删除',
@@ -233,6 +249,20 @@ export class ContainerConfigView extends BaseView {
                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>`;
--- a/src/panels/views/ProjectListView.ts
+++ b/src/panels/views/ProjectListView.ts
@@ -26,11 +26,14 @@ export class ProjectListView 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>
-    <h2>🚀 飞行器项目管理</h2>
+    <div class="header">
+        <h2>🚀 飞行器项目管理</h2>
+        <button class="back-btn" onclick="goBackToManagement()">← 返回项目管理</button>
+    </div>
    <table class="table">
        <thead>
            <tr>
@@ -108,6 +111,10 @@ export class ProjectListView extends BaseView {
            );
        }

+        function goBackToManagement() {
+            vscode.postMessage({ type: 'goBackToManagement' });
+        }
+
        // 对话框函数（与之前相同）
        function showConfirmDialog(title, message, onConfirm, onCancel) {
            const overlay = document.createElement('div');
--- a/src/panels/views/ProjectManagementView.ts
+++ b/src/panels/views/ProjectManagementView.ts
@@ -0,0 +1,255 @@
+// src/panels/views/ProjectManagementView.ts
+import { BaseView } from './BaseView';
+import { ProjectViewData } from '../types/ViewTypes';
+
+export class ProjectManagementView extends BaseView {
+    render(data?: { projects: ProjectViewData[], projectPaths?: Map<string, string> }): string {
+        const projects = data?.projects || [];
+        const projectPaths = data?.projectPaths || new Map();
+        
+        const projectsHtml = projects.map((project: ProjectViewData) => {
+            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>`;
+    }
+}