hubian
d3dd11ca8b
- text-muted色值从#8b949e提亮到#9eaab8（对比度4.3:1→5.0:1） - 覆盖Bootstrap .text-muted默认色，统一走CSS变量 - 表单标签从text-muted改为text色+font-weight:500，更醒目 - 输入框placeholder设为#6e7a88，比默认更清晰 - .btn-secondary适配暗色主题，不再用Bootstrap默认灰 - modal-content显式设置color:var(--text) - index页新增.alert-info暗色适配 - 新增.form-text颜色覆盖
256 lines
13 KiB
HTML
256 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>文章编写系统</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
|
||
<style>
|
||
:root { --bg-dark: #0d1117; --bg-card: #161b22; --bg-hover: #1c2333; --border: #30363d; --text: #c9d1d9; --text-muted: #9eaab8; --accent: #58a6ff; --accent-hover: #79c0ff; --danger: #f85149; --success: #3fb950; }
|
||
* { box-sizing: border-box; }
|
||
body { background: var(--bg-dark); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; min-height: 100vh; }
|
||
.text-muted { color: var(--text-muted) !important; }
|
||
.navbar { background: var(--bg-card); border-bottom: 1px solid var(--border); }
|
||
.navbar-brand { color: var(--accent) !important; font-weight: 700; font-size: 1.3rem; }
|
||
.topic-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px; transition: all 0.2s; cursor: pointer; }
|
||
.topic-card:hover { border-color: var(--accent); background: var(--bg-hover); transform: translateY(-2px); }
|
||
.topic-card h5 { color: var(--text); margin-bottom: 8px; }
|
||
.topic-card .meta { color: var(--text-muted); font-size: 0.85rem; }
|
||
.topic-card .desc { color: var(--text-muted); font-size: 0.9rem; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||
.btn-accent { background: var(--accent); color: #fff; border: none; }
|
||
.btn-accent:hover { background: var(--accent-hover); color: #fff; }
|
||
.btn-outline-accent { border-color: var(--accent); color: var(--accent); }
|
||
.btn-outline-accent:hover { background: var(--accent); color: #fff; }
|
||
.btn-secondary { background: var(--border); color: var(--text); border: none; }
|
||
.btn-secondary:hover { background: #444c56; color: var(--text); }
|
||
.modal-content { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); }
|
||
.modal-header { border-bottom: 1px solid var(--border); }
|
||
.modal-footer { border-top: 1px solid var(--border); }
|
||
.form-control, .form-select { background: var(--bg-dark); border-color: var(--border); color: var(--text); }
|
||
.form-control::placeholder, .form-select::placeholder { color: #6e7a88; opacity: 1; }
|
||
.form-control:focus, .form-select:focus { background: var(--bg-dark); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 2px rgba(88,166,255,0.2); }
|
||
.form-label { color: var(--text); font-size: 0.9rem; font-weight: 500; }
|
||
.form-text { color: var(--text-muted) !important; }
|
||
.btn-close { filter: invert(1); }
|
||
.empty-state { text-align: center; padding: 80px 20px; color: var(--text-muted); }
|
||
.empty-state i { font-size: 4rem; margin-bottom: 16px; display: block; }
|
||
.badge-mat { background: rgba(88,166,255,0.15); color: var(--accent); }
|
||
.config-indicator { font-size: 0.8rem; }
|
||
.alert-info { background: rgba(88,166,255,0.12); border-color: rgba(88,166,255,0.25); color: var(--text); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav class="navbar navbar-expand">
|
||
<div class="container">
|
||
<a class="navbar-brand" href="/"><i class="bi bi-pencil-square me-2"></i>文章编写系统</a>
|
||
<div class="ms-auto d-flex align-items-center gap-2">
|
||
<span class="config-indicator text-muted" id="configIndicator">
|
||
<i class="bi bi-circle text-warning"></i> 未配置
|
||
</span>
|
||
<button class="btn btn-outline-accent btn-sm" onclick="showConfigModal()">
|
||
<i class="bi bi-gear me-1"></i>模型配置
|
||
</button>
|
||
<button class="btn btn-accent" onclick="showCreateModal()">
|
||
<i class="bi bi-plus-lg me-1"></i>新建主题
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container py-4">
|
||
{% if topics %}
|
||
<div class="row g-3">
|
||
{% for t in topics %}
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="topic-card" onclick="location.href='/topic/{{t.id}}'">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<h5 class="mb-0"><i class="bi bi-folder2-open me-2 text-warning"></i>{{t.name}}</h5>
|
||
<button class="btn btn-sm btn-link text-danger p-0" onclick="event.stopPropagation();deleteTopic('{{t.id}}','{{t.name}}')" title="删除">
|
||
<i class="bi bi-trash3"></i>
|
||
</button>
|
||
</div>
|
||
{% if t.description %}<div class="desc">{{t.description}}</div>{% endif %}
|
||
<div class="meta mt-2">
|
||
<span class="badge badge-mat me-1"><i class="bi bi-file-earmark-text me-1"></i>{{t.mat_count}} 素材</span>
|
||
<span class="ms-2"><i class="bi bi-clock me-1"></i>{{t.updated_at}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<div class="empty-state">
|
||
<i class="bi bi-journal-text"></i>
|
||
<h5>还没有主题</h5>
|
||
<p>点击右上角「新建主题」开始吧</p>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- 新建主题模态框 -->
|
||
<div class="modal fade" id="createModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">新建主题</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="mb-3">
|
||
<label class="form-label">主题名称 *</label>
|
||
<input type="text" class="form-control" id="topicName" placeholder="如：AI技术趋势">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">主题说明</label>
|
||
<textarea class="form-control" id="topicDesc" rows="2" placeholder="简要描述这个主题的方向"></textarea>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">默认Prompt</label>
|
||
<textarea class="form-control" id="topicPrompt" rows="4" placeholder="请根据以下素材撰写一篇结构清晰、内容丰富的文章："></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
<button type="button" class="btn btn-accent" onclick="createTopic()">创建</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LLM配置模态框 -->
|
||
<div class="modal fade" id="configModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title"><i class="bi bi-gear me-2"></i>大模型接口配置</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="mb-3">
|
||
<label class="form-label">API 地址</label>
|
||
<input type="text" class="form-control" id="cfgUrl" placeholder="https://api.openai.com/v1/chat/completions">
|
||
<div class="form-text text-muted">兼容 OpenAI 格式的接口地址</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">API Key</label>
|
||
<div class="input-group">
|
||
<input type="password" class="form-control" id="cfgKey" placeholder="留空则保持原配置不变">
|
||
<button class="btn btn-outline-accent" type="button" onclick="toggleKeyVisibility()">
|
||
<i class="bi bi-eye" id="keyEyeIcon"></i>
|
||
</button>
|
||
</div>
|
||
<div class="form-text text-muted" id="cfgKeyHint"></div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">模型名称</label>
|
||
<input type="text" class="form-control" id="cfgModel" placeholder="如：gpt-4o、qwen3.6-plus、deepseek-chat">
|
||
</div>
|
||
<div class="alert alert-info py-2 small">
|
||
<i class="bi bi-info-circle me-1"></i>配置保存后立即生效，所有主题生成文章时使用此配置。
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||
<button type="button" class="btn btn-accent" onclick="saveConfig()">
|
||
<i class="bi bi-check-lg me-1"></i>保存配置
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
const createModalInstance = new bootstrap.Modal(document.getElementById('createModal'));
|
||
const configModalInstance = new bootstrap.Modal(document.getElementById('configModal'));
|
||
|
||
// 页面加载时获取配置状态
|
||
(async function() {
|
||
try {
|
||
const res = await fetch('/api/llm-config');
|
||
const cfg = await res.json();
|
||
const ind = document.getElementById('configIndicator');
|
||
if (cfg.api_key_set) {
|
||
ind.innerHTML = `<i class="bi bi-circle-fill text-success"></i> ${cfg.model}`;
|
||
} else {
|
||
ind.innerHTML = `<i class="bi bi-circle text-warning"></i> 未配置`;
|
||
}
|
||
} catch(e) {}
|
||
})();
|
||
|
||
function showCreateModal() { createModalInstance.show(); }
|
||
|
||
async function showConfigModal() {
|
||
try {
|
||
const res = await fetch('/api/llm-config');
|
||
const cfg = await res.json();
|
||
document.getElementById('cfgUrl').value = cfg.url || '';
|
||
document.getElementById('cfgKey').value = '';
|
||
document.getElementById('cfgKeyHint').textContent = cfg.api_key_set ? `当前: ${cfg.api_key_masked}` : '尚未配置';
|
||
document.getElementById('cfgModel').value = cfg.model || '';
|
||
} catch(e) {}
|
||
configModalInstance.show();
|
||
}
|
||
|
||
function toggleKeyVisibility() {
|
||
const inp = document.getElementById('cfgKey');
|
||
const icon = document.getElementById('keyEyeIcon');
|
||
if (inp.type === 'password') {
|
||
inp.type = 'text';
|
||
icon.className = 'bi bi-eye-slash';
|
||
} else {
|
||
inp.type = 'password';
|
||
icon.className = 'bi bi-eye';
|
||
}
|
||
}
|
||
|
||
async function saveConfig() {
|
||
const data = {
|
||
url: document.getElementById('cfgUrl').value.trim(),
|
||
model: document.getElementById('cfgModel').value.trim()
|
||
};
|
||
const key = document.getElementById('cfgKey').value.trim();
|
||
if (key) data.api_key = key; // 只在有新值时传递
|
||
|
||
const res = await fetch('/api/llm-config', {
|
||
method: 'PUT',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify(data)
|
||
});
|
||
if (res.ok) {
|
||
// 更新指示器
|
||
const ind = document.getElementById('configIndicator');
|
||
ind.innerHTML = `<i class="bi bi-circle-fill text-success"></i> ${data.model}`;
|
||
configModalInstance.hide();
|
||
} else {
|
||
const d = await res.json();
|
||
alert(d.error || '保存失败');
|
||
}
|
||
}
|
||
|
||
async function createTopic() {
|
||
const name = document.getElementById('topicName').value.trim();
|
||
if (!name) return alert('请输入主题名称');
|
||
const res = await fetch('/api/topics', {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({
|
||
name,
|
||
description: document.getElementById('topicDesc').value,
|
||
prompt: document.getElementById('topicPrompt').value
|
||
})
|
||
});
|
||
if (res.ok) location.reload();
|
||
else { const d = await res.json(); alert(d.error || '创建失败'); }
|
||
}
|
||
|
||
async function deleteTopic(id, name) {
|
||
if (!confirm(`确定删除主题「${name}」？所有素材和文章将被清除！`)) return;
|
||
const res = await fetch(`/api/topics/${id}`, {method: 'DELETE'});
|
||
if (res.ok) location.reload();
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|