useBreakpoints

路径：frontend/src/composables/layout/useBreakpoints.ts

与 PageQueryTable 共用同一套断点逻辑（usePageQueryTable 内部调用）。

作用

• 监听 window.resize（多组件共享同一订阅计数，避免重复监听）。
• 暴露 width（shallowRef）与 breakpoint：'xs' | 'sm' | 'md' | 'lg'。

断点划分

断点	条件	典型场景
xs	宽度 < 640	手机竖屏
sm	640–899	平板竖 / 小屏
md	900–1199	平板横 / 笔记本
lg	≥ 1200	桌面

另提供便捷计算属性：isXs … isLg、isNarrow（< 900）、isCompactHeader（< 720）。

clampColsForBreakpoint

export function clampColsForBreakpoint(baseCols: number, bp: LayoutBreakpoint): number

将「期望每行搜索列数」baseCols 压到当前断点允许的上限（如 xs 为 1 列、sm 为 2 列等），PageQueryTable 的 colsPerRow 会经此函数再参与 CSS Grid。

用法示例

import { useBreakpoints, clampColsForBreakpoint } from '@/composables/layout';

const { breakpoint, isNarrow } = useBreakpoints();

在 SSR 或无 window 环境，首次宽度有安全默认值；组件内以 onMounted 订阅窗口事件。