wonder
f456cdb565
- common.css: 全局样式，支持亮色/暗色主题，完整组件库 - common.js: API 封装、认证模块、Toast 提示、主题切换、草稿管理 - index.html: Prompt 构建器完整 UI - 左侧面板：项目/会话选择、标签系统（搜索/折叠/单选）、片段选择（分组/搜索）、CLAUDE.md 输入、自定义内容 - 右侧面板：实时 Prompt 预览、智能建议列表、复制到剪贴板 - 草稿自动保存（localStorage，防抖 1s） - 新增个人标签模态框 - 保存构建会话功能 - dashboard.html: 复盘看板 - 左侧项目树（项目→会话层级） - 右侧 Prompt 列表（文本视图，XML 标签折叠） - 导出功能（Markdown/JSON/纯文本） - 关键词搜索 - settings.html: 设置页 - LLM 配置（API URL/Key/模型） - 主题切换 - 退出登录 Co-Authored-By: Claude <noreply@anthropic.com>
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>
|