feat: optimize UI queries and seed number library

apps/web/src/components/layout.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Alert, Badge, Button } from './ui.jsx';
+import { Alert, Badge, Button, Field, Input } from './ui.jsx';
 
 const selectedBlue = '#2563EB';
 
@@ -42,6 +42,36 @@ export function Toolbar({ children }) {
   return <div className="toolbar">{children}</div>;
 }
 
+export function DateRangeFields({ startDate, endDate, onStartChange, onEndChange }) {
+  return (
+    <>
+      <Field label="开始日期"><Input type="date" value={startDate} max={endDate || undefined} onChange={(event) => onStartChange(event.target.value)} /></Field>
+      <Field label="结束日期"><Input type="date" value={endDate} min={startDate || undefined} onChange={(event) => onEndChange(event.target.value)} /></Field>
+    </>
+  );
+}
+
+export function Pagination({ total, take, skip, count, loading, onPageChange, onPageSizeChange }) {
+  const start = total ? skip + 1 : 0;
+  const end = Math.min(total, skip + count);
+  return (
+    <div className="pagination-bar" aria-label="分页">
+      <span>显示 {start}-{end} 条，共 {total} 条</span>
+      <div className="pagination-actions">
+        <label>每页
+          <select value={take} disabled={loading} onChange={(event) => onPageSizeChange(Number(event.target.value))}>
+            <option value="25">25</option>
+            <option value="50">50</option>
+            <option value="100">100</option>
+          </select>
+        </label>
+        <Button size="sm" variant="outline" disabled={loading || skip === 0} onClick={() => onPageChange(Math.max(0, skip - take))}>上一页</Button>
+        <Button size="sm" variant="outline" disabled={loading || skip + count >= total} onClick={() => onPageChange(skip + take)}>下一页</Button>
+      </div>
+    </div>
+  );
+}
+
 export function Panel({ title, aside, children, className = '' }) {
   return (
     <section className={`prototype-panel ${className}`}>