fix: polish channel groups and add production deployment

src/apps/client/ClientBillingPage.tsx

@@ -1,12 +1,17 @@
 import { useEffect, useState } from 'react';
 import { CreditCard } from 'lucide-react';
-import { Button, Tag } from '@/components/ui';
+import { Button, Pagination, Tag } from '@/components/ui';
 import { clientApi, type BillingPlan } from '@/api/adminApi';
 
 export function ClientBillingPage() {
   const [plans, setPlans] = useState<BillingPlan[]>([]);
+  const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
+  const pageSize = 10;
+  const totalPages = Math.max(1, Math.ceil(plans.length / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const visiblePlans = plans.slice((currentPage - 1) * pageSize, currentPage * pageSize);
 
   useEffect(() => {
     setLoading(true);
@@ -19,6 +24,10 @@ export function ClientBillingPage() {
       .finally(() => setLoading(false));
   }, []);
 
+  useEffect(() => {
+    setPage(1);
+  }, [plans.length]);
+
   function createOrder(plan: BillingPlan) {
     clientApi.createOrder({ planId: plan.id, amountCents: plan.amountCents, smsUnits: plan.smsUnits, payMethod: 'manual' })
       .catch((reason: Error) => setError(reason.message || '充值订单创建失败'));
@@ -36,7 +45,7 @@ export function ClientBillingPage() {
         {loading ? <p className="muted">正在加载充值套餐...</p> : null}
         {error ? <p className="form-error">{error}</p> : null}
         <div className="plan-grid">
-          {plans.map((plan) => (
+          {visiblePlans.map((plan) => (
             <article className={['plan-card', plan.smsUnits >= 100000 ? 'plan-card--highlight' : ''].filter(Boolean).join(' ')} key={plan.id}>
               <div className="section-heading">
                 <h2>{plan.name}</h2>
@@ -50,6 +59,14 @@ export function ClientBillingPage() {
             </article>
           ))}
         </div>
+        <Pagination
+          nextDisabled={currentPage >= totalPages}
+          onNext={() => setPage((value) => Math.min(totalPages, value + 1))}
+          onPrevious={() => setPage((value) => Math.max(1, value - 1))}
+          page={currentPage}
+          previousDisabled={currentPage <= 1}
+          total={plans.length}
+        />
         {!loading && !error && plans.length === 0 ? <p className="muted">暂无可用充值套餐。</p> : null}
       </div>
     </section>