feat(family): 家庭详情页——成员列表、添加关爱对象入口、管理项 stub

src/app.config.ts

@@ -9,6 +9,7 @@ export default {
     'pages/device/add',
     'pages/device/config',
     'pages/family/index',
+    'pages/family/detail',
     'pages/event/index'
   ],
   window: {

src/pages/family/detail.module.scss

@@ -0,0 +1,54 @@
+.page {
+  min-height: 100vh;
+  background: $color-bg;
+  padding-bottom: 40px;
+}
+
+.stateWrap {
+  margin-top: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.body {
+  padding: 24px;
+}
+
+// 添加关爱对象虚线卡：与列表页底部加号卡同款式
+.addCared {
+  margin-top: 24px;
+  padding: 48px 32px;
+  background: $color-bg-white;
+  border: 1px dashed $color-primary-light-border;
+  border-radius: $radius-lg;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.addCaredIcon {
+  width: 96px;
+  height: 96px;
+  border-radius: $radius-circle;
+  background: $color-primary;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.addCaredIconText {
+  font-size: 48px;
+  font-weight: 300;
+  color: #ffffff;
+}
+
+.addCaredText {
+  font-size: 26px;
+  color: $color-text-secondary;
+}
+
+.section {
+  margin-top: 24px;
+}

src/pages/family/detail.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react'
+import { useRouter, useDidShow } from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
+import { Navbar } from '@/components/navbar'
+import { Loading } from '@/components/loading'
+import { StateView } from '@/components/state-view'
+import { FamilyCard } from '@/components/family-card'
+import { ListRow, ListRowGroup } from '@/components/list-row'
+import {
+  getFamilyDetail,
+  canAddCared,
+  type FamilyDetailData
+} from '@/api/family'
+import { MAX_CARED_PER_FAMILY } from '@/constants/family'
+import { ROUTES } from '@/constants/routes'
+import { navigateBack, navigateTo } from '@/utils/navigation'
+import { showToast } from '@/utils/toast'
+import styles from './detail.module.scss'
+
+export default function FamilyDetail() {
+  const router = useRouter()
+  const familyId = router.params.id ?? ''
+
+  const [loading, setLoading] = useState(true)
+  const [detail, setDetail] = useState<FamilyDetailData | null>(null)
+
+  const load = async () => {
+    setLoading(true)
+    try {
+      setDetail(await getFamilyDetail(familyId))
+    } catch {
+      setDetail(null)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // 从添加表单返回时刷新（caredCount 变化）
+  useDidShow(() => {
+    load()
+  })
+
+  const addCared = async () => {
+    if (!(await canAddCared(familyId))) {
+      showToast('已达上限')
+      return
+    }
+    navigateTo(`${ROUTES.FAMILY_CONTACT_ADD}?familyId=${familyId}`)
+  }
+
+  if (loading) {
+    return (
+      <View className={styles.page}>
+        <Navbar title="关爱对象信息" />
+        <View className={styles.stateWrap}><Loading /></View>
+      </View>
+    )
+  }
+
+  if (!detail) {
+    return (
+      <View className={styles.page}>
+        <Navbar title="关爱对象信息" />
+        <StateView
+          status="error"
+          mode="list"
+          text="该家庭不存在"
+          retryText="返回列表"
+          onRetry={() => navigateBack()}
+        />
+      </View>
+    )
+  }
+
+  const canAdd = detail.family.caredCount < MAX_CARED_PER_FAMILY
+  const stub = (tip: string) => () => showToast(tip)
+
+  return (
+    <View className={styles.page}>
+      <Navbar title="关爱对象信息" />
+
+      <View className={styles.body}>
+        <FamilyCard family={detail.family} />
+
+        {/* 添加关爱对象卡：达上限后静态 */}
+        <View
+          className={styles.addCared}
+          onClick={canAdd ? addCared : undefined}
+        >
+          <View className={styles.addCaredIcon}>
+            <Text className={styles.addCaredIconText}>+</Text>
+          </View>
+          <Text className={styles.addCaredText}>
+            {canAdd ? `+ 最多可添加 ${MAX_CARED_PER_FAMILY} 人` : '已达上限'}
+          </Text>
+        </View>
+
+        <View className={styles.section}>
+          <ListRowGroup>
+            {detail.members.map((m) => (
+              <ListRow key={m.id} label={m.name} value={m.role === 'owner' ? '群主' : '成员'} />
+            ))}
+          </ListRowGroup>
+        </View>
+
+        <View className={styles.section}>
+          <ListRowGroup>
+            <ListRow label="家庭编号" value={detail.family.id} onClick={stub('复制成功（占位）')} arrow />
+            <ListRow label="邀请他人" arrow onClick={stub('邀请功能即将上线')} />
+            <ListRow label="转让群主" arrow onClick={stub('转让功能即将上线')} />
+            <ListRow label="修改群昵称" arrow onClick={stub('修改昵称功能即将上线')} />
+          </ListRowGroup>
+        </View>
+      </View>
+    </View>
+  )
+}