feat(web): memory manage & memory detail ui upgrade

web/src/components/BtnTabs/index.tsx

@@ -0,0 +1,49 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-03-19 14:05:09 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-03-19 14:05:09 
+ */
+import { type FC } from 'react'
+import { Flex } from 'antd';
+import clsx from 'clsx'
+
+/** A single tab item with a display label and unique key */
+interface Tab {
+  label: string
+  key: string
+}
+
+/** Props for the BtnTabs component */
+interface BtnTabsProps {
+  /** List of tab items to render */
+  items: Tab[]
+  /** Key of the currently active tab */
+  activeKey: string
+  /** Callback fired when a tab is clicked */
+  onChange: (key: string) => void;
+  /** Optional extra class name for the container */
+  className?: string;
+}
+
+/** Button-style tab switcher — renders tabs as pill-shaped buttons with active highlight */
+const BtnTabs: FC<BtnTabsProps> = ({ items, activeKey, onChange, className }) => {
+  return (
+    <Flex align="center" gap={8} className={className || ''}>
+      {items.map((tab) => (
+        <div
+          key={tab.key}
+          onClick={() => onChange(tab.key)}
+          className={clsx('rb:px-2 rb:py-1 rb:rounded-[13px] rb:text-[12px] rb:leading-4.5 rb:cursor-pointer', {
+            'rb:bg-[#F6F6F6]': activeKey !== tab.key,
+            'rb:bg-[#171719] rb:text-white': activeKey === tab.key,
+          })}
+        >
+          {tab.label}
+        </div>
+      ))}
+    </Flex>
+  )
+}
+
+export default BtnTabs

web/src/components/ModelSelect/index.tsx

@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-03-07 16:49:59 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-07 17:14:57
+ * @Last Modified time: 2026-03-18 10:12:23
  */
 import { useEffect, useState, type FC } from 'react';
 import { Select, Flex, Space } from 'antd';
@@ -19,11 +19,13 @@ interface ModelSelectProps extends SelectProps {
   /** Extra query params passed to getModelList */
   params?: Query;
   placeholder?: string;
+  fontClassName?: string;
 }
 
 const ModelSelect: FC<ModelSelectProps> = ({
   params,
   placeholder,
+  fontClassName,
   ...props
 }) => {
   const { t } = useTranslation();
@@ -48,7 +50,7 @@ const ModelSelect: FC<ModelSelectProps> = ({
     return (
       <Flex align="center" gap={8}>
         {logo && <img src={logo} className="rb:size-5 rb:rounded-md" alt="" />}
-        <div className="rb:flex-1 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{item.name}</div>
+        <div className={`rb:flex-1 rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap ${fontClassName}`}>{item.name}</div>
       </Flex>
     );
   };