feat(mobile): stage 3 - home, groups, notifications
- migrate HomeMobile.vue (status card, current session, groups, popular games)
- migrate GroupsMobile.vue (list + create/join popup + pull refresh)
- migrate NotificationsMobile.vue (invitations/join-requests tabs + app notifications)
- router: wire Home/MobileGroups/MobileNotifications mobile views
- verified: user/group/team/notification stores + groups/invitations APIs all match uat
note: event board NOT added to home (uat PC Home.vue doesn't integrate it either);
events will be handled in stage 11 group detail tab
build verified: vue-tsc + vite build pass
This commit is contained in:
锦麟 王
@@ -56,7 +56,7 @@ const routes: RouteRecordRaw[] = [
|
||||
name: 'Home',
|
||||
component: view(
|
||||
() => import('@/views/Home.vue'),
|
||||
mobilePlaceholder
|
||||
() => import('@/views-mobile/HomeMobile.vue')
|
||||
)
|
||||
},
|
||||
{
|
||||
@@ -64,7 +64,7 @@ const routes: RouteRecordRaw[] = [
|
||||
name: 'MobileGroups',
|
||||
component: view(
|
||||
() => import('@/views/Home.vue'), // 桌面端无此路由，回退首页
|
||||
mobilePlaceholder
|
||||
() => import('@/views-mobile/GroupsMobile.vue')
|
||||
)
|
||||
},
|
||||
{
|
||||
@@ -72,7 +72,7 @@ const routes: RouteRecordRaw[] = [
|
||||
name: 'MobileNotifications',
|
||||
component: view(
|
||||
() => import('@/views/Home.vue'),
|
||||
mobilePlaceholder
|
||||
() => import('@/views-mobile/NotificationsMobile.vue')
|
||||
)
|
||||
},
|
||||
{
|
||||
|
||||
@@ -0,0 +1,381 @@
|
||||
<!-- src/views-mobile/GroupsMobile.vue -->
|
||||
<!-- 手机端群组列表 + 创建/加入群组 -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { createGroup, searchGroups, joinGroup } from '@/api/groups'
|
||||
import pb from '@/api/pocketbase'
|
||||
import type { Group } from '@/types'
|
||||
import { showSuccessToast, showFailToast } from 'vant'
|
||||
|
||||
const router = useRouter()
|
||||
const groupStore = useGroupStore()
|
||||
|
||||
// 创建群组
|
||||
const showCreate = ref(false)
|
||||
const createForm = ref({ name: '', description: '', maxMembers: 20 })
|
||||
const createLoading = ref(false)
|
||||
|
||||
async function handleCreate() {
|
||||
if (!createForm.value.name.trim()) {
|
||||
showFailToast('请输入群组名称')
|
||||
return
|
||||
}
|
||||
createLoading.value = true
|
||||
try {
|
||||
// 名称查重（与桌面端一致）
|
||||
const existing = await pb.collection('groups').getList(1, 1, {
|
||||
filter: `name="${createForm.value.name.trim()}"`
|
||||
})
|
||||
if (existing.items.length > 0) {
|
||||
showFailToast('该群组名称已存在')
|
||||
createLoading.value = false
|
||||
return
|
||||
}
|
||||
const group = await createGroup({
|
||||
name: createForm.value.name.trim(),
|
||||
description: createForm.value.description.trim(),
|
||||
maxMembers: createForm.value.maxMembers
|
||||
})
|
||||
await groupStore.loadGroups()
|
||||
showCreate.value = false
|
||||
createForm.value = { name: '', description: '', maxMembers: 20 }
|
||||
showSuccessToast('创建成功')
|
||||
if (group?.id) {
|
||||
router.push({ name: 'GroupView', params: { id: group.id } })
|
||||
}
|
||||
} catch (error: any) {
|
||||
showFailToast(error.message || '创建失败')
|
||||
} finally {
|
||||
createLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 加入群组（搜索）
|
||||
const showJoin = ref(false)
|
||||
const searchKeyword = ref('')
|
||||
const searchResults = ref<Group[]>([])
|
||||
const searching = ref(false)
|
||||
|
||||
async function doSearch() {
|
||||
if (!searchKeyword.value.trim()) {
|
||||
searchResults.value = []
|
||||
return
|
||||
}
|
||||
searching.value = true
|
||||
try {
|
||||
searchResults.value = await searchGroups(searchKeyword.value.trim())
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
searching.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleJoin(groupId: string) {
|
||||
try {
|
||||
await joinGroup(groupId)
|
||||
await groupStore.loadGroups()
|
||||
showSuccessToast('加入成功')
|
||||
showJoin.value = false
|
||||
searchKeyword.value = ''
|
||||
searchResults.value = []
|
||||
router.push({ name: 'GroupView', params: { id: groupId } })
|
||||
} catch (error: any) {
|
||||
showFailToast(error.message || '加入失败')
|
||||
}
|
||||
}
|
||||
|
||||
function selectGroup(groupId: string) {
|
||||
groupStore.setCurrentGroup(groupId)
|
||||
router.push({ name: 'GroupView', params: { id: groupId } })
|
||||
}
|
||||
|
||||
// 下拉刷新
|
||||
async function onRefresh() {
|
||||
await groupStore.loadGroups()
|
||||
showSuccessToast('刷新成功')
|
||||
}
|
||||
|
||||
const refreshing = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="groups-mobile">
|
||||
<!-- 浮动操作按钮 -->
|
||||
<div class="fab-row">
|
||||
<van-button type="primary" round icon="plus" size="small" @click="showCreate = true">
|
||||
创建
|
||||
</van-button>
|
||||
<van-button type="default" round icon="search" size="small" @click="showJoin = true">
|
||||
加入
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
||||
<div v-if="groupStore.groups.length === 0" class="empty-state">
|
||||
<van-empty description="还没有群组">
|
||||
<van-button type="primary" round size="small" @click="showCreate = true">
|
||||
创建第一个群组
|
||||
</van-button>
|
||||
</van-empty>
|
||||
</div>
|
||||
|
||||
<div v-else class="group-list">
|
||||
<div
|
||||
v-for="group in groupStore.groups"
|
||||
:key="group.id"
|
||||
class="group-card"
|
||||
@click="selectGroup(group.id)"
|
||||
>
|
||||
<div class="group-main">
|
||||
<div class="group-name">{{ group.name }}</div>
|
||||
<div class="group-desc">{{ group.description || '暂无简介' }}</div>
|
||||
<div class="group-footer">
|
||||
<van-tag type="success" size="medium">{{ group.members?.length || 0 }} 人</van-tag>
|
||||
<span class="group-capacity">/{{ group.maxMembers || '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<van-icon name="arrow" class="group-arrow" />
|
||||
</div>
|
||||
</div>
|
||||
</van-pull-refresh>
|
||||
|
||||
<!-- 创建群组弹层 -->
|
||||
<van-popup
|
||||
v-model:show="showCreate"
|
||||
position="bottom"
|
||||
round
|
||||
closeable
|
||||
:style="{ height: '70%' }"
|
||||
>
|
||||
<div class="popup-content">
|
||||
<div class="popup-title">创建群组</div>
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="createForm.name"
|
||||
label="名称"
|
||||
placeholder="给群组起个名字"
|
||||
maxlength="50"
|
||||
required
|
||||
/>
|
||||
<van-field
|
||||
v-model="createForm.description"
|
||||
type="textarea"
|
||||
label="描述"
|
||||
placeholder="简单介绍这个群组"
|
||||
rows="2"
|
||||
maxlength="500"
|
||||
autosize
|
||||
/>
|
||||
<van-field name="stepper" label="最大成员数">
|
||||
<template #input>
|
||||
<van-stepper v-model="createForm.maxMembers" min="2" max="100" />
|
||||
</template>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
<div class="popup-actions">
|
||||
<van-button type="primary" block round :loading="createLoading" @click="handleCreate">
|
||||
创建
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<!-- 加入群组弹层 -->
|
||||
<van-popup
|
||||
v-model:show="showJoin"
|
||||
position="bottom"
|
||||
round
|
||||
closeable
|
||||
:style="{ height: '70%' }"
|
||||
>
|
||||
<div class="popup-content">
|
||||
<div class="popup-title">加入群组</div>
|
||||
<van-search
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索群组名称"
|
||||
shape="round"
|
||||
@search="doSearch"
|
||||
@clear="searchResults = []"
|
||||
/>
|
||||
<div v-if="searching" class="search-loading">
|
||||
<van-loading size="24px">搜索中...</van-loading>
|
||||
</div>
|
||||
<div v-else-if="searchResults.length === 0 && searchKeyword" class="search-empty">
|
||||
<van-empty description="未找到群组" image-size="80" />
|
||||
</div>
|
||||
<div v-else class="search-list">
|
||||
<div
|
||||
v-for="group in searchResults"
|
||||
:key="group.id"
|
||||
class="search-item"
|
||||
>
|
||||
<div class="search-info">
|
||||
<div class="search-name">{{ group.name }}</div>
|
||||
<div class="search-desc">{{ group.description || '暂无简介' }}</div>
|
||||
<div class="search-meta">{{ group.members?.length || 0 }}/{{ group.maxMembers }} 人</div>
|
||||
</div>
|
||||
<van-button
|
||||
type="primary"
|
||||
size="small"
|
||||
round
|
||||
@click="handleJoin(group.id)"
|
||||
>
|
||||
加入
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.groups-mobile {
|
||||
padding-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fab-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--gg-bg);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.group-list {
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.group-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--gg-bg-card);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 14px 16px;
|
||||
box-shadow: var(--gg-shadow);
|
||||
}
|
||||
|
||||
.group-card:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.group-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.group-desc {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-muted);
|
||||
margin: 4px 0 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.group-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.group-capacity {
|
||||
font-size: 12px;
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
.group-arrow {
|
||||
color: var(--gg-text-muted);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 弹层 */
|
||||
.popup-content {
|
||||
padding: 16px 0 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
padding: 8px 0 16px;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.popup-actions {
|
||||
padding: 20px 16px 0;
|
||||
}
|
||||
|
||||
.search-loading, .search-empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.search-list {
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: var(--gg-bg);
|
||||
border-radius: var(--gg-radius-sm);
|
||||
}
|
||||
|
||||
.search-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.search-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.search-desc {
|
||||
font-size: 12px;
|
||||
color: var(--gg-text-muted);
|
||||
margin: 2px 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.search-meta {
|
||||
font-size: 11px;
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,463 @@
|
||||
<!-- src/views-mobile/HomeMobile.vue -->
|
||||
<!-- 手机端首页：状态 + 当前组队 + 我的群组 + 热门游戏 -->
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useTeamStore } from '@/stores/team'
|
||||
import { getPopularGames } from '@/api/games'
|
||||
import type { Game } from '@/types'
|
||||
import { UserStatusMap } from '@/types'
|
||||
import { showSuccessToast } from 'vant'
|
||||
|
||||
const router = useRouter()
|
||||
const groupStore = useGroupStore()
|
||||
const userStore = useUserStore()
|
||||
const teamStore = useTeamStore()
|
||||
|
||||
const popularGames = ref<Game[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
const statusText = computed(() => UserStatusMap[userStore.userStatus] || '未知')
|
||||
|
||||
const hasNoGroup = computed(() => groupStore.groups.length === 0)
|
||||
const hasSession = computed(() => !!teamStore.currentSession)
|
||||
|
||||
onMounted(async () => {
|
||||
await loadPopularGames()
|
||||
})
|
||||
|
||||
async function loadPopularGames() {
|
||||
try {
|
||||
loading.value = true
|
||||
popularGames.value = await getPopularGames(10)
|
||||
} catch (error) {
|
||||
console.error('加载热门游戏失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectGroup(groupId: string) {
|
||||
groupStore.setCurrentGroup(groupId)
|
||||
router.push({ name: 'GroupView', params: { id: groupId } })
|
||||
}
|
||||
|
||||
// 一键切换状态（空闲/离开/工作中循环）
|
||||
const statusActions = [
|
||||
{ status: 'idle' as const, label: '空闲', icon: '🟢' },
|
||||
{ status: 'away' as const, label: '离开', icon: '⚫' },
|
||||
{ status: 'working' as const, label: '工作中', icon: '🔴' },
|
||||
]
|
||||
|
||||
const showStatusSheet = ref(false)
|
||||
|
||||
async function onStatusSelect(action: { status: any; label: string }) {
|
||||
showStatusSheet.value = false
|
||||
try {
|
||||
await userStore.setStatus(action.status)
|
||||
showSuccessToast(`已切换为${action.label}`)
|
||||
} catch (e: any) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
|
||||
function goCreateGroup() {
|
||||
router.push('/mobile-groups')
|
||||
}
|
||||
|
||||
function goSession() {
|
||||
const session = teamStore.currentSession
|
||||
if (session?.voiceRoom) {
|
||||
router.push({
|
||||
name: 'VoiceRoom',
|
||||
params: { groupId: session.sourceGroup, sessionId: session.id }
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="home-mobile">
|
||||
<!-- 用户状态卡片 -->
|
||||
<div class="status-card">
|
||||
<div class="status-info" @click="showStatusSheet = true">
|
||||
<img
|
||||
:src="userStore.user?.avatar || '/default-avatar.svg'"
|
||||
class="avatar"
|
||||
alt=""
|
||||
/>
|
||||
<div class="status-text">
|
||||
<div class="user-name">{{ userStore.user?.name || userStore.user?.username }}</div>
|
||||
<div class="user-status">
|
||||
<span class="status-dot" :class="`dot-${userStore.userStatus}`" />
|
||||
<span>{{ statusText }}</span>
|
||||
<span v-if="userStore.user?.statusNote" class="status-note">
|
||||
· {{ userStore.user.statusNote }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<van-icon name="arrow-down" class="status-arrow" />
|
||||
</div>
|
||||
<div class="quick-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-num">{{ userStore.user?.points ?? 0 }}</span>
|
||||
<span class="stat-label">积分</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-num">{{ groupStore.groups.length }}</span>
|
||||
<span class="stat-label">群组</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 当前组队卡片 -->
|
||||
<div v-if="hasSession" class="session-card" @click="goSession">
|
||||
<div class="session-header">
|
||||
<van-icon name="volume-o" class="session-icon" />
|
||||
<span class="session-title">当前组队</span>
|
||||
<van-tag type="success" size="medium">{{ teamStore.teamStatus }}</van-tag>
|
||||
</div>
|
||||
<div class="session-body">
|
||||
<div class="session-game">{{ teamStore.currentSession?.gameName }}</div>
|
||||
<div class="session-members">
|
||||
{{ teamStore.currentSession?.name }}
|
||||
· {{ teamStore.currentSession?.members?.length || 0 }} 人
|
||||
</div>
|
||||
</div>
|
||||
<div class="session-action">
|
||||
进入语音房 <van-icon name="arrow" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的群组 -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">我的群组</span>
|
||||
<span v-if="!hasNoGroup" class="section-more" @click="goCreateGroup">全部</span>
|
||||
</div>
|
||||
|
||||
<div v-if="hasNoGroup" class="empty-card">
|
||||
<van-empty description="还没有群组" image-size="80">
|
||||
<van-button type="primary" size="small" round @click="goCreateGroup">
|
||||
创建或加入群组
|
||||
</van-button>
|
||||
</van-empty>
|
||||
</div>
|
||||
|
||||
<div v-else class="group-scroll">
|
||||
<div
|
||||
v-for="group in groupStore.groups"
|
||||
:key="group.id"
|
||||
class="group-card"
|
||||
@click="selectGroup(group.id)"
|
||||
>
|
||||
<div class="group-name">{{ group.name }}</div>
|
||||
<div class="group-meta">{{ group.members?.length || 0 }} 人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 热门游戏 -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-title">热门游戏</span>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="loading-row">
|
||||
<van-loading size="24px">加载中...</van-loading>
|
||||
</div>
|
||||
|
||||
<div v-else-if="popularGames.length === 0" class="empty-row">
|
||||
<span class="empty-text">暂无热门游戏</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="games-scroll">
|
||||
<div
|
||||
v-for="game in popularGames"
|
||||
:key="game.id"
|
||||
class="game-card"
|
||||
>
|
||||
<img
|
||||
:src="game.cover || '/game-placeholder.svg'"
|
||||
:alt="game.name"
|
||||
class="game-cover"
|
||||
/>
|
||||
<div class="game-name">{{ game.name }}</div>
|
||||
<van-tag v-if="game.platform" plain size="medium">{{ game.platform }}</van-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态切换 ActionSheet -->
|
||||
<van-action-sheet
|
||||
v-model:show="showStatusSheet"
|
||||
title="切换状态"
|
||||
:actions="statusActions.map(a => ({ name: `${a.icon} ${a.label}`, status: a.status, label: a.label }))"
|
||||
@select="onStatusSelect"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-mobile {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* 状态卡片 */
|
||||
.status-card {
|
||||
background: var(--gg-bg-card);
|
||||
border-radius: var(--gg-radius-lg);
|
||||
padding: 16px;
|
||||
box-shadow: var(--gg-shadow);
|
||||
}
|
||||
|
||||
.status-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.status-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.user-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-secondary);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dot-idle { background: var(--gg-success); }
|
||||
.dot-in_team { background: var(--gg-info); }
|
||||
.dot-working { background: var(--gg-danger); }
|
||||
.dot-away { background: var(--gg-text-muted); }
|
||||
|
||||
.status-note {
|
||||
color: var(--gg-text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-arrow {
|
||||
color: var(--gg-text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.quick-stats {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--gg-border);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: var(--gg-primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 12px;
|
||||
color: var(--gg-text-muted);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 组队卡片 */
|
||||
.session-card {
|
||||
background: linear-gradient(135deg, var(--gg-primary), var(--gg-accent));
|
||||
border-radius: var(--gg-radius-lg);
|
||||
padding: 16px;
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.25);
|
||||
}
|
||||
|
||||
.session-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.session-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.session-body {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.session-game {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.session-members {
|
||||
font-size: 13px;
|
||||
opacity: 0.85;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.session-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 通用 section */
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.section-more {
|
||||
font-size: 13px;
|
||||
color: var(--gg-primary);
|
||||
}
|
||||
|
||||
.empty-card {
|
||||
background: var(--gg-bg-card);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.loading-row, .empty-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-muted);
|
||||
}
|
||||
|
||||
/* 群组横滑 */
|
||||
.group-scroll {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 4px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.group-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.group-card {
|
||||
flex-shrink: 0;
|
||||
width: 130px;
|
||||
padding: 14px;
|
||||
background: var(--gg-bg-card);
|
||||
border-radius: var(--gg-radius-md);
|
||||
box-shadow: var(--gg-shadow);
|
||||
}
|
||||
|
||||
.group-card:active {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.group-meta {
|
||||
font-size: 12px;
|
||||
color: var(--gg-text-muted);
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* 游戏横滑 */
|
||||
.games-scroll {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.games-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.game-card {
|
||||
flex-shrink: 0;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
width: 100px;
|
||||
height: 130px;
|
||||
border-radius: var(--gg-radius-md);
|
||||
object-fit: cover;
|
||||
background: var(--gg-bg-elevated);
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 12px;
|
||||
color: var(--gg-text);
|
||||
margin-top: 6px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,393 @@
|
||||
<!-- src/views-mobile/NotificationsMobile.vue -->
|
||||
<!-- 手机端通知页：站内通知 + 邀请/入群申请 -->
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useNotificationStore } from '@/stores/notification'
|
||||
import { respondInvitation } from '@/api/invitations'
|
||||
import { respondJoinRequest } from '@/api/groups'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { showSuccessToast, showFailToast, showConfirmDialog } from 'vant'
|
||||
import type { AppNotification } from '@/types'
|
||||
|
||||
const notificationStore = useNotificationStore()
|
||||
const groupStore = useGroupStore()
|
||||
|
||||
const activeTab = ref<'notifications' | 'invitations'>('invitations')
|
||||
|
||||
const notifications = computed(() => notificationStore.appNotifications)
|
||||
const invitations = computed(() => notificationStore.pendingInvitations)
|
||||
const joinRequests = computed(() => notificationStore.pendingJoinRequests)
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
await notificationStore.loadAppNotifications()
|
||||
await notificationStore.loadPendingInvitations()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// 通知操作
|
||||
async function onRead(n: AppNotification) {
|
||||
try {
|
||||
await notificationStore.markRead(n.id)
|
||||
} catch (e: any) {
|
||||
showFailToast('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function onReadAll() {
|
||||
try {
|
||||
await notificationStore.markAllRead()
|
||||
showSuccessToast('全部已读')
|
||||
} catch (e: any) {
|
||||
showFailToast('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function onDelete(n: AppNotification) {
|
||||
showConfirmDialog({
|
||||
title: '删除通知',
|
||||
message: '确定删除这条通知吗？'
|
||||
}).then(async () => {
|
||||
try {
|
||||
await notificationStore.removeNotification(n.id)
|
||||
showSuccessToast('已删除')
|
||||
} catch (e: any) {
|
||||
showFailToast('删除失败')
|
||||
}
|
||||
}).catch(() => {})
|
||||
}
|
||||
|
||||
// 通知类型图标/颜色
|
||||
function notifyIcon(type: string): string {
|
||||
const map: Record<string, string> = {
|
||||
poll_new: 'chart-trending-o',
|
||||
poll_deadline: 'clock-o',
|
||||
poll_result: 'certificate',
|
||||
team_invite: 'volume-o',
|
||||
team_starting: 'fire-o',
|
||||
join_request: 'add-o',
|
||||
member_joined: 'user-o'
|
||||
}
|
||||
return map[type] || 'bell'
|
||||
}
|
||||
|
||||
// 邀请操作
|
||||
const invitationLoading = ref<string | null>(null)
|
||||
|
||||
async function handleInvitation(invitationId: string, response: 'accepted' | 'rejected') {
|
||||
invitationLoading.value = invitationId
|
||||
try {
|
||||
await respondInvitation(invitationId, response)
|
||||
notificationStore.removeInvitation(invitationId)
|
||||
showSuccessToast(response === 'accepted' ? '已接受' : '已拒绝')
|
||||
} catch (e: any) {
|
||||
showFailToast(e.message || '操作失败')
|
||||
} finally {
|
||||
invitationLoading.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// 入群申请操作
|
||||
const requestLoading = ref<string | null>(null)
|
||||
|
||||
async function handleJoinRequest(requestId: string, status: 'approved' | 'rejected') {
|
||||
requestLoading.value = requestId
|
||||
try {
|
||||
await respondJoinRequest(requestId, status)
|
||||
notificationStore.removeJoinRequest(requestId)
|
||||
await groupStore.loadGroups()
|
||||
showSuccessToast(status === 'approved' ? '已通过' : '已拒绝')
|
||||
} catch (e: any) {
|
||||
showFailToast(e.message || '操作失败')
|
||||
} finally {
|
||||
requestLoading.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// 时间格式化
|
||||
function timeAgo(dateStr: string): string {
|
||||
const diff = Date.now() - new Date(dateStr).getTime()
|
||||
const min = Math.floor(diff / 60000)
|
||||
if (min < 1) return '刚刚'
|
||||
if (min < 60) return `${min}分钟前`
|
||||
const hour = Math.floor(min / 60)
|
||||
if (hour < 24) return `${hour}小时前`
|
||||
const day = Math.floor(hour / 24)
|
||||
if (day < 30) return `${day}天前`
|
||||
return new Date(dateStr).toLocaleDateString('zh-CN')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="notifications-mobile">
|
||||
<van-tabs v-model:active="activeTab" sticky>
|
||||
<van-tab title="邀请/申请" name="invitations">
|
||||
<div v-if="invitations.length === 0 && joinRequests.length === 0" class="empty-state">
|
||||
<van-empty description="暂无待处理邀请" image-size="100" />
|
||||
</div>
|
||||
|
||||
<!-- 组队邀请 -->
|
||||
<div v-if="invitations.length > 0" class="section-block">
|
||||
<div class="block-title">组队邀请</div>
|
||||
<div
|
||||
v-for="inv in invitations"
|
||||
:key="inv.id"
|
||||
class="invite-card"
|
||||
>
|
||||
<div class="invite-info">
|
||||
<img
|
||||
:src="inv.expand?.from?.avatar || '/default-avatar.svg'"
|
||||
class="invite-avatar"
|
||||
alt=""
|
||||
/>
|
||||
<div class="invite-text">
|
||||
<div class="invite-from">{{ inv.expand?.from?.name || inv.expand?.from?.username || '未知' }}</div>
|
||||
<div class="invite-detail">
|
||||
邀请你组队：{{ inv.expand?.teamSession?.gameName || '游戏' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invite-actions">
|
||||
<van-button
|
||||
type="primary"
|
||||
size="small"
|
||||
round
|
||||
:loading="invitationLoading === inv.id"
|
||||
@click="handleInvitation(inv.id, 'accepted')"
|
||||
>
|
||||
接受
|
||||
</van-button>
|
||||
<van-button
|
||||
size="small"
|
||||
round
|
||||
:loading="invitationLoading === inv.id"
|
||||
@click="handleInvitation(inv.id, 'rejected')"
|
||||
>
|
||||
拒绝
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 入群申请 -->
|
||||
<div v-if="joinRequests.length > 0" class="section-block">
|
||||
<div class="block-title">入群申请</div>
|
||||
<div
|
||||
v-for="req in joinRequests"
|
||||
:key="req.id"
|
||||
class="invite-card"
|
||||
>
|
||||
<div class="invite-info">
|
||||
<img
|
||||
:src="req.expand?.user?.avatar || '/default-avatar.svg'"
|
||||
class="invite-avatar"
|
||||
alt=""
|
||||
/>
|
||||
<div class="invite-text">
|
||||
<div class="invite-from">{{ req.expand?.user?.name || req.expand?.user?.username || '未知' }}</div>
|
||||
<div class="invite-detail">
|
||||
申请加入：{{ req.expand?.group?.name || '群组' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invite-actions">
|
||||
<van-button
|
||||
type="primary"
|
||||
size="small"
|
||||
round
|
||||
:loading="requestLoading === req.id"
|
||||
@click="handleJoinRequest(req.id, 'approved')"
|
||||
>
|
||||
通过
|
||||
</van-button>
|
||||
<van-button
|
||||
size="small"
|
||||
round
|
||||
:loading="requestLoading === req.id"
|
||||
@click="handleJoinRequest(req.id, 'rejected')"
|
||||
>
|
||||
拒绝
|
||||
</van-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
|
||||
<van-tab title="通知" name="notifications">
|
||||
<div v-if="notifications.length > 0" class="read-all-bar">
|
||||
<van-button plain hairline size="small" round icon="success" @click="onReadAll">
|
||||
全部标为已读
|
||||
</van-button>
|
||||
</div>
|
||||
|
||||
<div v-if="notifications.length === 0" class="empty-state">
|
||||
<van-empty description="暂无通知" image-size="100" />
|
||||
</div>
|
||||
|
||||
<div v-else class="notify-list">
|
||||
<van-swipe-cell
|
||||
v-for="n in notifications"
|
||||
:key="n.id"
|
||||
>
|
||||
<div
|
||||
class="notify-item"
|
||||
:class="{ 'notify-unread': !n.read }"
|
||||
@click="!n.read && onRead(n)"
|
||||
>
|
||||
<van-icon :name="notifyIcon(n.type)" class="notify-icon" size="22" />
|
||||
<div class="notify-body">
|
||||
<div class="notify-title">{{ n.title }}</div>
|
||||
<div v-if="n.content" class="notify-content">{{ n.content }}</div>
|
||||
<div class="notify-time">{{ timeAgo(n.created) }}</div>
|
||||
</div>
|
||||
<span v-if="!n.read" class="unread-dot" />
|
||||
</div>
|
||||
<template #right>
|
||||
<van-button square type="danger" text="删除" class="delete-btn" @click="onDelete(n)" />
|
||||
</template>
|
||||
</van-swipe-cell>
|
||||
</div>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.notifications-mobile {
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.read-all-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.section-block {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.block-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text-muted);
|
||||
margin-bottom: 8px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.invite-card {
|
||||
background: var(--gg-bg-card);
|
||||
border-radius: var(--gg-radius-md);
|
||||
padding: 14px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: var(--gg-shadow);
|
||||
}
|
||||
|
||||
.invite-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.invite-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.invite-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.invite-from {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.invite-detail {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-secondary);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.invite-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* 通知列表 */
|
||||
.notify-list {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.notify-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
background: var(--gg-bg-card);
|
||||
padding: 14px;
|
||||
border-radius: var(--gg-radius-sm);
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.notify-unread {
|
||||
background: rgba(5, 150, 105, 0.04);
|
||||
}
|
||||
|
||||
.notify-icon {
|
||||
color: var(--gg-primary);
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.notify-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.notify-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--gg-text);
|
||||
}
|
||||
|
||||
.notify-content {
|
||||
font-size: 13px;
|
||||
color: var(--gg-text-secondary);
|
||||
margin-top: 4px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.notify-time {
|
||||
font-size: 11px;
|
||||
color: var(--gg-text-muted);
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.unread-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--gg-danger);
|
||||
flex-shrink: 0;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user