refactor: 添加Markdown预览样式,优化文件展示逻辑并移除冗余代码
This commit is contained in:
parent
09577b9b65
commit
9cbed254bb
@ -131,5 +131,5 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:root.dark .md-editor {
|
:root.dark .md-editor {
|
||||||
--md-bk-color: var(--gray-0);
|
--md-bk-color: transparent;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
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>
|
||||||
</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 {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user