adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): home add trend value

Browse Source
This commit is contained in:
zhaoying
2026-04-01 17:32:21 +08:00
parent 0d15457299
commit 378b110d91
4 changed files with 35 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/i18n/en.ts
View File

@@ -131,15 +131,15 @@ export const en = {
desc_spaces: 'compared to last week',
desc_users: 'New additions this week',
desc_running_apps: "Today's success rate",
totalMemoryCapacity: 'Total Stored Memories',
total_memory: 'Total Stored Memories',
userMemory: 'User Memory',
knowledgeBaseCount: 'Knowledge Bases',
apiCallCount: 'API Calls',
total_knowledge: 'Knowledge Bases',
total_api_call: 'API Calls',
comparedToYesterday: 'compared to yesterday',
thisWeek: 'this week',
thisDay: 'day on day',
failureRate: 'Failure Rate',
application: 'Applications',
total_app: 'Applications',
total_num: 'Total Memory Capacity',
lastDays: 'last {{days}} days',

8
web/src/i18n/zh.ts
View File

@@ -842,15 +842,15 @@ export const zh = {
desc_spaces: '多于上周',
desc_users: '本周新增',
desc_running_apps: '今日成功率',
totalMemoryCapacity: '总记忆容量',
total_memory: '总记忆容量',
userMemory: '用户记忆',
knowledgeBaseCount: '知识库数量',
apiCallCount: 'API调用次数',
total_knowledge: '知识库数量',
total_api_call: 'API调用次数',
comparedToYesterday: '与昨天相比',
thisWeek: '本周',
thisDay: '本日',
failureRate: '故障率',
application: '应用数量',
total_app: '应用数量',
total_num: '总记忆容量',
lastDays: '最近{{days}}天',

59
web/src/views/Home/components/TopCardList.tsx
View File

@@ -15,49 +15,22 @@ import { useTranslation } from 'react-i18next'
import clsx from 'clsx';
import { Flex } from 'antd';
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 type { DashboardData } from '../index'
/** Card configuration with styling */
const list = [
{
key: 'totalMemoryCapacity',
icon: totalMemoryCapacity,
// value: '45,678',
// trendValue: '12.5%',
// trend: 'up',
// trendDesc: 'comparedToYesterday',
key: 'total_memory',
background: 'rb:bg-[url("@/assets/images/home/totalMemoryCapacity.png")] rb:bg-cover rb:bg-no-repeat',
},
{
key: 'application',
icon: userMemory,
// value: '32,145',
// trendValue: '12.5%',
// trend: 'down',
// trendDesc: 'comparedToYesterday',
// background: 'linear-gradient( 180deg, #F1FBF5 0%, #F9FDFF 100%)',
key: 'total_app',
},
{
key: 'knowledgeBaseCount',
icon: knowledgeBaseCount,
// value: '13,533',
// trendValue: '15.7%',
// trend: 'up',
// trendDesc: 'thisWeek',
// background: 'linear-gradient( 180deg, #E6F5FE 0%, #FBFDFF 100%)',
key: 'total_knowledge',
},
{
key: 'apiCallCount',
icon: apiCallCount,
// value: '856.2k',
// trendValue: '23.1%',
// trend: 'up',
// trendDesc: 'comparedToYesterday',
// background: 'linear-gradient( 180deg, #F8F6F5 0%, #FAFDFF 100%)',
key: 'total_api_call',
},
]
/**
@@ -75,30 +48,32 @@ const TopCardList: FC<{data?: DashboardData}> = ({ data }) => {
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 === 'totalMemoryCapacity',
'rb:text-[#5B6167]': item.key !== 'totalMemoryCapacity',
'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 === 'totalMemoryCapacity',
// 'rb:text-[#171719]': item.key !== 'totalMemoryCapacity',
'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-[#FFFFFF]': item.key === 'totalMemoryCapacity',
'rb:text-[#369F21]': item.key !== 'totalMemoryCapacity',
'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,
})}>
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_up.svg')]": item.key === 'totalMemoryCapacity',
"rb:bg-[url('@/assets/images/home/arrow_up_success.svg')]": item.key !== 'totalMemoryCapacity',
"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 === 'totalMemoryCapacity',
'rb:text-[#5B6167]': item.key !== 'totalMemoryCapacity',
'rb:text-[#FFFFFF]': item.key === 'total_memory',
'rb:text-[#5B6167]': item.key !== 'total_memory',
})}>
{t('dashboard.comparedToYesterday')}
</div>

21
web/src/views/Home/index.tsx
View File

@@ -25,14 +25,18 @@ import ApiLineCard from './components/ApiLineCard'
* Dashboard statistics data
*/
export interface DashboardData {
totalMemoryCapacity?: number;
application?: number;
knowledgeBaseCount?: number;
apiCallCount?: number;
total_memory: number;
total_app: number;
total_knowledge: number;
total_api_call: number;
total_memory_change: number;
total_app_change: number;
total_knowledge_change: number;
total_api_call_change: number;
}
const Home = () => {
const [dashboardData, setDashboardData] = useState<DashboardData>({});
const [dashboardData, setDashboardData] = useState<DashboardData>({} as DashboardData);
const [loading, setLoading] = useState({
knowledgeTypeDistribution: true,
});
@@ -65,12 +69,7 @@ const Home = () => {
}
const { storage_type = 'neo4j' } = response || {}
const responseData = storage_type === 'neo4j' ? response.neo4j_data : response.rag_data
setDashboardData({
totalMemoryCapacity: responseData?.total_memory || 0,
application: responseData?.total_app || 0,
knowledgeBaseCount: responseData?.total_knowledge || 0,
apiCallCount: responseData?.total_api_call || 0
})
setDashboardData(responseData as DashboardData)
})
}
/** Fetch knowledge base type distribution */