From eb64576ab6a46f4d082e3de7f184da911dfce85d Mon Sep 17 00:00:00 2001
From: dribble-njr <wzw15292257101@163.com>
Date: Thu, 9 Jan 2025 19:00:57 +0800
Subject: [PATCH] style: adjust layout

---
 .../CodemirrorEditor/EditorHeader/index.vue   | 18 +++++++++++++--
 src/views/CodemirrorEditor.vue                | 23 ++++---------------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/components/CodemirrorEditor/EditorHeader/index.vue b/src/components/CodemirrorEditor/EditorHeader/index.vue
index b1c2a98..d707f16 100644
--- a/src/components/CodemirrorEditor/EditorHeader/index.vue
+++ b/src/components/CodemirrorEditor/EditorHeader/index.vue
@@ -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">
           复制
diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue
index 79d8a2a..dbac9e8 100644
--- a/src/views/CodemirrorEditor.vue
+++ b/src/views/CodemirrorEditor.vue
@@ -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 {