feat(web): EMOTIONAL_MEMORY & IMPLICIT_MEMORY type user memory detail add refresh btn

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

@@ -1,34 +1,57 @@
-import { type FC } from 'react'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Row, Col } from 'antd'
+import { useParams } from 'react-router-dom'
 
 import Preferences from '../components/Preferences'
 import Portrait from '../components/Portrait'
 import InterestAreas from '../components/InterestAreas'
 import Habits from '../components/Habits'
+import {
+  generateProfile,
+} from '@/api/memory'
 
-const ImplicitDetail: FC = () => {
+const ImplicitDetail = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
   const { t } = useTranslation()
+  const { id } = useParams()
+  const preferencesRef = useRef<{ handleRefresh: () => void; }>(null)
+  const portraitRef = useRef<{ handleRefresh: () => void; }>(null)
+  const interestAreasRef = useRef<{ handleRefresh: () => void; }>(null)
+  const habitsRef = useRef<{ handleRefresh: () => void; }>(null)
+
+  const handleRefresh = () => {
+    if (!id) return
+    generateProfile(id)
+      .then(() => {
+        preferencesRef.current?.handleRefresh()
+        portraitRef.current?.handleRefresh()
+        interestAreasRef.current?.handleRefresh()
+        habitsRef.current?.handleRefresh()
+      })
+  }
+  useImperativeHandle(ref, () => ({
+    handleRefresh
+  }));
 
   return (
     <div className="rb:h-full rb:max-w-266 rb:mx-auto">
       <div className="rb:text-[#5B6167] rb:leading-5 rb:mt-3">{t('implicitDetail.title')}</div>
       
-      <Preferences />
+      <Preferences ref={preferencesRef} />
 
       <div className="rb:bg-[rgba(21,94,239,0.12)] rb:px-3 rb:py-2.5 rb:font-medium rb:leading-5 rb:mb-4 rb:mt-6 rb:rounded-md">{t('implicitDetail.portraitTitle')}</div>
       <div className="rb:my-3 rb:text-[#5B6167] rb:leading-5">{t('implicitDetail.portraitSubTitle')}</div>
       <Row gutter={[16, 16]} className="rb:mt-4">
         <Col span={12}>
-          <Portrait />
+          <Portrait ref={portraitRef} />
         </Col>
         <Col span={12}>
-          <InterestAreas />
+          <InterestAreas ref={interestAreasRef} />
         </Col>
       </Row>
 
-      <Habits />
+      <Habits ref={habitsRef} />
     </div>
   )
-}
+})
 export default ImplicitDetail

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

@@ -1,13 +1,27 @@
-import { type FC } from 'react'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
 import { Row, Col, Space } from 'antd';
+import { useParams } from 'react-router-dom'
 
 import WordCloud from '../components/WordCloud'
 import EmotionTags from '../components/EmotionTags'
 import Health from '../components/Health'
 import Suggestions from '../components/Suggestions'
+import { generateSuggestions } from '@/api/memory'
 
 
-const StatementDetail: FC = () => {
+const StatementDetail = forwardRef((_props, ref) => {
+  const { id } = useParams()
+  const suggestionsRef = useRef<{ handleRefresh: () => void; }>(null)
+  const handleRefresh = () => {
+    if (!id) return
+    generateSuggestions(id)
+      .then(() => {
+        suggestionsRef.current?.handleRefresh()
+      })
+  }
+  useImperativeHandle(ref, () => ({
+    handleRefresh
+  }));
   return (
     <Row gutter={[16, 16]}>
       <Col span={12}>
@@ -18,10 +32,10 @@ const StatementDetail: FC = () => {
         </Space>
       </Col>
       <Col span={12}>
-        <Suggestions />
+        <Suggestions ref={suggestionsRef} />
       </Col>
     </Row>
   )
-}
+})
 
 export default StatementDetail

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

@@ -24,6 +24,8 @@ const Detail: FC = () => {
   const navigate = useNavigate()
   const [name, setName] = useState<string>('')
   const forgetDetailRef = useRef<{ handleRefresh: () => void }>(null)
+  const statementDetailRef = useRef<{ handleRefresh: () => void }>(null)
+  const implicitDetailRef = useRef<{ handleRefresh: () => void }>(null)
 
   useEffect(() => {
     if (!id) return
@@ -45,7 +47,17 @@ const Detail: FC = () => {
     navigate(`/user-memory/detail/${id}/${key}`, { replace: true })
   }
   const handleRefresh = () => {
-    forgetDetailRef.current?.handleRefresh()
+    switch(type) {
+      case 'FORGET_MEMORY':
+        forgetDetailRef.current?.handleRefresh()
+        break;
+      case 'EMOTIONAL_MEMORY':
+        statementDetailRef.current?.handleRefresh()
+        break
+      case 'IMPLICIT_MEMORY':
+        implicitDetailRef.current?.handleRefresh()
+        break
+    }
   }
 
   if (type === 'GRAPH') {
@@ -67,16 +79,16 @@ const Detail: FC = () => {
             </div>
           </Dropdown>
         }
-        extra={type === 'FORGET_MEMORY' &&
+        extra={['FORGET_MEMORY', 'EMOTIONAL_MEMORY', 'IMPLICIT_MEMORY'].includes(type as string) &&
           <Button type="primary" ghost className="rb:group rb:h-6! rb:px-2!" onClick={handleRefresh}>
             <img src={refreshIcon} className="rb:w-4 rb:h-4" />
             {t('common.refresh')}
           </Button>}
       />
       <div className="rb:h-[calc(100vh-64px)] rb:overflow-y-auto rb:py-3 rb:px-4">
-        {type === 'EMOTIONAL_MEMORY' && <StatementDetail />}
+        {type === 'EMOTIONAL_MEMORY' && <StatementDetail ref={statementDetailRef} />}
         {type === 'FORGET_MEMORY' && <ForgetDetail ref={forgetDetailRef} />}
-        {type === 'IMPLICIT_MEMORY' && <ImplicitDetail />}
+        {type === 'IMPLICIT_MEMORY' && <ImplicitDetail ref={implicitDetailRef} />}
         {type === 'SHORT_TERM_MEMORY' && <ShortTermDetail />}
         {type === 'PERCEPTUAL_MEMORY' && <PerceptualDetail />}
         {type === 'EPISODIC_MEMORY' && <EpisodicDetail />}