feat: 优化通道运营商与金额展示

src/apps/admin/AdminAnalyticsPage.tsx

@@ -10,7 +10,7 @@ import {
   type UnreportedSignatureItem,
   type PagedResult,
 } from '@/api/adminApi';
-import { Breadcrumb, Button, Input, Pagination, Table, Tag, type TableColumn } from '@/components/ui';
+import { Breadcrumb, Button, CarrierTag, Input, Pagination, Table, Tag, type TableColumn } from '@/components/ui';
 import { successRateClassName, successRateTone } from '@/utils/successRate';
 
 const carrierOrder = ['mobile', 'unicom', 'telecom', 'unknown'];
@@ -348,7 +348,7 @@ function RetirementHeatmap({ date, dimensionType, dimensions, items, title }: {
                         <strong title={`企业：${row.tenantName}\n企业应用：${row.applicationName || '未绑定企业应用'}`}>{row.signatureName}</strong>
                         {row.channelName ? <small>{row.channelName}</small> : null}
                       </span>
-                      <Tag tone="neutral">{carrierLabels[row.carrier] ?? row.carrier}</Tag>
+                      <CarrierTag carrier={row.carrier} />
                     </th>
                     <td className="signature-retirement-heatmap__total">{row.total.toLocaleString('zh-CN')}</td>
                     {dates.map((dateKey) => {
@@ -508,7 +508,7 @@ function SignatureQualityDrawer({
               {carriers.map((carrier) => (
                 <article className={`signature-carrier-card signature-carrier-card--${normalizeCarrier(carrier.carrier)}`} key={carrier.carrier}>
                   <div>
-                    <Tag tone={carrierTagTone(carrier.carrier)}>{carrierLabel(carrier.carrier)}</Tag>
+                    <CarrierTag carrier={carrier.carrier} />
                     <strong>{carrier.businessMessageCount.toLocaleString('zh-CN')} 条业务短信</strong>
                   </div>
                   <dl>
@@ -639,14 +639,6 @@ function carrierLabel(value: string) {
   return carrierLabels[normalizeCarrier(value)] ?? '未知';
 }
 
-function carrierTagTone(value: string): 'info' | 'accent' | 'warning' | 'neutral' {
-  const carrier = normalizeCarrier(value);
-  if (carrier === 'mobile') return 'info';
-  if (carrier === 'unicom') return 'accent';
-  if (carrier === 'telecom') return 'warning';
-  return 'neutral';
-}
-
 function formatDuration(value?: number | null) {
   if (value == null) return '—';
   if (value < 1000) return `${Math.round(value)} 毫秒`;

src/apps/admin/AdminPhoneSegmentsPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState, type ReactNode } from 'react';
 import { Database, ListFilter, Plus, RotateCcw, Search, Trash2 } from 'lucide-react';
-import { Breadcrumb, Button, Input, Modal, Pagination, Select, Table, Tabs, Tag, type TableColumn } from '@/components/ui';
+import { Breadcrumb, Button, CarrierTag, Input, Modal, Pagination, Select, Table, Tabs, type TableColumn } from '@/components/ui';
 import { adminApi, type DictionaryItem } from '@/api/adminApi';
 import { formatDateTime } from '@/utils/dateTime';
 
@@ -18,18 +18,6 @@ type CarrierRule = DictionaryItem & {
   remark?: string | null;
 };
 
-const carrierTone: Record<string, 'success' | 'info' | 'warning' | 'neutral'> = {
-  中国移动: 'success',
-  中国联通: 'info',
-  中国电信: 'warning',
-};
-
-const ruleCarrierMeta: Record<string, { label: string; tone: 'success' | 'info' | 'warning' | 'neutral' }> = {
-  mobile: { label: '中国移动', tone: 'success' },
-  unicom: { label: '中国联通', tone: 'info' },
-  telecom: { label: '中国电信', tone: 'warning' },
-};
-
 type PhoneSegmentSummaryProps = {
   icon: ReactNode;
   label: string;
@@ -165,7 +153,7 @@ export function AdminPhoneSegmentsPage() {
 
   const columns = useMemo<Array<TableColumn<PhoneSegment>>>(() => [
     { key: 'segment', title: '手机号段（前7位）', width: '190px', render: (record) => <strong className="phone-segment-prefix">{record.prefix}</strong> },
-    { key: 'carrier', title: '运营商', width: '130px', render: (record) => record.carrier ? <Tag tone={carrierTone[record.carrier] ?? 'neutral'}>{record.carrier}</Tag> : '-' },
+    { key: 'carrier', title: '运营商', width: '130px', render: (record) => record.carrier ? <CarrierTag carrier={record.carrier} /> : '-' },
     { key: 'province', title: '省份', width: '110px', render: (record) => record.province ?? '-' },
     { key: 'city', title: '城市', width: '110px', render: (record) => record.city ?? '-' },
     { key: 'createdAt', title: '创建时间', width: '170px', render: (record) => formatDateTime(record.createdAt) },
@@ -173,7 +161,7 @@ export function AdminPhoneSegmentsPage() {
   ], []);
 
   const ruleColumns = useMemo<Array<TableColumn<CarrierRule>>>(() => [
-    { key: 'carrier', title: '运营商', width: '140px', render: (record) => { const meta = ruleCarrierMeta[record.carrier ?? '']; return meta ? <Tag tone={meta.tone}>{meta.label}</Tag> : record.carrier ?? '-'; } },
+    { key: 'carrier', title: '运营商', width: '140px', render: (record) => record.carrier ? <CarrierTag carrier={record.carrier} /> : '-' },
     { key: 'pattern', title: '号码前缀正则', render: (record) => <strong>{record.pattern}</strong> },
     { key: 'priority', title: '优先级', width: '120px', render: (record) => record.priority ?? 100 },
     { key: 'remark', title: '备注', render: (record) => record.remark ?? '-' },

src/apps/admin/AdminSignatureRetirementPage.tsx

@@ -11,7 +11,7 @@ import {
   type SignatureRetirementWebhook,
   type TenantOption,
 } from '@/api/adminApi';
-import { Breadcrumb, Button, DateRangeInput, Input, Modal, Pagination, Select, Table, Tabs, Tag, Textarea, type DateRangeValue, type TableColumn } from '@/components/ui';
+import { Breadcrumb, Button, CarrierTag, DateRangeInput, Input, Modal, Pagination, Select, Table, Tabs, Tag, Textarea, type DateRangeValue, type TableColumn } from '@/components/ui';
 
 const carriers = ['mobile', 'unicom', 'telecom'] as const;
 const carrierLabels = { mobile: '移动', unicom: '联通', telecom: '电信' };
@@ -112,7 +112,7 @@ export function AdminSignatureRetirementPage() {
   const messageColumns: Array<TableColumn<SignatureRetirementMessage>> = [
     { key: 'title', title: '预警', width: '340px', render: (item) => <div className="ui-table__long-text"><strong>{item.title}</strong><br /><span>{item.content}</span></div> },
     { key: 'dimension', title: '维度', width: '240px', render: (item) => <>{item.tenantName ?? '-'}<br /><small>{item.applicationName ?? '未关联企业应用'} / {item.signatureName ?? '-'}</small><br /><small>{item.channelName ?? '企业维度'}</small></> },
-    { key: 'carrier', title: '运营商', width: '90px', render: (item) => <Tag tone="warning">{carrierLabels[item.detection?.carrier ?? 'mobile']}</Tag> },
+    { key: 'carrier', title: '运营商', width: '90px', render: (item) => <CarrierTag carrier={item.detection?.carrier ?? 'mobile'} /> },
     { key: 'count', title: '活动量', width: '130px', render: (item) => item.detection ? `${item.detection.acceptedBusinessCount} / 阈值${item.detection.threshold}` : '-' },
     { key: 'time', title: '消息时间', width: '170px', render: (item) => formatDateTime(item.createdAt) },
     { key: 'state', title: '状态', width: '90px', render: (item) => item.suppressed ? <Tag>已抑制</Tag> : item.isRead ? <Tag tone="info">已读</Tag> : <Tag tone="warning">未读</Tag> },

src/apps/admin/channels/AdminChannelsPage.css

@@ -22,7 +22,7 @@
 .sms-channel-table__row {
   display: grid;
   gap: var(--space-3);
-  grid-template-columns: minmax(150px, 1.2fr) 88px 86px 96px minmax(280px, 1.6fr) 190px;
+  grid-template-columns: minmax(190px, 1.25fr) 110px 86px 96px minmax(280px, 1.6fr) 190px;
   min-width: 940px;
 }
 
@@ -60,11 +60,18 @@
   overflow-wrap: anywhere;
 }
 
-.sms-channel-identity span {
+.sms-channel-identity > span {
   color: var(--color-text-muted);
   font-size: var(--font-size-sm);
 }
 
+.sms-channel-identity__carriers {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-top: var(--space-1);
+}
+
 .sms-channel-carrier-price {
   align-items: flex-start;
   display: grid;
@@ -72,6 +79,12 @@
   justify-items: start;
 }
 
+.sms-channel-carrier-price strong {
+  color: var(--color-text-strong);
+  font-size: var(--font-size-sm);
+  font-variant-numeric: tabular-nums;
+}
+
 .sms-channel-status-cell {
   align-items: flex-start;
   display: grid;
@@ -136,6 +149,10 @@
   text-overflow: ellipsis;
 }
 
+.sms-channel-rate .sms-channel-rate__empty {
+  color: #4b5563;
+}
+
 .sms-channel-actions {
   display: grid;
   gap: var(--space-2);

src/apps/admin/channels/ChannelTable.tsx

@@ -1,15 +1,15 @@
 import { Copy, Eye, FileText, Pencil, Power, Send } from 'lucide-react';
-import { DeleteRiskAction, MoneyText, Pagination, Tag } from '@/components/ui';
-import { formatCents } from '@/utils/currency';
+import { CarrierTag, DeleteRiskAction, Pagination, Tag } from '@/components/ui';
+import { formatRateAmount } from '@/utils/currency';
 import { successRateClassName } from '@/utils/successRate';
-import { carrierLabelMap, carrierToneMap, statusLabelMap, statusToneMap } from './channelModel';
+import { statusLabelMap, statusToneMap } from './channelModel';
 import type { ChannelConfirmAction, ChannelModalState, SmsChannel } from './channelTypes';
 
-function RateBlock({ label, rate, count, isSuccess = false }: { label: string; rate: number; count: number; isSuccess?: boolean }) {
+function RateBlock({ label, rate, count, empty, isSuccess = false }: { label: string; rate: number; count: number; empty: boolean; isSuccess?: boolean }) {
   return (
     <div className="sms-channel-rate">
       <small>{label}</small>
-      <strong className={isSuccess ? successRateClassName(rate) : undefined}>{rate}%</strong>
+      <strong className={empty ? 'sms-channel-rate__empty' : isSuccess ? successRateClassName(rate) : undefined}>{empty ? '-' : `${rate}%`}</strong>
       <span>{count.toLocaleString('zh-CN')}</span>
     </div>
   );
@@ -44,7 +44,7 @@ export function ChannelTable({
     <div className="surface sms-channel-table">
       <div className="sms-channel-table__head">
         <span>通道信息</span>
-        <span>运营商 / 成本</span>
+        <span>成本费率</span>
         <span>状态</span>
         <span>今日提交</span>
         <span>今日提交 / 送达质量</span>
@@ -55,10 +55,10 @@ export function ChannelTable({
           <div className="sms-channel-identity">
             <strong>{channel.name}</strong>
             <span>通道 ID：{channel.id}</span>
+            <div className="sms-channel-identity__carriers">{channel.carriers.map((carrier) => <CarrierTag carrier={carrier} key={carrier} />)}</div>
           </div>
           <div className="sms-channel-carrier-price">
-            <div>{channel.carriers.map((carrier) => <Tag key={carrier} tone={carrierToneMap[carrier]}>{carrierLabelMap[carrier]}</Tag>)}</div>
-            <strong><MoneyText>{formatCents(channel.unitPrice)} 元</MoneyText></strong>
+            <strong>{formatRateAmount(channel.unitPrice / 10_000)} 元/条</strong>
           </div>
           <div className="sms-channel-status-cell">
             <Tag tone={statusToneMap[channel.status]}>{statusLabelMap[channel.status]}</Tag>
@@ -68,10 +68,10 @@ export function ChannelTable({
           </div>
           <strong className="sms-channel-total">{channel.total.toLocaleString('zh-CN')}</strong>
           <div className="sms-channel-quality">
-            <RateBlock count={channel.submitFailureCount} label="提交失败" rate={channel.submitFailureRate} />
-            <RateBlock count={channel.successCount} isSuccess label="送达成功" rate={channel.successRate} />
-            <RateBlock count={channel.unknownCount} label="回执未知" rate={channel.unknownRate} />
-            <RateBlock count={channel.failureCount} label="送达失败" rate={channel.failureRate} />
+            <RateBlock count={channel.submitFailureCount} empty={channel.total === 0} label="提交失败" rate={channel.submitFailureRate} />
+            <RateBlock count={channel.successCount} empty={channel.total === 0} isSuccess label="送达成功" rate={channel.successRate} />
+            <RateBlock count={channel.unknownCount} empty={channel.total === 0} label="回执未知" rate={channel.unknownRate} />
+            <RateBlock count={channel.failureCount} empty={channel.total === 0} label="送达失败" rate={channel.failureRate} />
           </div>
           <div className="sms-channel-actions">
             <button className="sms-channel-report-entry" onClick={() => onOpenReports(channel)} type="button">

src/apps/admin/enterprise-applications/EnterpriseApplicationTable.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { Edit3, Settings2, Trash2 } from 'lucide-react';
-import { Button, MoneyText, Pagination, Table, Tabs, Tag, type TableColumn } from '@/components/ui';
+import { Button, Pagination, Table, Tabs, Tag, type TableColumn } from '@/components/ui';
 import { formatAmount } from '@/utils/currency';
 import { formatDateTime } from '@/utils/dateTime';
 import type { ConfirmAction, SmsApp } from './applicationTypes';
@@ -56,7 +56,7 @@ export function EnterpriseApplicationTable({
     { key: 'enterprise', title: '企业名称', width: '220px', render: (record) => record.enterprise },
     { key: 'sentToday', title: '今日发送', width: '120px', render: (record) => `${record.sentToday.toLocaleString('zh-CN')} 条` },
     { key: 'deliveryRate', title: '到达率', width: '130px', render: (record) => `${record.deliveryRate}%` },
-    { key: 'unitPrice', title: '单价', width: '130px', render: (record) => <MoneyText>{formatAmount(record.unitPrice)} 元</MoneyText> },
+    { key: 'unitPrice', title: '单价', width: '130px', render: (record) => <strong className="application-unit-price">{formatAmount(record.unitPrice)} 元</strong> },
     {
       key: 'cmppStatus',
       title: '客户连接状态',

src/apps/admin/enterprise-signatures/SignatureReportModals.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Info } from 'lucide-react';
 import { adminApi, type ClientSmsSignature } from '@/api/adminApi';
-import { Button, Modal, Select, Textarea } from '@/components/ui';
+import { Button, CarrierTag, Modal, Select, Textarea } from '@/components/ui';
 import { AuditStatusTag, carrierLabel, CarrierReportTag, formatDate } from './signature.helpers';
 import type { DrainageInfo } from './signature.types';
 
@@ -35,6 +35,7 @@ export function SignatureReportModal({ item, onClose }: { item: ClientSmsSignatu
 
 export function ChannelReportStatusModal({ item, onClose, onSaved }: { item: ClientSmsSignature; onClose: () => void; onSaved: () => void }) {
   const targets = item.reportTargets ?? [];
+  const carriers = ['mobile', 'unicom', 'telecom'] as const;
   const [statuses, setStatuses] = useState<Record<string, string>>(() => Object.fromEntries(targets.map((target) => [`${target.channelId}:${target.carrier}`, target.status])));
   const [reason, setReason] = useState('');
   const [saving, setSaving] = useState(false);
@@ -46,10 +47,10 @@ export function ChannelReportStatusModal({ item, onClose, onSaved }: { item: Cli
       onSaved();
     } catch (failure) { setError(failure instanceof Error ? failure.message : '报备状态保存失败'); } finally { setSaving(false); }
   }
-  return <Modal footer={<><Button onClick={onClose} variant="ghost">取消</Button><Button disabled={!targets.length || saving} onClick={() => void save()}>{saving ? '保存中...' : '保存状态'}</Button></>} onClose={onClose} open size="xl" title="按通道修改签名报备状态">
-    <div className="page-stack"><div className="signature-alert"><Info size={18} /><span>企业签名只展示汇总结果；这里修改的是每个具体通道的报备任务，保存后会同步通道详情、报备任务和企业签名三网状态。</span></div>
+  return <Modal footer={<><Button onClick={onClose} variant="ghost">取消</Button><Button disabled={!targets.length || saving} onClick={() => void save()}>{saving ? '保存中...' : '保存状态'}</Button></>} onClose={onClose} open size="xl" title="修改签名报备状态">
+    <div className="signature-report-status"><div className="signature-report-status__context"><strong>{item.name}</strong><span>{item.tenant?.name ?? item.tenantId} · {item.application?.name ?? '-'}</span></div><div className="signature-alert"><Info size={18} /><span>修改具体通道的报备状态；保存后同步通道详情、报备任务和企业签名三网状态。</span></div>
       {error ? <p className="form-error">{error}</p> : null}
-      {targets.length ? targets.map((target) => { const key = `${target.channelId}:${target.carrier}`; return <div className="surface admin-report-target-row" key={key}><div><strong>{target.channel.name}</strong><div className="muted">{carrierLabel(target.carrier)}</div></div><Select onChange={(event) => setStatuses((current) => ({ ...current, [key]: event.target.value }))} options={reportStatusOptions} value={statuses[key] ?? target.status} /></div>; }) : <div className="empty-state">该企业应用当前没有配置目标通道。</div>}
+      {targets.length ? <div className="signature-report-status__carriers">{carriers.map((carrier) => { const carrierTargets = targets.filter((target) => target.carrier === carrier); return <section className="signature-report-status__carrier" key={carrier}><header><CarrierTag carrier={carrier} /><span>{carrierTargets.length} 个通道</span></header><div className="signature-report-status__list">{carrierTargets.length ? carrierTargets.map((target) => { const key = `${target.channelId}:${target.carrier}`; return <div className="signature-report-status__row" key={key}><strong title={target.channel.name}>{target.channel.name}</strong><Select aria-label={`${target.channel.name}${carrierLabel(target.carrier)}报备状态`} onChange={(event) => setStatuses((current) => ({ ...current, [key]: event.target.value }))} options={reportStatusOptions} value={statuses[key] ?? target.status} /></div>; }) : <div className="signature-report-status__empty">暂无{carrierLabel(carrier)}目标通道</div>}</div></section>; })}</div> : <div className="empty-state">该企业应用当前没有配置目标通道。</div>}
       <Textarea label="修改原因" onChange={(event) => setReason(event.target.value)} placeholder="请输入运营商工单、确认依据或人工处理说明" rows={3} value={reason} />
     </div>
   </Modal>;