113 lines
4.4 KiB
HTML
113 lines
4.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Prompt Generator — 设置</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<link rel="stylesheet" href="/static/common.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div style="max-width:640px;margin:80px auto 0;padding:0 24px">
|
||
|
|
<h1 style="font-size:24px;font-weight:700;margin-bottom:24px">⚙️ 设置</h1>
|
||
|
|
|
||
|
|
<!-- LLM 配置 -->
|
||
|
|
<div class="card mb-4">
|
||
|
|
<div class="card-header">🤖 LLM 配置</div>
|
||
|
|
<div class="card-body flex flex-col gap-4">
|
||
|
|
<div>
|
||
|
|
<label class="text-sm font-medium mb-2" style="display:block">API Base URL</label>
|
||
|
|
<input class="input" id="llm-url" placeholder="https://api.deepseek.com/v1">
|
||
|
|
<div class="text-xs text-muted mt-1">兼容 OpenAI 接口的 API 地址</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="text-sm font-medium mb-2" style="display:block">API Key</label>
|
||
|
|
<input class="input" id="llm-key" type="password" placeholder="sk-xxx">
|
||
|
|
<div class="text-xs text-muted mt-1">留空则不更新。API Key 仅存储在服务端</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="text-sm font-medium mb-2" style="display:block">模型名称</label>
|
||
|
|
<input class="input" id="llm-model" placeholder="deepseek-chat">
|
||
|
|
</div>
|
||
|
|
<button class="btn btn-primary" onclick="saveSettings()" id="save-btn">保存配置</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 主题设置 -->
|
||
|
|
<div class="card mb-4">
|
||
|
|
<div class="card-header">🎨 主题设置</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<div class="text-sm font-medium">暗色模式</div>
|
||
|
|
<div class="text-xs text-muted">切换亮色/暗色主题</div>
|
||
|
|
</div>
|
||
|
|
<button class="btn" onclick="Theme.toggle(); updateThemeBtn()">
|
||
|
|
<span id="theme-label">${Theme.isDark() ? '🌙 暗色' : '☀️ 亮色'}</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 账号 -->
|
||
|
|
<div class="card mb-4">
|
||
|
|
<div class="card-header">🔐 账号</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<button class="btn btn-danger" onclick="Auth.logout()">退出登录</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="/static/common.js"></script>
|
||
|
|
<script>
|
||
|
|
async function init() {
|
||
|
|
const ok = await Auth.check();
|
||
|
|
if (!ok) {
|
||
|
|
Auth.showLoginModal();
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
renderNavbar('settings');
|
||
|
|
await loadSettings();
|
||
|
|
updateThemeBtn();
|
||
|
|
}
|
||
|
|
|
||
|
|
async function loadSettings() {
|
||
|
|
try {
|
||
|
|
const settings = await API.get('/api/settings');
|
||
|
|
document.getElementById('llm-url').value = settings.llm_api_base_url || '';
|
||
|
|
document.getElementById('llm-model').value = settings.llm_model_name || '';
|
||
|
|
} catch (e) {
|
||
|
|
Toast.error('加载设置失败: ' + e.message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function saveSettings() {
|
||
|
|
const btn = document.getElementById('save-btn');
|
||
|
|
btn.disabled = true;
|
||
|
|
btn.textContent = '保存中...';
|
||
|
|
|
||
|
|
try {
|
||
|
|
await API.put('/api/settings', {
|
||
|
|
llm_api_base_url: document.getElementById('llm-url').value,
|
||
|
|
llm_api_key: document.getElementById('llm-key').value,
|
||
|
|
llm_model_name: document.getElementById('llm-model').value
|
||
|
|
});
|
||
|
|
document.getElementById('llm-key').value = '';
|
||
|
|
Toast.success('配置已保存');
|
||
|
|
} catch (e) {
|
||
|
|
Toast.error(e.message);
|
||
|
|
} finally {
|
||
|
|
btn.disabled = false;
|
||
|
|
btn.textContent = '保存配置';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateThemeBtn() {
|
||
|
|
document.getElementById('theme-label').textContent = Theme.isDark() ? '🌙 暗色' : '☀️ 亮色';
|
||
|
|
}
|
||
|
|
|
||
|
|
init();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|