style(family): 家庭圈样式精细化——卡片间距/信息行分割线/按压态/上限灰化

src/components/family-card/index.module.scss

@@ -2,6 +2,7 @@
 .card {
   position: relative;
   overflow: hidden;
+  margin-bottom: 24px;
   background: $color-primary-light-bg;
   border: 1px solid $color-primary-light-border;
   border-radius: $radius-lg;
@@ -77,11 +78,17 @@
   color: $color-primary-deep;
 }
 
+// 信息行：浅绿卡身上用更淡的绿分割线区分，不用灰白 $color-border
 .rows {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 56px;
+  min-height: 60px;
+  border-top: 1px solid $color-primary-light-border;
+}
+
+.rows:first-of-type {
+  border-top: none;
 }
 
 .rowLabel {
@@ -92,6 +99,7 @@
 .rowValue {
   margin-left: 24px;
   font-size: 26px;
+  font-weight: 500;
   color: $color-text;
   overflow: hidden;
   text-overflow: ellipsis;

src/pages/family/contact/add.module.scss

@@ -93,6 +93,20 @@
   z-index: 1;
 }
 
+// 删除钮命中区 64px 内收成浅红圆底，给出可点视觉
+.contactDelPressed .contactDelInner {
+  background: $color-danger-light-bg;
+  border-radius: $radius-circle;
+}
+
+.contactDelInner {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .contactDelText {
   font-size: 36px;
   color: $color-danger;
@@ -108,6 +122,15 @@
   justify-content: center;
 }
 
+.submitPressed {
+  opacity: 0.85;
+}
+
+// 提交中防重复点击的视觉降级
+.submitDisabled {
+  opacity: 0.6;
+}
+
 .submitText {
   font-size: 32px;
   font-weight: 600;

src/pages/family/contact/add.tsx

@@ -108,8 +108,10 @@ export default function ContactAdd() {
 
         {contacts.map((c) => (
           <View key={c.id} className={styles.contactItem}>
-            <View className={styles.contactDel} onClick={() => removeContact(c.id)}>
+            <View className={styles.contactDel} hoverClass={styles.contactDelPressed} onClick={() => removeContact(c.id)}>
-              <Text className={styles.contactDelText}>×</Text>
+              <View className={styles.contactDelInner}>
+                <Text className={styles.contactDelText}>×</Text>
+              </View>
             </View>
             <View className={styles.formRow}>
               <Text className={styles.label}>姓名</Text>
@@ -143,7 +145,11 @@ export default function ContactAdd() {
         ))}
       </View>
 
-      <View className={styles.submit} onClick={submit}>
+      <View
+        className={`${styles.submit} ${submitting ? styles.submitDisabled : ''}`}
+        hoverClass={submitting ? 'none' : styles.submitPressed}
+        onClick={submit}
+      >
         <Text className={styles.submitText}>{submitting ? '提交中...' : '确认添加'}</Text>
       </View>
     </View>

src/pages/family/detail.module.scss

@@ -17,7 +17,7 @@
 
 // 添加关爱对象虚线卡：与列表页底部加号卡同款式
 .addCared {
-  margin-top: 24px;
+  margin-top: 0;
   padding: 48px 32px;
   background: $color-bg-white;
   border: 1px dashed $color-primary-light-border;
@@ -27,28 +27,49 @@
   align-items: center;
 }
 
+// 达上限态：灰化降级，明确"不可点"
+.addCaredDisabled {
+  border-color: $color-border;
+}
+
 .addCaredIcon {
   width: 96px;
   height: 96px;
   border-radius: $radius-circle;
-  background: $color-primary;
+  background: $color-primary-grad;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
 }
 
+.addCaredIconDisabled {
+  background: $color-bg-disabled;
+}
+
 .addCaredIconText {
   font-size: 48px;
   font-weight: 300;
   color: #ffffff;
 }
 
+.addCaredIconTextDisabled {
+  color: $color-text-tertiary;
+}
+
 .addCaredText {
   font-size: 26px;
   color: $color-text-secondary;
 }
 
+.addCaredTextDisabled {
+  color: $color-text-tertiary;
+}
+
+.addCaredPressed {
+  opacity: 0.85;
+}
+
 .section {
   margin-top: 24px;
 }

src/pages/family/detail.tsx

@@ -82,15 +82,20 @@ export default function FamilyDetail() {
       <View className={styles.body}>
         <FamilyCard family={detail.family} />
 
-        {/* 添加关爱对象卡：达上限后静态 */}
+        {/* 添加关爱对象卡：达上限后灰化静态 */}
         <View
-          className={styles.addCared}
+          className={`${styles.addCared} ${canAdd ? '' : styles.addCaredDisabled}`}
+          hoverClass={canAdd ? styles.addCaredPressed : 'none'}
           onClick={canAdd ? addCared : undefined}
         >
-          <View className={styles.addCaredIcon}>
+          <View className={`${styles.addCaredIcon} ${canAdd ? '' : styles.addCaredIconDisabled}`}>
-            <Text className={styles.addCaredIconText}>+</Text>
+            <Text
+              className={`${styles.addCaredIconText} ${canAdd ? '' : styles.addCaredIconTextDisabled}`}
+            >
+              +
+            </Text>
           </View>
-          <Text className={styles.addCaredText}>
+          <Text className={`${styles.addCaredText} ${canAdd ? '' : styles.addCaredTextDisabled}`}>
             {canAdd ? `+ 最多可添加 ${MAX_CARED_PER_FAMILY} 人` : '已达上限'}
           </Text>
         </View>

src/pages/family/index.module.scss

@@ -9,7 +9,6 @@
 }
 
 .addCard {
-  margin-top: 24px;
   padding: 48px 32px;
   background: $color-bg-white;
   border: 1px dashed $color-primary-light-border;
@@ -23,7 +22,7 @@
   width: 96px;
   height: 96px;
   border-radius: $radius-circle;
-  background: $color-primary;
+  background: $color-primary-grad;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -66,6 +65,10 @@
   color: #ffffff;
 }
 
+.btnPressed {
+  opacity: 0.85;
+}
+
 .modalBtnPlain {
   height: 88px;
   border: 1px solid $color-primary-light-border;
@@ -75,6 +78,10 @@
   justify-content: center;
 }
 
+.btnPlainPressed {
+  background: $color-primary-light-bg;
+}
+
 .modalBtnPlainText {
   font-size: 30px;
   color: $color-primary-deep;

src/pages/family/index.tsx

@@ -96,10 +96,10 @@ export default function Family() {
 
       <Modal visible={showCreateModal} onClose={() => setShowCreateModal(false)}>
         <Text className={styles.modalTitle}>添加家庭圈</Text>
-        <View className={styles.modalBtnPrimary} onClick={createFamily}>
+        <View className={styles.modalBtnPrimary} hoverClass={styles.btnPressed} onClick={createFamily}>
           <Text className={styles.modalBtnPrimaryText}>新建家庭</Text>
         </View>
-        <View className={styles.modalBtnPlain} onClick={joinByCode}>
+        <View className={styles.modalBtnPlain} hoverClass={styles.btnPlainPressed} onClick={joinByCode}>
           <Text className={styles.modalBtnPlainText}>加入家庭</Text>
         </View>
       </Modal>