lislgosms/src/apps/client/ClientApplicationsPage.tsx

import { useState } from 'react';
import { ClipboardCopy, FileText } from 'lucide-react';
import { Button, Modal, Tag } from '@/components/ui';

type LinkStatus = 'connected' | 'disconnected' | 'inactive';

type SmsApplication = {
  id: string;
  name: string;
  appid: string;
  todaySuccess: number;
  deliveryRate?: number;
  price: string;
  score?: string;
  status: LinkStatus;
  params: Array<{ label: string; value: string; highlight?: boolean }>;
};

const statusLabelMap: Record<LinkStatus, string> = {
  connected: '已连接',
  disconnected: '已断',
  inactive: '未开通',
};

const statusToneMap: Record<LinkStatus, 'success' | 'danger' | 'info'> = {
  connected: 'success',
  disconnected: 'danger',
  inactive: 'info',
};

const applications: SmsApplication[] = [
  {
    id: 'app-1',
    name: '营销推广平台',
    appid: 'AK_2024010912345678',
    todaySuccess: 1500,
    deliveryRate: 95,
    price: '0.050 元',
    score: '100分',
    status: 'connected',
    params: [
      { label: 'ID', value: '113009756' },
      { label: '企业名', value: '启瑞物业三网' },
      { label: '开通时间', value: '2023-12-13' },
      { label: '企业代码', value: 'qrhyyd' },
      { label: '账号', value: 'qrhyyd' },
      { label: '密码', value: 'm6yZvZKn', highlight: true },
      { label: '网关IP', value: '121.40.172.212' },
      { label: '网关端口', value: '7890' },
      { label: '接入号', value: '106999999' },
      { label: '绑定IP', value: '61.129.57.48' },
      { label: '连接数', value: '1' },
    ],
  },
  {
    id: 'app-2',
    name: '客服系统',
    appid: 'AK_2024010987654321',
    todaySuccess: 800,
    deliveryRate: 90,
    price: '0.060 元',
    score: '80分',
    status: 'disconnected',
    params: [
      { label: 'ID', value: '113009812' },
      { label: '企业名', value: '客服系统三网' },
      { label: '开通时间', value: '2024-01-09' },
      { label: '企业代码', value: 'kfxt' },
      { label: '账号', value: 'kfxt' },
      { label: '密码', value: 'r8xKvP2m', highlight: true },
      { label: '网关IP', value: '121.40.172.213' },
      { label: '网关端口', value: '7890' },
      { label: '接入号', value: '106988888' },
      { label: '绑定IP', value: '61.129.57.49' },
      { label: '连接数', value: '1' },
    ],
  },
  {
    id: 'app-3',
    name: '验证码服务',
    appid: 'AK_2024010811223344',
    todaySuccess: 0,
    price: '0.040 元',
    status: 'inactive',
    params: [
      { label: 'ID', value: '-' },
      { label: '企业名', value: '验证码服务' },
      { label: '开通时间', value: '-' },
      { label: '企业代码', value: '-' },
      { label: '账号', value: '-' },
      { label: '密码', value: '-' },
      { label: '网关IP', value: '-' },
      { label: '网关端口', value: '-' },
      { label: '接入号', value: '-' },
      { label: '绑定IP', value: '-' },
      { label: '连接数', value: '-' },
    ],
  },
];

export function ClientApplicationsPage() {
  const [selectedApp, setSelectedApp] = useState<SmsApplication | null>(null);

  return (
    <section className="page-stack">
      <div className="sms-send-title">
        <span className="sms-send-title__icon">
          <FileText size={22} />
        </span>
        <h1>短信应用列表</h1>
        <span className="muted">共 {applications.length} 个应用</span>
      </div>

      <div className="sms-app-grid">
        {applications.map((application) => (
          <article className="sms-app-card" key={application.id}>
            <h2>{application.name}</h2>
            <dl>
              <div>
                <dt>appid</dt>
                <dd>{application.appid}</dd>
              </div>
              <div>
                <dt>今日发送成功</dt>
                <dd>{application.todaySuccess.toLocaleString('zh-CN')} 条</dd>
              </div>
              <div>
                <dt>到达率</dt>
                <dd>{application.deliveryRate ? `${application.deliveryRate}%` : '-'}</dd>
              </div>
              <div>
                <dt>单价</dt>
                <dd>{application.price}{application.score ? <span>（{application.score}）</span> : null}</dd>
              </div>
              <div>
                <dt>CMPP链接状态</dt>
                <dd><Tag tone={statusToneMap[application.status]}>{statusLabelMap[application.status]}</Tag></dd>
              </div>
            </dl>
            <Button onClick={() => setSelectedApp(application)} variant="ghost">查看对接参数</Button>
          </article>
        ))}
      </div>

      <Modal
        footer={<Button icon={<ClipboardCopy size={16} />}>复制参数</Button>}
        onClose={() => setSelectedApp(null)}
        open={Boolean(selectedApp)}
        size="xl"
        title="接口参数"
      >
        {selectedApp ? (
          <div className="sms-app-param-table">
            {selectedApp.params.map((item) => (
              <div key={item.label}>
                <span>{item.label}</span>
                <strong className={item.highlight ? 'text-blue' : undefined}>{item.value}</strong>
              </div>
            ))}
          </div>
        ) : null}
      </Modal>
    </section>
  );
}