328 lines
9.4 KiB
TypeScript
328 lines
9.4 KiB
TypeScript
/**
|
|
* 获取通用设置组件的 HTML 内容
|
|
*/
|
|
export function getGeneralSettingsComponentContent(): string {
|
|
return `
|
|
<div class="general-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">选择界面主题</span>
|
|
</div>
|
|
<select class="settings-select" id="themeSelect">
|
|
<option value="auto">跟随系统</option>
|
|
<option value="light">浅色</option>
|
|
<option value="dark">深色</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<div class="settings-item-header">
|
|
<label class="settings-item-label">语言</label>
|
|
<span class="settings-item-description">选择界面语言</span>
|
|
</div>
|
|
<select class="settings-select" id="languageSelect">
|
|
<option value="zh-CN">简体中文</option>
|
|
<option value="en-US">English</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<div class="settings-item-header">
|
|
<label class="settings-item-label">自动保存</label>
|
|
<span class="settings-item-description">自动保存会话历史</span>
|
|
</div>
|
|
<label class="settings-switch">
|
|
<input type="checkbox" id="autoSaveCheckbox" checked>
|
|
<span class="settings-switch-slider"></span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<div class="settings-item-header">
|
|
<label class="settings-item-label">显示时间戳</label>
|
|
<span class="settings-item-description">在消息中显示时间戳</span>
|
|
</div>
|
|
<label class="settings-switch">
|
|
<input type="checkbox" id="showTimestampCheckbox">
|
|
<span class="settings-switch-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<h4 class="settings-subsection-title">编辑器设置</h4>
|
|
|
|
<div class="settings-item">
|
|
<div class="settings-item-header">
|
|
<label class="settings-item-label">字体大小</label>
|
|
<span class="settings-item-description">设置编辑器字体大小</span>
|
|
</div>
|
|
<input type="number" class="settings-input" id="fontSizeInput" value="14" min="10" max="24">
|
|
</div>
|
|
|
|
<div class="settings-item">
|
|
<div class="settings-item-header">
|
|
<label class="settings-item-label">代码高亮</label>
|
|
<span class="settings-item-description">启用代码语法高亮</span>
|
|
</div>
|
|
<label class="settings-switch">
|
|
<input type="checkbox" id="syntaxHighlightCheckbox" checked>
|
|
<span class="settings-switch-slider"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-actions">
|
|
<button class="settings-button settings-button-primary" onclick="saveGeneralSettings()">
|
|
保存设置
|
|
</button>
|
|
<button class="settings-button settings-button-secondary" onclick="resetGeneralSettings()">
|
|
重置为默认
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* 获取通用设置组件的 CSS 样式
|
|
*/
|
|
export function getGeneralSettingsComponentStyles(): string {
|
|
return `
|
|
.general-settings {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.settings-section-title {
|
|
margin: 0 0 20px 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--vscode-foreground);
|
|
}
|
|
|
|
.settings-section {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.settings-subsection-title {
|
|
margin: 0 0 16px 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--vscode-foreground);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.settings-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 0;
|
|
border-bottom: 1px solid var(--vscode-panel-border);
|
|
}
|
|
|
|
.settings-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.settings-item-header {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.settings-item-label {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--vscode-foreground);
|
|
}
|
|
|
|
.settings-item-description {
|
|
font-size: 12px;
|
|
color: var(--vscode-descriptionForeground);
|
|
}
|
|
|
|
.settings-select {
|
|
padding: 6px 12px;
|
|
background: var(--vscode-input-background);
|
|
color: var(--vscode-input-foreground);
|
|
border: 1px solid var(--vscode-input-border);
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
.settings-select:focus {
|
|
border-color: var(--vscode-focusBorder);
|
|
}
|
|
|
|
.settings-input {
|
|
width: 80px;
|
|
padding: 6px 12px;
|
|
background: var(--vscode-input-background);
|
|
color: var(--vscode-input-foreground);
|
|
border: 1px solid var(--vscode-input-border);
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
outline: none;
|
|
}
|
|
|
|
.settings-input:focus {
|
|
border-color: var(--vscode-focusBorder);
|
|
}
|
|
|
|
.settings-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 44px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.settings-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.settings-switch-slider {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--vscode-input-background);
|
|
border: 1px solid var(--vscode-input-border);
|
|
border-radius: 24px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.settings-switch-slider:before {
|
|
content: "";
|
|
position: absolute;
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 3px;
|
|
bottom: 3px;
|
|
background: var(--vscode-foreground);
|
|
border-radius: 50%;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.settings-switch input:checked + .settings-switch-slider {
|
|
background: var(--vscode-button-background);
|
|
border-color: var(--vscode-button-background);
|
|
}
|
|
|
|
.settings-switch input:checked + .settings-switch-slider:before {
|
|
transform: translateX(20px);
|
|
background: var(--vscode-button-foreground);
|
|
}
|
|
|
|
.settings-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 24px;
|
|
padding-top: 24px;
|
|
border-top: 1px solid var(--vscode-panel-border);
|
|
}
|
|
|
|
.settings-button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.settings-button-primary {
|
|
background: var(--vscode-button-background);
|
|
color: var(--vscode-button-foreground);
|
|
}
|
|
|
|
.settings-button-primary:hover {
|
|
background: var(--vscode-button-hoverBackground);
|
|
}
|
|
|
|
.settings-button-secondary {
|
|
background: var(--vscode-button-secondaryBackground);
|
|
color: var(--vscode-button-secondaryForeground);
|
|
}
|
|
|
|
.settings-button-secondary:hover {
|
|
background: var(--vscode-button-secondaryHoverBackground);
|
|
}
|
|
`;
|
|
}
|
|
|
|
/**
|
|
* 获取通用设置组件的 JavaScript 脚本
|
|
*/
|
|
export function getGeneralSettingsComponentScript(): string {
|
|
return `
|
|
// 保存通用设置
|
|
function saveGeneralSettings() {
|
|
const settings = {
|
|
theme: document.getElementById('themeSelect').value,
|
|
language: document.getElementById('languageSelect').value,
|
|
autoSave: document.getElementById('autoSaveCheckbox').checked,
|
|
showTimestamp: document.getElementById('showTimestampCheckbox').checked,
|
|
fontSize: document.getElementById('fontSizeInput').value,
|
|
syntaxHighlight: document.getElementById('syntaxHighlightCheckbox').checked,
|
|
};
|
|
|
|
// 发送消息到扩展
|
|
vscode.postMessage({
|
|
command: 'saveGeneralSettings',
|
|
settings: settings
|
|
});
|
|
|
|
// 显示保存成功提示
|
|
console.log('通用设置已保存', settings);
|
|
}
|
|
|
|
// 重置通用设置
|
|
function resetGeneralSettings() {
|
|
document.getElementById('themeSelect').value = 'auto';
|
|
document.getElementById('languageSelect').value = 'zh-CN';
|
|
document.getElementById('autoSaveCheckbox').checked = true;
|
|
document.getElementById('showTimestampCheckbox').checked = false;
|
|
document.getElementById('fontSizeInput').value = '14';
|
|
document.getElementById('syntaxHighlightCheckbox').checked = true;
|
|
|
|
console.log('通用设置已重置为默认值');
|
|
}
|
|
|
|
// 加载通用设置
|
|
function loadGeneralSettings(settings) {
|
|
if (!settings) return;
|
|
|
|
if (settings.theme) {
|
|
document.getElementById('themeSelect').value = settings.theme;
|
|
}
|
|
if (settings.language) {
|
|
document.getElementById('languageSelect').value = settings.language;
|
|
}
|
|
if (settings.autoSave !== undefined) {
|
|
document.getElementById('autoSaveCheckbox').checked = settings.autoSave;
|
|
}
|
|
if (settings.showTimestamp !== undefined) {
|
|
document.getElementById('showTimestampCheckbox').checked = settings.showTimestamp;
|
|
}
|
|
if (settings.fontSize) {
|
|
document.getElementById('fontSizeInput').value = settings.fontSize;
|
|
}
|
|
if (settings.syntaxHighlight !== undefined) {
|
|
document.getElementById('syntaxHighlightCheckbox').checked = settings.syntaxHighlight;
|
|
}
|
|
}
|
|
`;
|
|
}
|