87 lines
3.2 KiB
TypeScript
87 lines
3.2 KiB
TypeScript
/*
|
|
* @Author: ZhaoYing
|
|
* @Date: 2026-02-03 17:28:07
|
|
* @Last Modified by: ZhaoYing
|
|
* @Last Modified time: 2026-02-11 14:57:55
|
|
*/
|
|
/**
|
|
* Top Card List Component
|
|
* Displays dashboard summary cards for key metrics
|
|
* Shows total memory capacity, applications, knowledge bases, and API calls
|
|
*/
|
|
|
|
import { type FC } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import clsx from 'clsx';
|
|
import { Flex } from 'antd';
|
|
|
|
import type { DashboardData } from '../index'
|
|
|
|
/** Card configuration with styling */
|
|
const list = [
|
|
{
|
|
key: 'total_memory',
|
|
background: 'rb:bg-[url("@/assets/images/home/totalMemoryCapacity.png")] rb:bg-cover rb:bg-no-repeat',
|
|
},
|
|
{
|
|
key: 'total_app',
|
|
},
|
|
{
|
|
key: 'total_knowledge',
|
|
},
|
|
{
|
|
key: 'total_api_call',
|
|
},
|
|
]
|
|
/**
|
|
* Component props
|
|
* @param data - Dashboard statistics data
|
|
*/
|
|
const TopCardList: FC<{data?: DashboardData}> = ({ data }) => {
|
|
const { t } = useTranslation()
|
|
return (
|
|
<div className="rb:grid rb:grid-cols-2 rb:gap-3">
|
|
{list.map((item) => {
|
|
return (
|
|
<div
|
|
key={item.key}
|
|
className={`rb:rounded-2xl rb:bg-[#FFFFFF] rb:py-4 rb:px-3 ${item.background || ''}`}
|
|
>
|
|
<div className={clsx("rb:text-[12px] rb:leading-4", {
|
|
'rb:text-[#FFFFFF]': item.key === 'total_memory',
|
|
'rb:text-[#5B6167]': item.key !== 'total_memory',
|
|
})}>{t(`dashboard.${item.key}`)}</div>
|
|
|
|
<div className={clsx("rb:text-[20px] rb:font-bold rb:leading-7 rb:mt-1 rb:font-[MiSans-Bold]", {
|
|
'rb:text-[#FFFFFF]': item.key === 'total_memory',
|
|
})}>
|
|
{data?.[item.key as keyof DashboardData] || 0}
|
|
</div>
|
|
|
|
<Flex align="center" className={clsx('rb:font-medium rb:mt-7.5!', {
|
|
'rb:text-[#FF5D34]': data?.[`${item.key}_change` as keyof DashboardData] && data?.[`${item.key}_change` as keyof DashboardData] < 0,
|
|
'rb:text-[#369F21]': !data?.[`${item.key}_change` as keyof DashboardData] || data?.[`${item.key}_change` as keyof DashboardData] >= 0,
|
|
})}>
|
|
{data?.[`${item.key}_change` as keyof DashboardData] && data?.[item.key as keyof DashboardData] > 0
|
|
? (100 * data?.[`${item.key}_change` as keyof DashboardData] / data?.[item.key as keyof DashboardData]).toFixed(2)
|
|
: 0
|
|
}%
|
|
<div className={clsx("rb:size-3.5 rb:cursor-pointer rb:bg-cover", {
|
|
"rb:bg-[url('@/assets/images/home/arrow_down.png')]": data?.[`${item.key}_change` as keyof DashboardData] && data?.[`${item.key}_change` as keyof DashboardData] < 0,
|
|
"rb:bg-[url('@/assets/images/home/arrow_up_success.svg')]": !data?.[`${item.key}_change` as keyof DashboardData] || data?.[`${item.key}_change` as keyof DashboardData] >= 0,
|
|
})}></div>
|
|
</Flex>
|
|
<div className={clsx("rb:text-[12px] rb:leading-4 rb:mt-0.5", {
|
|
'rb:text-[#FFFFFF]': item.key === 'total_memory',
|
|
'rb:text-[#5B6167]': item.key !== 'total_memory',
|
|
})}>
|
|
{t('dashboard.comparedToYesterday')}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TopCardList |