fix: complete first version issue remediation

src/apps/admin/AdminPhoneSegmentsPage.tsx

@@ -18,9 +18,10 @@ type CarrierRule = DictionaryItem & {
 };
 
 export function AdminPhoneSegmentsPage() {
-  const pageSize = 20;
+  const pageSize = 25;
   const [segments, setSegments] = useState<PhoneSegment[]>([]);
   const [rules, setRules] = useState<CarrierRule[]>([]);
+  const [ruleTotal, setRuleTotal] = useState(0);
   const [activeTab, setActiveTab] = useState<'segments' | 'rules'>('segments');
   const [keyword, setKeyword] = useState('');
   const [creating, setCreating] = useState(false);
@@ -37,6 +38,7 @@ export function AdminPhoneSegmentsPage() {
   const [loading, setLoading] = useState(false);
   const [segmentQuery, setSegmentQuery] = useState('');
   const [page, setPage] = useState(1);
+  const [rulePage, setRulePage] = useState(1);
   const [pageCursors, setPageCursors] = useState<Array<string | undefined>>([undefined]);
   const [hasMore, setHasMore] = useState(false);
   const [nextCursor, setNextCursor] = useState<string | null>(null);
@@ -56,14 +58,15 @@ export function AdminPhoneSegmentsPage() {
     setLoading(true);
     Promise.all([
       adminApi.listPhoneSegments({ keyword: segmentQuery || undefined, cursor: pageCursors[page - 1], pageSize }),
-      adminApi.listPhoneCarrierRules(),
+      adminApi.listPhoneCarrierRules({ keyword: activeTab === 'rules' ? segmentQuery || undefined : undefined, page: rulePage, pageSize }),
     ])
-      .then(([segmentPage, ruleItems]) => {
+      .then(([segmentPage, ruleResponse]) => {
         if (cancelled) return;
         setSegments(segmentPage.items as PhoneSegment[]);
         setHasMore(segmentPage.hasMore);
         setNextCursor(segmentPage.nextCursor);
-        setRules(ruleItems as CarrierRule[]);
+        setRules(ruleResponse.items as CarrierRule[]);
+        setRuleTotal(ruleResponse.total);
         setError('');
       })
       .catch((failure: Error) => {
@@ -75,12 +78,9 @@ export function AdminPhoneSegmentsPage() {
     return () => {
       cancelled = true;
     };
-  }, [page, pageCursors, reloadKey, segmentQuery]);
+  }, [activeTab, page, pageCursors, reloadKey, rulePage, segmentQuery]);
 
-  const filteredRules = useMemo(
-    () => rules.filter((rule) => [rule.carrier, rule.pattern, rule.remark].some((value) => String(value ?? '').includes(keyword))),
-    [keyword, rules],
-  );
+  const ruleTotalPages = Math.max(1, Math.ceil(ruleTotal / pageSize));
 
   function createSegment() {
     adminApi.createPhoneSegment({ prefix, carrier, province, city })
@@ -141,7 +141,11 @@ export function AdminPhoneSegmentsPage() {
 
       <div className="surface admin-system-table-card">
         <Tabs
-          onChange={(value) => setActiveTab(value as 'segments' | 'rules')}
+          className="phone-segment-tabs"
+          onChange={(value) => {
+            setActiveTab(value as 'segments' | 'rules');
+            setRulePage(1);
+          }}
           value={activeTab}
           items={[
             {
@@ -168,7 +172,25 @@ export function AdminPhoneSegmentsPage() {
                 </>
               ),
             },
-            { label: '运营商区分规则', value: 'rules', content: <Table columns={ruleColumns} data={filteredRules} emptyText="暂无运营商区分规则" rowKey="id" /> },
+            {
+              label: '运营商区分规则',
+              value: 'rules',
+              content: (
+                <>
+                  <Table columns={ruleColumns} data={rules} emptyText={loading ? '加载中...' : '暂无运营商区分规则'} pagination={false} rowKey="id" />
+                  <Pagination
+                    page={rulePage}
+                    total={ruleTotal}
+                    totalPages={ruleTotalPages}
+                    previousDisabled={rulePage <= 1 || loading}
+                    nextDisabled={rulePage >= ruleTotalPages || loading}
+                    onPrevious={() => setRulePage((current) => Math.max(1, current - 1))}
+                    onNext={() => setRulePage((current) => Math.min(ruleTotalPages, current + 1))}
+                    onPageChange={setRulePage}
+                  />
+                </>
+              ),
+            },
           ]}
         />
       </div>