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 {
--md-bk-color: var(--gray-0);
--md-bk-color: transparent;
}

View File

@ -3,6 +3,7 @@
@import './sigma.css';
@import './shorts.css';
@import './dashboard.css';
@import './markdown-preview.less';
:root {
--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>
</template>
<div class="file-content">
<div class="file-content flat-md-preview">
<template v-if="isMarkdown">
<MdPreview
:modelValue="formatContent(currentFile?.content)"
@ -823,14 +823,6 @@ const stopResize = () => {
color: var(--gray-1000);
background: transparent;
}
:deep(.md-editor-preview-wrapper) {
padding: 0;
}
:deep(.md-editor-preview) {
font-size: 14px;
}
}
.modal-header-title {

View File

@ -65,7 +65,7 @@
</div>
<div v-else-if="file && hasContent" class="file-detail-content">
<!-- Markdown 模式 -->
<div v-if="viewMode === 'markdown'" class="content-panel">
<div v-if="viewMode === 'markdown'" class="content-panel flat-md-preview">
<MdPreview
v-if="mergedContent"
:modelValue="mergedContent"
@ -315,7 +315,6 @@ const handleDownloadMarkdown = () => {
flex: 1;
overflow-y: auto;
padding: 16px 0;
background: var(--gray-0);
min-height: 0;
}
@ -492,52 +491,4 @@ const handleDownloadMarkdown = () => {
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>

View File

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

View File

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

View File

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