src/components/CodemirrorEditor/EditorHeader/index.vue

@@ -8,7 +8,7 @@ import {
 } from '@/config'
 import { useStore } from '@/stores'
 import { addPrefix, processClipboardContent } from '@/utils'
-import { ChevronDownIcon, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide-vue-next'
+import { ChevronDownIcon, 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, isOpenPostSlider } = storeToRefs(store)
+const { isDark, isCiteStatus, isCountStatus, output, primaryColor } = storeToRefs(store)
 
 const { toggleDark, editorRefresh, citeStatusChanged, countStatusChanged } = store
 
@@ -102,7 +102,7 @@ function copy() {
 </script>
 
 <template>
-  <header class="header-container h-15 flex items-center justify-between px-5">
+  <header class="header-container h-15 flex items-center justify-between border-b px-5">
     <div class="space-x-2 flex">
       <Menubar class="menubar">
         <FileDropdown />
@@ -141,20 +141,6 @@ 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">
           复制

src/components/CodemirrorEditor/PostSlider.vue

@@ -57,19 +57,13 @@ function delPost() {
 
 <template>
   <div
-    class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-gray/40"
+    class="overflow-hidden bg-gray/20 transition-width dark:bg-gray/40"
     :class="{
       'w-0': !store.isOpenPostSlider,
       'w-50': store.isOpenPostSlider,
     }"
   >
-    <nav
-      class="space-y-1 h-full overflow-auto p-2 transition-transform"
-      :class="{
-        'translate-x-100': store.isOpenPostSlider,
-        '-translate-x-full': !store.isOpenPostSlider,
-      }"
-    >
+    <nav class="space-y-1 h-full overflow-auto p-2">
       <Dialog v-model:open="isOpen">
         <DialogTrigger as-child>
           <Button variant="outline" class="w-full" size="xs">
@@ -92,7 +86,10 @@ function delPost() {
         </DialogContent>
       </Dialog>
       <a
-        v-for="(post, index) in store.posts" :key="post.title" href="#" :class="{
+        v-for="(post, index) in store.posts"
+        :key="post.title"
+        href="#"
+        :class="{
           'bg-primary text-primary-foreground shadow-lg border-2 border-primary': store.currentPostIndex === index,
           'dark:bg-primary-dark dark:text-primary-foreground-dark dark:border-primary-dark': store.currentPostIndex === index,
         }"

src/components/CodemirrorEditor/RightSlider.vue

@@ -40,18 +40,13 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
 
 <template>
   <div
-    class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-gray/40"
+    class="overflow-hidden bg-gray/20 transition-width dark:bg-gray/40"
     :class="{
       'w-0': !store.isOpenRightSlider,
       'w-100': store.isOpenRightSlider,
     }"
   >
-    <div
-      class="space-y-4 h-full overflow-auto p-4 transition-transform" :class="{
-        'translate-x-0': store.isOpenRightSlider,
-        'translate-x-full': !store.isOpenRightSlider,
-      }"
-    >
+    <div class="space-y-4 h-full overflow-auto p-4">
       <div class="space-y-2">
         <h2>主题</h2>
         <div class="grid grid-cols-3 justify-items-center gap-2">

src/views/CodemirrorEditor.vue

@@ -9,6 +9,7 @@ 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()
@@ -368,8 +369,23 @@ onMounted(() => {
       @start-copy="startCopy"
       @end-copy="endCopy"
     />
-    <main class="container-main flex flex-1 flex-col">
-      <div class="container-main-section border-radius-10 relative flex flex-1 overflow-hidden border-1">
+    <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>
         <PostSlider />
         <div
           ref="codeMirrorWrapper"
@@ -420,7 +436,7 @@ onMounted(() => {
           class="preview-wrapper flex-1 p-5"
         >
           <div id="output-wrapper" :class="{ output_night: !backLight }">
-            <div class="preview border-x-1 shadow-xl">
+            <div class="preview border shadow-xl">
               <section id="output" v-html="output" />
               <div v-if="isCoping" class="loading-mask">
                 <div class="loading-mask-box">
@@ -434,7 +450,7 @@ onMounted(() => {
         <CssEditor class="order-2 flex-1" />
         <RightSlider class="order-2" />
       </div>
-      <footer class="h-[30px] flex items-center justify-end text-[12px]">
+      <footer class="flex flex-1 justify-end pr-5 text-[12px]">
         字数 {{ readingTime?.words }}， 阅读大约需 {{ Math.ceil(readingTime?.minutes ?? 0) }} 分钟
       </footer>
 
@@ -477,7 +493,6 @@ onMounted(() => {
 
 .container-main {
   overflow: hidden;
-  padding: 0 20px;
 }
 
 #output-wrapper {