feat(web): memory manage & memory detail ui upgrade

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

@@ -1,7 +1,7 @@
 import {  useState, forwardRef, useImperativeHandle, useMemo, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useSearchParams } from 'react-router-dom'
-import { Row, Col, Tabs, Space, Skeleton } from 'antd'
+import { useSearchParams, useNavigate } from 'react-router-dom'
+import { Row, Col, Flex, Space, Skeleton, Button } from 'antd'
 
 import { getRelationshipEvolution, getTimelineMemories } from '@/api/memory'
 import type { Node, GraphDetailRef } from '../types'
@@ -11,7 +11,8 @@ import { formatDateTime } from '@/utils/format'
 import Tag from '@/components/Tag'
 import InteractionBar from '../components/InteractionBar'
 import Empty from '@/components/Empty'
-import PageHeader from '../components/PageHeader'
+import PageHeader from '@/components/Layout/PageHeader'
+import BtnTabs from '@/components/BtnTabs'
 
 export interface Emotion {
   emotion_intensity: number;
@@ -36,6 +37,7 @@ interface Timeline {
 
 const GraphDetail = forwardRef<GraphDetailRef>((_props, ref) => {
   const { t } = useTranslation()
+  const navigate = useNavigate()
   const [searchParams] = useSearchParams()
   const [vo, setVo] = useState<Node | null>(null)
   const [loading, setLoading] = useState(false)
@@ -97,54 +99,75 @@ const GraphDetail = forwardRef<GraphDetailRef>((_props, ref) => {
   return (
     <>
       <PageHeader
-        name={vo?.name}
-        source="node"
+        title={vo?.name}
+        extra={
+          <Space size={12}>
+            <Button
+              className="rb:px-2! rb:gap-0.5!"
+              icon={<div className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/common/return.svg')]"></div>}
+              onClick={() => navigate(-1)}
+            >
+              {t('common.return')}
+            </Button>
+          </Space>
+        }
       />
-      <div className="rb:h-full rb:max-w-266 rb:mx-auto">
-        <div className="rb:text-[16px] rb:font-medium rb:leading-5.5 rb:mb-3">{t('userMemory.relationshipEvolution')}</div>
-        <RbCard>
-          <Row gutter={16}>
-            <Col span={12}>
+      <Row gutter={12} className="rb:p-3! rb:pr-0! rb:h-[calc(100vh-64px)] rb:w-full! rb:flex-nowrap! rb:overflow-hidden!">
+        <Col flex="480px">
+          <RbCard
+            title={t('userMemory.relationshipEvolution')}
+            headerType="borderless"
+            headerClassName="rb:min-h-[56px]! rb:font-[MiSans-Bold] rb:font-bold"
+            bodyClassName="rb:p-3! rb:pt-0! rb:h-[calc(100%-56px)] rb:overflow-y-auto!"
+            className="rb:h-[calc(100vh-88px)]!"
+          >
+            <Flex vertical gap={16}>
               <EmotionLine chartData={emotionData} loading={loading} />
-            </Col>
-            <Col span={12}>
               <InteractionBar chartData={interactionData} loading={loading} />
-            </Col>
-          </Row>
-        </RbCard>
-
-        <div className="rb:text-[16px] rb:font-medium rb:leading-5.5 rb:mb-3 rb:mt-6">{t('userMemory.timelineMemories')}</div>
-        <RbCard>
-          <Tabs
-            activeKey={activeTab}
-            items={['timelines_memory', 'Statement', 'MemorySummary'].map(key => ({
-              label: t(`userMemory.${key}`),
-              key
-            }))}
-            onChange={(key: string) => setActiveTab(key)}
-          />
-          {timelineLoading
-            ? <Skeleton active />
-            : !activeContent || activeContent.length === 0
-            ? <Empty size={120} className="rb:mt-12 rb:mb-20.25" />
-            : <Space size={16} direction="vertical" className="rb:w-full">
-              {activeContent.map((vo, index) => (
-                <RbCard
-                  key={index}
-                  headerType="borderL"
-                  headerClassName="rb:before:bg-[#155EEF]!"
-                  title={vo.text}
-                >
-                  <div className="rb:text-[#A8A9AA] rb:text-[12px] rb:leading-4">{formatDateTime(vo.created_at)}</div>
-                  <Tag className="rb:mt-2">{vo.type}</Tag>
-                </RbCard>
-              ))}
-            </Space>
-          }
-
-          
-        </RbCard>
-      </div>
+            </Flex>
+          </RbCard>
+        </Col>
+        <Col className="rb:w-[calc(100%-480px)]!">
+          <RbCard
+            title={t('userMemory.timelineMemories')}
+            headerType="borderless"
+            headerClassName="rb:min-h-[53px]! rb:font-[MiSans-Bold] rb:font-bold"
+            bodyClassName="rb:p-3! rb:pt-0!"
+            className="rb:w-full!"
+          >
+            <BtnTabs
+              className="rb:mb-4!"
+              activeKey={activeTab}
+              items={['timelines_memory', 'Statement', 'MemorySummary'].map(key => ({
+                label: t(`userMemory.${key}`),
+                key
+              }))}
+              onChange={(key: string) => setActiveTab(key)}
+            />
+            <div className="rb:h-[calc(100vh-193px)] rb:overflow-y-auto">
+              {timelineLoading
+                ? <Skeleton active />
+                : !activeContent || activeContent.length === 0
+                  ? <Empty size={120} className="rb:mt-12 rb:mb-20.25" />
+                  : <Flex gap={12} vertical>
+                    {activeContent.map((vo, index) => (
+                      <div
+                        key={index}
+                        className="rb-border rb:rounded-xl rb:p-3"
+                      >
+                        <Flex align="center" justify="space-between">
+                          <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5">{formatDateTime(vo.created_at)}</div>
+                          <Tag>{vo.type}</Tag>
+                        </Flex>
+                        <div className="rb:mt-3 rb:leading-5 rb:break-all">{vo.text}</div>
+                      </div>
+                    ))}
+                  </Flex>
+              }
+            </div>
+          </RbCard>
+        </Col>
+      </Row>
     </>
   )
 })