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: '序号',
+    title: "序号",
-    key: 'index',
+    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>
+              <Typography.Text className="mr-1" style={{ marginBottom: 0 }}>
-              <Tooltip  style={{ marginBottom: 0 }} placement="topLeft" title={item.value}>
+                {item.key}
+              </Typography.Text>
+              <Tooltip
+                style={{ marginBottom: 0 }}
+                placement="topLeft"
+                title={item.value}>
                 {item.value}
               </Tooltip>
             </List.Item>

src/hooks/useMessageOption.tsx

@@ -194,7 +194,7 @@ export const useMessageOption = () => {
     const meter: MeteringEntry = {
       id: generateMessageId,
       queryContent: message,
-      date: new Date()
+      date: new Date().getTime()
     } as MeteringEntry
 
     if (!isRegenerate) {
@@ -489,20 +489,22 @@ export const useMessageOption = () => {
 
       // Save metering entry
       const { cot, content } = responseResolver(fullText)
-      setMeteringEntries([ {
+      const _meteringEntries = [{
         ...meter,
         modelInputTokenCount: prompt.length,
         modelOutputTokenCount: fullText.length,
-        model: ollama.modelName,
+        model: ollama.modelName ?? ollama.model,
         relatedDataCount: iodData?.length ?? 0,
-        timeTaken: new Date().getTime() - meter.date.getTime(),
+        timeTaken: new Date().getTime() - chatStartTime.getTime(),
-        date: chatStartTime,
+        date: chatStartTime.getTime(),
         cot,
         responseContent: content,
         modelResponseContent: fullText,
       },
         ...meteringEntries,
-      ])
+      ]
+      setMeteringEntries(_meteringEntries)
+      localStorage.setItem("meteringEntries", JSON.stringify(_meteringEntries))
     } catch (e) {
       const errorSave = await saveMessageOnError({
         e,

src/store/option.tsx

@@ -100,7 +100,7 @@ export type MeteringEntry = {
   // 大模型输出token数量
   modelOutputTokenCount: number
   // 日期
-  date: Date
+  date: number
   // 耗时
   timeTaken: number
   // 大模型回答的全部内容
@@ -120,7 +120,7 @@ export const useStoreMessageOption = create<State>((set) => ({
   setMessages: (messages) => set({ messages }),
   history: [],
   setHistory: (history) => set({ history }),
-  meteringEntries: [],
+  meteringEntries: JSON.parse(localStorage.getItem("meteringEntries") || JSON.stringify([])),
   setMeteringEntries: (meteringEntries) => set({ meteringEntries }),
   streaming: false,
   setStreaming: (streaming) => set({ streaming }),