瀏覽代碼

feat(family): 家庭成员页支持编辑家庭名称(管理员)+ 记录 rename-family 接口

Agnes Agent 1 周之前
父節點
當前提交
24627b1762

+ 67 - 2
cfc-frontend/pages/profile-extra/family-members.vue

@@ -5,7 +5,10 @@
       <view class="family-header-content">
         <text class="family-header-icon">🏠</text>
         <view class="family-header-text">
-          <text class="family-name">{{ familyName || '我的家庭' }}</text>
+          <view class="family-name-row">
+            <text class="family-name">{{ familyName || '我的家庭' }}</text>
+            <text class="family-name-edit" v-if="isAdmin" @click="openRenameModal">✏️</text>
+          </view>
           <text class="family-member-count">{{ filteredMembers.length }} 位成员</text>
         </view>
       </view>
@@ -150,6 +153,21 @@
       </view>
     </view>
 
+    <!-- ===== 编辑家庭名称弹窗(仅管理员) ===== -->
+    <view class="modal-mask" v-if="showRenameModal" @click="closeRenameModal">
+      <view class="rename-modal-card" @click.stop>
+        <view class="perm-header">
+          <text class="perm-title">✏️ 编辑家庭名称</text>
+          <text class="perm-close" @click="closeRenameModal">×</text>
+        </view>
+        <input class="rename-input" v-model="renameInput" maxlength="20" placeholder="请输入家庭名称" />
+        <view class="rename-actions">
+          <button class="rename-btn rename-cancel" @click="closeRenameModal">取消</button>
+          <button class="rename-btn rename-save" :loading="renameSaving" @click="saveRename">保存</button>
+        </view>
+      </view>
+    </view>
+
     <!-- ===== 底部操作栏 ===== -->
     <view class="bottom-bar">
       <button class="bottom-btn btn-add" @click="onAddMember">+ 添加成员</button>
@@ -180,7 +198,8 @@ import {
   getMemberGrantedUsers,
   grantReportMemberPermission,
   revokeReportMemberPermission,
-  reportAppEnter
+  reportAppEnter,
+  renameFamily
 } from '../../utils/api.js'
 import store from '../../store/index.js'
 import GenerationPicker from '@/components/GenerationPicker.vue'
@@ -219,6 +238,11 @@ export default {
       permMembers: [],            // 可选被授权成员(有绑定userId的)
       permGranting: false,
 
+      // ===== 家庭名称编辑弹窗状态 =====
+      showRenameModal: false,
+      renameInput: '',
+      renameSaving: false,
+
       }
   },
   computed: {
@@ -429,6 +453,37 @@ export default {
     closeReportPermission() {
       this.showPermModal = false
     },
+    // ===== 家庭名称编辑(仅管理员) =====
+    openRenameModal() {
+      this.renameInput = this.familyName || ''
+      this.showRenameModal = true
+    },
+    closeRenameModal() {
+      this.showRenameModal = false
+    },
+    saveRename() {
+      var self = this
+      if (this.renameSaving) return
+      var name = (this.renameInput || '').trim()
+      if (!name) {
+        uni.showToast({ title: '家庭名称不能为空', icon: 'none' })
+        return
+      }
+      this.renameSaving = true
+      renameFamily({ name: name }).then(function(res) {
+        self.renameSaving = false
+        if (res && res.code === 200) {
+          self.familyName = res.data
+          self.showRenameModal = false
+          uni.showToast({ title: '已更新', icon: 'success' })
+        } else {
+          uni.showToast({ title: (res && res.message) || '更新失败', icon: 'none' })
+        }
+      }).catch(function() {
+        self.renameSaving = false
+        uni.showToast({ title: '更新失败', icon: 'none' })
+      })
+    },
     permUserNickname(uid) {
       var self = this
       var found = (this.members || []).filter(function(m) {
@@ -1339,4 +1394,14 @@ $c-elm-danger-text:  $el-danger; // Element UI 危险文字
   font-size: calc(28rpx * var(--font-scale, 1));
   color: $facade-text-muted;
 }
+
+/* ===== 家庭名称编辑 ===== */
+.family-name-row { display: flex; align-items: center; }
+.family-name-edit { margin-left: 10rpx; font-size: calc(26rpx * var(--font-scale, 1)); }
+.rename-modal-card { width: 600rpx; background: $app-surface; border-radius: 24rpx; padding: 40rpx; }
+.rename-input { border: 1rpx solid $facade-border-soft; border-radius: 12rpx; padding: 20rpx; font-size: calc(30rpx * var(--font-scale, 1)); margin-top: 24rpx; }
+.rename-actions { display: flex; gap: 20rpx; margin-top: 32rpx; }
+.rename-btn { flex: 1; border-radius: 24rpx; font-size: calc(28rpx * var(--font-scale, 1)); }
+.rename-cancel { background: $facade-fill-2; color: $facade-text-body; }
+.rename-save { background: $brand-primary; color: $app-surface; }
 </style>

+ 5 - 0
cfc-frontend/utils/api.js

@@ -697,6 +697,11 @@ export const updateFamilyMember = (data) => {
   return request('/api/family/member/update', 'POST', data)
 }
 
+// 修改家庭名称(仅家庭管理员)
+export const renameFamily = (data) => {
+  return request('/api/family/member/rename-family', 'POST', data)
+}
+
 // 任务模块
 export const createTask = (data) => {
   return request('/api/tasks/create', 'POST', data)

+ 1 - 0
docs/superpowers/api/API_REFERENCE.md

@@ -183,6 +183,7 @@ find cfc-backend/src/main/java -name "*XxxService.java" -o -name "*XxxController
 | `POST /api/family/member/leave` | 主动退出家庭(微信用户;创建者需先转让管理员) | — |
 | `POST /api/family/member/recycle` | 从回收箱回收成员(管理员操作) | — |
 | `POST /api/family/member/update` | 更新成员信息 | — |
+| `POST /api/family/member/rename-family` | 修改家庭名称(仅家庭管理员) | body `{name}`,返回新名称 |
 | `POST /api/family/member/editable` | 检查是否可编辑 | — |
 | `POST /api/family/member/logs` | 成员变更日志 | — |
 | `POST /api/family/invite/qrcode` | 生成邀请二维码 | — |