增加开启自动候补

src/components/FormSwitch/FormSwitch.tsx

@@ -1,6 +1,6 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'
-import { Checkbox } from '@nutui/nutui-react-taro'
+import { Checkbox, Popover } from '@nutui/nutui-react-taro'
 import { Image } from '@tarojs/components'
 import images from '@/config/images'
 import './index.scss'
@@ -8,19 +8,35 @@ import './index.scss'
 interface FormSwitchProps {
   value: boolean
   onChange: (checked: boolean) => void
-  title: string
+  subTitle: string
   infoIcon?: string
   showToast?: boolean
+  description?: string
 }
 
-const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, title, infoIcon, showToast = false}) => {
+const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, subTitle, infoIcon, showToast = false, description}) => {
+  const [dark, setDark] = useState(false)
   return (
     <View className='auto-degrade-section'>
       <View className='auto-degrade-item'>
         <View className='auto-degrade-content'>
-          <Text className='auto-degrade-text'>{title}</Text>
+          <Text className='auto-degrade-text'>{subTitle}</Text>
           {
-            showToast && <View className='info-icon'><Image src={images.ICON_TIPS || infoIcon} /></View>
+            showToast && <Popover
+            visible={dark}
+            list={[{
+              key: 'key1',
+              name: description || '',
+            }]}
+            theme="dark"
+            location="bottom-start"
+            style={{ marginInlineEnd: '30px' }}
+            onClick={() => {
+              dark ? setDark(false) : setDark(true)
+            }}
+          >
+            <View className='info-icon'><Image src={images.ICON_TIPS || infoIcon} className='info-img' /></View>
+          </Popover>
           }
         </View>
         <Checkbox 

src/components/FormSwitch/index.scss

@@ -3,11 +3,13 @@
   border-radius: 12px;
   padding: 10px 12px;
   height: 44px;
+  width: 100%;
+  box-sizing: border-box;
   .auto-degrade-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    
+    width: 100%;
     .auto-degrade-content {
       display: flex;
       align-items: center;
@@ -20,23 +22,21 @@
       }
       
       .info-icon {
-        width: 16px;
-        height: 16px;
-        background: #999;
-        color: #fff;
-        border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 12px;
-        font-weight: bold;
+        padding-left: 4px;
+        .info-img{
+          width: 12px;
+          height: 12px;
+        }
       }
     }
     
     .auto-degrade-checkbox {
-      :global(.nut-checkbox__icon) {
-        width: 20px;
-        height: 20px;
+      .nut-checkbox-icon {
+        width: 14px;
+        height: 14px;
       }
     }
   }