refactor: 添加Markdown预览样式,优化文件展示逻辑并移除冗余代码

This commit is contained in:
Wenjie Zhang 2026-03-02 21:01:28 +08:00
parent 09577b9b65
commit 9cbed254bb
8 changed files with 67 additions and 67 deletions

View File

@ -131,5 +131,5 @@
} }
:root.dark .md-editor { :root.dark .md-editor {
--md-bk-color: var(--gray-0); --md-bk-color: transparent;
} }

View File

@ -3,6 +3,7 @@
@import './sigma.css'; @import './sigma.css';
@import './shorts.css'; @import './shorts.css';
@import './dashboard.css'; @import './dashboard.css';
@import './markdown-preview.less';
:root { :root {
--header-height: 45px; --header-height: 45px;

View File

@ -0,0 +1,59 @@
// MdPreview 统一样式覆盖 - 扁平化风格
.flat-md-preview {
.md-editor {
background: transparent;
}
.md-editor-preview-wrapper {
padding: 0;
}
.md-editor-preview {
font-size: 14px;
line-height: 1.75;
color: var(--gray-1000);
h1 {
font-size: 1.2rem;
margin: 16px 0 12px;
font-weight: 600;
}
h2 {
font-size: 1.15rem;
margin: 16px 0 12px;
font-weight: 600;
}
h3 {
font-size: 1.1rem;
margin: 14px 0 10px;
font-weight: 600;
}
h4 {
font-size: 1rem;
margin: 14px 0 10px;
font-weight: 600;
}
h5 {
font-size: 1rem;
margin: 12px 0 8px;
font-weight: 600;
}
h6 {
font-size: 1rem;
margin: 12px 0 8px;
font-weight: 600;
}
}
}
// 背景透明场景
.flat-md-preview--transparent {
.md-editor {
background: transparent;
}
}

View File

@ -114,7 +114,7 @@
</div> </div>
</div> </div>
</template> </template>
<div class="file-content"> <div class="file-content flat-md-preview">
<template v-if="isMarkdown"> <template v-if="isMarkdown">
<MdPreview <MdPreview
:modelValue="formatContent(currentFile?.content)" :modelValue="formatContent(currentFile?.content)"
@ -823,14 +823,6 @@ const stopResize = () => {
color: var(--gray-1000); color: var(--gray-1000);
background: transparent; background: transparent;
} }
:deep(.md-editor-preview-wrapper) {
padding: 0;
}
:deep(.md-editor-preview) {
font-size: 14px;
}
} }
.modal-header-title { .modal-header-title {

View File

@ -65,7 +65,7 @@
</div> </div>
<div v-else-if="file && hasContent" class="file-detail-content"> <div v-else-if="file && hasContent" class="file-detail-content">
<!-- Markdown 模式 --> <!-- Markdown 模式 -->
<div v-if="viewMode === 'markdown'" class="content-panel"> <div v-if="viewMode === 'markdown'" class="content-panel flat-md-preview">
<MdPreview <MdPreview
v-if="mergedContent" v-if="mergedContent"
:modelValue="mergedContent" :modelValue="mergedContent"
@ -315,7 +315,6 @@ const handleDownloadMarkdown = () => {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 16px 0; padding: 16px 0;
background: var(--gray-0);
min-height: 0; min-height: 0;
} }
@ -492,52 +491,4 @@ const handleDownloadMarkdown = () => {
margin-right: 8px; margin-right: 8px;
} }
} }
/* MdPreview 覆盖样式 - 非 scoped */
.content-panel {
.md-editor-preview-wrapper {
padding: 0;
}
.md-editor-preview {
font-size: 14px;
line-height: 1.75;
color: var(--gray-1000);
h1 {
font-size: 1.2rem;
margin: 16px 0 12px;
font-weight: 600;
}
h2 {
font-size: 1.2rem;
margin: 16px 0 12px;
font-weight: 600;
}
h3 {
font-size: 1.1rem;
margin: 14px 0 10px;
font-weight: 600;
}
h4 {
font-size: 1rem;
margin: 14px 0 10px;
font-weight: 600;
}
h5 {
font-size: 1rem;
margin: 12px 0 8px;
font-weight: 600;
}
h6 {
font-size: 1rem;
margin: 12px 0 8px;
font-weight: 600;
}
}
}
</style> </style>

View File

@ -18,7 +18,7 @@
:modelValue="String(resultContent)" :modelValue="String(resultContent)"
:theme="theme" :theme="theme"
previewTheme="github" previewTheme="github"
class="md-preview-wrapper" class="md-preview-wrapper flat-md-preview"
/> />
</div> </div>
</template> </template>

View File

@ -20,7 +20,7 @@
:modelValue="chunk.content" :modelValue="chunk.content"
:theme="theme" :theme="theme"
previewTheme="github" previewTheme="github"
class="chunk-markdown-content" class="chunk-markdown-content flat-md-preview"
/> />
<div v-else class="empty-text">暂无内容</div> <div v-else class="empty-text">暂无内容</div>
</a-modal> </a-modal>
@ -85,10 +85,6 @@ const modalTitle = computed(() => {
background: transparent; background: transparent;
} }
.chunk-markdown-content :deep(.md-editor-preview-wrapper) {
padding: 0;
}
.empty-text { .empty-text {
color: var(--gray-500); color: var(--gray-500);
font-size: 13px; font-size: 13px;

View File

@ -147,6 +147,7 @@ const openChunkDetail = (chunk, index) => {
<style scoped lang="less"> <style scoped lang="less">
.kb-result-grouped-list { .kb-result-grouped-list {
padding: 4px;
.result-summary { .result-summary {
padding: 10px 12px; padding: 10px 12px;
background: var(--gray-25); background: var(--gray-25);
@ -231,7 +232,7 @@ const openChunkDetail = (chunk, index) => {
} }
&.high-relevance { &.high-relevance {
background: var(--main-5); background: var(--gray-5);
} }
&:hover { &:hover {