refactor: 添加Markdown预览样式,优化文件展示逻辑并移除冗余代码
This commit is contained in:
parent
09577b9b65
commit
9cbed254bb
@ -131,5 +131,5 @@
|
||||
}
|
||||
|
||||
:root.dark .md-editor {
|
||||
--md-bk-color: var(--gray-0);
|
||||
--md-bk-color: transparent;
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
@import './sigma.css';
|
||||
@import './shorts.css';
|
||||
@import './dashboard.css';
|
||||
@import './markdown-preview.less';
|
||||
|
||||
:root {
|
||||
--header-height: 45px;
|
||||
|
||||
59
web/src/assets/css/markdown-preview.less
Normal file
59
web/src/assets/css/markdown-preview.less
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
:modelValue="String(resultContent)"
|
||||
:theme="theme"
|
||||
previewTheme="github"
|
||||
class="md-preview-wrapper"
|
||||
class="md-preview-wrapper flat-md-preview"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user