Skip to content

Commit 9d41424

Browse files
yefanskyyefansky
committed
fix:优化引导页
1 parent 4d58a11 commit 9d41424

File tree

1 file changed

+65
-50
lines changed

1 file changed

+65
-50
lines changed

‎src/guide.ts‎

Lines changed: 65 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,6 @@ class GuideViewProvider implements vscode.WebviewViewProvider {
4444
vscode.window.showErrorMessage(`配置更新失败: ${err}`);
4545
});
4646
}
47-
48-
// 动态获取自定义模型配置
4947
private getWebviewContent(): string {
5048
const config = vscode.workspace.getConfiguration('codeReDesign');
5149
const apiKey = config.get('deepSeekApiKey') || '';
@@ -132,78 +130,95 @@ class GuideViewProvider implements vscode.WebviewViewProvider {
132130
.section a:hover {
133131
text-decoration: underline;
134132
}
133+
details {
134+
margin-top: 10px;
135+
}
136+
summary {
137+
font-weight: bold;
138+
cursor: pointer;
139+
}
135140
</style>
136141
</head>
137142
<body>
138143
<h1>欢迎使用 CodeReDesign 插件！</h1>
144+
<!--折叠的自定义模型设置部分-->
139145
<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>
147-
<select id="modelConfig">
148-
${modelConfigEnum.map(option => `
149-
<option value="${option.value}" ${option.value === currentModelConfig ? 'selected' : ''}>
150-
${option.label}
151-
</option>
152-
`).join('')}
153-
</select>
154-
<div class="section" id="customConfigSection">
155-
<label for="customBaseURL">自定义模型 Base URL：</label>
156-
<input type="text" id="customBaseURL" value="${customBaseURL}" placeholder="请输入自定义模型的 Base URL" />
157-
<label for="customModelName">自定义模型名称：</label>
158-
<input type="text" id="customModelName" value="${customModelName}" placeholder="请输入自定义模型的名称" />
159-
<label for="customModelNickname">自定义模型昵称：</label>
160-
<input type="text" id="customModelNickname" value="${customModelNickname}" placeholder="请输入自定义模型的昵称" />
161-
<label for="customModelNickname">APIKey：</label>
162-
<input type="text" id="customModelNickname" value="${customAPIKey}" placeholder="请输入自定义模型的昵称" />
163-
</div>
146+
<h2>开始使用前你需要先选择使用的模型和APIKey</h2>
147+
<details close>
148+
<summary>点击此处展开选择模型和设置APIKey</summary>
149+
<label for="apiKey">DeepSeek 官方 API Key：</label>
150+
<input type="text" id="apiKey" value="${apiKey}" placeholder="请输入您的 DeepSeek API 密钥" />
151+
<button id="saveApiKey">保存</button>
152+
<summary>自定义模型配置</summary>
153+
<label for="modelConfig">选择模型</label>
154+
<select id="modelConfig">
155+
${modelConfigEnum.map(option => `
156+
<option value="${option.value}" ${option.value === currentModelConfig ? 'selected' : ''}>
157+
${option.label}
158+
</option>
159+
`).join('')}
160+
</select>
161+
<div class="section" id="customConfigSection">
162+
<label for="customBaseURL">自定义模型 Base URL：</label>
163+
<input type="text" id="customBaseURL" value="${customBaseURL}" placeholder="请输入自定义模型的 Base URL" />
164+
<label for="customModelName">自定义模型名称：</label>
165+
<input type="text" id="customModelName" value="${customModelName}" placeholder="请输入自定义模型的名称" />
166+
<label for="customModelNickname">自定义模型昵称：</label>
167+
<input type="text" id="customModelNickname" value="${customModelNickname}" placeholder="请输入自定义模型的昵称" />
168+
<label for="customModelAPIKey">API Key：</label>
169+
<input type="text" id="customModelAPIKey" value="${customAPIKey}" placeholder="请输入自定义模型的 API Key" />
170+
</div>
171+
</details>
164172
</div>
173+
174+
<!-- 常用指令部分 -->
165175
<div class="section">
166-
<h2>常用指令：</h2>
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>
184-
</ul>
176+
<h2>常用指令：</h2>
177+
<ul style="list-style-type: none; padding-left: 0;">
178+
<li>
179+
<p><strong>1. 需要先选择需要修改的文件列表，建立一个文件集合镜像（CVB），选完后回车，然后输入这个文件镜像集合的名字。</strong></p>
180+
<a href="#" id="generateCvb">CodeReDesign: Generate CVB File</a>
181+
</li>
182+
<li>
183+
<p><strong>2. 选择一个文件镜像集合到大模型，并提出修改需求。模型会在本地输出框输出处理过程，成功后也会在本地生成一个新的 CVB 文件。</strong></p>
184+
<a href="#" id="uploadCvb">CodeReDesign: Upload CVB and Call API</a>
185+
</li>
186+
<li>
187+
<p><strong>3. 选择一个本地的 CVB 文件，把里面的内容覆盖到当前目录中，也就是应用修改。</strong></p>
188+
<a href="#" id="applyCvb">CodeReDesign: Apply CVB to Workspace</a>
189+
</li>
190+
<li>
191+
<p><strong>4. 使用"分析代码功能"，例如让它解释代码或描述一个 bug。</strong></p>
192+
<a href="#" id="analyzeCode">CodeReDesign: Analyze Code</a>
193+
</li>
194+
<li>
195+
<p><strong>5. 中断正在进行的任务</strong></p>
196+
<a href="#" id="stopOperation">CodeReDesign: Stop Operation</a>
197+
</li>
198+
</ul>
185199
</div>
200+
186201
<script>
187202
const vscode = acquireVsCodeApi();
188-
203+
189204
document.getElementById('saveApiKey').addEventListener('click', () => {
190205
const apiKey = document.getElementById('apiKey').value;
191206
vscode.postMessage({ command: 'saveApiKey', apiKey });
192207
});
193-
208+
194209
document.getElementById('modelConfig').addEventListener('change', (event) => {
195210
const selectedModel = event.target.value;
196211
const customConfigSection = document.getElementById('customConfigSection');
197212
customConfigSection.style.display = selectedModel.startsWith('custom') ? 'block' : 'none';
198213
vscode.postMessage({ command: 'updateModelConfig', selectedModel });
199214
});
200-
215+
201216
(function() {
202217
const selectedModel = document.getElementById('modelConfig').value;
203218
const customConfigSection = document.getElementById('customConfigSection');
204219
customConfigSection.style.display = selectedModel.startsWith('custom') ? 'block' : 'none';
205220
})();
206-
221+
207222
document.querySelectorAll('.section a').forEach(item => {
208223
item.addEventListener('click', (event) => {
209224
const command = event.target.id;
@@ -213,6 +228,6 @@ class GuideViewProvider implements vscode.WebviewViewProvider {
213228
</script>
214229
</body>
215230
</html>
216-
`;
231+
`;
217232
}
218233
}

0 commit comments

Comments
 (0)