admin/xiaocai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 创建/加入群组合并为 Tab 切换卡片
- 群主可刷新邀请码（后端+前端完整链路）
- 群主可管理成员：查看列表、移除成员
- 新增后端 API：refresh-code / members / remove-member
- 修复分类管理页 FAB 按钮缺少 plus 图标
- 新增 plus/refresh 图标资源
This commit is contained in:
wangxiaogang
2026-06-04 21:28:22 +08:00
parent 114263e4b2
commit 9764b5626b
8 changed files with 541 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

400
client/src/pages/group-manage/index.vue
View File

@@ -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>