feat(mini): add child delete picker in manage page

banban-mini/src/pages/sleep/index.scss

@@ -480,15 +480,24 @@
   align-items: center;
   justify-content: space-between;
   margin-bottom: 10px;
+  gap: 16px;
 }
 
 .device-switch-id {
+  min-width: 0;
   font-size: 28px;
   color: #1A1A1A;
   font-weight: 600;
   word-break: break-all;
 }
 
+.device-switch-tags {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
 .device-switch-tag {
   margin-left: 16px;
   padding: 6px 14px;
@@ -497,6 +506,14 @@
   font-size: 22px;
   color: #FFFFFF;
   flex-shrink: 0;
+
+  .device-switch-tags & {
+    margin-left: 0;
+  }
+
+  &.danger {
+    background: #E5484D;
+  }
 }
 
 .device-switch-name {
@@ -504,6 +521,15 @@
   color: #666666;
 }
 
+.delete-child-item {
+  border: 2px solid transparent;
+
+  &:active {
+    background: #FFF1F2;
+    border-color: #FDA4AF;
+  }
+}
+
 .loading {
   min-height: 100%;
   display: flex;

banban-mini/src/pages/sleep/index.tsx

@@ -9,7 +9,7 @@ import {
   setSelectedBindingDeviceId,
   unbindDevice,
 } from '@/services/binding'
-import { Child, clearSelectedChildId, createChild, setSelectedChildId, updateChild } from '@/services/child'
+import { Child, clearSelectedChildId, createChild, deleteChild, setSelectedChildId, updateChild } from '@/services/child'
 import {
   DeviceCurrentRole,
   DeviceFirmwareStatus,
@@ -48,6 +48,7 @@ export default function Sleep() {
   const [isUpdatingRole, setIsUpdatingRole] = useState(false)
   const [showModal, setShowModal] = useState(false)
   const [showChildModal, setShowChildModal] = useState(false)
+  const [showDeleteChildModal, setShowDeleteChildModal] = useState(false)
   const [showRoleModal, setShowRoleModal] = useState(false)
   const [modalType, setModalType] = useState<'add' | 'edit'>('add')
   const [childName, setChildName] = useState('')
@@ -207,6 +208,43 @@ export default function Sleep() {
     }
   }
 
+  const handleDeleteChild = (child: Child) => {
+    const childBinding = bindings.find((item) => item.child_id === child.child_id) || null
+    const isCurrentChild = currentChild?.child_id === child.child_id
+    const content = childBinding?.device_id
+      ? '删除后，' + child.child_name + ' 将不再显示，设备 ' + childBinding.device_id + ' 会保留但不再分配给该孩子。确定删除吗？'
+      : '删除后，' + child.child_name + ' 将不再显示。确定删除吗？'
+
+    Taro.showModal({
+      title: '删除孩子',
+      content,
+      confirmText: '删除',
+      confirmColor: '#E5484D',
+      success: async (result) => {
+        if (!result.confirm) return
+
+        try {
+          await deleteChild(child.child_id)
+          if (isCurrentChild) {
+            clearSelectedChildId()
+          }
+          if (isCurrentChild && childBinding?.device_id && binding?.device_id === childBinding.device_id) {
+            clearSelectedBindingDeviceId()
+          }
+          setShowDeleteChildModal(false)
+          Taro.showToast({ title: '已删除', icon: 'success' })
+          await loadData()
+        } catch (error: any) {
+          console.error('[manage] delete child failed:', error)
+          Taro.showToast({
+            title: error?.message || '删除失败，请重试',
+            icon: 'none',
+          })
+        }
+      },
+    })
+  }
+
   const handleStartFirmwareUpdate = () => {
     if (!binding?.device_id || !firmwareStatus?.can_update || isLoadingFirmware || isUpdatingFirmware) return
 
@@ -332,6 +370,11 @@ export default function Sleep() {
       return
     }
 
+    if (item.name === '删除孩子') {
+      setShowDeleteChildModal(true)
+      return
+    }
+
     if (item.name === '绑定设备') {
       if (!currentChild) {
         handleOpenModal('add')
@@ -405,6 +448,14 @@ export default function Sleep() {
       value: '',
       arrow: true,
     },
+    {
+      icon: require('../../assets/tab-icons/broken-rings.png'),
+      iconBgClass: 'red',
+      name: '删除孩子',
+      value: children.length > 0 ? `${children.length} 个可选` : '未添加',
+      arrow: true,
+      disabled: children.length === 0,
+    },
     {
       icon: require('../../assets/tab-icons/rings.png'),
       iconBgClass: 'green',
@@ -572,6 +623,50 @@ export default function Sleep() {
         </View>
       )}
 
+      {showDeleteChildModal && (
+        <View className='modal-mask' onClick={() => setShowDeleteChildModal(false)}>
+          <View
+            className='modal-card device-switch-card'
+            onClick={(event) => {
+              event.stopPropagation()
+            }}
+          >
+            <Text className='modal-title'>选择要删除的孩子</Text>
+            {children.length === 0 ? (
+              <Text className='device-switch-empty'>当前还没有儿童资料</Text>
+            ) : (
+              <View className='device-switch-list'>
+                {children.map((item) => {
+                  const isActive = currentChild?.child_id === item.child_id
+                  const itemBinding = bindings.find((bindingItem) => bindingItem.child_id === item.child_id) || null
+                  return (
+                    <View
+                      key={item.child_id}
+                      className='device-switch-item delete-child-item'
+                      onClick={() => handleDeleteChild(item)}
+                    >
+                      <View className='device-switch-head'>
+                        <Text className='device-switch-id'>{item.child_name}</Text>
+                        <View className='device-switch-tags'>
+                          {isActive && <Text className='device-switch-tag'>当前</Text>}
+                          <Text className='device-switch-tag danger'>删除</Text>
+                        </View>
+                      </View>
+                      <Text className='device-switch-name'>{itemBinding?.device_id || '未绑定设备'}</Text>
+                    </View>
+                  )
+                })}
+              </View>
+            )}
+            <View className='modal-actions'>
+              <Text className='modal-action cancel' onClick={() => setShowDeleteChildModal(false)}>
+                关闭
+              </Text>
+            </View>
+          </View>
+        </View>
+      )}
+
       {showModal && (
         <View className='modal-mask'>
           <View className='modal-card'>