Skip to content

Commit c699887

Browse files
yefanskyyefansky
committed
feat:新增引导页
1 parent c11f8b0 commit c699887

File tree

4 files changed

+175
-1
lines changed

4 files changed

+175
-1
lines changed

‎images/icon.svg‎

Lines changed: 25 additions & 0 deletions
Loading

‎package.json‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,15 +61,31 @@
6161
"command": "codeReDesign.analyzeThisCvb",
6262
"title": "CodeReDesign: Analyze this CVB",
6363
"when": "false"
64+
},
65+
{
66+
"command": "codeReDesign.showGuide",
67+
"title": "Show Guide"
6468
}
6569
],
70+
"viewsContainers": {
71+
"activitybar": [{
72+
"id": "guide-bar",
73+
"title": "Guide",
74+
"icon": "images/icon.svg"
75+
}]
76+
},
6677
"views": {
6778
"explorer": [
6879
{
6980
"id": "codeReDesign.cvbView",
7081
"name": "CVB Actions"
7182
}
72-
]
83+
],
84+
"guide-bar": [{
85+
"type": "webview",
86+
"id": "guideView",
87+
"name": "User Guide"
88+
}]
7389
},
7490
"menus": {
7591
"view/item/context": [

‎src/extension.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { queryCodeReDesign, generateFilenameFromRequest, analyzeCode, callDeepSe
77
import { setupCvbAsMarkdown } from './cvbMarkdownHandler';
88
import { registerCvbContextMenu } from './siderBar';
99
import { showInputMultiLineBox } from './UIComponents';
10+
import { activateGuide } from './guide';
1011

1112
let currentOperationController: AbortController | null = null;
1213

@@ -118,6 +119,8 @@ export async function saveAnalyzeCodeResult(request: string, respond: string){
118119
// 插件激活时调用
119120
export function activate(context: vscode.ExtensionContext) {
120121
console.log('Congratulations, your extension "CodeReDesign" is now active!');
122+
123+
activateGuide(context);
121124

122125
// 创建输出通道
123126
const outputChannel = vscode.window.createOutputChannel('CodeReDesign API Stream', 'markdown');

‎src/guide.ts‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
import * as vscode from 'vscode';
2+
3+
export function activateGuide(context: vscode.ExtensionContext) {
4+
const guideViewProvider = new GuideViewProvider(context);
5+
context.subscriptions.push(
6+
vscode.window.registerWebviewViewProvider('guideView', guideViewProvider)
7+
);
8+
9+
guideViewProvider.webview?.onDidReceiveMessage((message) => {
10+
switch (message.command) {
11+
case 'saveApiKey':
12+
// 保存 API 密钥
13+
context.globalState.update('deepSeekApiKey', message.apiKey);
14+
break;
15+
case 'openCommand':
16+
// 打开指令
17+
vscode.commands.executeCommand(message.command);
18+
break;
19+
}
20+
});
21+
}
22+
23+
class GuideViewProvider implements vscode.WebviewViewProvider {
24+
constructor(private context: vscode.ExtensionContext) {}
25+
26+
resolveWebviewView(webviewView: vscode.WebviewView) {
27+
webviewView.webview.options = {
28+
enableScripts: true,
29+
localResourceRoots: [this.context.extensionUri],
30+
};
31+
webviewView.webview.html = this.getWebviewContent();
32+
}
33+
34+
private getWebviewContent(): string {
35+
// 获取 DeepSeek API 密钥
36+
const apiKey = this.context.globalState.get('deepSeekApiKey') || '';
37+
38+
return `
39+
<!DOCTYPE html>
40+
<html lang="zh-CN">
41+
<head>
42+
<meta charset="UTF-8">
43+
<title>引导页</title>
44+
<style>
45+
body {
46+
font-family: Arial, sans-serif;
47+
margin: 20px;
48+
}
49+
h1 {
50+
color: #333;
51+
}
52+
.section {
53+
margin-bottom: 20px;
54+
}
55+
.section label {
56+
display: block;
57+
margin-bottom: 5px;
58+
}
59+
.section input {
60+
width: 100%;
61+
padding: 8px;
62+
margin-bottom: 10px;
63+
border: 1px solid #ccc;
64+
border-radius: 4px;
65+
}
66+
.section button {
67+
padding: 8px 16px;
68+
border: none;
69+
background-color: #4CAF50;
70+
color: white;
71+
border-radius: 4px;
72+
cursor: pointer;
73+
}
74+
.section button:hover {
75+
background-color: #45a049;
76+
}
77+
.section a {
78+
color: #007BFF;
79+
text-decoration: none;
80+
}
81+
.section a:hover {
82+
text-decoration: underline;
83+
}
84+
</style>
85+
</head>
86+
<body>
87+
<h1>欢迎使用 CodeReDesign 插件！</h1>
88+
<div class="section">
89+
<label for="apiKey">DeepSeek API 密钥：</label>
90+
<input type="text" id="apiKey" value="${apiKey}" placeholder="请输入您的 DeepSeek API 密钥" />
91+
<button id="saveApiKey">保存</button>
92+
</div>
93+
<div class="section">
94+
<h2>常用指令：</h2>
95+
<ul>
96+
<li><a href="#" id="generateCvb">生成 CVB 文件</a></li>
97+
<li><a href="#" id="uploadCvb">上传 CVB 文件</a></li>
98+
<li><a href="#" id="applyCvb">应用 CVB 文件</a></li>
99+
<li><a href="#" id="analyzeCode">分析代码</a></li>
100+
</ul>
101+
</div>
102+
<script>
103+
const vscode = acquireVsCodeApi();
104+
105+
// 保存 API 密钥
106+
document.getElementById('saveApiKey').addEventListener('click', () => {
107+
const apiKey = document.getElementById('apiKey').value;
108+
vscode.postMessage({ command: 'saveApiKey', apiKey });
109+
});
110+
111+
// 跳转到指令
112+
document.getElementById('generateCvb').addEventListener('click', () => {
113+
vscode.postMessage({ command: 'openCommand', command: 'codeReDesign.generateCvb' });
114+
});
115+
document.getElementById('uploadCvb').addEventListener('click', () => {
116+
vscode.postMessage({ command: 'openCommand', command: 'codeReDesign.uploadCvb' });
117+
});
118+
document.getElementById('applyCvb').addEventListener('click', () => {
119+
vscode.postMessage({ command: 'openCommand', command: 'codeReDesign.applyCvb' });
120+
});
121+
document.getElementById('analyzeCode').addEventListener('click', () => {
122+
vscode.postMessage({ command: 'openCommand', command: 'codeReDesign.analyzeCode' });
123+
});
124+
</script>
125+
</body>
126+
</html>
127+
`;
128+
}
129+
130+
}

0 commit comments

Comments
 (0)