0
0
Files
vs-p/out/panels/views/AircraftView.js

192 lines
6.0 KiB
JavaScript
Raw Normal View History

2025-11-18 18:45:30 +08:00
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AircraftView = void 0;
// src/panels/views/AircraftView.ts
const BaseView_1 = require("./BaseView");
class AircraftView extends BaseView_1.BaseView {
render(data) {
const aircrafts = data?.aircrafts || [];
2025-11-18 21:14:10 +08:00
const aircraftsHtml = aircrafts.map(aircraft => `
2025-11-18 09:10:47 +08:00
<tr>
<td>
2025-11-21 16:07:48 +08:00
<span class="aircraft-name" data-aircraft-id="${aircraft.id}">🛸 ${aircraft.name}</span>
2025-11-18 09:10:47 +08:00
</td>
<td>
2025-11-18 21:14:10 +08:00
<span class="clickable" onclick="openAircraftConfig('${aircraft.id}', '${aircraft.projectId}')">配置容器</span>
2025-11-18 09:10:47 +08:00
</td>
<td>
2025-11-18 18:45:30 +08:00
<button class="btn-delete" onclick="deleteAircraft('${aircraft.id}')">删除</button>
2025-11-18 09:10:47 +08:00
</td>
</tr>
2025-11-18 21:14:10 +08:00
`).join('');
2025-11-18 09:10:47 +08:00
return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2025-11-18 21:14:10 +08:00
<title>飞行器配置</title>
2025-11-18 09:10:47 +08:00
${this.getStyles()}
2025-11-18 21:14:10 +08:00
<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;
2025-12-03 16:08:14 +08:00
margin: 0 auto;
2025-11-18 21:14:10 +08:00
}
.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>
2025-11-18 09:10:47 +08:00
</head>
<body>
2025-11-18 14:03:22 +08:00
<div class="header">
2025-11-21 16:07:48 +08:00
<h2>🚀飞行器配置</h2>
2025-11-18 21:14:10 +08:00
<button class="back-btn" onclick="goBackToProjects()"> 返回项目</button>
2025-11-18 14:03:22 +08:00
</div>
2025-11-18 21:14:10 +08:00
2025-11-18 09:10:47 +08:00
<table class="table">
<thead>
<tr>
2025-11-18 18:45:30 +08:00
<th width="40%">飞行器</th>
2025-11-18 09:10:47 +08:00
<th width="40%">配置</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody>
2025-11-18 18:45:30 +08:00
${aircraftsHtml}
2025-11-18 09:10:47 +08:00
<tr>
2025-11-18 21:14:10 +08:00
<td colspan="3" class="new-button-container">
2025-11-18 18:45:30 +08:00
<button class="btn-new" onclick="createNewAircraft()">+ 新建飞行器</button>
2025-11-18 09:10:47 +08:00
</td>
</tr>
</tbody>
</table>
<script>
const vscode = acquireVsCodeApi();
2025-11-18 21:14:10 +08:00
function openAircraftConfig(aircraftId, projectId) {
vscode.postMessage({
type: 'openAircraftConfig',
aircraftId: aircraftId,
projectId: projectId
});
2025-11-18 09:10:47 +08:00
}
2025-11-18 21:14:10 +08:00
function goBackToProjects() {
2025-11-18 09:10:47 +08:00
vscode.postMessage({
2025-11-18 21:14:10 +08:00
type: 'goBackToProjects'
2025-11-18 09:10:47 +08:00
});
}
2025-11-18 18:45:30 +08:00
function createNewAircraft() {
2025-11-18 09:10:47 +08:00
showPromptDialog(
2025-11-18 18:45:30 +08:00
'新建飞行器',
'请输入飞行器名称:',
2025-11-18 09:10:47 +08:00
'',
function(name) {
if (name) {
vscode.postMessage({
2025-11-18 18:45:30 +08:00
type: 'createAircraft',
2025-11-18 09:10:47 +08:00
name: name
});
}
}
);
}
2025-11-18 18:45:30 +08:00
function deleteAircraft(aircraftId) {
2025-11-18 09:10:47 +08:00
showConfirmDialog(
'确认删除',
2025-11-18 18:45:30 +08:00
'确定删除这个飞行器吗?',
2025-11-18 09:10:47 +08:00
function() {
vscode.postMessage({
2025-11-18 18:45:30 +08:00
type: 'deleteAircraft',
aircraftId: aircraftId
2025-11-18 09:10:47 +08:00
});
},
function() {
// 用户取消删除
}
);
}
2025-11-18 21:14:10 +08:00
// 飞行器名称编辑功能
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
});
}
}
);
2025-11-18 14:03:22 +08:00
}
2025-11-18 09:10:47 +08:00
</script>
</body>
</html>`;
}
2025-11-18 18:45:30 +08:00
}
exports.AircraftView = AircraftView;
//# sourceMappingURL=AircraftView.js.map