feat: metring and detail pages

src/components/Option/Metering/ListDetail.tsx

@@ -6,7 +6,8 @@ import {
   Space,
   TableProps,
   Divider,
-  Typography
+  Typography,
+  Tooltip
 } from "antd"
 import { NavLink } from "react-router-dom"
 
@@ -25,7 +26,7 @@ const data = [
   }
 ]
 
-const outputTokenData = [
+const inputTokenData = [
   {
     key: "关键词提示",
     value: "xxx"
@@ -51,64 +52,60 @@ const outputTokenData = [
     value: "xxx"
   }
 ]
+const outputTokenData = [
+  {
+    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[]
+  tags: number
+  content: string
 }
 
 const columns: TableProps<DataType>["columns"] = [
   {
-    title: "Name",
+    title: "序号",
-    dataIndex: "name",
+    dataIndex: "key",
     key: "name",
     render: (text) => <a>{text}</a>
   },
   {
-    title: "Age",
+    title: "标识",
     dataIndex: "age",
     key: "age"
   },
   {
-    title: "Address",
+    title: "提供方",
     dataIndex: "address",
     key: "address"
   },
   {
-    title: "Tags",
+    title: "token数量",
     key: "tags",
-    dataIndex: "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",
+    title: "内容",
-    key: "action",
+    key: "content",
-    render: (_, record) => (
+    dataIndex: "content"
-      <Space size="middle">
-        {/* <a>Invite {record.name}</a> */}
-
-        <NavLink to="/metering/list/123">
-          <a>Detail</a>
-        </NavLink>
-      </Space>
-    )
   }
 ]
 
@@ -118,21 +115,24 @@ const data1: DataType[] = [
     name: "John Brown",
     age: 32,
     address: "New York No. 1 Lake Park",
-    tags: ["nice", "developer"]
+    tags: 2,
+    content: "内容"
   },
   {
     key: "2",
     name: "Jim Green",
     age: 42,
     address: "London No. 1 Lake Park",
-    tags: ["loser"]
+    tags: 3,
+    content: "内容"
   },
   {
     key: "3",
     name: "Joe Black",
     age: 32,
     address: "Sydney No. 1 Lake Park",
-    tags: ["cool", "teacher"]
+    tags: 3,
+    content: "内容"
   }
 ]
 
@@ -147,22 +147,46 @@ export const ListDetail = () => {
             <Card title={item.key}>{item.value}</Card>
           </List.Item>
         )}
+        style={{ marginBottom: "2rem" }}
       />
 
-      <div className="mb-[50px]">
+      <div>
+        <Divider orientation="left">输入token详情</Divider>
+        <List
+          bordered
+          dataSource={inputTokenData}
+          renderItem={(item) => (
+            <List.Item style={{ justifyContent: "flex-start" }}>
+              <Typography.Text mark className="mr-1">
+                {item.key}
+              </Typography.Text>
+              <Tooltip placement="topLeft" title={item.value}>
+                {item.value}
+              </Tooltip>
+            </List.Item>
+          )}
+          style={{ marginBottom: "1rem" }}
+        />
+        <Table<DataType> columns={columns} dataSource={data1} />
+      </div>
+
+      <div>
         <Divider orientation="left">输出token详情</Divider>
         <List
           bordered
           dataSource={outputTokenData}
           renderItem={(item) => (
-            <List.Item>
+            <List.Item style={{ justifyContent: "flex-start" }}>
-              <Typography.Text mark>{item.key}</Typography.Text> {item.value}
+              <Typography.Text mark className="mr-1">
+                {item.key}
+              </Typography.Text>
+              <Tooltip placement="topLeft" title={item.value}>
+                {item.value}
+              </Tooltip>
             </List.Item>
           )}
         />
       </div>
-
-      <Table<DataType> columns={columns} dataSource={data1} />
     </div>
   )
 }

src/components/Option/Metering/detail.tsx

@@ -28,8 +28,8 @@ const columns: TableProps<ChatMessage>["columns"] = [
   },
   {
     title: "问题",
-    dataIndex: "query",
+    dataIndex: "queryContent",
-    key: "query"
+    key: "queryContent"
   },
   {
     title: "提示词全文",
@@ -54,14 +54,14 @@ const columns: TableProps<ChatMessage>["columns"] = [
 
   {
     title: "回答",
-    dataIndex: "answer",
+    dataIndex: "responseContent",
-    key: "answer",
+    key: "responseContent",
     ellipsis: {
       showTitle: false
     },
-    render: (answer) => (
+    render: (responseContent) => (
-      <Tooltip placement="topLeft" title={answer}>
+      <Tooltip placement="topLeft" title={responseContent}>
-        {answer}
+        {responseContent}
       </Tooltip>
     ),
     width: "10%"
@@ -75,7 +75,7 @@ const columns: TableProps<ChatMessage>["columns"] = [
     title: "数联网token",
     dataIndex: "iodOutputToken",
     key: "iodOutputToken",
-    render: (iodOutputToken) => <div>{iodOutputToken.length}</div>
+    render: (iodOutputToken) => <div>{iodOutputToken?.length}</div>
   },
   {
     title: "大模型token",
@@ -83,7 +83,9 @@ const columns: TableProps<ChatMessage>["columns"] = [
     dataIndex: "largeModelToken",
     render: (_, record) => {
       return (
-        <div>{record.iodInputToken.length + record.iodOutputToken.length}</div>
+        <div>
+          {record.iodInputToken?.length + record.iodOutputToken?.length}
+        </div>
       )
     }
   },
@@ -108,7 +110,7 @@ const columns: TableProps<ChatMessage>["columns"] = [
         {/* <a>Invite {record.name}</a> */}
 
         <NavLink to={`/metering/list/${record.id}`}>
-          <a>Detail</a>
+          <a>详情</a>
         </NavLink>
       </Space>
     )