feat(web): Graph user memory update

2025-12-22 18:45:36 +08:00
parent b1e69e154b
commit 773e785ce9
28 changed files with 706 additions and 369 deletions
--- a/web/src/views/UserMemoryDetail/components/NodeStatistics.tsx
+++ b/web/src/views/UserMemoryDetail/components/NodeStatistics.tsx
@@ -0,0 +1,90 @@
+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 RbCard from '@/components/RbCard/Card'
+import Empty from '@/components/Empty';
+import {
+  getNodeStatistics,
+} from '@/api/memory'
+import type { NodeStatisticsItem } from '../types'
+
+
+const NodeStatistics: FC = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const [loading, setLoading] = useState<boolean>(false)
+  const [total, setTotal] = useState<number>(0)
+  const [data, setData] = useState<NodeStatisticsItem[]>([])
+
+  useEffect(() => {
+    if (!id) return
+    getData()
+  }, [id])
+  
+  // 记忆洞察
+  const getData = () => {
+    if (!id) return
+    setLoading(true)
+    getNodeStatistics(id).then((res) => {
+      const response = res as { nodes: NodeStatisticsItem[], total: number }
+      setData(response.nodes)
+      setTotal(response.total)
+      setLoading(false) 
+    })
+    .finally(() => {
+      setLoading(false)
+    })
+  }
+  const handleViewDetail = (type: string) => {
+    switch (type) {
+      case 'Statement':
+        navigate(`/statement/${id}`)
+        break
+    }
+  }
+  return (
+    <RbCard 
+      title={t('userMemory.nodeStatistics')} 
+      extra={<div>{t('userMemory.total')}: {total}</div>}
+      headerType="borderless"
+      headerClassName="rb:text-[18px]! rb:leading-[24px]"
+      bgColor="linear-gradient(180deg,#F1F9FE 0%, #FBFCFF 100%)"
+      height="100%"
+    >
+      {loading
+        ? <Skeleton />
+        : data.length > 0
+          ? <div className={`rb:w-full rb:grid rb:grid-cols-${data.length} rb:gap-2`}>
+            {data.map(vo => (
+              <div
+                key={vo.type}
+                className={clsx("rb:group rb:border rb:border-[#DFE4ED] rb:p-0 rb:rounded-xl rb:hover:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.15)]", {
+                  'rb:cursor-pointer': vo.type === 'Statement'
+                })}
+                onClick={() => handleViewDetail(vo.type)}
+              >
+                <div className="rb:gap-0.5 rb:p-3 rb:leading-4 rb:text-[#5B6167] rb:flex rb:items-center rb:justify-between rb:border-b rb:border-[#DFE4ED]">
+                  <div className="rb:wrap-break-word rb:line-clamp-1">{t(`userMemory.${vo.type}`)}</div>
+                  {vo.type === 'Statement' && <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>}
+                </div>
+
+                <div className="rb:p-3 rb:flex rb:justify-between rb:items-center rb:font-bold rb:text-[20px] rb:text-[#212332] rb:text-left">
+                  {vo.count ?? 0}
+                  <div className="rb:text-right rb:font-normal rb:text-[14px] rb:text-[#5F6266] rb:leading-4 rb:gap-1">
+                    {vo.percentage ?? 0}%
+                  </div>
+                </div>
+              </div>
+          ))}
+          </div>
+        : <Empty size={80} />
+      }
+    </RbCard>
+  )
+}
+export default NodeStatistics