ikmkj/biji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 优化笔记预览渲染性能与UI样式

Browse Source
This commit is contained in:
ikmkj
2026-03-03 16:59:50 +08:00
parent a99696ff7a
commit eb92340786
2 changed files with 58 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
biji-qianduan/src/components/HomePage.vue
View File

@@ -552,18 +552,29 @@ const handleResize = () => {
} }
}; };
// 使用防抖优化 Vditor 渲染
let renderTimeout = null;
let lastRenderedId = null;
watch([selectedFile, showEditor], ([newFile, newShowEditor]) => { watch([selectedFile, showEditor], ([newFile, newShowEditor]) => {
if (newFile && !newShowEditor) { if (newFile && !newShowEditor) {
nextTick(() => { // 如果同一个文件已经渲染过，跳过
const previewElement = document.querySelector('.markdown-preview'); if (lastRenderedId === newFile.id) return;
if (previewElement) {
const contentToRender = (newFile.isPrivate === 1 && !userStore.isLoggedIn) ? privateNoteContent : newFile.content; clearTimeout(renderTimeout);
Vditor.preview(previewElement, contentToRender || '', { renderTimeout = setTimeout(() => {
mode: 'light', nextTick(() => {
hljs: { enable: true, style: 'github' } const previewElement = document.querySelector('.markdown-preview');
}); if (previewElement) {
} const contentToRender = (newFile.isPrivate === 1 && !userStore.isLoggedIn) ? privateNoteContent : newFile.content;
}); Vditor.preview(previewElement, contentToRender || '', {
mode: 'light',
hljs: { enable: true, style: 'github' }
});
lastRenderedId = newFile.id;
}
});
}, 50); // 50ms 防抖
} }
}, { deep: true }); }, { deep: true });

52
biji-qianduan/src/components/home/NotePreview.vue
View File

@@ -82,26 +82,28 @@ const handleExport = (format) => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1.5rem; margin-bottom: 1rem;
padding: 1rem; padding: 0.75rem 1rem;
background-color: rgba(255, 255, 255, 0.8); background-color: #ffffff;
backdrop-filter: blur(10px);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--box-shadow-light); border: 1px solid #e4e7ed;
gap: 1rem; gap: 1rem;
flex-shrink: 0;
} }
.dark-theme .preview-header { .dark-theme .preview-header {
background-color: rgba(30, 30, 47, 0.8); background-color: #1e1e2f;
border-color: #2c2c3d;
} }
.preview-title { .preview-title {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 8px;
flex-grow: 1; flex-grow: 1;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
font-size: 1.1rem;
} }
.preview-title span { .preview-title span {
@@ -110,9 +112,9 @@ const handleExport = (format) => {
} }
.preview-title .edit-icon { .preview-title .edit-icon {
visibility: visible; opacity: 0.5;
opacity: 0.6;
cursor: pointer; cursor: pointer;
font-size: 16px;
} }
.preview-title .edit-icon:hover { .preview-title .edit-icon:hover {
opacity: 1; opacity: 1;
@@ -120,21 +122,41 @@ const handleExport = (format) => {
.actions { .actions {
display: flex; display: flex;
gap: 10px; gap: 8px;
align-items: center; align-items: center;
flex-shrink: 0;
} }
.markdown-preview { .markdown-preview {
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
padding: 2rem; padding: 1.5rem;
background-color: rgba(255, 255, 255, 0.8); background-color: #ffffff;
backdrop-filter: blur(10px);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--box-shadow-light); border: 1px solid #e4e7ed;
will-change: scroll-position;
} }
.dark-theme .markdown-preview { .dark-theme .markdown-preview {
background-color: rgba(30, 30, 47, 0.8); background-color: #1e1e2f;
border-color: #2c2c3d;
}
/* 优化滚动性能 */
.markdown-preview::-webkit-scrollbar {
width: 8px;
}
.markdown-preview::-webkit-scrollbar-track {
background: transparent;
}
.markdown-preview::-webkit-scrollbar-thumb {
background-color: #c0c4cc;
border-radius: 4px;
}
.markdown-preview::-webkit-scrollbar-thumb:hover {
background-color: #909399;
} }
</style> </style>