feat:添加设置按钮

- 包含通用设置,里面有语言啊,主题色啊等设置
- 还包含规则设置,里面有系统规则设置等
This commit is contained in:
Roe-xin
2026-01-16 14:31:15 +08:00
parent 28d93c7e75
commit 5347425327
5 changed files with 816 additions and 9 deletions

View File

@ -0,0 +1,177 @@
/**
* 获取规则设置组件的 HTML 内容
*/
export function getRulesSettingsComponentContent(): string {
return `
<div class="rules-settings">
<h3 class="settings-section-title">规则设置</h3>
<div class="settings-section">
<div class="settings-item">
<div class="settings-item-header">
<label class="settings-item-label">启用自定义规则</label>
<span class="settings-item-description">使用自定义规则来控制 AI 行为</span>
</div>
<label class="settings-switch">
<input type="checkbox" id="enableCustomRulesCheckbox" checked>
<span class="settings-switch-slider"></span>
</label>
</div>
</div>
<div class="settings-section">
<h4 class="settings-subsection-title">系统规则</h4>
<div class="rules-textarea-container">
<textarea
class="rules-textarea"
id="systemRulesTextarea"
placeholder="在此输入系统规则,例如:&#10;- 始终使用中文回复&#10;- 代码注释要详细&#10;- 遵循项目编码规范"
rows="8"
></textarea>
<div class="rules-textarea-hint">
系统规则会在每次对话开始时应用
</div>
</div>
</div>
<div class="settings-section">
<h4 class="settings-subsection-title">代码生成规则</h4>
<div class="rules-textarea-container">
<textarea
class="rules-textarea"
id="codeRulesTextarea"
placeholder="在此输入代码生成规则,例如:&#10;- 使用 TypeScript 严格模式&#10;- 函数命名使用驼峰命名法&#10;- 添加必要的错误处理"
rows="8"
></textarea>
<div class="rules-textarea-hint">
这些规则会在生成代码时应用
</div>
</div>
</div>
<div class="settings-section">
<h4 class="settings-subsection-title">Verilog 规则</h4>
<div class="rules-textarea-container">
<textarea
class="rules-textarea"
id="verilogRulesTextarea"
placeholder="在此输入 Verilog 代码规则,例如:&#10;- 使用非阻塞赋值 (<=) 在时序逻辑中&#10;- 模块命名使用小写加下划线&#10;- 添加详细的端口注释"
rows="8"
></textarea>
<div class="rules-textarea-hint">
这些规则会在生成 Verilog 代码时应用
</div>
</div>
</div>
<div class="settings-actions">
<button class="settings-button settings-button-primary" onclick="saveRulesSettings()">
保存规则
</button>
<button class="settings-button settings-button-secondary" onclick="resetRulesSettings()">
重置为默认
</button>
</div>
</div>
`;
}
/**
* 获取规则设置组件的 CSS 样式
*/
export function getRulesSettingsComponentStyles(): string {
return `
.rules-settings {
max-width: 700px;
}
.rules-textarea-container {
margin-top: 8px;
}
.rules-textarea {
width: 100%;
padding: 12px;
background: var(--vscode-input-background);
color: var(--vscode-input-foreground);
border: 1px solid var(--vscode-input-border);
border-radius: 4px;
font-size: 13px;
font-family: var(--vscode-editor-font-family);
line-height: 1.5;
resize: vertical;
outline: none;
box-sizing: border-box;
}
.rules-textarea:focus {
border-color: var(--vscode-focusBorder);
}
.rules-textarea::placeholder {
color: var(--vscode-input-placeholderForeground);
opacity: 0.6;
}
.rules-textarea-hint {
margin-top: 8px;
font-size: 12px;
color: var(--vscode-descriptionForeground);
font-style: italic;
}
`;
}
/**
* 获取规则设置组件的 JavaScript 脚本
*/
export function getRulesSettingsComponentScript(): string {
return `
// 保存规则设置
function saveRulesSettings() {
const settings = {
enableCustomRules: document.getElementById('enableCustomRulesCheckbox').checked,
systemRules: document.getElementById('systemRulesTextarea').value,
codeRules: document.getElementById('codeRulesTextarea').value,
verilogRules: document.getElementById('verilogRulesTextarea').value,
};
// 发送消息到扩展
vscode.postMessage({
command: 'saveRulesSettings',
settings: settings
});
// 显示保存成功提示
console.log('规则设置已保存', settings);
}
// 重置规则设置
function resetRulesSettings() {
document.getElementById('enableCustomRulesCheckbox').checked = true;
document.getElementById('systemRulesTextarea').value = '';
document.getElementById('codeRulesTextarea').value = '';
document.getElementById('verilogRulesTextarea').value = '';
console.log('规则设置已重置为默认值');
}
// 加载规则设置
function loadRulesSettings(settings) {
if (!settings) return;
if (settings.enableCustomRules !== undefined) {
document.getElementById('enableCustomRulesCheckbox').checked = settings.enableCustomRules;
}
if (settings.systemRules) {
document.getElementById('systemRulesTextarea').value = settings.systemRules;
}
if (settings.codeRules) {
document.getElementById('codeRulesTextarea').value = settings.codeRules;
}
if (settings.verilogRules) {
document.getElementById('verilogRulesTextarea').value = settings.verilogRules;
}
}
`;
}