Fix preview dialog scroll & preserve HTML structure on edit save

This commit is contained in:
Yuzhiran Dev
2026-05-20 15:18:48 +08:00
parent 0a8fbda4fd
commit 63f074e4df
+14 -3
View File
@@ -9,7 +9,7 @@
<style>
.selected-count { color: var(--color-text-secondary); font-size: var(--font-size-body); margin-left: auto; }
.preview-dialog-custom .el-dialog__body { overflow-y: auto; max-height: calc(90vh - 120px); padding: 16px 20px; }
.preview-dialog-custom .preview-body { max-height: none !important; min-height: 300px; overflow: visible; }
.preview-dialog-custom .preview-body { max-height: calc(90vh - 200px); min-height: 300px; overflow-y: auto; }
.preview-dialog-custom .preview-body img { max-width: 100%; }
.topic-card-list { display: none; }
@media (max-width: 768px) {
@@ -426,12 +426,23 @@ const TopicsApp = {
if (!this.previewTopic || !this.editContent) { this.$message.warning('没有内容可保存'); return; }
this.savingContent = true;
try {
const original = this.platformContents[this.previewPlatform] || '';
let headHtml = '';
if (original) {
try {
const parser = new DOMParser();
const doc = parser.parseFromString(original, 'text/html');
const head = doc.querySelector('head');
if (head) headHtml = head.innerHTML;
} catch (e) {}
}
const fullHtml = '<!DOCTYPE html><html><head>' + headHtml + '</head><body>' + this.editContent + '</body></html>';
await this.api(`/api/articles/${this.previewTopic.id}/content`, {
method: 'PUT',
body: JSON.stringify({ platform: this.previewPlatform, html_content: this.editContent })
body: JSON.stringify({ platform: this.previewPlatform, html_content: fullHtml })
});
this.$message.success('保存成功');
this.platformContents[this.previewPlatform] = this.editContent;
this.platformContents[this.previewPlatform] = fullHtml;
this.editing = false;
} catch (e) { this.$message.error('保存失败: ' + e.message); }
finally { this.savingContent = false; }