refactor(components): 优化计量详情页面布局和内容展示

-调整表格列宽和样式，提高可读性
- 添加数联网引用token总数字段
- 修改数联网引用数据卡片为表格形式
- 优化输入和输出token详情的样式
-调整列表布局，增加全宽样式

src/components/Option/Metering/detail.tsx

@@ -84,7 +84,7 @@ const columns: TableProps<MeteringEntry>["columns"] = [
     dataIndex: "date",
     key: "date",
     render: (date) => {
-      return <div>{formatDate(date ?? new Date())}</div>
+      return <div>{formatDate(new Date(date))}</div>
     }
   },
   {

src/components/Option/Metering/listDetail.tsx

@@ -2,14 +2,13 @@ import {
   Card,
   List,
   Table,
-  Tag,
   Space,
   TableProps,
   Divider,
   Typography,
   Tooltip
 } from "antd"
-import { NavLink, useParams } from "react-router-dom"
+import { useParams } from "react-router-dom"
 import { useStoreMessageOption } from "@/store/option.tsx"
 import { useMemo } from "react"
 
@@ -24,26 +23,28 @@ interface DataType {
 
 const columns: TableProps<DataType>["columns"] = [
   {
-    title: '序号',
-    key: 'index',
+    title: "序号",
+    key: "index",
     width: 100,
-    render: (_text, _record, index) => index + 1, // 索引从0开始，+1后从1显示
+    render: (_text, _record, index) => index + 1 // 索引从0开始，+1后从1显示
   },
   {
     title: "标识",
     dataIndex: "doId",
-    key: "doId"
+    key: "doId",
+    width: 350
   },
   {
     title: "提供方",
     dataIndex: "data_space",
-    key: "data_space"
+    key: "data_space",
+    width: 250
   },
   {
-    title: "token数量",
+    title: "token数",
     key: "tokenCount",
     dataIndex: "tokenCount",
-    width: 100
+    width: 120
   },
   {
     title: "内容",
@@ -70,6 +71,10 @@ export const ListDetail = () => {
 
   const modelData = useMemo(
     () => [
+      {
+        key: "数联网引用token总数",
+        value: record.iodTokenCount
+      },
       {
         key: "大模型输入token数",
         value: record.modelInputTokenCount
@@ -129,7 +134,7 @@ export const ListDetail = () => {
   return (
     <div className="p-[1rem] pt-[4rem]">
       <List
-        grid={{ gutter: 16, column: 3 }}
+        grid={{ gutter: 16, column: 4 }}
         dataSource={modelData}
         renderItem={(item) => (
           <List.Item>
@@ -139,7 +144,12 @@ export const ListDetail = () => {
         style={{ marginBottom: "2rem" }}
       />
 
-      <Space direction="vertical" size={10}>
+      <Space direction="vertical" className="w-full" size={10}>
+        <Divider orientation="left">数联网引用数据</Divider>
+        <Table<DataType> columns={columns} dataSource={record.iodData} />
+      </Space>
+
+      <Space direction="vertical" className="w-full" size={10}>
         <Divider orientation="left">输入token详情</Divider>
         <List
           bordered
@@ -147,22 +157,24 @@ export const ListDetail = () => {
           dataSource={inputTokenData}
           renderItem={(item) => (
             <List.Item style={{ justifyContent: "flex-start" }}>
-              <Typography.Paragraph  style={{ marginBottom: 0 }} className="mr-1">
+              <Typography.Paragraph
+                style={{ marginBottom: 0 }}
+                className="mr-1">
                 {item.key}
               </Typography.Paragraph>
-              <Tooltip placement="topLeft" style={{ marginBottom: 0 }} title={item.value}>
+              <Tooltip
+                placement="topLeft"
+                style={{ marginBottom: 0 }}
+                title={item.value}>
                 {item.value}
               </Tooltip>
             </List.Item>
           )}
           style={{ marginBottom: "1rem" }}
         />
-        <Card title="数联网引用数据">
-          <Table<DataType> columns={columns} dataSource={record.iodData} />
-        </Card>
       </Space>
 
-      <Space direction="vertical" size={10}>
+      <Space direction="vertical" className="w-full" size={10}>
         <Divider orientation="left">输出token详情</Divider>
         <List
           bordered
@@ -170,8 +182,13 @@ export const ListDetail = () => {
           header={<div>数联网搜索关键词</div>}
           renderItem={(item) => (
             <List.Item style={{ justifyContent: "flex-start" }}>
-              <Typography.Text className="mr-1" style={{ marginBottom: 0 }}>{item.key}</Typography.Text>
-              <Tooltip  style={{ marginBottom: 0 }} placement="topLeft" title={item.value}>
+              <Typography.Text className="mr-1" style={{ marginBottom: 0 }}>
+                {item.key}
+              </Typography.Text>
+              <Tooltip
+                style={{ marginBottom: 0 }}
+                placement="topLeft"
+                title={item.value}>
                 {item.value}
               </Tooltip>
             </List.Item>