style: refine border and footer layout

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
 
@@ -102,7 +102,7 @@ function copy() {
 </script>
 
 <template>
-  <header class="header-container h-15 flex items-center justify-between border-b px-5">
+  <header class="header-container h-15 flex items-center justify-between px-5">
     <div class="space-x-2 flex">
       <Menubar class="menubar">
         <FileDropdown />
@@ -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">
           复制

src/components/CodemirrorEditor/PostSlider.vue

@@ -57,13 +57,19 @@ function delPost() {
 
 <template>
   <div
-    class="overflow-hidden bg-gray/20 transition-width dark:bg-gray/40"
+    class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-gray/40"
     :class="{
       'w-0': !store.isOpenPostSlider,
       'w-50': store.isOpenPostSlider,
     }"
   >
-    <nav class="space-y-1 h-full overflow-auto p-2">
+    <nav
+      class="space-y-1 h-full overflow-auto p-2 transition-transform"
+      :class="{
+        'translate-x-100': store.isOpenPostSlider,
+        '-translate-x-full': !store.isOpenPostSlider,
+      }"
+    >
       <Dialog v-model:open="isOpen">
         <DialogTrigger as-child>
           <Button variant="outline" class="w-full" size="xs">
@@ -86,10 +92,7 @@ function delPost() {
         </DialogContent>
       </Dialog>
       <a
-        v-for="(post, index) in store.posts"
+        v-for="(post, index) in store.posts" :key="post.title" href="#" :class="{
-        :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,13 +40,18 @@ const formatOptions = ref<Format[]>([`rgb`, `hex`, `hsl`, `hsv`])
 
 <template>
   <div
-    class="overflow-hidden bg-gray/20 transition-width dark:bg-gray/40"
+    class="overflow-hidden bg-gray/20 transition-width duration-300 dark:bg-gray/40"
     :class="{
       'w-0': !store.isOpenRightSlider,
       'w-100': store.isOpenRightSlider,
     }"
   >
-    <div class="space-y-4 h-full overflow-auto p-4">
+    <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-2">
         <h2>主题</h2>
         <div class="grid grid-cols-3 justify-items-center gap-2">

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