Compare commits
2 Commits
114263e4b2
...
f5adf7531f
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f5adf7531f | ||
|
|
9764b5626b |
@@ -36,3 +36,27 @@ export function leaveGroup(id: number) {
|
|||||||
export function deleteGroup(id: number) {
|
export function deleteGroup(id: number) {
|
||||||
return request({ url: `/groups/${id}`, method: 'DELETE' })
|
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' })
|
||||||
|
}
|
||||||
|
|||||||
@@ -56,6 +56,13 @@ const iconMap: Record<string, Record<string, string>> = {
|
|||||||
'#FF6B6B': '/static/icons/trash-red.png',
|
'#FF6B6B': '/static/icons/trash-red.png',
|
||||||
'#FFFFFF': '/static/icons/trash-white.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(() => {
|
const iconSrc = computed(() => {
|
||||||
|
|||||||
@@ -11,23 +11,30 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 创建群组 -->
|
<!-- 创建/加入 Tab 卡片 -->
|
||||||
<view class="action-card">
|
<view class="action-card">
|
||||||
<text class="card-title">创建新群组</text>
|
<view class="tab-bar">
|
||||||
<view class="action-row">
|
<view class="tab-item" :class="{ active: actionTab === 'create' }" @tap="actionTab = 'create'">
|
||||||
<input class="action-input" v-model="newGroupName" placeholder="群组名称" maxlength="100" />
|
<text class="tab-text">创建群组</text>
|
||||||
<view class="action-btn" @tap="handleCreate">
|
|
||||||
<text class="action-btn-text">创建</text>
|
|
||||||
</view>
|
</view>
|
||||||
|
<view class="tab-item" :class="{ active: actionTab === 'join' }" @tap="actionTab = 'join'">
|
||||||
|
<text class="tab-text">加入群组</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 加入群组 -->
|
<!-- 创建 -->
|
||||||
<view class="action-card">
|
<view v-if="actionTab === 'create'" class="action-body">
|
||||||
<text class="card-title">加入群组</text>
|
<input class="action-input" v-model="newGroupName" placeholder="输入群组名称" maxlength="100" />
|
||||||
<view class="action-row">
|
<view class="action-btn" :class="{ disabled: saving }" @tap="handleCreate">
|
||||||
<input class="action-input" v-model="inviteCode" placeholder="输入邀请码" maxlength="6" />
|
<Icon name="plus" :size="28" color="#FFFFFF" />
|
||||||
<view class="action-btn" @tap="handleJoin">
|
<text class="action-btn-text">创建</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 加入 -->
|
||||||
|
<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>
|
<text class="action-btn-text">加入</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -53,15 +60,35 @@
|
|||||||
<Icon name="user" :size="32" color="#FF8C69" />
|
<Icon name="user" :size="32" color="#FF8C69" />
|
||||||
</view>
|
</view>
|
||||||
<view class="group-info">
|
<view class="group-info">
|
||||||
|
<view class="group-name-row">
|
||||||
<text class="group-name">{{ group.name }}</text>
|
<text class="group-name">{{ group.name }}</text>
|
||||||
<text class="group-meta">{{ group.member_count }} 人 · {{ group.role === 'owner' ? '群主' : '成员' }}</text>
|
<view v-if="group.role === 'owner'" class="role-badge owner">
|
||||||
<view class="invite-row" @tap="copyInviteCode(group.invite_code)">
|
<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-label">邀请码:</text>
|
||||||
<text class="invite-code">{{ group.invite_code }}</text>
|
<text class="invite-code" @tap="copyInviteCode(group.invite_code)">{{ group.invite_code }}</text>
|
||||||
<text class="invite-copy">复制</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>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="group-actions">
|
<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)">
|
<view v-if="group.role === 'owner'" class="group-btn dissolve" @tap="handleDissolve(group)">
|
||||||
<text class="group-btn-text dissolve-text">解散</text>
|
<text class="group-btn-text dissolve-text">解散</text>
|
||||||
</view>
|
</view>
|
||||||
@@ -71,6 +98,39 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -80,15 +140,24 @@ import { onShow } from '@dcloudio/uni-app'
|
|||||||
import { useGroupStore } from '@/stores/group'
|
import { useGroupStore } from '@/stores/group'
|
||||||
import { waitForReady } from '@/utils/app-ready'
|
import { waitForReady } from '@/utils/app-ready'
|
||||||
import { statusBarHeight, capsuleRight } from '@/utils/system'
|
import { statusBarHeight, capsuleRight } from '@/utils/system'
|
||||||
|
import { API_BASE } from '@/config'
|
||||||
import Icon from '@/components/Icon/Icon.vue'
|
import Icon from '@/components/Icon/Icon.vue'
|
||||||
|
import type { GroupMember, Group } from '@/api/group'
|
||||||
|
|
||||||
const groupStore = useGroupStore()
|
const groupStore = useGroupStore()
|
||||||
|
|
||||||
|
const actionTab = ref<'create' | 'join'>('create')
|
||||||
const newGroupName = ref('')
|
const newGroupName = ref('')
|
||||||
const inviteCode = ref('')
|
const inviteCode = ref('')
|
||||||
const saving = ref(false)
|
const saving = ref(false)
|
||||||
const initialLoaded = 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 () => {
|
onMounted(async () => {
|
||||||
await waitForReady()
|
await waitForReady()
|
||||||
await groupStore.fetchGroups()
|
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() {
|
async function handleCreate() {
|
||||||
if (saving.value) return
|
if (saving.value) return
|
||||||
const name = newGroupName.value.trim()
|
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({
|
uni.showModal({
|
||||||
title: '退出群组',
|
title: '退出群组',
|
||||||
content: `确定退出「${group.name}」?你在该群组的记录将回到个人账本。`,
|
content: `确定退出「${group.name}」?你在该群组的记录将回到个人账本。`,
|
||||||
@@ -175,7 +307,7 @@ function handleLeave(group: any) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleDissolve(group: any) {
|
function handleDissolve(group: Group) {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '解散群组',
|
title: '解散群组',
|
||||||
content: `确定解散「${group.name}」?群组记录将回到各成员的个人账本。`,
|
content: `确定解散「${group.name}」?群组记录将回到各成员的个人账本。`,
|
||||||
@@ -233,26 +365,48 @@ function handleDissolve(group: any) {
|
|||||||
color: #2D1B1B;
|
color: #2D1B1B;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Tab 卡片 */
|
||||||
.action-card {
|
.action-card {
|
||||||
margin: 24rpx 40rpx 0;
|
margin: 24rpx 40rpx 0;
|
||||||
padding: 32rpx 40rpx;
|
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 40rpx;
|
border-radius: 40rpx;
|
||||||
border: 2rpx solid #F0E0D6;
|
border: 2rpx solid #F0E0D6;
|
||||||
box-shadow: 4rpx 4rpx 12rpx rgba(45, 27, 27, 0.08);
|
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-size: 28rpx;
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
color: #2D1B1B;
|
color: #8B7E7E;
|
||||||
display: block;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-row {
|
.action-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 16rpx;
|
gap: 16rpx;
|
||||||
|
padding: 24rpx 32rpx 32rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-input {
|
.action-input {
|
||||||
@@ -274,6 +428,10 @@ function handleDissolve(group: any) {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
gap: 8rpx;
|
||||||
|
|
||||||
|
&.disabled { opacity: 0.5; }
|
||||||
|
&:active { opacity: 0.8; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-btn-text {
|
.action-btn-text {
|
||||||
@@ -283,6 +441,7 @@ function handleDissolve(group: any) {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 群组列表 */
|
||||||
.section-header {
|
.section-header {
|
||||||
padding: 40rpx 40rpx 16rpx;
|
padding: 40rpx 40rpx 16rpx;
|
||||||
}
|
}
|
||||||
@@ -313,7 +472,7 @@ function handleDissolve(group: any) {
|
|||||||
|
|
||||||
.group-item {
|
.group-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
padding: 28rpx 32rpx;
|
padding: 28rpx 32rpx;
|
||||||
margin-bottom: 16rpx;
|
margin-bottom: 16rpx;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
@@ -332,6 +491,7 @@ function handleDissolve(group: any) {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
margin-top: 4rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-info {
|
.group-info {
|
||||||
@@ -339,11 +499,32 @@ function handleDissolve(group: any) {
|
|||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.group-name-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.group-name {
|
.group-name {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #2D1B1B;
|
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 {
|
.group-meta {
|
||||||
@@ -353,13 +534,13 @@ function handleDissolve(group: any) {
|
|||||||
margin-top: 4rpx;
|
margin-top: 4rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 邀请码行 */
|
||||||
.invite-row {
|
.invite-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 8rpx;
|
margin-top: 12rpx;
|
||||||
padding: 8rpx 0;
|
gap: 8rpx;
|
||||||
min-height: 48rpx;
|
flex-wrap: wrap;
|
||||||
gap: 4rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.invite-label {
|
.invite-label {
|
||||||
@@ -374,25 +555,38 @@ function handleDissolve(group: any) {
|
|||||||
font-family: 'Fredoka', monospace;
|
font-family: 'Fredoka', monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.invite-copy {
|
.invite-action {
|
||||||
font-size: 22rpx;
|
display: flex;
|
||||||
color: #FF8C69;
|
align-items: center;
|
||||||
margin-left: 8rpx;
|
gap: 4rpx;
|
||||||
text-decoration: underline;
|
padding: 4rpx 12rpx;
|
||||||
|
background: #FFF8F0;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
|
||||||
|
&:active { background: #F0E0D6; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.invite-action-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #8B7E7E;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 操作按钮 */
|
||||||
.group-actions {
|
.group-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8rpx;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-btn {
|
.group-btn {
|
||||||
padding: 16rpx 28rpx;
|
padding: 12rpx 24rpx;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
min-height: 48rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
&.manage { background: #FFF0E6; }
|
||||||
&.leave { background: #FFF0E6; }
|
&.leave { background: #FFF0E6; }
|
||||||
&.dissolve { background: #FFE8E8; }
|
&.dissolve { background: #FFE8E8; }
|
||||||
|
|
||||||
@@ -402,8 +596,136 @@ function handleDissolve(group: any) {
|
|||||||
.group-btn-text {
|
.group-btn-text {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&.manage-text { color: #FF8C69; }
|
||||||
&.leave-text { color: #FF8C69; }
|
&.leave-text { color: #FF8C69; }
|
||||||
&.dissolve-text { color: #FF6B6B; }
|
&.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>
|
</style>
|
||||||
|
|||||||
BIN
client/src/static/icons/plus-white.png
Normal file
BIN
client/src/static/icons/plus-white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 B |
BIN
client/src/static/icons/refresh-gray.png
Normal file
BIN
client/src/static/icons/refresh-gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 B |
BIN
client/src/static/icons/refresh-orange.png
Normal file
BIN
client/src/static/icons/refresh-orange.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 B |
@@ -97,6 +97,32 @@ export const useGroupStore = defineStore('group', () => {
|
|||||||
await fetchGroups()
|
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() {
|
function init() {
|
||||||
const saved = uni.getStorageSync('xc:currentGroupId')
|
const saved = uni.getStorageSync('xc:currentGroupId')
|
||||||
@@ -108,6 +134,7 @@ export const useGroupStore = defineStore('group', () => {
|
|||||||
return {
|
return {
|
||||||
groups, loading, currentGroupId, currentGroup, isGroupMode,
|
groups, loading, currentGroupId, currentGroup, isGroupMode,
|
||||||
switchToPersonal, switchToGroup, refreshAll,
|
switchToPersonal, switchToGroup, refreshAll,
|
||||||
fetchGroups, createGroup, joinGroup, leaveGroup, deleteGroup, init
|
fetchGroups, createGroup, joinGroup, leaveGroup, deleteGroup,
|
||||||
|
refreshInviteCode, fetchGroupMembers, removeMember, init
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -19,7 +19,6 @@ export const useTransactionStore = defineStore('transaction', () => {
|
|||||||
})
|
})
|
||||||
transactions.value = data.list
|
transactions.value = data.list
|
||||||
total.value = data.total
|
total.value = data.total
|
||||||
currentPage.value = data.page
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
transactions.value = []
|
transactions.value = []
|
||||||
total.value = 0
|
total.value = 0
|
||||||
|
|||||||
@@ -208,4 +208,125 @@ router.delete('/:id', async (req: AuthRequest, res: Response) => {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/** 刷新邀请码(仅 owner) */
|
||||||
|
router.post('/:id/refresh-code', async (req: AuthRequest, res: Response) => {
|
||||||
|
try {
|
||||||
|
const groupId = req.params.id
|
||||||
|
|
||||||
|
// 验证是否是群主
|
||||||
|
const [groupRows] = await pool.query(
|
||||||
|
'SELECT created_by FROM `groups` WHERE id = ?',
|
||||||
|
[groupId]
|
||||||
|
)
|
||||||
|
const group = (groupRows as any[])[0]
|
||||||
|
if (!group) {
|
||||||
|
return res.status(404).json({ code: 40400, message: '群组不存在' })
|
||||||
|
}
|
||||||
|
if (group.created_by !== req.userId) {
|
||||||
|
return res.status(403).json({ code: 40300, message: '仅群主可刷新邀请码' })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成新的唯一邀请码
|
||||||
|
let inviteCode = generateInviteCode()
|
||||||
|
let attempts = 0
|
||||||
|
while (attempts < 10) {
|
||||||
|
const [existing] = await pool.query('SELECT id FROM `groups` WHERE invite_code = ?', [inviteCode])
|
||||||
|
if ((existing as any[]).length === 0) break
|
||||||
|
inviteCode = generateInviteCode()
|
||||||
|
attempts++
|
||||||
|
}
|
||||||
|
|
||||||
|
await pool.query('UPDATE `groups` SET invite_code = ? WHERE id = ?', [inviteCode, groupId])
|
||||||
|
res.json({ code: 0, data: { invite_code: inviteCode } })
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[Group] refresh-code error:', err)
|
||||||
|
res.status(500).json({ code: 50000, message: '服务器错误' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 获取成员列表 */
|
||||||
|
router.get('/:id/members', async (req: AuthRequest, res: Response) => {
|
||||||
|
try {
|
||||||
|
const groupId = req.params.id
|
||||||
|
|
||||||
|
// 验证用户是否是群组成员
|
||||||
|
const [memberCheck] = await pool.query(
|
||||||
|
'SELECT id FROM group_members WHERE group_id = ? AND user_id = ?',
|
||||||
|
[groupId, req.userId]
|
||||||
|
)
|
||||||
|
if ((memberCheck as any[]).length === 0) {
|
||||||
|
return res.status(403).json({ code: 40300, message: '无权访问此群组' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const [members] = await pool.query(
|
||||||
|
`SELECT gm.user_id, gm.role, gm.created_at as joined_at,
|
||||||
|
u.nickname, u.avatar_url
|
||||||
|
FROM group_members gm
|
||||||
|
LEFT JOIN users u ON gm.user_id = u.id
|
||||||
|
WHERE gm.group_id = ?
|
||||||
|
ORDER BY gm.role DESC, gm.created_at ASC`,
|
||||||
|
[groupId]
|
||||||
|
)
|
||||||
|
|
||||||
|
res.json({ code: 0, data: members })
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[Group] members error:', err)
|
||||||
|
res.status(500).json({ code: 50000, message: '服务器错误' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/** 移除成员(仅 owner) */
|
||||||
|
router.delete('/:id/members/:userId', async (req: AuthRequest, res: Response) => {
|
||||||
|
try {
|
||||||
|
const groupId = req.params.id
|
||||||
|
const targetUserId = Number(req.params.userId)
|
||||||
|
|
||||||
|
// 不能移除自己
|
||||||
|
if (targetUserId === req.userId) {
|
||||||
|
return res.status(400).json({ code: 40001, message: '不能移除自己' })
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证是否是群主
|
||||||
|
const [groupRows] = await pool.query(
|
||||||
|
'SELECT created_by FROM `groups` WHERE id = ?',
|
||||||
|
[groupId]
|
||||||
|
)
|
||||||
|
const group = (groupRows as any[])[0]
|
||||||
|
if (!group) {
|
||||||
|
return res.status(404).json({ code: 40400, message: '群组不存在' })
|
||||||
|
}
|
||||||
|
if (group.created_by !== req.userId) {
|
||||||
|
return res.status(403).json({ code: 40300, message: '仅群主可移除成员' })
|
||||||
|
}
|
||||||
|
|
||||||
|
const conn = await pool.getConnection()
|
||||||
|
try {
|
||||||
|
await conn.beginTransaction()
|
||||||
|
|
||||||
|
// 清除该成员在群组的记录标签
|
||||||
|
await conn.query(
|
||||||
|
'UPDATE transactions SET group_id = NULL WHERE user_id = ? AND group_id = ?',
|
||||||
|
[targetUserId, groupId]
|
||||||
|
)
|
||||||
|
|
||||||
|
// 删除成员关系
|
||||||
|
await conn.query(
|
||||||
|
'DELETE FROM group_members WHERE group_id = ? AND user_id = ?',
|
||||||
|
[groupId, targetUserId]
|
||||||
|
)
|
||||||
|
|
||||||
|
await conn.commit()
|
||||||
|
res.json({ code: 0 })
|
||||||
|
} catch (err) {
|
||||||
|
await conn.rollback()
|
||||||
|
throw err
|
||||||
|
} finally {
|
||||||
|
conn.release()
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('[Group] remove member error:', err)
|
||||||
|
res.status(500).json({ code: 50000, message: '服务器错误' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
export default router
|
export default router
|
||||||
|
|||||||
Reference in New Issue
Block a user