前端代码

web/src/hooks/charts.js

@@ -0,0 +1,18 @@
+// 本组件参考 arco-pro 的实现
+// https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/hooks/chart-option.ts
+
+import { computed } from 'vue'
+import { useThemeStore } from '@/pinia'
+
+export default function useChartOption(sourceOption) {
+  const themeStore = useThemeStore()
+  const isDark = computed(() => {
+    return themeStore.isDark
+  })
+  const chartOption = computed(() => {
+    return sourceOption(isDark.value)
+  })
+  return {
+    chartOption
+  }
+}

web/src/hooks/responsive.js

@@ -0,0 +1,38 @@
+// 本组件参考 arco-pro 的实现
+// https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/hooks/responsive.ts
+
+import { onMounted, onBeforeMount, onBeforeUnmount } from 'vue'
+import { useDebounceFn } from '@vueuse/core'
+import { useAppStore } from '@/pinia'
+import { addEventListen, removeEventListen } from '@/utils/event'
+
+// 三档断点：
+// - < 640：移动端，收起所有内联菜单，改用左侧抽屉
+// - 640 ~ 1024：平板，强制「通栏侧边」收缩布局（不改用户所选布局）
+// - >= 1024：桌面，使用用户所选布局
+const MOBILE_WIDTH = 640
+const PAD_WIDTH = 1024
+
+const zoneOf = (width) =>
+  width < MOBILE_WIDTH ? 'mobile' : width < PAD_WIDTH ? 'pad' : 'desktop'
+
+export default function useResponsive(immediate) {
+  const appStore = useAppStore()
+  function resizeHandler() {
+    if (document.hidden) return
+    const zone = zoneOf(document.body.getBoundingClientRect().width)
+    appStore.toggleDevice(zone === 'mobile' ? 'mobile' : 'desktop')
+    // 断点区间切换的收缩/恢复编排收敛在 store（sideCollapse 的唯一写入方）
+    appStore.setLayoutZone(zone)
+  }
+  const debounceFn = useDebounceFn(resizeHandler, 100)
+  onMounted(() => {
+    if (immediate) debounceFn()
+  })
+  onBeforeMount(() => {
+    addEventListen(window, 'resize', debounceFn)
+  })
+  onBeforeUnmount(() => {
+    removeEventListen(window, 'resize', debounceFn)
+  })
+}

web/src/hooks/use-windows-resize.js

@@ -0,0 +1,23 @@
+// 监听 window 的 resize 事件，返回当前窗口的宽高
+import { shallowRef } from 'vue'
+import { tryOnMounted, useEventListener } from '@vueuse/core'
+
+const width = shallowRef(0)
+const height = shallowRef(0)
+
+export const useWindowResize = (cb) => {
+  const onResize = () => {
+    width.value = window.innerWidth
+    height.value = window.innerHeight
+    if (cb && typeof cb === 'function') {
+      cb(width.value, height.value)
+    }
+  }
+
+  tryOnMounted(onResize)
+  useEventListener('resize', onResize, { passive: true })
+  return {
+    width,
+    height
+  }
+}

web/src/hooks/useLayoutMode.js

@@ -0,0 +1,23 @@
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useAppStore, useThemeStore } from '@/pinia'
+
+/**
+ * 生效的布局模式：640–1024（平板）强制「通栏侧边(vertical)」，
+ * 其余用用户所选 settings.layout.mode。仅用于渲染，不改写持久化设置，
+ * 因此宽度回到 >= 1024 时会自动恢复用户原布局。
+ * 平板区默认收缩（由 useResponsive 在进入区间时置一次），仍支持手动展开。
+ * @returns {{ effectiveMode: import('vue').ComputedRef<string> }}
+ */
+export function useLayoutMode() {
+  const appStore = useAppStore()
+  const themeStore = useThemeStore()
+  const { isPad } = storeToRefs(appStore)
+  const { settings } = storeToRefs(themeStore)
+
+  const effectiveMode = computed(() =>
+    isPad.value ? 'vertical' : settings.value.layout.mode
+  )
+
+  return { effectiveMode }
+}

web/src/hooks/useSideWidth.js

@@ -0,0 +1,21 @@
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useAppStore, useThemeStore } from '@/pinia'
+
+/**
+ * 侧栏当前宽度（折叠取 sideCollapsedWidth，否则 sideWidth）。
+ * 供各布局 mode 与外壳（header / layout）共用，避免宽度公式散落重复。
+ * @returns {{ sideWidth: import('vue').ComputedRef<number> }}
+ */
+export function useSideWidth() {
+  const { sideCollapse } = storeToRefs(useAppStore())
+  const { settings } = storeToRefs(useThemeStore())
+
+  const sideWidth = computed(() =>
+    sideCollapse.value
+      ? settings.value.layout.sideCollapsedWidth
+      : settings.value.layout.sideWidth
+  )
+
+  return { sideWidth }
+}