fix: polish channel groups and add production deployment

src/apps/client/ClientSendDetailPage.tsx

@@ -4,6 +4,7 @@ import { clientApi, type SmsMessageRecord } from '@/api/adminApi';
 import {
   DateRangeInput,
   Input,
+  Pagination,
   QueryPanel,
   Select,
   Tag,
@@ -58,6 +59,7 @@ export function ClientSendDetailPage() {
   const [dateRange, setDateRange] = useState<DateRangeValue>({});
   const [contentKeyword, setContentKeyword] = useState('');
   const [phoneKeyword, setPhoneKeyword] = useState('');
+  const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
 
@@ -100,6 +102,14 @@ export function ClientSendDetailPage() {
     const matchesContent = !contentKeyword || item.content.includes(contentKeyword);
     return matchesStartDate && matchesEndDate && matchesContent;
   });
+  const pageSize = 10;
+  const totalPages = Math.max(1, Math.ceil(filteredRows.length / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const visibleRows = filteredRows.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+
+  useEffect(() => {
+    setPage(1);
+  }, [contentKeyword, dateRange.end, dateRange.start, records.length]);
 
   return (
     <section className="page-stack">
@@ -166,7 +176,7 @@ export function ClientSendDetailPage() {
                 <tr><td className="ui-table__empty" colSpan={9}>正在加载真实发送记录...</td></tr>
               ) : filteredRows.length === 0 ? (
                 <tr><td className="ui-table__empty" colSpan={9}>暂无发送记录</td></tr>
-              ) : filteredRows.map((record) => {
+              ) : visibleRows.map((record) => {
                 const receipt = getReceipt(record);
                 const carrier = record.channel?.carrier ? carrierLabelMap[record.channel.carrier] ?? record.channel.carrier : '-';
                 const region = record.channel?.sendRegion ?? '-';
@@ -214,6 +224,14 @@ export function ClientSendDetailPage() {
             </tbody>
           </table>
         </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={filteredRows.length}
+        />
       </div>
     </section>
   );