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

This commit is contained in:
zhaoying
2026-01-19 18:51:50 +08:00
parent 21ae3cdd15
commit c255be8d09
10 changed files with 161 additions and 91 deletions

View File

@@ -121,7 +121,7 @@ const EmotionTags: FC = () => {
})}
</div>
</div>
: <Empty size={88} className="rb:h-full" />
: <Empty size={88} className="rb:h-full rb:mb-4" />
}
</RbCard>
)

View File

@@ -1,4 +1,4 @@
import { type FC, useEffect, useState } from 'react'
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
import { Skeleton, Space, Progress } from 'antd';
@@ -20,7 +20,7 @@ interface HabitsItem {
specific_examples: string[];
}
const Habits: FC = () => {
const Habits = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
const { t } = useTranslation()
const { id } = useParams()
const [loading, setLoading] = useState<boolean>(false)
@@ -43,6 +43,9 @@ const Habits: FC = () => {
setLoading(false)
})
}
useImperativeHandle(ref, () => ({
handleRefresh: getData
}));
return (
<>
@@ -80,5 +83,5 @@ const Habits: FC = () => {
</RbCard>
</>
)
}
})
export default Habits

View File

@@ -1,4 +1,4 @@
import { type FC, useEffect, useState } from 'react'
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
import { Skeleton, Progress } from 'antd';
@@ -23,7 +23,7 @@ interface InterestAreasItem {
art: Item;
}
const InterestAreas: FC = () => {
const InterestAreas = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
const { t } = useTranslation()
const { id } = useParams()
const [loading, setLoading] = useState<boolean>(false)
@@ -47,6 +47,9 @@ const InterestAreas: FC = () => {
})
}
useImperativeHandle(ref, () => ({
handleRefresh: getData
}));
return (
<RbCard
title={t('implicitDetail.interestAreas')}
@@ -70,5 +73,5 @@ const InterestAreas: FC = () => {
}
</RbCard>
)
}
})
export default InterestAreas

View File

@@ -1,4 +1,4 @@
import { type FC, useEffect, useState } from 'react'
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
import { Skeleton, Progress } from 'antd';
@@ -25,7 +25,7 @@ interface PortraitItem {
literature: Item;
}
const Portrait: FC = () => {
const Portrait = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
const { t } = useTranslation()
const { id } = useParams()
const [loading, setLoading] = useState<boolean>(false)
@@ -49,6 +49,9 @@ const Portrait: FC = () => {
})
}
useImperativeHandle(ref, () => ({
handleRefresh: getData
}));
return (
<RbCard
title={t('implicitDetail.portrait')}
@@ -73,5 +76,5 @@ const Portrait: FC = () => {
}
</RbCard>
)
}
})
export default Portrait

View File

@@ -1,4 +1,4 @@
import { type FC, useEffect, useState, useRef, useMemo } from 'react'
import { useEffect, useState, useRef, useMemo, forwardRef, useImperativeHandle } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
import { Row, Col, Skeleton } from 'antd'
@@ -31,7 +31,7 @@ const generateCategoryColors = (categories: string[]) => {
return colors
}
const Preferences: FC = () => {
const Preferences = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
const { t } = useTranslation()
const { id } = useParams()
const chartRef = useRef<HTMLDivElement>(null)
@@ -138,6 +138,9 @@ const Preferences: FC = () => {
return selectedWord !== null && data[selectedWord].tag_name ? <>{data[selectedWord].tag_name}{t('implicitDetail.preferencesDetail')}</> : ''
}, [selectedWord, data, t])
useImperativeHandle(ref, () => ({
handleRefresh: getData
}));
return (
<>
<div className="rb:bg-[rgba(21,94,239,0.12)] rb:px-4 rb:py-2.5 rb:font-medium rb:leading-5 rb:mb-4 rb:mt-6 rb:rounded-md">{t('forgetDetail.overviewTitle')}</div>
@@ -184,6 +187,6 @@ const Preferences: FC = () => {
</Row>
</>
)
}
})
export default Preferences

View File

@@ -1,4 +1,4 @@
import { type FC, useEffect, useState } from 'react'
import { useEffect, useState, forwardRef, useImperativeHandle } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
@@ -18,7 +18,7 @@ interface Suggestions {
actionable_steps: string[];
}>;
}
const Suggestions: FC = () => {
const Suggestions = forwardRef<{ handleRefresh: () => void; }>((_props, ref) => {
const { t } = useTranslation()
const { id } = useParams()
const [suggestions, setSuggestions] = useState<Suggestions | null>(null)
@@ -37,6 +37,9 @@ const Suggestions: FC = () => {
})
}
useImperativeHandle(ref, () => ({
handleRefresh: getSuggestionData
}));
return (
<RbCard
title={t('statementDetail.suggestions')}
@@ -64,6 +67,6 @@ const Suggestions: FC = () => {
}
</RbCard>
)
}
})
export default Suggestions

View File

@@ -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

View File

@@ -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

View File

@@ -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 />}