init

frontweb/src/composables/filmCreate/useNavigation.js

@@ -0,0 +1,54 @@
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+const NAV_AUTO_COLLAPSE_WIDTH = 960
+
+/**
+ * 左侧导航折叠/展开逻辑
+ */
+export function useNavigation() {
+  const navCollapsed = ref(false)
+  const storyboardMenuExpanded = ref(false)
+  let _navAutoCollapsed = false
+
+  function _syncNavCollapse() {
+    const narrow = window.innerWidth < NAV_AUTO_COLLAPSE_WIDTH
+    if (narrow && !_navAutoCollapsed && !navCollapsed.value) {
+      _navAutoCollapsed = true
+      navCollapsed.value = true
+    } else if (!narrow && _navAutoCollapsed) {
+      _navAutoCollapsed = false
+      navCollapsed.value = false
+    }
+  }
+
+  function toggleNav() {
+    navCollapsed.value = !navCollapsed.value
+    _navAutoCollapsed = false
+  }
+
+  function scrollToTop() {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  function scrollToAnchor(id) {
+    const el = document.getElementById(id)
+    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+
+  onMounted(() => {
+    _syncNavCollapse()
+    window.addEventListener('resize', _syncNavCollapse)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', _syncNavCollapse)
+  })
+
+  return {
+    navCollapsed,
+    storyboardMenuExpanded,
+    toggleNav,
+    scrollToTop,
+    scrollToAnchor,
+  }
+}