feat: integrate analytics and fragment receipt improvements

src/apps/admin/AdminAnalyticsPage.tsx

@@ -4,6 +4,7 @@ import {
   adminApi,
   type SendQualityResponse,
   type SignatureChannelCarrierQualityStat,
+  type SignatureChannelCarrierDrainageQualityStat,
   type SignatureChannelQualityItem,
   type SignatureChannelQualityResponse,
 } from '@/api/adminApi';
@@ -290,6 +291,7 @@ function SignatureQualityDrawer({
   item: SignatureChannelQualityItem;
   onClose: () => void;
 }) {
+  const [matrixMode, setMatrixMode] = useState<'overall' | 'drainage'>('overall');
   const carriers = item.carrierOverview
     .map((carrier) => ({
       ...carrier,
@@ -360,8 +362,9 @@ function SignatureQualityDrawer({
             <div className="signature-quality-section__heading">
               <div>
                 <h3>通道 × 运营商矩阵</h3>
-                <p>“—”表示所选日期没有该通道与运营商组合的真实提交，并不等同于通道不支持该运营商。</p>
+                <p>{matrixMode === 'overall' ? '整体口径展示该组合全部真实提交。' : '引流切分口径分别展示含引流、不含引流和历史未检测数据。'}“—”表示所选日期没有真实提交。</p>
               </div>
+              <div className="page-actions"><Button onClick={() => setMatrixMode('overall')} size="sm" variant={matrixMode === 'overall' ? 'primary' : 'ghost'}>整体统计</Button><Button onClick={() => setMatrixMode('drainage')} size="sm" variant={matrixMode === 'drainage' ? 'primary' : 'ghost'}>按引流切分</Button></div>
             </div>
             <div className="signature-quality-matrix">
               <table>
@@ -379,9 +382,14 @@ function SignatureQualityDrawer({
                         const metric = item.breakdowns.find((entry) => (
                           entry.channelId === channel.channelId && normalizeCarrier(entry.carrier) === carrier
                         ));
+                        const drainageMetrics = item.drainageBreakdowns.filter((entry) => (
+                          entry.channelId === channel.channelId && normalizeCarrier(entry.carrier) === carrier
+                        ));
                         return (
                           <td key={carrier}>
-                            {metric ? <MatrixMetric metric={metric} /> : <span className="signature-quality-matrix__empty">—</span>}
+                            {matrixMode === 'overall'
+                              ? metric ? <MatrixMetric metric={metric} /> : <span className="signature-quality-matrix__empty">—</span>
+                              : drainageMetrics.length ? <DrainageMatrixMetrics metrics={drainageMetrics} /> : <span className="signature-quality-matrix__empty">—</span>}
                           </td>
                         );
                       })}
@@ -423,6 +431,14 @@ function MatrixMetric({ metric }: { metric: SignatureChannelCarrierQualityStat }
   );
 }
 
+function DrainageMatrixMetrics({ metrics }: { metrics: SignatureChannelCarrierDrainageQualityStat[] }) {
+  const labels = { with: '含引流', without: '不含引流', unknown: '未检测' };
+  return <div className="signature-quality-matrix__drainage">{(['with', 'without', 'unknown'] as const).map((state) => {
+    const metric = metrics.find((item) => item.drainageState === state);
+    return metric ? <div key={state}><b>{labels[state]}</b><MatrixMetric metric={metric} /></div> : null;
+  })}</div>;
+}
+
 function QualityRate({ value }: { value: number }) {
   return (
     <div className="signature-quality-rate">