Skip to content

Commit f5caae4

Browse files
yefanskyyefansky
committed
fix:改进引导页
1 parent e11fa48 commit f5caae4

File tree

1 file changed

+159
-162
lines changed

1 file changed

+159
-162
lines changed

‎src/guide.ts‎

Lines changed: 159 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -20,129 +20,130 @@ class GuideViewProvider implements vscode.WebviewViewProvider {
2020
webviewView.webview?.onDidReceiveMessage((message) => {
2121
switch (message.command) {
2222
case 'saveApiKey':
23-
// 保存 API 密钥
23+
this.saveApiKey(message.apiKey);
24+
break;
25+
case 'updateModelConfig':
2426
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}`);
27+
config.update('modelConfig', message.selectedModel, vscode.ConfigurationTarget.Global).then(() => {
28+
webviewView.webview.html = this.getWebviewContent(); // 更新内容
3229
});
3330
break;
34-
case 'openCommand':
35-
// 打开指令
36-
vscode.commands.executeCommand(message.command);
3731
default:
3832
vscode.commands.executeCommand(message.command);
3933
break;
4034
}
4135
});
4236
}
4337

38+
private saveApiKey(apiKey: string) {
39+
const config = vscode.workspace.getConfiguration('codeReDesign');
40+
config.update('deepSeekApiKey', apiKey, vscode.ConfigurationTarget.Global)
41+
.then(() => {
42+
vscode.window.showInformationMessage('配置已更新');
43+
}, (err) => {
44+
vscode.window.showErrorMessage(`配置更新失败: ${err}`);
45+
});
46+
}
47+
48+
// 动态获取自定义模型配置
4449
private getWebviewContent(): string {
45-
// 获取 DeepSeek API 密钥
4650
const config = vscode.workspace.getConfiguration('codeReDesign');
4751
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-
},
52+
const currentModelConfig = config.get('modelConfig') || 'deepseek-chat';
53+
54+
// 获取所有以 'custom' 开头的模型配置
55+
const customConfigs = [];
56+
for (let i = 1; i <= 5; i++) {
57+
const baseURL = config.get(`custom${i}BaseURL`);
58+
const modelName = config.get(`custom${i}ModelName`);
59+
const modelNickname = config.get(`custom${i}ModelNickname`);
60+
const modelAPIKey = config.get(`custom${i}APIKey`);
61+
62+
customConfigs.push({
63+
value: `custom${i}`,
64+
label: modelNickname || `自定义模型 ${i}`,
65+
baseURL: baseURL || '',
66+
modelName: modelName || '',
67+
modelNickname: modelNickname || `自定义模型 ${i}`,
68+
modelAPIKey : modelAPIKey || ''
69+
});
7670
}
77-
// 获取 modelConfig 的枚举值和对应的昵称
71+
72+
// 生成模型配置枚举
7873
const modelConfigEnum = [
7974
{ value: 'deepseek-chat', label: 'deepseek-chat' },
8075
{ 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' }
76+
...customConfigs.map(config => ({
77+
value: config.value,
78+
label: config.label
79+
}))
8680
];
8781

82+
// 如果没有找到自定义配置，给定默认值
83+
const selectedCustomConfig = customConfigs.find(config => config.value === currentModelConfig);
84+
const customBaseURL = selectedCustomConfig?.baseURL || '';
85+
const customModelName = selectedCustomConfig?.modelName || '';
86+
const customModelNickname = selectedCustomConfig?.modelNickname || '';
87+
const customAPIKey = selectedCustomConfig?.modelAPIKey || '';
88+
8889
return `
89-
<!DOCTYPE html>
90-
<html lang="zh-CN">
91-
<head>
92-
<meta charset="UTF-8">
93-
<title>引导页</title>
94-
<style>
95-
body {
96-
font-family: Arial, sans-serif;
97-
margin: 20px;
98-
}
99-
h1 {
100-
color: #333;
101-
}
102-
.section {
103-
margin-bottom: 20px;
104-
}
105-
.section label {
106-
display: block;
107-
margin-bottom: 5px;
108-
}
109-
.section input {
110-
width: 100%;
111-
padding: 8px;
112-
margin-bottom: 10px;
113-
border: 1px solid #ccc;
114-
border-radius: 4px;
115-
}
116-
.section button {
117-
padding: 8px 16px;
118-
border: none;
119-
background-color: #4CAF50;
120-
color: white;
121-
border-radius: 4px;
122-
cursor: pointer;
123-
}
124-
.section button:hover {
125-
background-color: #45a049;
126-
}
127-
.section a {
128-
color: #007BFF;
129-
text-decoration: none;
130-
}
131-
.section a:hover {
132-
text-decoration: underline;
133-
}
134-
</style>
135-
</head>
136-
<body>
137-
<h1>欢迎使用 CodeReDesign 插件！</h1>
138-
<div class="section">
139-
使用之前请先设置DeepSeek API Key
140-
<label for="apiKey">DeepSeek 官方 API Key：</label>
141-
<input type="text" id="apiKey" value="${apiKey}" placeholder="请输入您的 DeepSeek API 密钥" />
142-
<button id="saveApiKey">保存</button>
143-
</div>
144-
<div class="section">
145-
<label for="modelConfig">自定义模型配置：</label>
90+
<!DOCTYPE html>
91+
<html lang="zh-CN">
92+
<head>
93+
<meta charset="UTF-8">
94+
<title>引导页</title>
95+
<style>
96+
body {
97+
font-family: Arial, sans-serif;
98+
margin: 20px;
99+
}
100+
h1 {
101+
color: #333;
102+
}
103+
.section {
104+
margin-bottom: 20px;
105+
}
106+
.section label {
107+
display: block;
108+
margin-bottom: 5px;
109+
}
110+
.section input, .section select {
111+
width: 100%;
112+
padding: 8px;
113+
margin-bottom: 10px;
114+
border: 1px solid #ccc;
115+
border-radius: 4px;
116+
}
117+
.section button {
118+
padding: 8px 16px;
119+
border: none;
120+
background-color: #4CAF50;
121+
color: white;
122+
border-radius: 4px;
123+
cursor: pointer;
124+
}
125+
.section button:hover {
126+
background-color: #45a049;
127+
}
128+
.section a {
129+
color: #007BFF;
130+
text-decoration: none;
131+
}
132+
.section a:hover {
133+
text-decoration: underline;
134+
}
135+
</style>
136+
</head>
137+
<body>
138+
<h1>欢迎使用 CodeReDesign 插件！</h1>
139+
<div class="section">
140+
使用之前请先设置DeepSeek API Key
141+
<label for="apiKey">DeepSeek 官方 API Key：</label>
142+
<input type="text" id="apiKey" value="${apiKey}" placeholder="请输入您的 DeepSeek API 密钥" />
143+
<button id="saveApiKey">保存</button>
144+
</div>
145+
<div class="section">
146+
<label for="modelConfig">选择模型</label>
146147
<select id="modelConfig">
147148
${modelConfigEnum.map(option => `
148149
<option value="${option.value}" ${option.value === currentModelConfig ? 'selected' : ''}>
@@ -152,70 +153,66 @@ class GuideViewProvider implements vscode.WebviewViewProvider {
152153
</select>
153154
<div class="section" id="customConfigSection">
154155
<label for="customBaseURL">自定义模型 Base URL：</label>
155-
<input type="text" id="customBaseURL" value="${currentCustomConfig.custom1.baseURL}" placeholder="请输入自定义模型的 Base URL" />
156+
<input type="text" id="customBaseURL" value="${customBaseURL}" placeholder="请输入自定义模型的 Base URL" />
156157
<label for="customModelName">自定义模型名称：</label>
157-
<input type="text" id="customModelName" value="${currentCustomConfig.custom1.modelName}" placeholder="请输入自定义模型的名称" />
158+
<input type="text" id="customModelName" value="${customModelName}" placeholder="请输入自定义模型的名称" />
158159
<label for="customModelNickname">自定义模型昵称：</label>
159-
<input type="text" id="customModelNickname" value="${currentCustomConfig.custom1.modelNickname}" placeholder="请输入自定义模型的昵称" />
160+
<input type="text" id="customModelNickname" value="${customModelNickname}" placeholder="请输入自定义模型的昵称" />
161+
<label for="customModelNickname">APIKey：</label>
162+
<input type="text" id="customModelNickname" value="${customAPIKey}" placeholder="请输入自定义模型的昵称" />
160163
</div>
161-
</div>
162-
<div class="section">
164+
</div>
165+
<div class="section">
163166
<h2>常用指令：</h2>
164-
<ul>
165-
<li><a href="#" id="generateCvb">生成 CVB 文件</a></li>
166-
<li><a href="#" id="uploadCvb">上传 CVB 文件</a></li>
167-
<li><a href="#" id="applyCvb">应用 CVB 文件</a></li>
168-
<li><a href="#" id="analyzeCode">分析代码</a></li>
167+
<ul style="list-style-type: none; padding-left: 0;">
168+
<li>
169+
<p><strong>1. 需要先选择需要修改的文件列表，建立一个文件集合镜像（CVB），选完后回车，然后输入这个文件镜像集合的名字。</strong></p>
170+
<a href="#" id="generateCvb" style="text-decoration: none; color: #007bff;">生成 CVB 文件</a>
171+
</li>
172+
<li>
173+
<p><strong>2. 选择一个文件镜像集合到大模型，并提出修改需求。模型会在本地输出框输出处理过程，成功后也会在本地生成一个新的 CVB 文件。</strong></p>
174+
<a href="#" id="uploadCvb" style="text-decoration: none; color: #007bff;">上传 CVB 文件</a>
175+
</li>
176+
<li>
177+
<p><strong>3. 选择一个本地的 CVB 文件，把里面的内容覆盖到当前目录中，也就是应用修改。</strong></p>
178+
<a href="#" id="applyCvb" style="text-decoration: none; color: #007bff;">应用 CVB 文件</a>
179+
</li>
180+
<li>
181+
<p><strong>4. 除了修改，还可以使用这个"分析代码功能"，比如让它解释代码，或者描述一个 bug，让它分析可能原因。</strong></p>
182+
<a href="#" id="analyzeCode" style="text-decoration: none; color: #007bff;">分析代码</a>
183+
</li>
169184
</ul>
170-
</div>
171-
<script>
172-
const vscode = acquireVsCodeApi();
173-
174-
// 保存 API 密钥
175-
document.getElementById('saveApiKey').addEventListener('click', () => {
176-
const apiKey = document.getElementById('apiKey').value;
177-
vscode.postMessage({ command: 'saveApiKey', apiKey });
178-
});
185+
</div>
186+
<script>
187+
const vscode = acquireVsCodeApi();
179188
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-
});
189+
document.getElementById('saveApiKey').addEventListener('click', () => {
190+
const apiKey = document.getElementById('apiKey').value;
191+
vscode.postMessage({ command: 'saveApiKey', apiKey });
192+
});
190193
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-
})();
201-
202-
// 跳转到指令
203-
document.getElementById('generateCvb').addEventListener('click', () => {
204-
vscode.postMessage({ command: 'codeReDesign.generateCvb' });
205-
});
206-
document.getElementById('uploadCvb').addEventListener('click', () => {
207-
vscode.postMessage({ command: 'codeReDesign.uploadCvb' });
208-
});
209-
document.getElementById('applyCvb').addEventListener('click', () => {
210-
vscode.postMessage({ command: 'codeReDesign.applyCvb' });
211-
});
212-
document.getElementById('analyzeCode').addEventListener('click', () => {
213-
vscode.postMessage({ command: 'codeReDesign.analyzeCode' });
194+
document.getElementById('modelConfig').addEventListener('change', (event) => {
195+
const selectedModel = event.target.value;
196+
const customConfigSection = document.getElementById('customConfigSection');
197+
customConfigSection.style.display = selectedModel.startsWith('custom') ? 'block' : 'none';
198+
vscode.postMessage({ command: 'updateModelConfig', selectedModel });
199+
});
200+
201+
(function() {
202+
const selectedModel = document.getElementById('modelConfig').value;
203+
const customConfigSection = document.getElementById('customConfigSection');
204+
customConfigSection.style.display = selectedModel.startsWith('custom') ? 'block' : 'none';
205+
})();
206+
207+
document.querySelectorAll('.section a').forEach(item => {
208+
item.addEventListener('click', (event) => {
209+
const command = event.target.id;
210+
vscode.postMessage({ command: \`codeReDesign.\${command}\` });
214211
});
215-
</script>
216-
</body>
217-
</html>
218-
`;
219-
}
220-
221-
}
212+
});
213+
</script>
214+
</body>
215+
</html>
216+
`;
217+
}
218+
}

0 commit comments

Comments
 (0)