feat(web): Graph user memory update

This commit is contained in:
zhaoying
2025-12-22 18:45:36 +08:00
parent b1e69e154b
commit 773e785ce9
28 changed files with 706 additions and 369 deletions

View File

@@ -28,15 +28,15 @@ interface TitleProps {
onClick: (type: string) => void;
}
const Title: FC<TitleProps> = ({ type, title, icon, t, expanded, onClick }) => (
<div className="rb:flex rb:items-center rb:justify-between rb:py-[17px] rb:border-b-[1px] rb:border-[#DFE4ED] rb:text-[16px] rb:font-semibold rb:leading-[22px]">
<div className="rb:flex rb:items-center rb:justify-between rb:py-4.25 rb:border-b rb:border-[#DFE4ED] rb:text-[16px] rb:font-semibold rb:leading-5.5">
<span className="rb:flex rb:items-center">
<img src={icon} className="rb:w-[20px] rb:h-[20px] rb:mr-[8px]" />
<img src={icon} className="rb:w-5 rb:h-5 rb:mr-2" />
{title}
</span>
<span className="rb:flex rb:items-center rb:cursor-pointer rb:text-[#5B6167] rb:text-[14px] rb:font-regular rb:leading-[20px]" onClick={() => onClick(type)}>
<span className="rb:flex rb:items-center rb:cursor-pointer rb:text-[#5B6167] rb:text-[14px] rb:font-regular rb:leading-5" onClick={() => onClick(type)}>
{t(`userMemory.${expanded ? 'foldUp' : 'expanded'}`)}
<img src={down} className={clsx("rb:w-[16px] rb:h-[16px] rb:ml-[4px]", {
<img src={down} className={clsx("rb:w-4 rb:h-4 rb:ml-1", {
'rb:rotate-180': !expanded,
})} />
</span>
@@ -115,20 +115,20 @@ const Rag: FC = () => {
}
const name = loading.detail ? '' : data?.name && data?.name !== '' ? data.name : id
return (
<Row gutter={[16, 16]} className="rb:pb-[24px]">
<Row gutter={[16, 16]} className="rb:pb-6">
<Col span={8}>
<RbCard>
<div className="rb:flex rb:items-center">
<div className="rb:flex-[0_0_auto] rb:w-[80px] rb:h-[80px] rb:text-center rb:font-semibold rb:text-[28px] rb:leading-[80px] rb:rounded-[8px] rb:text-[#FBFDFF] rb:bg-[#155EEF]">{name?.[0]}</div>
<div className="rb:text-[24px] rb:font-semibold rb:leading-[32px] rb:ml-[16px]">
<div className="rb:flex-[0_0_auto] rb:w-20 rb:h-20 rb:text-center rb:font-semibold rb:text-[28px] rb:leading-20 rb:rounded-lg rb:text-[#FBFDFF] rb:bg-[#155EEF]">{name?.[0]}</div>
<div className="rb:text-[24px] rb:font-semibold rb:leading-8 rb:ml-4">
{name}<br/>
<div className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-[16px] rb:mt-[8px]">{personas?.join(' | ')}</div>
<div className="rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 rb:mt-2">{personas?.join(' | ')}</div>
</div>
</div>
<div className="rb:flex rb:gap-[8px] rb:mb-[8px] rb:flex-wrap rb:mt-[25px]">
<div className="rb:flex rb:gap-2 rb:mb-2 rb:flex-wrap rb:mt-6.25">
{tags?.map((tag, tagIndex) => (
<span key={tag.tag} className="rb:rounded-[11px] rb:p-[0_8px] rb:leading-[22px] rb:border"
<span key={tag.tag} className="rb:rounded-[11px] rb:p-[0_8px] rb:leading-5.5 rb:border"
style={{
backgroundColor: `rgba(${tagColors[tagIndex % tagColors.length]}, 0.08)`,
borderColor: `rgba(${tagColors[tagIndex % tagColors.length]}, 0.3)`,
@@ -141,9 +141,9 @@ const Rag: FC = () => {
</div>
{/* 记忆总量 */}
<div className="rb:font-regular rb:text-[12px] rb:text-[#5B6167] rb:leading-[16px] rb:mb-[25px]">
<div className="rb:font-regular rb:text-[12px] rb:text-[#5B6167] rb:leading-4 rb:mb-6.25">
{t('userMemory.totalNumOfMemories')}
<div className="rb:font-extrabold rb:text-[24px] rb:text-[#212332] rb:leading-[30px] rb:mt-[8px]">{memory || 0}</div>
<div className="rb:font-extrabold rb:text-[24px] rb:text-[#212332] rb:leading-7.5 rb:mt-2">{memory || 0}</div>
</div>
{/* 关于我 */}
@@ -159,12 +159,12 @@ const Rag: FC = () => {
{expanded.includes('aboutUs') && (
<>
{loading.summary
? <Skeleton className="rb:mt-[16px]" />
? <Skeleton className="rb:mt-4" />
: summary
? <div className="rb:font-regular rb:leading-[22px] rb:pt-[16px]">
? <div className="rb:font-regular rb:leading-5.5 rb:pt-4">
{summary || '-'}
</div>
: <Empty size={88} className="rb:mt-[48px] rb:mb-[81px]" />
: <Empty size={88} className="rb:mt-12 rb:mb-20.25" />
}
</>
)}
@@ -182,12 +182,12 @@ const Rag: FC = () => {
{expanded.includes('memoryInsight') && (
<>
{loading.insight
? <Skeleton className="rb:mt-[16px]" />
? <Skeleton className="rb:mt-4" />
: insight
? <div className="rb:font-regular rb:leading-[22px] rb:pt-[16px]">
? <div className="rb:font-regular rb:leading-5.5 rb:pt-4">
{insight || '-'}
</div>
: <Empty size={88} className="rb:mt-[48px] rb:mb-[81px]" />
: <Empty size={88} className="rb:mt-12 rb:mb-20.25" />
}
</>
)}