增加了项目回读的功能
This commit is contained in:
xubing
@@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// 对话框函数
|
||||
|
||||
Reference in New Issue
Block a user