fix(web): user memory

web/src/views/UserMemoryDetail/pages/EpisodicDetail.tsx

@@ -39,6 +39,7 @@ const TAG_COLORS: Record<string, "processing" | "success" | "warning" | "error"
   learning: "warning",
   decision: "warning",
   important_event: "error",
+  default: 'default'
 }
 const BG_COLORS: Record<string, string> = {
   conversation: "rb:bg-[#155EEF]",
@@ -46,10 +47,12 @@ const BG_COLORS: Record<string, string> = {
   learning: "rb:bg-[#FF5D34]",
   decision: "rb:bg-[#FF5D34]",
   important_event: "rb:bg-[#5B6167]",
+  default: 'rb:bg-[#F0F3F8] rb:text-[#5B6167]!'
 }
 
 // Map display types to internal keys
 const getTypeKey = (type: string): string => {
+  if (!type) return 'default'
   const typeMap: Record<string, string> = {
     'Learning': 'learning',
     'Project/Work': 'project_work',
@@ -176,6 +179,7 @@ const EpisodicDetail: FC = () => {
           <RbCard
             title={<>{t('episodicDetail.curResult')}<span className="rb:text-[#5B6167] rb:font-regular!"> ({data.total || 0}{t('episodicDetail.unix')})</span></>}
             headerType="borderless"
+            bodyClassName="rb:h-[calc(100vh-349px)] rb:overflow-y-auto"
           >
             {loading
               ? <Skeleton active />
@@ -192,9 +196,12 @@ const EpisodicDetail: FC = () => {
                         })}
                         onClick={() => setSelected(vo)}
                       >
-                        <div className={clsx("rb:bg-[#369F21] rb:rounded-lg rb:text-[#FFFFFF] rb:size-6 rb:text-[12px] rb:leading-6 rb:text-center rb:mr-3", BG_COLORS[getTypeKey(vo.type)])}>{index + 1}</div>
-                        <div className="rb:flex-1">
-                          <div className="rb:flex rb:items-center rb:justify-between">{vo.title} <Tag color={TAG_COLORS[getTypeKey(vo.type)]}>{t(`episodicDetail.${getTypeKey(vo.type)}`)}</Tag></div>
+                        <div className={clsx("rb:rounded-lg rb:text-[#FFFFFF] rb:size-6 rb:text-[12px] rb:leading-6 rb:text-center rb:mr-3", BG_COLORS[getTypeKey(vo.type)])}>{index + 1}</div>
+                        <div className="rb:flex-1 rb:w-[calc(100%-36px)]">
+                          <div className="rb:flex rb:items-center rb:justify-between">
+                            <div className="rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap rb:flex-1">{vo.title}</div>
+                            {vo.type && <Tag color={TAG_COLORS[getTypeKey(vo.type)]}>{t(`episodicDetail.${getTypeKey(vo.type)}`)}</Tag>}
+                          </div>
                           <div className="rb:text-[#5B6167] rb:text-[12px]">{formatDateTime(vo.created_at)}</div>
                         </div>
                       </div>
@@ -202,13 +209,13 @@ const EpisodicDetail: FC = () => {
                   </Space>
                 )
             }
-
           </RbCard>
         </Col>
         <Col span={16}>
           <RbCard
             title={selected?.title}
             headerType="borderless"
+            bodyClassName="rb:h-[calc(100vh-349px)] rb:overflow-y-auto"
           >
             {detailLoading
               ? <Skeleton active />

web/src/views/UserMemoryDetail/pages/ExplicitDetail.tsx

@@ -1,7 +1,7 @@
 import { type FC, useEffect, useState, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
-import { List, Skeleton, Row, Col } from 'antd'
+import { Skeleton, Row, Col } from 'antd'
 import RbCard from '@/components/RbCard/Card'
 import {
   getExplicitMemory,
@@ -65,7 +65,7 @@ const ExplicitDetail: FC = () => {
       {loading ?
         <Skeleton active />
         : data.episodic_memories?.length > 0 ? (
-          <Row gutter={16}>
+          <Row gutter={[16, 16]}>
             {data.episodic_memories.map(item => (
               <Col key={item.id} span={6}>
                 <RbCard
@@ -85,7 +85,7 @@ const ExplicitDetail: FC = () => {
       {loading ?
         <Skeleton active />
         : data.semantic_memories?.length > 0 ? (
-          <Row gutter={16}>
+          <Row gutter={[16, 16]}>
             {data.semantic_memories.map(item => (
               <Col key={item.id} span={6}>
                 <RbCard

web/src/views/UserMemoryDetail/pages/WorkingDetail.tsx

@@ -113,7 +113,7 @@ const WorkingDetail: FC = () => {
                     <div className={clsx("rb:p-[8px_13px] rb:rounded-lg rb:leading-5 rb:cursor-pointer rb:hover:bg-[#F0F3F8]", {
                       'rb:bg-[#FFFFFF] rb:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.15)] rb:font-medium rb:hover:bg-[#FFFFFF]!': item.id === selected?.id,
                     })}
-                      onClick={() => getDetail(item.id)}
+                      onClick={() => setSelected(item)}
                     >
                       {item.title}
                     </div>

web/src/views/UserMemoryDetail/pages/index.tsx

@@ -62,10 +62,10 @@ const Detail: FC = () => {
         {type === 'FORGETTING_MANAGEMENT' && <ForgetDetail />}
         {type === 'IMPLICIT_MEMORY' && <ImplicitDetail />}
         {type === 'SHORT_TERM_MEMORY' && <ShortTermDetail />}
-        {type === 'PERCEPTUAL_MEMORY' && <PerceptualDetail />} {/** TODO */}
+        {type === 'PERCEPTUAL_MEMORY' && <PerceptualDetail />}
         {type === 'EPISODIC_MEMORY' && <EpisodicDetail />}
-        {type === 'WORKING_MEMORY' && <WorkingDetail />} {/** TODO */}
-        {type === 'EXPLICIT_MEMORY' && <ExplicitDetail />} {/** TODO */}
+        {type === 'WORKING_MEMORY' && <WorkingDetail />}
+        {type === 'EXPLICIT_MEMORY' && <ExplicitDetail />}
       </div>
     </div>
   )