amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2025-02-02 11:17:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

style: adjust layout

Browse Source
This commit is contained in:
dribble-njr 2025-01-09 19:00:57 +08:00
parent c166abb115
commit eb64576ab6
2 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/CodemirrorEditor/EditorHeader/index.vue
View File

@ -8,7 +8,7 @@ import {
} from '@/config'
import { useStore } from '@/stores'
import { addPrefix, processClipboardContent } from '@/utils'
import { ChevronDownIcon, PanelRightClose, PanelRightOpen } from 'lucide-vue-next'
import { ChevronDownIcon, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide-vue-next'
const emit = defineEmits([`addFormat`, `formatContent`, `startCopy`, `endCopy`])
@ -47,7 +47,7 @@ const formatItems = [
const store = useStore()
const { isDark, isCiteStatus, isCountStatus, output, primaryColor } = storeToRefs(store)
const { isDark, isCiteStatus, isCountStatus, output, primaryColor, isOpenPostSlider } = storeToRefs(store)
const { toggleDark, editorRefresh, citeStatusChanged, countStatusChanged } = store
@ -141,6 +141,20 @@ function copy() {
</div>
<div class="space-x-2 flex">
<TooltipProvider :delay-duration="200">
<Tooltip>
<TooltipTrigger as-child>
<Button variant="outline" @click="isOpenPostSlider = !isOpenPostSlider">
<PanelLeftOpen v-show="!isOpenPostSlider" class="size-4" />
<PanelLeftClose v-show="isOpenPostSlider" class="size-4" />
</Button>
</TooltipTrigger>
<TooltipContent side="left">
{{ isOpenPostSlider ? "关闭" : "展开" }}
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div class="space-x-1 bg-background text-background-foreground mx-2 flex items-center border rounded-md">
<Button variant="ghost" class="shadow-none" @click="copy">
复制

23
src/views/CodemirrorEditor.vue
View File

@ -9,7 +9,6 @@ import {
} from '@/utils'
import fileApi from '@/utils/file'
import CodeMirror from 'codemirror'
import { PanelLeftClose, PanelLeftOpen } from 'lucide-vue-next'
const store = useStore()
const displayStore = useDisplayStore()
@ -369,23 +368,8 @@ onMounted(() => {
@start-copy="startCopy"
@end-copy="endCopy"
/>
<main class="container-main flex-1">
<div class="container-main-section h-full flex">
<div class="flex flex-col border-r p-1">
<TooltipProvider :delay-duration="200">
<Tooltip>
<TooltipTrigger as-child>
<Button size="icon" variant="ghost" @click="store.isOpenPostSlider = !store.isOpenPostSlider">
<PanelLeftOpen v-show="!store.isOpenPostSlider" class="size-4" />
<PanelLeftClose v-show="store.isOpenPostSlider" class="size-4" />
</Button>
</TooltipTrigger>
<TooltipContent side="right">
{{ store.isOpenPostSlider ? "关闭" : "展开" }}
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<main class="container-main flex flex-1 flex-col">
<div class="container-main-section relative flex flex-1 overflow-hidden">
<PostSlider />
<div
ref="codeMirrorWrapper"
@ -450,7 +434,7 @@ onMounted(() => {
<CssEditor class="order-2 flex-1" />
<RightSlider class="order-2" />
</div>
<footer class="flex flex-1 justify-end pr-5 text-[12px]">
<footer class="h-[24px] flex items-center justify-end pr-5 text-[12px]">
字数 {{ readingTime?.words }}， 阅读大约需 {{ Math.ceil(readingTime?.minutes ?? 0) }} 分钟
</footer>
@ -493,6 +477,7 @@ onMounted(() => {
.container-main {
overflow: hidden;
padding: 0 20px;
}
#output-wrapper {