xb/vs-p
0
0
Fork 0
Code Issues Activity

第一次提交vscode插件代码

Browse Source
This commit is contained in:
xubing
2025-11-18 09:10:47 +08:00
parent 1d85b97531
commit 64a411e463
210 changed files with 1117352 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
src/panels/views/AircraftConfigView.ts Normal file
View File

@@ -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>`;
}
}

178
src/panels/views/BaseView.ts Normal file
View File

@@ -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>
`;
}
}

240
src/panels/views/ContainerConfigView.ts Normal file
View File

@@ -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>`;
}
}

194
src/panels/views/ProjectListView.ts Normal file
View File

@@ -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>`;
}
}