feat: add option to pin Floating TOC (#1122)

Author: YangFong

apps/web/src/components/editor/FloatingToc.vue

@@ -1,8 +1,11 @@
 <script setup lang='ts'>
 import { List } from 'lucide-vue-next'
 import { useRenderStore } from '@/stores/render'
+import { useUIStore } from '@/stores/ui'
 
 const renderStore = useRenderStore()
+const uiStore = useUIStore()
+const { isPinFloatingToc } = storeToRefs(uiStore)
 
 const isOpenHeadingSlider = ref(false)
 </script>
@@ -17,8 +20,8 @@ const isOpenHeadingSlider = ref(false)
     <ul
       class="overflow-auto transition-all"
       :class="{
-        'max-h-0 w-0': !isOpenHeadingSlider,
-        'max-h-100 w-60 mt-2': isOpenHeadingSlider,
+        'max-h-0 w-0': !isOpenHeadingSlider && !isPinFloatingToc,
+        'max-h-100 w-60 mt-2': isOpenHeadingSlider || isPinFloatingToc,
       }"
     >
       <li

apps/web/src/components/editor/ThemeCustomizer.vue

@@ -100,6 +100,27 @@ function customStyle() {
         </Button>
       </div>
     </div>
+    <div class="space-y-2">
+      <h2 class="text-sm font-medium">
+        浮动目录
+      </h2>
+      <div class="grid grid-cols-2 justify-items-center gap-2">
+        <Button
+          class="w-full" variant="outline" :class="{
+            'border-black dark:border-white border-2': uiStore.isPinFloatingToc,
+          }" @click="!uiStore.isPinFloatingToc && uiStore.togglePinFloatingToc()"
+        >
+          常驻显示
+        </Button>
+        <Button
+          class="w-full" variant="outline" :class="{
+            'border-black dark:border-white border-2': !uiStore.isPinFloatingToc,
+          }" @click="uiStore.isPinFloatingToc && uiStore.togglePinFloatingToc()"
+        >
+          移入触发
+        </Button>
+      </div>
+    </div>
     <div class="space-y-2">
       <h2 class="text-sm font-medium">
         模式

apps/web/src/stores/ui.ts

@@ -30,6 +30,10 @@ export const useUIStore = defineStore(`ui`, () => {
   // 是否为移动端
   const isMobile = store.reactive(`isMobile`, false)
 
+  // 是否固定显示浮动目录
+  const isPinFloatingToc = store.reactive(addPrefix(`isPinFloatingToc`), false)
+  const togglePinFloatingToc = useToggle(isPinFloatingToc)
+
   // ==================== 对话框状态 ====================
   // 是否展示 CSS 编辑器
   const isShowCssEditor = store.reactive(`isShowCssEditor`, false)
@@ -86,6 +90,7 @@ export const useUIStore = defineStore(`ui`, () => {
     isOpenRightSlider,
     isOpenPostSlider,
     isMobile,
+    isPinFloatingToc,
 
     // ==================== 对话框状态 ====================
     isShowCssEditor,
@@ -106,5 +111,6 @@ export const useUIStore = defineStore(`ui`, () => {
     toggleDark,
     toggleEditOnLeft,
     toggleAIToolbox,
+    togglePinFloatingToc,
   }
 })