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

v2.0: 添加分类系统和标签系统，支持多类别多标签

Browse Source
This commit is contained in:
hubian
2026-05-23 00:51:42 +08:00
parent d3dd11ca8b
commit 87286986ea
4 changed files with 770 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
templates/topic.html
View File

@@ -60,6 +60,20 @@
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* 分类和标签样式 */
.badge-cat { background: rgba(210,153,34,0.15); color: var(--warning); font-size: 0.78rem; }
.badge-tag { background: rgba(63,185,80,0.15); color: var(--success); font-size: 0.78rem; }
.info-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.info-bar .edit-btn { cursor: pointer; color: var(--text-muted); font-size: 0.8rem; }
.info-bar .edit-btn:hover { color: var(--accent); }
.select-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-option { padding: 4px 12px; border-radius: 16px; border: 1px solid var(--border); cursor: pointer; font-size: 0.85rem; transition: all 0.15s; color: var(--text-muted); }
.pill-option:hover { border-color: var(--accent); color: var(--accent); }
.pill-option.selected { background: rgba(88,166,255,0.15); border-color: var(--accent); color: var(--accent); }
.pill-option.selected-tag { background: rgba(63,185,80,0.15); border-color: var(--success); color: var(--success); }
.tag-input-group { display: flex; gap: 6px; }
.tag-input-group input { flex: 1; }
</style>
</head>
<body>
@@ -70,6 +84,27 @@
</div>
</nav>
<!-- 分类/标签信息条 -->
<div class="info-bar">
<span class="text-muted small"><i class="bi bi-folder2 me-1"></i>分类：</span>
{% if topic.categories %}
{% for c in topic.categories %}
<span class="badge badge-cat">{{c.name}}</span>
{% endfor %}
{% else %}
<span class="text-muted small">未分类</span>
{% endif %}
<span class="text-muted small ms-2"><i class="bi bi-tags me-1"></i>标签：</span>
{% if topic.tags %}
{% for tg in topic.tags %}
<span class="badge badge-tag">{{tg.name}}</span>
{% endfor %}
{% else %}
<span class="text-muted small">无标签</span>
{% endif %}
<span class="edit-btn ms-2" onclick="showEditCatTagModal()"><i class="bi bi-pencil"></i> 编辑</span>
</div>
<div class="container-fluid px-4 py-3">
<div class="row g-3">
<!-- 左栏：素材 + Prompt -->
@@ -180,6 +215,38 @@
</div>
</div>
<!-- 编辑分类/标签模态框 -->
<div class="modal fade" id="catTagModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="bi bi-tags 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>
<div class="select-pills" id="editCategoryPills"></div>
<div class="form-text">点击选择所属分类</div>
</div>
<div class="mb-3">
<label class="form-label">标签</label>
<div class="select-pills mb-2" id="editTagPills"></div>
<div class="tag-input-group">
<input type="text" class="form-control form-control-sm" id="editNewTagInput" placeholder="输入新标签，回车添加">
<button class="btn btn-sm btn-outline-accent" onclick="addEditNewTag()">添加</button>
</div>
<div class="select-pills mt-1" id="editNewTagPills"></div>
</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="saveCatTag()">保存</button>
</div>
</div>
</div>
</div>
<!-- 添加文本模态框 -->
<div class="modal fade" id="textModal" tabindex="-1">
<div class="modal-dialog">
@@ -255,7 +322,99 @@
const textModal = new bootstrap.Modal(document.getElementById('textModal'));
const imageModal = new bootstrap.Modal(document.getElementById('imageModal'));
const pasteModal = new bootstrap.Modal(document.getElementById('pasteModal'));
let pastedBlob = null; // 暂存粘贴的图片
const catTagModal = new bootstrap.Modal(document.getElementById('catTagModal'));
let pastedBlob = null;
// 当前主题的分类和标签
const currentCategoryIds = [{% for c in topic.categories %}'{{c.id}}',{% endfor %}];
const currentTagIds = [{% for tg in topic.tags %}'{{tg.id}}',{% endfor %}];
// ===== 分类/标签编辑 =====
let editCategoryIds = [...currentCategoryIds];
let editTagIds = [...currentTagIds];
let editNewTagNames = [];
async function showEditCatTagModal() {
editCategoryIds = [...currentCategoryIds];
editTagIds = [...currentTagIds];
editNewTagNames = [];
document.getElementById('editNewTagInput').value = '';
document.getElementById('editNewTagPills').innerHTML = '';
// 加载分类选项
try {
const res = await fetch('/api/categories');
const cats = await res.json();
document.getElementById('editCategoryPills').innerHTML = cats.map(c =>
`<span class="pill-option ${editCategoryIds.includes(c.id) ? 'selected' : ''}" data-id="${c.id}" onclick="toggleEditCategory(this,'${c.id}')">${c.name}</span>`
).join('');
} catch(e) {}
// 加载标签选项
try {
const res = await fetch('/api/tags');
const tags = await res.json();
document.getElementById('editTagPills').innerHTML = tags.map(t =>
`<span class="pill-option ${editTagIds.includes(t.id) ? 'selected-tag' : ''}" data-id="${t.id}" onclick="toggleEditTag(this,'${t.id}')">${t.name}</span>`
).join('');
} catch(e) {}
catTagModal.show();
}
function toggleEditCategory(el, id) {
const idx = editCategoryIds.indexOf(id);
if (idx >= 0) { editCategoryIds.splice(idx, 1); el.classList.remove('selected'); }
else { editCategoryIds.push(id); el.classList.add('selected'); }
}
function toggleEditTag(el, id) {
const idx = editTagIds.indexOf(id);
if (idx >= 0) { editTagIds.splice(idx, 1); el.classList.remove('selected-tag'); }
else { editTagIds.push(id); el.classList.add('selected-tag'); }
}
function addEditNewTag() {
const input = document.getElementById('editNewTagInput');
const name = input.value.trim();
if (!name || editNewTagNames.includes(name)) return;
editNewTagNames.push(name);
input.value = '';
renderEditNewTagPills();
}
document.getElementById('editNewTagInput').addEventListener('keydown', function(e) {
if (e.key === 'Enter') { e.preventDefault(); addEditNewTag(); }
});
function renderEditNewTagPills() {
document.getElementById('editNewTagPills').innerHTML = editNewTagNames.map((n, i) =>
`<span class="pill-option selected-tag" onclick="removeEditNewTag(${i})">${n} <i class="bi bi-x"></i></span>`
).join('');
}
function removeEditNewTag(idx) {
editNewTagNames.splice(idx, 1);
renderEditNewTagPills();
}
async function saveCatTag() {
const res = await fetch(`/api/topics/${topicId}`, {
method: 'PUT',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
category_ids: editCategoryIds,
tag_ids: editTagIds,
new_tags: editNewTagNames
})
});
if (res.ok) {
catTagModal.hide();
location.reload();
} else {
const d = await res.json(); alert(d.error || '保存失败');
}
}
// ===== 粘贴截图上传 =====
document.addEventListener('paste', function(e) {
@@ -266,7 +425,6 @@
e.preventDefault();
const blob = items[i].getAsFile();
pastedBlob = blob;
// 预览
const reader = new FileReader();
reader.onload = (ev) => {
document.getElementById('pastePreview').innerHTML = `<img src="${ev.target.result}" style="max-width:100%;max-height:200px;border-radius:6px;">`;
@@ -279,7 +437,6 @@
}
});
// 粘贴区拖拽高亮
const pasteZone = document.getElementById('pasteZone');
document.addEventListener('paste', () => { pasteZone.classList.add('active'); setTimeout(() => pasteZone.classList.remove('active'), 1000); });
@@ -290,16 +447,10 @@
fd.append('file', pastedBlob, `paste_${Date.now()}.png`);
fd.append('content', document.getElementById('pasteDesc').value);
const res = await fetch(`/api/topics/${topicId}/materials`, {method: 'POST', body: fd});
if (res.ok) {
pastedBlob = null;
pasteModal.hide();
location.reload();
} else {
const d = await res.json(); alert(d.error);
}
if (res.ok) { pastedBlob = null; pasteModal.hide(); location.reload(); }
else { const d = await res.json(); alert(d.error); }
}
// 图片预览（选择文件）
document.getElementById('imageFile').addEventListener('change', function(e) {
const preview = document.getElementById('imagePreview');
if (e.target.files[0]) {
@@ -361,10 +512,7 @@
async function togglePromptHistory() {
const area = document.getElementById('promptHistoryArea');
if (area.classList.contains('show')) {
area.classList.remove('show');
return;
}
if (area.classList.contains('show')) { area.classList.remove('show'); return; }
if (!promptHistoryLoaded) {
const res = await fetch(`/api/topics/${topicId}/prompt-history`);
const history = await res.json();
@@ -384,9 +532,7 @@
area.classList.add('show');
}
function restorePrompt(text) {
document.getElementById('promptText').value = text;
}
function restorePrompt(text) { document.getElementById('promptText').value = text; }
// ===== 文章生成 =====
async function generateArticle() {
@@ -400,12 +546,10 @@
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">