feat(web): forgetting memory

This commit is contained in:
zhaoying
2026-01-07 20:37:34 +08:00
parent 75d5121234
commit a1e8d858a2
18 changed files with 717 additions and 83 deletions

View File

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
import { useParams, useNavigate } from 'react-router-dom'
import { Skeleton } from 'antd';
import RbCard from '@/components/RbCard/Card'
import Empty from '@/components/Empty';
import {
getNodeStatistics,
} from '@/api/memory'
@@ -15,11 +14,25 @@ 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(314deg,rgba(255,93,52,0.06)_0%,rgba(251,253,255,0)_100%)]',
'rb:bg-[linear-gradient(180deg,rgba(156,111,255,0.06)_0%,rgba(251,253,255,0)_100%)]',
'rb:bg-[linear-gradient(180deg,rgba(21,94,239,0.06)_0%,rgba(251,253,255,0)_100%)]',
'rb:bg-[linear-gradient(180deg,rgba(54,159,33,0.06)_0%,rgba(251,253,255,0)_100%)]',
'rb:bg-[]',
'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%)]',
]
const typeList = [
{ key: 'PERCEPTUAL_MEMORY', bg: 0 },
{ key: 'WORKING_MEMORY', bg: 1 },
{ key: 'EMOTIONAL_MEMORY', bg: 2 },
{ key: 'SHORT_TERM_MEMORY', bg: 3 },
{
key: 'LONG_TERM_MEMORY',
bg: 4,
children: [
{ key: 'IMPLICIT_MEMORY' },
{ key: 'EPISODIC_MEMORY' },
{ key: 'EXPLICIT_MEMORY' }
]
},
{ key: 'FORGETTING_MANAGEMENT', bg: 5 },
]
const NodeStatistics: FC = () => {
@@ -52,43 +65,59 @@ const NodeStatistics: FC = () => {
})
}
const handleViewDetail = (type: string) => {
switch (type) {
case 'EMOTIONAL_MEMORY':
navigate(`/statement/${id}`)
break
}
navigate(`/user-memory/detail/${id}/${type}`)
}
const renderCard = (key: string, bgIndex: number | null, isChild: boolean = false) => {
const item = data.find((item) => item.type === key)
return (
<div
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]'
)}
onClick={() => handleViewDetail(key)}
>
<div>
<div className={clsx("rb:text-[#5B6167] rb:leading-5 rb:font-regular", {
'rb:mb-2': !isChild,
'rb:mb-1': isChild
})}>
{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>
)
}
return (
<RbCard
title={<>{t('userMemory.nodeStatistics')} <span className="rb:text-[#5B6167] rb:font-normal!">({t('userMemory.total')}: {total})</span></>}
headerType="borderless"
>
{loading
? <Skeleton />
: data && data.length > 0
? <div className={`rb:w-full rb:grid rb:grid-cols-8 rb:gap-3`}>
{data.map((vo, index) => (
<div
key={vo.type}
className={clsx("rb:flex rb:flex-col rb:justify-between rb:group rb:border rb:border-[#DFE4ED] rb:h-45 rb:rounded-lg rb:pt-3 rb:px-4 rb:pb-5", {
'rb:cursor-pointer': vo.type === 'EMOTIONAL_MEMORY'
}, BG_LIST[index])}
onClick={() => handleViewDetail(vo.type)}
>
<div>
<div className="rb:text-[#5B6167] rb:leading-5 rb:font-regular">
{t(`userMemory.${vo.type}`)}
</div>
{vo.type === 'EMOTIONAL_MEMORY' && <div
className="rb:w-3 rb:h-3 rb:-ml-0.75 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/home/arrow_top_right.svg')] rb:group-hover:bg-[url('@/assets/images/home/arrow_top_right_hover.svg')]"
></div>}
? <Skeleton active />
: <div className="rb:w-full rb:grid rb:grid-cols-8 rb:gap-3">
{typeList.map((vo) => {
if (!vo.children) {
return <div key={vo.key}>{renderCard(vo.key, vo.bg)}</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>
<div className="rb:text-[28px] rb:leading-8.75 rb:font-extrabold">{vo.count ?? 0}</div>
</div>
))}
)
})}
</div>
: <Empty size={80} />
}
}
</RbCard>
)
}