hubian
d2ce8f54d4
功能： - 主题管理（创建/编辑/删除） - 素材收集（文本/图片） - Prompt编辑 - 大模型生成文章 - 文章管理（查看/编辑/删除） 技术栈：Flask + SQLite + LLM API
326 lines
19 KiB
HTML
326 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{topic.name}} - 文章编写系统</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: #8b949e; --accent: #58a6ff; --accent-hover: #79c0ff; --danger: #f85149; --success: #3fb950; --warning: #d29922; }
|
||
* { box-sizing: border-box; }
|
||
body { background: var(--bg-dark); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
|
||
.navbar { background: var(--bg-card); border-bottom: 1px solid var(--border); }
|
||
.navbar-brand, .navbar-brand:hover { color: var(--accent) !important; font-weight: 700; }
|
||
.section-title { color: var(--text); font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
|
||
.section-title i { font-size: 1.2rem; }
|
||
.card-dark { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }
|
||
.card-dark .card-header { background: transparent; border-bottom: 1px solid var(--border); padding: 12px 16px; }
|
||
.card-dark .card-body { padding: 16px; }
|
||
.material-item { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; transition: all 0.15s; }
|
||
.material-item:hover { border-color: var(--accent); }
|
||
.material-item .mat-content { white-space: pre-wrap; word-break: break-word; font-size: 0.92rem; line-height: 1.5; max-height: 120px; overflow: hidden; }
|
||
.material-item img { max-width: 100%; max-height: 200px; border-radius: 6px; margin-top: 6px; }
|
||
.material-item .mat-meta { color: var(--text-muted); font-size: 0.8rem; margin-top: 6px; }
|
||
.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; }
|
||
.modal-content { background: var(--bg-card); border: 1px solid var(--border); }
|
||
.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: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; }
|
||
.btn-close { filter: invert(1); }
|
||
.article-content { white-space: pre-wrap; word-break: break-word; line-height: 1.8; font-size: 0.95rem; }
|
||
.prompt-area { background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; padding: 12px; min-height: 80px; }
|
||
.generating { opacity: 0.7; pointer-events: none; }
|
||
.spinner-generate { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; }
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|
||
.tab-btn { background: none; border: 1px solid var(--border); color: var(--text-muted); padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
|
||
.tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||
.tab-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
|
||
.article-card { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
|
||
.article-card .article-header { background: var(--bg-dark); padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); }
|
||
.article-card .article-body { padding: 14px; background: var(--bg-card); max-height: 400px; overflow-y: auto; }
|
||
.copy-btn { cursor: pointer; color: var(--text-muted); }
|
||
.copy-btn:hover { color: var(--accent); }
|
||
::-webkit-scrollbar { width: 6px; }
|
||
::-webkit-scrollbar-track { background: var(--bg-dark); }
|
||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<nav class="navbar navbar-expand">
|
||
<div class="container-fluid px-4">
|
||
<a class="navbar-brand" href="/"><i class="bi bi-arrow-left me-2"></i>文章编写系统</a>
|
||
<span class="navbar-text text-warning fw-bold">{{topic.name}}</span>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container-fluid px-4 py-3">
|
||
<div class="row g-3">
|
||
<!-- 左栏：素材 + Prompt -->
|
||
<div class="col-lg-5">
|
||
<!-- Prompt区 -->
|
||
<div class="card-dark mb-3">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<span class="section-title mb-0"><i class="bi bi-chat-square-text text-warning"></i>生成Prompt</span>
|
||
<button class="btn btn-sm btn-outline-accent" onclick="savePrompt()"><i class="bi bi-check-lg me-1"></i>保存</button>
|
||
</div>
|
||
<div class="card-body">
|
||
<textarea class="form-control" id="promptText" rows="4" placeholder="请根据以下素材撰写一篇结构清晰、内容丰富的文章：">{{topic.prompt or ''}}</textarea>
|
||
{% if topic.description %}<div class="mt-2 text-muted small"><i class="bi bi-info-circle me-1"></i>主题说明：{{topic.description}}</div>{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 素材区 -->
|
||
<div class="card-dark">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<span class="section-title mb-0"><i class="bi bi-collection text-info"></i>素材库 <span class="badge bg-secondary ms-1">{{materials|length}}</span></span>
|
||
<div>
|
||
<button class="btn btn-sm btn-outline-accent me-1" onclick="showAddText()"><i class="bi bi-type me-1"></i>文本</button>
|
||
<button class="btn btn-sm btn-outline-accent" onclick="showAddImage()"><i class="bi bi-image me-1"></i>图片</button>
|
||
</div>
|
||
</div>
|
||
<div class="card-body" id="materialsList" style="max-height: 60vh; overflow-y: auto;">
|
||
{% if materials %}
|
||
{% for m in materials %}
|
||
<div class="material-item" id="mat-{{m.id}}">
|
||
<div class="d-flex justify-content-between align-items-start">
|
||
<span class="badge {{'bg-info' if m.type=='text' else 'bg-warning'}}">{{'文本' if m.type=='text' else '图片'}}</span>
|
||
<button class="btn btn-sm btn-link text-danger p-0" onclick="deleteMaterial('{{m.id}}')" title="删除"><i class="bi bi-x-lg"></i></button>
|
||
</div>
|
||
{% if m.type == 'text' %}
|
||
<div class="mat-content mt-1">{{m.content}}</div>
|
||
{% else %}
|
||
{% if m.content %}<div class="small text-muted mt-1">{{m.content}}</div>{% endif %}
|
||
<img src="/static/{{m.file_path}}" alt="素材图片">
|
||
{% endif %}
|
||
<div class="mat-meta">{{m.created_at}}</div>
|
||
</div>
|
||
{% endfor %}
|
||
{% else %}
|
||
<div class="text-center text-muted py-4">
|
||
<i class="bi bi-inbox fs-2 d-block mb-2"></i>
|
||
<small>点击上方按钮添加素材</small>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右栏：文章生成 -->
|
||
<div class="col-lg-7">
|
||
<div class="card-dark">
|
||
<div class="card-header d-flex justify-content-between align-items-center">
|
||
<span class="section-title mb-0"><i class="bi bi-file-earmark-richtext text-success"></i>文章生成</span>
|
||
<button class="btn btn-accent" id="generateBtn" onclick="generateArticle()">
|
||
<i class="bi bi-stars me-1"></i>生成文章
|
||
</button>
|
||
</div>
|
||
<div class="card-body" id="articlesArea" style="max-height: 80vh; overflow-y: auto;">
|
||
{% if articles %}
|
||
{% for a in articles %}
|
||
<div class="article-card" id="article-{{a.id}}">
|
||
<div class="article-header">
|
||
<span class="small text-muted"><i class="bi bi-clock me-1"></i>{{a.created_at}} · {{a.model}}</span>
|
||
<div>
|
||
<span class="copy-btn me-2" onclick="copyArticle('{{a.id}}')" title="复制"><i class="bi bi-clipboard"></i></span>
|
||
<span class="copy-btn me-2" onclick="downloadArticle('{{a.id}}')" title="下载"><i class="bi bi-download"></i></span>
|
||
<span class="copy-btn text-danger" onclick="deleteArticle('{{a.id}}')" title="删除"><i class="bi bi-trash3"></i></span>
|
||
</div>
|
||
</div>
|
||
<div class="article-body article-content" id="article-content-{{a.id}}">{{a.content}}</div>
|
||
</div>
|
||
{% endfor %}
|
||
{% else %}
|
||
<div class="text-center text-muted py-5">
|
||
<i class="bi bi-pencil-square fs-1 d-block mb-3"></i>
|
||
<p>添加素材并编辑Prompt后，点击「生成文章」</p>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加文本模态框 -->
|
||
<div class="modal fade" id="textModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title"><i class="bi bi-type me-2"></i>添加文本素材</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<textarea class="form-control" id="textContent" rows="8" placeholder="在此粘贴或输入文本素材..."></textarea>
|
||
</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="addText()">添加</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加图片模态框 -->
|
||
<div class="modal fade" id="imageModal" tabindex="-1">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title"><i class="bi bi-image 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">选择图片</label>
|
||
<input type="file" class="form-control" id="imageFile" accept="image/*">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">图片说明（可选）</label>
|
||
<input type="text" class="form-control" id="imageDesc" placeholder="描述图片内容">
|
||
</div>
|
||
<div id="imagePreview" class="text-center"></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="addImage()">上传</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 topicId = '{{topic.id}}';
|
||
const textModal = new bootstrap.Modal(document.getElementById('textModal'));
|
||
const imageModal = new bootstrap.Modal(document.getElementById('imageModal'));
|
||
|
||
// 图片预览
|
||
document.getElementById('imageFile').addEventListener('change', function(e) {
|
||
const preview = document.getElementById('imagePreview');
|
||
if (e.target.files[0]) {
|
||
const reader = new FileReader();
|
||
reader.onload = (ev) => { preview.innerHTML = `<img src="${ev.target.result}" style="max-width:100%;max-height:200px;border-radius:6px;">`; };
|
||
reader.readAsDataURL(e.target.files[0]);
|
||
} else { preview.innerHTML = ''; }
|
||
});
|
||
|
||
function showAddText() { document.getElementById('textContent').value = ''; textModal.show(); }
|
||
function showAddImage() { document.getElementById('imageFile').value = ''; document.getElementById('imageDesc').value = ''; document.getElementById('imagePreview').innerHTML = ''; imageModal.show(); }
|
||
|
||
async function addText() {
|
||
const content = document.getElementById('textContent').value.trim();
|
||
if (!content) return alert('请输入文本内容');
|
||
const fd = new FormData();
|
||
fd.append('type', 'text');
|
||
fd.append('content', content);
|
||
const res = await fetch(`/api/topics/${topicId}/materials`, {method: 'POST', body: fd});
|
||
if (res.ok) location.reload();
|
||
else { const d = await res.json(); alert(d.error); }
|
||
}
|
||
|
||
async function addImage() {
|
||
const file = document.getElementById('imageFile').files[0];
|
||
if (!file) return alert('请选择图片');
|
||
const fd = new FormData();
|
||
fd.append('type', 'image');
|
||
fd.append('file', file);
|
||
fd.append('content', document.getElementById('imageDesc').value);
|
||
const res = await fetch(`/api/topics/${topicId}/materials`, {method: 'POST', body: fd});
|
||
if (res.ok) location.reload();
|
||
else { const d = await res.json(); alert(d.error); }
|
||
}
|
||
|
||
async function deleteMaterial(id) {
|
||
if (!confirm('确定删除此素材？')) return;
|
||
await fetch(`/api/materials/${id}`, {method: 'DELETE'});
|
||
document.getElementById(`mat-${id}`).remove();
|
||
}
|
||
|
||
async function savePrompt() {
|
||
const prompt = document.getElementById('promptText').value;
|
||
const res = await fetch(`/api/topics/${topicId}`, {
|
||
method: 'PUT',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({prompt})
|
||
});
|
||
if (res.ok) {
|
||
const btn = event.target.closest('button');
|
||
btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>已保存';
|
||
btn.classList.replace('btn-outline-accent', 'btn-success');
|
||
setTimeout(() => { btn.innerHTML = '<i class="bi bi-check-lg me-1"></i>保存'; btn.classList.replace('btn-success', 'btn-outline-accent'); }, 1500);
|
||
}
|
||
}
|
||
|
||
async function generateArticle() {
|
||
const btn = document.getElementById('generateBtn');
|
||
const orig = btn.innerHTML;
|
||
btn.innerHTML = '<span class="spinner-generate me-2"></span>生成中...';
|
||
btn.classList.add('generating');
|
||
|
||
try {
|
||
const res = await fetch(`/api/topics/${topicId}/generate`, {method: 'POST'});
|
||
if (!res.ok) { const d = await res.json(); throw new Error(d.error || '生成失败'); }
|
||
const article = await res.json();
|
||
|
||
// 清除空状态提示
|
||
const area = document.getElementById('articlesArea');
|
||
const empty = area.querySelector('.text-center');
|
||
if (empty) empty.remove();
|
||
|
||
// 插入新文章
|
||
const html = `<div class="article-card" id="article-${article.id}">
|
||
<div class="article-header">
|
||
<span class="small text-muted"><i class="bi bi-clock me-1"></i>${article.created_at} · ${article.model}</span>
|
||
<div>
|
||
<span class="copy-btn me-2" onclick="copyArticle('${article.id}')" title="复制"><i class="bi bi-clipboard"></i></span>
|
||
<span class="copy-btn me-2" onclick="downloadArticle('${article.id}')" title="下载"><i class="bi bi-download"></i></span>
|
||
<span class="copy-btn text-danger" onclick="deleteArticle('${article.id}')" title="删除"><i class="bi bi-trash3"></i></span>
|
||
</div>
|
||
</div>
|
||
<div class="article-body article-content" id="article-content-${article.id}">${escapeHtml(article.content)}</div>
|
||
</div>`;
|
||
area.insertAdjacentHTML('afterbegin', html);
|
||
} catch(e) {
|
||
alert('生成失败: ' + e.message);
|
||
} finally {
|
||
btn.innerHTML = orig;
|
||
btn.classList.remove('generating');
|
||
}
|
||
}
|
||
|
||
async function deleteArticle(id) {
|
||
if (!confirm('确定删除此文章？')) return;
|
||
await fetch(`/api/articles/${id}`, {method: 'DELETE'});
|
||
document.getElementById(`article-${id}`).remove();
|
||
}
|
||
|
||
function copyArticle(id) {
|
||
const el = document.getElementById(`article-content-${id}`);
|
||
navigator.clipboard.writeText(el.innerText).then(() => {
|
||
// toast feedback
|
||
});
|
||
}
|
||
|
||
function downloadArticle(id) {
|
||
const el = document.getElementById(`article-content-${id}`);
|
||
const blob = new Blob([el.innerText], {type: 'text/plain;charset=utf-8'});
|
||
const a = document.createElement('a');
|
||
a.href = URL.createObjectURL(blob);
|
||
a.download = `article_${id}.txt`;
|
||
a.click();
|
||
}
|
||
|
||
function escapeHtml(text) {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|