完善运营端报备流程与页面标题

src/components/ui/Breadcrumb.tsx

@@ -0,0 +1,70 @@
+import {
+  Activity,
+  BarChart3,
+  Building2,
+  ClipboardList,
+  FileCheck2,
+  FilePenLine,
+  Gauge,
+  Hash,
+  ImageIcon,
+  Layers3,
+  ListChecks,
+  MessageSquare,
+  Phone,
+  RadioTower,
+  ReceiptText,
+  Settings,
+  Shield,
+  ShieldCheck,
+  ShieldOff,
+  TrendingUp,
+  Users,
+  UserX,
+  type LucideIcon,
+} from 'lucide-react';
+
+type BreadcrumbProps = {
+  items: string[];
+};
+
+export function Breadcrumb({ items }: BreadcrumbProps) {
+  const title = items[items.length - 1] ?? '';
+  const Icon = iconForTitle(title);
+
+  return (
+    <nav aria-label={title} className="breadcrumb-line">
+      <span className="breadcrumb-line__icon">
+        <Icon aria-hidden size={22} strokeWidth={2.4} />
+      </span>
+      <h1>{title}</h1>
+    </nav>
+  );
+}
+
+function iconForTitle(title: string): LucideIcon {
+  if (title.includes('发送监控')) return Activity;
+  if (title.includes('数据统计')) return BarChart3;
+  if (title.includes('运营看板') || title.includes('数据概览')) return Gauge;
+  if (title.includes('企业认证')) return ShieldCheck;
+  if (title.includes('短信审核') || title.includes('短信记录') || title.includes('上行短信')) return MessageSquare;
+  if (title.includes('模板审核') || title.includes('企业模板') || title.includes('模板')) return FileCheck2;
+  if (title.includes('彩信')) return ImageIcon;
+  if (title.includes('短信通道') || title.includes('通道报备')) return RadioTower;
+  if (title.includes('通道组')) return Layers3;
+  if (title.includes('报备记录')) return ListChecks;
+  if (title.includes('报备任务')) return ClipboardList;
+  if (title.includes('任务进度')) return TrendingUp;
+  if (title.includes('充值') || title.includes('账单')) return ReceiptText;
+  if (title.includes('企业黑名单')) return UserX;
+  if (title.includes('全局黑名单')) return ShieldOff;
+  if (title.includes('敏感词')) return Shield;
+  if (title.includes('用户')) return Users;
+  if (title.includes('手机号段')) return Phone;
+  if (title.includes('引流信息字段')) return Hash;
+  if (title.includes('系统配置')) return Settings;
+  if (title.includes('企业应用')) return Layers3;
+  if (title.includes('企业签名') || title.includes('签名')) return FilePenLine;
+  if (title.includes('企业') || title.includes('客户')) return Building2;
+  return FileCheck2;
+}

src/components/ui/index.ts

@@ -1,4 +1,5 @@
 export { Button } from './Button';
+export { Breadcrumb } from './Breadcrumb';
 export { Chart } from './Chart';
 export { DateRangeInput } from './DateRangeInput';
 export { DateTimeInput } from './DateTimeInput';