Fix topic preview: add missing edit/save methods, fix scrollbar, strip tags from preview body

This commit is contained in:
Yuzhiran Dev
2026-05-18 19:40:26 +08:00
parent a09e7e6671
commit 33766a396d
+27 -3
View File
@@ -159,8 +159,8 @@
</div> </div>
</div> </div>
<div style="max-width: 1000px; margin: 0 auto; width: 100%; display: flex; flex-direction: column;"> <div style="max-width: 1000px; margin: 0 auto; width: 100%; display: flex; flex-direction: column;">
<div v-if="!editing" class="preview-body" style="flex:1; min-height:500px; border:1px solid #ebeef5; border-radius:8px; background:#fff; padding:20px; overflow:auto; width:100%; line-height:1.8;" v-html="currentPreviewBody"></div> <div v-if="!editing" class="preview-body" style="flex:1; min-height:500px; max-height:calc(100vh - 310px); border:1px solid #ebeef5; border-radius:8px; background:#fff; padding:20px; overflow-y:auto; width:100%; line-height:1.8;" v-html="currentPreviewBody"></div>
<div v-else ref="editor" contenteditable="true" style="flex:1; min-height:500px; border:1px solid #409eff; border-radius:8px; background:#fff; padding:20px; overflow:auto; width:100%; line-height:1.8; outline:none; box-shadow:0 0 0 2px rgba(64,158,255,0.2);" @input="editContent = $event.target.innerHTML"></div> <div v-else ref="editor" contenteditable="true" style="flex:1; min-height:500px; max-height:calc(100vh - 310px); border:1px solid #409eff; border-radius:8px; background:#fff; padding:20px; overflow-y:auto; width:100%; line-height:1.8; outline:none; box-shadow:0 0 0 2px rgba(64,158,255,0.2);" @input="editContent = $event.target.innerHTML"></div>
</div> </div>
</div> </div>
<template #footer> <template #footer>
@@ -196,6 +196,7 @@ const TopicsApp = {
publishDialogVisible: false, publishTopic: null, publishDialogVisible: false, publishTopic: null,
publishPlatforms: { zhihu: true, wechat: true, xiaohongshu: true }, publishPlatforms: { zhihu: true, wechat: true, xiaohongshu: true },
publishing: false, publishing: false,
savingContent: false,
currentPage: 1, pageSize: 20 currentPage: 1, pageSize: 20
} }
}, },
@@ -240,7 +241,7 @@ const TopicsApp = {
const doc = parser.parseFromString(html, 'text/html'); const doc = parser.parseFromString(html, 'text/html');
const body = doc.body; const body = doc.body;
if (!body) return html; if (!body) return html;
body.querySelectorAll('script, nav, .header, footer, .interaction').forEach(el => el.remove()); body.querySelectorAll('script, nav, .header, .tags, footer, .interaction').forEach(el => el.remove());
return body.innerHTML; return body.innerHTML;
} catch (e) { console.error('解析 HTML 失败:', e); return html; } } catch (e) { console.error('解析 HTML 失败:', e); return html; }
}, },
@@ -392,6 +393,29 @@ const TopicsApp = {
await this.fetchTodayCount(); await this.fetchTodayCount();
} catch (e) { if (e !== 'cancel') this.$message.error('删除失败'); } } catch (e) { if (e !== 'cancel') this.$message.error('删除失败'); }
}, },
startEdit() {
this.editContent = this.currentPreviewBody;
this.editing = true;
this.$nextTick(() => { if (this.$refs.editor) this.$refs.editor.innerHTML = this.editContent; });
},
cancelEdit() {
this.editing = false;
this.editContent = '';
},
async saveContent() {
if (!this.previewTopic || !this.editContent) { this.$message.warning('没有内容可保存'); return; }
this.savingContent = true;
try {
await this.api(`/api/articles/${this.previewTopic.id}/content`, {
method: 'PUT',
body: JSON.stringify({ platform: this.previewPlatform, html_content: this.editContent })
});
this.$message.success('保存成功');
this.platformContents[this.previewPlatform] = this.editContent;
this.editing = false;
} catch (e) { this.$message.error('保存失败: ' + e.message); }
finally { this.savingContent = false; }
},
handleLogout() { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; }, handleLogout() { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; },
redirectToPage(page) { window.location.href = page.startsWith('/') ? page : '/' + page; }, redirectToPage(page) { window.location.href = page.startsWith('/') ? page : '/' + page; },
getStatusLabel(status) { return { 'pending': '待处理', 'review': '待审查', 'ready': '待发布', 'published': '已发布' }[status] || status; }, getStatusLabel(status) { return { 'pending': '待处理', 'review': '待审查', 'ready': '待发布', 'published': '已发布' }[status] || status; },