coder/article-writer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 提升暗色主题文字对比度，解决提示文字看不清的问题

Browse Source 
- 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颜色覆盖
This commit is contained in:
hubian
2026-05-21 21:55:13 +08:00
parent d2ce8f54d4
commit d3dd11ca8b
3 changed files with 390 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
templates/index.html
View File

@@ -7,9 +7,10 @@
<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: #8b949e; --accent: #58a6ff; --accent-hover: #79c0ff; --danger: #f85149; --success: #3fb950; }
: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; }
@@ -21,23 +22,35 @@
.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; }
.modal-content { background: var(--bg-card); border: 1px solid var(--border); }
.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-muted); font-size: 0.9rem; }
.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">
<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>
@@ -105,10 +118,116 @@
</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 modal = new bootstrap.Modal(document.getElementById('createModal'));
function showCreateModal() { modal.show(); }
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();