feat: support title navigation collapse expansion

doocs · Mar 8, 2025 · 7e21aae · 7e21aae
1 parent f459881
commit 7e21aae
Showing 1 changed file with 24 additions and 7 deletions.
diff --git a/src/views/CodemirrorEditor.vue b/src/views/CodemirrorEditor.vue
@@ -9,6 +9,7 @@ import {
 } from '@/utils'
 import fileApi from '@/utils/file'
 import CodeMirror from 'codemirror'
+import { Minimize2, MoveDiagonal } from 'lucide-vue-next'
 
 const store = useStore()
 const displayStore = useDisplayStore()
@@ -359,6 +360,8 @@ onMounted(() => {
   onEditorRefresh()
   mdLocalToRemote()
 })
+
+const isOpenHeadingSlider = ref(false)
 </script>
 
 <template>
@@ -438,13 +441,27 @@ onMounted(() => {
 
             <BackTop target="preview" :right="40" :bottom="40" />
           </div>
-          <ul class="bg-background absolute left-0 top-0 max-h-100 w-60 overflow-auto border rounded-2 p-2 text-sm shadow">
-            <li v-for="(item, index) in store.titleList" :key="index" class="line-clamp-1 py-1 leading-6 hover:bg-gray-300 dark:hover:bg-gray-600" :style="{paddingLeft: item.level - 0.5 + 'em'}">
-              <a :href="item.url">
-                {{ item.title }}
-              </a>
-            </li>
-          </ul>
+          <div
+            class="bg-background absolute left-0 top-0 border rounded-2 p-2 text-sm shadow"
+          >
+            <Button variant="outline" size="icon" @click="isOpenHeadingSlider = !isOpenHeadingSlider">
+              <Minimize2 v-show="isOpenHeadingSlider" class="size-4" />
+              <MoveDiagonal v-show="!isOpenHeadingSlider" class="size-4" />
+            </Button>
+            <ul
+              class="overflow-auto transition-all"
+              :class="{
+                'max-h-0 w-0': !isOpenHeadingSlider,
+                'max-h-100 w-60 mt-2': isOpenHeadingSlider,
+              }"
+            >
+              <li v-for="(item, index) in store.titleList" :key="index" class="line-clamp-1 py-1 leading-6 hover:bg-gray-300 dark:hover:bg-gray-600" :style="{paddingLeft: item.level - 0.5 + 'em'}">
+                <a :href="item.url">
+                  {{ item.title }}
+                </a>
+              </li>
+            </ul>
+          </div>
         </div>
         <CssEditor class="order-2 flex-1" />
         <RightSlider class="order-2" />