page-assist/src/components/Option/Metering/ListDetail.tsx

import {
  Card,
  List,
  Table,
  Tag,
  Space,
  TableProps,
  Divider,
  Typography
} from "antd"
import { NavLink } from "react-router-dom"

const data = [
  {
    key: "输出token数",
    value: 2
  },
  {
    key: "输入token数",
    value: 2
  },
  {
    key: "模型",
    value: "xxx"
  }
]

const outputTokenData = [
  {
    key: "关键词提示",
    value: "xxx"
  },
  {
    key: "问题",
    value: "xxx"
  },
  {
    key: "数联网引用数据",
    value: "xxx"
  },
  {
    key: "提供方",
    value: "xxx"
  },
  {
    key: "token数量",
    value: 2
  },
  {
    key: "内容",
    value: "xxx"
  }
]

interface DataType {
  key: string
  name: string
  age: number
  address: string
  tags: string[]
}

const columns: TableProps<DataType>["columns"] = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    render: (text) => <a>{text}</a>
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age"
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address"
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? "geekblue" : "green"
          if (tag === "loser") {
            color = "volcano"
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          )
        })}
      </>
    )
  },
  {
    title: "Action",
    key: "action",
    render: (_, record) => (
      <Space size="middle">
        {/* <a>Invite {record.name}</a> */}

        <NavLink to="/metering/list/123">
          <a>Detail</a>
        </NavLink>
      </Space>
    )
  }
]

const data1: DataType[] = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"]
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["loser"]
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sydney No. 1 Lake Park",
    tags: ["cool", "teacher"]
  }
]

export const ListDetail = () => {
  return (
    <div className="p-[1rem] pt-[4rem]">
      <List
        grid={{ gutter: 16, column: 3 }}
        dataSource={data}
        renderItem={(item) => (
          <List.Item>
            <Card title={item.key}>{item.value}</Card>
          </List.Item>
        )}
      />

      <div className="mb-[50px]">
        <Divider orientation="left">输出token详情</Divider>
        <List
          bordered
          dataSource={outputTokenData}
          renderItem={(item) => (
            <List.Item>
              <Typography.Text mark>{item.key}</Typography.Text> {item.value}
            </List.Item>
          )}
        />
      </div>

      <Table<DataType> columns={columns} dataSource={data1} />
    </div>
  )
}