Files
MemoryBear/web/src/views/UserMemoryDetail/components/Portrait.tsx
2026-01-08 19:46:02 +08:00

77 lines
2.0 KiB
TypeScript

import { type FC, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useParams } from 'react-router-dom'
import { Skeleton, Progress } from 'antd';
import RbCard from '@/components/RbCard/Card'
import {
getImplicitPortrait,
} from '@/api/memory'
interface Item {
dimension_name: string;
percentage: number;
evidence: string[];
reasoning: string;
confidence_level: string;
}
interface PortraitItem {
user_id: string;
analysis_timestamp: number | string;
total_summaries_analyzed: number;
historical_trends: null;
creativity: Item;
aesthetic: Item;
technology: Item;
literature: Item;
}
const Portrait: FC = () => {
const { t } = useTranslation()
const { id } = useParams()
const [loading, setLoading] = useState<boolean>(false)
const [data, setData] = useState<PortraitItem>({} as PortraitItem)
useEffect(() => {
if (!id) return
getData()
}, [id])
const getData = () => {
if (!id) return
setLoading(true)
getImplicitPortrait(id).then((res) => {
const response = res as PortraitItem
setData(response)
setLoading(false)
})
.finally(() => {
setLoading(false)
})
}
return (
<RbCard
title={t('implicitDetail.portrait')}
headerType="borderless"
>
{loading
? <Skeleton active />
: <div className="rb:mt-1">
{(['aesthetic', 'creativity', 'literature', 'technology'] as const).map((key) => {
const item = data[key] as Item
return (
<div key={key}>
<div className="rb:flex rb:justify-between rb:items-center">
<div className="rb:text-[#5B6167] rb:leading-5 rb:font-regular rb:mb-1">{t(`implicitDetail.${key}`)}</div>
{item?.percentage ?? 0}%
</div>
<Progress percent={item?.percentage || 0} showInfo={false} />
</div>
)
})}
</div>
}
</RbCard>
)
}
export default Portrait