296 lines
8.1 KiB
TypeScript
296 lines
8.1 KiB
TypeScript
/**
|
|
* 获取 WebView 面板的 HTML 内容
|
|
*/
|
|
export function getWebviewContent(): string {
|
|
return `<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IC Coder</title>
|
|
<style>
|
|
body {
|
|
font-family: var(--vscode-font-family);
|
|
background: var(--vscode-editor-background);
|
|
color: var(--vscode-foreground);
|
|
margin: 0;
|
|
padding: 20px;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 1px solid var(--vscode-panel-border);
|
|
}
|
|
.header h1 {
|
|
color: var(--vscode-button-background);
|
|
margin: 0 0 8px 0;
|
|
}
|
|
.chat-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.messages {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
margin-bottom: 15px;
|
|
}
|
|
.message {
|
|
margin-bottom: 12px;
|
|
padding: 10px 15px;
|
|
border-radius: 8px;
|
|
max-width: 80%;
|
|
}
|
|
.user-message {
|
|
background: var(--vscode-button-secondaryBackground);
|
|
margin-left: auto;
|
|
}
|
|
.bot-message {
|
|
background: var(--vscode-button-background);
|
|
color: var(--vscode-button-foreground);
|
|
margin-right: auto;
|
|
}
|
|
.input-area {
|
|
border-top: 1px solid var(--vscode-panel-border);
|
|
padding-top: 15px;
|
|
}
|
|
.input-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
textarea {
|
|
flex: 1;
|
|
padding: 10px;
|
|
background: var(--vscode-input-background);
|
|
color: var(--vscode-input-foreground);
|
|
border: 1px solid var(--vscode-input-border);
|
|
border-radius: 4px;
|
|
font-family: inherit;
|
|
resize: none;
|
|
min-height: 40px;
|
|
}
|
|
button {
|
|
padding: 0 20px;
|
|
background: var(--vscode-button-background);
|
|
color: var(--vscode-button-foreground);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
.quick-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.quick-btn {
|
|
padding: 6px 12px;
|
|
background: var(--vscode-button-secondaryBackground);
|
|
color: var(--vscode-button-secondaryForeground);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
.file-reader-section {
|
|
margin-bottom: 20px;
|
|
padding: 15px;
|
|
background: var(--vscode-input-background);
|
|
border: 1px solid var(--vscode-input-border);
|
|
border-radius: 8px;
|
|
}
|
|
.file-reader-section h3 {
|
|
margin: 0 0 10px 0;
|
|
color: var(--vscode-button-background);
|
|
}
|
|
.file-input-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.file-input-group input {
|
|
flex: 1;
|
|
padding: 8px;
|
|
background: var(--vscode-input-background);
|
|
color: var(--vscode-input-foreground);
|
|
border: 1px solid var(--vscode-input-border);
|
|
border-radius: 4px;
|
|
}
|
|
.file-content {
|
|
margin-top: 15px;
|
|
padding: 10px;
|
|
background: var(--vscode-editor-background);
|
|
border: 1px solid var(--vscode-panel-border);
|
|
border-radius: 4px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 12px;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
.file-content.empty {
|
|
color: var(--vscode-descriptionForeground);
|
|
font-style: italic;
|
|
}
|
|
.error-message {
|
|
color: var(--vscode-errorForeground);
|
|
padding: 8px;
|
|
background: var(--vscode-inputValidation-errorBackground);
|
|
border: 1px solid var(--vscode-inputValidation-errorBorder);
|
|
border-radius: 4px;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>IC Coder</h1>
|
|
<p>专注于真实FPGA研发的Verilog智能体编程平台</p>
|
|
</div>
|
|
|
|
<div class="file-reader-section">
|
|
<h3>📁 文件读取</h3>
|
|
<div class="file-input-group">
|
|
<input
|
|
type="text"
|
|
id="filePathInput"
|
|
placeholder="输入文件路径（相对或绝对路径）..."
|
|
/>
|
|
<button onclick="readFile()">读取文件</button>
|
|
</div>
|
|
<div id="fileContent" class="file-content empty">
|
|
文件内容将在这里显示...
|
|
</div>
|
|
<div id="errorMessage" style="display: none;"></div>
|
|
</div>
|
|
|
|
<div class="chat-container">
|
|
<div id="messages" class="messages">
|
|
<div class="message bot-message">
|
|
👋 你好！我是 IC Coder 助手，可以帮你生成代码、回答问题。
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quick-actions">
|
|
<button class="quick-btn" onclick="quickAction('counter')">生成计数器</button>
|
|
<button class="quick-btn" onclick="quickAction('fsm')">生成状态机</button>
|
|
<button class="quick-btn" onclick="quickAction('testbench')">生成测试平台</button>
|
|
</div>
|
|
|
|
<div class="input-area">
|
|
<div class="input-group">
|
|
<textarea
|
|
id="messageInput"
|
|
placeholder="输入您的问题..."
|
|
onkeydown="if(event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); sendMessage(); }"
|
|
></textarea>
|
|
<button onclick="sendMessage()">发送</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const vscode = acquireVsCodeApi();
|
|
const messagesEl = document.getElementById('messages');
|
|
const messageInput = document.getElementById('messageInput');
|
|
const filePathInput = document.getElementById('filePathInput');
|
|
const fileContentEl = document.getElementById('fileContent');
|
|
const errorMessageEl = document.getElementById('errorMessage');
|
|
|
|
function sendMessage() {
|
|
const text = messageInput.value.trim();
|
|
if (!text) return;
|
|
|
|
addMessage(text, 'user');
|
|
vscode.postMessage({ command: 'sendMessage', text: text });
|
|
messageInput.value = '';
|
|
messageInput.focus();
|
|
}
|
|
|
|
function readFile() {
|
|
const filePath = filePathInput.value.trim();
|
|
if (!filePath) {
|
|
showError('请输入文件路径');
|
|
return;
|
|
}
|
|
|
|
// 清空之前的内容和错误
|
|
fileContentEl.textContent = '正在读取文件...';
|
|
fileContentEl.className = 'file-content';
|
|
errorMessageEl.style.display = 'none';
|
|
|
|
// 发送读取文件请求
|
|
vscode.postMessage({ command: 'readFile', filePath: filePath });
|
|
}
|
|
|
|
function showError(message) {
|
|
errorMessageEl.textContent = message;
|
|
errorMessageEl.className = 'error-message';
|
|
errorMessageEl.style.display = 'block';
|
|
fileContentEl.textContent = '文件内容将在这里显示...';
|
|
fileContentEl.className = 'file-content empty';
|
|
}
|
|
|
|
function displayFileContent(content, filePath) {
|
|
fileContentEl.textContent = content;
|
|
fileContentEl.className = 'file-content';
|
|
errorMessageEl.style.display = 'none';
|
|
|
|
// 在消息区域也显示一条提示
|
|
addMessage(\`已读取文件: \${filePath}\`, 'bot');
|
|
}
|
|
|
|
function quickAction(type) {
|
|
const questions = {
|
|
counter: '生成一个4位同步计数器',
|
|
fsm: '生成一个状态机',
|
|
testbench: '生成测试平台'
|
|
};
|
|
if (questions[type]) {
|
|
messageInput.value = questions[type];
|
|
sendMessage();
|
|
}
|
|
}
|
|
|
|
function addMessage(text, sender) {
|
|
const div = document.createElement('div');
|
|
div.className = \`message \${sender}-message\`;
|
|
div.textContent = text;
|
|
messagesEl.appendChild(div);
|
|
messagesEl.scrollTop = messagesEl.scrollHeight;
|
|
}
|
|
|
|
window.addEventListener('message', event => {
|
|
const message = event.data;
|
|
|
|
switch (message.command) {
|
|
case 'receiveMessage':
|
|
addMessage(message.text, 'bot');
|
|
break;
|
|
case 'fileContent':
|
|
displayFileContent(message.content, message.filePath);
|
|
break;
|
|
case 'fileError':
|
|
showError(message.error);
|
|
break;
|
|
}
|
|
});
|
|
|
|
// 支持回车键读取文件
|
|
filePathInput.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Enter') {
|
|
readFile();
|
|
}
|
|
});
|
|
|
|
messageInput.focus();
|
|
</script>
|
|
</body>
|
|
</html>`;
|
|
}
|