feat(web): extract and replace Switch Form components

web/src/components/FormItem/DescWrapper.tsx

@@ -0,0 +1,12 @@
+import clsx from "clsx";
+import type { FC, ReactNode } from "react";
+
+const DescWrapper: FC<{desc: string | ReactNode, className?: string}> = ({desc, className}) => {
+  return (
+    <div className={clsx(className, "rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 ")}>
+      {desc}
+    </div>
+  )
+}
+
+export default DescWrapper

web/src/components/FormItem/LabelWrapper.tsx

@@ -0,0 +1,13 @@
+import clsx from "clsx";
+import type { FC, ReactNode } from "react";
+
+const LabelWrapper: FC<{ title: string | ReactNode, className?: string; children?: ReactNode}> = ({title, className, children}) => {
+  return (
+    <div className={clsx(className)}>
+      <div className="rb:text-[14px] rb:font-medium rb:leading-5">{title}</div>
+      {children}
+    </div>
+  )
+}
+
+export default LabelWrapper

web/src/components/FormItem/SwitchFormItem.tsx

@@ -0,0 +1,45 @@
+import { Switch, Form, ConfigProvider } from "antd";
+import useSize from 'antd/lib/config-provider/hooks/useSize'
+import type { FC, ReactNode } from "react";
+import { useContext } from "react";
+
+import LabelWrapper from './LabelWrapper'
+import DescWrapper from './DescWrapper'
+
+interface SwitchFormItemProps {
+  title: string | ReactNode;
+  desc?: string | ReactNode;
+  name: string | string[];
+  size?: 'small' | 'default'
+  className?: string;
+  disabled?: boolean;
+}
+
+const SwitchFormItem: FC<SwitchFormItemProps> = ({
+  title,
+  desc,
+  name,
+  size = 'default',
+  className,
+  disabled
+}) => {
+  const componentSize = useSize()
+  console.log('componentSize', componentSize)
+  
+  return (
+    <div className={`${className} rb:flex rb:items-center rb:justify-between`}>
+      <LabelWrapper title={title}>
+        {desc && <DescWrapper desc={desc} className="rb:mt-2" />}
+      </LabelWrapper>
+      <Form.Item
+        name={name}
+        valuePropName="checked"
+        className="rb:mb-0!"
+      >
+        <Switch disabled={disabled} size={size} />
+      </Form.Item>
+    </div>
+  )
+}
+
+export default SwitchFormItem

web/src/views/EmotionEngine/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Row, Col, Form, Slider, Button, Alert, message, Switch, Space } from 'antd';
+import { Row, Col, Form, Slider, Button, Alert, message, Space } from 'antd';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import RbCard from '@/components/RbCard/Card';
@@ -9,6 +9,7 @@ import type { ConfigForm } from './types'
 import CustomSelect from '@/components/CustomSelect';
 import { getModelListUrl } from '@/api/models'
 import Tag from '@/components/Tag'
+import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
 
 const configList = [
   {
@@ -158,23 +159,17 @@ const EmotionEngine: React.FC = () => {
                   </div>
                 )
               }
-
               return (
-                <div className="rb:flex rb:items-center rb:justify-between rb:mb-6">
+                <SwitchFormItem
-                  <div>
+                  title={t(`emotionEngine.${config.key}`)}
-                    <span className="rb:text-[14px] rb:font-medium rb:leading-5">{t(`emotionEngine.${config.key}`)}</span>
+                  name={config.key}
+                  desc={<>
                     {config.hasSubTitle && <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`emotionEngine.${config.key}_subTitle`)}</div>}
                     <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`emotionEngine.${config.key}_desc`)}</div>
-                  </div>
+                  </>}
-                  <Form.Item
+                  className="rb:mb-6"
-                    name={config.key}
+                  disabled={!values?.emotion_enabled && config.key !== 'emotion_enabled'}
-                    valuePropName="checked"
+                />
-                    className="rb:ml-2 rb:mb-0!"
-                  >
-                    <Switch
-                      disabled={!values?.emotion_enabled && config.key !== 'emotion_enabled'} />
-                  </Form.Item>
-                </div>
               )
             })}
             <Row gutter={16} className="rb:mt-3">

web/src/views/ForgettingEngine/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Row, Col, Form, Slider, Button, Space, message, Switch } from 'antd';
+import { Row, Col, Form, Slider, Button, Space, message } from 'antd';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import RbCard from '@/components/RbCard/Card';
@@ -7,6 +7,7 @@ import strategyImpactSimulator from '@/assets/images/memory/strategyImpactSimula
 import LineChart from './components/LineChart'
 import { getMemoryForgetConfig, updateMemoryForgetConfig } from '@/api/memory'
 import type { ConfigForm } from './types'
+import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
 
 const configList = [
   {
@@ -155,26 +156,12 @@ const ForgettingEngine: React.FC = () => {
               {configList.map(config => {
                 if (config.type === 'button') {
                   return (
-                    <div key={config.key} className="rb:mb-2">
+                    <SwitchFormItem
-                      <div className="rb:flex rb:items-center rb:justify-between">
+                      title={t(`forgettingEngine.${config.key}`)}
-                        <div>
+                      name={config.name}
-                          <span className="rb:text-[14px] rb:font-medium rb:leading-5">{t(`forgettingEngine.${config.key}`)}</span>
+                      desc={config.type && <span>{t(`forgettingEngine.type`)}: {config.type}</span>}
-                        </div>
+                      className="rb:mb-2"
-                        <Form.Item
+                    />
-                          name={config.name}
-                          valuePropName="checked"
-                          className="rb:ml-2 rb:mb-0!"
-                        >
-                          <Switch />
-                        </Form.Item>
-                      </div>
-                      <div className="rb:flex rb:text-[12px] rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5">
-                        <Space size={4}>
-                          {config.range && <span>{t(`forgettingEngine.range`)}: {config.range?.join('-')}</span>}
-                          {config.type && <span>{t(`forgettingEngine.type`)}: {config.type}</span>}
-                        </Space>
-                      </div>
-                    </div>
                   )
                 }
                 return (
@@ -191,8 +178,6 @@ const ForgettingEngine: React.FC = () => {
                     >
                       {config.type === 'decimal'
                         ? <Slider tooltip={{ open: false }} max={config.range?.[1] || 1} min={config.range?.[0] || 0} step={config.step ?? 0.01} style={{ margin: '0' }} />
-                        : config.type === 'button'
-                        ? <Switch />
                         : null
                       }
                     </Form.Item>

web/src/views/MemoryExtractionEngine/index.tsx

@@ -11,6 +11,7 @@ import { getModelList } from '@/api/models';
 import type { Model } from '@/views/ModelManagement/types'
 import { configList } from './constant'
 import Result from './components/Result'
+import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
 
 const keys = [
   // 'example', 
@@ -173,25 +174,18 @@ const MemoryExtractionEngine: FC = () => {
                           }
                         )}
                       >
-                        <div className="rb:text-[16px] rb:font-medium rb:leading-[22px]">{t(`memoryExtractionEngine.${vo.title}`)}</div>
+                        <div className="rb:text-[16px] rb:font-medium rb:leading-5.5">{t(`memoryExtractionEngine.${vo.title}`)}</div>
                         <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`memoryExtractionEngine.${vo.title}SubTitle`)}</div>
 
                         {vo.list.map(config => (
                           <div key={config.label}>
                             {config.control === 'button' &&
-                              <div className="rb:flex rb:items-center rb:justify-between rb:mt-6">
+                              <SwitchFormItem
-                                <div>
+                                title={<>-{t(`memoryExtractionEngine.${config.label}`)}</>}
-                                  <span className="rb:text-[14px] rb:font-medium rb:leading-5">-{t(`memoryExtractionEngine.${config.label}`)}</span>
+                                name={config.variableName}
-                                  <ConfigDesc config={config} className="rb:ml-2" />
+                                desc={<ConfigDesc config={config} className="rb:ml-2" />}
-                                </div>
+                                className="rb:mt-6"
-                                <Form.Item
+                              />
-                                  name={config.variableName}
-                                  valuePropName="checked"
-                                  className="rb:ml-2 rb:mb-0!"
-                                >
-                                  <Switch />
-                                </Form.Item>
-                              </div>
                             }
                             {config.control === 'select' &&
                               <>

web/src/views/SelfReflectionEngine/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Row, Col, Form, App, Button, Switch, Space, Select } from 'antd';
+import { Row, Col, Form, App, Button, Space, Select } from 'antd';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -11,6 +11,7 @@ import CustomSelect from '@/components/CustomSelect';
 import { getModelListUrl } from '@/api/models'
 import Tag from '@/components/Tag'
 import { useI18n } from '@/store/locale';
+import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
 
 const configList = [
   // 启用反思引擎
@@ -219,21 +220,16 @@ const SelfReflectionEngine: React.FC = () => {
               }
 
               return (
-                <div className="rb:flex rb:items-center rb:justify-between rb:mb-6">
+                <SwitchFormItem
-                  <div>
+                  title={t(`reflectionEngine.${config.key}`)}
-                    <span className="rb:text-[14px] rb:font-medium rb:leading-5">{t(`reflectionEngine.${config.key}`)}</span>
+                  name={config.key}
+                  desc={<>
                     {(config as any).hasSubTitle && <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`reflectionEngine.${config.key}_subTitle`)}</div>}
                     <div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`reflectionEngine.${config.key}_desc`)}</div>
-                  </div>
+                  </>}
-                  <Form.Item
+                  className="rb:mb-6"
-                    name={config.key}
+                  disabled={!values?.reflection_enabled && config.key !== 'reflection_enabled'}
-                    valuePropName="checked"
+                />
-                    className="rb:ml-2 rb:mb-0!"
-                  >
-                    <Switch
-                      disabled={!values?.reflection_enabled && config.key !== 'reflection_enabled'} />
-                  </Form.Item>
-                </div>
               )
             })}
             <Row gutter={16} className="rb:mt-3">