feat: 群组管理页面优化 + 分类管理图标修复

- 创建/加入群组合并为 Tab 切换卡片 - 群主可刷新邀请码（后端+前端完整链路） - 群主可管理成员：查看列表、移除成员 - 新增后端 API：refresh-code / members / remove-member - 修复分类管理页 FAB 按钮缺少 plus 图标 - 新增 plus/refresh 图标资源
2026-06-04 21:28:22 +08:00
parent 114263e4b2
commit 9764b5626b
8 changed files with 541 additions and 40 deletions
--- a/client/src/api/group.ts
+++ b/client/src/api/group.ts
@@ -36,3 +36,27 @@ export function leaveGroup(id: number) {
 export function deleteGroup(id: number) {
  return request({ url: `/groups/${id}`, method: 'DELETE' })
 }
+
+/** 群组成员 */
+export interface GroupMember {
+  user_id: number
+  role: 'owner' | 'member'
+  nickname: string
+  avatar_url: string
+  joined_at: string
+}
+
+/** 刷新邀请码 */
+export function refreshInviteCode(groupId: number) {
+  return request<{ invite_code: string }>({ url: `/groups/${groupId}/refresh-code`, method: 'POST' })
+}
+
+/** 获取成员列表 */
+export function getGroupMembers(groupId: number) {
+  return request<GroupMember[]>({ url: `/groups/${groupId}/members` })
+}
+
+/** 移除成员 */
+export function removeMember(groupId: number, userId: number) {
+  return request({ url: `/groups/${groupId}/members/${userId}`, method: 'DELETE' })
+}
--- a/client/src/components/Icon/Icon.vue
+++ b/client/src/components/Icon/Icon.vue
@@ -56,6 +56,13 @@ const iconMap: Record<string, Record<string, string>> = {
    '#FF6B6B': '/static/icons/trash-red.png',
    '#FFFFFF': '/static/icons/trash-white.png',
  },
+  plus: {
+    '#FFFFFF': '/static/icons/plus-white.png',
+  },
+  refresh: {
+    '#8B7E7E': '/static/icons/refresh-gray.png',
+    '#FF8C69': '/static/icons/refresh-orange.png',
+  },
 }

 const iconSrc = computed(() => {
--- a/client/src/pages/group-manage/index.vue
+++ b/client/src/pages/group-manage/index.vue
@@ -11,23 +11,30 @@
      </view>
    </view>

-    <!-- 创建群组 -->
+    <!-- 创建/加入 Tab 卡片 -->
    <view class="action-card">
-      <text class="card-title">创建新群组</text>
-      <view class="action-row">
-        <input class="action-input" v-model="newGroupName" placeholder="群组名称" maxlength="100" />
-        <view class="action-btn" @tap="handleCreate">
+      <view class="tab-bar">
+        <view class="tab-item" :class="{ active: actionTab === 'create' }" @tap="actionTab = 'create'">
+          <text class="tab-text">创建群组</text>
+        </view>
+        <view class="tab-item" :class="{ active: actionTab === 'join' }" @tap="actionTab = 'join'">
+          <text class="tab-text">加入群组</text>
+        </view>
+      </view>
+
+      <!-- 创建 -->
+      <view v-if="actionTab === 'create'" class="action-body">
+        <input class="action-input" v-model="newGroupName" placeholder="输入群组名称" maxlength="100" />
+        <view class="action-btn" :class="{ disabled: saving }" @tap="handleCreate">
+          <Icon name="plus" :size="28" color="#FFFFFF" />
          <text class="action-btn-text">创建</text>
        </view>
      </view>
-    </view>

-    <!-- 加入群组 -->
-    <view class="action-card">
-      <text class="card-title">加入群组</text>
-      <view class="action-row">
-        <input class="action-input" v-model="inviteCode" placeholder="输入邀请码" maxlength="6" />
-        <view class="action-btn" @tap="handleJoin">
+      <!-- 加入 -->
+      <view v-else class="action-body">
+        <input class="action-input" v-model="inviteCode" placeholder="输入 6 位邀请码" maxlength="6" />
+        <view class="action-btn" :class="{ disabled: saving }" @tap="handleJoin">
          <text class="action-btn-text">加入</text>
        </view>
      </view>
@@ -53,15 +60,35 @@
          <Icon name="user" :size="32" color="#FF8C69" />
        </view>
        <view class="group-info">
-          <text class="group-name">{{ group.name }}</text>
-          <text class="group-meta">{{ group.member_count }} 人 · {{ group.role === 'owner' ? '群主' : '成员' }}</text>
-          <view class="invite-row" @tap="copyInviteCode(group.invite_code)">
+          <view class="group-name-row">
+            <text class="group-name">{{ group.name }}</text>
+            <view v-if="group.role === 'owner'" class="role-badge owner">
+              <text class="role-badge-text">群主</text>
+            </view>
+            <view v-else class="role-badge member">
+              <text class="role-badge-text">成员</text>
+            </view>
+          </view>
+          <text class="group-meta">{{ group.member_count }} 人</text>
+
+          <!-- 邀请码行 -->
+          <view class="invite-row">
            <text class="invite-label">邀请码：</text>
-            <text class="invite-code">{{ group.invite_code }}</text>
-            <text class="invite-copy">复制</text>
+            <text class="invite-code" @tap="copyInviteCode(group.invite_code)">{{ group.invite_code }}</text>
+            <view class="invite-action" @tap="copyInviteCode(group.invite_code)">
+              <text class="invite-action-text">复制</text>
+            </view>
+            <view v-if="group.role === 'owner'" class="invite-action" @tap="handleRefreshCode(group)">
+              <Icon name="refresh" :size="24" color="#8B7E7E" />
+              <text class="invite-action-text">刷新</text>
+            </view>
          </view>
        </view>
+
        <view class="group-actions">
+          <view v-if="group.role === 'owner'" class="group-btn manage" @tap="openMemberModal(group)">
+            <text class="group-btn-text manage-text">成员</text>
+          </view>
          <view v-if="group.role === 'owner'" class="group-btn dissolve" @tap="handleDissolve(group)">
            <text class="group-btn-text dissolve-text">解散</text>
          </view>
@@ -71,6 +98,39 @@
        </view>
      </view>
    </view>
+
+    <!-- 成员管理弹窗 -->
+    <view class="modal-mask" v-if="showMemberModal" @tap="showMemberModal = false">
+      <view class="member-modal" @tap.stop>
+        <view class="modal-header">
+          <text class="modal-title">成员管理</text>
+          <view class="modal-close" @tap="showMemberModal = false">
+            <text class="modal-close-text">×</text>
+          </view>
+        </view>
+
+        <view v-if="membersLoading" class="modal-loading">
+          <text class="loading-text">加载中...</text>
+        </view>
+
+        <view v-else-if="members.length === 0" class="modal-empty">
+          <text class="loading-text">暂无成员</text>
+        </view>
+
+        <scroll-view v-else class="member-list" scroll-y>
+          <view v-for="m in members" :key="m.user_id" class="member-item">
+            <image class="member-avatar" :src="getAvatarUrl(m.avatar_url)" mode="aspectFill" />
+            <view class="member-info">
+              <text class="member-name">{{ m.nickname || '用户' + m.user_id }}</text>
+              <text class="member-role" :class="m.role">{{ m.role === 'owner' ? '群主' : '成员' }}</text>
+            </view>
+            <view v-if="m.role !== 'owner' && currentGroup?.role === 'owner'" class="member-remove" @tap="handleRemoveMember(m)">
+              <text class="member-remove-text">移除</text>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
  </view>
 </template>

@@ -80,15 +140,24 @@ import { onShow } from '@dcloudio/uni-app'
 import { useGroupStore } from '@/stores/group'
 import { waitForReady } from '@/utils/app-ready'
 import { statusBarHeight, capsuleRight } from '@/utils/system'
+import { API_BASE } from '@/config'
 import Icon from '@/components/Icon/Icon.vue'
+import type { GroupMember, Group } from '@/api/group'

 const groupStore = useGroupStore()

+const actionTab = ref<'create' | 'join'>('create')
 const newGroupName = ref('')
 const inviteCode = ref('')
 const saving = ref(false)
 const initialLoaded = ref(false)

+// 成员管理弹窗
+const showMemberModal = ref(false)
+const membersLoading = ref(false)
+const members = ref<GroupMember[]>([])
+const currentGroup = ref<Group | null>(null)
+
 onMounted(async () => {
  await waitForReady()
  await groupStore.fetchGroups()
@@ -111,6 +180,13 @@ function copyInviteCode(code: string) {
  })
 }

+/** 获取头像 URL */
+function getAvatarUrl(avatarUrl: string): string {
+  if (!avatarUrl) return ''
+  if (avatarUrl.startsWith('http') || avatarUrl.startsWith('blob:')) return avatarUrl
+  return `${API_BASE}/user/avatar/${avatarUrl}`
+}
+
 async function handleCreate() {
  if (saving.value) return
  const name = newGroupName.value.trim()
@@ -158,7 +234,63 @@ async function handleJoin() {
  }
 }

-function handleLeave(group: any) {
+/** 刷新邀请码 */
+function handleRefreshCode(group: Group) {
+  uni.showModal({
+    title: '刷新邀请码',
+    content: `刷新后旧邀请码将失效，确定继续？`,
+    success: async (res) => {
+      if (res.confirm) {
+        try {
+          const result = await groupStore.refreshInviteCode(group.id)
+          uni.setClipboardData({
+            data: result.invite_code,
+            success: () => uni.showToast({ title: '新邀请码已复制', icon: 'success' })
+          })
+        } catch (e: any) {
+          uni.showToast({ title: e.message || '刷新失败', icon: 'none' })
+        }
+      }
+    }
+  })
+}
+
+/** 打开成员管理弹窗 */
+async function openMemberModal(group: Group) {
+  currentGroup.value = group
+  showMemberModal.value = true
+  membersLoading.value = true
+  try {
+    members.value = await groupStore.fetchGroupMembers(group.id)
+  } catch (e: any) {
+    uni.showToast({ title: e.message || '加载失败', icon: 'none' })
+    members.value = []
+  } finally {
+    membersLoading.value = false
+  }
+}
+
+/** 移除成员 */
+function handleRemoveMember(member: GroupMember) {
+  if (!currentGroup.value) return
+  uni.showModal({
+    title: '移除成员',
+    content: `确定移除「${member.nickname || '该用户'}」？该成员的记录将回到个人账本。`,
+    success: async (res) => {
+      if (res.confirm) {
+        try {
+          await groupStore.removeMember(currentGroup.value!.id, member.user_id)
+          members.value = members.value.filter(m => m.user_id !== member.user_id)
+          uni.showToast({ title: '已移除', icon: 'success' })
+        } catch (e: any) {
+          uni.showToast({ title: e.message || '操作失败', icon: 'none' })
+        }
+      }
+    }
+  })
+}
+
+function handleLeave(group: Group) {
  uni.showModal({
    title: '退出群组',
    content: `确定退出「${group.name}」？你在该群组的记录将回到个人账本。`,
@@ -175,7 +307,7 @@ function handleLeave(group: any) {
  })
 }

-function handleDissolve(group: any) {
+function handleDissolve(group: Group) {
  uni.showModal({
    title: '解散群组',
    content: `确定解散「${group.name}」？群组记录将回到各成员的个人账本。`,
@@ -233,26 +365,48 @@ function handleDissolve(group: any) {
  color: #2D1B1B;
 }

+/* Tab 卡片 */
 .action-card {
  margin: 24rpx 40rpx 0;
-  padding: 32rpx 40rpx;
  background: #FFFFFF;
  border-radius: 40rpx;
  border: 2rpx solid #F0E0D6;
  box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
+  overflow: hidden;
 }

-.card-title {
+.tab-bar {
+  display: flex;
+  padding: 16rpx 16rpx 0;
+  gap: 8rpx;
+}
+
+.tab-item {
+  flex: 1;
+  height: 72rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 20rpx 20rpx 0 0;
+  transition: all 0.2s;
+
+  &.active {
+    background: #FFF0E6;
+
+    .tab-text { color: #FF8C69; }
+  }
+}
+
+.tab-text {
  font-size: 28rpx;
-  font-weight: 600;
-  color: #2D1B1B;
-  display: block;
-  margin-bottom: 20rpx;
+  font-weight: 500;
+  color: #8B7E7E;
 }

-.action-row {
+.action-body {
  display: flex;
  gap: 16rpx;
+  padding: 24rpx 32rpx 32rpx;
 }

 .action-input {
@@ -274,6 +428,10 @@ function handleDissolve(group: any) {
  display: flex;
  align-items: center;
  justify-content: center;
+  gap: 8rpx;
+
+  &.disabled { opacity: 0.5; }
+  &:active { opacity: 0.8; }
 }

 .action-btn-text {
@@ -283,6 +441,7 @@ function handleDissolve(group: any) {
  white-space: nowrap;
 }

+/* 群组列表 */
 .section-header {
  padding: 40rpx 40rpx 16rpx;
 }
@@ -313,7 +472,7 @@ function handleDissolve(group: any) {

 .group-item {
  display: flex;
-  align-items: center;
+  align-items: flex-start;
  padding: 28rpx 32rpx;
  margin-bottom: 16rpx;
  background: #FFFFFF;
@@ -332,6 +491,7 @@ function handleDissolve(group: any) {
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
+  margin-top: 4rpx;
 }

 .group-info {
@@ -339,11 +499,32 @@ function handleDissolve(group: any) {
  min-width: 0;
 }

+.group-name-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
 .group-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #2D1B1B;
-  display: block;
+}
+
+.role-badge {
+  padding: 2rpx 12rpx;
+  border-radius: 8rpx;
+
+  &.owner { background: #FFE8E0; }
+  &.member { background: #F0E0D6; }
+}
+
+.role-badge-text {
+  font-size: 20rpx;
+  font-weight: 500;
+
+  .owner & { color: #FF8C69; }
+  .member & { color: #8B7E7E; }
 }

 .group-meta {
@@ -353,13 +534,13 @@ function handleDissolve(group: any) {
  margin-top: 4rpx;
 }

+/* 邀请码行 */
 .invite-row {
  display: flex;
  align-items: center;
-  margin-top: 8rpx;
-  padding: 8rpx 0;
-  min-height: 48rpx;
-  gap: 4rpx;
+  margin-top: 12rpx;
+  gap: 8rpx;
+  flex-wrap: wrap;
 }

 .invite-label {
@@ -374,25 +555,38 @@ function handleDissolve(group: any) {
  font-family: 'Fredoka', monospace;
 }

-.invite-copy {
-  font-size: 22rpx;
-  color: #FF8C69;
-  margin-left: 8rpx;
-  text-decoration: underline;
+.invite-action {
+  display: flex;
+  align-items: center;
+  gap: 4rpx;
+  padding: 4rpx 12rpx;
+  background: #FFF8F0;
+  border-radius: 12rpx;
+
+  &:active { background: #F0E0D6; }
 }

+.invite-action-text {
+  font-size: 22rpx;
+  color: #8B7E7E;
+}
+
+/* 操作按钮 */
 .group-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
  flex-shrink: 0;
 }

 .group-btn {
-  padding: 16rpx 28rpx;
+  padding: 12rpx 24rpx;
  border-radius: 16rpx;
-  min-height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;

+  &.manage { background: #FFF0E6; }
  &.leave { background: #FFF0E6; }
  &.dissolve { background: #FFE8E8; }

@@ -402,8 +596,136 @@ function handleDissolve(group: any) {
 .group-btn-text {
  font-size: 24rpx;
  font-weight: 500;
+  white-space: nowrap;

+  &.manage-text { color: #FF8C69; }
  &.leave-text { color: #FF8C69; }
  &.dissolve-text { color: #FF6B6B; }
 }
+
+/* 成员管理弹窗 */
+.modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 200;
+  display: flex;
+  align-items: flex-end;
+}
+
+.member-modal {
+  width: 100%;
+  max-height: 75vh;
+  background: #FFFFFF;
+  border-radius: 40rpx 40rpx 0 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx 40rpx 24rpx;
+  border-bottom: 2rpx solid #F0E0D6;
+}
+
+.modal-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #2D1B1B;
+}
+
+.modal-close {
+  width: 56rpx;
+  height: 56rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #F0E0D6;
+
+  &:active { background: #E0D6D0; }
+}
+
+.modal-close-text {
+  font-size: 36rpx;
+  color: #8B7E7E;
+  line-height: 1;
+}
+
+.modal-loading, .modal-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 80rpx 0;
+}
+
+.member-list {
+  max-height: 60vh;
+  padding: 16rpx 40rpx 40rpx;
+}
+
+.member-item {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 0;
+  gap: 20rpx;
+  border-bottom: 2rpx solid #F8F0EB;
+
+  &:last-child { border-bottom: none; }
+}
+
+.member-avatar {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: #F0E0D6;
+  flex-shrink: 0;
+}
+
+.member-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.member-name {
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #2D1B1B;
+  display: block;
+}
+
+.member-role {
+  font-size: 22rpx;
+  display: block;
+  margin-top: 4rpx;
+
+  &.owner { color: #FF8C69; }
+  &.member { color: #BFB3B3; }
+}
+
+.member-remove {
+  padding: 12rpx 24rpx;
+  background: #FFE8E8;
+  border-radius: 16rpx;
+  flex-shrink: 0;
+
+  &:active { opacity: 0.7; }
+}
+
+.member-remove-text {
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #FF6B6B;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tab-item, .action-btn, .invite-action, .group-btn, .member-remove {
+    transition: none;
+  }
+}
 </style>
--- a/client/src/static/icons/plus-white.png
+++ b/client/src/static/icons/plus-white.png
--- a/client/src/static/icons/refresh-gray.png
+++ b/client/src/static/icons/refresh-gray.png
--- a/client/src/static/icons/refresh-orange.png
+++ b/client/src/static/icons/refresh-orange.png
--- a/client/src/stores/group.ts
+++ b/client/src/stores/group.ts
@@ -97,6 +97,32 @@ export const useGroupStore = defineStore('group', () => {
    await fetchGroups()
  }

+  /** 刷新邀请码（群主） */
+  async function refreshInviteCode(groupId: number) {
+    const result = await api.refreshInviteCode(groupId)
+    // 更新本地 groups 中的 invite_code
+    const group = groups.value.find(g => g.id === groupId)
+    if (group) {
+      group.invite_code = result.invite_code
+    }
+    return result
+  }
+
+  /** 获取成员列表 */
+  async function fetchGroupMembers(groupId: number) {
+    return await api.getGroupMembers(groupId)
+  }
+
+  /** 移除成员（群主） */
+  async function removeMember(groupId: number, userId: number) {
+    await api.removeMember(groupId, userId)
+    // 更新本地成员数
+    const group = groups.value.find(g => g.id === groupId)
+    if (group && group.member_count > 0) {
+      group.member_count--
+    }
+  }
+
  /** 初始化：从本地存储恢复选中状态 */
  function init() {
    const saved = uni.getStorageSync('xc:currentGroupId')
@@ -108,6 +134,7 @@ export const useGroupStore = defineStore('group', () => {
  return {
    groups, loading, currentGroupId, currentGroup, isGroupMode,
    switchToPersonal, switchToGroup, refreshAll,
-    fetchGroups, createGroup, joinGroup, leaveGroup, deleteGroup, init
+    fetchGroups, createGroup, joinGroup, leaveGroup, deleteGroup,
+    refreshInviteCode, fetchGroupMembers, removeMember, init
  }
 })