Skip to content

Commit e11fa48

Browse files
yefanskyyefansky
committed
feat:增加图形化配置
1 parent a3bd246 commit e11fa48

File tree

1 file changed

+110
-19
lines changed

1 file changed

+110
-19
lines changed

‎src/guide.ts‎

Lines changed: 110 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,6 @@ export function activateGuide(context: vscode.ExtensionContext) {
55
context.subscriptions.push(
66
vscode.window.registerWebviewViewProvider('guideView', guideViewProvider)
77
);
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-
});
218
}
229

2310
class GuideViewProvider implements vscode.WebviewViewProvider {
@@ -29,11 +16,74 @@ class GuideViewProvider implements vscode.WebviewViewProvider {
2916
localResourceRoots: [this.context.extensionUri],
3017
};
3118
webviewView.webview.html = this.getWebviewContent();
19+
20+
webviewView.webview?.onDidReceiveMessage((message) => {
21+
switch (message.command) {
22+
case 'saveApiKey':
23+
// 保存 API 密钥
24+
const config = vscode.workspace.getConfiguration('codeReDesign');
25+
const newKeyValue = message.apiKey;
26+
27+
config.update('deepSeekApiKey', newKeyValue, vscode.ConfigurationTarget.Global)
28+
.then(() => {
29+
vscode.window.showInformationMessage('配置已更新');
30+
}, (err) => {
31+
vscode.window.showErrorMessage(`配置更新失败: ${err}`);
32+
});
33+
break;
34+
case 'openCommand':
35+
// 打开指令
36+
vscode.commands.executeCommand(message.command);
37+
default:
38+
vscode.commands.executeCommand(message.command);
39+
break;
40+
}
41+
});
3242
}
3343

3444
private getWebviewContent(): string {
3545
// 获取 DeepSeek API 密钥
36-
const apiKey = this.context.globalState.get('deepSeekApiKey') || '';
46+
const config = vscode.workspace.getConfiguration('codeReDesign');
47+
const apiKey = config.get('deepSeekApiKey') || '';
48+
49+
const currentModelConfig = this.context.globalState.get('modelConfig') || 'deepseek-chat';
50+
const currentCustomConfig = {
51+
custom1: {
52+
baseURL: this.context.globalState.get('custom1BaseURL') || '',
53+
modelName: this.context.globalState.get('custom1ModelName') || '',
54+
modelNickname: this.context.globalState.get('custom1ModelNickname') || ''
55+
},
56+
custom2: {
57+
baseURL: this.context.globalState.get('custom2BaseURL') || '',
58+
modelName: this.context.globalState.get('custom2ModelName') || '',
59+
modelNickname: this.context.globalState.get('custom2ModelNickname') || ''
60+
},
61+
custom3: {
62+
baseURL: this.context.globalState.get('custom3BaseURL') || '',
63+
modelName: this.context.globalState.get('custom3ModelName') || '',
64+
modelNickname: this.context.globalState.get('custom3ModelNickname') || ''
65+
},
66+
custom4: {
67+
baseURL: this.context.globalState.get('custom4BaseURL') || '',
68+
modelName: this.context.globalState.get('custom4ModelName') || '',
69+
modelNickname: this.context.globalState.get('custom4ModelNickname') || ''
70+
},
71+
custom5: {
72+
baseURL: this.context.globalState.get('custom5BaseURL') || '',
73+
modelName: this.context.globalState.get('custom5ModelName') || '',
74+
modelNickname: this.context.globalState.get('custom5ModelNickname') || ''
75+
},
76+
}
77+
// 获取 modelConfig 的枚举值和对应的昵称
78+
const modelConfigEnum = [
79+
{ value: 'deepseek-chat', label: 'deepseek-chat' },
80+
{ value: 'deepseek-reasoner', label: 'deepseek-r1' },
81+
{ value: 'custom1', label: config.get('custom1ModelNickname') || '自定义模型 1' },
82+
{ value: 'custom2', label: config.get('custom2ModelNickname') || '自定义模型 2' },
83+
{ value: 'custom3', label: config.get('custom3ModelNickname') || '自定义模型 3' },
84+
{ value: 'custom4', label: config.get('custom4ModelNickname') || '自定义模型 4' },
85+
{ value: 'custom5', label: config.get('custom5ModelNickname') || '自定义模型 5' }
86+
];
3787

3888
return `
3989
<!DOCTYPE html>
@@ -86,10 +136,29 @@ class GuideViewProvider implements vscode.WebviewViewProvider {
86136
<body>
87137
<h1>欢迎使用 CodeReDesign 插件！</h1>
88138
<div class="section">
89-
<label for="apiKey">DeepSeek API 密钥：</label>
139+
使用之前请先设置DeepSeek API Key
140+
<label for="apiKey">DeepSeek 官方 API Key：</label>
90141
<input type="text" id="apiKey" value="${apiKey}" placeholder="请输入您的 DeepSeek API 密钥" />
91142
<button id="saveApiKey">保存</button>
92143
</div>
144+
<div class="section">
145+
<label for="modelConfig">自定义模型配置：</label>
146+
<select id="modelConfig">
147+
${modelConfigEnum.map(option => `
148+
<option value="${option.value}" ${option.value === currentModelConfig ? 'selected' : ''}>
149+
${option.label}
150+
</option>
151+
`).join('')}
152+
</select>
153+
<div class="section" id="customConfigSection">
154+
<label for="customBaseURL">自定义模型 Base URL：</label>
155+
<input type="text" id="customBaseURL" value="${currentCustomConfig.custom1.baseURL}" placeholder="请输入自定义模型的 Base URL" />
156+
<label for="customModelName">自定义模型名称：</label>
157+
<input type="text" id="customModelName" value="${currentCustomConfig.custom1.modelName}" placeholder="请输入自定义模型的名称" />
158+
<label for="customModelNickname">自定义模型昵称：</label>
159+
<input type="text" id="customModelNickname" value="${currentCustomConfig.custom1.modelNickname}" placeholder="请输入自定义模型的昵称" />
160+
</div>
161+
</div>
93162
<div class="section">
94163
<h2>常用指令：</h2>
95164
<ul>
@@ -107,19 +176,41 @@ class GuideViewProvider implements vscode.WebviewViewProvider {
107176
const apiKey = document.getElementById('apiKey').value;
108177
vscode.postMessage({ command: 'saveApiKey', apiKey });
109178
});
179+
180+
// 监听模型配置变化
181+
document.getElementById('modelConfig').addEventListener('change', (event) => {
182+
const selectedModel = event.target.value;
183+
const customConfigSection = document.getElementById('customConfigSection');
184+
if (selectedModel.startsWith('custom')) {
185+
customConfigSection.style.display = 'block';
186+
} else {
187+
customConfigSection.style.display = 'none';
188+
}
189+
});
190+
191+
// 初始化时根据当前模型配置显示或隐藏自定义模型配置
192+
(function() {
193+
const selectedModel = document.getElementById('modelConfig').value;
194+
const customConfigSection = document.getElementById('customConfigSection');
195+
if (selectedModel.startsWith('custom')) {
196+
customConfigSection.style.display = 'block';
197+
} else {
198+
customConfigSection.style.display = 'none';
199+
}
200+
})();
110201
111202
// 跳转到指令
112203
document.getElementById('generateCvb').addEventListener('click', () => {
113-
vscode.postMessage({ command: 'openCommand', command: 'codeReDesign.generateCvb' });
204+
vscode.postMessage({ command: 'codeReDesign.generateCvb' });
114205
});
115206
document.getElementById('uploadCvb').addEventListener('click', () => {
116-
vscode.postMessage({ command: 'openCommand', command: 'codeReDesign.uploadCvb' });
207+
vscode.postMessage({ command: 'codeReDesign.uploadCvb' });
117208
});
118209
document.getElementById('applyCvb').addEventListener('click', () => {
119-
vscode.postMessage({ command: 'openCommand', command: 'codeReDesign.applyCvb' });
210+
vscode.postMessage({ command: 'codeReDesign.applyCvb' });
120211
});
121212
document.getElementById('analyzeCode').addEventListener('click', () => {
122-
vscode.postMessage({ command: 'openCommand', command: 'codeReDesign.analyzeCode' });
213+
vscode.postMessage({ command: 'codeReDesign.analyzeCode' });
123214
});
124215
</script>
125216
</body>

0 commit comments

Comments
 (0)