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

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

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