Merge branch 'feat/metering' of gitea.internetapi.cn:iod/page-assist into feat/page
This commit is contained in:
李芳
@@ -5,6 +5,7 @@ import {
|
||||
ChevronRight,
|
||||
CogIcon,
|
||||
ComputerIcon,
|
||||
Slice,
|
||||
GithubIcon,
|
||||
PanelLeftIcon,
|
||||
ZapIcon
|
||||
@@ -240,7 +241,14 @@ export const Header: React.FC<Props> = ({
|
||||
<CogIcon className="w-6 h-6" />
|
||||
</NavLink>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Tooltip title={t("metering")}>
|
||||
<NavLink
|
||||
to="/metering"
|
||||
className="!text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
|
||||
<Slice className="w-6 h-6" />
|
||||
</NavLink>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
168
src/components/Option/Metering/ListDetail.tsx
Normal file
168
src/components/Option/Metering/ListDetail.tsx
Normal file
@@ -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>
|
||||
)
|
||||
}
|
||||
137
src/components/Option/Metering/detail.tsx
Normal file
137
src/components/Option/Metering/detail.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
import React from "react"
|
||||
import { ChatMessage, useStoreMessageOption } from "@/store/option"
|
||||
import { Card, List, Table, Tag, Space, TableProps, Tooltip } from "antd"
|
||||
import { NavLink } from "react-router-dom"
|
||||
import { formatDate } from "@/utils/date"
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: "对话数量",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
key: "输出token数",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
key: "输入token数",
|
||||
value: 2
|
||||
}
|
||||
]
|
||||
|
||||
const columns: TableProps<ChatMessage>["columns"] = [
|
||||
{
|
||||
title: "id",
|
||||
dataIndex: "id",
|
||||
key: "id",
|
||||
width: "13%"
|
||||
},
|
||||
{
|
||||
title: "问题",
|
||||
dataIndex: "query",
|
||||
key: "query"
|
||||
},
|
||||
{
|
||||
title: "提示词全文",
|
||||
dataIndex: "prompt",
|
||||
key: "prompt",
|
||||
ellipsis: {
|
||||
showTitle: false
|
||||
},
|
||||
render: (prompt) => (
|
||||
<Tooltip placement="topLeft" title={prompt}>
|
||||
{prompt}
|
||||
</Tooltip>
|
||||
),
|
||||
width: "10%"
|
||||
},
|
||||
{
|
||||
title: "思维链",
|
||||
key: "thinkingChain",
|
||||
dataIndex: "thinkingChain",
|
||||
width: "10%"
|
||||
},
|
||||
|
||||
{
|
||||
title: "回答",
|
||||
dataIndex: "answer",
|
||||
key: "answer",
|
||||
ellipsis: {
|
||||
showTitle: false
|
||||
},
|
||||
render: (answer) => (
|
||||
<Tooltip placement="topLeft" title={answer}>
|
||||
{answer}
|
||||
</Tooltip>
|
||||
),
|
||||
width: "10%"
|
||||
},
|
||||
{
|
||||
title: "关联数据个数",
|
||||
dataIndex: "relatedDataCount",
|
||||
key: "relatedDataCount"
|
||||
},
|
||||
{
|
||||
title: "数联网token",
|
||||
dataIndex: "iodOutputToken",
|
||||
key: "iodOutputToken",
|
||||
render: (iodOutputToken) => <div>{iodOutputToken.length}</div>
|
||||
},
|
||||
{
|
||||
title: "大模型token",
|
||||
key: "largeModelToken",
|
||||
dataIndex: "largeModelToken",
|
||||
render: (_, record) => {
|
||||
return (
|
||||
<div>{record.iodInputToken.length + record.iodOutputToken.length}</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "日期",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
render: (date) => {
|
||||
return <div>{formatDate(date)}</div>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "耗时",
|
||||
key: "timeTaken",
|
||||
dataIndex: "timeTaken"
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
render: (_, record) => (
|
||||
<Space size="middle">
|
||||
{/* <a>Invite {record.name}</a> */}
|
||||
|
||||
<NavLink to={`/metering/list/${record.id}`}>
|
||||
<a>Detail</a>
|
||||
</NavLink>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
]
|
||||
|
||||
export const MeteringDetail = () => {
|
||||
const { chatMessages } = useStoreMessageOption()
|
||||
console.log(chatMessages, "opppp")
|
||||
|
||||
return (
|
||||
<div className="pt-[4rem]">
|
||||
<List
|
||||
grid={{ gutter: 16, column: 3 }}
|
||||
dataSource={data}
|
||||
renderItem={(item) => (
|
||||
<List.Item>
|
||||
<Card title={item.key}>{item.value}</Card>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Table<ChatMessage> columns={columns} dataSource={chatMessages} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user