feat(web): user memory updated

2026-01-13 10:25:17 +08:00
parent bca4b22453
commit c01bddf5be
11 changed files with 229 additions and 37 deletions
--- a/web/src/views/UserMemoryDetail/components/EmotionLine.tsx
+++ b/web/src/views/UserMemoryDetail/components/EmotionLine.tsx
@@ -4,6 +4,7 @@ import ReactEcharts from 'echarts-for-react';
 import Empty from '@/components/Empty'
 import Loading from '@/components/Empty/Loading'
 import type { Emotion } from './GraphDetail'
+import { format } from 'echarts';

 interface EmotionLineProps {
  chartData: Emotion[];
@@ -26,7 +27,7 @@ const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
      const seriesData = timePoints.map(time => dataMap.get(time) || 0)
      
      return {
-        name: emotionType,
+        name: t(`userMemory.${emotionType}`),
        type: 'line',
        smooth: true,
        lineStyle: {
@@ -71,7 +72,7 @@ const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
                formatter: function(params: any) {
                  let result = `${params[0].axisValue}<br/>`
                  params.forEach((param: any) => {
-                    result += `${param.marker}${param.seriesName}: ${param.value}<br/>`
+                    result += `${param.marker}${param.seriesName}: ${param.value}%<br/>`
                  })
                  return result
                }
@@ -92,7 +93,7 @@ const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
              },
              grid: {
                top: 16,
-                left: 30,
+                left: 40,
                right: 36,
                bottom: 48,
                // containLabel: false
@@ -103,7 +104,7 @@ const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
                boundaryGap: false,
                axisLabel: {
                  color: '#A8A9AA',
-                  fontFamily: 'PingFangSC, PingFang SC'
+                  fontFamily: 'PingFangSC, PingFang SC',
                },
                axisLine: {
                  show: true,
@@ -130,7 +131,8 @@ const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
                type: 'value',
                axisLabel: {
                  color: '#A8A9AA',
-                  fontFamily: 'PingFangSC, PingFang SC'
+                  fontFamily: 'PingFangSC, PingFang SC',
+                  formatter: '{value}%'
                },
                axisLine: {
                  show: true,
@@ -152,7 +154,7 @@ const EmotionLine: FC<EmotionLineProps> = ({ chartData, loading }) => {
                    type: 'solid'
                  }
                },
-                max: 1,
+                max: 100,
                min: 0
              },
              series: getSeries()
--- a/web/src/views/UserMemoryDetail/components/ForgetRefreshModal.tsx
+++ b/web/src/views/UserMemoryDetail/components/ForgetRefreshModal.tsx
@@ -0,0 +1,113 @@
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { useParams } from 'react-router-dom'
+import { Form, Slider } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import RbModal from '@/components/RbModal'
+import { forgetTrigger } from '@/api/memory'
+import type { ForgetRefreshModalRef } from '../pages/ForgetDetail'
+
+interface ForgetRefreshModalProps {
+  refresh: (flag: boolean) => void;
+}
+
+const ForgetRefreshModal = forwardRef<ForgetRefreshModalRef, ForgetRefreshModalProps>(({
+  refresh
+}, ref) => {
+  const { t } = useTranslation();
+  const { id } = useParams()
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<{ max_merge_batch_size: number; min_days_since_access: number; }>();
+  const [loading, setLoading] = useState(false)
+  const values = Form.useWatch([], form);
+
+  // 封装取消方法，添加关闭弹窗逻辑
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setLoading(false)
+  };
+
+  const handleOpen = () => {
+    form.resetFields();
+    setVisible(true);
+  };
+  // 封装保存方法，添加提交逻辑
+  const handleSave = () => {
+    if(!id) return
+    form
+      .validateFields()
+      .then((values) => {
+        setLoading(true)
+        forgetTrigger({
+          ...values,
+          end_user_id: id
+        })
+          .then(() => {
+            refresh(true)
+            handleClose()
+          })
+          .finally(() => {
+            setLoading(false)
+          })
+      })
+      .catch((err) => {
+        console.log('err', err)
+      });
+  }
+
+  // 暴露给父组件的方法
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={t('common.refresh')}
+      open={visible}
+      onCancel={handleClose}
+      okText={t('common.refresh')}
+      onOk={handleSave}
+      confirmLoading={loading}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+      >
+        <div className="rb:pl-3">
+          <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
+            {t(`forgettingEngine.max_merge_batch_size`)}
+          </div>
+
+          <Form.Item
+            name="max_merge_batch_size"
+          >
+            <Slider tooltip={{ open: false }} max={1000} min={1} step={1} style={{ margin: '0' }} />
+          </Form.Item>
+          <div className="rb:flex rb:text-[12px] rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:-mt-6.5">
+            <span>{t(`forgettingEngine.range`)}: {[1, 1000]?.join('-')}</span>
+            {t('forgettingEngine.CurrentValue')}: {values?.min_days_since_access || 0}
+          </div>
+        </div>
+        <div className="rb:pl-3 rb:mt-4">
+          <div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mb-2">
+            {t(`forgettingEngine.min_days_since_access`)}
+          </div>
+
+          <Form.Item
+            name="min_days_since_access"
+          >
+            <Slider tooltip={{ open: false }} max={365} min={1} step={1} style={{ margin: '0' }} />
+          </Form.Item>
+          <div className="rb:flex rb:text-[12px] rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:-mt-6.5">
+            <span>{t(`forgettingEngine.range`)}: {[1, 365]?.join('-')}</span>
+            {t('forgettingEngine.CurrentValue')}: {values?.min_days_since_access || 0}
+          </div>
+        </div>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default ForgetRefreshModal;
--- a/web/src/views/UserMemoryDetail/components/InteractionBar.tsx
+++ b/web/src/views/UserMemoryDetail/components/InteractionBar.tsx
@@ -1,4 +1,4 @@
-import { type FC } from 'react'
+import { type FC, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactEcharts from 'echarts-for-react'
 import Empty from '@/components/Empty'
@@ -14,11 +14,13 @@ const Colors = ['#155EEF', '#369F21', '#FF5D34']
 const InteractionBar: FC<InteractionBarProps> = ({ chartData, loading }) => {
  const { t } = useTranslation()

-  const series = [{
-    name: 'Interaction Count',
-    type: 'bar',
-    data: chartData.map(item => item.count)
-  }]
+  const series = useMemo(() => {
+    return [{
+      name: t('userMemory.interactionCountData'),
+      type: 'bar',
+      data: chartData.map(item => item.count)
+    }]
+  }, [chartData, t])

  return (
    <>
@@ -80,6 +82,7 @@ const InteractionBar: FC<InteractionBarProps> = ({ chartData, loading }) => {
              },
              yAxis: {
                type: 'value',
+                minInterval: 1,
                axisLabel: {
                  color: '#A8A9AA',
                  fontFamily: 'PingFangSC, PingFang SC'
@@ -104,8 +107,6 @@ const InteractionBar: FC<InteractionBarProps> = ({ chartData, loading }) => {
                    type: 'solid'
                  }
                },
-                max: 1,
-                min: 0
              },
              series
            }}
--- a/web/src/views/UserMemoryDetail/components/PageHeader.tsx
+++ b/web/src/views/UserMemoryDetail/components/PageHeader.tsx
@@ -1,20 +1,22 @@
 import { type FC, type ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Layout } from 'antd';
+import { Layout, Space, Button } from 'antd';
 import { useTranslation } from 'react-i18next';
-import logoutIcon from '@/assets/images/logout.svg'
+import logoutIcon from '@/assets/images/logout_hover.svg'

 const { Header } = Layout;

 interface ConfigHeaderProps {
  name?: string;
  operation?: ReactNode;
-  source?: 'detail' | 'node'
+  source?: 'detail' | 'node';
+  extra?: ReactNode;
 }
 const PageHeader: FC<ConfigHeaderProps> = ({ 
  name,
  operation,
-  source = 'detail'
+  source = 'detail',
+  extra
 }) => {
  const { t } = useTranslation();
  const navigate = useNavigate();
@@ -33,10 +35,13 @@ const PageHeader: FC<ConfigHeaderProps> = ({
        {operation}
      </div>

-      <div className="rb:h-8 rb:flex rb:items-center rb:justify-end rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:cursor-pointer" onClick={goBack}>
-        <img src={logoutIcon} className="rb:mr-2 rb:w-4 rb:h-4" />
-        {t('common.return')}
-      </div>
+      <Space size={12}>
+        <Button type="primary" ghost className="rb:group rb:h-6! rb:px-2!" onClick={goBack}>
+          <img src={logoutIcon} className="rb:w-4 rb:h-4" />
+          {t('common.return')}
+        </Button>
+        {extra}
+      </Space>
    </Header>
  );
 };
--- a/web/src/views/UserMemoryDetail/components/Timeline.tsx
+++ b/web/src/views/UserMemoryDetail/components/Timeline.tsx
@@ -9,6 +9,7 @@ import {
 } from '@/api/memory'
 import { formatDateTime } from '@/utils/format';
 import Empty from '@/components/Empty'
+import Tag from '@/components/Tag'

 interface TimelineItem {
  id: string;
@@ -18,6 +19,9 @@ interface TimelineItem {
  summary: string;
  storage_type: number;
  created_time: string | number;
+  domain: string;
+  topic: string;
+  keywords: string[]
 }

 const KEYS = {
@@ -68,9 +72,14 @@ const Timeline: FC = () => {
                  {formatDateTime(vo.created_time)}
                  {index !== data.length - 1 && <Divider type="vertical" className="rb:flex-1 rb:w-px rb:border-[#155EEF]!" />}
                </div>
-                <div className="rb:flex rb:justify-between rb:flex-1 rb:mb-4">
-                  <div className="rb:w-150 rb:leading-5">{vo.summary}</div>
-                  <div className="rb:text-[#5B6167] rb:font-medium">{t(`perceptualDetail.${perceptual_type[vo.perceptual_type]}`)}</div>
+                <div className="rb:flex-1 rb:pb-4">
+                  <div className="rb:flex rb:justify-between">
+                    <div className="rb:w-150 rb:leading-5 rb:font-medium">{vo.summary}</div>
+                    <div className="rb:text-[#5B6167] rb:font-medium rb:flex-1 rb:text-right">{t(`perceptualDetail.${perceptual_type[vo.perceptual_type]}`)}</div>
+                  </div>
+                  <div className="rb:text-[#5B6167] rb:leading-5 rb:mt-2">{[vo.domain, vo.topic].join(' | ')}</div>
+                  
+                  <Space size={8} className="rb:mt-2">{vo.keywords.map(tag => <Tag>{tag}</Tag>)}</Space>
                </div>
              </div>
            ))}