From a9dfb2485be9096055530f4b2119d6724150f116 Mon Sep 17 00:00:00 2001
From: ozh <sylphy.ou@tfegroup.com.hk>
Date: Wed, 9 Sep 2026 15:16:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(family):=20=E5=AE=B6=E5=BA=AD=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E2=80=94=E2=80=94=E6=88=90=E5=91=98=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E3=80=81=E6=B7=BB=E5=8A=A0=E5=85=B3=E7=88=B1=E5=AF=B9?=
 =?UTF-8?q?=E8=B1=A1=E5=85=A5=E5=8F=A3=E3=80=81=E7=AE=A1=E7=90=86=E9=A1=B9?=
 =?UTF-8?q?=20stub?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.config.ts                   |   1 +
 src/pages/family/detail.module.scss |  54 +++++++++++++
 src/pages/family/detail.tsx         | 117 ++++++++++++++++++++++++++++
 3 files changed, 172 insertions(+)
 create mode 100644 src/pages/family/detail.module.scss
 create mode 100644 src/pages/family/detail.tsx

diff --git a/src/app.config.ts b/src/app.config.ts
index 010eb78..ad6049d 100644
--- a/src/app.config.ts
+++ b/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: {
diff --git a/src/pages/family/detail.module.scss b/src/pages/family/detail.module.scss
new file mode 100644
index 0000000..eab13b5
--- /dev/null
+++ b/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;
+}
diff --git a/src/pages/family/detail.tsx b/src/pages/family/detail.tsx
new file mode 100644
index 0000000..87bbd84
--- /dev/null
+++ b/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>
+  )
+}