feat: add GameGroup2 project with frontend and backend
- Add .gitignore for Node.js and PocketBase projects - Add frontend (Vue 3 + Vite + TypeScript) - Add backend (PocketBase) - Add deployment scripts and Docker compose configs Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
congsh
@@ -0,0 +1,27 @@
|
||||
<!-- src/App.vue -->
|
||||
<script setup lang="ts">
|
||||
// App 根组件
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-view />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
// src/api/games.ts
|
||||
import pb from './pocketbase'
|
||||
import type { Game, GamePlatform } from '@/types'
|
||||
|
||||
// 获取游戏列表
|
||||
export async function getGames(options?: {
|
||||
page?: number
|
||||
limit?: number
|
||||
platform?: GamePlatform
|
||||
search?: string
|
||||
}): Promise<{ items: Game[], total: number }> {
|
||||
const { page = 1, limit = 20, platform, search } = options || {}
|
||||
|
||||
let filter = ''
|
||||
if (platform) {
|
||||
filter = `platform="${platform}"`
|
||||
}
|
||||
if (search) {
|
||||
const searchFilter = `name ~ "${search}"`
|
||||
filter = filter ? `${filter} && ${searchFilter}` : searchFilter
|
||||
}
|
||||
|
||||
const result = await pb.collection('games').getList(page, limit, {
|
||||
filter,
|
||||
sort: '-popularCount'
|
||||
})
|
||||
|
||||
return {
|
||||
items: result.items as unknown as Game[],
|
||||
total: result.totalItems
|
||||
}
|
||||
}
|
||||
|
||||
// 获取热门游戏
|
||||
export async function getPopularGames(limit = 10): Promise<Game[]> {
|
||||
const result = await pb.collection('games').getList(1, limit, {
|
||||
sort: '-popularCount'
|
||||
})
|
||||
|
||||
return result.items as unknown as Game[]
|
||||
}
|
||||
|
||||
// 搜索游戏
|
||||
export async function searchGames(query: string, limit = 20): Promise<Game[]> {
|
||||
if (!query.trim()) return []
|
||||
|
||||
const result = await pb.collection('games').getList(1, limit, {
|
||||
filter: `name ~ "${query}"`,
|
||||
sort: '-popularCount'
|
||||
})
|
||||
|
||||
return result.items as unknown as Game[]
|
||||
}
|
||||
|
||||
// 添加游戏（需要管理员权限）
|
||||
export async function addGame(data: {
|
||||
name: string
|
||||
platform: GamePlatform
|
||||
tags?: string[]
|
||||
cover?: string
|
||||
}) {
|
||||
return pb.collection('games').create(data)
|
||||
}
|
||||
|
||||
// 更新游戏热度
|
||||
export async function incrementGamePopularity(gameId: string) {
|
||||
const game = await pb.collection('games').getOne(gameId)
|
||||
return pb.collection('games').update(gameId, {
|
||||
popularCount: (game.popularCount || 0) + 1
|
||||
})
|
||||
}
|
||||
|
||||
// 获取游戏详情
|
||||
export async function getGame(gameId: string): Promise<Game> {
|
||||
return pb.collection('games').getOne(gameId) as unknown as Game
|
||||
}
|
||||
|
||||
// 按平台获取游戏
|
||||
export async function getGamesByPlatform(platform: GamePlatform): Promise<Game[]> {
|
||||
const result = await pb.collection('games').getList(1, 50, {
|
||||
filter: `platform="${platform}"`,
|
||||
sort: '-popularCount'
|
||||
})
|
||||
|
||||
return result.items as unknown as Game[]
|
||||
}
|
||||
|
||||
// 获取所有平台
|
||||
export function getAllPlatforms(): GamePlatform[] {
|
||||
return ['PC', 'PS5', 'Xbox', 'Switch', 'Mobile']
|
||||
}
|
||||
|
||||
// 订阅游戏变更
|
||||
export function subscribeGames(callback: (game: Game) => void) {
|
||||
return pb.collection('games').subscribe('*', (payload) => {
|
||||
callback(payload.record as unknown as Game)
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
// src/api/groups.ts
|
||||
import pb from './pocketbase'
|
||||
import type { Group } from '@/types'
|
||||
|
||||
// 创建群组
|
||||
export async function createGroup(data: {
|
||||
name: string
|
||||
description: string
|
||||
maxMembers: number
|
||||
}) {
|
||||
const user = pb.authStore.model
|
||||
if (!user) throw new Error('未登录')
|
||||
|
||||
return pb.collection('groups').create({
|
||||
...data,
|
||||
owner: user.id,
|
||||
members: [user.id]
|
||||
})
|
||||
}
|
||||
|
||||
// 获取用户的群组列表
|
||||
export async function getUserGroups(): Promise<Group[]> {
|
||||
const user = pb.authStore.model
|
||||
if (!user) return []
|
||||
|
||||
// 通过 members 字段过滤
|
||||
return pb.collection('groups').getList(1, 50, {
|
||||
filter: `members ~ "${user.id}"`
|
||||
}).then(res => res.items as unknown as Group[])
|
||||
}
|
||||
|
||||
// 获取群组详情
|
||||
export async function getGroup(groupId: string): Promise<Group> {
|
||||
return pb.collection('groups').getOne(groupId, {
|
||||
expand: 'members'
|
||||
}) as unknown as Group
|
||||
}
|
||||
|
||||
// 加入群组
|
||||
export async function joinGroup(groupId: string) {
|
||||
const user = pb.authStore.model
|
||||
if (!user) throw new Error('未登录')
|
||||
|
||||
const group = await pb.collection('groups').getOne(groupId)
|
||||
const members = group.members as string[]
|
||||
|
||||
if (members.length >= group.maxMembers) {
|
||||
throw new Error('群组已满')
|
||||
}
|
||||
|
||||
if (members.includes(user.id)) {
|
||||
throw new Error('已是群组成员')
|
||||
}
|
||||
|
||||
return pb.collection('groups').update(groupId, {
|
||||
members: [...members, user.id]
|
||||
})
|
||||
}
|
||||
|
||||
// 退出群组
|
||||
export async function leaveGroup(groupId: string) {
|
||||
const user = pb.authStore.model
|
||||
if (!user) throw new Error('未登录')
|
||||
|
||||
const group = await pb.collection('groups').getOne(groupId)
|
||||
|
||||
if (group.owner === user.id) {
|
||||
throw new Error('群主不能退出群组，请先转让群主或解散群组')
|
||||
}
|
||||
|
||||
const members = group.members as string[]
|
||||
return pb.collection('groups').update(groupId, {
|
||||
members: members.filter(id => id !== user.id)
|
||||
})
|
||||
}
|
||||
|
||||
// 解散群组
|
||||
export async function dissolveGroup(groupId: string) {
|
||||
const user = pb.authStore.model
|
||||
if (!user) throw new Error('未登录')
|
||||
|
||||
const group = await pb.collection('groups').getOne(groupId)
|
||||
|
||||
if (group.owner !== user.id) {
|
||||
throw new Error('只有群主可以解散群组')
|
||||
}
|
||||
|
||||
return pb.collection('groups').delete(groupId)
|
||||
}
|
||||
|
||||
// 订阅群组变更
|
||||
export function subscribeGroup(groupId: string, callback: (group: Group) => void) {
|
||||
return pb.collection('groups').subscribe('*', (payload) => {
|
||||
if (payload.record.id === groupId) {
|
||||
callback(payload.record as unknown as Group)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取群组成员
|
||||
export async function getGroupMembers(groupId: string) {
|
||||
const group = await getGroup(groupId)
|
||||
const members = group.members as string[]
|
||||
|
||||
// 批量获取用户信息
|
||||
const users = await pb.collection('users').getList(1, 50, {
|
||||
filter: members.map(id => `id="${id}"`).join(' || ')
|
||||
})
|
||||
|
||||
return users.items
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
// src/api/invitations.ts
|
||||
import pb from './pocketbase'
|
||||
import type { Invitation, InviteStatus } from '@/types'
|
||||
import { joinTeamSession } from './sessions'
|
||||
import { updateUserStatus } from './users'
|
||||
|
||||
// 发送邀请
|
||||
export async function sendInvitation(data: {
|
||||
to: string
|
||||
teamSession: string
|
||||
}) {
|
||||
const user = pb.authStore.model
|
||||
if (!user) throw new Error('未登录')
|
||||
|
||||
// 检查是否已有待处理邀请
|
||||
const existing = await pb.collection('invitations').getList(1, 1, {
|
||||
filter: `from="${user.id}" && to="${data.to}" && teamSession="${data.teamSession}" && status="pending"`
|
||||
})
|
||||
|
||||
if (existing.items.length > 0) {
|
||||
throw new Error('已有待处理的邀请')
|
||||
}
|
||||
|
||||
return pb.collection('invitations').create({
|
||||
...data,
|
||||
from: user.id,
|
||||
status: 'pending'
|
||||
})
|
||||
}
|
||||
|
||||
// 批量发送邀请
|
||||
export async function sendBulkInvitations(recipients: string[], teamSessionId: string) {
|
||||
const promises = recipients.map(to =>
|
||||
sendInvitation({ to, teamSession: teamSessionId })
|
||||
)
|
||||
|
||||
return Promise.allSettled(promises)
|
||||
}
|
||||
|
||||
// 获取用户的待处理邀请
|
||||
export async function getPendingInvitations(): Promise<Invitation[]> {
|
||||
const user = pb.authStore.model
|
||||
if (!user) return []
|
||||
|
||||
const result = await pb.collection('invitations').getList(1, 50, {
|
||||
filter: `to="${user.id}" && status="pending"`,
|
||||
sort: '-created',
|
||||
expand: 'from,teamSession'
|
||||
})
|
||||
|
||||
return result.items as unknown as Invitation[]
|
||||
}
|
||||
|
||||
// 获取我发送的邀请
|
||||
export async function getMySentInvitations(): Promise<Invitation[]> {
|
||||
const user = pb.authStore.model
|
||||
if (!user) return []
|
||||
|
||||
const result = await pb.collection('invitations').getList(1, 50, {
|
||||
filter: `from="${user.id}"`,
|
||||
sort: '-created',
|
||||
expand: 'to,teamSession'
|
||||
})
|
||||
|
||||
return result.items as unknown as Invitation[]
|
||||
}
|
||||
|
||||
// 响应邀请
|
||||
export async function respondInvitation(
|
||||
invitationId: string,
|
||||
response: 'accepted' | 'rejected',
|
||||
rejectReason?: string
|
||||
) {
|
||||
const user = pb.authStore.model
|
||||
if (!user) throw new Error('未登录')
|
||||
|
||||
const invitation = await pb.collection('invitations').getOne(invitationId)
|
||||
|
||||
if (invitation.to !== user.id) {
|
||||
throw new Error('无权操作此邀请')
|
||||
}
|
||||
|
||||
const updateData: Partial<Invitation> = {
|
||||
status: response as InviteStatus,
|
||||
respondedAt: new Date().toISOString()
|
||||
}
|
||||
|
||||
if (response === 'rejected' && rejectReason) {
|
||||
updateData.rejectReason = rejectReason
|
||||
}
|
||||
|
||||
// 更新邀请状态
|
||||
await pb.collection('invitations').update(invitationId, updateData)
|
||||
|
||||
// 如果接受，加入临时小组
|
||||
if (response === 'accepted') {
|
||||
await joinTeamSession(invitation.teamSession)
|
||||
// 更新用户状态
|
||||
await updateUserStatus('in_team')
|
||||
}
|
||||
|
||||
return updateData
|
||||
}
|
||||
|
||||
// 订阅邀请变更
|
||||
export function subscribeInvitations(callback: (invitation: Invitation) => void) {
|
||||
const user = pb.authStore.model
|
||||
if (!user) return () => {}
|
||||
|
||||
return pb.collection('invitations').subscribe('*', (payload) => {
|
||||
const invite = payload.record as unknown as Invitation
|
||||
if (invite.to === user.id || invite.from === user.id) {
|
||||
callback(invite)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
// src/api/pocketbase.ts
|
||||
import PocketBase from 'pocketbase'
|
||||
|
||||
const pbUrl = import.meta.env.VITE_PB_URL || '/api'
|
||||
|
||||
export const pb = new PocketBase(pbUrl)
|
||||
|
||||
// 认证状态持久化
|
||||
pb.authStore.loadFromCookie(document.cookie)
|
||||
|
||||
// 保存认证状态到 cookie
|
||||
pb.authStore.onChange(() => {
|
||||
document.cookie = pb.authStore.exportToCookie({ httpOnly: false })
|
||||
})
|
||||
|
||||
// 获取当前用户
|
||||
export function getCurrentUser() {
|
||||
return pb.authStore.model
|
||||
}
|
||||
|
||||
// 检查是否已登录
|
||||
export function isAuthenticated(): boolean {
|
||||
return pb.authStore.isValid
|
||||
}
|
||||
|
||||
// 登出
|
||||
export function logout() {
|
||||
pb.authStore.clear()
|
||||
window.location.href = '/login'
|
||||
}
|
||||
|
||||
export default pb
|
||||
@@ -0,0 +1,92 @@
|
||||
// src/api/sessions.ts
|
||||
import pb from './pocketbase'
|
||||
import type { TeamSession, TeamStatus } from '@/types'
|
||||
|
||||
// 创建临时小组
|
||||
export async function createTeamSession(data: {
|
||||
sourceGroup: string
|
||||
name: string
|
||||
gameName: string
|
||||
members: string[]
|
||||
}): Promise<TeamSession> {
|
||||
return pb.collection('teamSessions').create({
|
||||
...data,
|
||||
status: 'recruiting'
|
||||
}) as unknown as TeamSession
|
||||
}
|
||||
|
||||
// 获取用户的活跃临时小组
|
||||
export async function getActiveTeamSession(): Promise<TeamSession | null> {
|
||||
const user = pb.authStore.model
|
||||
if (!user) return null
|
||||
|
||||
const result = await pb.collection('teamSessions').getList(1, 1, {
|
||||
filter: `members ~ "${user.id}" && status != "dissolved" && status != "finished"`,
|
||||
sort: '-created'
|
||||
})
|
||||
|
||||
return (result.items[0] as unknown as TeamSession) || null
|
||||
}
|
||||
|
||||
// 获取群组的临时小组列表
|
||||
export async function getGroupTeamSessions(groupId: string): Promise<TeamSession[]> {
|
||||
const result = await pb.collection('teamSessions').getList(1, 20, {
|
||||
filter: `sourceGroup="${groupId}"`,
|
||||
sort: '-created'
|
||||
})
|
||||
|
||||
return result.items as unknown as TeamSession[]
|
||||
}
|
||||
|
||||
// 更新临时小组状态
|
||||
export async function updateTeamStatus(sessionId: string, status: TeamStatus): Promise<TeamSession> {
|
||||
const updateData: Partial<TeamSession> = { status }
|
||||
|
||||
if (status === 'dissolved') {
|
||||
updateData.dissolvedAt = new Date().toISOString()
|
||||
}
|
||||
|
||||
return pb.collection('teamSessions').update(sessionId, updateData) as unknown as TeamSession
|
||||
}
|
||||
|
||||
// 结束游戏（解散临时小组）
|
||||
export async function endGame(sessionId: string) {
|
||||
const session = await pb.collection('teamSessions').getOne(sessionId)
|
||||
|
||||
// 将所有成员状态恢复为 idle
|
||||
const members = session.members as string[]
|
||||
const updatePromises = members.map(userId =>
|
||||
pb.collection('users').update(userId, { status: 'idle' })
|
||||
)
|
||||
|
||||
await Promise.all(updatePromises)
|
||||
|
||||
// 解散临时小组
|
||||
return updateTeamStatus(sessionId, 'dissolved')
|
||||
}
|
||||
|
||||
// 加入临时小组
|
||||
export async function joinTeamSession(sessionId: string) {
|
||||
const user = pb.authStore.model
|
||||
if (!user) throw new Error('未登录')
|
||||
|
||||
const session = await pb.collection('teamSessions').getOne(sessionId) as { members: string[] }
|
||||
const members = session.members as string[]
|
||||
|
||||
if (members.includes(user.id)) {
|
||||
throw new Error('已在小组中')
|
||||
}
|
||||
|
||||
return pb.collection('teamSessions').update(sessionId, {
|
||||
members: [...members, user.id]
|
||||
})
|
||||
}
|
||||
|
||||
// 订阅临时小组变更
|
||||
export function subscribeTeamSession(sessionId: string, callback: (session: TeamSession) => void) {
|
||||
return pb.collection('teamSessions').subscribe('*', (payload) => {
|
||||
if (payload.record.id === sessionId) {
|
||||
callback(payload.record as unknown as TeamSession)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
// src/api/users.ts
|
||||
import pb, { getCurrentUser } from './pocketbase'
|
||||
import type { User, UserStatus, WorkSchedule } from '@/types'
|
||||
|
||||
// 更新用户状态
|
||||
export async function updateUserStatus(status: UserStatus, note?: string) {
|
||||
const user = getCurrentUser()
|
||||
if (!user) throw new Error('未登录')
|
||||
|
||||
return pb.collection('users').update(user.id, {
|
||||
status,
|
||||
statusNote: note || ''
|
||||
})
|
||||
}
|
||||
|
||||
// 更新工作时间设置
|
||||
export async function updateWorkSchedule(schedule: WorkSchedule) {
|
||||
const user = getCurrentUser()
|
||||
if (!user) throw new Error('未登录')
|
||||
|
||||
// 计算下次工作时间
|
||||
const nextWorkTime = calculateNextWorkTime(schedule.workdays, schedule.workStartTime)
|
||||
|
||||
return pb.collection('users').update(user.id, {
|
||||
workdays: schedule.workdays,
|
||||
workStartTime: schedule.workStartTime,
|
||||
nextWorkTime
|
||||
})
|
||||
}
|
||||
|
||||
// 计算下次工作时间戳
|
||||
function calculateNextWorkTime(workdays: number[], startTime: string): number {
|
||||
const now = new Date()
|
||||
const [hours, minutes] = startTime.split(':').map(Number)
|
||||
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const checkDate = new Date(now)
|
||||
checkDate.setDate(now.getDate() + i)
|
||||
checkDate.setHours(hours, minutes, 0, 0)
|
||||
|
||||
const dayOfWeek = checkDate.getDay() || 7 // 转换为 1-7 (周一到周日)
|
||||
|
||||
if (workdays.includes(dayOfWeek)) {
|
||||
// 如果是今天，检查时间是否已过
|
||||
if (i === 0 && checkDate <= now) {
|
||||
continue
|
||||
}
|
||||
return Math.floor(checkDate.getTime() / 1000)
|
||||
}
|
||||
}
|
||||
|
||||
// 默认返回下周
|
||||
const nextWeek = new Date(now)
|
||||
nextWeek.setDate(now.getDate() + 7)
|
||||
nextWeek.setHours(hours, minutes, 0, 0)
|
||||
return Math.floor(nextWeek.getTime() / 1000)
|
||||
}
|
||||
|
||||
// 获取用户信息
|
||||
export async function getUser(userId: string): Promise<User> {
|
||||
return pb.collection('users').getOne(userId)
|
||||
}
|
||||
|
||||
// 更新用户资料
|
||||
export async function updateProfile(data: Partial<Pick<User, 'username' | 'avatar'>>) {
|
||||
const user = getCurrentUser()
|
||||
if (!user) throw new Error('未登录')
|
||||
|
||||
return pb.collection('users').update(user.id, data)
|
||||
}
|
||||
|
||||
// 订阅用户状态变更
|
||||
export function subscribeUserStatus(userId: string, callback: (user: User) => void) {
|
||||
return pb.collection('users').subscribe('*', (payload) => {
|
||||
if (payload.record.id === userId) {
|
||||
callback(payload.record as unknown as User)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
<!-- src/components/common/PasswordInput.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: string
|
||||
placeholder?: string
|
||||
id?: string
|
||||
required?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string): void
|
||||
}>()
|
||||
|
||||
const visible = ref(false)
|
||||
|
||||
const inputType = computed(() => visible.value ? 'text' : 'password')
|
||||
|
||||
const inputValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
|
||||
function toggleVisibility() {
|
||||
visible.value = !visible.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="password-input">
|
||||
<input
|
||||
:id="id"
|
||||
:type="inputType"
|
||||
:value="inputValue"
|
||||
:placeholder="placeholder"
|
||||
:required="required"
|
||||
@input="(e: any) => inputValue = e.target.value"
|
||||
/>
|
||||
<button type="button" class="toggle-btn" @click="toggleVisibility">
|
||||
<svg v-if="!visible" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
<svg v-else width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
|
||||
<line x1="1" y1="1" x2="23" y2="23"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.password-input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.password-input input {
|
||||
width: 100%;
|
||||
padding: 12px 40px 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.password-input input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.toggle-btn:hover {
|
||||
color: #667eea;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,161 @@
|
||||
<!-- src/components/team/IdleMembersList.vue -->
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import type { UserStatus } from '@/types'
|
||||
import { sendInvitation } from '@/api/invitations'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
interface Props {
|
||||
status?: UserStatus
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
status: 'idle'
|
||||
})
|
||||
|
||||
const groupStore = useGroupStore()
|
||||
|
||||
const idleMembers = computed(() =>
|
||||
groupStore.currentMembers.filter(m => m.status === props.status)
|
||||
)
|
||||
|
||||
async function inviteMember(userId: string, username: string) {
|
||||
try {
|
||||
// 这里需要先创建临时小组，或者检查是否有活跃的临时小组
|
||||
// 简化版本：发送邀请
|
||||
await sendInvitation({
|
||||
to: userId,
|
||||
teamSession: '' // 实际使用时需要先创建临时小组
|
||||
})
|
||||
ElMessage.success(`已邀请 ${username}`)
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '邀请失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="idle-members-list">
|
||||
<h3 class="list-title">
|
||||
{{ status === 'idle' ? '空闲成员' : '成员列表' }}
|
||||
<span class="count">({{ idleMembers.length }})</span>
|
||||
</h3>
|
||||
|
||||
<div v-if="idleMembers.length === 0" class="empty">
|
||||
{{ status === 'idle' ? '暂无空闲成员' : '暂无成员' }}
|
||||
</div>
|
||||
|
||||
<div v-else class="member-list">
|
||||
<div
|
||||
v-for="member in idleMembers"
|
||||
:key="member.id"
|
||||
class="member-item"
|
||||
>
|
||||
<img
|
||||
:src="member.avatar || '/default-avatar.png'"
|
||||
:alt="member.username"
|
||||
class="avatar"
|
||||
/>
|
||||
<div class="member-info">
|
||||
<span class="username">{{ member.username }}</span>
|
||||
<span v-if="member.statusNote" class="status-note">{{ member.statusNote }}</span>
|
||||
</div>
|
||||
<button
|
||||
v-if="status === 'idle'"
|
||||
class="invite-btn"
|
||||
@click="inviteMember(member.id, member.username)"
|
||||
>
|
||||
邀请
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.idle-members-list {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.count {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.member-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--el-bg-color-page);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.member-item:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.member-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-note {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
padding: 6px 16px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: var(--el-color-primary);
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.invite-btn:hover {
|
||||
background: var(--el-color-primary-light-3);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,195 @@
|
||||
<!-- src/components/team/InvitationCard.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { Invitation } from '@/types'
|
||||
import { respondInvitation } from '@/api/invitations'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
interface Props {
|
||||
invitation: Invitation
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
responded: [id: string, accepted: boolean]
|
||||
}>()
|
||||
|
||||
const rejectReason = ref('')
|
||||
const showRejectInput = ref(false)
|
||||
|
||||
async function acceptInvitation() {
|
||||
try {
|
||||
await respondInvitation(props.invitation.id, 'accepted')
|
||||
ElMessage.success('已接受邀请')
|
||||
emit('responded', props.invitation.id, true)
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '接受邀请失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function rejectInvitation() {
|
||||
if (!showRejectInput.value) {
|
||||
showRejectInput.value = true
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await respondInvitation(props.invitation.id, 'rejected', rejectReason.value)
|
||||
ElMessage.success('已拒绝邀请')
|
||||
emit('responded', props.invitation.id, false)
|
||||
showRejectInput.value = false
|
||||
rejectReason.value = ''
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '拒绝邀请失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="invitation-card">
|
||||
<div class="invitation-header">
|
||||
<img
|
||||
:src="invitation.expand?.from?.avatar || '/default-avatar.png'"
|
||||
:alt="invitation.expand?.from?.username"
|
||||
class="avatar"
|
||||
/>
|
||||
<div class="invitation-info">
|
||||
<span class="inviter-name">{{ invitation.expand?.from?.username }}</span>
|
||||
<span class="invitation-text">邀请你加入</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="invitation.expand?.teamSession" class="session-info">
|
||||
<span class="game-name">{{ invitation.expand.teamSession.gameName }}</span>
|
||||
<span class="session-name">{{ invitation.expand.teamSession.name }}</span>
|
||||
</div>
|
||||
|
||||
<div class="invitation-actions">
|
||||
<button class="action-btn accept" @click="acceptInvitation">
|
||||
接受
|
||||
</button>
|
||||
<button class="action-btn reject" @click="rejectInvitation">
|
||||
{{ showRejectInput ? '确认拒绝' : '拒绝' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="showRejectInput" class="reject-input">
|
||||
<textarea
|
||||
v-model="rejectReason"
|
||||
placeholder="填写拒绝原因（可选）"
|
||||
rows="2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.invitation-card {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.invitation-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.invitation-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.inviter-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.invitation-text {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.session-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 12px;
|
||||
background: var(--el-bg-color-page);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.session-name {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.invitation-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.accept {
|
||||
background: var(--el-color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.accept:hover {
|
||||
background: var(--el-color-primary-light-3);
|
||||
}
|
||||
|
||||
.reject {
|
||||
background: var(--el-fill-color);
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.reject:hover {
|
||||
background: var(--el-fill-color-dark);
|
||||
}
|
||||
|
||||
.reject-input {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.reject-input textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.reject-input textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!-- src/components/team/StatusToggle.vue -->
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { UserStatusMap, UserStatusIcon, type UserStatus } from '@/types'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const currentStatus = computed(() => userStore.userStatus)
|
||||
const statusIcon = computed(() => UserStatusIcon[currentStatus.value])
|
||||
const statusText = computed(() => UserStatusMap[currentStatus.value])
|
||||
|
||||
async function setStatus(status: UserStatus) {
|
||||
await userStore.setStatus(status)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dropdown trigger="click" @command="setStatus">
|
||||
<span class="status-toggle">
|
||||
<span class="status-icon">{{ statusIcon }}</span>
|
||||
<span class="status-text">{{ statusText }}</span>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="idle">
|
||||
<span class="menu-item">🟢 空闲</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="working">
|
||||
<span class="menu-item">🔴 工作中</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="in_team" :disabled="currentStatus !== 'in_team'">
|
||||
<span class="menu-item">🔵 组队中</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="away">
|
||||
<span class="menu-item">⚫ 离开</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.status-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.status-toggle:hover {
|
||||
background-color: var(--el-bg-color-page);
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,188 @@
|
||||
<!-- src/components/team/TeamSessionPanel.vue -->
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useTeamStore } from '@/stores/team'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { TeamStatusMap } from '@/types'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
|
||||
const teamStore = useTeamStore()
|
||||
const groupStore = useGroupStore()
|
||||
|
||||
const session = computed(() => teamStore.currentSession)
|
||||
const statusText = computed(() => session.value ? TeamStatusMap[session.value.status] : '')
|
||||
|
||||
const memberDetails = computed(() => {
|
||||
if (!session.value) return []
|
||||
return session.value.members
|
||||
.map(id => groupStore.currentMembers.find(m => m.id === id))
|
||||
.filter((m): m is NonNullable<typeof m> => Boolean(m))
|
||||
})
|
||||
|
||||
async function endGame() {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
'确定要结束当前游戏吗？临时小组将被解散。',
|
||||
'确认',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}
|
||||
)
|
||||
await teamStore.finishGame()
|
||||
} catch {
|
||||
// 用户取消
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="session" class="team-session-panel">
|
||||
<div class="panel-header">
|
||||
<h3 class="session-name">{{ session.name }}</h3>
|
||||
<span class="session-status">{{ statusText }}</span>
|
||||
</div>
|
||||
|
||||
<div class="session-game">
|
||||
<span class="game-label">游戏:</span>
|
||||
<span class="game-name">{{ session.gameName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="members-section">
|
||||
<h4 class="members-title">成员 ({{ memberDetails.length }})</h4>
|
||||
<div class="members-list">
|
||||
<div
|
||||
v-for="member in memberDetails"
|
||||
:key="member.id"
|
||||
class="member-item"
|
||||
>
|
||||
<img
|
||||
:src="member.avatar || '/default-avatar.png'"
|
||||
:alt="member.username"
|
||||
class="avatar"
|
||||
/>
|
||||
<span class="username">{{ member.username }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="end-game-btn" @click="endGame">
|
||||
游戏结束
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="no-session">
|
||||
<p>暂未加入任何临时小组</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.team-session-panel {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--el-color-primary);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.session-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.session-status {
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.session-game {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: var(--el-bg-color-page);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.game-label {
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.members-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.members-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.members-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
background: var(--el-bg-color-page);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.end-game-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: var(--el-color-danger);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.end-game-btn:hover {
|
||||
background: var(--el-color-danger-light-3);
|
||||
}
|
||||
|
||||
.no-session {
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,127 @@
|
||||
<!-- src/components/team/WorkScheduleModal.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { ElDialog, ElCheckbox, ElTimeSelect, ElButton } from 'element-plus'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: boolean]
|
||||
}>()
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const workdays = ref<number[]>(userStore.user?.workdays || [])
|
||||
const workStartTime = ref<string>(userStore.user?.workStartTime || '09:00')
|
||||
|
||||
const dayOptions = [
|
||||
{ label: '周一', value: 1 },
|
||||
{ label: '周二', value: 2 },
|
||||
{ label: '周三', value: 3 },
|
||||
{ label: '周四', value: 4 },
|
||||
{ label: '周五', value: 5 },
|
||||
{ label: '周六', value: 6 },
|
||||
{ label: '周日', value: 7 }
|
||||
]
|
||||
|
||||
const visible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
|
||||
async function saveSchedule() {
|
||||
try {
|
||||
await userStore.setWorkSchedule({
|
||||
workdays: workdays.value,
|
||||
workStartTime: workStartTime.value
|
||||
})
|
||||
visible.value = false
|
||||
} catch (error: any) {
|
||||
console.error('保存工作时间失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
function handleOpen() {
|
||||
workdays.value = userStore.user?.workdays || []
|
||||
workStartTime.value = userStore.user?.workStartTime || '09:00'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="visible"
|
||||
title="设置工作时间"
|
||||
width="400px"
|
||||
@open="handleOpen"
|
||||
>
|
||||
<div class="schedule-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label">工作日</label>
|
||||
<el-checkbox-group v-model="workdays">
|
||||
<el-checkbox
|
||||
v-for="day in dayOptions"
|
||||
:key="day.value"
|
||||
:label="day.value"
|
||||
>
|
||||
{{ day.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">工作开始时间</label>
|
||||
<el-time-select
|
||||
v-model="workStartTime"
|
||||
start="00:00"
|
||||
end="23:30"
|
||||
step="00:30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-hint">
|
||||
<p>在工作日的设定时间，你的状态会自动变为"工作中"</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="saveSchedule">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.schedule-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
padding: 12px;
|
||||
background: var(--el-color-info-light-9);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.form-hint p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-info);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,102 @@
|
||||
// src/composables/useRealtime.ts
|
||||
import { onUnmounted } from 'vue'
|
||||
import { pb } from '@/api/pocketbase'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { useTeamStore } from '@/stores/team'
|
||||
|
||||
type UnsubscribeFunc = () => Promise<void>
|
||||
|
||||
export function useRealtime() {
|
||||
const userStore = useUserStore()
|
||||
const groupStore = useGroupStore()
|
||||
const teamStore = useTeamStore()
|
||||
|
||||
const subscriptions: UnsubscribeFunc[] = []
|
||||
|
||||
// 订阅用户状态变更（群组成员）
|
||||
async function subscribeGroupMembers() {
|
||||
if (!groupStore.currentGroup) return
|
||||
|
||||
const unsub = await pb.collection('users').subscribe('*', (payload) => {
|
||||
const userId = payload.record.id
|
||||
const isMember = groupStore.currentGroup?.members.includes(userId)
|
||||
|
||||
if (isMember) {
|
||||
// 更新成员状态 - 重新加载成员列表
|
||||
groupStore.setCurrentGroup(groupStore.currentGroupId)
|
||||
}
|
||||
})
|
||||
|
||||
subscriptions.push(unsub)
|
||||
}
|
||||
|
||||
// 订阅邀请变更
|
||||
async function subscribeInvitations() {
|
||||
const userId = userStore.userId
|
||||
if (!userId) return
|
||||
|
||||
const unsub = await pb.collection('invitations').subscribe('*', async () => {
|
||||
// 更新邀请数量
|
||||
await teamStore.getPendingCount()
|
||||
// TODO: 更新 UI 显示邀请数量
|
||||
})
|
||||
|
||||
subscriptions.push(unsub)
|
||||
}
|
||||
|
||||
// 订阅临时小组变更
|
||||
async function subscribeTeamSession() {
|
||||
const session = teamStore.currentSession
|
||||
if (!session) return
|
||||
|
||||
const unsub = await pb.collection('teamSessions').subscribe('*', (payload) => {
|
||||
if (payload.record.id === session.id) {
|
||||
// 更新临时小组状态
|
||||
teamStore.loadActiveSession()
|
||||
}
|
||||
})
|
||||
|
||||
subscriptions.push(unsub)
|
||||
}
|
||||
|
||||
// 订阅群组变更
|
||||
async function subscribeGroup(groupId: string) {
|
||||
const unsub = await pb.collection('groups').subscribe('*', (payload) => {
|
||||
if (payload.record.id === groupId) {
|
||||
// 更新群组信息
|
||||
groupStore.loadGroups()
|
||||
if (groupStore.currentGroupId === groupId) {
|
||||
groupStore.setCurrentGroup(groupId)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
subscriptions.push(unsub)
|
||||
}
|
||||
|
||||
// 清理所有订阅
|
||||
async function unsubscribeAll() {
|
||||
for (const sub of subscriptions) {
|
||||
try {
|
||||
await sub()
|
||||
} catch (error) {
|
||||
console.error('取消订阅失败:', error)
|
||||
}
|
||||
}
|
||||
subscriptions.length = 0
|
||||
}
|
||||
|
||||
// 组件卸载时自动清理
|
||||
onUnmounted(() => {
|
||||
unsubscribeAll()
|
||||
})
|
||||
|
||||
return {
|
||||
subscribeGroupMembers,
|
||||
subscribeInvitations,
|
||||
subscribeTeamSession,
|
||||
subscribeGroup,
|
||||
unsubscribeAll
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
// src/main.ts
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
|
||||
const app = createApp(App)
|
||||
const pinia = createPinia()
|
||||
|
||||
// 注册所有 Element Plus 图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
}
|
||||
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
app.use(ElementPlus)
|
||||
|
||||
app.mount('#app')
|
||||
@@ -0,0 +1,85 @@
|
||||
// src/router/index.ts
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
import { isAuthenticated } from '@/api/pocketbase'
|
||||
|
||||
// 路由配置
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
component: () => import('@/views/Login.vue'),
|
||||
meta: { requiresGuest: true }
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
name: 'Register',
|
||||
component: () => import('@/views/Register.vue'),
|
||||
meta: { requiresGuest: true }
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('@/views/Layout.vue'),
|
||||
meta: { requiresAuth: true },
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'Home',
|
||||
component: () => import('@/views/Home.vue')
|
||||
},
|
||||
{
|
||||
path: 'group/:id',
|
||||
name: 'GroupView',
|
||||
component: () => import('@/views/GroupView.vue'),
|
||||
props: true
|
||||
},
|
||||
{
|
||||
path: 'games',
|
||||
name: 'GamesLibrary',
|
||||
component: () => import('@/views/GamesLibrary.vue')
|
||||
},
|
||||
{
|
||||
path: 'profile',
|
||||
name: 'Profile',
|
||||
component: () => import('@/views/Profile.vue')
|
||||
},
|
||||
{
|
||||
path: 'settings',
|
||||
name: 'Settings',
|
||||
component: () => import('@/views/Settings.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () => import('@/views/NotFound.vue')
|
||||
}
|
||||
]
|
||||
|
||||
// 创建路由实例
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes
|
||||
})
|
||||
|
||||
// 路由守卫
|
||||
router.beforeEach((to, _from, next) => {
|
||||
const authenticated = isAuthenticated()
|
||||
|
||||
// 需要登录的页面
|
||||
if (to.meta.requiresAuth && !authenticated) {
|
||||
next({ name: 'Login', query: { redirect: to.fullPath } })
|
||||
return
|
||||
}
|
||||
|
||||
// 已登录用户访问登录/注册页
|
||||
if (to.meta.requiresGuest && authenticated) {
|
||||
next({ name: 'Home' })
|
||||
return
|
||||
}
|
||||
|
||||
next()
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,88 @@
|
||||
// src/stores/group.ts
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import type { Group, User } from '@/types'
|
||||
import { getUserGroups, getGroup, getGroupMembers } from '@/api/groups'
|
||||
|
||||
export const useGroupStore = defineStore('group', () => {
|
||||
// 状态
|
||||
const groups = ref<Group[]>([])
|
||||
const currentGroup = ref<Group | null>(null)
|
||||
const currentMembers = ref<User[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
// 计算属性
|
||||
const currentGroupId = computed(() => currentGroup.value?.id || '')
|
||||
const isGroupOwner = computed(() => {
|
||||
const userId = localStorage.getItem('userId')
|
||||
return currentGroup.value?.owner === userId
|
||||
})
|
||||
|
||||
// 加载用户的群组列表
|
||||
async function loadGroups() {
|
||||
try {
|
||||
loading.value = true
|
||||
groups.value = await getUserGroups()
|
||||
} catch (error) {
|
||||
console.error('加载群组列表失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 设置当前群组
|
||||
async function setCurrentGroup(groupId: string) {
|
||||
try {
|
||||
loading.value = true
|
||||
currentGroup.value = await getGroup(groupId)
|
||||
currentMembers.value = await getGroupMembers(groupId) as unknown as User[]
|
||||
} catch (error) {
|
||||
console.error('加载群组详情失败:', error)
|
||||
throw error
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 清除当前群组
|
||||
function clearCurrentGroup() {
|
||||
currentGroup.value = null
|
||||
currentMembers.value = []
|
||||
}
|
||||
|
||||
// 更新群组成员列表
|
||||
function updateMembers(members: User[]) {
|
||||
currentMembers.value = members
|
||||
}
|
||||
|
||||
// 添加群组到列表
|
||||
function addGroup(group: Group) {
|
||||
groups.value.push(group)
|
||||
}
|
||||
|
||||
// 从列表中移除群组
|
||||
function removeGroup(groupId: string) {
|
||||
const index = groups.value.findIndex(g => g.id === groupId)
|
||||
if (index !== -1) {
|
||||
groups.value.splice(index, 1)
|
||||
}
|
||||
if (currentGroup.value?.id === groupId) {
|
||||
clearCurrentGroup()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
groups,
|
||||
currentGroup,
|
||||
currentMembers,
|
||||
loading,
|
||||
currentGroupId,
|
||||
isGroupOwner,
|
||||
loadGroups,
|
||||
setCurrentGroup,
|
||||
clearCurrentGroup,
|
||||
updateMembers,
|
||||
addGroup,
|
||||
removeGroup
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,4 @@
|
||||
// src/stores/index.ts
|
||||
export { useUserStore } from './user'
|
||||
export { useGroupStore } from './group'
|
||||
export { useTeamStore } from './team'
|
||||
@@ -0,0 +1,117 @@
|
||||
// src/stores/team.ts
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import type { TeamSession, TeamStatus } from '@/types'
|
||||
import { getActiveTeamSession, createTeamSession, updateTeamStatus, endGame } from '@/api/sessions'
|
||||
import { getPendingInvitations, sendBulkInvitations } from '@/api/invitations'
|
||||
|
||||
export const useTeamStore = defineStore('team', () => {
|
||||
// 状态
|
||||
const currentSession = ref<TeamSession | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
// 计算属性
|
||||
const isInTeam = computed(() => currentSession.value !== null)
|
||||
const teamStatus = computed(() => currentSession.value?.status || 'dissolved')
|
||||
const teamMembers = computed(() => currentSession.value?.members || [])
|
||||
|
||||
// 加载活跃的临时小组
|
||||
async function loadActiveSession() {
|
||||
try {
|
||||
loading.value = true
|
||||
const session = await getActiveTeamSession()
|
||||
currentSession.value = session
|
||||
return session
|
||||
} catch (error) {
|
||||
console.error('加载临时小组失败:', error)
|
||||
currentSession.value = null
|
||||
return null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 创建临时小组
|
||||
async function createSession(data: {
|
||||
sourceGroup: string
|
||||
name: string
|
||||
gameName: string
|
||||
members: string[]
|
||||
}) {
|
||||
try {
|
||||
loading.value = true
|
||||
const session = await createTeamSession(data)
|
||||
currentSession.value = session
|
||||
|
||||
// 发送邀请
|
||||
await sendBulkInvitations(data.members, session.id)
|
||||
|
||||
return session
|
||||
} catch (error: any) {
|
||||
console.error('创建临时小组失败:', error)
|
||||
throw error
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 更新小组状态
|
||||
async function updateStatus(status: TeamStatus) {
|
||||
if (!currentSession.value) return
|
||||
|
||||
try {
|
||||
const updated = await updateTeamStatus(currentSession.value.id, status)
|
||||
currentSession.value = updated
|
||||
return updated
|
||||
} catch (error: any) {
|
||||
console.error('更新小组状态失败:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// 结束游戏
|
||||
async function finishGame() {
|
||||
if (!currentSession.value) return
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
await endGame(currentSession.value.id)
|
||||
currentSession.value = null
|
||||
} catch (error: any) {
|
||||
console.error('结束游戏失败:', error)
|
||||
throw error
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 清除当前小组
|
||||
function clearSession() {
|
||||
currentSession.value = null
|
||||
}
|
||||
|
||||
// 获取待处理邀请数量
|
||||
async function getPendingCount() {
|
||||
try {
|
||||
const invitations = await getPendingInvitations()
|
||||
return invitations.length
|
||||
} catch (error) {
|
||||
console.error('获取邀请数量失败:', error)
|
||||
return 0
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
currentSession,
|
||||
loading,
|
||||
isInTeam,
|
||||
teamStatus,
|
||||
teamMembers,
|
||||
loadActiveSession,
|
||||
createSession,
|
||||
updateStatus,
|
||||
finishGame,
|
||||
clearSession,
|
||||
getPendingCount
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,123 @@
|
||||
// src/stores/user.ts
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import type { User, UserStatus, WorkSchedule } from '@/types'
|
||||
import { pb, getCurrentUser, isAuthenticated, logout as pbLogout } from '@/api/pocketbase'
|
||||
import { getUser, updateUserStatus, updateWorkSchedule } from '@/api/users'
|
||||
|
||||
export const useUserStore = defineStore('user', () => {
|
||||
// 状态
|
||||
const user = ref<User | null>(null)
|
||||
const loading = ref(false)
|
||||
|
||||
// 计算属性
|
||||
const isLoggedIn = computed(() => isAuthenticated() && user.value !== null)
|
||||
const userStatus = computed(() => user.value?.status || 'away')
|
||||
const userId = computed(() => user.value?.id || '')
|
||||
|
||||
// 初始化用户信息
|
||||
async function initUser() {
|
||||
if (!isAuthenticated()) {
|
||||
user.value = null
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const authUser = getCurrentUser() as User
|
||||
// 获取完整用户信息
|
||||
user.value = await getUser(authUser.id)
|
||||
} catch (error) {
|
||||
console.error('初始化用户信息失败:', error)
|
||||
user.value = null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 登录
|
||||
async function login(email: string, password: string) {
|
||||
try {
|
||||
loading.value = true
|
||||
await pb.collection('users').authWithPassword(email, password)
|
||||
await initUser()
|
||||
} catch (error: any) {
|
||||
throw new Error(error.message || '登录失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 注册
|
||||
async function register(data: { email: string; password: string; passwordConfirm: string; username: string }) {
|
||||
try {
|
||||
loading.value = true
|
||||
await pb.collection('users').create(data)
|
||||
await login(data.email, data.password)
|
||||
} catch (error: any) {
|
||||
throw new Error(error.message || '注册失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 登出
|
||||
function logout() {
|
||||
pbLogout()
|
||||
user.value = null
|
||||
}
|
||||
|
||||
// 更新状态
|
||||
async function setStatus(status: UserStatus, note?: string) {
|
||||
try {
|
||||
const updated = await updateUserStatus(status, note)
|
||||
if (user.value) {
|
||||
user.value.status = status
|
||||
user.value.statusNote = note
|
||||
}
|
||||
return updated
|
||||
} catch (error: any) {
|
||||
throw new Error(error.message || '更新状态失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 更新工作时间
|
||||
async function setWorkSchedule(schedule: WorkSchedule) {
|
||||
try {
|
||||
const updated = await updateWorkSchedule(schedule)
|
||||
if (user.value) {
|
||||
user.value.workdays = schedule.workdays
|
||||
user.value.workStartTime = schedule.workStartTime
|
||||
user.value.nextWorkTime = updated.nextWorkTime
|
||||
}
|
||||
return updated
|
||||
} catch (error: any) {
|
||||
throw new Error(error.message || '更新工作时间失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 检查并自动更新工作时间状态
|
||||
function checkWorkSchedule() {
|
||||
if (!user.value || !user.value.nextWorkTime) return
|
||||
|
||||
const now = Math.floor(Date.now() / 1000)
|
||||
if (now >= user.value.nextWorkTime && user.value.status === 'idle') {
|
||||
setStatus('working')
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
user,
|
||||
loading,
|
||||
isLoggedIn,
|
||||
userStatus,
|
||||
userId,
|
||||
initUser,
|
||||
login,
|
||||
register,
|
||||
logout,
|
||||
setStatus,
|
||||
setWorkSchedule,
|
||||
checkWorkSchedule
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,128 @@
|
||||
// src/types/index.ts
|
||||
|
||||
// 用户状态
|
||||
export type UserStatus = 'idle' | 'working' | 'in_team' | 'away'
|
||||
|
||||
// 用户状态中文映射
|
||||
export const UserStatusMap: Record<UserStatus, string> = {
|
||||
idle: '空闲',
|
||||
working: '工作中',
|
||||
in_team: '组队中',
|
||||
away: '离开'
|
||||
}
|
||||
|
||||
// 用户状态图标
|
||||
export const UserStatusIcon: Record<UserStatus, string> = {
|
||||
idle: '🟢',
|
||||
working: '🔴',
|
||||
in_team: '🔵',
|
||||
away: '⚫'
|
||||
}
|
||||
|
||||
// 临时小组状态
|
||||
export type TeamStatus = 'recruiting' | 'playing' | 'finished' | 'dissolved'
|
||||
|
||||
export const TeamStatusMap: Record<TeamStatus, string> = {
|
||||
recruiting: '招募中',
|
||||
playing: '游戏中',
|
||||
finished: '已结束',
|
||||
dissolved: '已解散'
|
||||
}
|
||||
|
||||
// 邀请状态
|
||||
export type InviteStatus = 'pending' | 'accepted' | 'rejected'
|
||||
|
||||
export const InviteStatusMap: Record<InviteStatus, string> = {
|
||||
pending: '等待响应',
|
||||
accepted: '已接受',
|
||||
rejected: '已拒绝'
|
||||
}
|
||||
|
||||
// 游戏平台
|
||||
export type GamePlatform = 'PC' | 'PS5' | 'Xbox' | 'Switch' | 'Mobile'
|
||||
|
||||
// 用户
|
||||
export interface User {
|
||||
id: string
|
||||
username: string
|
||||
email: string
|
||||
avatar?: string
|
||||
status: UserStatus
|
||||
statusNote?: string
|
||||
maxGroups: number
|
||||
workdays: number[]
|
||||
workStartTime: string
|
||||
nextWorkTime?: number
|
||||
points: number
|
||||
created: string
|
||||
updated: string
|
||||
}
|
||||
|
||||
// 群组
|
||||
export interface Group {
|
||||
id: string
|
||||
name: string
|
||||
description?: string
|
||||
owner: string
|
||||
members: string[]
|
||||
maxMembers: number
|
||||
created: string
|
||||
updated: string
|
||||
expand?: {
|
||||
owner?: User
|
||||
members?: User[]
|
||||
}
|
||||
}
|
||||
|
||||
// 临时小组
|
||||
export interface TeamSession {
|
||||
id: string
|
||||
name: string
|
||||
sourceGroup: string
|
||||
gameName: string
|
||||
members: string[]
|
||||
status: TeamStatus
|
||||
dissolvedAt?: string
|
||||
created: string
|
||||
updated: string
|
||||
expand?: {
|
||||
members?: User[]
|
||||
sourceGroup?: Group
|
||||
}
|
||||
}
|
||||
|
||||
// 邀请
|
||||
export interface Invitation {
|
||||
id: string
|
||||
from: string
|
||||
to: string
|
||||
teamSession: string
|
||||
status: InviteStatus
|
||||
rejectReason?: string
|
||||
respondedAt?: string
|
||||
created: string
|
||||
updated: string
|
||||
expand?: {
|
||||
from?: User
|
||||
to?: User
|
||||
teamSession?: TeamSession
|
||||
}
|
||||
}
|
||||
|
||||
// 游戏
|
||||
export interface Game {
|
||||
id: string
|
||||
name: string
|
||||
platform?: GamePlatform
|
||||
tags?: string[]
|
||||
cover?: string
|
||||
popularCount: number
|
||||
created: string
|
||||
updated: string
|
||||
}
|
||||
|
||||
// 工作时间设定
|
||||
export interface WorkSchedule {
|
||||
workdays: number[]
|
||||
workStartTime: string
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
<!-- src/views/GamesLibrary.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { getGames, getAllPlatforms } from '@/api/games'
|
||||
import type { Game, GamePlatform } from '@/types'
|
||||
import { ElCard, ElInput, ElSelect, ElOption } from 'element-plus'
|
||||
|
||||
const games = ref<Game[]>([])
|
||||
const loading = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const selectedPlatform = ref<GamePlatform | ''>('')
|
||||
const platforms = getAllPlatforms()
|
||||
|
||||
onMounted(async () => {
|
||||
await loadGames()
|
||||
})
|
||||
|
||||
async function loadGames() {
|
||||
try {
|
||||
loading.value = true
|
||||
const result = await getGames({
|
||||
limit: 50,
|
||||
search: searchQuery.value || undefined,
|
||||
platform: selectedPlatform.value || undefined
|
||||
})
|
||||
games.value = result.items
|
||||
} catch (error) {
|
||||
console.error('加载游戏失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleSearch() {
|
||||
loadGames()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="games-library">
|
||||
<div class="page-header">
|
||||
<h1>游戏库</h1>
|
||||
<div class="filters">
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索游戏..."
|
||||
clearable
|
||||
@input="handleSearch"
|
||||
/>
|
||||
<el-select v-model="selectedPlatform" placeholder="选择平台" clearable @change="loadGames">
|
||||
<el-option
|
||||
v-for="platform in platforms"
|
||||
:key="platform"
|
||||
:label="platform"
|
||||
:value="platform"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="loading">加载中...</div>
|
||||
|
||||
<div v-else-if="games.length === 0" class="empty">
|
||||
<p>暂无游戏</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="games-grid">
|
||||
<el-card v-for="game in games" :key="game.id" class="game-card">
|
||||
<img
|
||||
:src="game.cover || '/game-placeholder.png'"
|
||||
:alt="game.name"
|
||||
class="game-cover"
|
||||
/>
|
||||
<div class="game-info">
|
||||
<h3 class="game-name">{{ game.name }}</h3>
|
||||
<p class="game-platform">{{ game.platform }}</p>
|
||||
<div class="game-tags">
|
||||
<span v-for="tag in game.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.games-library {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filters .el-input {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 60px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.games-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.game-card {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/4;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.game-info {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 4px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.game-platform {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.game-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 2px 8px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,159 @@
|
||||
<!-- src/views/GroupView.vue -->
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import TeamSessionPanel from '@/components/team/TeamSessionPanel.vue'
|
||||
import IdleMembersList from '@/components/team/IdleMembersList.vue'
|
||||
import { ElCard, ElButton } from 'element-plus'
|
||||
|
||||
const route = useRoute()
|
||||
const groupStore = useGroupStore()
|
||||
|
||||
const groupId = route.params.id as string
|
||||
|
||||
onMounted(async () => {
|
||||
await groupStore.setCurrentGroup(groupId)
|
||||
})
|
||||
|
||||
async function refreshMembers() {
|
||||
await groupStore.setCurrentGroup(groupId)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="group-view">
|
||||
<div class="page-header">
|
||||
<h1>{{ groupStore.currentGroup?.name }}</h1>
|
||||
<p class="description">{{ groupStore.currentGroup?.description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="page-content">
|
||||
<!-- 左侧边栏 -->
|
||||
<aside class="sidebar-left">
|
||||
<team-session-panel />
|
||||
|
||||
<el-card class="card mt-16">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h3>群组信息</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="group-info">
|
||||
<div class="info-item">
|
||||
<span class="label">成员数</span>
|
||||
<span class="value">{{ groupStore.currentMembers.length }} / {{ groupStore.currentGroup?.maxMembers }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">群主</span>
|
||||
<span class="value">
|
||||
{{ groupStore.currentMembers.find(m => m.id === groupStore.currentGroup?.owner)?.username }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main-content">
|
||||
<idle-membersList status="idle" />
|
||||
</main>
|
||||
|
||||
<!-- 右侧边栏 -->
|
||||
<aside class="sidebar-right">
|
||||
<el-card class="card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h3>所有成员</h3>
|
||||
<el-button size="small" @click="refreshMembers">刷新</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<idle-membersList />
|
||||
</el-card>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.group-view {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr 280px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sidebar-left,
|
||||
.sidebar-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.mt-16 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.group-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info-item .label {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.info-item .value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,248 @@
|
||||
<!-- src/views/Home.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { getPopularGames } from '@/api/games'
|
||||
import type { Game } from '@/types'
|
||||
import TeamSessionPanel from '@/components/team/TeamSessionPanel.vue'
|
||||
import IdleMembersList from '@/components/team/IdleMembersList.vue'
|
||||
import { ElCard, ElButton, ElEmpty } from 'element-plus'
|
||||
|
||||
const router = useRouter()
|
||||
const groupStore = useGroupStore()
|
||||
|
||||
const popularGames = ref<Game[]>([])
|
||||
const loading = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
await loadPopularGames()
|
||||
})
|
||||
|
||||
async function loadPopularGames() {
|
||||
try {
|
||||
loading.value = true
|
||||
popularGames.value = await getPopularGames(8)
|
||||
} catch (error) {
|
||||
console.error('加载热门游戏失败:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectGroup(groupId: string) {
|
||||
groupStore.setCurrentGroup(groupId)
|
||||
router.push({ name: 'GroupView', params: { id: groupId } })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="home-page">
|
||||
<div class="page-content">
|
||||
<!-- 左侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<el-card class="card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<h3>我的群组</h3>
|
||||
<el-button size="small" type="primary">+ 创建</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-if="groupStore.groups.length === 0" class="empty">
|
||||
<el-empty description="暂无群组" :image-size="80" />
|
||||
</div>
|
||||
|
||||
<div v-else class="group-list">
|
||||
<div
|
||||
v-for="group in groupStore.groups"
|
||||
:key="group.id"
|
||||
class="group-item"
|
||||
@click="selectGroup(group.id)"
|
||||
>
|
||||
<div class="group-info">
|
||||
<span class="group-name">{{ group.name }}</span>
|
||||
<span class="group-members">{{ group.members.length }} 成员</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<main class="main-content">
|
||||
<!-- 当前临时小组 -->
|
||||
<team-session-panel />
|
||||
|
||||
<!-- 热门游戏 -->
|
||||
<el-card class="card mt-16">
|
||||
<template #header>
|
||||
<h3>热门游戏</h3>
|
||||
</template>
|
||||
|
||||
<div v-if="loading" class="loading">加载中...</div>
|
||||
|
||||
<div v-else class="games-grid">
|
||||
<div
|
||||
v-for="game in popularGames"
|
||||
:key="game.id"
|
||||
class="game-card"
|
||||
@click="router.push({ name: 'GamesLibrary' })"
|
||||
>
|
||||
<img
|
||||
:src="game.cover || '/game-placeholder.png'"
|
||||
:alt="game.name"
|
||||
class="game-cover"
|
||||
/>
|
||||
<div class="game-info">
|
||||
<span class="game-name">{{ game.name }}</span>
|
||||
<span class="game-platform">{{ game.platform }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</main>
|
||||
|
||||
<!-- 右侧边栏 -->
|
||||
<aside class="sidebar">
|
||||
<el-card class="card">
|
||||
<template #header>
|
||||
<h3>空闲成员</h3>
|
||||
</template>
|
||||
|
||||
<idle-membersList />
|
||||
</el-card>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.home-page {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr 280px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.mt-16 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.group-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.group-item {
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--el-fill-color-light);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.group-item:hover {
|
||||
background: var(--el-fill-color);
|
||||
}
|
||||
|
||||
.group-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.group-members {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.games-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.game-card {
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/4;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.game-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.game-platform {
|
||||
font-size: 11px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,197 @@
|
||||
<!-- src/views/Layout.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useGroupStore } from '@/stores/group'
|
||||
import { useTeamStore } from '@/stores/team'
|
||||
import StatusToggle from '@/components/team/StatusToggle.vue'
|
||||
import WorkScheduleModal from '@/components/team/WorkScheduleModal.vue'
|
||||
import { ElBadge, ElButton, ElIcon } from 'element-plus'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
const groupStore = useGroupStore()
|
||||
const teamStore = useTeamStore()
|
||||
|
||||
const showScheduleModal = ref(false)
|
||||
const pendingCount = ref(0)
|
||||
|
||||
onMounted(async () => {
|
||||
await userStore.initUser()
|
||||
await groupStore.loadGroups()
|
||||
await teamStore.loadActiveSession()
|
||||
pendingCount.value = await teamStore.getPendingCount()
|
||||
})
|
||||
|
||||
async function handleLogout() {
|
||||
userStore.logout()
|
||||
router.push({ name: 'Login' })
|
||||
}
|
||||
|
||||
function showInviteModal() {
|
||||
// TODO: 实现邀请模态框
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<!-- 顶部导航 -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<h1 class="logo">Game Group</h1>
|
||||
</div>
|
||||
|
||||
<div class="header-center">
|
||||
<nav class="nav">
|
||||
<router-link to="/" class="nav-link" active-class="active">
|
||||
首页
|
||||
</router-link>
|
||||
<router-link to="/games" class="nav-link" active-class="active">
|
||||
游戏库
|
||||
</router-link>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<el-badge :value="pendingCount" :hidden="pendingCount === 0">
|
||||
<el-button circle @click="showInviteModal">
|
||||
<el-icon>🔔</el-icon>
|
||||
</el-button>
|
||||
</el-badge>
|
||||
|
||||
<status-toggle />
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<span class="user-dropdown">
|
||||
<img
|
||||
:src="userStore.user?.avatar || '/default-avatar.png'"
|
||||
class="user-avatar"
|
||||
/>
|
||||
<span class="user-name">{{ userStore.user?.username }}</span>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="router.push('/profile')">
|
||||
个人中心
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="router.push('/settings')">
|
||||
设置
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item divided @click="handleLogout">
|
||||
退出登录
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<main class="main">
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
<!-- 工作时间设置弹窗 -->
|
||||
<work-schedule-modal v-model="showScheduleModal" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layout {
|
||||
min-height: 100vh;
|
||||
background: var(--el-bg-color-page);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
height: 60px;
|
||||
background: var(--el-bg-color);
|
||||
border-bottom: 1px solid var(--el-border-color);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: var(--el-text-color-primary);
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
background: var(--el-color-primary-light-9);
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.user-dropdown {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.user-dropdown:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.main {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,176 @@
|
||||
<!-- src/views/Login.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import PasswordInput from '@/components/common/PasswordInput.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
async function handleLogin() {
|
||||
if (!email.value || !password.value) {
|
||||
ElMessage.warning('请输入邮箱和密码')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
await userStore.login(email.value, password.value)
|
||||
|
||||
const redirect = route.query.redirect as string || '/'
|
||||
router.push(redirect)
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '登录失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goToRegister() {
|
||||
router.push({ name: 'Register', query: route.query })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-card">
|
||||
<h1 class="title">登录 Game Group</h1>
|
||||
|
||||
<form class="login-form" @submit.prevent="handleLogin">
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
placeholder="请输入邮箱"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<PasswordInput
|
||||
id="password"
|
||||
v-model="password"
|
||||
placeholder="请输入密码"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn" :disabled="loading">
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="footer-links">
|
||||
<span>还没有账号？</span>
|
||||
<a @click="goToRegister">立即注册</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin: 0 0 32px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.submit-btn:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #667eea;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!-- src/views/NotFound.vue -->
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function goHome() {
|
||||
router.push({ name: 'Home' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="not-found">
|
||||
<div class="content">
|
||||
<h1>404</h1>
|
||||
<p>抱歉，您访问的页面不存在</p>
|
||||
<button class="home-btn" @click="goHome">
|
||||
返回首页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.not-found {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
font-size: 72px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 16px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 16px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
padding: 12px 32px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.home-btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,127 @@
|
||||
<!-- src/views/Profile.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElCard, ElInput, ElButton, ElMessage } from 'element-plus'
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const username = ref(userStore.user?.username || '')
|
||||
const email = ref(userStore.user?.email || '')
|
||||
const avatar = ref(userStore.user?.avatar || '')
|
||||
const loading = ref(false)
|
||||
|
||||
async function saveProfile() {
|
||||
try {
|
||||
loading.value = true
|
||||
// await updateProfile({ username: username.value, avatar: avatar.value })
|
||||
ElMessage.success('保存成功')
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '保存失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleAvatarUpload() {
|
||||
// TODO: 实现头像上传
|
||||
ElMessage.info('头像上传功能待实现')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="profile-page">
|
||||
<h1>个人中心</h1>
|
||||
|
||||
<el-card class="profile-card">
|
||||
<div class="profile-form">
|
||||
<div class="avatar-section">
|
||||
<img :src="avatar || '/default-avatar.png'" class="avatar" />
|
||||
<el-button @click="handleAvatarUpload">更换头像</el-button>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>用户名</label>
|
||||
<el-input v-model="username" placeholder="请输入用户名" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>邮箱</label>
|
||||
<el-input v-model="email" disabled />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>状态</label>
|
||||
<div class="status-display">
|
||||
<span>{{ userStore.userStatus }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<el-button type="primary" :loading="loading" @click="saveProfile">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profile-page {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.profile-page h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.profile-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-display {
|
||||
padding: 8px 16px;
|
||||
background: var(--el-fill-color-light);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,213 @@
|
||||
<!-- src/views/Register.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import PasswordInput from '@/components/common/PasswordInput.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const userStore = useUserStore()
|
||||
|
||||
const username = ref('')
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const passwordConfirm = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
async function handleRegister() {
|
||||
if (!username.value || !email.value || !password.value) {
|
||||
ElMessage.warning('请填写所有必填项')
|
||||
return
|
||||
}
|
||||
|
||||
if (password.value !== passwordConfirm.value) {
|
||||
ElMessage.warning('两次输入的密码不一致')
|
||||
return
|
||||
}
|
||||
|
||||
if (password.value.length < 6) {
|
||||
ElMessage.warning('密码长度至少为 6 位')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
await userStore.register({
|
||||
username: username.value,
|
||||
email: email.value,
|
||||
password: password.value,
|
||||
passwordConfirm: passwordConfirm.value
|
||||
})
|
||||
|
||||
ElMessage.success('注册成功')
|
||||
router.push({ name: 'Home' })
|
||||
} catch (error: any) {
|
||||
ElMessage.error(error.message || '注册失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function goToLogin() {
|
||||
router.push({ name: 'Login' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="register-page">
|
||||
<div class="register-card">
|
||||
<h1 class="title">注册 Game Group</h1>
|
||||
|
||||
<form class="register-form" @submit.prevent="handleRegister">
|
||||
<div class="form-group">
|
||||
<label for="username">用户名</label>
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
type="text"
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">邮箱</label>
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
placeholder="请输入邮箱"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">密码</label>
|
||||
<PasswordInput
|
||||
id="password"
|
||||
v-model="password"
|
||||
placeholder="请输入密码（至少6位）"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="passwordConfirm">确认密码</label>
|
||||
<PasswordInput
|
||||
id="passwordConfirm"
|
||||
v-model="passwordConfirm"
|
||||
placeholder="请再次输入密码"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn" :disabled="loading">
|
||||
{{ loading ? '注册中...' : '注册' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="footer-links">
|
||||
<span>已有账号？</span>
|
||||
<a @click="goToLogin">立即登录</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.register-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.register-card {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin: 0 0 32px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.register-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.submit-btn:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin-top: 24px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #667eea;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,112 @@
|
||||
<!-- src/views/Settings.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import WorkScheduleModal from '@/components/team/WorkScheduleModal.vue'
|
||||
|
||||
const showScheduleModal = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="settings-page">
|
||||
<h1>设置</h1>
|
||||
|
||||
<div class="settings-list">
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>工作时间</h3>
|
||||
<p>设置工作日和工作开始时间，系统会自动将你的状态设置为"工作中"</p>
|
||||
</div>
|
||||
<button class="setting-btn" @click="showScheduleModal = true">
|
||||
配置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>通知设置</h3>
|
||||
<p>配置邀请通知的显示方式</p>
|
||||
</div>
|
||||
<button class="setting-btn" disabled>
|
||||
即将推出
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>隐私设置</h3>
|
||||
<p>控制谁可以看到你的在线状态</p>
|
||||
</div>
|
||||
<button class="setting-btn" disabled>
|
||||
即将推出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<work-schedule-modal v-model="showScheduleModal" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.settings-page {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.settings-page h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 24px;
|
||||
}
|
||||
|
||||
.settings-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
background: var(--el-bg-color);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
}
|
||||
|
||||
.setting-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.setting-info h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
|
||||
.setting-info p {
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.setting-btn {
|
||||
padding: 8px 20px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 8px;
|
||||
background: var(--el-fill-color-light);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.setting-btn:hover:not(:disabled) {
|
||||
background: var(--el-fill-color);
|
||||
border-color: var(--el-border-color-darker);
|
||||
}
|
||||
|
||||
.setting-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
Vendored
+15
@@ -0,0 +1,15 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_PB_URL: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
Reference in New Issue
Block a user