发布页开发

src/components/FormSwitch/FormSwitch.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+import { Checkbox } from '@nutui/nutui-react-taro'
+import { Image } from '@tarojs/components'
+import images from '@/config/images'
+import './index.scss'
+
+interface FormSwitchProps {
+  value: boolean
+  onChange: (checked: boolean) => void
+  title: string
+  infoIcon?: string
+  showToast?: boolean
+}
+
+const FormSwitch: React.FC<FormSwitchProps> = ({ value, onChange, title, infoIcon, showToast = false}) => {
+  return (
+    <View className='auto-degrade-section'>
+      <View className='auto-degrade-item'>
+        <View className='auto-degrade-content'>
+          <Text className='auto-degrade-text'>{title}</Text>
+          {
+            showToast && <View className='info-icon'><Image src={images.ICON_TIPS || infoIcon} /></View>
+          }
+        </View>
+        <Checkbox 
+          className='auto-degrade-checkbox nut-checkbox-black'
+          checked={value}
+          onChange={onChange}
+        />
+      </View>
+    </View>
+  )
+}
+
+export default FormSwitch 

src/components/FormSwitch/index.scss

@@ -0,0 +1,43 @@
+.auto-degrade-section {
+  background: #fff;
+  border-radius: 12px;
+  padding: 10px 12px;
+  height: 44px;
+  .auto-degrade-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    .auto-degrade-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      
+      .auto-degrade-text {
+        font-size: 16px;
+        color: #333;
+        font-weight: 500;
+      }
+      
+      .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;
+      }
+    }
+    
+    .auto-degrade-checkbox {
+      :global(.nut-checkbox__icon) {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+} 

src/components/FormSwitch/index.ts

@@ -0,0 +1 @@
+export { default } from './AutoDegradeSwitch'