feat: 优化配额管理页面 UI 与交互

- 卡片布局改为 CSS Grid 自适应，最小宽度 380px，支持 1080p 下显示 4 列
- 分页控件重构：移除数字输入框，改为 [按页显示] / [显示全部] 切换按钮
- 动态计算每页数量：按页模式固定显示 3 行（行数 * 动态列数）
- Header 布局优化：凭证计数移至标题旁（淡蓝色气泡），刷新按钮合并为图标
- 安全限制：凭证数超过 30 个时禁用显示全部功能并弹窗提示

src/components/quota/useGridColumns.ts

@@ -0,0 +1,40 @@
+import { useState, useEffect, useCallback } from 'react';
+
+/**
+ * Hook to calculate the number of grid columns based on container width and item min-width.
+ * Returns [columns, refCallback].
+ */
+export function useGridColumns(
+    itemMinWidth: number,
+    gap: number = 16
+): [number, (node: HTMLDivElement | null) => void] {
+    const [columns, setColumns] = useState(1);
+    const [element, setElement] = useState<HTMLDivElement | null>(null);
+
+    const refCallback = useCallback((node: HTMLDivElement | null) => {
+        setElement(node);
+    }, []);
+
+    useEffect(() => {
+        if (!element) return;
+
+        const updateColumns = () => {
+            const containerWidth = element.clientWidth;
+            const effectiveItemWidth = itemMinWidth + gap;
+            const count = Math.floor((containerWidth + gap) / effectiveItemWidth);
+            setColumns(Math.max(1, count));
+        };
+
+        updateColumns();
+
+        const observer = new ResizeObserver(() => {
+            updateColumns();
+        });
+
+        observer.observe(element);
+
+        return () => observer.disconnect();
+    }, [element, itemMinWidth, gap]);
+
+    return [columns, refCallback];
+}