feat(web): user memory & detail ui upgrade

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

@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 18:32:47 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 18:32:47 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-02-05 18:29:29
  */
 /**
  * Interest Distribution Component
@@ -13,7 +13,7 @@ import { type FC, useRef, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import ReactEcharts from 'echarts-for-react';
-import { Space } from 'antd'
+import clsx from 'clsx'
 
 import { getInterestDistributionByUser } from '@/api/memory';
 import Empty from '@/components/Empty';
@@ -21,16 +21,15 @@ import Loading from '@/components/Empty/Loading';
 import RbCard from '@/components/RbCard/Card';
 
 /** Chart color palette */
-const Colors = ['#155EEF', '#4DA8FF', '#03BDFF', '#31E8FF', '#AD88FF', '#FFB048']
+const Colors = ['#171719', '#155EEF', '#4DA8FF', '#9C6FFF', '#ABEBFF', '#DFE4ED']
 
-const InterestDistribution: FC = () => {
+const InterestDistribution: FC<{ className?: string; }> = ({ className }) => {
   const { t } = useTranslation()
   const { id } = useParams()
   const chartRef = useRef<ReactEcharts>(null);
   const resizeScheduledRef = useRef(false)
   const [loading, setLoading] = useState(false)
   const [data, setData] = useState<Array<Record<string, string | number>>>([])
-  const totalValue = data.reduce((sum, item) => sum + Number(item.value), 0)
 
   useEffect(() => {
     getData()
@@ -76,7 +75,9 @@ const InterestDistribution: FC = () => {
   return (
     <RbCard
       title={t('userMemory.interestDistribution')}
-      headerClassName="rb:min-h-[46px]!"
+      headerClassName="rb:min-h-[46px]!! rb:font-medium!"
+      className={clsx("rb:bg-[#FFFFFF]! rb:shadow-[0px_2px_6px_0px_rgba(33,35,50,0.13)]! rb:absolute! rb:w-100 rb:top-29 rb:left-26", className)}
+      bodyClassName="rb:px-5! rb:pb-5! rb:pt-3.75! rb:max-h-[calc(100vh-176px)] rb:overflow-auto"
     >
       {loading
       ? <Loading size={249} />
@@ -102,61 +103,55 @@ const InterestDistribution: FC = () => {
               extraCssText: 'width: 36px; height: 36px; box-shadow: 0px 2px 4px 0px rgba(33,35,50,0.12);border-radius: 36px;'
             },
             legend: {
-              show: false
+              bottom: 0,
+              padding: 0,
+              itemWidth: 12,
+              itemHeight: 12,
+              borderRadius: 2,
+              orient: 'horizontal',
+              textStyle: {
+                color: '#5B6167',
+                fontFamily: 'PingFangSC, PingFang SC',
+                lineHeight: 16,
+              }
             },
             series: [
               {
-                name: 'Access From',
                 type: 'pie',
                 radius: ['60%', '100%'],
                 avoidLabelOverlap: false,
                 percentPrecision: 0,
-                padAngle: 0,
-                width: 200,
-                height: 200,
-                top: 18,
+                padAngle: 1,
+                width: 180,
+                height: 180,
                 left: 'center',
+                top: 24,
                 itemStyle: {
-                  borderRadius: 0
+                  borderRadius: 2,
+                  shadowBlur: 4,
+                  shadowOffsetX: 0,
+                  shadowOffsetY: 2,
+                  shadowColor: 'rgba(0,0,0,0.25)',
                 },
                 label: {
-                  show: false,
-                  position: 'center'
-                },
-                emphasis: {
-                  label: {
-                    show: true,
-                    fontSize: 24,
-                    fontWeight: 'bold',
-                    color: '#212332',
-                    formatter: '{d}%\n{b}',
-                  }
+                  fontWeight: 'bold',
+                  color: '#171719',
+                  formatter: '{d}%',
+                  fontFamily: 'MiSans-Demibold',
                 },
                 labelLine: {
-                  show: false
+                  lineStyle: {
+                    color: '#DFE4ED'
+                  }
                 },
                 data: data
               }
             ]
           }}
-          style={{ height: '250px', width: '100%' }}
+          style={{ height: '320px', width: '100%' }}
           notMerge={true}
           lazyUpdate={true}
         />
-        <Space size={12} direction="vertical" className="rb:w-full">
-          {data.map((item, index) => (
-            <div key={index} className="rb:relative rb:flex rb:items-center rb:justify-between rb:px-4 rb:py-2.5 rb:bg-[#F6F8FC] rb:border rb:border-[#DFE4ED] rb:font-regular rb:leading-5 rb:rounded-md">
-              <div className="rb:pl-3.5 rb:relative">
-                <span 
-                  className="rb:absolute rb:left-0 rb:top-[calc(50%-4px)] rb:w-2 rb:h-2 rb:rounded-full"
-                  style={{ backgroundColor: Colors[index % Colors.length] }}
-                />
-                {item.name}
-              </div>
-              <div className="rb:font-medium">{totalValue > 0 ? Math.round((Number(item.value) / totalValue) * 100) : 0}%</div>
-            </div>
-          ))}
-        </Space>
       </>}
     </RbCard>
   )