fix: polish channel groups and add production deployment

src/apps/admin/AdminPhoneSegmentsPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Plus, RadioTower, Search, Smartphone } from 'lucide-react';
-import { Breadcrumb, Button, Input, Modal, Select, Table, type TableColumn } from '@/components/ui';
+import { Breadcrumb, Button, Input, Modal, Select, Table, Tabs, type TableColumn } from '@/components/ui';
 import { adminApi, type DictionaryItem } from '@/api/adminApi';
 
 type PhoneSegment = DictionaryItem & {
@@ -123,25 +123,6 @@ export function AdminPhoneSegmentsPage() {
         </section>
       </div>
 
-      <div className="surface phone-segment-tabs">
-        <button className={activeTab === 'segments' ? 'is-active' : ''} onClick={() => setActiveTab('segments')} type="button">
-          <Smartphone size={18} />
-          <span>
-            <strong>手机号段</strong>
-            <small>按号码前 7 位维护省份与城市</small>
-          </span>
-          <em>{segments.length}</em>
-        </button>
-        <button className={activeTab === 'rules' ? 'is-active' : ''} onClick={() => setActiveTab('rules')} type="button">
-          <RadioTower size={18} />
-          <span>
-            <strong>运营商区分规则</strong>
-            <small>按前缀正则识别移动、联通、电信</small>
-          </span>
-          <em>{rules.length}</em>
-        </button>
-      </div>
-
       <div className="surface admin-system-toolbar phone-segment-toolbar">
         <Input onChange={(event) => setKeyword(event.target.value)} placeholder={activeTab === 'segments' ? '搜索手机号段、运营商、省份或城市' : '搜索运营商、正则或备注'} prefix={<Search size={16} />} value={keyword} />
         <Button icon={<Plus size={16} />} onClick={() => activeTab === 'segments' ? setCreating(true) : setCreatingRule(true)}>
@@ -150,9 +131,14 @@ export function AdminPhoneSegmentsPage() {
       </div>
 
       <div className="surface admin-system-table-card">
-        {activeTab === 'segments'
-          ? <Table columns={columns} data={filteredSegments} emptyText="暂无手机号段" rowKey="id" />
-          : <Table columns={ruleColumns} data={filteredRules} emptyText="暂无运营商区分规则" rowKey="id" />}
+        <Tabs
+          onChange={(value) => setActiveTab(value as 'segments' | 'rules')}
+          value={activeTab}
+          items={[
+            { label: `手机号段 ${segments.length}`, value: 'segments', content: <Table columns={columns} data={filteredSegments} emptyText="暂无手机号段" rowKey="id" /> },
+            { label: `运营商区分规则 ${rules.length}`, value: 'rules', content: <Table columns={ruleColumns} data={filteredRules} emptyText="暂无运营商区分规则" rowKey="id" /> },
+          ]}
+        />
       </div>
 
       <Modal