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

feat(web): user memory & detail ui upgrade

Browse Source
This commit is contained in:
zhaoying
2026-03-07 14:59:58 +08:00
parent 6d53d9178c
commit d68bbab419
10 changed files with 359 additions and 422 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
web/src/views/UserMemoryDetail/components/NodeStatistics.tsx
View File

@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-03 18:32:35
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-03 18:32:35
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-05 19:07:07
*/
/**
* Node Statistics Component
@@ -13,30 +13,20 @@ import { type FC, useEffect, useState } from 'react'
import clsx from 'clsx'
import { useTranslation } from 'react-i18next'
import { useParams, useNavigate } from 'react-router-dom'
import { Skeleton } from 'antd';
import { Skeleton, Flex, Divider } from 'antd';
import RbCard from '@/components/RbCard/Card'
import {
getNodeStatistics,
} from '@/api/memory'
import type { NodeStatisticsItem } from '../types'
/** Background gradient list */
const BG_LIST = [
'rb:bg-[linear-gradient(316deg,rgba(21,94,239,0.06)_0%,rgba(251,253,255,0)_100%)]',
'rb:bg-[linear-gradient(316deg,rgba(54,159,33,0.06)_0%,rgba(251,253,255,0)_100%)]',
'rb:bg-[linear-gradient(314deg,rgba(156,111,255,0.06)_0%,rgba(251,253,255,0)_100%)]',
'rb:bg-[linear-gradient(332deg,rgba(255,93,52,0.06)_0%,rgba(251,253,255,0)_100%)]',
'rb:bg-[linear-gradient(313deg,rgba(156,111,255,0.06)_0%,rgba(251,253,255,0)_100%)]',
'rb:bg-[linear-gradient(332deg,rgba(54,159,33,0.06)_0%,rgba(251,253,255,0)_100%)]',
]
/** Memory type configuration */
const typeList = [
{ key: 'PERCEPTUAL_MEMORY', bg: 0 },
{ key: 'WORKING_MEMORY', bg: 1 },
{ key: 'EMOTIONAL_MEMORY', bg: 2 },
{ key: 'SHORT_TERM_MEMORY', bg: 3 },
{ key: 'FORGET_MEMORY', bg: 5 },
{
key: 'LONG_TERM_MEMORY',
bg: 4,
@@ -46,7 +36,6 @@ const typeList = [
{ key: 'EXPLICIT_MEMORY' }
]
},
{ key: 'FORGET_MEMORY', bg: 5 },
]
const NodeStatistics: FC = () => {
@@ -54,7 +43,6 @@ const NodeStatistics: FC = () => {
const { t } = useTranslation()
const { id } = useParams()
const [loading, setLoading] = useState<boolean>(false)
const [total, setTotal] = useState<number>(0)
const [data, setData] = useState<NodeStatisticsItem[]>([])
useEffect(() => {
@@ -69,9 +57,6 @@ const NodeStatistics: FC = () => {
getNodeStatistics(id).then((res) => {
const response = res as NodeStatisticsItem[]
setData(response)
// Calculate total count
const totalCount = response.reduce((sum, item) => sum + (item.count || 0), 0)
setTotal(totalCount)
setLoading(false)
})
.finally(() => {
@@ -83,59 +68,57 @@ const NodeStatistics: FC = () => {
navigate(`/user-memory/detail/${id}/${type}`)
}
/** Render statistics card */
const renderCard = (key: string, bgIndex: number | null, isChild: boolean = false) => {
const renderCard = (key: string, isChild: boolean = false) => {
const item = data.find((item) => item.type === key)
return (
<div
<Flex
vertical
justify="space-between"
className={clsx(
"rb:flex rb:flex-col rb:justify-between rb:group rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:pt-3 rb:px-4 rb:pb-5 rb:cursor-pointer",
{
'rb:h-45': !isChild,
'rb:h-31': isChild
},
typeof bgIndex === 'number' ? BG_LIST[bgIndex] : 'rb:bg-[#FBFDFF]'
"rb:h-full rb:group rb:cursor-pointer rb:bg-[#FFFFFF]",{
'rb:rounded-xl rb:shaodow-[0px_2px_6px_0px_rgba(33,35,50,0.08)] rb:p-3!': !isChild,
'rb:px-3! rb:pt-2! rb:pb-2.5! rb:w-full': isChild
}
)}
onClick={() => handleViewDetail(key)}
>
<div>
<div className={clsx("rb:text-[#5B6167] rb:leading-5 rb:font-regular", {
'rb:mb-2': !isChild,
'rb:mb-1': isChild
})}>
<div className={clsx("rb:text-[#5B6167] rb:leading-5 rb:font-regular")}>
{t(`userMemory.${key}`)}
</div>
<div className="rb:w-3 rb:h-3 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/userMemory/arrow_right.svg')] rb:group-hover:bg-[url('@/assets/images/userMemory/arrow_right_hover.svg')]"></div>
</div>
<div className="rb:text-[28px] rb:leading-8.75 rb:font-extrabold">{item?.count ?? 0}</div>
</div>
<Flex justify="space-between" align="center">
<div className="rb:text-[24px] rb:leading-8 rb:font-extrabold rb:font-[MiSans-Heavy]">{item?.count ?? 0}</div>
<div className="rb:size-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/userMemory/arrow_right.svg')] rb:group-hover:bg-[url('@/assets/images/userMemory/arrow_right_hover.svg')]"></div>
</Flex>
</Flex>
)
}
return (
<RbCard
title={<>{t('userMemory.nodeStatistics')} <span className="rb:text-[#5B6167] rb:font-normal!">({t('userMemory.total')}: {total})</span></>}
headerType="borderless"
headerClassName="rb:min-h-[46px]!"
>
<div className="rb:h-22">
{loading
? <Skeleton active />
: <div className="rb:w-full rb:grid rb:grid-cols-8 rb:gap-3">
: <div className="rb:w-full rb:grid rb:grid-cols-8 rb:gap-3 rb:h-full">
{typeList.map((vo) => {
if (!vo.children) {
return <div key={vo.key}>{renderCard(vo.key, vo.bg)}</div>
return <div key={vo.key} className="rb:h-full">{renderCard(vo.key)}</div>
}
return (
<div key={vo.key} className={clsx("rb:col-span-3 rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:p-3", BG_LIST[vo.bg])}>
<div className="rb:text-[#5B6167] rb:leading-5 rb:font-regular rb:mb-3">{t(`userMemory.${vo.key}`)}</div>
<div className="rb:grid rb:grid-cols-3 rb:gap-3">
{vo.children.map((child) => <div key={child.key}>{renderCard(child.key, null, true)}</div>)}
<div key={vo.key} className={clsx("rb:col-span-3 rb:shaodow-[0px_2px_6px_0px_rgba(33,35,50,0.08)] rb:rounded-xl rb:bg-[#FFFFFF] rb:overflow-hidden")}>
<div className="rb:bg-[#171719] rb:text-[12px] rb:text-[#FFFFFF] rb:font-medium rb:text-center rb:leading-4 rb:py-px rb:rounded-tl-xl rb:rounded-tr-xl">{t(`userMemory.${vo.key}`)}</div>
<div className="rb:grid rb:grid-cols-3">
{vo.children.map((child, index) => <Flex key={child.key} align="center">
{index > 0 && <Divider type="vertical" className="rb:h-12! rb:mx-0!" />}
{renderCard(child.key, true)}
</Flex>)}
</div>
</div>
)
})}
</div>
}
</RbCard>
</div>
)
}
export default NodeStatistics