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' } from '@/config'
import { useStore } from '@/stores' import { useStore } from '@/stores'
import { addPrefix, processClipboardContent } from '@/utils' 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`]) const emit = defineEmits([`addFormat`, `formatContent`, `startCopy`, `endCopy`])
@ -47,7 +47,7 @@ const formatItems = [
const store = useStore() 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 const { toggleDark, editorRefresh, citeStatusChanged, countStatusChanged } = store
@ -141,6 +141,20 @@ function copy() {
</div> </div>
<div class="space-x-2 flex"> <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"> <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"> <Button variant="ghost" class="shadow-none" @click="copy">
复制 复制

23
src/views/CodemirrorEditor.vue
View File

@ -9,7 +9,6 @@ import {
} from '@/utils' } from '@/utils'
import fileApi from '@/utils/file' import fileApi from '@/utils/file'
import CodeMirror from 'codemirror' import CodeMirror from 'codemirror'
import { PanelLeftClose, PanelLeftOpen } from 'lucide-vue-next'
const store = useStore() const store = useStore()
const displayStore = useDisplayStore() const displayStore = useDisplayStore()
@ -369,23 +368,8 @@ onMounted(() => {
@start-copy="startCopy" @start-copy="startCopy"
@end-copy="endCopy" @end-copy="endCopy"
/> />
<main class="container-main flex-1"> <main class="container-main flex flex-1 flex-col">
<div class="container-main-section h-full flex"> <div class="container-main-section relative flex flex-1 overflow-hidden">
<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>
<PostSlider /> <PostSlider />
<div <div
ref="codeMirrorWrapper" ref="codeMirrorWrapper"
@ -450,7 +434,7 @@ onMounted(() => {
<CssEditor class="order-2 flex-1" /> <CssEditor class="order-2 flex-1" />
<RightSlider class="order-2" /> <RightSlider class="order-2" />
</div> </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) }} 分钟 字数 {{ readingTime?.words }}， 阅读大约需 {{ Math.ceil(readingTime?.minutes ?? 0) }} 分钟
</footer> </footer>
@ -493,6 +477,7 @@ onMounted(() => {
.container-main { .container-main {
overflow: hidden; overflow: hidden;
padding: 0 20px;
} }
#output-wrapper { #output-wrapper {