feat: Add base project structure with API and web components
This commit is contained in:
Ke Sun
97
web/src/views/Home/components/TopCardList/index.module.css
Normal file
97
web/src/views/Home/components/TopCardList/index.module.css
Normal file
@@ -0,0 +1,97 @@
|
||||
.card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid #DFE4ED;
|
||||
padding: 0;
|
||||
}
|
||||
.header {
|
||||
padding: 20px;
|
||||
line-height: 44px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #5B6167;
|
||||
font-style: normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #DFE4ED;
|
||||
}
|
||||
.avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 2px 6px 0px rgba(33, 35, 50, 0.1);
|
||||
border-radius: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.avatar img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.content {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: Gilroy, Gilroy;
|
||||
font-weight: 800;
|
||||
font-size: 28px;
|
||||
color: #212332;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
.content-right {
|
||||
text-align: right;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #5F6266;
|
||||
line-height: 16px;
|
||||
font-style: normal;
|
||||
row-gap: 4px;
|
||||
}
|
||||
.trend {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
font-style: normal;
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
.trend::before {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 1px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.trend.up {
|
||||
color: #369F21;
|
||||
}
|
||||
.trend.up::before {
|
||||
background-image: url('@/assets/images/home/arrow_up_success.svg');
|
||||
}
|
||||
.trend.down {
|
||||
color: #FF5D34;
|
||||
}
|
||||
.trend.down::before {
|
||||
background-image: url('@/assets/images/home/arrow_down.png');
|
||||
}
|
||||
|
||||
.trend-desc {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #155EEF;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
81
web/src/views/Home/components/TopCardList/index.tsx
Normal file
81
web/src/views/Home/components/TopCardList/index.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import { type FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import totalMemoryCapacity from '@/assets/images/home/totalMemoryCapacity.svg';
|
||||
import userMemory from '@/assets/images/home/userMemory.svg';
|
||||
import knowledgeBaseCount from '@/assets/images/home/knowledgeBaseCount.svg';
|
||||
import apiCallCount from '@/assets/images/home/apiCallCount.svg';
|
||||
import styles from './index.module.css'
|
||||
import clsx from 'clsx';
|
||||
import type { DashboardData } from '../../index'
|
||||
|
||||
const list = [
|
||||
{
|
||||
key: 'totalMemoryCapacity',
|
||||
icon: totalMemoryCapacity,
|
||||
// value: '45,678',
|
||||
// trendValue: '12.5%',
|
||||
// trend: 'up',
|
||||
// trendDesc: 'comparedToYesterday',
|
||||
background: 'linear-gradient(180deg, #E6EFFE 0%, #F9FDFF 100%)',
|
||||
},
|
||||
{
|
||||
key: 'application',
|
||||
icon: userMemory,
|
||||
// value: '32,145',
|
||||
// trendValue: '12.5%',
|
||||
// trend: 'down',
|
||||
// trendDesc: 'comparedToYesterday',
|
||||
background: 'linear-gradient( 180deg, #F1FBF5 0%, #F9FDFF 100%)',
|
||||
},
|
||||
{
|
||||
key: 'knowledgeBaseCount',
|
||||
icon: knowledgeBaseCount,
|
||||
// value: '13,533',
|
||||
// trendValue: '15.7%',
|
||||
// trend: 'up',
|
||||
// trendDesc: 'thisWeek',
|
||||
background: 'linear-gradient( 180deg, #E6F5FE 0%, #FBFDFF 100%)',
|
||||
},
|
||||
{
|
||||
key: 'apiCallCount',
|
||||
icon: apiCallCount,
|
||||
// value: '856.2k',
|
||||
// trendValue: '23.1%',
|
||||
// trend: 'up',
|
||||
// trendDesc: 'comparedToYesterday',
|
||||
background: 'linear-gradient( 180deg, #F8F6F5 0%, #FAFDFF 100%)',
|
||||
},
|
||||
]
|
||||
const TopCardList: FC<{data?: DashboardData}> = ({ data }) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className="rb:grid rb:grid-cols-4 rb:gap-[16px]">
|
||||
{list.map((item) => {
|
||||
return (
|
||||
<div
|
||||
key={item.key}
|
||||
className={styles.card}
|
||||
style={{
|
||||
background: item.background,
|
||||
}}
|
||||
>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.avatar}><img src={item.icon} /></div>
|
||||
<div className={styles.headerTitle}>{t(`dashboard.${item.key}`)}</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.content}>
|
||||
{data?.[item.key] || item.value || 0}
|
||||
<div className={styles.contentRight}>
|
||||
{item.trendValue && <div className={clsx(styles.trend, styles[item.trend])}>{item.trendValue}</div>}
|
||||
{item.trendDesc && <div>{t(`dashboard.${item.trendDesc}`)}</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TopCardList
|
||||
Reference in New Issue
Block a user