feat(web): update user statement page UI

web/src/routes/routes.json

@@ -32,7 +32,6 @@
       { "path": "/api-key", "element": "ApiKeyManagement" },
       { "path": "/emotion-engine/:id", "element": "EmotionEngine" },
       { "path": "/reflection-engine/:id", "element": "SelfReflectionEngine" },
-      { "path": "/statement/:id", "element": "StatementDetail" },
       { "path": "/no-permission", "element": "NoPermission" },
       { "path": "/*", "element": "NotFound" }
     ]
@@ -42,7 +41,8 @@
     "children": [
       { "path": "/application/config/:id", "element": "ApplicationConfig" },
       { "path": "/conversation/:token", "element": "Conversation" },
-      { "path": "/user-memory/neo4j/:id", "element": "Neo4jUserMemoryDetail" }
+      { "path": "/user-memory/neo4j/:id", "element": "Neo4jUserMemoryDetail" },
+      { "path": "/statement/:id", "element": "StatementDetail" }
     ]
   },
   {

web/src/views/UserMemoryDetail/components/EndUserProfile.tsx

@@ -27,7 +27,6 @@ const EndUserProfile = forwardRef<EndUserProfileRef, EndUserProfileProps>(({ onD
     getData()
   }, [id])
   
-  // 记忆洞察
   const getData = () => {
     if (!id) return
     setLoading(true)

web/src/views/UserMemoryDetail/components/NodeStatistics copy.tsx

@@ -1,88 +0,0 @@
-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 NodeStatisticsItem[]
-      setData(response)
-      // 计算count总计
-      const totalCount = response.reduce((sum, item) => sum + (item.count || 0), 0)
-      setTotal(totalCount)
-      setLoading(false) 
-    })
-    .finally(() => {
-      setLoading(false)
-    })
-  }
-  const handleViewDetail = (type: string) => {
-    switch (type) {
-      case 'EMOTIONAL_MEMORY':
-        navigate(`/statement/${id}`)
-        break
-    }
-  }
-  return (
-    <RbCard 
-      title={<>{t('userMemory.nodeStatistics')}<div>{t('userMemory.total')}: {total}</div></>}
-      headerType="borderless"
-    >
-      {loading
-        ? <Skeleton />
-        : data && data.length > 0
-          ? <div className={`rb:w-full rb:grid rb:grid-cols-3 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 === 'EMOTIONAL_MEMORY'
-                })}
-                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 === '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>}
-                </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

web/src/views/UserMemoryDetail/components/PageHeader.tsx

@@ -8,17 +8,23 @@ const { Header } = Layout;
 
 interface ConfigHeaderProps {
   name?: string;
-  operation: ReactNode
+  operation?: ReactNode;
+  source?: 'detail' | 'statement'
 }
 const PageHeader: FC<ConfigHeaderProps> = ({ 
   name,
-  operation
+  operation,
+  source = 'detail'
 }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
 
   const goBack = () => {
-    navigate('/user-memory', { replace: true })
+    if (source === 'detail') {
+      navigate('/user-memory', { replace: true })
+    } else {
+      navigate(-1)
+    }
   }
   return (
     <Header className="rb:w-full rb:h-16 rb:flex rb:justify-between rb:p-[16px_16px_16px_24px]! rb:border-b rb:border-[#EAECEE] rb:leading-8">

web/src/views/UserMemoryDetail/pages/StatementDetail.tsx

@@ -1,26 +1,53 @@
-import { type FC } from 'react'
+import { type FC, useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
 import { Row, Col, Space } from 'antd';
 
 import WordCloud from '../components/WordCloud'
 import EmotionTags from '../components/EmotionTags'
 import Health from '../components/Health'
 import Suggestions from '../components/Suggestions'
+import PageHeader from '../components/PageHeader'
+import {
+  getEndUserProfile,
+} from '@/api/memory'
 
 
 const StatementDetail: FC = () => {
+  const { id } = useParams()
+  const [name, setName] = useState<string>('')
+  useEffect(() => {
+    if (!id) return
+    getData()
+  }, [id])
+  
+  const getData = () => {
+    if (!id) return
+    getEndUserProfile(id).then((res) => {
+      const response = res as { other_name: string; id: string; }
+      setName(response.other_name ?? response.id) 
+    })
+  }
   return (
-    <Row gutter={[16, 16]}>
-      <Col span={12}>
-        <Space size={16} direction="vertical" className="rb:w-full">
-          <WordCloud />
-          <EmotionTags />
-          <Health />
-        </Space>
-      </Col>
-      <Col span={12}>
-        <Suggestions />
-      </Col>
-    </Row>
+    <div className="rb:h-full rb:w-full">
+      <PageHeader 
+        name={name}
+        source="statement"
+      />
+      <div className="rb:h-[calc(100vh-64px)] rb:overflow-y-auto rb:py-3 rb:px-4">
+        <Row gutter={[16, 16]}>
+          <Col span={12}>
+            <Space size={16} direction="vertical" className="rb:w-full">
+              <WordCloud />
+              <EmotionTags />
+              <Health />
+            </Space>
+          </Col>
+          <Col span={12}>
+            <Suggestions />
+          </Col>
+        </Row>
+      </div>
+    </div>
   )
 }