Merge branch 'feat/metering' of gitea.internetapi.cn:iod/page-assist into feat/page

src/components/Option/Metering/ListDetail.tsx

@@ -0,0 +1,168 @@
+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>
+  )
+}