feat(web): user memory detail

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

@@ -0,0 +1,85 @@
+import { type FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+import { Skeleton, Space, Progress } from 'antd';
+import RbCard from '@/components/RbCard/Card'
+import Empty from '@/components/Empty'
+import {
+  getImplicitHabits,
+} from '@/api/memory'
+
+interface HabitsItem {
+  habit_description: string;
+  frequency_pattern: string;
+  time_context: string;
+  confidence_level: string;
+  supporting_summaries: string[];
+  first_observed: string;
+  last_observed: string;
+  is_current: boolean;
+  specific_examples: string[];
+}
+
+const Habits: FC = () => {
+  const { t } = useTranslation()
+  const { id } = useParams()
+  const [loading, setLoading] = useState<boolean>(false)
+  const [data, setData] = useState<HabitsItem[]>([])
+
+  useEffect(() => {
+    if (!id) return
+    getData()
+  }, [id])
+  
+  // 记忆洞察
+  const getData = () => {
+    if (!id) return
+    setLoading(true)
+    getImplicitHabits(id).then((res) => {
+      const response = res as HabitsItem[]
+      setData(response)
+      setLoading(false) 
+    })
+    .finally(() => {
+      setLoading(false)
+    })
+  }
+
+  return (
+    <>
+      <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.habits')}</div>
+      <div className="rb:my-3 rb:text-[#5B6167] rb:leading-5">{t('implicitDetail.habitsSubTitle')}</div>
+      <RbCard>
+        {loading
+          ? <Skeleton active />
+          : data.length === 0
+            ? <Empty size={88} />
+            : <Space size={12} direction="vertical" className="rb:w-full!">
+              {data.map((vo, voIdx) => (
+                <div key={voIdx} className="rb:leading-5 rb:shadow-[inset_3px_0px_0px_0px_#155EEF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:p-3">
+                  <div className="rb:flex rb:items-center rb:justify-between">
+                    <div>
+                      <div className="rb:mb-1">{vo.habit_description}</div>
+                      <div className="rb:mb-1 rb:text-[#5B6167]">{vo.time_context}</div>
+                    </div>
+                    <div className="rb:text-[24px] rb:font-medium">{vo.confidence_level}%</div>
+                  </div>
+
+                  {vo.specific_examples.length > 0 && <>
+                    <div className="rb:mt-3 rb:mb-2">{t('implicitDetail.specific_examples')}</div>
+                    <div className="rb:bg-[#FFFFFF] rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:p-3">
+                      {vo.specific_examples.map((item, index) => (
+                        <div key={index} className="rb:text-[#5B6167] rb:text-[12px] rb:mt-1">- {item}</div>
+                      ))}
+                    </div>
+                  </>}
+                  <Progress percent={vo.confidence_level} showInfo={false} className="rb:mt-3" />
+                </div>
+              ))}
+            </Space>
+        }
+      </RbCard>
+    </>
+  )
+}
+export default Habits