1714 lines
61 KiB
TypeScript
1714 lines
61 KiB
TypeScript
import FirmwareProgress from '@/components/firmware-progress'
|
||
import { getRoleArtwork } from '@/utils/artwork'
|
||
import { getPageStyle } from '@/utils/page-style'
|
||
import { setActiveTabRoute } from '@/utils/tab-bar'
|
||
import { View, Text, Image, Input, Button } from '@tarojs/components'
|
||
import { useEffect, useRef, useState } from 'react'
|
||
import Taro, { useDidHide, useDidShow, useShareAppMessage } from '@tarojs/taro'
|
||
import { authorizeParentPhone, clearToken, getParent, getToken, Parent } from '@/services/auth'
|
||
import { DEVICE_UNAVAILABLE_MESSAGE } from '@/services/api'
|
||
import { getCurrentUserId } from '@/services/session'
|
||
import {
|
||
BindingListItem,
|
||
BindingCardItem,
|
||
BindingCardGroupItem,
|
||
clearSelectedBindingDeviceId,
|
||
getBindingCardGroups,
|
||
loadCurrentChildBindingContext,
|
||
setSelectedBindingDeviceId,
|
||
updateBindingCardName,
|
||
unbindDevice,
|
||
} from '@/services/binding'
|
||
import {
|
||
Child,
|
||
CHILD_NAME_RULE_MESSAGE,
|
||
clearSelectedChildId,
|
||
deleteChild,
|
||
sanitizeChildNameInput,
|
||
setSelectedChildId,
|
||
updateChild,
|
||
validateChildNameInput,
|
||
} from '@/services/child'
|
||
import {
|
||
createFamilyInvitation,
|
||
FamilyMember,
|
||
FamilyMemberListResponse,
|
||
getFamilyMembers,
|
||
leaveFamily,
|
||
removeFamilyMember,
|
||
updateFamilyMemberDisplayName,
|
||
} from '@/services/family'
|
||
import {
|
||
DeviceCurrentRole,
|
||
DeviceFirmwareStatus,
|
||
DeviceRoleSummary,
|
||
getDeviceFirmwareStatus,
|
||
getDeviceOnlineStatus,
|
||
getDeviceRole,
|
||
getDeviceRoles,
|
||
startDeviceFirmwareUpdate,
|
||
updateDeviceRole,
|
||
} from '@/services/device'
|
||
import { getWechatMpBindStatus, startWechatMpBind, WechatMpBindStatus } from '@/services/wechat-mp'
|
||
import { useSystemBanner } from '@/components/system-banner/use-system-banner'
|
||
import './index.scss'
|
||
|
||
interface MenuItem {
|
||
icon: string
|
||
iconBgClass: string
|
||
name: string
|
||
value: string
|
||
arrow?: boolean
|
||
disabled?: boolean
|
||
}
|
||
|
||
const FIRMWARE_STATUS_POLL_INTERVAL_MS = 3000
|
||
const FIRMWARE_UPDATE_IN_PROGRESS_STATUSES = new Set(['sent', 'accepted', 'updating'])
|
||
const FIRMWARE_UPDATE_SUCCESS_STATUSES = new Set(['success', 'completed'])
|
||
|
||
function normalizeFirmwareUpdateStatus(status?: string | null): string {
|
||
return String(status || '').trim().toLowerCase()
|
||
}
|
||
|
||
function isFirmwareUpdateInProgress(status?: string | null): boolean {
|
||
return FIRMWARE_UPDATE_IN_PROGRESS_STATUSES.has(normalizeFirmwareUpdateStatus(status))
|
||
}
|
||
|
||
function isFirmwareUpdateSuccessful(status?: string | null): boolean {
|
||
return FIRMWARE_UPDATE_SUCCESS_STATUSES.has(normalizeFirmwareUpdateStatus(status))
|
||
}
|
||
|
||
export default function Sleep() {
|
||
const systemBanner = useSystemBanner()
|
||
const [loading, setLoading] = useState(true)
|
||
const [children, setChildren] = useState<Child[]>([])
|
||
const [bindings, setBindings] = useState<BindingListItem[]>([])
|
||
const [binding, setBinding] = useState<BindingListItem | null>(null)
|
||
const [currentChild, setCurrentChild] = useState<Child | null>(null)
|
||
const [firmwareStatus, setFirmwareStatus] = useState<DeviceFirmwareStatus | null>(null)
|
||
const [showFirmwareProgress, setShowFirmwareProgress] = useState(false)
|
||
const [firmwareRefreshError, setFirmwareRefreshError] = useState(false)
|
||
const firmwareLoadGenerationRef = useRef(0)
|
||
const firmwareDeviceIdRef = useRef('')
|
||
const [deviceRole, setDeviceRole] = useState<DeviceCurrentRole | null>(null)
|
||
const [roles, setRoles] = useState<DeviceRoleSummary[]>([])
|
||
const [currentCardGroup, setCurrentCardGroup] = useState<BindingCardGroupItem | null>(null)
|
||
const [isLoadingCards, setIsLoadingCards] = useState(false)
|
||
const [isLoadingFirmware, setIsLoadingFirmware] = useState(false)
|
||
const [isUpdatingFirmware, setIsUpdatingFirmware] = useState(false)
|
||
const [isLoadingRoles, setIsLoadingRoles] = useState(false)
|
||
const [isUpdatingRole, setIsUpdatingRole] = useState(false)
|
||
const [familyInfo, setFamilyInfo] = useState<FamilyMemberListResponse | null>(null)
|
||
const [isLoadingFamily, setIsLoadingFamily] = useState(false)
|
||
const [isCreatingInvite, setIsCreatingInvite] = useState(false)
|
||
const [isUpdatingFamily, setIsUpdatingFamily] = useState(false)
|
||
const [isUpdatingFamilyName, setIsUpdatingFamilyName] = useState(false)
|
||
const [familyInvitePath, setFamilyInvitePath] = useState('')
|
||
const [familyInviteExpiresAt, setFamilyInviteExpiresAt] = useState('')
|
||
const [showModal, setShowModal] = useState(false)
|
||
const [showChildModal, setShowChildModal] = useState(false)
|
||
const [showRoleModal, setShowRoleModal] = useState(false)
|
||
const [showFamilyModal, setShowFamilyModal] = useState(false)
|
||
const [showFamilyNameModal, setShowFamilyNameModal] = useState(false)
|
||
const [showAssignDeviceModal, setShowAssignDeviceModal] = useState(false)
|
||
const [showCardsModal, setShowCardsModal] = useState(false)
|
||
const [showCardNameModal, setShowCardNameModal] = useState(false)
|
||
const [childName, setChildName] = useState('')
|
||
const [editingChildId, setEditingChildId] = useState<number | null>(null)
|
||
const [editingCard, setEditingCard] = useState<BindingCardItem | null>(null)
|
||
const [cardName, setCardName] = useState('')
|
||
const [isUpdatingCardName, setIsUpdatingCardName] = useState(false)
|
||
const [editingFamilyMember, setEditingFamilyMember] = useState<FamilyMember | null>(null)
|
||
const [familyMemberDisplayName, setFamilyMemberDisplayName] = useState('')
|
||
const [parentInfo, setParentInfo] = useState<Parent | null>(null)
|
||
const [wechatMpStatus, setWechatMpStatus] = useState<WechatMpBindStatus | null>(null)
|
||
const [isGuest, setIsGuest] = useState(false)
|
||
const [isLoadingWechatMp, setIsLoadingWechatMp] = useState(false)
|
||
const [isStartingWechatMpBind, setIsStartingWechatMpBind] = useState(false)
|
||
const [isAuthorizingPhone, setIsAuthorizingPhone] = useState(false)
|
||
const firmwareStatusPollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
|
||
const firmwareStatusPollDeviceIdRef = useRef('')
|
||
const isFirmwareStatusPollingRef = useRef(false)
|
||
|
||
useDidShow(() => {
|
||
setActiveTabRoute('pages/sleep/index')
|
||
void loadData()
|
||
})
|
||
|
||
useDidHide(() => {
|
||
stopFirmwareStatusPolling()
|
||
})
|
||
|
||
useEffect(() => () => {
|
||
stopFirmwareStatusPolling()
|
||
}, [])
|
||
|
||
useShareAppMessage(() => {
|
||
const targetName = currentChild?.child_name || binding?.device_id || '宝贝'
|
||
return {
|
||
title: `邀请你加入${targetName}的家庭共享`,
|
||
path: familyInvitePath || '/pages/device/index',
|
||
}
|
||
})
|
||
|
||
const loadData = async () => {
|
||
if (!getToken()) {
|
||
setChildren([])
|
||
setBindings([])
|
||
setBinding(null)
|
||
setCurrentChild(null)
|
||
setParentInfo(null)
|
||
setFirmwareStatus(null)
|
||
setDeviceRole(null)
|
||
setRoles([])
|
||
setCurrentCardGroup(null)
|
||
setFamilyInfo(null)
|
||
setWechatMpStatus(null)
|
||
setIsGuest(true)
|
||
setLoading(false)
|
||
return
|
||
}
|
||
|
||
setIsGuest(false)
|
||
setLoading(true)
|
||
try {
|
||
const context = await loadCurrentChildBindingContext()
|
||
const currentUserId = getCurrentUserId()
|
||
const currentParent = currentUserId ? await loadCurrentParent(currentUserId) : null
|
||
const nextBinding = (context.currentBinding as BindingListItem | null) || null
|
||
setChildren(context.children)
|
||
setBindings(context.bindings as BindingListItem[])
|
||
setCurrentChild(context.currentChild)
|
||
setBinding(nextBinding)
|
||
setParentInfo(currentParent)
|
||
void loadFirmwareStatus(nextBinding?.device_id)
|
||
void loadRoleData(nextBinding?.device_id)
|
||
void loadFamilyData(nextBinding?.device_id)
|
||
void loadCurrentDeviceCards(nextBinding?.device_id)
|
||
void loadWechatMpStatus()
|
||
} catch (error: any) {
|
||
console.error('[manage] load failed:', error)
|
||
Taro.showToast({
|
||
title: error?.message || '加载失败，请稍后重试',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
const loadWechatMpStatus = async () => {
|
||
setIsLoadingWechatMp(true)
|
||
try {
|
||
setWechatMpStatus(await getWechatMpBindStatus())
|
||
} catch (error) {
|
||
console.warn('[manage] wechat mp bind status load failed:', error)
|
||
setWechatMpStatus(null)
|
||
} finally {
|
||
setIsLoadingWechatMp(false)
|
||
}
|
||
}
|
||
|
||
const loadCurrentParent = async (userId: number): Promise<Parent | null> => {
|
||
try {
|
||
return await getParent(userId)
|
||
} catch (error) {
|
||
console.warn('[manage] parent profile load failed:', error)
|
||
return null
|
||
}
|
||
}
|
||
|
||
const currentChildName = currentChild?.child_name || '未设置'
|
||
|
||
function clearFirmwareStatusPollTimer() {
|
||
if (firmwareStatusPollTimerRef.current) {
|
||
clearTimeout(firmwareStatusPollTimerRef.current)
|
||
firmwareStatusPollTimerRef.current = null
|
||
}
|
||
}
|
||
|
||
function stopFirmwareStatusPolling() {
|
||
clearFirmwareStatusPollTimer()
|
||
firmwareStatusPollDeviceIdRef.current = ''
|
||
isFirmwareStatusPollingRef.current = false
|
||
}
|
||
|
||
function scheduleFirmwareStatusPoll(deviceId: string) {
|
||
clearFirmwareStatusPollTimer()
|
||
firmwareStatusPollTimerRef.current = setTimeout(() => {
|
||
void pollFirmwareStatus(deviceId)
|
||
}, FIRMWARE_STATUS_POLL_INTERVAL_MS)
|
||
}
|
||
|
||
function startFirmwareStatusPolling(deviceId: string) {
|
||
const normalizedDeviceId = String(deviceId || '').trim()
|
||
if (!normalizedDeviceId) return
|
||
|
||
firmwareStatusPollDeviceIdRef.current = normalizedDeviceId
|
||
scheduleFirmwareStatusPoll(normalizedDeviceId)
|
||
}
|
||
|
||
function syncFirmwareStatusPolling(deviceId: string, nextFirmwareStatus?: DeviceFirmwareStatus | null) {
|
||
const normalizedDeviceId = String(deviceId || '').trim()
|
||
if (!normalizedDeviceId) {
|
||
stopFirmwareStatusPolling()
|
||
return
|
||
}
|
||
|
||
if (isFirmwareUpdateInProgress(nextFirmwareStatus?.update_status)) {
|
||
startFirmwareStatusPolling(normalizedDeviceId)
|
||
} else {
|
||
stopFirmwareStatusPolling()
|
||
}
|
||
}
|
||
|
||
async function pollFirmwareStatus(deviceId: string) {
|
||
const normalizedDeviceId = String(deviceId || '').trim()
|
||
if (
|
||
!normalizedDeviceId ||
|
||
firmwareStatusPollDeviceIdRef.current !== normalizedDeviceId ||
|
||
isFirmwareStatusPollingRef.current
|
||
) {
|
||
return
|
||
}
|
||
|
||
isFirmwareStatusPollingRef.current = true
|
||
try {
|
||
const nextFirmwareStatus = await getDeviceFirmwareStatus(normalizedDeviceId)
|
||
if (firmwareStatusPollDeviceIdRef.current !== normalizedDeviceId) return
|
||
|
||
setFirmwareStatus(nextFirmwareStatus)
|
||
setFirmwareRefreshError(false)
|
||
if (isFirmwareUpdateInProgress(nextFirmwareStatus?.update_status)) {
|
||
scheduleFirmwareStatusPoll(normalizedDeviceId)
|
||
return
|
||
}
|
||
|
||
stopFirmwareStatusPolling()
|
||
const nextStatus = normalizeFirmwareUpdateStatus(nextFirmwareStatus?.update_status)
|
||
if (isFirmwareUpdateSuccessful(nextStatus)) {
|
||
Taro.showToast({ title: '系统更新完成', icon: 'success' })
|
||
} else if (nextStatus === 'failed') {
|
||
Taro.showToast({ title: '系统更新失败，可重试', icon: 'none' })
|
||
}
|
||
} catch (error) {
|
||
console.warn('[manage] firmware poll failed:', error)
|
||
if (firmwareStatusPollDeviceIdRef.current === normalizedDeviceId) setFirmwareRefreshError(true)
|
||
if (firmwareStatusPollDeviceIdRef.current === normalizedDeviceId) {
|
||
scheduleFirmwareStatusPoll(normalizedDeviceId)
|
||
}
|
||
} finally {
|
||
isFirmwareStatusPollingRef.current = false
|
||
}
|
||
}
|
||
|
||
const loadFirmwareStatus = async (deviceId?: string | null) => {
|
||
const normalizedDeviceId = String(deviceId || '').trim()
|
||
const generation = ++firmwareLoadGenerationRef.current
|
||
if (firmwareDeviceIdRef.current !== normalizedDeviceId) {
|
||
setShowFirmwareProgress(false)
|
||
setFirmwareStatus(null)
|
||
stopFirmwareStatusPolling()
|
||
}
|
||
firmwareDeviceIdRef.current = normalizedDeviceId
|
||
if (!normalizedDeviceId) {
|
||
setFirmwareStatus(null)
|
||
setIsLoadingFirmware(false)
|
||
stopFirmwareStatusPolling()
|
||
return
|
||
}
|
||
|
||
setIsLoadingFirmware(true)
|
||
try {
|
||
const nextFirmwareStatus = await getDeviceFirmwareStatus(normalizedDeviceId)
|
||
if (generation !== firmwareLoadGenerationRef.current) return
|
||
setFirmwareStatus(nextFirmwareStatus)
|
||
setFirmwareRefreshError(false)
|
||
if (isFirmwareUpdateInProgress(nextFirmwareStatus?.update_status)) setShowFirmwareProgress(true)
|
||
syncFirmwareStatusPolling(normalizedDeviceId, nextFirmwareStatus)
|
||
} catch (error: any) {
|
||
if (generation !== firmwareLoadGenerationRef.current) return
|
||
console.error('[manage] firmware load failed:', error)
|
||
setFirmwareStatus(null)
|
||
if (firmwareStatusPollDeviceIdRef.current === normalizedDeviceId) {
|
||
stopFirmwareStatusPolling()
|
||
}
|
||
Taro.showToast({
|
||
title: error?.message || '系统更新状态加载失败',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
if (generation === firmwareLoadGenerationRef.current) setIsLoadingFirmware(false)
|
||
}
|
||
}
|
||
|
||
const loadRoleData = async (deviceId?: string | null) => {
|
||
const normalizedDeviceId = String(deviceId || '').trim()
|
||
if (!normalizedDeviceId) {
|
||
setDeviceRole(null)
|
||
setRoles([])
|
||
setIsLoadingRoles(false)
|
||
return
|
||
}
|
||
|
||
setIsLoadingRoles(true)
|
||
try {
|
||
const [nextRoles, nextDeviceRole] = await Promise.all([
|
||
getDeviceRoles(),
|
||
getDeviceRole(normalizedDeviceId),
|
||
])
|
||
setRoles(nextRoles)
|
||
setDeviceRole(nextDeviceRole)
|
||
} catch (error: any) {
|
||
console.error('[manage] role load failed:', error)
|
||
setRoles([])
|
||
setDeviceRole(null)
|
||
Taro.showToast({
|
||
title: error?.message || '角色信息加载失败',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
setIsLoadingRoles(false)
|
||
}
|
||
}
|
||
|
||
const loadFamilyData = async (deviceId?: string | null) => {
|
||
const normalizedDeviceId = String(deviceId || '').trim()
|
||
if (!normalizedDeviceId) {
|
||
setFamilyInfo(null)
|
||
setFamilyInvitePath('')
|
||
setFamilyInviteExpiresAt('')
|
||
setIsLoadingFamily(false)
|
||
return
|
||
}
|
||
|
||
setFamilyInvitePath('')
|
||
setFamilyInviteExpiresAt('')
|
||
setIsLoadingFamily(true)
|
||
try {
|
||
const nextFamilyInfo = await getFamilyMembers(normalizedDeviceId)
|
||
setFamilyInfo(nextFamilyInfo)
|
||
} catch (error: any) {
|
||
console.error('[manage] family load failed:', error)
|
||
setFamilyInfo(null)
|
||
setFamilyInvitePath('')
|
||
setFamilyInviteExpiresAt('')
|
||
if (showFamilyModal) {
|
||
Taro.showToast({
|
||
title: error?.message || '家庭成员加载失败',
|
||
icon: 'none',
|
||
})
|
||
}
|
||
} finally {
|
||
setIsLoadingFamily(false)
|
||
}
|
||
}
|
||
|
||
const loadCurrentDeviceCards = async (deviceId?: string | null) => {
|
||
const normalizedDeviceId = String(deviceId || '').trim()
|
||
if (!normalizedDeviceId) {
|
||
setCurrentCardGroup(null)
|
||
setIsLoadingCards(false)
|
||
return
|
||
}
|
||
|
||
setIsLoadingCards(true)
|
||
try {
|
||
const nextCardGroups = await getBindingCardGroups()
|
||
const nextCurrentGroup = nextCardGroups.items.find((item) => item.device_id === normalizedDeviceId) || null
|
||
setCurrentCardGroup(nextCurrentGroup)
|
||
} catch (error: any) {
|
||
console.error('[manage] card groups load failed:', error)
|
||
setCurrentCardGroup(null)
|
||
Taro.showToast({
|
||
title: error?.message || '卡片信息加载失败',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
setIsLoadingCards(false)
|
||
}
|
||
}
|
||
|
||
const handleOpenFamilyModal = () => {
|
||
if (!binding?.device_id) {
|
||
Taro.showToast({ title: '当前没有可用设备', icon: 'none' })
|
||
return
|
||
}
|
||
setShowFamilyModal(true)
|
||
void loadFamilyData(binding.device_id)
|
||
}
|
||
|
||
const handleCreateFamilyInvite = async () => {
|
||
if (!binding?.device_id || isCreatingInvite) return
|
||
|
||
setIsCreatingInvite(true)
|
||
try {
|
||
const invitation = await createFamilyInvitation(binding.device_id)
|
||
const invitePath = `/pages/family-invite/index?token=${invitation.invite_token}`
|
||
setFamilyInvitePath(invitePath)
|
||
setFamilyInviteExpiresAt(invitation.expires_at)
|
||
Taro.showToast({ title: '邀请已生成，请发送', icon: 'none' })
|
||
} catch (error: any) {
|
||
Taro.showToast({
|
||
title: error?.message || '创建邀请失败',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
setIsCreatingInvite(false)
|
||
}
|
||
}
|
||
|
||
const handleRemoveFamilyMember = (member: FamilyMember) => {
|
||
if (!binding?.device_id || member.is_owner || isUpdatingFamily) return
|
||
|
||
Taro.showModal({
|
||
title: '移除成员',
|
||
content: `确定要移除 ${member.nickname || '该成员'} 吗？`,
|
||
confirmText: '移除',
|
||
confirmColor: '#E5484D',
|
||
success: async (result) => {
|
||
if (!result.confirm || !binding?.device_id) return
|
||
|
||
setIsUpdatingFamily(true)
|
||
try {
|
||
await removeFamilyMember(binding.device_id, member.user_id)
|
||
Taro.showToast({ title: '已移除', icon: 'success' })
|
||
await loadFamilyData(binding.device_id)
|
||
} catch (error: any) {
|
||
Taro.showToast({
|
||
title: error?.message || '移除失败',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
setIsUpdatingFamily(false)
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
const handleOpenFamilyNameModal = (member: FamilyMember) => {
|
||
if (!binding?.device_id || !isFamilyOwner) return
|
||
setEditingFamilyMember(member)
|
||
setFamilyMemberDisplayName(member.display_name || '')
|
||
setShowFamilyNameModal(true)
|
||
}
|
||
|
||
const handleCloseFamilyNameModal = () => {
|
||
if (isUpdatingFamilyName) return
|
||
setShowFamilyNameModal(false)
|
||
setEditingFamilyMember(null)
|
||
setFamilyMemberDisplayName('')
|
||
}
|
||
|
||
const handleSubmitFamilyName = async () => {
|
||
if (!binding?.device_id || !editingFamilyMember || isUpdatingFamilyName) return
|
||
|
||
const normalizedName = familyMemberDisplayName.trim()
|
||
if (normalizedName.length > 64) {
|
||
Taro.showToast({ title: '显示名最多 64 个字', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
setIsUpdatingFamilyName(true)
|
||
try {
|
||
await updateFamilyMemberDisplayName(binding.device_id, editingFamilyMember.user_id, {
|
||
display_name: normalizedName || null,
|
||
})
|
||
Taro.showToast({ title: '已保存', icon: 'success' })
|
||
setShowFamilyNameModal(false)
|
||
setEditingFamilyMember(null)
|
||
setFamilyMemberDisplayName('')
|
||
await loadFamilyData(binding.device_id)
|
||
} catch (error: any) {
|
||
Taro.showToast({
|
||
title: error?.message || '显示名保存失败',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
setIsUpdatingFamilyName(false)
|
||
}
|
||
}
|
||
|
||
const handleLeaveFamily = () => {
|
||
if (!binding?.device_id || isUpdatingFamily) return
|
||
|
||
Taro.showModal({
|
||
title: '退出家庭',
|
||
content: '退出后将不能继续查看和操作这台设备。',
|
||
confirmText: '退出',
|
||
confirmColor: '#E5484D',
|
||
success: async (result) => {
|
||
if (!result.confirm || !binding?.device_id) return
|
||
|
||
setIsUpdatingFamily(true)
|
||
try {
|
||
await leaveFamily(binding.device_id)
|
||
clearSelectedBindingDeviceId()
|
||
Taro.showToast({ title: '已退出', icon: 'success' })
|
||
setShowFamilyModal(false)
|
||
await loadData()
|
||
} catch (error: any) {
|
||
Taro.showToast({
|
||
title: error?.message || '退出失败',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
setIsUpdatingFamily(false)
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
const handleOpenChildNameModal = (child: Child) => {
|
||
setChildName(child.child_name || '')
|
||
setEditingChildId(child.child_id)
|
||
setShowChildModal(false)
|
||
setShowModal(true)
|
||
}
|
||
|
||
const handleCloseModal = () => {
|
||
setShowModal(false)
|
||
setChildName('')
|
||
setEditingChildId(null)
|
||
}
|
||
|
||
const handleSelectChild = (child: Child) => {
|
||
setSelectedChildId(child.child_id)
|
||
const nextBinding = bindings.find((item) => item.child_id === child.child_id) || null
|
||
if (nextBinding?.device_id) {
|
||
setSelectedBindingDeviceId(nextBinding.device_id)
|
||
} else {
|
||
clearSelectedBindingDeviceId()
|
||
}
|
||
setCurrentChild(child)
|
||
setBinding(nextBinding)
|
||
void loadFirmwareStatus(nextBinding?.device_id)
|
||
void loadRoleData(nextBinding?.device_id)
|
||
void loadFamilyData(nextBinding?.device_id)
|
||
void loadCurrentDeviceCards(nextBinding?.device_id)
|
||
setShowChildModal(false)
|
||
Taro.showToast({
|
||
title: '已切换当前宝贝',
|
||
icon: 'success',
|
||
})
|
||
}
|
||
|
||
const handleOpenCardNameModal = (card: BindingCardItem) => {
|
||
setEditingCard(card)
|
||
setCardName(card.card_name || '')
|
||
setShowCardNameModal(true)
|
||
}
|
||
|
||
const handleCloseCardNameModal = () => {
|
||
if (isUpdatingCardName) return
|
||
setShowCardNameModal(false)
|
||
setEditingCard(null)
|
||
setCardName('')
|
||
}
|
||
|
||
const handleSubmitCardName = async () => {
|
||
if (!editingCard || isUpdatingCardName) return
|
||
|
||
const normalizedName = cardName.trim()
|
||
if (normalizedName.length > 64) {
|
||
Taro.showToast({ title: '卡片名称最多 64 个字', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
setIsUpdatingCardName(true)
|
||
try {
|
||
await updateBindingCardName(editingCard.card_id, {
|
||
card_name: normalizedName || null,
|
||
})
|
||
Taro.showToast({ title: '已保存', icon: 'success' })
|
||
setShowCardNameModal(false)
|
||
setEditingCard(null)
|
||
setCardName('')
|
||
await loadCurrentDeviceCards(binding?.device_id)
|
||
} catch (error: any) {
|
||
Taro.showToast({
|
||
title: error?.message || '卡片名称保存失败',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
setIsUpdatingCardName(false)
|
||
}
|
||
}
|
||
|
||
const handleAssignExistingDevice = (targetBinding: BindingListItem) => {
|
||
if (!targetBinding?.device_id) return
|
||
setSelectedBindingDeviceId(targetBinding.device_id)
|
||
setShowAssignDeviceModal(false)
|
||
Taro.navigateTo({ url: '/pages/bind/index?mode=assign' })
|
||
}
|
||
|
||
const handleDeleteUnassignedDevice = (targetBinding: BindingListItem) => {
|
||
if (!targetBinding?.device_id) return
|
||
|
||
Taro.showModal({
|
||
title: '删除设备',
|
||
content: `确定要从当前账号删除设备 ${targetBinding.device_id} 吗？删除后需要重新扫码绑定。`,
|
||
confirmText: '删除',
|
||
confirmColor: '#E5484D',
|
||
success: async (result) => {
|
||
if (!result.confirm) return
|
||
|
||
try {
|
||
await unbindDevice(targetBinding.device_id)
|
||
if (binding?.device_id === targetBinding.device_id) {
|
||
clearSelectedBindingDeviceId()
|
||
}
|
||
Taro.showToast({ title: '已删除设备', icon: 'success' })
|
||
await loadData()
|
||
} catch (error: any) {
|
||
Taro.showToast({
|
||
title: error?.message || '删除设备失败，请重试',
|
||
icon: 'none',
|
||
})
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
const handleOpenAddCard = () => {
|
||
if (!binding?.device_id) return
|
||
setShowCardsModal(false)
|
||
Taro.navigateTo({ url: `/pages/bind/index?mode=card&device_id=${encodeURIComponent(binding.device_id)}` })
|
||
}
|
||
|
||
const handleSubmitModal = async () => {
|
||
const normalizedName = childName.trim()
|
||
const childNameError = validateChildNameInput(normalizedName)
|
||
if (childNameError) {
|
||
Taro.showToast({ title: childNameError, icon: 'none' })
|
||
return
|
||
}
|
||
|
||
try {
|
||
if (!editingChildId) {
|
||
Taro.showToast({ title: '当前没有可修改的宝贝', icon: 'none' })
|
||
return
|
||
}
|
||
|
||
await updateChild(editingChildId, { child_name: normalizedName })
|
||
Taro.showToast({ title: '修改成功', icon: 'success' })
|
||
handleCloseModal()
|
||
await loadData()
|
||
} catch (error: any) {
|
||
console.error('[manage] save child failed:', error)
|
||
Taro.showToast({
|
||
title: error?.message || '保存失败，请重试',
|
||
icon: 'none',
|
||
})
|
||
}
|
||
}
|
||
|
||
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()
|
||
}
|
||
setShowChildModal(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 ||
|
||
isFirmwareUpdateInProgress(firmwareStatus.update_status)
|
||
) {
|
||
return
|
||
}
|
||
|
||
Taro.showModal({
|
||
title: '系统更新',
|
||
content: `确定要更新当前设备 ${binding.device_id} 吗？`,
|
||
confirmText: '更新',
|
||
confirmColor: '#16A34A',
|
||
success: async (result) => {
|
||
if (!result.confirm || !binding?.device_id) return
|
||
|
||
setIsUpdatingFirmware(true)
|
||
try {
|
||
const onlineStatus = await getDeviceOnlineStatus(binding.device_id)
|
||
if (onlineStatus && !onlineStatus.online) {
|
||
Taro.showToast({
|
||
title: '设备不在线或处于休眠中，暂时无法发送更新指令',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
|
||
const nextFirmwareStatus = await startDeviceFirmwareUpdate(binding.device_id)
|
||
if (firmwareDeviceIdRef.current !== binding.device_id) return
|
||
setShowFirmwareProgress(true)
|
||
setFirmwareRefreshError(false)
|
||
setFirmwareStatus(nextFirmwareStatus)
|
||
syncFirmwareStatusPolling(binding.device_id, nextFirmwareStatus)
|
||
Taro.showToast({
|
||
title: '更新指令已发送',
|
||
icon: 'success',
|
||
})
|
||
} catch (error: any) {
|
||
const message = error?.message === DEVICE_UNAVAILABLE_MESSAGE
|
||
? '设备不在线或处于休眠中，暂时无法发送更新指令'
|
||
: error?.message || '更新失败，请重试'
|
||
Taro.showToast({
|
||
title: message,
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
setIsUpdatingFirmware(false)
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
const handleOpenRoleModal = () => {
|
||
if (!binding?.device_id) {
|
||
Taro.showToast({ title: '当前没有可用设备', icon: 'none' })
|
||
return
|
||
}
|
||
setShowRoleModal(true)
|
||
if (roles.length === 0) {
|
||
void loadRoleData(binding.device_id)
|
||
}
|
||
}
|
||
|
||
const handleSelectRole = async (role: DeviceRoleSummary) => {
|
||
if (!binding?.device_id || isUpdatingRole) return
|
||
|
||
setIsUpdatingRole(true)
|
||
try {
|
||
const language = deviceRole?.preferred_language || role.default_language || role.languages?.[0] || null
|
||
const nextRole = await updateDeviceRole(role.role_key, language, binding.device_id)
|
||
setDeviceRole(nextRole)
|
||
setShowRoleModal(false)
|
||
Taro.showToast({ title: 'AI 角色已切换', icon: 'success' })
|
||
} catch (error: any) {
|
||
Taro.showToast({
|
||
title: error?.message || '角色切换失败',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
setIsUpdatingRole(false)
|
||
}
|
||
}
|
||
|
||
const handleUnbind = () => {
|
||
if (!binding) return
|
||
|
||
Taro.showModal({
|
||
title: '解除设备绑定',
|
||
content: `确定要解除 ${currentChildName} 当前绑定的设备吗？`,
|
||
confirmColor: '#FF8C42',
|
||
success: async (result) => {
|
||
if (!result.confirm) return
|
||
|
||
try {
|
||
await unbindDevice(binding.device_id)
|
||
clearSelectedBindingDeviceId()
|
||
Taro.showToast({ title: '已解绑', icon: 'success' })
|
||
await loadData()
|
||
} catch (error: any) {
|
||
Taro.showToast({
|
||
title: error?.message || '解绑失败，请重试',
|
||
icon: 'none',
|
||
})
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
const handleLogout = () => {
|
||
Taro.showModal({
|
||
title: '退出登录',
|
||
content: '确定要退出当前账号吗？',
|
||
confirmColor: '#FF8C42',
|
||
success: (result) => {
|
||
if (!result.confirm) return
|
||
clearToken()
|
||
clearSelectedBindingDeviceId()
|
||
clearSelectedChildId()
|
||
Taro.removeStorageSync('userInfo')
|
||
void loadData()
|
||
},
|
||
})
|
||
}
|
||
|
||
const handleAuthorizePhone = async (event: any) => {
|
||
if (isAuthorizingPhone) return
|
||
const phoneCode = String(event?.detail?.code || '').trim()
|
||
if (!phoneCode) {
|
||
const errMsg = String(event?.detail?.errMsg || '')
|
||
Taro.showToast({
|
||
title: errMsg.includes('deny') || errMsg.includes('fail') ? '未授权手机号' : '未获取到手机号授权',
|
||
icon: 'none',
|
||
})
|
||
return
|
||
}
|
||
|
||
setIsAuthorizingPhone(true)
|
||
Taro.showLoading({ title: '保存中...' })
|
||
try {
|
||
const parent = await authorizeParentPhone(phoneCode)
|
||
setParentInfo(parent)
|
||
const cachedUserInfo = (Taro.getStorageSync('userInfo') || {}) as {
|
||
nickname?: string
|
||
avatar_url?: string
|
||
}
|
||
Taro.setStorageSync('userInfo', {
|
||
...cachedUserInfo,
|
||
nickname: parent.nickname || cachedUserInfo.nickname,
|
||
avatar_url: parent.avatar_url || cachedUserInfo.avatar_url,
|
||
})
|
||
Taro.showToast({ title: '短信通知已开启', icon: 'success' })
|
||
} catch (error: any) {
|
||
console.error('[manage] phone authorization failed:', error)
|
||
Taro.showToast({
|
||
title: error?.message || '手机号保存失败',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
Taro.hideLoading()
|
||
setIsAuthorizingPhone(false)
|
||
}
|
||
}
|
||
|
||
const handleStartWechatMpBind = async () => {
|
||
if (isStartingWechatMpBind) return
|
||
|
||
setIsStartingWechatMpBind(true)
|
||
try {
|
||
const result = await startWechatMpBind()
|
||
const bindUrl = String(result.url || '').trim()
|
||
if (!bindUrl) {
|
||
throw new Error('未获取到服务号绑定链接')
|
||
}
|
||
Taro.navigateTo({
|
||
url: `/pages/webview/index?url=${encodeURIComponent(bindUrl)}`,
|
||
fail: () => {
|
||
Taro.setClipboardData({
|
||
data: bindUrl,
|
||
success: () => {
|
||
Taro.showModal({
|
||
title: '服务号通知',
|
||
content: '绑定链接已复制，请在微信里打开完成授权。',
|
||
showCancel: false,
|
||
})
|
||
},
|
||
})
|
||
},
|
||
})
|
||
} catch (error: any) {
|
||
Taro.showToast({
|
||
title: error?.message || '服务号绑定失败',
|
||
icon: 'none',
|
||
})
|
||
} finally {
|
||
setIsStartingWechatMpBind(false)
|
||
}
|
||
}
|
||
|
||
const handleMenuClick = (item: MenuItem) => {
|
||
if (item.disabled) return
|
||
|
||
if (item.name === '当前宝贝') {
|
||
setShowChildModal(true)
|
||
return
|
||
}
|
||
|
||
if (item.name === '关联现有设备') {
|
||
setShowAssignDeviceModal(true)
|
||
return
|
||
}
|
||
|
||
if (item.name === '绑定设备') {
|
||
Taro.navigateTo({ url: '/pages/bind/index' })
|
||
return
|
||
}
|
||
|
||
if (item.name === '我的卡片') {
|
||
setShowCardsModal(true)
|
||
return
|
||
}
|
||
|
||
if (item.name === 'AI 角色') {
|
||
handleOpenRoleModal()
|
||
return
|
||
}
|
||
|
||
if (item.name === '家庭成员') {
|
||
handleOpenFamilyModal()
|
||
return
|
||
}
|
||
|
||
if (item.name === '服务号通知') {
|
||
handleStartWechatMpBind()
|
||
return
|
||
}
|
||
|
||
if (item.name === '解除设备绑定') {
|
||
handleUnbind()
|
||
}
|
||
}
|
||
|
||
if (loading) {
|
||
return (
|
||
<View className='manage-page' style={getPageStyle(true)}>
|
||
<View className='loading'>
|
||
<Text>加载中...</Text>
|
||
</View>
|
||
{systemBanner}
|
||
</View>
|
||
)
|
||
}
|
||
|
||
if (isGuest) {
|
||
return (
|
||
<View className='manage-page' style={getPageStyle(true)}>
|
||
<View className='page-header'>
|
||
<Text className='page-title'>设置与管理</Text>
|
||
</View>
|
||
|
||
<View className='guest-manage-card'>
|
||
<Text className='guest-manage-icon'>⚙️</Text>
|
||
<Text className='guest-manage-title'>管理宝贝资料和设备</Text>
|
||
<Text className='guest-manage-desc'>这里可以管理宝贝资料、设备绑定、卡片、休眠时间、系统更新和家庭成员。当前页面为功能预览，真实数据会在绑定设备后展示。</Text>
|
||
</View>
|
||
|
||
<View className='guest-manage-list'>
|
||
<View className='guest-manage-item'>
|
||
<Text className='guest-manage-item-title'>宝贝资料</Text>
|
||
<Text className='guest-manage-item-desc'>为不同宝贝维护独立设备和会话。</Text>
|
||
</View>
|
||
<View className='guest-manage-item'>
|
||
<Text className='guest-manage-item-title'>设备绑定</Text>
|
||
<Text className='guest-manage-item-desc'>扫码或 NFC 绑定伴伴设备。</Text>
|
||
</View>
|
||
<View className='guest-manage-item'>
|
||
<Text className='guest-manage-item-title'>休眠设置</Text>
|
||
<Text className='guest-manage-item-desc'>设置设备休眠时间和远程控制。</Text>
|
||
</View>
|
||
<View className='guest-manage-item'>
|
||
<Text className='guest-manage-item-title'>系统更新</Text>
|
||
<Text className='guest-manage-item-desc'>查看设备版本，并在设备在线时发起更新。</Text>
|
||
</View>
|
||
<View className='guest-manage-item'>
|
||
<Text className='guest-manage-item-title'>家庭共享</Text>
|
||
<Text className='guest-manage-item-desc'>邀请家庭成员一起查看和管理同一台设备。</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View className='guest-manage-card action-card'>
|
||
<Text className='guest-manage-title small'>准备绑定设备</Text>
|
||
<Text className='guest-manage-desc'>浏览功能不需要登录；创建宝贝资料、绑定设备或查看真实设备数据时，再进入登录流程。</Text>
|
||
<View
|
||
className='guest-manage-btn secondary'
|
||
onClick={() => {
|
||
Taro.setStorageSync('postLoginRedirect', '/pages/sleep/index')
|
||
Taro.navigateTo({ url: '/pages/login/index' })
|
||
}}
|
||
>
|
||
<Text className='guest-manage-btn-text'>去登录 / 绑定设备</Text>
|
||
</View>
|
||
</View>
|
||
<Image className='manage-footer-art' src={require('../../assets/ui/paw-dog-footer.png')} mode='aspectFit' />
|
||
{systemBanner}
|
||
</View>
|
||
)
|
||
}
|
||
|
||
const parentDisplayName = parentInfo?.nickname?.trim() || '家长'
|
||
const parentPhone = String(parentInfo?.phone || '').trim()
|
||
const parentPhoneLabel = parentPhone ? `${parentPhone.slice(0, 3)}****${parentPhone.slice(-4)}` : '未开启'
|
||
const unassignedBindings = bindings.filter((item) => item.device_id && item.child_id === null)
|
||
const currentFirmwareLabel = firmwareStatus?.current_version || '--'
|
||
const latestFirmwareLabel = firmwareStatus?.latest_version || '--'
|
||
const currentUserId = getCurrentUserId()
|
||
const isFamilyOwner = familyInfo?.current_user_role === 'owner'
|
||
const canEditCardName = Boolean(
|
||
binding?.device_id &&
|
||
currentCardGroup?.device_id === binding.device_id &&
|
||
familyInfo?.device_id === binding.device_id &&
|
||
isFamilyOwner
|
||
)
|
||
const isFirmwareUpdatingByStatus = isFirmwareUpdateInProgress(firmwareStatus?.update_status)
|
||
const canUpdateFirmware = Boolean(
|
||
binding?.device_id &&
|
||
firmwareStatus?.can_update &&
|
||
!isLoadingFirmware &&
|
||
!isUpdatingFirmware &&
|
||
!isFirmwareUpdatingByStatus
|
||
)
|
||
const firmwareActionText = !binding?.device_id
|
||
? '更新'
|
||
: isLoadingFirmware
|
||
? '查询中'
|
||
: isUpdatingFirmware
|
||
? '发送中'
|
||
: isFirmwareUpdatingByStatus
|
||
? '查看进度'
|
||
: firmwareStatus?.update_available
|
||
? '更新'
|
||
: '已最新'
|
||
const roleValue = !binding?.device_id
|
||
? '未绑定'
|
||
: isLoadingRoles
|
||
? '查询中'
|
||
: deviceRole?.name || '未设置'
|
||
const familyValue = !binding?.device_id
|
||
? '未绑定'
|
||
: isLoadingFamily
|
||
? '查询中'
|
||
: `${familyInfo?.total || 1}/4 人`
|
||
const wechatMpValue = isStartingWechatMpBind
|
||
? '打开中'
|
||
: isLoadingWechatMp
|
||
? '查询中'
|
||
: wechatMpStatus?.bound
|
||
? '已开启'
|
||
: '未绑定'
|
||
const firmwareSubtitle = !binding?.device_id
|
||
? '绑定设备后可查看系统版本'
|
||
: isLoadingFirmware
|
||
? '正在查询当前设备版本'
|
||
: isFirmwareUpdatingByStatus
|
||
? '设备正在更新，请稍候'
|
||
: normalizeFirmwareUpdateStatus(firmwareStatus?.update_status) === 'failed'
|
||
? '更新失败，可重试'
|
||
: firmwareStatus?.update_available
|
||
? '发现可更新版本'
|
||
: '当前设备版本状态'
|
||
const cardValue = !binding?.device_id
|
||
? '未绑定'
|
||
: isLoadingCards
|
||
? '查询中'
|
||
: `${currentCardGroup?.card_count || 0} 张`
|
||
const menuItems: MenuItem[] = [
|
||
{
|
||
icon: require('../../assets/ui/menu-role.png'),
|
||
iconBgClass: 'orange',
|
||
name: '当前宝贝',
|
||
value: currentChildName,
|
||
arrow: true,
|
||
},
|
||
...(unassignedBindings.length > 0
|
||
? [{
|
||
icon: require('../../assets/ui/menu-binding.png'),
|
||
iconBgClass: 'green',
|
||
name: '关联现有设备',
|
||
value: `${unassignedBindings.length} 台待关联`,
|
||
arrow: true,
|
||
}]
|
||
: []),
|
||
{
|
||
icon: require('../../assets/ui/menu-binding.png'),
|
||
iconBgClass: 'green',
|
||
name: '绑定设备',
|
||
value: binding?.device_id ? `当前: ${binding.device_id}` : '未绑定',
|
||
arrow: true,
|
||
},
|
||
{
|
||
icon: require('../../assets/ui/menu-cards.png'),
|
||
iconBgClass: 'green',
|
||
name: '我的卡片',
|
||
value: cardValue,
|
||
arrow: true,
|
||
disabled: !binding,
|
||
},
|
||
{
|
||
icon: require('../../assets/ui/menu-role.png'),
|
||
iconBgClass: 'green',
|
||
name: 'AI 角色',
|
||
value: roleValue,
|
||
arrow: true,
|
||
disabled: !binding,
|
||
},
|
||
{
|
||
icon: require('../../assets/ui/menu-family.png'),
|
||
iconBgClass: 'green',
|
||
name: '家庭成员',
|
||
value: familyValue,
|
||
arrow: true,
|
||
disabled: !binding,
|
||
},
|
||
{
|
||
icon: require('../../assets/ui/menu-notice.png'),
|
||
iconBgClass: 'green',
|
||
name: '服务号通知',
|
||
value: wechatMpValue,
|
||
arrow: true,
|
||
disabled: isStartingWechatMpBind,
|
||
},
|
||
{
|
||
icon: require('../../assets/ui/menu-unbind.png'),
|
||
iconBgClass: 'red',
|
||
name: '解除设备绑定',
|
||
value: binding?.device_id ? `当前: ${binding.device_id}` : '',
|
||
arrow: true,
|
||
disabled: !binding,
|
||
},
|
||
]
|
||
|
||
return (
|
||
<View className='manage-page' style={getPageStyle(true)}>
|
||
<View className='page-header'>
|
||
<Text className='page-title'>设置与管理</Text>
|
||
</View>
|
||
|
||
<View className='user-card'>
|
||
<View className='user-avatar'>
|
||
{parentInfo?.avatar_url ? (
|
||
<Image className='avatar-img image-avatar' src={parentInfo.avatar_url} mode='aspectFill' />
|
||
) : (
|
||
<Text className='avatar-img'>👤</Text>
|
||
)}
|
||
</View>
|
||
<View className='user-info'>
|
||
<Text className='user-name'>{parentDisplayName}</Text>
|
||
<Text className='user-phone'>短信通知：{parentPhoneLabel}</Text>
|
||
</View>
|
||
{parentPhone ? (
|
||
<View className='verified-badge'>
|
||
<Text>已开启</Text>
|
||
</View>
|
||
) : (
|
||
<Button
|
||
className='phone-auth-btn'
|
||
openType='getPhoneNumber'
|
||
loading={isAuthorizingPhone}
|
||
disabled={isAuthorizingPhone}
|
||
onGetPhoneNumber={handleAuthorizePhone}
|
||
>
|
||
开启短信
|
||
</Button>
|
||
)}
|
||
</View>
|
||
|
||
<View className='summary-card'>
|
||
<View className='summary-row'>
|
||
<Text className='summary-label'>宝贝资料数</Text>
|
||
<Text className='summary-value'>{children.length} 个</Text>
|
||
</View>
|
||
<View className='summary-row'>
|
||
<Text className='summary-label'>当前宝贝</Text>
|
||
<Text className='summary-value'>{currentChildName}</Text>
|
||
</View>
|
||
<View className='summary-row'>
|
||
<Text className='summary-label'>当前设备</Text>
|
||
<Text className='summary-value'>{binding?.device_id || '未绑定'}</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View className={`system-update-card ${binding?.device_id ? '' : 'disabled'}`}>
|
||
<View className='system-update-header'>
|
||
<View className='system-update-heading'>
|
||
<View className='system-update-title-row'>
|
||
<Image className='system-update-icon' src={require('../../assets/ui/menu-update.png')} mode='aspectFit' />
|
||
<Text className='system-update-title'>系统更新</Text>
|
||
</View>
|
||
<Text className='system-update-subtitle'>{firmwareSubtitle}</Text>
|
||
</View>
|
||
<View
|
||
className={`system-update-action ${canUpdateFirmware || isFirmwareUpdatingByStatus ? '' : 'disabled'}`}
|
||
onClick={isFirmwareUpdatingByStatus ? () => setShowFirmwareProgress(true) : canUpdateFirmware ? handleStartFirmwareUpdate : undefined}
|
||
>
|
||
<Text className='system-update-action-text'>{firmwareActionText}</Text>
|
||
</View>
|
||
</View>
|
||
<View className='system-update-body'>
|
||
<View className='system-update-row'>
|
||
<Text className='system-update-label'>当前设备</Text>
|
||
<Text className='system-update-value'>{binding?.device_id || '未绑定'}</Text>
|
||
</View>
|
||
<View className='system-update-row'>
|
||
<Text className='system-update-label'>当前版本</Text>
|
||
<Text className='system-update-value'>{currentFirmwareLabel}</Text>
|
||
</View>
|
||
<View className='system-update-row'>
|
||
<Text className='system-update-label'>最新版本</Text>
|
||
<Text className='system-update-value highlight'>{latestFirmwareLabel}</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
|
||
<View className='menu-card'>
|
||
{menuItems.map((item, index) => (
|
||
<View key={index}>
|
||
<View className={`menu-item ${item.disabled ? 'disabled' : ''}`} onClick={() => handleMenuClick(item)}>
|
||
<View className='menu-left'>
|
||
<View className={`icon-bg ${item.iconBgClass}`}>
|
||
<Image className='control-icon-img' src={item.icon} mode='aspectFit' />
|
||
</View>
|
||
<Text className='menu-name'>{item.name}</Text>
|
||
</View>
|
||
<View className='menu-right'>
|
||
{item.value && <Text className='menu-value'>{item.value}</Text>}
|
||
{item.arrow && <Text className='arrow'>›</Text>}
|
||
</View>
|
||
</View>
|
||
{index < menuItems.length - 1 && <View className='divider'></View>}
|
||
</View>
|
||
))}
|
||
</View>
|
||
|
||
<View className='logout-section'>
|
||
<View className='logout-btn' onClick={handleLogout}>
|
||
<Text className='logout-text'>退出登录</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View className='version-info'>
|
||
<Text className='version-text'>伴伴 Companion V1.1.0</Text>
|
||
</View>
|
||
|
||
{showFirmwareProgress && firmwareStatus?.device_id === binding?.device_id && (
|
||
<FirmwareProgress status={firmwareStatus} refreshError={firmwareRefreshError}
|
||
onClose={() => setShowFirmwareProgress(false)}
|
||
onRetry={canUpdateFirmware ? () => { setShowFirmwareProgress(false); handleStartFirmwareUpdate() } : undefined} />
|
||
)}
|
||
|
||
{showChildModal && (
|
||
<View className='modal-mask' onClick={() => setShowChildModal(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 ${isActive ? 'active' : ''}`}
|
||
onClick={() => handleSelectChild(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>}
|
||
{isActive && (
|
||
<Text
|
||
className='device-switch-edit'
|
||
onClick={(event) => {
|
||
event.stopPropagation()
|
||
handleOpenChildNameModal(item)
|
||
}}
|
||
>
|
||
修改
|
||
</Text>
|
||
)}
|
||
<Text
|
||
className='device-switch-delete'
|
||
onClick={(event) => {
|
||
event.stopPropagation()
|
||
handleDeleteChild(item)
|
||
}}
|
||
>
|
||
删除
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
<Text className='device-switch-name'>{itemBinding?.device_id || '未绑定设备'}</Text>
|
||
</View>
|
||
)
|
||
})}
|
||
</View>
|
||
)}
|
||
<View className='modal-actions'>
|
||
<Text className='modal-action cancel' onClick={() => setShowChildModal(false)}>
|
||
关闭
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)}
|
||
|
||
{showAssignDeviceModal && (
|
||
<View className='modal-mask' onClick={() => setShowAssignDeviceModal(false)}>
|
||
<View
|
||
className='modal-card device-switch-card'
|
||
onClick={(event) => {
|
||
event.stopPropagation()
|
||
}}
|
||
>
|
||
<Text className='modal-title'>关联现有设备</Text>
|
||
{unassignedBindings.length === 0 ? (
|
||
<Text className='device-switch-empty'>当前没有待关联设备</Text>
|
||
) : (
|
||
<View className='device-switch-list'>
|
||
{unassignedBindings.map((item) => (
|
||
<View
|
||
key={item.device_id}
|
||
className='device-switch-item'
|
||
onClick={() => handleAssignExistingDevice(item)}
|
||
>
|
||
<View className='device-switch-head'>
|
||
<Text className='device-switch-id'>{item.device_id}</Text>
|
||
<View className='device-switch-tags'>
|
||
<Text className='device-switch-tag'>待关联</Text>
|
||
<Text
|
||
className='device-switch-delete'
|
||
onClick={(event) => {
|
||
event.stopPropagation()
|
||
handleDeleteUnassignedDevice(item)
|
||
}}
|
||
>
|
||
删除
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
<Text className='device-switch-name'>未关联宝贝</Text>
|
||
</View>
|
||
))}
|
||
</View>
|
||
)}
|
||
<View className='modal-actions'>
|
||
<Text className='modal-action cancel' onClick={() => setShowAssignDeviceModal(false)}>
|
||
关闭
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)}
|
||
|
||
{showCardsModal && (
|
||
<View className='modal-mask' onClick={() => setShowCardsModal(false)}>
|
||
<View
|
||
className='modal-card cards-modal-card'
|
||
onClick={(event) => {
|
||
event.stopPropagation()
|
||
}}
|
||
>
|
||
<Text className='modal-title'>我的卡片</Text>
|
||
<View className='cards-modal-summary'>
|
||
<Text className='cards-modal-device'>{binding?.device_id || '当前未绑定设备'}</Text>
|
||
<Text className='bound-cards-count'>
|
||
{isLoadingCards ? '查询中' : `${currentCardGroup?.card_count || 0} 张`}
|
||
</Text>
|
||
</View>
|
||
|
||
{!binding?.device_id ? (
|
||
<View className='bound-cards-empty'>
|
||
<Text className='bound-cards-empty-text'>绑定设备后可查看卡片 UUID</Text>
|
||
</View>
|
||
) : isLoadingCards ? (
|
||
<View className='bound-cards-empty'>
|
||
<Text className='bound-cards-empty-text'>卡片加载中...</Text>
|
||
</View>
|
||
) : currentCardGroup?.cards.length ? (
|
||
<View className='bound-card-list cards-modal-list'>
|
||
{currentCardGroup.cards.map((card) => (
|
||
<View className='bound-card-item' key={`${currentCardGroup.device_id}-${card.card_id}`}>
|
||
<View className='bound-card-main'>
|
||
<Text className={`bound-card-name ${card.card_name ? '' : 'empty'}`}>
|
||
{card.card_name || '未命名卡片'}
|
||
</Text>
|
||
<Text className='bound-card-uuid'>{card.card_uuid}</Text>
|
||
</View>
|
||
{canEditCardName && (
|
||
<Text className='bound-card-edit' onClick={() => handleOpenCardNameModal(card)}>
|
||
编辑
|
||
</Text>
|
||
)}
|
||
</View>
|
||
))}
|
||
</View>
|
||
) : (
|
||
<View className='bound-cards-empty'>
|
||
<Text className='bound-cards-empty-text'>当前设备暂无卡片</Text>
|
||
</View>
|
||
)}
|
||
|
||
{binding?.device_id && (
|
||
<View className='cards-modal-add' onClick={handleOpenAddCard}>
|
||
<Text className='cards-modal-add-text'>添加设备卡片</Text>
|
||
</View>
|
||
)}
|
||
|
||
<View className='modal-actions'>
|
||
<Text className='modal-action cancel' onClick={() => setShowCardsModal(false)}>
|
||
关闭
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)}
|
||
|
||
{showModal && (
|
||
<View className='modal-mask'>
|
||
<View className='modal-card'>
|
||
<Text className='modal-title'>编辑宝贝资料</Text>
|
||
<Text className='modal-field-label'>宝贝名称</Text>
|
||
<View className='modal-input-wrap'>
|
||
<Input
|
||
className='modal-input'
|
||
value={childName}
|
||
placeholder={CHILD_NAME_RULE_MESSAGE}
|
||
focus
|
||
maxlength={5}
|
||
onInput={(event) => setChildName(sanitizeChildNameInput(event.detail.value))}
|
||
/>
|
||
</View>
|
||
<View className='modal-actions'>
|
||
<Text className='modal-action cancel' onClick={handleCloseModal}>
|
||
取消
|
||
</Text>
|
||
<Text className='modal-action confirm' onClick={handleSubmitModal}>
|
||
保存
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)}
|
||
{showCardNameModal && (
|
||
<View className='modal-mask'>
|
||
<View className='modal-card'>
|
||
<Text className='modal-title'>编辑卡片名称</Text>
|
||
<View className='modal-input-wrap'>
|
||
<Input
|
||
className='modal-input'
|
||
value={cardName}
|
||
placeholder='例如 奶奶的卡'
|
||
focus
|
||
disabled={isUpdatingCardName}
|
||
onInput={(event) => setCardName(event.detail.value)}
|
||
/>
|
||
</View>
|
||
<Text className='card-name-modal-tip'>留空保存后会显示为未命名卡片</Text>
|
||
<View className='modal-actions'>
|
||
<Text className='modal-action cancel' onClick={handleCloseCardNameModal}>
|
||
取消
|
||
</Text>
|
||
<Text className={`modal-action confirm ${isUpdatingCardName ? 'disabled' : ''}`} onClick={handleSubmitCardName}>
|
||
{isUpdatingCardName ? '保存中...' : '确认'}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)}
|
||
{showRoleModal && (
|
||
<View className='modal-mask' onClick={() => setShowRoleModal(false)}>
|
||
<View
|
||
className='modal-card role-switch-card'
|
||
onClick={(event) => {
|
||
event.stopPropagation()
|
||
}}
|
||
>
|
||
<Text className='modal-title'>切换 AI 角色</Text>
|
||
<View className='current-role-intro'>
|
||
<Text className='current-role-label'>当前角色：{deviceRole?.name || deviceRole?.role_key || '未设置'}</Text>
|
||
<Text className='current-role-desc'>
|
||
{deviceRole?.description || '暂无角色简介'}
|
||
</Text>
|
||
</View>
|
||
{isLoadingRoles ? (
|
||
<Text className='device-switch-empty'>角色加载中...</Text>
|
||
) : roles.length === 0 ? (
|
||
<Text className='device-switch-empty'>当前没有可用角色</Text>
|
||
) : (
|
||
<View className='role-switch-list'>
|
||
{roles.map((item) => {
|
||
const isActive = deviceRole?.role_key === item.role_key
|
||
return (
|
||
<View
|
||
key={item.role_key}
|
||
className={`role-switch-item ${isActive ? 'active' : ''} ${isUpdatingRole ? 'disabled' : ''}`}
|
||
onClick={isUpdatingRole ? undefined : () => handleSelectRole(item)}
|
||
>
|
||
<Image className='role-switch-art' src={getRoleArtwork(item.role_key)} mode='aspectFit' />
|
||
<View className='role-switch-head'>
|
||
<Text className='role-switch-name'>{item.name || item.role_key}</Text>
|
||
{isActive && <Text className='device-switch-tag'>当前</Text>}
|
||
</View>
|
||
<Text className='role-switch-desc'>
|
||
{item.description || `角色标识：${item.role_key}`}
|
||
</Text>
|
||
</View>
|
||
)
|
||
})}
|
||
</View>
|
||
)}
|
||
<View className='modal-actions'>
|
||
<Text className='modal-action cancel' onClick={() => setShowRoleModal(false)}>
|
||
关闭
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)}
|
||
{showFamilyModal && (
|
||
<View className='modal-mask' onClick={() => setShowFamilyModal(false)}>
|
||
<View
|
||
className='modal-card family-card'
|
||
onClick={(event) => {
|
||
event.stopPropagation()
|
||
}}
|
||
>
|
||
<Text className='modal-title'>家庭成员</Text>
|
||
{isLoadingFamily ? (
|
||
<Text className='device-switch-empty'>成员加载中...</Text>
|
||
) : !familyInfo ? (
|
||
<Text className='device-switch-empty'>当前没有成员信息</Text>
|
||
) : (
|
||
<>
|
||
<View className='family-summary'>
|
||
<Text className='family-summary-text'>{familyInfo.total}/{familyInfo.max_members} 人</Text>
|
||
<Text className='family-summary-subtitle'>
|
||
{isFamilyOwner ? '主成员可添加和移除成员' : '成员可查看和操作设备'}
|
||
</Text>
|
||
</View>
|
||
<View className='family-list'>
|
||
{familyInfo.items.map((member) => {
|
||
const canRemove = isFamilyOwner && !member.is_owner && !isUpdatingFamily
|
||
const canEditName = isFamilyOwner && !isUpdatingFamilyName
|
||
const isMe = currentUserId === member.user_id
|
||
return (
|
||
<View key={member.user_id} className='family-member-item'>
|
||
<View className='family-member-avatar'>
|
||
{member.avatar_url ? (
|
||
<Image className='family-member-avatar-img' src={member.avatar_url} mode='aspectFill' />
|
||
) : (
|
||
<Text className='family-member-avatar-text'>👤</Text>
|
||
)}
|
||
</View>
|
||
<View className='family-member-main'>
|
||
<View className='family-member-head'>
|
||
<Text className='family-member-name'>{member.nickname || `成员 ${member.user_id}`}</Text>
|
||
<View className='device-switch-tags'>
|
||
{member.is_owner && <Text className='device-switch-tag'>主成员</Text>}
|
||
{isMe && <Text className='device-switch-tag muted'>我</Text>}
|
||
</View>
|
||
</View>
|
||
<Text className='family-member-role'>{member.is_owner ? '设备归属账号' : '家庭共享成员'}</Text>
|
||
</View>
|
||
{(canEditName || canRemove) && (
|
||
<View className='family-member-actions'>
|
||
{canEditName && (
|
||
<Text className='family-member-edit' onClick={() => handleOpenFamilyNameModal(member)}>
|
||
编辑
|
||
</Text>
|
||
)}
|
||
{canRemove && (
|
||
<Text className='family-member-remove' onClick={() => handleRemoveFamilyMember(member)}>
|
||
移除
|
||
</Text>
|
||
)}
|
||
</View>
|
||
)}
|
||
</View>
|
||
)
|
||
})}
|
||
</View>
|
||
{isFamilyOwner ? (
|
||
<View className='family-invite-actions'>
|
||
{familyInvitePath ? (
|
||
<>
|
||
<Button
|
||
className='family-primary-action family-share-button'
|
||
openType='share'
|
||
hoverClass='none'
|
||
>
|
||
<Text className='family-primary-action-text'>发送给微信好友</Text>
|
||
</Button>
|
||
<Text className='family-invite-tip'>
|
||
邀请有效期至 {familyInviteExpiresAt ? familyInviteExpiresAt.replace('T', ' ').slice(0, 16) : '24 小时内'}
|
||
</Text>
|
||
</>
|
||
) : (
|
||
<View
|
||
className={`family-primary-action ${familyInfo.total >= familyInfo.max_members || isCreatingInvite ? 'disabled' : ''}`}
|
||
onClick={familyInfo.total < familyInfo.max_members && !isCreatingInvite ? handleCreateFamilyInvite : undefined}
|
||
>
|
||
<Text className='family-primary-action-text'>{isCreatingInvite ? '生成中...' : '邀请微信好友'}</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
) : (
|
||
<View
|
||
className={`family-danger-action ${isUpdatingFamily ? 'disabled' : ''}`}
|
||
onClick={isUpdatingFamily ? undefined : handleLeaveFamily}
|
||
>
|
||
<Text className='family-danger-action-text'>退出家庭</Text>
|
||
</View>
|
||
)}
|
||
</>
|
||
)}
|
||
<View className='modal-actions'>
|
||
<Text className='modal-action cancel' onClick={() => setShowFamilyModal(false)}>
|
||
关闭
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)}
|
||
{showFamilyNameModal && (
|
||
<View className='modal-mask'>
|
||
<View className='modal-card'>
|
||
<Text className='modal-title'>编辑家庭内显示名</Text>
|
||
<View className='modal-input-wrap'>
|
||
<Input
|
||
className='modal-input'
|
||
value={familyMemberDisplayName}
|
||
placeholder='例如 奶奶'
|
||
focus
|
||
disabled={isUpdatingFamilyName}
|
||
onInput={(event) => setFamilyMemberDisplayName(event.detail.value)}
|
||
/>
|
||
</View>
|
||
<Text className='family-name-modal-tip'>留空保存后会显示账号昵称</Text>
|
||
<View className='modal-actions'>
|
||
<Text className='modal-action cancel' onClick={handleCloseFamilyNameModal}>
|
||
取消
|
||
</Text>
|
||
<Text className={`modal-action confirm ${isUpdatingFamilyName ? 'disabled' : ''}`} onClick={handleSubmitFamilyName}>
|
||
{isUpdatingFamilyName ? '保存中...' : '确认'}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)}
|
||
{systemBanner}
|
||
</View>
|
||
)
|
||
}
|